FlatZ Frontpage

[galadril]

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"
}

Here i want to show the "Data" value onscreen:
$.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>

If you want to add the lastupdatedate, then add this line to the $.PageDashboardArray:
[['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.

[jjnj]

Wow looks great!!!

[pvm]

Nice, is it somehow possible to extend this into THE default and configurable ( maybe easily customizable/extendable) Domoticz interface?
Does this cover all possible devices?

[galadril]

Wow looks great!!!

Thanks

[Justintime]

What?!? Looks Awesome.

[Heisenberg]

Nice, is it somehow possible to extend this into THE default and configurable ( maybe easily customizable/extendable) Domoticz interface?
Does this cover all possible devices?

I couldn't agree more

But I do have some questions:
- The buttons are not changing status when i click on it.
- After configuring and uploading the files to folder www I go to the frontpage.html in the browser but it says 'Domoticz Offline'. When open locally it works.


Checked in Firefox and Chrome.

[galadril]

- The buttons are not changing status when i click on it.

You are in the same network (not remote)?

- After configuring and uploading the files to folder www I go to the frontpage.html in the browser but it says 'Domoticz Offline'. When open locally it works.

Does the frontpage.html say 'Domoticz Offline'? I think that's not even in the html ....
Or do you just don't see any values?

[Heisenberg]

You are in the same network (not remote)?

Yes, I'm in the same local network.
When I open the frontpage.html locally then it shows the values. But I cannot switch on/off the with the buttons

Does the frontpage.html say 'Domoticz Offline'? I think that's not even in the html ....
Or do you just don't see any values?

No, It looks like the frontpage.html in the www folder cannot be opened in browser

EDIT: frontpage.html works. All files should be uploaded to folder /home/pi/domoticz/www

[galadril]

To bad the Domoticz JSON API doesn't include a get method for historical data of devices, but I'm looking into making a graph page for the frontpage >>
Or does anyone else know the urls for getting device history?

[galadril]

When I open the frontpage.html locally then it shows the values. But I cannot switch on/off the with the buttons

Maybe an authorisation issue, I'll do some tests tonight..

[pj-r]

To bad the Domoticz JSON API doesn't include a get method for historical data of devices

What you mean by historical data? I think you can get exact the same data out from backend as the default UI since its using json for everything.

[galadril]

What you mean by historical data? I think you can get exact the same data out from backend as the default UI since its using json for everything.

Thanks for the tip.
I found the json calls and now also have graphs in the dashboard..

[galadril]

Also making the settings in one settings.js file.. to make our lives easy

[galadril]

Progress update:
- Graph screen
- Logs screen (+filter input)

see screenshots, hope you like it..

[jjnj]

Looks great! What about security? Does the Domoticz login also function for this?

[galadril]

Looks great! What about security? Does the Domoticz login also function for this?

At this moment, you have to login on the standard Domoticz dashboard before this frontpage works..

[galadril]

$.domoticzurl = "http://<user>:<pass>@<ip>:<port>";

Thanks, i'll do!

[bizziebis]

Looking forward to your new version. Looks promissing

[galadril]

Looking forward to your new version. Looks promissing

Thanks!
I'll upload a new version soon.

[mvveelen]

Nice frontpage. I'm going to follow this topic to see what else will be implemented. Adding historical data is a big plus imho. Keep up the good work !