Maak je eigen HTML GUI voor Pimatic - Basic

Door Koffie op zondag 19 februari 2017 12:41 - Reacties (8)
Categorie: -, Views: 2.769

In mijn vorige blog had ik het al even over mijn laatste projectje : een tablet aan de muur om Pimatic aan te sturen.
Omdat de gewone Pimatic GUI soms wat overvol kan raken en niet altijd even vriendelijk is voor non-techneuten ben ik op zoek gegaan naar een makkelijk aan te passen GUI.
Het begon met deze post : https://forum.pimatic.org...g-your-own-user-interface
Gebruiker kitsunen had een HTML pagina in elkaar gezet welke gebruik maakt van de webocket-API van Pimatic.
Omdat de GUI nogal onoverzichtelijk in elkaar zat en heel veel handwerk bevatte, heb ik de files eens flink onderhanden genomen: https://github.com/koffienl/PimaticGUI/tree/master/Basic

Het resultaat is een simpele site welke verbinding maakt met de websocket-API en alles keurig verwerkt in de GUI.
Mijn huidige GUI is een stuk complexer dan waar deze blog over gaat. Daarom heb ik de configuratie behoorlijk gestript zodat er een basic GUI overblijft. Van hieruit kun je zelf aan de gang met uitbreidingen. Later zal ik wat complexere voorbeelden posten.
Om een idee te geven : mijn huidige GUI verschilt op basis van de stand van een dummy switch, welke weer gebaseerd is op het seizoen. Daarnaast heb ik mijn afspraken uit een google calendar ook op de GUI geplaatst. Maar dat is dus voor later.

http://zooi.oostindie.com/images/938pimatic_UI_winter_tn.jpg http://zooi.oostindie.com/images/797pimatic_UI_summer_tn.jpg

Installeren :?
Voor het installeren van de files is niet veel nodig. Gewoon een simpele webserver. Ik ge er vanuit dat je weet hoe je een simpel webservertje installeert en aan de praat krijgt.
Download deze files en plaats ze je in webroot.

Aanpassen naar je eigen pimatic :?
Het eerste wat je moet doen is het bewerken van js/pimatic-socket.js regel 7.
Standaard staat daar:

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


Pas deze regel aan naar een correcte URL , username en password voor je pimatic installatie. Omdat de websocket verbinding door de client browser word opgezet, is het van belang dat de URL die je hier opgeeft ook benaderbaar is voor de client. Als je http://192.168.1.1 als URL gebruikt, zal je dit dus niet buiten je eigen netwerk kunnen gebruiken. Verderop in deze blog zal ik nog iets roepen over een reverse proxy hiervoor.

Wanneer je de URL aangepast hebt kun je de GUI gaan gebruiken. De standaard buttons uit mijn installatie zul je niet veel aan hebben, maar het gaat je een beeld geven van de mogelijkheden.
Wanneer de verbinding met de websocket gelukt is, zul je een GUI met buttons zien. Blijft deze leeg, dan is het inloggen niet gelukt en heb je waarschijnlijk wat verkeerd ingevoerd.

Je eigen buttons defineren :?
Ik heb de code zo gemaakt dat het zo simpel mogelijk werkt. Eigenlijk hoef je alleen in de index.html je eigen buttons aan te maken, de code doet de rest.
Bij het verbinden met de websocket krijgt het script de state van alles wat maar in Pimatic aanwezig is doorgestuurd.
De code looped door alle devices en kijkt of er in de GUI een button is met dezelfde naam. Indien deze gevonden word, zet hij de button in de correcte staat.

Wanneer Pimatic een update voor een device heeft, zal hij deze pushen naar alles wat met de websocket verbonden is. Onze GUI krijgt dus vrijwel direct een update wanneer Pimatic een device van state veranderd (dit kan door een gebruiker vanuit de Pimatic GUI zijn, of door Pimatic zelf middels een rule).
Ook hier geld weer hetzelfde : het script kijkt of er een button is met de devicenaam en zo ja dan word deze aangepast.

Om nu te zorgen dat je je eigen buttons in je GUI te zien krijgt, zal ik het eea uitleggen hoe dit te doen.
Open index.html in je favoriete tekst editor Ga naar regel 86, dit is de regel voor een switch met de naam eettafel :

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



Je ziet hier 3 maal het woord 'eettafel'. Belangrijk om te weten is dat in deze regels de eerste twee woorden 'eettafel' refereren naar het Pimatic ID van een device met de naam 'eettafel' De laatste vermelding van 'Eettafel' (in mijn geval begint deze met een hoofdletter) is puur de weer te geven naam op de knop in de GUI. Je kan hier elke tekst in zetten die je wilt.

Goed, je heb nu in de HTML code gezien hoe een button eruit ziet. Ga nu naar Pimatic en zoek daar een device op die je in je eigen GUI wil zetten.
Stel je hebt een lamp met de naam "Mijn nachtlampje" klik dan op de naam "Mijn nachtlampje" in de Pimatic GUI Er zal nu een zwart popup menutje tevoorschijnkomen. De eerste regel begint met "ID"
Dit is het ID van het device. Stel dat er nu bij jou "ID: nachtlampje" staat, dan weet je dat het ID van "Mijn nachtlampje" "nachtlampje" is.
In de eerder aangehaalde regel voor "eettafel" ga je nu het ID "nachtlampje" gebruiken:

code:
1
<button class="btn btn-default btn-lg fullwidth uibutton" onclick="toggleDevice('nachtlampje')" id="nachtlampje">Knop voor mijn nachtlampje</button>



Sla je wijzigingen op en refresh de pagina in je browser.
Als het goed is zie je nu een knop met de tekst "Knop voor mijn nachtlampje" welke automatisch van staat wisselt wanneer je in Pimatic de knop op ON of OFF zet.
Andersom zal ook werken : wissel de knop in Pimatic en vervolgens vanuit je eigen GUI. Als het goed is kun je je nachtlampje nu vanuit 2 verschillende GUI's bedienen :Y)

Kan dit ook met een presence device :?
Jazeker! Ik maak nogal veel gebruik van de zogenoemde presence devices, dus deze wile ik zeker ook op kunnen nemen in de GUI.

Het bewerken van een presence device is redelijk gelijk aan hoe we een button kunnen bewerken/aanmaken.
Zoek de volgende regel op index.html :

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


De eerste vermelding van "Anybody home" is de vrije tekst op de GUI, de tweede vermelding "anybody-home" is het Pimatic ID van de presence device. Ook deze kun je op dezelfde manier achterhalen als het ID van een button.

Hoe zit het met variables :?
Uiteraard kun je ook variables afvangen vanuit de websocket.
Als je kijkt naar de index.html zie je daar linksbovenin een blok welke volledig bedoeld is voor alles wat verwarming en temperatuur te maken heeft.
In Pimatic heb ik een variable voor de woonkamertemperatuur. Deze komt ook terug in de index.html :

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

code]

Dit ID word ook gebruikt in pimatic-socket.js :

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


Er word gezocht naar een device met de naam id-woonkamer-temperatuur en vervolgens word de waarde van dit device gebruikt als tekst in het blok WoonkamerTemperature
Op deze manier kun je op verschillende plaatsen de aarde van een variable in je GUI zetten.

Temperatuur van een thermostaat wijzigen :?
Ik maak gebruik van een dummy-thermostat in Pimatic om de gewenste temperatuur in te stellen. Ik vond het belangrijk om de doeltemperatuur te kunnen zien en aanpassen vanuit mijn eigen GUI.
Het stuk in de inde.html wat hiervoor zorgt:


code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
                        <h3><span id="setpoint"></span><span id="mode"></span></h3>
            <table width=100%>
                <tr>
                    <td width=33% style="text-align:center;">
                        <span class='fa fa-arrow-up' onclick="ChangeSetpoint('setpoint-plus')"></span>
                    </td>
                    <td width=33% style="text-align:center;">
                        <h4>Change setpoint</h4>
                    </td>
                    <td width=33% style="text-align:center;">
                        <span class='fa fa-arrow-down' onclick="ChangeSetpoint('setpoint-min')"></span>
                    </td>
                </tr>
            </table>


Het ID setpoint bevat de waarde van de setpoint. Deze word gevuld vanuit pimatic-socket.js middels de volgende 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 +"]");
            }



Het aanpassen van de setpoint vanuit de eigen GUI gebeurd door op de pijltjes te klikken bij de tekst "Change setpoint"
Als je goed kijkt zie je dat bij het klikken op het 'pijltje omhoog' de volgende function word aangeroepen: ChangeSetpoint('setpoint-plus')
Deze function is terug te vinden in pimatic-socket.js :

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
        }
    });

}


Eigenlijk doet dit niet meer dan een button in Pimatic indrukken met het ID setpoint-plus. Aan deze button hangt weer een rule:

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



Dit truukje zou je ook voor andere zaken kunnen gebruiken om een wat complexere actie te laten gebeuren door op een simpel iccontje te drukken in je eigen GUI.

Maar mijn wachtwoord staat nu plaintekst in de sourcecode ?! :?
Dat klopt, daar valt helaas weinig aan te veranderen. ik heb dit als volgt opgelost:
- Zorg dat je een DNS record hebt voor je GUI : mijngui.mijndomein.nl en verwijs deze naar je eigen public IP
- Gebruik een Apache server met reverse proxy
- Vraag om een username/password wanneer de client buiten je eigen subnet valt


code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<VirtualHost *:80>
        ServerName mijngui.mijndomein.nl

    <Location />
        AuthType Basic
        AuthName "Restricted Files"
        AuthUserFile /usr/local/apache/passwd/passwords
        Require user MijnUsername
  Order allow,deny
  Allow from 192.168.1
  Satisfy any
    </Location>


        ProxyPass / http://192.168.1.1/pimatic/
        ProxyPassReverse / http://192.168.1.1/pimatic/
</VirtualHost>



Op deze manier kun de GUI altijd bereiken via http://mijngui.mijndomein.nl maar krijg moet je een username en password gebruiken als je buiten je subnet (192.168.1.x) valt.
Aanmaken van een apache username : https://httpd.apache.org/...uth.html#gettingitworking

Het is toch nog aardig complex allemaal, kan dit niet wat simpeler :?
Klopt, je hebt een redelijke basiskennis van Pimatic, HTML en javacript/jquery nodig. Dat is inherent aan zelf hobbyen met dergelijke systemen. Wanneer dit allemaal te hoog gegrepen is, kun je wellicht beter gebruik blijven van de standaard GUI die Pimatic je bied.

Volgende: Build your own Pimatic GUI - with template 20-02 Build your own Pimatic GUI - with template
Volgende: Je pelletkachel aansturen met pimatic, een stapje verder 09-02 Je pelletkachel aansturen met pimatic, een stapje verder

Reacties


Door Tweakers user Rowdy.nl, maandag 20 februari 2017 11:19

Geen screenshots/foto's? -O-

Maar mooi werk!

[Reactie gewijzigd op maandag 20 februari 2017 11:19]


Door Tweakers user rmenkveld, maandag 20 februari 2017 11:47

Zeker mooi werk!
Als ik eerdaags wat tijd heb ga ik er ook in duiken. Ik heb nu pimatic draaien op een Pi1 dus hopen dat hij dit zal trekken..

Screenshots zijn te vinden op: https://forum.pimatic.org/post/23509

Door Tweakers user Koffie, maandag 20 februari 2017 13:33

Rowdy.nl schreef op maandag 20 februari 2017 @ 11:19:
Geen screenshots/foto's? -O-

Maar mooi werk!
Dank, heb er even 2 screenshots bijgezet ;)

Door Tweakers user Patriot, maandag 20 februari 2017 15:08

Waarom zet je de logingegevens in de source? Je kunt hier toch gewoon voor prompten? Desnoods zet je het in de session storage zodat je wat makkelijker kunt reconnecten.

Door Tweakers user Koffie, maandag 20 februari 2017 15:11

Patriot schreef op maandag 20 februari 2017 @ 15:08:
Waarom zet je de logingegevens in de source? Je kunt hier toch gewoon voor prompten? Desnoods zet je het in de session storage zodat je wat makkelijker kunt reconnecten.
Ik ga deze GUI gebruiken op een tablet aan de muur, binnenhuis. Daar wil ik niet lastig gevallen worden met vragen over een username/password.
Er zijn legio mogelijkheden voor de verbinding, dit is er 1 van.

Door Tweakers user VAnTurenhout, dinsdag 28 februari 2017 16:30

Misschien een domme vraag, maar als ik mijn pimatic gui nu benader via http://ip-adres:89

Wat moet ik dan webserver-wise doen om bij de html-pagina's te komen die ik nu in /var/www/html heb gezet?

Door Tweakers user tpronk, zondag 4 juni 2017 16:06

Bedankt voor het mooie stukje werk! Ik heb het inmiddels draaien en ben erg tevreden.

Ik heb het alleen nog niet voor mekaar kunnen krijgen om een buttonsdevice aan te sturen? Heeft iemand een idee hoe dit gaat lukken?

[Reactie gewijzigd op zondag 4 juni 2017 16:19]


Door Tweakers user tpronk, zondag 4 juni 2017 16:44

tpronk schreef op zondag 4 juni 2017 @ 16:06:
Bedankt voor het mooie stukje werk! Ik heb het inmiddels draaien en ben erg tevreden.

Ik heb het alleen nog niet voor mekaar kunnen krijgen om een buttonsdevice aan te sturen? Heeft iemand een idee hoe dit gaat lukken?
Was iets te snel. ChangeSetpoint did the trick ;)

[Reactie gewijzigd op zondag 4 juni 2017 16:44]


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.