FishinoHomeAuto - Page 5

Application customization

The application can be customized with few files; index.htm file contains the html code with flat picture's link, map.txt file which maps Fishino's I/O wth the appliances and their position over flat's pictureand some image files containing the images on the page (floor.jpg, lampon.png, lampoff.png, termo.png).
The last 2 javascript files contains the jquery library (jquery.js), needed for Ajax connections with Fishino's server and a couple of small javascript functions which takes care of page handling (main.js), and shall not be modified, at least if you don't want to add some functionalities.
Before going on we shall remember that on smallest Fishino models, UNO and GUPPY, RAM memory is quite scarce and with this demo we're near its limits, so we can change very few elements if we don't want to reduce the number of appliances; on a MEGA or a Fishino32 things goes much better and we could increase the number of appliances or even build a multipage controller withour problems.

Let's examine the files in detail.

Map.txt file

At first we look at map.txt file, which is a simple text file containing JSON data :

{
"l1"  : {"kind":"do", "io" :  "2", "imageoff" : "lampoff.png", "imageon" : "lampon.png", "x" :  93, "y" : 367 },
"l2"  : {"kind":"do", "io" :  "3", "imageoff" : "lampoff.png", "imageon" : "lampon.png", "x" : 230, "y" : 374 },
"l3"  : {"kind":"do", "io" :  "5", "imageoff" : "lampoff.png", "imageon" : "lampon.png", "x" : 179, "y" : 469 },
"l4"  : {"kind":"do", "io" :  "6", "imageoff" : "lampoff.png", "imageon" : "lampon.png", "x" : 237, "y" : 504 },
"l5"  : {"kind":"do", "io" :  "8", "imageoff" : "lampoff.png", "imageon" : "lampon.png", "x" : 286, "y" : 224 },
"l6"  : {"kind":"do", "io" :  "9", "imageoff" : "lampoff.png", "imageon" : "lampon.png", "x" : 326, "y" : 353 },
"l7"  : {"kind":"do", "io" : "15", "imageoff" : "lampoff.png", "imageon" : "lampon.png", "x" : 348, "y" : 461 },
"l8"  : {"kind":"do", "io" : "16", "imageoff" : "lampoff.png", "imageon" : "lampon.png", "x" : 323, "y" : 183 },
"l9"  : {"kind":"do", "io" : "17", "imageoff" : "lampoff.png", "imageon" : "lampon.png", "x" : 428, "y" : 171 },
"l10" : {"kind":"do", "io" : "18", "imageoff" : "lampoff.png", "imageon" : "lampon.png", "x" : 428, "y" : 398 },
"l11" : {"kind":"do", "io" : "19", "imageoff" : "lampoff.png", "imageon" : "lampon.png", "x" : 573, "y" : 403 },
"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 }
}


As you can see there are 2 parenthesis which enclose the whole block, and a series of text lines which describe the various appliances. Let's see a line relative to a lamp:

"l1"  : {"kind":"do", "io" :  "2", "imageoff" : "lampoff.png", "imageon" : "lampon.png", "x" :  93, "y" : 367 },

The line starts with appliance's name ("l1"), followed by a semicolon (:) and a list of elements enclosed with parenthesis and which ends with a comma (,). The format is mandatory; evenn a small error, like a missing comma or a wrong character will make the whole system useless.
The elements between parenthesis are of kind key:value, where key is a name enclosed in quotation marks and the value can be a string, also quoted, or a number. All the appliances starts with appliance kind (kind) and the mapped 'I/O (io):

"kind":"do", "io" :  "2", .....

The meanings are straightforwad : "do" means "Digital Output"; for the thermometer we'll have  "ai" which means "Analog Input". On example line we have a digital output connected to I/O 2 in Fishino board.
By now on javascript code we just support digital I/O (both input and output) and analog input; it would be possible to enhance it with an analog output adding a slider to the webpage.
Following values depends on appliance kind; for digital I/O we have 2 images, one which represents the LOW state and the other for HIGH state. In our example we've got a couple of lamps, one ON and the other OFF :

"imageoff" : "lampoff.png", "imageon" : "lampon.png", ...

We see here the "lampoff.png" and "lampon.png" pictures. Last values are the position of the appliances on flat's picture, starting from lower left corner, in this case the point at 93;367. The position is fixed on appliance's center, to make it easy its positioning. In this case, the reference point is center of lamp's circle.