Shiny Web UIs

You are reading a single comment by @allObjects and its replies. Click here to read the full conversation.

•

allObjects

Shniny UI - click me to see me alive, what about this? ...adding something to the wheel helps a lot.

Copy below code - or - get it from attached link, save it to your disk as .html, open it in your browser. It works even from file:// protocol. Modify it to display your Espruino captured sonsor data.

<html>
<head>
<title>Shiny UI</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
        data-dojo-config="async: true, parseOnLoad: false"
    ></script>
<script>require(
	[ "dojo/_base/kernel"
	, "dojo/dom"
	, "dojo/parser"
	, "dijit/registry"
	, "dojox/dgauges/components/default/CircularLinearGauge"
	],function(base,dom,parser,registry,gauge){
	parser.parse();
	var gauge = registry.byId("gauge"), date, value;
	setInterval(function(){ value = (new Date().getSeconds() * 10);
			value = (Math.floor(value / 60) % 2)
				? 60 - (value % 30)
				: value % 30;
			gauge.set("value",24 + value);
		},1000);
	});
</script>
</head><body>
<table><tr><th>Shiny UI<br>Temperature with
	<a href="http://dojotoolkit.org/reference-guide/1.10/dojox/dgauges.html"
		>dojo Gauges</a></th></tr><tr><td>

<div    id = "gauge"
        data-dojo-type="dojox/dgauges/components/default/CircularLinearGauge"
        value="32" minimum="-50" maximum="150"
        style="width:15em; height:15em"
        interactionArea="none" animationDuration=500
    ></div>

</td></tr>
</table>
</body>
</html>

Key in above code are lines 29..34 which declaratively - with plain html - get this gauge defined. But there are also ways to defines gauges programmatically.

Replace lines 16..21 with some push/pull mechanism to get some real data involved.

3 Attachments

shui.html

Shiny Web UIs

About

Espruino