One example at making your own user interface

---

@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

so now i wrote something to check the state of an element at startup for me at the moment it works without failure. I hope it will do so for the other.
Just on code block to check and set the state of alle switches in the gui

socket.on('devices', function(devices){
console.log(devices);
var devlength = devices.length;
for (var i = 0; i < devlength; i++){
    if (devices[i]["attributes"][0].value == true){
        $("#"+devices[i].id).addClass('active');
    }else{
        $("#"+devices[i].id).removeClass('active');}
}

so you don’t have to look through the output of the emitted array. Just set some divs with ids specified in pimatic an look what happens

@Christopher-täufert said:

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

… html

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

Hey Guys,

thanks for this great GUI and Tutorial! I’m new to js and didn’t find a start with the pimatic API (until this thread).

@Christopher-täufert: Could you explain your example a little bit more? Must “swi(Roomname)” and id=“RoomName” be different? My code looks like this, but it does not work.

I use your js code and paste the following in the html (Edit: 27.03.16 | ID kitcheN).

<button class="btn btn-default btn-lg fullwidth uibutton" onclick="swi(kitchen)" id="kitchen">Kitchen</button>