diff options
| author |   José Bollo <jose.bollo@iot.bzh> | 2017-09-19 12:23:13 +0200 |
|---|---|---|
| committer | José Bollo <jose.bollo@iot.bzh> | 2017-10-09 14:08:29 +0200 |
| commit | 814561d06929f3adbeb3fbedc0da2fa71074fb35 (patch) | |
| tree | 4afe2abce7df086b3d8d858322400fb78eac1165 /test/monitoring | |
| parent | 15d0dae1cd6ab982137a7c2848de9303a9c969f0 (diff) | |
monitoring: Add CSS/style/theme switch dynamically
This can be useful when presenting the monitoring
to switch from a dark theme to a light theme
dynamically.
Change-Id: I25beffe2071e7a71d7ad493099ab3bb674de8461
Signed-off-by: José Bollo <jose.bollo@iot.bzh>
Diffstat (limited to 'test/monitoring')
| -rw-r--r-- | test/monitoring/monitor.html | 4 | ||||
| -rw-r--r-- | test/monitoring/monitor.js | 50 |
2 files changed, 53 insertions, 1 deletions
diff --git a/test/monitoring/monitor.html b/test/monitoring/monitor.html index 22f090ed..2c07c1ba 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"> + <link href="monitor-demo.css" rel="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> <script type="text/javascript" src="monitor.js"></script> @@ -67,6 +68,7 @@ <div id="menu" class="-flex-v"> <div id="connect" class="x-button">Connect</div> <div id="disconnect" class="x-button">Disconnect</div> + <div id="style" class="x-button">style</div> <div id="autoscroll" class="x-button">Stop scroll</div> <div id="addsep" class="x-button">Add separator</div> <div id="droptracevts" class="x-button">Clear traces</div> diff --git a/test/monitoring/monitor.js b/test/monitoring/monitor.js index 6ca75cc6..5b9dc0ea 100644 --- a/test/monitoring/monitor.js +++ b/test/monitoring/monitor.js @@ -39,6 +39,8 @@ var logmsgs_node; var apis_node; var all_node; +var styles; + /* flags */ var show_perms = false; var show_monitor_events = false; @@ -81,7 +83,14 @@ function on_connect(evt) { connect(); } +function next_style(evt) { + styles.next(); +} + function init() { + styles = makecss(); + at("style").onclick = next_style; + /* prepare the DOM templates */ t_api = at("t-api").content.firstElementChild; t_verb = at("t-verb").content.firstElementChild; @@ -510,3 +519,44 @@ function obj2html(json) { }); } +function makecss() +{ + var i, l, a, links, x; + + x = { idx: 0, byidx: [], byname: {}, names: [] }; + links = document.getElementsByTagName("link"); + for (i = 0 ; i < links.length ; i++) { + l = links[i]; + if (l.title && l.rel.indexOf( "stylesheet" ) != -1) { + if (!(l.title in x.byname)) { + x.byname[l.title] = x.byidx.length; + x.names.push(l.title); + x.byidx.push([]); + } + x.byidx[x.byname[l.title]].push(l); + } + } + + x.set = function(id) { + if (id in x.byname) + id = x.byname[id]; + if (id in x.byidx) { + var i, j, a, b; + x.idx = id; + a = x.byidx; + for (i = 0 ; i < a.length ; i++) { + b = a[i]; + for (j = 0 ; j < b.length ; j++) + b[j].disabled = i != id; + } + } + }; + + x.next = function() { + x.set((x.idx + 1) % x.byidx.length); + }; + + x.set(0); + return x; +} + |