Build your own Pimatic GUI - with template

Door Koffie op maandag 20 februari 2017 14:58 - Reacties (2)
Categorie: -, Views: 1.631

Blog is in stonecoal English, sorry :P

This blog is a updated, English, version of my previous blog: Koffie's tweakblog: Maak je eigen HTML GUI voor Pimatic - Basic
I have created a template GUI that you can edit/extend with you own information

Prerequisites:? /
- Pimatic up and running
- Some sort of webserver for hosting your files with some basic webserver knowledge
- Basic Ppimatic knowledge
- A little knowledge of HTML/Javascript/Jquery
- Template webfiles : https://github.com/koffienl/PimaticGUI/tree/master/Template
- A admin username and password for Pimatic API connection

Installation :?
Installation is easy. Download the template webfiles from github and copy them into the webroot of your favorite webserver. The HTML assumes that the index.html file is in the root of the URL (http://ipwebserver/index.html not http://ipwebserver/mygui/index.html).

Open js/pimatic-socket.js in you favorite text editor and go to line 8 :

code:
1
var socket = io.connect('http://pimatic_ip/?username=admin&password=admin', {


Edit this line so that it corresponds with the FQDN / IP of your Pimatic server with a correct username and password.
Save the file

Now open your GUI by browsing to http://ipwebserver/index.html in your favorite browser.
You should a page like this:

http://zooi.oostindie.com/images/444pimatic_UI_template_tn.jpg

That is, you have installed your own GUI :Y)

Getting thermostat / heating info on the GUI :?
the first 'block' (Row 1, Column 1) contains everything to get info about thermostat/heating into the GUI. If you do not want this in your GUI you can remove it from the HTML file.

Open index.html in your favorite text editor and go to line 61 look for the following code:

code:
1
<h2 id="LivingRoomTemperature">LivingRoomTemperature</h2>



This line will be used to display the current livingroom temperature used in Pimatic. Go to the original pimatic website and look for the variable that is used for displaying the livingroom temprature. Click on the text, a black 'popup' will appear.

http://zooi.oostindie.com/images/300pimatic_UI_find_ID.jpg
The first line will begin with ID: followed by the ID of the device.
With this little trick you can find out the Pimatic ID of the device you wan to add to the GUI. When using a (Pimatic) ID in this guide, use this to find the ID you need.
Remember te ID you have. In my example the ID is id-woonkamer-temperatuur
Go back to the editor and change the ID used in the HTML.

Change this

code:
1
<h2 id="LivingRoomTemperature">LivingRoomTemperature</h2>



Into this:

code:
1
<h2 id="">LivingRoomTemperature</h2>



By default the template only supports buttons and presence devices. So we have to add some coded to js/pimatic-socket.js
Go to line 63 and add the following code:

code:
1
2
3
4
            if (devices[key].id == "id-woonkamer-temperatuur")
            {               
                $("#gui").find('#LivingRoomTemperature').html("LivingRoomTemperature" + devices[key].attributes[0].value +" C")
            }



Save both file (index.html and pimatic-socket.js and do a hard refresh (CTRL-F5) in your browser.
If you did everything according to this guid, you should see the temperature of your livingroom with the same value as in Pimatic.

Unfortunately this code only updates the temperature upon connecting to Pimatic. We need to add some extra lines to update the temperature every time Pimatic send a updated temperature.

In /js/pimatic-socket.js search for the following code:

code:
1
2
socket.on('deviceAttributeChanged', function(attrEvent) {
    console.log(attrEvent);


Right after these 2 lines, add this code:

code:
1
2
3
4
   if (attrEvent.deviceId == "id-woonkamer-temperatuur")
   {
        $("#gui").find('#LivingRoomTemperature').html("LivingRoomTemperature " + attrEvent.value +" C");
   }


Save the file and do a hard refresh in your browser.
You should see the livingroom temperature that will be updated realtime as soon as Pimatic receives a new value.

Now we can do the same for a other temperature. In my example I will use a weather temperature value.
Find the Weather temperature in the index.html :

code:
1
                                    <h4 id="WeatherTemperature">WeatherTemperature</h4>



Find the ID of your weather temperature. In my situation the ID is weer.
Find the previous added code:

code:
1
2
3
4
            if (devices[key].id == "id-woonkamer-temperatuur")
            {               
                $("#gui").find('#LivingRoomTemperature').html("LivingRoomTemperature" + devices[key].attributes[0].value +" C")
            }



Right after that, add the following code:

code:
1
2
3
4
            if (devices[key].id == "weer")
            {
                $("#gui").find('#WeatherTemperature').html("Lelystad " + devices[key].attributes[0].value +" C");
            }



Now we have to add extra code to update the temperature when getting pushed from pimatic.
find the previous added code:

code:
1
2
3
4
   if (attrEvent.deviceId == "id-woonkamer-temperatuur")
   {
        $("#gui").find('#LivingRoomTemperature').html("LivingRoomTemperature " + attrEvent.value +" C");
   }


Right after that, add the following code:

code:
1
2
3
4
   if (attrEvent.deviceId == "weer")
   {
        $("#gui").find('#WeatherTemperature').html("Lelystad " + attrEvent.value +" C");
   }



OK, so far we have added the livingroom temperature and the weather temperature. When we open the page the info is gathered from Pimatic and when Pimatic pushes a updated value it is immediately changed on your GUI.
Next step is to display some information about the state of the (dummy)thermostat).

In my example, the ID of the thermostat is thermostaat

Find the previous added code:

code:
1
2
3
4
            if (devices[key].id == "weer")
            {
                $("#gui").find('#WeatherTemperature').html("Lelystad " + devices[key].attributes[0].value +" C");
            }


Right after that, add the following code:

code:
1
2
3
4
5
            if (devices[key].id == "thermostaat")
            {
                $("#gui").find('#setpoint').html("Setpoint " + devices[key].attributes[0].value +" C");
                $("#gui").find('#mode').html(" [" + devices[key].attributes[2].value +"]");
            }



To update the information after a update from Pimatic:
Find the previous added code:

code:
1
2
3
4
   if (attrEvent.deviceId == "weer")
   {
        $("#gui").find('#WeatherTemperature').html("Lelystad " + attrEvent.value +" C");
   }


Right after that, add the following code:

code:
1
2
3
4
5
6
7
8
9
   if (attrEvent.deviceId == "thermostaat" && attrEvent.attributeName == "temperatureSetpoint")
   {
       $("#gui").find('#setpoint').html("Setpoint " + attrEvent.value +" C");
   }

   if (attrEvent.deviceId == "thermostaat" && attrEvent.attributeName == "mode")
   {
       $("#gui").find('#mode').html(" [" + attrEvent.value + "]");
   }



When doing a hard refresh on indedx.html in your browser, all the thermostat information should be the same as in Pimatic.
Try changing the mode or setpoint temperature in Pimatic, you should see a instant update in your own GUI :Y)

Now one more last thing we need is the option to change the setpoint from the GUI. In the pimatic-socket.js there is allready some code for this:


code:
1
2
3
4
5
6
7
8
9
10
function ChangeSetpoint(type){
    socket.emit('call', {
        id: 'executeAction-1',
        action: 'executeAction',
        params: {
            actionString: 'press ' + type
        }
    });

}



This function is called when you click / tap on the arrows you find next to the text "Change setpoint".
This code will tell the Pimatic API to press 2 buttons called setpoint-min and setpoint-plus
Go to Pimatic and create a buttons device:
http://zooi.oostindie.com/images/372pimatic_UI_ChangeSetpo_tn.jpg

You now have the 2 buttons that will be 'pressed' by the GUI through the API. Pressing these buttons will do nothing, so you have to add some rules to the buttons:

code:
1
WHEN setpoint-plus is pressed THEN set temp of thermostaat to ($thermostaat.temperatureSetpoint + 0.5)



code:
1
WHEN setpoint-min is pressed THEN set temp of thermostaat to ($thermostaat.temperatureSetpoint - 0.5)



Test it by clicking / tapping on the arrows. It should change your setpoint and update the new values immediately in the GUI.

You are almost done with the thermostat block. Only one last thing is needed: a ON/OFF button for your heating device.
Find the ID for your heating device in Pimatic. In my case the ID is pelletkachel-power
Search for the following line index.html :

code:
1
<button class="btn btn-default btn-lg fullwidth uibutton" onclick="toggleDevice('heating-device')" id="heating-device">Heating Device</button>


Change the 2 words heating-device with your Pimatic ID. For me this would be:

code:
1
2
3
4
5
6
7
8
9
<button class="btn btn-default btn-lg fullwidth uibutton" onclick="toggleDevice('pelletkachel-power')" id="pelletkachel-power">Heating Device</button>[/b]

Refresh the index.html in your browser. When you press the [b]Heating Device[/b] button in the GUI, it should by turned on in Pimatic. When you turn it off in Pimatic you should see change the button in your GUI

[b]Adding extra buttons to the GUI :? [/b]
OK, the hard part is done, almost any other devices will require just 1 line of HTML code.
On the GUI there is a button called [b]Button 1[/b]. We will change this into a working device. Fin a on/off device in Pimatic and remember the ID. In my case I will use a device with ID [b]terrasoverkapping[/b]
Find [b]Button 1[/b] in the [b]index.html[/b] :
[code]<button class="btn btn-default btn-lg fullwidth uibutton" onclick="toggleDevice('button1')" id="button1">Button 1</button>


Change the ID you hae in Pimatic, and if you want give it a better display name:

code:
1
<button class="btn btn-default btn-lg fullwidth uibutton" onclick="toggleDevice('terrasoverkapping')" id="terrasoverkapping">Button for terrasoverkapping</button>



Save the file and refresh in your browser. Your button should reflect the state in Pimatic when loading the GUI and also update immediately when it is changed in Pimatic.

Adding presence device to the GUI :?
You can add several types of presence devices to the GUI. It can be a dummy-presence device , a ping-device or a contact-device.
First, as usual, find the Pimatic ID of the device. In my example it will be anybody-home. Find the presence device in the index.html :

code:
1
<div class="well well-sm"><b>Presence 1 </b><span class="circle" id="anybody-home"></span></div>


And update it with your info:

code:
1
<div class="well well-sm"><b>Anybody home? </b><span class="circle" id="anybody-home"></span></div>



Save the HTML file and refresh your browser.

You are done! You have created your own GUI that reflects the Pimatic states. It will be update instantly when you something changes in Pimatic. Or, you can push the buttons in the GUI so Pimatic will execute the push on the button.
You can extend the GUI page with as many buttons, text or presence device as you want.

Volgende: Maak je eigen HTML GUI voor Pimatic - Basic 19-02 Maak je eigen HTML GUI voor Pimatic - Basic

Reacties


Door Tweakers user himlims_, maandag 20 februari 2017 16:44

doet me veel denken aan nodo;

http://www.nodo-domotica.nl/index.php/Hoofdpagina

(icm. arduino) maar dit van jou ziet er wel wat gelikter uit :P

Door Tweakers user FuaZe, zaterdag 24 juni 2017 09:29

Hmm, cool.

Ik heb zojuist een touchscreen werkend voor de Raspberry Pi (inc ubuntu), denk je dat een webweergave snel/vloeiend genoeg werkt op de Pi zelf?

Mij lijkt dat iets natives, (Python of C++ gui) een stuk sneller gaat?

Om te kunnen reageren moet je ingelogd zijn. Via deze link kun je inloggen als je al geregistreerd bent. Indien je nog geen account hebt kun je er hier n aanmaken.