[SOLVED] Traffic Light Dashboard

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?



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.

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 https://www.openhab.org/docs/configuration/items.html#dynamic-icons for details about which files you will need and how to name them

1 Like

As always thanks Rich for you assistance and guidance.

Virus-free. www.avast.com

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,

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

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


				// 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.


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

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

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.


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.

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?



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).

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?

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).

png Icons are attached.

trafficlight trafficlight_off trafficlight_on


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


  "link": "",
  "state": "ON",
  "stateDescription": {
    "readOnly": true,
    "options": []
  "editable": true,
  "type": "Switch",
  "name": "SH_Dryer_SO_Online",
  "label": "Online",
  "category": "trafficlight",
  "tags": [],
  "groupNames": []

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

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.

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.



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.