FishinoHomeAuto - Page 6

For analogic inputs, so our thermometer, we have :

"t1"  : {"kind":"ai", "io" : "0", "image" : "termo.png", "x" : 520, "y" : 211, "scale" : 0.1, "delta" : -5, "prec" : 1, "textpref" : "", "textsuff" : "°C", "textx": 20, "texty" : 15 }

So just one image ("image"), in this case the file "termo.png", followed by position over flat's picture (520, 211) and 2 conversion factors which are needed to convert the integer value read from Fishino's analog ports, which lies between 0 and 1023, in a floating value that represents the temperature. Used formula is :

temp = val · scale + delta

Where 'temp' is displayed temperature, 'val' is the value returned by digitalRead and 'delta' is an additional shifting factor. Changing 'scale' and 'delta' values we can adapt our system on every analog sensor available. To understand how to calculate the values let's look at following example; imagine that we have a sensor which returns following values :

 220   for a temperature of -10 degrees
1100   for a temperature of 50 gradi

Let's calculate the 'scale' factor first :

scale = (50 - (-10)) / (1100 - 220) = 0.0681818

And then the 'delta' value :

delta = temp - val · scale = 50 - 1100 · 0.06818 = -25

All that works only if sensor is LINEAR over the whole temperature range; an NTC, for example, is NOT linear on a wide range, so we should modify our code with a better interpolation function, adding more constants on map file and patching our javascript code..
We find then a couple of strings which will be displayed before and after the numeric value ('textpref' e 'textsuff'); in our case we want to show the word "°C" after the number and nothing before.
Last but not least, we have another couple of coordinates which are used to position the value text over the appliance image; setting both to 0 will put the text over the image's center, which would not be too nice. In our case we shift it by 20 and 15 pixels to have a better display.

The index.htm file

This file is just a simple HTML file which has just the few needed parths to have our flat's picture displayed, the loading of our 2 javascript files a couple of embedded CSS styles to optimize element's positioning :

<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
		<meta name="HandheldFriendly" content="True" />

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="main.js"></script>

		<title>Fishino Home Automation Demo</title>
	</head>
	<body>
		<h1><center>FishinoHomeAuto demo application</center></h1>
		<style>
			#container {
				position:relative;
				display:table;
				margin: 0 auto;
			}
			.itemcontainer {
				position:absolute;
				display:block;
			}
			.imtip {
				position:relative;
			}
			.texttip {
				position:absolute;
			}
		</style>
		<div id="container" align="center" border-color="red" border-width=2>
			<img src="floor.jpg"/>
		</div>
	</body>
</html>


You can change almost all in this file, from the background picture going on. With some work it's possible to build a multipage home automation controller.