Custom UI using WebSockets API

[seb303]

Having given up waiting for Loxone to make the web/app UI more configurable, I had a little play around with the WebSockets API and was quite pleased what is possible this way.  I'm attaching a screenshot of a page I made to give an overview of what my heating system is up to.

The mini-graphs show the changes over the last day, and the mouse can be hovered over to get a reading of any particular point.  This enables a lot of data to be displayed in a compact form, and sure beats scrolling/clicking through the clunky Loxone UI.

I can post the source if anyone's interested, although it's a pretty rough hack and was created specifically for my heating setup. It uses the jQuery Sparklines for the mini-graphs.

[Jeroen van Aert]

This looks awesome !

So you are reading and decoding the stats via the websocket protocol ?

I'd to love to read your source code ? any change of putting it on github ?

Jeroen

Op vrijdag 14 oktober 2016 00:19:05 UTC+2 schreef seb303:

[Byron]

I would also be very interested in the source code as part of my plans involve writing a UI that suits my needs betterthan the standard Loxone UI.

[Russ]

Wow. Looks great!  This is a great approach and nice design; compact yet clean, easy to understand at a glance.  I'd be interested in doing this with android for an on the wall room controller (just with info pertaining to that room).
Thanks for sharing.

[bboydens]

Hi Seb,

This is awesome !

What did you develop this for ? RPi ? other ?

I am looking to display multiple temperature graphs on top of each other, in an attempt to check the efficiency of the various heating systems in use (UFH, boiler, room temp, heatpump, solar, ...). With that information, I want to optimize when what heating source is used (solar power, gas), and hopefully be able to track how many Joules are delivered by every system.

But the first stab at it should be overlaying multiple graphlines from multiple temperature sensors. Do you have code that helps me do that ?

Regards,

Bart

see-temperature-graph-request

[seb303]

Here's the source code as requested.  To keep the zip file small, I've deleted everything from the CryptoJS lib except the single file which is used for the HMAC SHA1 encryption.

The HTML/CSS is in index.html
And the main code is in ui.js

The code could probably be better organised and there's not much in the way of comments - it was just thrown together quickly for my current needs.  But I'm happy to answer specific questions anyone may have...

Edit: Just realised I included the hostname of my Miniserver in the source code.  I've removed this now to avoid everyone trying to open a WebSocket to my Miniserver.  Enter the Miniserver hostname/IP on line 51.  And enter a username/password on line 79.

[seb303]

On Friday, 14 October 2016 06:24:24 UTC+1, Jeroen van Aert wrote:

So you are reading and decoding the stats via the websocket protocol ?

Yes, the basic steps are:
(1) Connect WebSocket
(2) Send jdev/sys/getkey
(3) Send authenticate/<hash> of username/password/key
(4) Load structure file... data/LoxAPP3.json
(5) Load timezone offset .... jdev/cfg/timezoneoffset (only needed to interpret times in chart data)
(6) Request control values be sent and updated .... jdev/sps/enablebinstatusupdate
(7) Request charts individually using binstatisticdata/..... (these are re-requested every 30 minutes to keep them current)

keepalive messages are sent every 60 seconds to ensure the connection is working, and to let the Miniserver know to keep sending updates.

Parsing the responses that come back from the Miniserver is done by functions gotMessage/parseMessage.

[seb303]

On Friday, 14 October 2016 11:04:22 UTC+1, bboydens wrote:

What did you develop this for ? RPi ? other ?

What's RPi?  RaspberryPi?
It's just a webpage that will run in a modern browser, so could be used on any platform really.
 

I am looking to display multiple temperature graphs on top of each other, in an attempt to check the efficiency of the various heating systems in use (UFH, boiler, room temp, heatpump, solar, ...). With that information, I want to optimize when what heating source is used (solar power, gas), and hopefully be able to track how many Joules are delivered by every system.

But the first stab at it should be overlaying multiple graphlines from multiple temperature sensors. Do you have code that helps me do that ?

You can see from my code how to request chart data using Javascript.  I've used a very simply chart library to make the mini-charts.  For your purposes, perhaps look at something like http://www.chartjs.org/

[Jeroen van Aert]

thanks, great info !

Op vrijdag 14 oktober 2016 15:28:26 UTC+2 schreef seb303:

[Manuel Medrano]

Hello, seb303 I have reviewed the configuration file "ui.js" and I have changed the direction of my MS, user and password. You could tell me if you edit anything else in the file? I think it is configured with your application parameters as "Categories" or "Rooms" is possible? You could tell me that you used your categories? I have managed to connect with the MS using your application but I can not show me the data. Thanks for your help!

[seb303]

Hi Manuel,

It's been coded specifically to match my config, so you'll need to change a few things to get any data to display.

I'm assuming you are seeing the basic HTML layout, just without any data, and it says "Connected to Miniserver" at the bottom?
If not, then it's not managing to connect with the details you have provided.  Check the console log.

Try this for example:
- You can edit the HTML within <div id=heatinginfo> in index.html
- You'll see that each element has an "id" attribute.  This contains the exact name of the control to be displayed here.
- An "id" attribute can also have the value "<control name>-chart" to display a mini-chart.
- You will also need to list each control in var heatingSystem at the top of ui.js and define the type of each.  These are the types I have defined:
"tick" (boolean value)
"temperature" (numeric value)
"status" (text value)
"percent" (numeric value)
"onoff" (boolean value)
- Note also that it is expecting all controls to be assigned to category "Heating".  This isn't really necessary.  You can just remove the 2 instances of "structure.controls[uuid].cat == categoryHeating" from the code, and then it will work for controls in any category.

The creation of the HTML for the table of Rooms is done purely in ui.js
It's based on the list/groups of rooms in var roomList at the top of ui.js which needs to contain the exact room names.
It also requires that the controls are in category "Temperature", and the controls have specific, hard-coded names such as 'Current temperature', 'Tunnel temperature', 'Heating status', 'Heating output' & 'Heating target temperature'.  'Heating status' is also expected to be a text string in a very specific format.

I'm sorry that it's such a hack!  When I get some time, I'm planning to extend the UI to allow control of lighting among other things.  When I do this, I'll try to make it more generic and configurable in a cleaner, central way.  But for now, it's really just a demonstration of concept that might be used as a basis for your own code.

I would suggest you use Firebug, Firefox developer Tools, or similar to view the console log messages as this will give you a clue what is going on.

Cheers,
Seb

[bboydens]

Hi Seb,

I figured out how to get it displaying for my environment, but still struggling with the exact syntax of the temperature objects to refer to. It would help us a lot if you could share your LoxConfig file, to check the parameters syntax used at your side. WOuld you be willing to share ? (don't forget to take out sensitive data, if any)

Regards,

Bart

PS why not referring to the IName tags, rather than the 'Title' of the Loxone objejts? Wouldn't that make maintenance of the Configin Loxone and the UI.JS file simpler for you... ?

Op vrijdag 14 oktober 2016 15:17:23 UTC+2 schreef seb303:

[seb303]

On Wednesday, October 19, 2016 at 8:02:04 PM UTC+1, bboydens wrote:

I figured out how to get it displaying for my environment, but still struggling with the exact syntax of the temperature objects to refer to. It would help us a lot if you could share your LoxConfig file, to check the parameters syntax used at your side. WOuld you be willing to share ? (don't forget to take out sensitive data, if any)

Better thing would be that I post a more easily configurable version at some point.  My config is pretty complex so I don't know if it would be easy to follow - especially after upgrading to v8 which trashed the layout of everything, something I haven't got round to fixing yet.

Some things to mention further to my message above:

'Heating status' text value is expected to be in the form: Target temp 12° │ Output 0% │ Actuator 0%
But you can also just have numeric controls called 'Heating target temperature' and 'Heating output' to contain the first 2 parts (some of my rooms do this, rather than have a 'Heating status' text value)

Controls of type 'status' defined in var heatingSystem are displayed as a bulleted list, split by the string ", "

 

PS why not referring to the IName tags, rather than the 'Title' of the Loxone objejts? Wouldn't that make maintenance of the Configin Loxone and the UI.JS file simpler for you... ?

ssword on line 79.

 

I'm not sure what you mean by IName tags.  Could you clarify?

Seb

[bboydens]

 

PS why not referring to the IName tags, rather than the 'Title' of the Loxone objejts? Wouldn't that make maintenance of the Configin Loxone and the UI.JS file simpler for you... ?

ssword on line 79.

 

I'm not sure what you mean by IName tags.  Could you clarify?

Seb

Should have had a deeper look at the Loxone-structure-file.pdf first.

The identifiers of the controls, IName tags in the LoxConfig file and also referred to as 'Connection = 056000A2.AWI5 ' in LoxConfig properties window, don't show up in the LoxAPP3.JSON.

Only the UUIDAction identifier comes in the structure, which is cumbersome to read. I was hoping you would be able freely change the LoxConfig Name of the control, without having to keep that in sync with the UI.JS code.

 

[seb303]

On Wednesday, October 19, 2016 at 8:36:40 PM UTC+1, bboydens wrote:

Should have had a deeper look at the Loxone-structure-file.pdf first.

The identifiers of the controls, IName tags in the LoxConfig file and also referred to as 'Connection = 056000A2.AWI5 ' in LoxConfig properties window, don't show up in the LoxAPP3.JSON.

Only the UUIDAction identifier comes in the structure, which is cumbersome to read. I was hoping you would be able freely change the LoxConfig Name of the control, without having to keep that in sync with the UI.JS code.

 

Yeah, I think "name" is the most practical id to use to reference a control in an external UI.  The uuid would make for very unreadable configuration, and I'm also not sure there's any guarantee that it's a permanent id if Loxone make some internal software changes in future.

[seb303]

I'm attaching a new version of my Custom UI code.  It's still a work in progress, but is much improved over the early version I posted previously.

All configuration is now kept separate from the main code.  And basic control and visualisation of lighting is now also possible.

In a nutshell: you can set up multiple tabs, each of which can either be a graphic with lighting controls overlaid, or a general tab that has arbitrary HTML with controller values/charts/etc. to be inserted.

The lighting tabs are defined in a Javascript object in config.js
The general tabs are defined using HTML with data-* attributes in index.html

There's some documentation in config.js and index.html - feel free to ask if you need help with anything.

Current to-do list is:
- Implement lighting controls more fully, including changing scenes, colour picker, etc.
- Visualise PiR and other sensor states on a lighting tab.
- Add ability to make control changes from within a 'general' tab (e.g. to control heating system), rather than just display values.

[Aleš Berka]

Very interesting, thank you!

[Manuel Medrano]

Good morning, Seb303

You are amazing!!

I've seen your configuration and program and now is easier to understand and also has new features.

I have a problem to display a value.
I have a Climate Control called "ClimaSalon" as I can get the value of target temperature?
I do not get out only the value of the controls, just know to get the value of digital inputs and outputs.

Could you help me?

Thank you!

[seb303]

Hi Manuel,

If you can upload a copy of your LoxAPP3.json (or private message me) then I can have a look and suggest how you reference this control.
The control (or input/output/etc.) does firstly need to show up in the usual Loxone web UI, in order that it can be shown by my software (i.e. have "User Interface / Use" ticked in the Loxone config).

You can get your json file from:
http://<your miniserver>/data/LoxAPP3.json

[seb303]

Now that the code is much more finished, I've created a new thread for this:
https://groups.google.com/forum/#!topic/loxone-english/9E2grPFzUXg