Create custom frontend in HTML5 or use third party app

Hi all,

I want to create a custom user interface for my IPS backend and I wonder what is the „right“ way of doing this.

I have looked into CSS capabilities with the current IPS WebFront but I would like more freedom when it comes to designing my own frontend. For this I am looking for some information regarding the best way of communicating with the backend and how it is done.

I have looked at the built in webhook and this could work, then there is the built in JSON-RPC interface but I also wonder how does the current IPS webFront communicate with the backend.

My plan is to design a HTML5 interface (with the necessary addons) or use an app like Home Remote that can work as a TCP client, Http client, Mqtt client (thehomeremote.com).

So my questions are;

How is the communication between the IPS frontend done, can I emulate the calls made in the IPS fronten in my own frontend? Or is a non published protocol used?

If the „built in“ way can’t be used (doto unpublished protocol or similar reson) what would be the recommended way?

I am kind of a beginner at this so I am looking for a direction where to focus and what to learn.

What is the future for the IPS WebFront and the mobile app? Is there work in progress to make them more customizable when it comes to user interfaces?

So pointer etc. would be much appreciated!

Thanks in advance.

yoggi

Please have look at the calls the WebFront is doing. Is uses our public JSON-RPC interface, with the undocumented WFC_GetSnapshot function. Nevertheless you can use this API as it is very stable. Getting „feedback“ about changes is done through the WFC_GetSnapshotChanges function. Does this help?

paresy

Hi paresy,

Thanks for the pointer, I will have a look!

yoggi

If you know HTML and JavaScript well you can create a surface for you own personally. If you are beginner in HTML I would recommend to have a look at software like NEO. There is a free test version of NEO available, IP-Symcon is connected to NEO via an NEO IP-Symcon Plugin. Another Option would be IPS Studio witch is a specialized surface builder software for IP-Symcon.

Very interesting topic. I am working on something similar, but have some problems with using the JSON-RPC with Javascript that is not hosted directly on the IPS Server. Currently running a custom Frontend on a tablet in the living room, which can control the lights and television, aswell as display a security camera.

Maybe you have Discord or something similar where we could talk about ideas and implementations? Would be happy to share my bits of code and talk about better ways to accomplish it.

Very interesting topic. I am working on something similar, but have some problems with using the JSON-RPC with Javascript that is not hosted directly on the IPS Server.

Sounds like you want to disable the CORS protection. We have a switch for that. See the special options in the „Info“ dialog.

paresy

Hi AndyKrause,

I am just in the beginning of trying to learn how it all works (IPS, php, js etc.) so I would appreciate if you could share what you have.

To me it appears that there is a js script in „/usr/share/symcon/webfront/js/webfront.js“ that handels call from the webFront and that the calls should be sent to „http://ip:3777/api/“ and the calls are of json rpc type with some kind of a timestamp.

But as I said, I am trying to learn.

yoggi

Have a look here: Datenaustausch — IP-Symcon :: Automatisierungssoftware

There are some basic calls through curl, which should explain how to get it working.

paresy

Hi paresy,

I hade a look at the curl examples but I have had no success.

I am trying to use curl on the same pi3 that IPS is running on over a PuTTY session.

In IPS I have created a string variabel (14484) and from the command line I issue below command but my variabel dose not update.

curl -i -X POST -H „Content-Type: application/json“ -d „{„jsonrpc“: „2.0“, „id“: „0“, „method“: „SetValue“, „params“: [14484 fF, „new string text“]}“ http://firstPartOfMyEmail%40yahoo.com:AndMyPassword@192.168.1.12:3777/api/

Questions:
Do I need user (email) and password when I am on the same network (if I understand correctly I don’t)?

What password are we referring to and dose it need to be Base64 encoded?

I hope you have time to give me some pointers.

yoggi

curl -i -X POST -H "Content-Type: application/json" -d "{"jsonrpc": "2.0", "id": "0", "method": "SetValue", "params": [14484 fF, "new string text"]}" http://firstPartOfEmail%40yahoo.com:MyPassword@192.168.1.12:3777/api/

So I got curl to work, not sure what the problem was.

From my test, user email and password is not needed when run on the same machine so it will probable work locally/ same network without password (on the same machine curl IPS don’t care about user or password even a wrong password works).

yoggi

Not sure, but what is the fF for? The variable ID should only consist of a 5-digit number. But I only used Javacscript, not the Raspberry commandline. So I don’t know if that might be required?

Hi AndyKrause,

Yes you are right there shouldn’t be any „if“ but I am having some problems do to googles translation of German to English, not totally sure what is going on. Somehow google is adding spaces where non should be and change other things (auto correction when typing etc.) that can prevent the code from working.

Now I have this curl code working, example from Datenaustausch.

//SetValue String mit den Parametern ID = 12348 und Wert = "mein String"
curl -i -X POST -H "Content-Type: application/json" -d "{\"jsonrpc\": \"2.0\", \"id\": \"0\", \"method\": \"SetValue\", \"params\": [12348, \"mein String\"]}" http://<mail%40provider.de>:<Passwort>@<IP>:3777/api/

And this code working from Postman

{"jsonrpc": "2.0", "id": 0, "method": "SetValue", "params": [14484, "New string text"]}

My next task is to get it working from within Home Remote but so far I haven’t had any luck with it. It should possible as Home Remote can control Kodi using JSON RCP see her.

yoggi

Hi AndyKrause,

I am now able to send a simple message from Home Remote and have it update a string variable on the IPS backend.

{"jsonrpc": "2.0", "id": "0", "method": "SetValue", "params": [14484, "New string from Home Remote"]}

Now I want to emulate a call from IPS webFront and I wonder if you could share your work on your own fronted!

yoggi

Hi paresy,

I haven’t been able to figure out what the timestamp is for, could you please explain how it is used!?

If I send this message (originally from IPS webFront) from Postman or from Home Remote it turns the light on but the old timestamp appears to do nothing (1536702193066 is unix timestamp milliseconds from yesterday).

{"jsonrpc": "2.0", "method": "WFC_Execute", "params": [38245, 51156, 58842, true], "id": 1536702193066}

yoggi

It is just an arbitary id to identify your request. The reply will be using the same id.

paresy