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)
-
One example at making your own user interface
-
@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
-
this is my pimatic 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" },
this are my own interface device:
in index.html:
<button class="btn btn-default btn-lg fullwidth uibutton" onclick="cocktail1()" id="cocktail1">Tequila Sunrise</button>
in pihlaja-script.js:
function cocktail1(){ socket.emit('call', { id: 'executeAction-1', action: 'executeAction', params: { actionString: 'press Tequila Sunrise' } }); }
In the dev tool F12 i cannot see an error when i click the button. I can see “Connection to pimatic has been Established”.
Is it right that the onclick name connects to the java funtion wich interact with pimatic?
licke this: Button->JavaScript->Api->Pimatic ?
Can someone help me Please?
Thank you very much. -
well that should be mostly correct but i think your action sting is faulty. You have to call press an the id of the Button.
eg this is a button in my pimatic
{ "id": "allonoff", "name": "All On Off", "class": "ButtonsDevice", "buttons": [ { "id": "all-off", "text": "Off" } ] },
an i call it in my action string with
press all-off
that works for me
if you what to use multiple buttons you should change your JS fountain to:function button(ident){ socket.emit('call', { id: 'executeAction-2', action: 'executeAction', params: { actionString: 'press ' + ident } }); }
and your html o’clock to:
onclick=button('id')
i think that should be all
the crazy thing in my work was, that a button needs to be pressed by its id and a switch needs to be toggled by its name
-
thanks for your answer, i will test it tomorrow.
-
@Christopher-täufert said in One example at making your own user interface:
well that should be mostly correct but i think your action sting is faulty. You have to call press an the id of the Button.
eg this is a button in my pimatic
{ "id": "allonoff", "name": "All On Off", "class": "ButtonsDevice", "buttons": [ { "id": "all-off", "text": "Off" } ] },
an i call it in my action string with
press all-off
that works for me
if you what to use multiple buttons you should change your JS fountain to:function button(ident){ socket.emit('call', { id: 'executeAction-2', action: 'executeAction', params: { actionString: 'press ' + ident } }); }
and your html o’clock to:
onclick=button('id')
i think that should be all
the crazy thing in my work was, that a button needs to be pressed by its id and a switch needs to be toggled by its name
Works great, thank you.
-
Please use following page to obfuscate your login information if you use this outside your network;
https://www.javascriptobfuscator.com/Javascript-Obfuscator.aspx
Paste following code and generate;
var socket = io.connect('http://IP.ADDRESS.PIMATIC:8080/?username=USERNAME&password=PASSWORD', { reconnection: true, reconnectionDelay: 1000, reconnectionDelayMax: 3000, timeout: 20000, forceNew: true });
That will result in;
var _0xbe51=["\x68\x74\x74\x70\x3A\x2F\x2F\x38\x32\x2E\x37\x35\x2E\x38\x35\x2E\x35\x30\x3A\x38\x30\x38\x30\x2F\x3F\x75\x73\x65\x72\x6E\x61\x6D\x65\x3D\x55\x53\x45\x52\x4E\x41\x4D\x45\x26\x70\x61\x73\x73\x77\x6F\x72\x64\x3D\x50\x41\x53\x53\x57\x4F\x52\x44","\x63\x6F\x6E\x6E\x65\x63\x74"];var socket=io[_0xbe51[1]](_0xbe51[0],{reconnection:true,reconnectionDelay:1000,reconnectionDelayMax:3000,timeout:20000,forceNew:true})
Copy, paste, save, secured(mostly).
-
That doesn’t make it more secure. I would suggest providing a login form in the front-end which uses cookies or html 5 local storage.
-
Bump
I’ve been playing with this in the last days, and got it quite working as I want. Thanks for the nice work.
The original pihlaja-script.js script connects to the socket, and get all the states from pimatic. It was a little bitch to find out all the object-id’s and I was afraid how future proof this would be when the object-id changes.
So I changed it into this:function GetStates() { socket.on('devices', function(devices) { console.log(devices); $.each( devices, function( key, value ) { if (devices[key].id == "bijkeuken") { toggleUI(devices[key]["attributes"][0].value, "bijkeuken") } if (devices[key].id == "anybody-home") { toggleCircle(devices[key].attributes[0].value.toString(), "anybodyhome") } }); $("#mainLoading").hide(); $("#main").show(); }); }
And created some general functions:
function toggleUI(state, device) { if (state == true) { $("#" + device).addClass('active'); } else { $("#" + device).removeClass('active'); } } function toggleCircle(state, device) { if (state == "true") { document.getElementById(device).innerHTML = "<span class='fa fa-circle pull-right'></span>"; } if (state == "false") { document.getElementById(device).innerHTML = "<span class='fa fa-circle-o pull-right'></span>"; } } function toggleDevice(device){ socket.emit('call', { id: 'executeAction-1', action: 'executeAction', params: { actionString: 'toggle ' + device } }); }
Hope someone finds this useful
Like my projects and help? Consider donating electroneum etnjwAKGPqF6omQWRmpp9u2BPyVDG9VuyRQjNJ1S8yfBdfR9qeUQ46kRy8KS2CNqbpNLRrsgmNW6F2TMzxmZgPrh6KctrkrYbm
-
@koffienl Well done! I approve of this .
Let’s see if I (or we) can combine all of this into a tutorial 2.0I’ve added some modifications myself, currently my version is running on ASP net MVC. I’m currently implementing a checklist page (which devices you want to show on the panel, on which portion of the page).
Of course this could be done with a unix friendly language as well, but I’m not quite there yet.Again, great work @koffienl!
-
LOL, just made a new addon to the page. It’s a bit more work and you have to get the HTML correctly working, but its cool
I created a dummy device in Pimatic called “GUI mode”. The ON and OFF label is replaced with “summer” and “winter”.
Upon loading of the HTML page, the state of the switch is checked first. Based on this ‘mode’ the background changes together with the info/buttons (in summer I don’t need to see state of the heating or setpoint for thermostat, in summer I want to see buttons for airco).Summer
Winter
Loading screen
When I’m finished I’ll post the code somewhere with some info on how to do this.
Like my projects and help? Consider donating electroneum etnjwAKGPqF6omQWRmpp9u2BPyVDG9VuyRQjNJ1S8yfBdfR9qeUQ46kRy8KS2CNqbpNLRrsgmNW6F2TMzxmZgPrh6KctrkrYbm
-
Been playing again with the GUI
I have created a JS file that read a local ICS file on the webserver and extract every appointment for that day and display it in the GUI with start and end time.
A one line PHP file downloads the ICS file from my google calendar, the PHP file is executed every hour with pimatic.Like my projects and help? Consider donating electroneum etnjwAKGPqF6omQWRmpp9u2BPyVDG9VuyRQjNJ1S8yfBdfR9qeUQ46kRy8KS2CNqbpNLRrsgmNW6F2TMzxmZgPrh6KctrkrYbm
-
nice work!
I start to use home-assistant.io as a frontend. It’s a very flexible UI, you almost can do everything you want. I’m still writing a extension for home-assistant to add pimatic devices automatically. Don’t get me wrong I still prefer pimatic, but the interface… -
Made a post about the GUI in Dutch : https://koffie.tweakblogs.net/blog/14479/maak-je-eigen-html-gui-voor-pimatic-basic
Like my projects and help? Consider donating electroneum etnjwAKGPqF6omQWRmpp9u2BPyVDG9VuyRQjNJ1S8yfBdfR9qeUQ46kRy8KS2CNqbpNLRrsgmNW6F2TMzxmZgPrh6KctrkrYbm