FlatZ Frontpage

Moderator: leecollings

Post Reply
rebelo
Posts: 13
Joined: Tuesday 17 January 2017 13:04
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.5877
Location: Portugal
Contact:
Contact rebelo

Re: FlatZ Frontpage

Post by rebelo »

@ stavroshamster

When You say:
Then there is some JavaScript code to read the SetPoint and pass it to the 'insert' div, noting that the '11' here is the position of the thermostat in the resulting JSON information:
what is the meaning of this?
Is it different from the idx?

What number shall i consider from the following json info:

Code: Select all

        "AddjMulti" : 1.0,
         "AddjMulti2" : 1.0,
         "AddjValue" : 0.0,
         "AddjValue2" : 0.0,
         "BatteryLevel" : 255,
         "CustomImage" : 0,
         "Data" : "16.0",
         "Description" : "",
         "Favorite" : 1,
         "HardwareID" : 6,
         "HardwareName" : "NETATMO",
         "HardwareType" : "Netatmo",
         "HardwareTypeVal" : 54,
         "HaveTimeout" : false,
         "ID" : "000004C",
         "LastUpdate" : "2017-02-09 10:46:11",
         "Name" : "NETATMO_SETPOINT",
         "Notifications" : "false",
         "PlanID" : "3",
         "PlanIDs" : [ 3, 4 ],
         "Protected" : false,
         "SetPoint" : "16.0",
         "ShowNotifications" : true,
         "SignalLevel" : "-",
         "SubType" : "SetPoint",
         "Timers" : "false",
         "Type" : "Thermostat",
         "TypeImg" : "override_mini",
         "Unit" : 1,
         "Used" : 1,
         "XOffset" : "0",
         "YOffset" : "0",
         "idx" : "5"
Tks
Rebelo
Top
rebelo
Posts: 13
Joined: Tuesday 17 January 2017 13:04
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.5877
Location: Portugal
Contact:
Contact rebelo

Re: FlatZ Frontpage

Post by rebelo »

rebelo wrote:@ stavroshamster

When You say:
Then there is some JavaScript code to read the SetPoint and pass it to the 'insert' div, noting that the '11' here is the position of the thermostat in the resulting JSON information:
what is the meaning of this?
Is it different from the idx?

What number shall i consider from the following json info:

Code: Select all

        "AddjMulti" : 1.0,
         "AddjMulti2" : 1.0,
         "AddjValue" : 0.0,
         "AddjValue2" : 0.0,
         "BatteryLevel" : 255,
         "CustomImage" : 0,
         "Data" : "16.0",
         "Description" : "",
         "Favorite" : 1,
         "HardwareID" : 6,
         "HardwareName" : "NETATMO",
         "HardwareType" : "Netatmo",
         "HardwareTypeVal" : 54,
         "HaveTimeout" : false,
         "ID" : "000004C",
         "LastUpdate" : "2017-02-09 10:46:11",
         "Name" : "NETATMO_SETPOINT",
         "Notifications" : "false",
         "PlanID" : "3",
         "PlanIDs" : [ 3, 4 ],
         "Protected" : false,
         "SetPoint" : "16.0",
         "ShowNotifications" : true,
         "SignalLevel" : "-",
         "SubType" : "SetPoint",
         "Timers" : "false",
         "Type" : "Thermostat",
         "TypeImg" : "override_mini",
         "Unit" : 1,
         "Used" : 1,
         "XOffset" : "0",
         "YOffset" : "0",
         "idx" : "5"
Tks
Rebelo
Will answer myself.
It was not easy to find the position of the thermostat in the resulting JSON information.
Assumed that it was the 'data' field from the set poit counting from the begining of the list but it wasn't.
Have so used a test page like bellow and changed the numbers in [ ]till the correct set point value was shown.
Enjoy it.

Code: Select all

<!DOCTYPE html>
<html>
 <head>
  <title>Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="http://code.jquery.com/jquery.js"></script>
 </head>
 <body>
 <script>
  $(document).ready(function(){

   //We request a list of all sensor data
   $.getJSON("http://domoticz ip:port/json.htm?type=devices&filter=all&used=true&order=Name", function(result){
 
 document.getElementById("sensor-container").innerHTML += '<div>'+
     '<h4>' + result.result[5].Name + '</h4>'+
     '<h5>Status: ' + result.result[5].Data + '</h5>'+
     '<p>Updated: ' + result.result[5].LastUpdate +'</p>'+
    '</div>';
   });
});
 </script>
<div id="sensor-container">
</div>
Top
rebelo
Posts: 13
Joined: Tuesday 17 January 2017 13:04
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.5877
Location: Portugal
Contact:
Contact rebelo

Re: Redraw

Post by rebelo »

Btje wrote:What I see is that pies redraw al the time. Is this configurable?
Hi Btje, try to replace the highcharts.js in the js folder by the most recent one from http://www.highcharts.com/.
In my case it solved the issue.
Top
levynger
Posts: 87
Joined: Wednesday 21 December 2016 19:03
Target OS: Raspberry Pi / ODroid
Domoticz version:
Location: Israel
Contact:
Contact levynger

Re: FlatZ Frontpage

Post by levynger »

Really liked the UI, i;ve been trying now to make it work.
I have the page loaded sucessfully, and connected to domoticz.
however for some strange behaviour, the same Switch works under Graph tab and not in Lights/Dashboard page

the switch is 'button' (type On/Off) -
in the Dashboard setting.js:

Code: Select all

.PageDashboardArray = [
    //switches
    ['37', 'Data', 'cell1', 'Room Lights', 'button'],//onbutton = only push on
the same switch appears in PageSwitchArray in the settings, and in Graph/Traffic it seems to work fine.

Code: Select all

$.PageSwitchArray = [
    //switches (left sidebar)
    ['37', 'Data', 'cell1', 'Room Lights1', 'button'],//onbutton = only push on

I've been sniffing the json GET commands, at leats for the sucessfull, i have found:

Code: Select all

http://*******:********@192.168.*.***:8*8*/json.htm?type=command&param=switchlight&idx=37&switchcmd=On&level=0&passcode=&jsoncallback=jQuery214048847436707621905_1487621397244&_=1487621397254

which is missing 'level' and 'passcode; params in it.

Code: Select all

                url: $.domoticzurl + "/json.htm?type=command&param=switchlight" + "&idx=" + idx + "&switchcmd=" + switchcmd + "&level=0",
i couldnt find the code for the graph/weather pages that construct the GET command to compare.

or perhaps im doing something wrong in the cofigration..




EDIT: found the culprit, had to change the json command to:
url: $.domoticzurl + "/json.htm?type=command&param=switchlight" + "&idx=" + idx + "&switchcmd=" + switchcmd + "&passcode=&jsoncallback=?",
Top
stingone
Posts: 48
Joined: Monday 26 October 2015 16:28
Target OS: -
Domoticz version:
Contact:
Contact stingone

Re: FlatZ Frontpage

Post by stingone »

Is it possible to run it from a sub folder in the www folder? Just tried to test but all devices stay Black.
Top
rebelo
Posts: 13
Joined: Tuesday 17 January 2017 13:04
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.5877
Location: Portugal
Contact:
Contact rebelo

Re: FlatZ Frontpage

Post by rebelo »

stingone wrote:Is it possible to run it from a sub folder in the www folder? Just tried to test but all devices stay Black.
It is, that's the way we have it.
What is Your $.domoticzurl in settings.js?
Top
stingone
Posts: 48
Joined: Monday 26 October 2015 16:28
Target OS: -
Domoticz version:
Contact:
Contact stingone

Re: FlatZ Frontpage

Post by stingone »

rebelo wrote:
stingone wrote:Is it possible to run it from a sub folder in the www folder? Just tried to test but all devices stay Black.
It is, that's the way we have it.
What is Your $.domoticzurl in settings.js?
Strange i had to login in domoticz itself before it was working, however i had al login information included in the config file.

one issue i ran into now is that the "button" is not working as a switch. i can only use it for turning on a device but switching off does not work.
Top
rebelo
Posts: 13
Joined: Tuesday 17 January 2017 13:04
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.5877
Location: Portugal
Contact:
Contact rebelo

Re: FlatZ Frontpage

Post by rebelo »

stingone wrote:Strange i had to login in domoticz itself before it was working, however i had al login information included in the config file.
I believe user and pass in url do not work, now, in most of the browsers.
Try to white list your Local Network (no username/password) in the Domoticz settings page.
Or use the remember user/pass feature of the browser.
Top
stingone
Posts: 48
Joined: Monday 26 October 2015 16:28
Target OS: -
Domoticz version:
Contact:
Contact stingone

Re: FlatZ Frontpage

Post by stingone »

rebelo wrote:
stingone wrote:Strange i had to login in domoticz itself before it was working, however i had al login information included in the config file.
I believe user and pass in url do not work, now, in most of the browsers.
Try to white list your Local Network (no username/password) in the Domoticz settings page.
Or use the remember user/pass feature of the browser.
Ok wil do :) last one... how can i change the camera page to 1 cam and full size over the page instead of 6 small cams.
Top
rebelo
Posts: 13
Joined: Tuesday 17 January 2017 13:04
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.5877
Location: Portugal
Contact:
Contact rebelo

Re: FlatZ Frontpage

Post by rebelo »

stingone wrote:Ok wil do :) last one... how can i change the camera page to 1 cam and full size over the page instead of 6 small cams.
You have to play with the css and html files.
Try to use the one from weather that is a full page...
Enjoy ;-)
Top
stingone
Posts: 48
Joined: Monday 26 October 2015 16:28
Target OS: -
Domoticz version:
Contact:
Contact stingone

Re: FlatZ Frontpage

Post by stingone »

rebelo wrote:
stingone wrote:Ok wil do :) last one... how can i change the camera page to 1 cam and full size over the page instead of 6 small cams.
You have to play with the css and html files.
Try to use the one from weather that is a full page...
Enjoy ;-)
Great works like a charm,

Still having the button issue only works as a on button... and is it possible to access the flatz frontpage from outside LAN? i use a dns name to access domoticz via 443 ssl. however the page stays empty after login
Top
rebelo
Posts: 13
Joined: Tuesday 17 January 2017 13:04
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.5877
Location: Portugal
Contact:
Contact rebelo

Re: FlatZ Frontpage

Post by rebelo »

stingone wrote:Great works like a charm,

Still having the button issue only works as a on button... and is it possible to access the flatz frontpage from outside LAN? i use a dns name to access domoticz via 443 ssl. however the page stays empty after login
Good.

Abt the button not quite sure what might be the issue.
What do You see in the logs?

From outside the lan i get only the weather page working.
Reason might be having it in a folder inside the www folder...
Do You want to access it via android? Domoticz app 2.0 from https://www.domoticz.com/forum/viewtopi ... =37&t=8884 is really good for that.
Top
Maartenkr
Posts: 15
Joined: Sunday 18 September 2016 23:56
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.7196
Location: Hellevoetsluis
Contact:
Contact Maartenkr

Re: FlatZ Frontpage

Post by Maartenkr »

i have a question


I have ad a extra trend only I get the size not the same who can help me?

Image

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <meta charset="utf-8">
    <title>Fat-Huis</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/main.css" />

    <link href="css/icons.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="js/highcharts.js"></script>
    <script type="text/javascript" src="js/jquery.noty.packaged.js"></script>
    <script type="text/javascript" src="settings/settings.js"></script>
    <script type="text/javascript" src="js/noty.js"></script>
    <script type="text/javascript" src="js/methods.js"></script>
    <script type="text/javascript" src="js/jquery.stayInWebApp.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    <style type="text/css">
        body {
            padding-top: 60px;
        }
    </style>
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
    <!-- Google Fonts call. Font Used Open Sans & Raleway -->
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,300" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">

</head>

<body>
    <div class="navbar-nav navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">Fat-Huis</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a class="stay" href="index.html"><i class="icon-home icon-white"></i> Home</a></li>
                    <script>
                        if ($.Lights) {
                            document.write('<li ><a class="stay" href="lights.html"><i class="icon-th icon-white"></i> Verlichting</a></li>');
                        }
                    </script>
                    <script>
                        if ($.Graph) {
                            document.write('<li class="active"><a class="stay" href="graph.html"><i class="icon-th icon-white"></i> Trend</a></li>');
                        }
                    </script>
                    <script>
                        if ($.Camera) {
                            document.write('<li><a class="stay" href="camera.html"><i class="icon-th icon-white"></i> Camera</a></li>');
                        }
                    </script>
                    <script>
                        if ($.Weather) {
                            document.write('<li ><a class="stay" href="weather.html"><i class="icon-th icon-white"></i> Weer</a></li>');
                        }
                    </script>
                    <script>
                        if ($.News) {
                            document.write('<li ><a class="stay" href="news.html"><i class="icon-th icon-white"></i> Nieuws</a></li>');
                        }
                    </script>
                    <script>
                        if ($.Traffic) {
                            document.write('<li ><a class="stay" href="traffic.html"><i class="icon-th icon-white"></i> Verkeer</a></li>');
                        }
                    </script>
                    <script>
                        if ($.Log) {
                            document.write('<li><a class="stay" href="logs.html"><i class="icon-th icon-white"></i> Log</a></li>');
                        }
                    </script>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
    <div class="container">
        <!-- FIRST ROW OF Domoticz -->
        <div class="row">
            <!-- SWITCHES Domoticz -->
            <div class="col-sm-3 col-x-3">
                <div class="dash-unit" style="height: 610px;">
                    <dtitle>Schakelaar</dtitle>
                    <hr>
                    <!-- ICON -->
                    <div class="info-user">
                        <span aria-hidden="true" class="li_params fs2"></span>
                    </div>
                    <br>
                    <center>
                        <dtitle id="desc_cell1"></dtitle>
                    </center>
                    <center>
                        <div id="cell1" style="margin-top:5px;width:60px;"></div>
                    </center>
                    <center>
                        <dtitle id="desc_cell2"></dtitle>
                    </center>
                    <center>
                        <div id="cell2" style="margin-top:5px;width:60px;"></div>
                    </center>
                    <center>
                        <dtitle id="desc_cell3"></dtitle>
                    </center>
                    <center>
                        <div id="cell3" style="margin-top:5px;width:60px;"></div>
                    </center>
                    <center>
                        <dtitle id="desc_cell4"></dtitle>
                    </center>
                    <center>
                        <div id="cell4" style="margin-top:5px;width:60px;"></div>
                    </center>
                    <center>
                        <dtitle id="desc_cell5"></dtitle>
                    </center>
                    <center>
                        <div id="cell5" style="margin-top:5px;width:60px;"></div>
                    </center>
                    <center>
                        <dtitle id="desc_cell6"></dtitle>
                    </center>
                    <center>
                        <div id="cell6" style="margin-top:5px;width:60px;"></div>
						<center>
                        <dtitle id="desc_cell12"></dtitle>
                    </center>
                    <center>
                        <div id="cell12" style="margin-top:5px;width:60px;"></div>
                    </center>
                    </center>
                </div>
            </div>
            <!-- DONUT CHART -->
            <div class="col-sm-3 col-lg-3 largemobilefix" >
                <div class="dash-unit" style="height:190px;">
                    <dtitle id="desc_cell7"></dtitle>
                    <hr>
                    <div id="graph100" style="height: 13em;margin: auto;margin-top: -17px"></div>
                    <h4 id="cell7" style="margin-top:-35px;"></h4>
                  <span class=" text" id="cell70" style="margin-top:-5px;float:right;padding-right:10px;font-size: 10px;color: #9E9E9E; "/>
               </div>
            </div>
         </div>
         <!-- /row -->
         <div >
            <!-- DONUT CHART -->
            <div class="col-sm-3 col-lg-3 largegraphmobilefix">
               <div class="dash-unit" style="height:190px; ">
                  <dtitle id="desc_cell8" ></dtitle>
                  <hr>
                  <div id="graph200" style="height: 13em;margin: auto;margin-top: -17px "></div>
                  <h4 id="cell8" style="margin-top:-35px; "></h4>
                  <span class="text" id="cell80" style="margin-top:-5px;float:right;padding-right:10px;font-size: 10px;color: #9E9E9E; "/>
               </div>
            </div>
         </div>
         <!-- /row -->
         <div>
            <!-- DONUT CHART -->
            <div class="col-sm-3 col-lg-3 largegraphmobilefix2" >
               <div class="dash-unit" style="height:190px; ">
                  <dtitle id="desc_cell10" ></dtitle>
                  <hr>
                  <div id="graph300" style="height: 13em;margin: auto;margin-top: -17px "></div>
                  <h4 id="cell10" style="margin-top:-35px;"></h4>
                    <p><span class="text" id="cell100" style="margin-top:-5px;float:right;padding-right:10px;font-size: 10px;color: #9E9E9E;" /></p>
                    <p>&nbsp;</p>
                    <div class="col-sm-3 largegraphmobilefix3 col-lg-12" >
                      <div class="dash-unit" style="height:190px; ">
                        <dtitle id="desc_cell11" ></dtitle>
                        <hr />
                        <div id="graph400" style="height: 13em;margin: auto;margin-top: -17px "></div>
                        <h4 id="cell11" style="margin-top:-35px;"></h4>
                        <span class="text" id="cell110" style="margin-top:-5px;float:right;padding-right:10px;font-size: 10px;color: #9E9E9E;" /></span> </div>
                    </div>
                    <p>&nbsp;</p>
                </div>
            </div>
        </div>
        <!-- /row -->
		         <div>
        <!-- DONUT CHART --></div>
        <!-- /row -->
		<!-- /row -->
    </div>

    <!-- /container -->
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $(function() {
                $.stayInWebApp('a.stay');
            });

            loadCSS("css/" + $.theme);

            RefreshSwitchData();
            RefreshGraphData();
        });
    </script>
</body>

</html>
Top
JeanChristophe
Posts: 12
Joined: Tuesday 18 April 2017 19:21
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:
Contact JeanChristophe

Re: FlatZ Frontpage

Post by JeanChristophe »

sorampage wrote:
sorampage wrote:Hi all,

It's possible to add Blinds ??
I have some switches in my Domoticz for my blinds, I have 1 ID per Blinds, but 3 switches for one blind ... (Open,Stop,Close) PJ

If anyone has an idea .. :)
Hi all,
Someone can help me ?
I can't. Sorry.
But I'm interested too :)
Top
Martijn85
Posts: 53
Joined: Wednesday 20 January 2016 20:21
Target OS: Raspberry Pi / ODroid
Domoticz version: Stable
Location: Netherlands
Contact:
Contact Martijn85

Re: FlatZ Frontpage

Post by Martijn85 »

My Philips Hue lights don`t work correctly. FlatZ sees when the are off or on but i can't switch them on or off. I also can't set any color.

Can someone tell me what's wrong here?

Code: Select all

// Light screen User settings >>> 
$.LightArray = [
    //format: idx, 'Hue' (color lamp) or 'Dimmer' (for normal dimmer), replace label, description, maxdimlevel
    ['348', 'Hue', 'cell7', 'Lamp TV'],
    ['349', 'Hue', 'cell8', 'Lamp Bank (Klein)'],
    ['350', 'Hue', 'cell10', 'Lamp Bank (Groot)'],
    ['109', 'Hue', 'cell11', 'Tafel 4'], //demo
    ['111', 'Hue', 'cell12', 'Spot 1 (TV)'], //demo
    ['112', 'Hue', 'cell13', 'Spot 1 (Bank)'], //demo
];
Attachments
2017_04_24_09_31_31_FlatZ_Frontpage.png
2017_04_24_09_31_31_FlatZ_Frontpage.png (39.98 KiB) Viewed 5381 times
Top
sander
Posts: 9
Joined: Monday 22 December 2014 22:28
Target OS: Raspberry Pi / ODroid
Domoticz version: latest..
Contact:
Contact sander

Re: FlatZ Frontpage

Post by sander »

Hi, I am having the same issue getting it to work on my pi. How did you get it going? did you unzip it with the pi command ...?
Raspberry Pi 2B+
connected: klik aan klik uit switches, dimmers, weather station, water meter (pulse)
Automation use: Blocky
Top
User avatar
johnwulp
Posts: 14
Joined: Monday 23 February 2015 16:50
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.4834
Location: Netherlands, Oud-Beijerland
Contact:
Contact johnwulp

Re: FlatZ Frontpage

Post by johnwulp »

Hi,

I'm trying to get my power consumption in one graph. Problem is that around 23.00 we switch over to a lower rate. In JSON this is returned as V and V2. See screenshot below.
Image

Currently, i can only specify the day or night counter (V or V2) with:

Code: Select all

['19', 'counter', 'day', 'cell7', 'Stroom (Watt)', 'graph100', '#b2c831', 'v2']
Result in the graph:
Image

Is there a way to use the V value and V2 together?
if it ain't broke don't fix it!
Top
Jochem
Posts: 19
Joined: Sunday 28 February 2016 19:39
Target OS: Raspberry Pi / ODroid
Domoticz version: 4.10181
Location: Noordwijk
Contact:
Contact Jochem

Re: FlatZ Frontpage

Post by Jochem »

Hello,

When I do: http://192.168.1.9:8080/json.htm?type=d ... ncallback=?

I recieve the message: -bash: http://192.168.1.9:8080/json.htm?type=devices: No such file or directory

whats going wrong???

For now I have a huge list of devices and their code, but when I add the IDX numbers for the side bar, only the switch disappear on the screen and I cannot change the setting of it. why can I not choose IDX 2 for switching off to switch off everything at the house.

I speciale setup some scenes to switch off a group of lamps (see picture)
Attachments
Test 001.png
Test 001.png (160.92 KiB) Viewed 3581 times
Raspberry P3, RF-Link FW version 48, lots of KAKU switches, Sonos connected, LG TV switching, a lot of weather switches.
Top
Post Reply

Return to “Design, usability and languages”

Who is online

Users browsing this forum: No registered users and 1 guest