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/
One example at making your own user interface
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>
now it works? nice! i had problems with special cases like ä,ö,ü but nice to know that spaces work.
The new code works on my mac (with mamp) but not on the raspberry apache. On Raspberry i get the error:
(index):29 Uncaught ReferenceError: swi is not defined
(nevermind if the name is with or without spaces). The old solution (one js event per switch) works on my Pi.
EDIT: I clear the cache and now everything works .
Has anybody tried to embed the Max!Thermostats?
I found no solution to show the current temperature and my solution to change the temperature to a defined value does not work.
function thermo(temp){
socket.emit('call', {
id: 'executeAction-1',
action: 'executeAction',
params: {
actionString: 'changeTemperatureTo?temperatureSetpoint=12 ' + temp
}
});
}
Unfortunately i don’t know much about java script but i’m learning with every line .
@Christopher-täufert: I just tried your code but I´m getting this error:
pihlaja-script.js:45 Uncaught TypeError: Cannot read property 'value' of undefined
41 socket.on('devices', function(devices){
42 console.log(devices);
43 var devlength = devices.length;
44 for (var i = 0; i < devlength; i++){
45 if (devices[i]["attributes"][0].value == true){
46 $("#"+devices[i].id).addClass('active');
47 }else{
48 $("#"+devices[i].id).removeClass('active');}
<button class="btn btn-default btn-lg fullwidth uibutton" onclick="swi(lampe)" id="lampe">Lampe</button>
Any idea how to fix this?
hmmm i think this is related to the content of your devices array. You should look into that array what kind of devices are in there.
I only tried my code with an array list of switches, buttons, weather and location devices. I think in your array is an element that has now “value” attribute maybe the code need a check is there actually IS a value attribute but at the moment i don’t know how to implant that. I think i will take deeper look into building that in the next days.
In the meantime i think it would be helpful to see your whole console output of your devices array console log (line 42: console.log(devices)
@Christopher-täufert: The logwatcher plugin has no value and seems to be the problem. this solution works fine for me. My Copartner fixed this, because I don´t have programming skills
try {
if (devices[i]["attributes"][0].value == true){
$("#"+devices[i].id).addClass('active');
}else{
$("#"+devices[i].id).removeClass('active');}
}catch(e) {
console.log(e);
console.log(devices[i]);
}
}
looks nice, thx