Shiny Web UIs

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

•

allObjects

...and with some real-world data - click me to see current temperature at SFO and another nice example (below code). dojo gauges are composites of backgrounds, scalers, scales, range indicators, and value and text indicators that can be customized in all kinds of ways. When thingStud.io is coming up with a nice Editor/Composer tool of some kind, that would be helpful for end users.

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. Running an HTTP server on Espruino and returning a javascript (callback) costs only a few more bytes than a pure JSON response, but you have not to serve the file nor deal with CORS challenges, and best of all: you can serve the bulk from local just off file. On the other hand, using a (local) HTTP/Apache gives you additional flexibility in modularization and reuse...).

<html>
<head>
<title>Shiny UI</title>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
        data-dojo-config="async: true, parseOnLoad: false"
    ></script>
<script
<script>require(
	[ "dojo/_base/kernel"
	, "dojo/dom"
	, "dojo/parser"
	, "dijit/registry"
	, "dojox/dgauges/components/default/CircularLinearGauge"
	, "dojo/request/script"
	, "dojo/domReady!"
	],function(base,dom,parser,registry,gauge,script){
	parser.parse();
	var gauge = registry.byId("gauge"), time = dom.byId("time"), f; 
	var update = function(){ // bbox=minlong,minlat,maxlon,maxlat
		script.get("https://aviationweather.gov/gis/scripts/MetarJSON.php",
			{ jsonp: "jsonp"
			, query: "bbox=-122.3745,37.6185,-122.3735,37.6295"
			, preventCache: true
			}).then(function(data){ f = data.features[0];
				time.innerHTML = new Date(f.properties.obsTime);
    			gauge.set("value",Math.round((f.properties.temp * 9 / 5 + 32) *10) / 10);
			}, function(err){
				if (confirm("Error! - Retry?\n\nError:\n" 
					+ err)) { location.reload(); }
			});
    };
	update(); setInterval(update,600000);
	});
</script>
</head><body>
<table><tr><th>San Francisco Airport - &deg;F<br><span id="time"
	>Loading...</span></</th></tr><tr><td>

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

</td></tr><tr><td>
	by <a href="http://dojotoolkit.org/reference-guide/1.10/dojox/dgauges.html"
		>dojo Gauges - dojotoolkit.org</a></td></tr><tr><td>
</table>
</body>
</html>

2 Attachments

shui3.html

Shiny Web UIs

About

Espruino