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
-
One example at making your own user interface
-
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 guisocket.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
-
hey guys, ive tried to get this think working with a button device. but i would not work.
i have a buttons device:
{ "buttons": [ { "id": "tequila sunrise", "text": "Tequila Sunrise" } ], "xLink": "http://www.cocktails.webconrad.com/tequila-sunrise.html", "id": "tequila-sunrise", "name": "Tequila Sunrise", "class": "ButtonsDevice" },
and now i would create my own interface with a Button named Tequila sunrise, below the name of the Button i need the ingredients
and a picture would be also nice.iot would be awesome if someone could give an example with my setip.
Thank you very much!
-
I am thinking of using an iframe device for displaying the ingredients and another iframe device for the picture if the cocktail.
The ingredients iframe could load a logfile where the ingredients are copied to and the picture iframe does the same with the pictures of the cocktails. Have a look at the rules for an example of the paths and how you could set it up.So you could use a rule like
IF button tequila-sunrise is pressed then execute "mv /home/pi/cocktails/pictures/tequillasunrise.jpg /home/pi/cocktails/tmp/cocktail.jpg" and execute "mv /home/pi/cocktails/pictures/tequillasunrise.txt /home/pi/cocktails/tmp/recipe.txt"
pimatic v0.9 has been released!
Support Pimatic and get some free stickers
Like us on Facebookmake it so !
-
but first i will create my own interface with a buttons device. in pimatic all work fine.
ive created my own interface but when i press a button the button in pimatic would not be pressed too.
-
@p4co86 what is displayed in your javascript console? maybe that would be a hint what is wrong
-
it would be generaly nice to explain how to create a button in the own interface and how it should be linked to pimatic, so that the button in pimatic would be pressed. the socket connection is succesfull. could you give me an example for my pimatic device for my own interface ?
{ "buttons": [ { "id": "tequila sunrise", "text": "Tequila Sunrise" } ], "xLink": "http://www.cocktails.webconrad.com/tequila-sunrise.html", "id": "tequila-sunrise", "name": "Tequila Sunrise", "class": "ButtonsDevice" },
thanks in advance