[SOLVED] Traffic Light Dashboard

idkpmiller · April 13, 2019, 10:42pm

Hi All,
As you may gather from my selected image I have sight difficulties (legally blind).

I am looking to build a sitemap with a section that delivers a simple dashboard layout. using the standard traffic light colours.

I have added the colour to the text, but unfortunately I cannot distinguish this from any other colour, I am told the Fridge Temp text is in green.
I therefore am looking for an improvement, such as the text background perhaps? or a block icon that changes color?

here is the section of the sitemap you are looking at

			Text label="Diagnostics"  {
				// Check Sonoffs that power devices are online
				Text item=SH_Dryer_SO_Online icon=network label="Dryer Online" visibility=[SH_Dryer_SO_Online==ON]
				Text item=SH_Dryer_SO_LastSeen  icon=network label="Dryer Last Seen [%1$ta %1$tR]" visibility=[SH_Dryer_SO_Online==OFF]
				Text item=SH_Fridge_SO_Online icon=network label="Fridge Online" visibility=[SH_Fridge_SO_Online==ON]
				Text item=SH_Fridge_SO_LastSeen  icon=network label="Fridge Last Seen [%1$ta %1$tR]" visibility=[SH_Fridge_SO_Online==OFF]

				// Check status of end devices
				Text item=SH_Fridge_Temp valuecolor=[>10="red",>8="orange",>4="green",<4="orange",<=2="red"] label="Medical Fridge Temp [%.1f °C]"
			}

Any ideas?

Thanks

Paul

MadFrankie · April 13, 2019, 10:47pm

Not too sure what magic you can do in the basicUI as I’ve already seen it as something to use when testing.

Have a play with habpanel, it’s massively more scalable and without too much technical knowledge you can create things with big bright backgrounds depending on the state of a button / temperature etc.

rlkoshak · April 15, 2019, 10:34pm

It might be worth while exploring HABPanel. It gives you more customization and larger areas to build such a view.

That should be doable. Create custom icons that consist of just a square color. See Items | openHAB for details about which files you will need and how to name them

idkpmiller · April 16, 2019, 3:51am

As always thanks Rich for you assistance and guidance.

Virus-free. www.avast.com

idkpmiller · April 16, 2019, 5:04am

hmm I am so close but not quite there…

I have created three icons, called trafficlight.png, trafficlight-on.png and trafficlight-off.png

The ‘OFF’ state is correct and how I want it, and looks this

Unfortunately the ‘ON’ state is not quite what I would expect, for two reasons,

I expect the Green '-on- icon to be displayed not the default one
I was not expecting the Switch on the right side still to be visible.

image.png813×91 5.34 KB

I have checked the files are named correctly as follows
GREEN - trafficlight-on.png
AMBER - trafficlight.png
RED - trafficlight-off.png

SITEMAP

				// Check Sonoffs that power devices are online
				Switch item=SH_Dryer_SO_Online label="Dryer Online" visibility=[SH_Dryer_SO_Online==ON]
				Text item=SH_Dryer_SO_LastSeen  icon=trafficlight label="Dryer Last Seen [%1$ta %1$tR]" visibility=[SH_Dryer_SO_Online==OFF]

ITEMS are configured in PaperUI

And the other ITEM

I am sure it will be something obvious to the experienced.

Thanks
Paul

[EDIT] corrected the icon names as they appear on the files.

rlkoshak · April 16, 2019, 10:41am

There names for the icons follow <name>-<state>.png. You have a . Instead of a -.

idkpmiller · April 17, 2019, 4:30am

My apologies that was a typo in the post not on the system, here is a paste off the system.

[EDIT] changed the permissions and owner, still did not work.

Thanks
Paul

rlkoshak · April 17, 2019, 11:11am

The answer to 2 is the title shows up because you are using the Switch element in your sitemap. If you don’t want the toggle, use the Text element.

Try refreshing the sitemap to see if the icon is just not refreshing.

idkpmiller · April 17, 2019, 6:06pm

Wat could be an interesting observation.
Changing the element type in the sitemap did indeed remove the switching representation from the Dryer entry. All good.

Then I realised a subtle difference, the ONLY time i got the icon to change wich is to the -off image is not when I change it using the REST interface or by actually turning off the device is when I clicked the item OFF using the switching representation. in all other cases of condition it simply shows the default icon (amber).
So it is not reacting to the state of the item at all.

Unfortunately I then get stuck again as it seems fine does the item definition and the permissions of the icons, perhaps I should attach the icons, and some items files etc??? Or is there something I can place in DEBUG to see what is going on?

Regards

Paul

Kim_Andersen · April 17, 2019, 8:21pm

Attach the icons files. There is no need for the items, as every icons can be tested on every item as long as their change of state follow the icons name…

What you need to make absolutly sure, is the state report of the item/thing you´re using.
If it´s an ON/OFF item, things should be good to go. But sometimes a thing report 1/0 or maybe even something else (OPEN/CLOSE etc). And then you need to correct your icons to respond to these states.
Second - Make sure you dont have a map transformations which will confuse everything. As far as I recall, you cant use map tranformations for icons. Ie… You cant change 1/0 til ON/OFF and then use ON/OFF for your icons, cause the original state is 1/0 which is what openhab is using (unfortunatly).

rlkoshak · April 17, 2019, 9:41pm

The question is when you know the Switch is ON, for example, because you have set it using the REST API or something, and BasicUI fails to show the correct icon, does it persist in showing the incorrect icon if you refresh the browser?

Kim_Andersen · April 17, 2019, 11:03pm

If its a ON/OFF item, its alot more easy to test the icon using a proxy item (switch). If its another state, a small rule can come in hand still using a proxy item (switch).

idkpmiller · April 18, 2019, 3:16am

png Icons are attached.

trafficlight trafficlight_off trafficlight_on

Thanks

idkpmiller · April 18, 2019, 3:29am

if I set the item to ON the browser still shows the default icon even if I refresh it.

REST OUTPUT

{
  "link": "http://192.168.0.4:8080/rest/items/SH_Dryer_SO_Online",
  "state": "ON",
  "stateDescription": {
    "readOnly": true,
    "options": []
  },
  "editable": true,
  "type": "Switch",
  "name": "SH_Dryer_SO_Online",
  "label": "Online",
  "category": "trafficlight",
  "tags": [],
  "groupNames": []
}

Browser
Now if I refresh it makes no difference it is still showing the default icon.

Wait…
I tried a different browser and it is showing correct, and also changes with ON and OFF state.

I will need to investigate why my Opera Browser which is a Chrome webkit does not show the correct icon but Chrome does. I will try a clear data first.
and now I know this is all about the viewing client I will go around testin g different ones and seeing what works and what does not.

Thanks Rich.

idkpmiller · April 18, 2019, 3:44am

So in my default browser the icon would not change even if I F5’d it, I cleared the browsing cache and bam! it is now working.

My default browser is Opera, before anyone flames it, remember as a visually impaired person I have different set of requirements from the average punter.

Thanks to all for the assist.

Regards

Paul

rlkoshak · April 18, 2019, 1:54pm

I’m glad you diagnosed the problem.

This is a good example of why it is so important to nature down where the problem is occurring and to not trust what BasicUI is showing you until you have independent verification. There is a whole lot that can go wrong from device to BasicUI and you have to verify the information at each step of the way.