Ok i have solved it by using:
document.getElementById(“tempsensor2”).innerHTML = “Temperatursensor2: “+temp1tempload+” C”;
(Removed the “.value”)
One example at making your own user interface
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>
the id of the div must be identical to the id of the switch. As far as i found out the part inside the onlick function must be identical to the name of the witch inside the pimatic configuration. At the first i had name and id identical but when i added a device with different id and name i found that out.
Did you look for any error messages in your Javascript console?
Actually i didn’t look at the pimatic API and just startet to play around with the original code from kitsunen
Thank you for your help, it was the wrong Name in the onClick function!
e.g. my Switch has the ID kitchen and is named Licht Kueche.
<button class="btn btn-default btn-lg fullwidth uibutton active" onclick="swi('Licht Kueche')" id="kitchen">BUTTON</button>