Graphical UI Extension

[seb303]

While I love all that is possible with the Loxone system, I have always found the user interface a bit limiting, both in how much it can be configured and in the general ease and efficiency of use.  Inspired by this I've developed a user interface extension.

Seems there is a bit of interest in such a thing, so I set up a web page with an overview, and where you download the latest code if you want to try it out...

http://burnit.co.uk/loxone-ui-extension/

It can do custom visualisations of multiple variables...


Visual overviews and control of lighting...




It can also host other browser-based user interfaces, such as an external media server or even the primary Loxone interface...

[Aleš Berka]

It is very nice, thanks a lot. It is very inspiring. Even with documentation, amazing. I'm looking forward to reuse some parts of it one day.

Aleš

[Anders Windsor]

Looks very nice, I will check it out, great work.

[DavidL]

Great. I'll give this a whirl next week.

I did notice you've hard coded the IP address for the Loxone web interface towards the bottom of the config.js file. Would it make sense to use the miniserver variable at the top of the confi.js file to populate a URL in that external section?

David

[Rob_in]

Very nice. I have made mention of this on the LoxWiki. Feel free to update this as you wish:

http://www.loxwiki.eu/x/IQrL

[seb303]

On Saturday, January 7, 2017 at 7:38:25 AM UTC, DavidL wrote:

I did notice you've hard coded the IP address for the Loxone web interface towards the bottom of the config.js file. Would it make sense to use the miniserver variable at the top of the confi.js file to populate a URL in that external section?

I don't think it would work to reference a property of the config object while defining the object.  You'd have to change it so the config object is defined first, then add the 'external' property in a separate statement.

The config is only an example in any case - you will need to make many changes to get it to work with your own miniserver configuration.

[Duncan]

thanks for the new interface

i tried modifying your example to pick up some of my data, but only some data items seem to work -

eg a virtual input or virtual state work fine, but a real 1-wire temperature measurement doesnt deliver any data

if i put the same source in a web page url such as:
http://miniserver/dev/sps/io/Adjust%20Bedroom%201%20Heating or
http://miniserver/dev/sps/io/hall_temperature

i get the correct data returned correctly

<td colspan=2>
                    Base target flow temperature = <span data-control="Manifolds Setpoint Hall"></span><br>
                    Target flow temperature = <span data-control="Temp Manifold Target Hall"></span><br>
                    Actual flow temperature = <span data-control="metal35 hall manifold Temperature sensor"></span><br>
                    </td>

the first 2 items work fine and return the correct temperatures - 1st is a virtual input, 2nd is a virtual state
3rd item doesnt work, its a real 1-wire temperature sensor

any ideas?

[seb303]

Hi Duncan,

It should work fine.  All my temperature sensors are 1-wire.

You need to use the exact control name as it appears in the web app.  If you have defined a Description that is different from the control Name, then you need to use this.

Does your control really appear in the web app as "metal35 hall manifold Temperature sensor"?

Are you getting any error messages?  They will appear top-right - hover over to see the details.

[seb303]

I just uploaded a new version v2017-05-27 with a couple of minor changes.  I'm sorry to say that the bulk of the features on the to do list are not likely to happen very rapidly due to general busyness at the moment!

http://burnit.co.uk/loxone-ui-extension/

Changelog for v2017-05-27:
- Fixed bug where details of config Errors weren't displayed properly
- Added support for displaying value of Timer/Schedule controls in 'general' tabs
   
Changelog for v2017-01-08:
- Fixed bug with large charts of multiple value sets

Changelog for v2017-01-06:
- Added control of parent Lighting Controller as well as individual light
- Added group controls for lights
- Made each tab bookmarkable (i.e. URL hash changes with tabs)
- Added Loxone favicon
- Improved documentation for 'lighting' tab configuration
- Added 'external' tab type with WOL trigger

Changelog for v2017-01-04:
- Fixed bug with minicharts if multiple value sets
- Added scene select for Lighting Controller lights
- Added on/off button for Dimmer lights

Changelog for v2016-12-28:
- Added parameter data-chartvalueset to specify which of multiple statistical value sets should be plotted
- Added selection by category for lighting definitions

Changelog for v2016-11-14:
- Added larger charts when mini charts clicked on
- Moved all user configuration into config.js and config.css
- Moved all documentation into documentation.html
- Charts now handle controls with multiple statistical value sets
- Fixed bug where large chart wasn't shown unless there were multiple months of statistics available

[Manuel Medrano]

Great to continue with the project!

You know I'm your fan number one!

 

In your improvements you say:

"Added support for displaying value of Timer / Schedule controls in 'general' tabs", but I can't find anything where you apply it or explain it.

In the documentation I don't see anything, can you tell me how to implement it?

Thank you!

[seb303]

On Tuesday, May 30, 2017 at 6:33:34 PM UTC+1, Manuel Medrano wrote:

"Added support for displaying value of Timer / Schedule controls in 'general' tabs", but I can't find anything where you apply it or explain it.

In the documentation I don't see anything, can you tell me how to implement it?

It's just a matter of having an HTML element with attribute data-control="control name", etc.
Same as any other control (but previously it didn't work for Timer / Schedule controls).

It only displays the current value and doesn't allow to display or edit the schedule.  I would like to be able to edit schedules too, but it's a lot of work to implement this and pretty easy just to switch to the normal Loxone UI in another tab and make changes here.

[seb303]

I've just released an updated version v2017-11-05 with a couple of changes...

- Added support for Light Controller V2 controls
- Added ability to show state of detectors (PiRs, etc.) on lighting tabs

Download from the usual place:
http://burnit.co.uk/loxone-ui-extension/

[Aleš Berka]

Thank you!

[Julián Medrano Silvestre]

Impressive work...

Thanks for sharing it!

[Manuel Medrano]

Thank you very much for sharing with us!
You are my idol! :)

[Bram Verbauwhede]

Very nice!

would be could if you do not have to hoover for control, but just permantent on/off or sliders.

[seb303]

This could be an option, but it would likely make the UI quite cluttered.

The main problem with hover for control is that it does not currently work so well on touch-screen devices.  The next version will have improvements for touch-screens, along with a few other new features.  Should be ready by the end of the month.  I'll announce it here when it is....

[seb303]

Updated version released: v2017-12-13

Here's the change log:
- Added parameter data-chartwidth to set width of mini charts
- Added parameter data-chartcontrols to allow mini charts of past days to be displayed
- Added Push-Button and Switch functionality within 'general' tabs
- Added basic support for displaying Burglar Alarm armed status within 'general' tabs
- Fixed bug where authentication of WebSocket could fail over a slow connection
- Added basic support for touch screen control (some elements may still be on the small side)

[Arnaud]

Great Job, thank you very much.

[Russ]

Pretty impressive.  Hm, what would it take to be able to run this on ios or android?  ...the idea being to use a tablet, either ios or android, as a controller.  Apparently you can run javascript on ios, is this all that's necessary?

[Bram Verbauwhede]

upload your file to an webpage and browse with ipad to the website on local wifi, that works!

Op zaterdag 16 december 2017 19:50:35 UTC+1 schreef Russ:

[Russ gmail]

Ah, so I could use a RasperryPi with Apache as a local webserver and then access/control with an iPad?  Cool.  Need to do this.

--
You received this message because you are subscribed to a topic in the Google Groups "Loxone English" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/loxone-english/9E2grPFzUXg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to loxone-englis...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/loxone-english/5b6f731a-c54e-43a1-9667-4f6c742ce79a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Joakim Arfvidsson]

I just installed the latest release on my RaspberryPi, using Apache2.

I have one functionality question. I'm configuring the Heating page to pull data from my own system, which uses "Intelligent Room Controller" for each room. The graph of past temperatures is fetched fine and shows up, but the current value shows up as "0". Do I really have to define a separate memory flag to get the current temperature field populated?

[Meint]

Just updated loxone to version 9.3 and now the UI cannot log in any more.

Any idea how to fix this?

Until loxone version 9.1 all was working perfectly.

Please help.

Meint

[Dmitry Karageur]

They have changed authentication procedure. You have to rewrite the method of connection UI to miniserver:
Starting with Version 9.3 password based authentication has been removed due to security reasons. Token based authentication must be used from now on, for websocket authentication on the Miniserver! (Please see API documentation)
To connect to the Miniserver the App Version must be at least 9.0

[seb303]

On Tuesday, March 27, 2018 at 7:24:10 PM UTC+1, Meint wrote:

Just updated loxone to version 9.3 and now the UI cannot log in any more.

Loxone changed the way external Apps must authenticate.  So I need to rewrite the UI Extension to support this new authentication method.  It will be done as soon as I can and I'll post an update here.

For now I would suggest going back to the previous Loxone version unless there is a specific feature of 9.3 that you need.

Seb

[seb303]

On Tuesday, January 2, 2018 at 4:16:35 AM UTC, Joakim Arfvidsson wrote:

I just installed the latest release on my RaspberryPi, using Apache2.

I have one functionality question. I'm configuring the Heating page to pull data from my own system, which uses "Intelligent Room Controller" for each room. The graph of past temperatures is fetched fine and shows up, but the current value shows up as "0". Do I really have to define a separate memory flag to get the current temperature field populated?

Sorry, only just seen this question.  Seems that I'm not getting notified any more of new posts to this thread.

To answer your question: there's no way to directly display a temperature graph from an IRC.  I would suggest a Virtual State block connected from the AQt output.  You can assign the Virtual State to a different category (e.g. Temperature instead of Heating) to avoid cluttering your UI in the Loxone app.

[Arnaud]

Hi, 

i've you upgraded the code in order to work with 9.3 version ? 

br.

[Mariusz B]

Hi All, I'm new here and i got question.

I have Loxone config 9.3.3.26, I downloaded latest zip. file with ui res., changed ip address with port, login and password in config/config.js and after I opened index.html I got it grey website with message "Connecting to Miniserver" that's all.

Here I'm asking did I something wrong or this code doesn't work with latest 9.3.3 firmware?

Best Regards! 

[seb303]

Loxone changed the way external Apps must authenticate with v9.3.  So I need to rewrite the UI Extension to support this new authentication method.  It will be done as soon as I get time and I'll post an update here.

For now the only way to use my UI extension is with the previous Loxone version.

Seb

[Łukasz Jezierski]

Could you include UpDownDigital in supported controltypes ?

[jezikk]

On Github I found library to connect to Loxone Server with token based auth: https://github.com/Loxone/lxcommunicator

Maybe You can easy connect it with your solution ?

[Mariusz B]

Thanks I will try this next week now I'm working 11 hours per day ;)

[seb303]

I finally got round to updating the UI Extension so it works with Loxone config v9.3+

I have rewritten the underlying communications code to use the new Loxone LxCommunicator library.  This means that all Miniserver communications are secure/encrypted and authentication is token-based.

Now that it is using the Loxone library, it should mean any future backwards-incompatible changes by Loxone can hopefully be accommodated just by updating the library.

As always, it is available to download from here:

http://burnit.co.uk/loxone-ui-extension/

[Tico]

Wow! Thanks for your efforts with this.

I don't profess to fully understand how to set this up yet....but it'll be fun trying.

In line 850 of the config.js, I've set my Miniserver to the appropriate IP/Port. It works well but I need to enter username and password.

Attempting to bypass the login screen with http://username:password@IP:Port doesn't work. Is this a limitation of the web interface of Loxone?

[Mariusz B]

Thanks seb303 i will check this asap.

[seb303]

On Thursday, September 13, 2018 at 4:11:37 PM UTC+1, Tico wrote:

In line 850 of the config.js, I've set my Miniserver to the appropriate IP/Port. It works well but I need to enter username and password.

Attempting to bypass the login screen with http://username:password@IP:Port doesn't work. Is this a limitation of the web interface of Loxone?

Yes, if you include the Loxone web interface in a tab, there doesn't seem to be any way to force it to authenticate automatically.  Best you can do is save your username and password using the browser's password manager or add-on.

[LZizu]

Hi!
Did you notice that the UI lost contact with Miniserver a few minutes after the start?
Sab! Can you help?

Would it be possible to display a gif if a value is true and another if it is false?

It would be great in visualisation.

Thanks!

[seb303]

Hi,

I haven't noticed that it looses the connection. Seems to be ok for me - I will try leaving it for a few hours. Are you connecting over a local network or via internet?

Regarding the gif idea: you can do this using the "data-function" attribute on the html element which should contain the image.

e.g.

data-function="showImage"

Then as part of config object:
    showImage: function(v) {

        return v? '<img src="true.png">' : '<img src="false.png">';

[seb303]

On Sunday, September 16, 2018 at 8:22:45 PM UTC+1, LZizu wrote:

Did you notice that the UI lost contact with Miniserver a few minutes after the start?

Just tried it for the last 2 hours or so and it stays connected ok for me.  The little mini charts will update every 30 minutes so you can tell that it stays connected - especially if you have elements in the HTML with data-chartrange or data-chartcontrols attributes which show the time range of the charts.

If you do get disconnects, check the browser Console (Ctrl-Shift-I) to see if there are any error messages...

[seb303]

Hi LZizu,

If you are still having problems with lost connections, try the new version 2018-09-18 here:

http://burnit.co.uk/loxone-ui-extension/

I made it more resilient/persistent in case of network errors.

On Sunday, September 16, 2018 at 8:22:45 PM UTC+1, LZizu wrote:

[LZizu]

Hi Sab!

Thanks a lot! I will try. I think my router can be wrong sometimes. Your work is great!

Usually there is not any problem with the connection, just sometimes.

How can i launch the UI in full screen mode?

Have you got any solution how to display a gif if a value is true? Is it difficult to code?

[Aleš Berka]

Hi LZizu,
     Seb posted a snippet how to add a gif if value is true. Check the
recent history. It was even yesterday or so.

As for fullscreen, please refer to
https://stackoverflow.com/questions/19355370/how-to-open-a-web-page-automatically-in-full-screen-mode
(for instance). It is a general HTML development in the end, you may
find such things via google.

Regards,
     Aleq

[seb303]

On Wednesday, September 19, 2018 at 9:02:06 AM UTC+1, LZizu wrote:

How can i launch the UI in full screen mode?

 

You can press F11 key in your browser.

Have you got any solution how to display a gif if a value is true? Is it difficult to code?

I already answered this in previous reply....

[Łukasz J]

Hi,

I checked and can confirm that sometimes Miniserver connection is broken (connection over the Internet, broke after 15-20 min).

In console log you can find:

Miniserver out of service!    LxCommunicator~Browser.min.js:1:600518

Today, I'll merge my changer with the yesterday version and confirm behaviour.

[LZizu]

OK. I will try the gif solution later. Thanx! I know the f11 key. I'd use UI on tablet (firefox), but I can not use F11 there.

It's not a big problem, just if you have any idea share please!

[seb303]

Please try v2018-09-18

It should automatically re-connect more reliably.

Only a minor change in ui.js - you can do a quick diff to see the extra code.

[seb303]

It's probably possible.  There is a Javascript API for it...

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

I didn't try it though.

[Łukasz J]

Hi,

for those how'd like to have fullscreen toggle in the page, please use the following code in any of the "html:" sections:

           

<script>
            function toggleFullScreen(elem) {
    // ## The below if statement seems to work better ## if ((document.fullScreenElement && document.fullScreenElement !== null) || (document.msfullscreenElement && document.msfullscreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
        if (elem.requestFullScreen) {
            elem.requestFullScreen();
        } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullScreen) {
            elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
        }
    } else {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}
            </script>
            <input type="button" value="click to toggle fullscreen" onclick="toggleFullScreen(document.body)">

I added some more changes to the code and hope that seb303 will merge it with the core.

Most important changes are:

+ possibility to define colour of rect or circle e.g.:   areas: [['circle', 890, 810, 6, '#383e42']],

+ icon of lightbulb added instead of circle/rect shape e.g.: areas: [['icon', 730, 220, 15, 'lightbulb']],

+ possibility to add your own icons, e.g. lightbulb/'lightbulb on' are css classes where the image is defined, you can add your own icons like that.

+ pushbutton support on the lighting page type.

[LZizu]

Thank you for your helps! Everything works fine. Could you help me in one more thing? I have a bigger background and a lot elements on it (most of all gifs, display by data-function="....") on a general type tab.
I tried to scale it automatically to fit to the width of the browser's window like in the case of lighting tabs. I found many solutions, but these never worked. The background scaling was good, but it wasn't proportional with the elements.

It would be good to display general tabs if these bigger then the resolution of the device's screen like on the lighting tabs.

[seb303]

There's a new version of the UI Extension now available...

http://burnit.co.uk/loxone-ui-extension/

Changelog for v2018-12-14:
- INPUT and SELECT elements can now be added to general tabs to act as controls
- Fixed bug where minichart with no data would block subsequent minicharts from loading
- Fixed minicharts for newer Loxone versions that miss out data values where data hasn't changed
- Added support for controls of type ValueSelector
- Added "class" parameter for lights and detectors on lighting tabs
- Pushbutton controls now work within lighting tabs (thanks to Jezierski.IT / Łukasz J)

As usual the features have been driven mostly by what I've been wanting to do with my own setup, plus some contributions from Łukasz J.  So sorry if some of the implementation is incomplete across all the different Loxone controls available.

If you have problems, let me know, and I'll do my best to help within the time constraints that I have.  If I'm being particularly slow to respond, I might not have seen your post (for some reason Google Groups doesn't always forward replies to me), so drop me a direct email to seb @ the domain in the link above.

[LZizu]

Hi Łukasz,

could you send me sample files. I'd like to get my own icons displayed in lighting tab.

Thanks!

[Łukasz J]

Hi,

I config.css just add custom class e.g.:

.light.lightbulb {
    background-color: #c9c9c9;
    background-image: url(light_off.png) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border: 0px solid #000000;
   
}
.light.lightbulb.on {
    background-image: url(light_on.png) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: rgba(230, 230, 0, 1);
}

and in config.js you define it like that:

                {
                    areas: [['circle', 724,250,10, 'lightbulb']],
                    room: 'roomName',
                    control: 'ControlName'
                },

[LZizu]

Hi,

have you got any solution to display the bar with another style, for example with blue color or shape arched?

Thanks!

[wl]

Hello,

I'm only starting with this UI, but it looks great and easy to control Loxone!!
I was wondering if the push notifications can be displayed with a pop-up in the UI?
Or is this standard included (I did not try this)?

Regards.

Wouter

[Łukasz J]

Hey,

After last loxone firmware update I lost the minichart in my customUI. Have anybody experience something similar ?

BR

Lukasz

[wl]

Hello,

would it be possible to change the 'hover' image (which is now a light) to a custom chosen image?
I would also like to use the interface to control power-plugs which are connected to a Relay Extension, and are configured on a lighting-controller in the LoxConfig.

Thanks.

Op woensdag 16 januari 2019 10:23:42 UTC+1 schreef Łukasz J:

[Mariusz B]

Hi all! 

I have question is somebody tried  changed blind position with json command and is it possible?    this one for me it doesn't work maybe there is somebody who did it? :(

here is example I'm using:  sendRequest('jdev/sps/io/'+(blind.subcontroluuid?blind.subcontroluuid: blind.controluuid)+'/'+newValue);