monitoring: Improve default CSSsandbox/jobol/css

Change-Id: Ifacfd133088c792223625b453219304734bda0fe
Signed-off-by: Jose Bollo <jose.bollo@iot.bzh>

3 files changed, 452 insertions, 2 deletions

diff --git a/test/monitoring/monitor-iot.css b/test/monitoring/monitor-iot.css
new file mode 100644
index 00000000..bb813736
--- /dev/null
+++ b/test/monitoring/monitor-iot.css
@@ -0,0 +1,339 @@
+/*
+ * Copyright (C) 2017, 2018 "IoT.bzh"
+ * Author: José Bollo <jose.bollo@iot.bzh>
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*******************************************************************/
+/* top */
+html {
+	margin: 2px;
+	background: white url(triskel_iot_bzh.svg) right bottom fixed no-repeat;
+	color: black;
+	font-family: "Lucida Console", Monaco, monospace;
+	min-height: 100%;
+}
+
+/*******************************************************************/
+/* head */
+
+#logo {
+	background: url(iot-bzh-logo-small.png) center/100% no-repeat;
+	height: 60px;
+	width: 250px;
+	float: right;
+}
+
+#title {
+	font-weight: bolder;
+	font-size: 40px;
+	padding: 10px;
+	margin: auto;
+	float: left;
+}
+
+#connected {
+	margin: 5px;
+	padding: 10px;
+	border: solid 4px;
+	border-radius: 7px;
+	float: right;
+}
+
+#connected.ok { color: #06e306; }
+#connected.error { color: #f44; }
+
+/*******************************************************************/
+/* connection area */
+
+
+#params {
+	border: dashed 4px #ff2626;
+	padding: 30px;
+	margin: 10px;
+	border-radius: 0px 50px;
+}
+
+/*******************************************************************/
+/* main area */
+
+#global {
+	background: #ff5;
+}
+
+.expert {
+	text-align: center;
+	font-weight: bolder;
+	font-size: larger;
+	text-decoration: underline;
+}
+
+#trace-events {
+	margin-left: 10px;
+	margin-right: 10px;
+}
+
+/*******************************************************************/
+/* setting for apis */
+
+#controls .api {
+	margin: 2px;
+	padding: 5px;
+	color: black;
+	border: solid 2px;
+	border-radius: 7px;
+	background: #ff5
+}
+#controls .api .opclo { background-color: #ff5; }
+
+#controls #apis .api { color: black; }
+#controls #apis .api .opclo { background-color: #fa5; }
+
+#controls .api .name {
+	text-align: center;
+	font-weight: bolder;
+	font-size: larger;
+	text-decoration: underline;
+}
+
+#controls .api .desc {
+	text-align: center;
+}
+
+#controls .api .verb {
+	margin-left: 5px;
+}
+
+/*******************************************************************/
+/* setting of verbs */
+.verb .name {
+	font-weight: bolder;
+	text-decoration: underline;
+}
+
+.verb .desc {
+	font-size: smaller;
+}
+
+.verb .perm {
+	font-size: 8px;
+	text-align: right;
+	color: blue;
+}
+
+/*******************************************************************/
+/* setting for traces */
+
+.trace-box {
+	margin: 1px;
+	padding: 1px 1px 1px 10px;
+	border: solid 1px;
+	border-radius: 10px 0px;
+	font-size: smaller;
+}
+
+.trace-title {
+	font-weight: bolder;
+}
+.trace-item {
+	margin-left: 10px;
+}
+
+/*******************************************************************/
+/* tiny button */
+.x-button {
+	font-size: larger;
+	text-align: center;
+	margin: 5px;
+	padding: 10px;
+	border: dashed 2px #888;
+	border-radius: 0px 10px;
+	font-weight: bolder;
+}
+
+.x-button:hover {
+	border: solid 2px #888;
+}
+
+.x-button:active {
+	border: solid 4px #888;
+	padding: 8px;
+}
+
+/*******************************************************************/
+/* display of logmsg */
+.logmsg {
+	margin-right: 2px;
+	margin-bottom: 3px;
+	padding: 2px;
+	font-size: smaller;
+	min-height: 20px;
+	border-radius: 3px;
+	border: solid 1px #f44; /* red by default */
+	background: #eee;
+}
+
+.logmsg.call { border-color: #ee3; } 
+.logmsg.retok { border-color: #8e8; } 
+.logmsg.event { border-color: #d6f; } 
+.logmsg.error { border-color: #f66; }
+.logmsg.trace { border-color: #aaa; }
+
+.logmsg .tag { text-align: center; color: black; font-weight: bolder; margin: -2px -2px 1px -2px; }
+.logmsg.call .tag { background: #ee3; } 
+.logmsg.retok .tag { background: #8e8; } 
+.logmsg.event .tag { background: #d6f; } 
+.logmsg.error .tag { background: #f66; }
+.logmsg.trace .tag { background: #aaa; }
+
+/*******************************************************************/
+/* close box */
+.close {
+	width: 10;
+	height: 10;
+	background-image: url(cross.png);
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-position: center;
+}
+
+/*******************************************************************/
+/* open / close */
+
+.opclo {
+	width: 10px;
+	height: 10px;
+	background-size: contain;
+	background-color: lightsteelblue;
+	border-radius: 3px;
+	padding: 2px;
+}
+
+.closed > .opclo { background-image: url(down.png); } 
+.opened > .opclo { background-image: url(up.png); }
+
+/*******************************************************************/
+/* setting for traceevents */
+
+.traceevent {
+	margin: 1px;
+	padding: 2px;
+	min-height: 14px;
+	border: solid 1px;
+	border-radius: 0px 5px 5px 5px;
+}
+
+.separator {
+	margin: 25px 100px;
+	padding: 0px;
+	height: 2px;
+	background-color: #838;
+}
+
+.traceevent.opened {
+	background-color: rgba(0,0,0,0.6);
+}
+
+.traceevent.request, .trace-box.request {
+	color: black;
+	background: #ffd
+ }
+.traceevent.daemon, .trace-box.daemon {
+	color: black;
+	background: #fdf;
+ }
+.traceevent.service, .trace-box.service {
+	color: black;
+	background: #ddf;
+ }
+.traceevent.event, .trace-box.event {
+	color: black;
+	background: #dfd;
+ }
+.traceevent.global, .trace-box.global {
+	color: black;
+	background: #eee ;
+ }
+
+.traceevent.closed {
+	max-height: 16px;
+}
+
+.traceevent .close {
+	height: 16px;
+	margin: -1px 0px 0px 0px;
+	padding: 1px;
+	background-color: grey;
+}
+
+.traceevent .time {
+	height: 16px;
+	margin: -1px 0px 0px 8px;
+	padding: 1px 3px;
+	background-color: grey;
+	color: black;
+}
+
+.traceevent .tag {
+	margin-left: 10px;
+	font-weight: bolder;
+}
+
+.traceevent.closed:hover {
+	cursor: pointer;
+}
+
+.traceevent.closed:hover .content {
+	margin: 5px;
+	padding: 5px;
+	border: solid 4px;
+	border-radius: 0px 20px 20px 20px;
+	box-shadow: 10px 10px #dd8;
+	background-color: rgba(0,0,0,0.6);
+}
+
+.traceevent table.object tr td:nth-child(1) {
+	text-align: right;
+	font-weight: bolder;
+	text-decoration: underline;
+}
+
+.traceevent table.object tr td:nth-child(2) {
+	background-color: rgba(93, 92, 92, 0.51);
+	padding: 0px 4px;
+	overflow: auto;
+}
+
+.traceevent table {
+	color: black;
+}
+
+/*******************************************************************/
+/* aesthetic clue */
+.select {
+	padding: 0px;
+}
+
+a:link { color: blue; }
+a:link:hover, a:active { color: white; }
+a:visited { color: lightgrey; }
+
+/*******************************************************************/
+/* json format */
+
+.json.string { color: #fff; } 
+.json.number { color: #ec0; } 
+.json.boolean { color: #0f0; } 
+.json.null { color: #0f0; } 
+.json.key { color: #99f; }
+
diff --git a/test/monitoring/monitor.html b/test/monitoring/monitor.html
index db0d5b10..af2c9053 100644
--- a/test/monitoring/monitor.html
+++ b/test/monitoring/monitor.html
@@ -18,7 +18,8 @@
 -->
     <title>Monitoring</title>
     <link href="monitor-base.css" rel="stylesheet">
-    <link href="monitor-demo.css" rel="stylesheet" title="demo">
+    <link href="monitor-iot.css" rel="stylesheet" title="iot">
+    <link href="monitor-demo.css" rel="alternate stylesheet" title="demo">
     <link href="monitor-pastel.css" rel="alternate stylesheet" title="pastel">
     <script type="text/javascript" src="underscore-min.js"></script>
     <script type="text/javascript" src="AFB.js"></script>
@@ -26,8 +27,8 @@
 
 <body id="root" class="-flex-v off" onload="init();">
   <div id="head" class="clearfix">
-    <div id="logo"></div>
     <div id="connected">Not Connected</div>
+    <div id="logo"></div>
     <div id="title">Monitoring</div>
   </div>
   <div id="work" class="-flex-fill -flex-h">
diff --git a/test/monitoring/triskel_iot_bzh.svg b/test/monitoring/triskel_iot_bzh.svg
new file mode 100644
index 00000000..096f4244
--- /dev/null
+++ b/test/monitoring/triskel_iot_bzh.svg
@@ -0,0 +1,110 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="205.71426"
+   height="197.14285"
+   id="svg4199"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="triskel_iot_bzh.svg">
+  <defs
+     id="defs4201">
+    <filter
+       color-interpolation-filters="sRGB"
+       id="filter4111"
+       inkscape:label="Drop Shadow">
+      <feFlood
+         id="feFlood4113"
+         flood-opacity="0.475"
+         flood-color="rgb(0,0,0)"
+         result="flood" />
+      <feComposite
+         id="feComposite4115"
+         in2="SourceGraphic"
+         in="flood"
+         operator="in"
+         result="composite1" />
+      <feGaussianBlur
+         id="feGaussianBlur4117"
+         stdDeviation="5"
+         result="blur" />
+      <feOffset
+         id="feOffset4119"
+         dx="8"
+         dy="8"
+         result="offset" />
+      <feComposite
+         id="feComposite4121"
+         in2="offset"
+         in="SourceGraphic"
+         operator="over"
+         result="composite2" />
+    </filter>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35"
+     inkscape:cx="46.428557"
+     inkscape:cy="178.57144"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="500"
+     inkscape:window-height="435"
+     inkscape:window-x="1087"
+     inkscape:window-y="400"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata4204">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-328.57144,-513.79077)">
+    <path
+       id="path3415-4-2-2-5-0-3-7-4-4-1-9"
+       style="fill:#5a2ca0;display:inline;filter:url(#filter4111)"
+       d="m 470.88567,595.30412 c 28.21686,16.29102 28.75566,58.73778 0.99693,78.5383 -7.67688,5.47598 -8.77935,4.91028 -1.99529,-1.0238 17.47377,-15.28453 17.98492,-42.17774 1.08522,-57.09785 l -3.91266,-3.45435 0.72312,-3.71053 c 0.39771,-2.04076 0.5997,-5.73115 0.44885,-8.20083 -0.33876,-5.54623 0.15803,-6.49185 2.65383,-5.05094 z m -64.76568,11.40332 c 7.06047,-7.74198 18.64659,-14.16089 29.04027,-16.08874 l 6.87489,-1.27521 0.87404,2.89709 c 0.4807,1.59343 0.67439,5.2245 0.43037,8.06906 l -0.44364,5.17195 -6.13887,1.6918 c -10.91241,3.00731 -20.4022,10.85909 -25.4533,21.05979 l -2.41633,4.87984 -2.74281,-0.41238 c -5.14252,-0.77316 -12.72985,-3.97645 -12.79123,-5.40033 -0.092,-2.13451 8.34659,-15.74625 12.76661,-20.59287 z m 33.20546,36.39493 c -28.21687,16.291 -65.24624,-4.46574 -68.51461,-38.40577 -0.9039,-9.38637 0.13723,-10.0583 1.88428,-1.21608 4.49989,22.77499 27.53453,36.66428 48.90556,29.48876 l 4.94788,-1.66128 2.85184,2.48149 c 1.56852,1.36481 4.66349,3.38493 6.87772,4.48914 4.97257,2.47973 5.54308,3.38282 3.04733,4.82374 z m 22.50729,-61.7904 c 3.17451,9.98554 2.94038,23.2289 -0.58688,33.194 l -2.33309,6.59143 -2.94597,-0.69161 c -1.6203,-0.38041 -4.86173,-2.02821 -7.2032,-3.6618 l -4.25721,-2.97018 1.60429,-6.16234 c 2.85178,-10.95404 0.79685,-23.09834 -5.51167,-32.57308 l -3.01788,-4.53253 1.72854,-2.16916 c 3.24083,-4.06698 9.80863,-9.03614 11.07242,-8.37738 1.89457,0.98756 9.46336,15.1015 11.45065,21.35265 z m -48.80223,10.31438 c 0,-32.58202 36.49058,-54.27202 67.51771,-40.13251 8.58077,3.9104 8.6421,5.148 0.11108,2.23988 -21.97368,-7.49048 -45.51946,5.51348 -49.99082,27.6091 l -1.03521,5.11562 -3.57498,1.22902 c -1.96621,0.67596 -5.26316,2.34622 -7.32655,3.71171 -4.63379,3.06649 -5.70115,3.10904 -5.70115,0.22718 z m 42.25842,50.3871 c -10.23499,-2.24356 -21.58699,-9.06801 -28.45341,-17.10525 l -4.5418,-5.31622 2.07194,-2.20549 c 1.13957,-1.21302 4.18733,-3.19628 6.77282,-4.40726 l 4.70085,-2.20176 4.53458,4.47053 c 8.06061,7.94674 19.60535,12.23927 30.96496,11.51329 l 5.43422,-0.34731 1.01427,2.58154 c 1.90169,4.84014 2.92124,13.01261 1.71883,13.77769 -1.80254,1.14695 -17.80995,0.64475 -24.21726,-0.75976 z"
+       inkscape:connector-curvature="0"
+       inkscape:export-filename="/home/sdx/Pictures/Logo/triskel_iot_bzh_300dpi.png"
+       inkscape:export-xdpi="300"
+       inkscape:export-ydpi="300" />
+    <rect
+       style="fill:none;stroke:none;display:inline"
+       id="rect4179"
+       width="205.71426"
+       height="197.14285"
+       x="328.57144"
+       y="513.79077"
+       inkscape:export-filename="/home/sdx/Pictures/Logo/triskel_iot_bzh_300dpi.png"
+       inkscape:export-xdpi="300"
+       inkscape:export-ydpi="300" />
+  </g>
+</svg>