FlatZ Frontpage

Post Reply
User avatar
galadril
Posts: 625
Joined: Monday 07 September 2015 10:32
Target OS: Raspberry Pi
Domoticz version: latest
Contact:

FlatZ Frontpage

Post by galadril » Tuesday 15 September 2015 9:55

:roll: 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:
Image
Image
Image
Image

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.
Last edited by galadril on Monday 28 September 2015 9:12, edited 8 times in total.
Solar panels of Ginlong, Omnik-Solar, Transenergy or Solarman?? Try my Android app:
https://play.google.com/store/apps/deta ... ongmonitor

jjnj
Posts: 240
Joined: Thursday 31 July 2014 13:51
Target OS: Windows
Domoticz version:
Location: NL
Contact:

Re: FlatZ Frontpage

Post by jjnj » Tuesday 15 September 2015 12:08

Wow looks great!!!

pvm
Posts: 961
Joined: Tuesday 17 June 2014 22:14
Target OS: NAS (Synology & others)
Domoticz version: Stable
Location: NL
Contact:

Re: FlatZ Frontpage

Post by pvm » Tuesday 15 September 2015 12:43

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?
Synology NAS, PI3, ZWave, Xiamo zigbee devices, BTLE plant sensor

User avatar
galadril
Posts: 625
Joined: Monday 07 September 2015 10:32
Target OS: Raspberry Pi
Domoticz version: latest
Contact:

Re: FlatZ Frontpage

Post by galadril » Tuesday 15 September 2015 14:17

jjnj wrote:Wow looks great!!!
Thanks :)
Solar panels of Ginlong, Omnik-Solar, Transenergy or Solarman?? Try my Android app:
https://play.google.com/store/apps/deta ... ongmonitor

Justintime
Posts: 322
Joined: Thursday 21 May 2015 9:08
Target OS: Raspberry Pi
Domoticz version: Beta
Contact:

Re: FlatZ Frontpage

Post by Justintime » Tuesday 15 September 2015 15:01

What?!? Looks Awesome.

Heisenberg
Posts: 286
Joined: Monday 27 January 2014 15:12
Target OS: Raspberry Pi
Domoticz version:
Location: Netherlands
Contact:

Re: FlatZ Frontpage

Post by Heisenberg » Tuesday 15 September 2015 22:48

pvm wrote: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.
Raspberry Pi Type B
Raspberry Pi Type B2
RFXCOMtrx433e

User avatar
galadril
Posts: 625
Joined: Monday 07 September 2015 10:32
Target OS: Raspberry Pi
Domoticz version: latest
Contact:

Re: FlatZ Frontpage

Post by galadril » Wednesday 16 September 2015 7:30

Heisenberg wrote: - The buttons are not changing status when i click on it.
You are in the same network (not remote)?
Heisenberg wrote:- 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?
Solar panels of Ginlong, Omnik-Solar, Transenergy or Solarman?? Try my Android app:
https://play.google.com/store/apps/deta ... ongmonitor

Heisenberg
Posts: 286
Joined: Monday 27 January 2014 15:12
Target OS: Raspberry Pi
Domoticz version:
Location: Netherlands
Contact:

Re: FlatZ Frontpage

Post by Heisenberg » Wednesday 16 September 2015 9:50

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

Image
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
Last edited by Heisenberg on Wednesday 30 September 2015 12:07, edited 3 times in total.
Raspberry Pi Type B
Raspberry Pi Type B2
RFXCOMtrx433e

User avatar
galadril
Posts: 625
Joined: Monday 07 September 2015 10:32
Target OS: Raspberry Pi
Domoticz version: latest
Contact:

Re: FlatZ Frontpage

Post by galadril » Wednesday 16 September 2015 9:54

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?

Image
Solar panels of Ginlong, Omnik-Solar, Transenergy or Solarman?? Try my Android app:
https://play.google.com/store/apps/deta ... ongmonitor

User avatar
galadril
Posts: 625
Joined: Monday 07 September 2015 10:32
Target OS: Raspberry Pi
Domoticz version: latest
Contact:

Re: FlatZ Frontpage

Post by galadril » Wednesday 16 September 2015 9:57

Heisenberg wrote: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..
Solar panels of Ginlong, Omnik-Solar, Transenergy or Solarman?? Try my Android app:
https://play.google.com/store/apps/deta ... ongmonitor

pj-r
Posts: 256
Joined: Wednesday 17 December 2014 18:30
Target OS: Linux
Domoticz version: V3.8650
Location: Jyväskylä, Finland
Contact:

Re: FlatZ Frontpage

Post by pj-r » Wednesday 16 September 2015 10:16

galadril wrote: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.
LXC(x64 Ubuntu Xenial), RFXtrx433E, MySensors

User avatar
galadril
Posts: 625
Joined: Monday 07 September 2015 10:32
Target OS: Raspberry Pi
Domoticz version: latest
Contact:

Re: FlatZ Frontpage

Post by galadril » Wednesday 16 September 2015 15:04

pj-r wrote: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..
Solar panels of Ginlong, Omnik-Solar, Transenergy or Solarman?? Try my Android app:
https://play.google.com/store/apps/deta ... ongmonitor

User avatar
galadril
Posts: 625
Joined: Monday 07 September 2015 10:32
Target OS: Raspberry Pi
Domoticz version: latest
Contact:

Re: FlatZ Frontpage

Post by galadril » Wednesday 16 September 2015 16:47

Also making the settings in one settings.js file.. to make our lives easy :)
Last edited by galadril on Thursday 17 September 2015 10:28, edited 1 time in total.
Solar panels of Ginlong, Omnik-Solar, Transenergy or Solarman?? Try my Android app:
https://play.google.com/store/apps/deta ... ongmonitor

User avatar
galadril
Posts: 625
Joined: Monday 07 September 2015 10:32
Target OS: Raspberry Pi
Domoticz version: latest
Contact:

Re: FlatZ Frontpage

Post by galadril » Thursday 17 September 2015 10:27

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

see screenshots, hope you like it..
Attachments
logs.png
logs.png (114.86 KiB) Viewed 30692 times
graph.png
graph.png (35.44 KiB) Viewed 30692 times
dashboard.png
dashboard.png (46.93 KiB) Viewed 30692 times
Solar panels of Ginlong, Omnik-Solar, Transenergy or Solarman?? Try my Android app:
https://play.google.com/store/apps/deta ... ongmonitor

jjnj
Posts: 240
Joined: Thursday 31 July 2014 13:51
Target OS: Windows
Domoticz version:
Location: NL
Contact:

Re: FlatZ Frontpage

Post by jjnj » Thursday 17 September 2015 11:26

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

User avatar
galadril
Posts: 625
Joined: Monday 07 September 2015 10:32
Target OS: Raspberry Pi
Domoticz version: latest
Contact:

Re: FlatZ Frontpage

Post by galadril » Thursday 17 September 2015 11:32

jjnj wrote: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..
Solar panels of Ginlong, Omnik-Solar, Transenergy or Solarman?? Try my Android app:
https://play.google.com/store/apps/deta ... ongmonitor

User avatar
galadril
Posts: 625
Joined: Monday 07 September 2015 10:32
Target OS: Raspberry Pi
Domoticz version: latest
Contact:

Re: FlatZ Frontpage

Post by galadril » Thursday 17 September 2015 14:09

vil1driver wrote:$.domoticzurl = "http://<user>:<pass>@<ip>:<port>";
Thanks, i'll do!
Solar panels of Ginlong, Omnik-Solar, Transenergy or Solarman?? Try my Android app:
https://play.google.com/store/apps/deta ... ongmonitor

User avatar
bizziebis
Posts: 543
Joined: Saturday 19 October 2013 14:00
Target OS: Raspberry Pi
Domoticz version: 3.8805
Location: The Netherlands
Contact:

Re: FlatZ Frontpage

Post by bizziebis » Thursday 17 September 2015 17:55

Looking forward to your new version. Looks promissing :)

User avatar
galadril
Posts: 625
Joined: Monday 07 September 2015 10:32
Target OS: Raspberry Pi
Domoticz version: latest
Contact:

Re: FlatZ Frontpage

Post by galadril » Thursday 17 September 2015 17:57

bizziebis wrote:Looking forward to your new version. Looks promissing :)
Thanks!
I'll upload a new version soon.
Solar panels of Ginlong, Omnik-Solar, Transenergy or Solarman?? Try my Android app:
https://play.google.com/store/apps/deta ... ongmonitor

User avatar
mvveelen
Posts: 682
Joined: Friday 31 October 2014 11:22
Target OS: NAS (Synology & others)
Domoticz version: Beta
Location: Hoorn, The Netherlands
Contact:

Re: FlatZ Frontpage

Post by mvveelen » Friday 18 September 2015 12:17

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 !
RPi3 + RFXCOM rfxtrx433E + Xiaomi Gateway + Philips HUE Lights + Nefit Easy + Dashticz v2 + Domoticz latest Beta

Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests