FlatZ Frontpage

[roblom]

By putting a html file called " frontpage2.html" in the www folder.

[NietGiftig]

So in my opinion there should be a subfolder in the "www/" folder (like "www/FlatZ") but the main page of the custom frontpage should be in the root of the "www/" folder (and named "FlatZ.html".
But then all the file paths in the FlatZ.html file needs to be changed I think other wise they point to "www/" instead of "www/Flats".

Just thinking that you make a good point.
I like separating the files of the different "Frontpages" that exist

@galadril
The question is, why has galadril mixed it in with the domoticz www.
Is there something else that could give trouble?
And of course It will be a lot of work if there is an update to flatZ frontpage and we have tho change the path's again

[rickwilleme]

Hi!

First of all; great design! Really looking forward to have everything in place and use it in production!

I've copied the sourcefiles to the web folder of my Synology and got it running.
Though, after some configuration and testing I noticed the following:

• All the lights in the Lights tab do not work. They all provide the same error: "Failed to toggle switch..."
  Note: the switches DO work in other tabs (like Graph)
• I'm unable to make a graph from my SetPoint device. How should I configure it?

  Code: Select all

        {
           "AddjMulti" : 1.0,
           "AddjMulti2" : 1.0,
           "AddjValue" : 0.0,
           "AddjValue2" : 0.0,
           "BatteryLevel" : 255,
           "CustomImage" : 0,
           "Data" : "15.0",
           "Description" : "",
           "Favorite" : 0,
           "HardwareID" : 7,
           "HardwareName" : "E-Thermostaat",
           "HardwareType" : "ICY Thermostat",
           "HardwareTypeVal" : 28,
           "HaveTimeout" : false,
           "ID" : "0000001",
           "LastUpdate" : "2015-12-16 14:31:54",
           "Name" : "Set Temperature",
           "Notifications" : "false",
           "PlanID" : "5",
           "PlanIDs" : [ 5 ],
           "Protected" : false,
           "SetPoint" : "15.0",
           "ShowNotifications" : true,
           "SignalLevel" : "-",
           "SubType" : "SetPoint",
           "Timers" : "false",
           "Type" : "Thermostat",
           "TypeImg" : "override_mini",
           "Unit" : 0,
           "Used" : 1,
           "XOffset" : "607",
           "YOffset" : "236",
           "idx" : "99"
        },

  Already tried:

  Code: Select all

  ['99', 'SetPoint', 'day', 'cell10', 'Ingestelde Temperatuur', 'graph300', '#2980B9', 'te'],
  ['99', 'data', 'day', 'cell10', 'Ingestelde Temperatuur', 'graph300', '#2980B9', 'te'],

Thanks!

[squandor]

Hi There,

I am new with Domoticz and this Frontpage look awesome, I've succeeded in adding my devices to the frontpage, but i have an thermostat setpoint in my devices. Is it possible to add this to the frontpage with the possibility to change the temperature up and down with buttons?

Greetings, Squander

[SwordFish]

@galadril
I am using your frontpage for sometime now and it is great.
But i noticed that i get regular questionmarks on the scene butons and when i use the colorpicker for the hue lights the lightcolor change but the colorpicker always go's back to this color #e15613 and not the color i pick and also i can't type a colorcode manualy?
Is it also possible to make a second page for lights?

[Minglarn]

Been fiddling with FlatZ a while... And I really like it... I'm trying to get some kind of action in the Cameras page.

Have this line of code

Code: Select all

  ['cell13', '<img src="http://192.168.1.9:88/CGIProxy.fcgi?cmd=snapPicture2&usr=XXX&pwd=XXX&t=" onload='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 1000)' onerror='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 5000)' alt='' />', 'Camera 6'],

but it wont work. Even tried to point the url to a php page but still no updates on pictures....
Is there any way we can improve the cameras page to update taken snapshots in realtime like once a second?

[Minglarn]

Hello,

I am trying to add a page for my Evohome room temperatures.
I made an extra page, witch is called "Temperature". I have 6 temperatur blocks, just like in the frontpage (donut chart).
In the frontpage it is used for "woonkamer".

But i can't get any data in the blocks.

Does anyone have an idea? I made a temperature.html and i changed the settings.js.

Hi! Did you manage to get info into your temperature page? Struggling myself... Must be something we are missing =)

[gflvern]

I've now got this up and running with the screen sizes set up for an Amazon Fire. So I'd like to say thank you for the all the that's been done on creating the pages in the first place.

I'd like to get the weather page working with Weather Underground if possible. Could someone point me at the pages I'd need to edit so I can explore the ways to get it working with that API or take the information from the data I already pull through in Domoticz.

I'm going to look at creating a Sonos page as that would prove a good addition for myself.

gfl

[G3rard]

I've now got this up and running with the screen sizes set up for an Amazon Fire. So I'd like to say thank you for the all the that's been done on creating the pages in the first place.

I'd like to get the weather page working with Weather Underground if possible. Could someone point me at the pages I'd need to edit so I can explore the ways to get it working with that API or take the information from the data I already pull through in Domoticz.

I'm going to look at creating a Sonos page as that would prove a good addition for myself.

gfl

In another frontpage I am using

Code: Select all

['49','ForecastStr',		'cell2_3',	'Weersvoorspelling','0','0']

IDX 49 is the Wunderground temp, humidity and baro sensor.
That frontpage also has some pictures added related to the prediction.

Please share your Sonos page once it's finished. I am curious how it will look like.

[Sebbienl]

I saw a question, how to place a webcam image in the frontpage..
I just have one webcam and so i replaced some code

_{frontpage.html after the 3th Donut chart}

Code: Select all

  <!-- webcam -->
            <div class="col-sm-3 col-lg-3">
                <div class="dash-unit">
                    <dtitle id="desc_cell10"></dtitle>
                    <hr>
                    <div id="cell10" style="margin-left:10px;margin-right:10px;"></div>
                    <h2 id="cell10"></h2>
                    <span class="text" id="cell100" style="float:right;padding-right:10px;font-size: 10px;color: #9E9E9E;" />
                </div>
            </div>

and

_Settings.js

Code: Select all

 $.CameraArray = [
   ['cell10', 'http://192.168.xxx.xxx:xxxx/snapshot.cgi?usr=xxxxxx&pwd=xxxxxxxxxxx', 'Huiskamer'],
];

Works fine here!

[SwordFish]

I noticed that the graph page is a month ahead? Doe anyone know how I can fix that?
The time and date are correct on domoticz frontpage.

Knipsel.PNG (13.04 KiB) Viewed 5674 times

Does someone else also has problems with Hue lights not being able to select a color. Can't pick a color, always go's back to standard.

[vandriver]

Hey,
thanks for the excellent work on the FlatZ Frontpage, I like the design very much.
I started using it recently, but I already have some questions:

1. As I understand the switches sidebars within the actual frontpage and all other pages are 2 different ones, because they can be filled with different items in the settings.js, right? Maybe I do not understand the purpose. When I put my light-switches in the "lights" page in the cells 7,... then each cell contains an on/off button for the respective light. What do I use the switchbar for, then?

2. The example says:
['163', 'Data', 'cell1', 'Lampen Uit', 'onbutton'],//onbutton = only push on
['161', 'Data', 'cell2', 'Theme Logan', 'onbutton'],//button is normal on/off button
What makes the 2 buttons different? What do I have to fill in to have a normal on / off button?

Thank you!
Cheers,
Marko

[vandriver]

- 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?

Hello,
I have had the same thing here... domoticz is running on my synology NAS and I put all the FlatZ frontpage files in a subfolder of domoticz/www/.
the reason why you only see a page with the regular domoticz background design saying "domoticz offline" is that there is no indexing of the files showing you a (the) frontpage by default. This is what webservers normally do, but it won´t work here. From my opinion, what you see then is the regular domoticz error-page. If you use the complete url: your-ip:8084/subfolder/frontpage.html it will work just fine. So putting all files in a subfolder is no issue.

Cheers,
Marko

[vandriver]

Hi everyone,
I really love this Frontpage thing and I would appreciate very much if someone could give a short introduction on how to deal with the cells correctly when putting stuff on the dashboard. After a lot of try and error i am wondering:

1. how do you put things in specific cells? First I thought that the sidebar starts with cells 1 - 6 and the first tile on the dashboard seems to be cell 7, followed by 8 and so on. But that does not seem to be the case.

2. how do you make use of the specific icons within cells /tiles?

3. how do you create the coloured circles (=donut charts?)?

4. can the sidebar only have "on" buttons or is it possible to have the "on / off" buttons there?

Questions over questions but I really want to know how this thing works...

Thank you,
Marko

[commodore white]

H. I've been using domoticz for a few years but only recently got into frontpages. I'm liking this one a lot since its fairly uncluttered and organises the data nicely.

I'm quite fond of its clean lines but one thing niggles me each time I open it up. It seems to me that the space at the top of the switches pane (left hand pane) could be put to better use. I suggest, the "switches" label be replaced by the current time. This would free up the "time" cell currently on the main page for a better use. It also means that the time would be displayed no matter which tab you select.

No other pane is given a label like "switches" so why this one? Though I guess you could argue that the tab bar selection sort of labelled the tab pages.

Keep up the good work.

Peter

[loki]

Hi guys,

I really like this frontpage!
Trying to set things up but I got the same question as vandriver.
3. how do you create the coloured circles (=donut charts?) and the day graph.

In the settings.js I'm using the default graph100 and graph100 is available in graph.html.

Using: Domoticz 3.4834
path: /test/frontpage.html

regards,
Loki

[codesnipper]

I added code for data from Netatmo and other devices that give multiple results in one string - eg. "20 C, 45 %, 1234 hPA". Code strips this data, and data's labels ( "Temp + Humidity + Barometer") from json and give each one in this form:

<div class="Temp">20*C</div>



So you can style it individually in css.

In js/method.js, after that:

Code: Select all

                                    if (vtype == "Temp") {
                                        vunit = $.degreesUnit;
                                    }
                                    if (vtype == "Humidity") {
                                        vunit = $.percentUnit;
                                    }

place this:

Code: Select all

                                    if ((vtype == "Data") && (vdata.split(',').length > 1)) {
											var itype = item.Type;
											var data = vdata.split(",");
											var css = itype.split("+");
											var datavalue = "";
											var i;
											var j;

											for (i = 0; i < data.length; i++){
											datavalue += "<div class='" + css[i] + "'>" + data[i] + "</div>";
										}
									vdata = datavalue.replace(" C","&deg;C");
                                    }

Sound and CO2 data are in separate <h2> tags added to frontpage.html with id names cell91, cell92, cell81, cell82 etc...

[iMars]

Is it possible to use virtual switches/dimmers? I'm using a lot of esp8266 custom made hardware, which I can control through scripts. Those scripts are controlled by virtual dummy switches:

Screen Shot 2016-03-13 at 01.06.59.png (25.92 KiB) Viewed 6599 times

I've tried several different ways, yet none made it work

Anyone who can tell me how to make this work in frontpage?

[toreandre]

Is it possible to use the Selector switch for the items on the leftside?

[woody4165]

I added code for data from Netatmo and other devices that give multiple results in one string - eg. "20 C, 45 %, 1234 hPA". Code strips this data, and data's labels ( "Temp + Humidity + Barometer") from json and give each one in this form:

<div class="Temp">20*C</div>



...

Hi
I am getting mad on how to define and pass multiple data like in the example above.

Starting from default, I have some questions...

should I change the frontpage.html to create a special cell?
How can I modify the image (like the megaphone one) to have others?
In the settings.js how should I pass the multiple value to be in the same cell?
is there a place in the code where it put hPa if type is Barometer, % if Humidity and so on?


I read the 3d but I haven't find it.

Thanks
Woody