One example at making your own user interface

---

I promised to post up my GUI example in some form here, so here goes …

I am still in progress of making this thread. Bear with me

http://lurks.kapsi.fi/seka/GUI-example.zip
This package has everything you need to make your own external UI that looks whatever you want it to.
I included the bootstrap layout (bootstrap is the templating model), javascript that calls for socket.io actions that pimatic responds to.

Here’s one screenshot that gives the general idea what it can look like.
http://lurks.kapsi.fi/seka/ui2.PNG
The essential part, however is the javascript and socket io. If you want, you can take those to any GUI template you want to.

Starting up
I am assuming you know how to setup an apache/other website server on your Raspberry Pi. You can also host this website in any other server, even outside of your home network, but I don’t recommend this, as the password to your pimatic is in the javascript file.
If you do this, you should at very least password protect the site.
Here’s one link for getting started with Apache, if you don’t know how to.
https://www.raspberrypi.org/documentation/remote-access/web-server/apache.md

However, you don’t need to set up apache just yet. You can develop this on your desktop PC, and then push it to wherever you want.

First, we need to set up the connection with Pimatic on the main javascript file, pihlaja-script.js. Its named by me…
Replace IP-ADDRESS, PORT, USERNAME and PASSWORD with your values.

//DEFINE THE CONNECTION
var socket = io.connect('http://IP-ADDRESS:PORT/?username=USERNAME&password=PASSWORD', {
  reconnection: true,
  reconnectionDelay: 1000,
  reconnectionDelayMax: 3000,
  timeout: 20000,
  forceNew: true
});

Save and open up the webpage (index.html).

When you have the webpage open, turn on your developer tools of the web browser (F12 on Chrome and Firefox)
From there, open “Console”. This is where the socket IO Messages appear.
What you want to do now, is to write down every device/variable you want to get in this GUI.
You should see something like this: http://lurks.kapsi.fi/seka/tutorial/1.PNG

We need to bind the IDs and values to the javascript file. see the highlighted sections.
http://lurks.kapsi.fi/seka/tutorial/2.PNG

My device id in the image is swi-1, but pretend that its switch-1 as in the code sample below.

And the code in javascript.

//EXAMPLE FOR A BUTTON TOGGLE (SWITCH):
//(This uses pimatic-homeduino switch)
//
//TOGGLE THE CLASS 'ACTIVE' WHEN BUTTON IS PRESSED 
//SCRIPT CHECKS THAT THE DEVICE IS NAMED LIKE YOU WANTED
//SO NO CHANGES ON YOUR CONFIGURATION CAUSE HAZARDOUS THINGS..
//(This is checked when you connect, there's the active checking below)
socket.on('devices', function(devices){
console.log(devices);
if (devices[0].id == "switch-1"){
    if (devices[0]["attributes"][0].value == true){
        $("#button-1").addClass('active');
    }else{
        $("#button-1").removeClass('active');}
}

Adding more buttons
<Content>

Wrapping up
<Content>

@kitsunen As said in our chat, thanks for this. Really appreciate this tutorial!

edit:

So been playing around with this for a bit. I’ve got one lamp called “omalamp”.

Edited button in index.html

<button class="btn btn-default btn-lg fullwidth uibutton" onclick="omalamp()" id="omalamp">Oma Lamp</button>

Edited the function in pihlaja.js

function omalamp(){
socket.emit('call', {
    id: 'executeAction-1',
    action: 'executeAction',
    params: {
        actionString: 'toggle omalamp'
    }
});
}

Edited the code in pihlaja.js

socket.on('devices', function(devices){
console.log(devices);
if (devices[4].id == "omalamp"){
if (devices[4]["attributes"][0].value == true){
    $("#omalamp").addClass('active');
}else{
    $("#omalamp").removeClass('active');}
}

The buttons works this way. I can switch my lamp on and off, however, sometimes there’s a delay for like 10 seconds, sometimes it doesnt work at all. Seems a bit random actually. Have you had this problem on your own setup? The GUI is running on apache on the same raspberry pi that is being used for pimatic

Donny.

@Donny That’s a bit weird. There shouldn’t be nearly any delay. I am hosting it on my Raspberry too, and using an iPad wallmounted as the device …
I wonder what could cause that… Are you running both Apache and Pimatic on port 80 or something? My Pimatic is running on port 5002, Apache on 80

You could try opening chrome developer tools and taking a look if there are any errors shown?

And there is one more place where you need to put your lamp on! Here are all for a button from the example:

This one checks button status from Pimatic API on page LOAD

//EXAMPLE FOR A BUTTON TOGGLE (SWITCH):
//(This uses pimatic-homeduino switch)
//
//TOGGLE THE CLASS 'ACTIVE' WHEN BUTTON IS PRESSED 
//SCRIPT CHECKS THAT THE DEVICE IS NAMED LIKE YOU WANTED
//SO NO CHANGES ON YOUR CONFIGURATION CAUSE HAZARDOUS THINGS..
//(This is checked when you connect, there's the active checking below)
socket.on('devices', function(devices){
console.log(devices);
if (devices[0].id == "switch-1"){
    if (devices[0]["attributes"][0].value == true){
        $("#button-1").addClass('active');
    }else{
        $("#button-1").removeClass('active');}
}

This one checks button status from Pimatic API on socket messages (when the page is active), and changes the visual of the button depending on the state

    //switch-1
    if (attrEvent.deviceId == "switch-1"){
        if (attrEvent.value == true){
            $("#switch-1").addClass('active');
        }else{
        $("#switch-1").removeClass('active');}
    }

This one calls for the button press

//TOGGLE EXAMPLE
//(This uses pimatic-homeduino devices)
//
//
function swi1(){
	socket.emit('call', {
        id: 'executeAction-1',
        action: 'executeAction',
        params: {
            actionString: 'toggle switch-1'
        }
    });
}

Also you should take all the items that you are not using out of the js file or comment them out (//).
I can help you out if you need help setting it up!

Hi,
Two Problems:
I have trouble with the inital Status after Page loading:
When the page loads i see in the console for example: steckdose2 true
But the switch stays “off”, when i click it the lamp turns off and the switch changes to “off” but on every page load it looks like “off”

Second Problem is my temperature sensor.

The Code:

console.log(devices[16].id, devices[16]["attributes"][0].value);
if (devices[16].id == "tempsensor2"){
        var temp1tempload = devices[16]["attributes"][0].value.toString()
    document.getElementById("tempsensor2").innerHTML = "Temperatursensor2: "+temp1tempload.value+" C";
}

In the Console Output I get
"tempsensor2 4.3"
where “4.3” ist the temperature value

In the interface it always says “Undefined”.

The Code for the temperature Sensor in the “realtime interface check” is not changed yet.

Can you help me with that?

Ok i have solved it by using:
document.getElementById(“tempsensor2”).innerHTML = “Temperatursensor2: “+temp1tempload+” C”;

(Removed the “.value”)

Great that you got it solved.

It would be so much better if I could step up my Javascript and define all the buttons etc in the beginning of the file, so that everything doesn’t have to be doublechecked.
Also it would be better if “devices[x]” didn’t have to be included in each switch/device check, because when you add things to config, it might change the device[x] id too.

I will work on a second version at some point, but currently am kind of overburdened with other things …

No Problem I just really have to remember the things I learned to do in javascript, I’m just in the Process of editing everything so it works for me, i think your work is very good and helpful!!

Your Interface got be back to bolting a tablet to the wall with a beautiful interface

Yup! The way I use this is on a tablet mounted on our livingroom wall. When I need total control of the system, I use the default pimatic frontend.

Can someone help me please?
I have a buttonsdevice that turns off all my devices.
I would like to have this in my custom web frontend too, but i have no idea how to call it here:

Just like this one which toggles an outlet

        function steckdose3(){
                        socket.emit('call', {
                        id: 'executeAction-1',
                        action: 'executeAction',
                        params: {
                                actionString: 'toggle steckdose3'
                        }
                });
        }

I can toggle it via the webapi with this:
/api/device/off/buttonPressed?buttonId=all-off
if that helps in any way…

Should be simple as this:

function alloffbutton(){
    socket.emit('call', {
        id: 'executeAction-1',
        action: 'executeAction',
        params: {
            actionString: 'press all-off'
        }
    });
}

Sorry that the whole GUI zip is so messy. I have been too lazy to fix a more permanent solution, as this has worked so well!

Works perfectly, thank you!!

do you know where I can find a documentation which commands like press and toggle etc i can use?

Excellent question. I don’t .
The API docs is somewhat lacking when it comes to this. I kind of figure it out when I need something new.

Links:
https://pimatic.org/guide/api/
https://pimatic.org/api/actions/

i did a little optimization referring to the toggle switch function

function swi(room){
	socket.emit('call', {
        id: 'executeAction-1',
        action: 'executeAction',
        params: {
            actionString: 'toggle ' + room
        }
    });
}

so you have to add the name of the switch you wanna toggle also in the html

<button class="btn btn-default btn-lg fullwidth uibutton" onclick="swi(Roomname)" id="RoomName">Room Name</button>

so you don’t have to add a whole new function for EVERY Switch you wanna toggle.

The same work can be done with the Button Press function

Besides that, this script is a great work and it saved me a lot of time for setting up my own interface.

Thanks for sharing!

Yeah, I was more of an amateur with Javascript when I wrote this.
I usually work with VB (ASP.net MVC). .

This could be improved even more by declaring switch id:s at the start of the document.
I will propably write a much better version at some point.

I’m getting this error on page load:

TypeError: undefined is not an object (evaluating 'devices[11]["attributes"][3].value')

Hi!

You need to edit the pihlaja-script.js to fit your needs. That file is mostly full of examples .
In the example file, device 11 is a weather device. If you have a weather device, you can change the id(11) to what you have. devices[number][“attributes”][3].value will return temperature value (example: 23).

When you start the page, you should get an ARRAY of json in Developer console. there you can see which ID your device is given.

well i’m also some kind of a beginner in working with javascript :D
when i find more things to improve i’m happy to share it ^^
at the moment I’m working on my one html/css bootstrap design and use your JS code to connect to pimatic. Wich actually works very well.
there are for sure ways to optimize the definition of switches at the beginning but at the moment i have no real idea how to set it up.
my solution for the ski function resulted in the fact that i didn’t want to copy that code again for all 10 switches

so, also cleaned up the part to set the status of a switch by push the button

//Switches
    if (attrEvent.attributeName == "state" & attrEvent.value == true){
        $("#"+attrEvent.deviceId).addClass('active');
    }else{
    $("#"+attrEvent.deviceId).removeClass('active');
    }

that should work for all switches instead of setting an own

  if (attrEvent.deviceId == "switch"){
        if (attrEvent.value == true){
            $("#switch").addClass('active');
        }else{
        $("#switch").removeClass('active');}
    }

fore each switch

Great work !

now i’m hanging on the state checking at the startup of the GUI but therefor i have no idea at this point how to check if a button for each device exists without throwing an error in the JS code