FlatZ Frontpage
Posted: Tuesday 15 September 2015 9:55
Version 0.2 Please let me know if you like it and what should be added/changed??
- Upload all files to the www directory
- Adjust user settings in settings/settings.js: the URL of your domoticz, the idx and names of your switches and devices
- Open in browser [your Domoticz IP:port]/frontpage.html
Credits to Hansbit, I've used his frontpage to rework for my own!
Download:
https://github.com/galadril/FlatZ-Frontpage
Screenshots:
Settings.js
I'll try to explain more how to use the settings..
If you go to:
http://ip:port/json.htm?type=devices&jsoncallback=?
You see all devices of Domoticz in a json list.
Here you get get the idx, and value you like to show from your device and put it in the settings.js:
for example:
Code: Select all
{
"AddjMulti" : 1.0,
"AddjMulti2" : 1.0,
"AddjValue" : 0.0,
"AddjValue2" : 0.0,
"BatteryLevel" : 255,
"CustomImage" : 0,
"Data" : "28.65%",
"Description" : "",
"Favorite" : 0,
"HardwareID" : 1,
"HardwareName" : "Motherboard",
"HardwareType" : "Motherboard sensors",
"HardwareTypeVal" : 23,
"HaveTimeout" : false,
"ID" : "0000044C",
"Image" : "Computer",
"LastUpdate" : "2015-09-28 08:42:53",
"Name" : "Memory Usage",
"Notifications" : "true",
"PlanID" : "0",
"PlanIDs" : [ 0 ],
"Protected" : false,
"ShowNotifications" : true,
"SignalLevel" : 12,
"SubType" : "Percentage",
"Timers" : "false",
"Type" : "General",
"TypeImg" : "hardware",
"Unit" : 1,
"Used" : 1,
"XOffset" : "0",
"YOffset" : "0",
"idx" : "1"
}$.PageDashboardArray = [['idx', 'from the json', 'cell7', 'description'],
becomes
$.PageDashboardArray = [['1', 'Data', 'cell7', 'Computer Memory Usage'],
The Data value then gets put in the HTML in the field with id 'cell7', and the description in desc_cel7
Code: Select all
<div class="col-sm-3 col-lg-3">
<div class="dash-unit">
<dtitle id="desc_cell7" ></dtitle>
<hr>
<div id="woonkamer" style="height: 11.313em;width: 11.313em;margin: auto;"></div>
<h2 id="cell7"></h2>
<span class="text" id="cell70" style="float:right;padding-right:10px;font-size: 10px;color: #9E9E9E;"/>
</div>
</div>[['1', 'LastUpdate', 'cell70', 'Computer Memory Usage'],
So the LastUpdate value from the JSON gets placed in cell70. we don't have a desc_cell70, so the description is not used.
