On the dashboard below, there are two devices: one says ON, the other OFF.
Are ON and OFF the actual states of the devices, or the commands to change their states? How to remove this uncertainty?
The “on” property of the Web Thing Type spec is a boolean variable in the current scope of thing types:
https://iot.mozilla.org/wot/#web-thing-types
An action such as “toggle” of the onOffSwitch type will toggle the state of the on property. But depending on the device, it might also be possible to set the “on” property state to true or false, which may or may not toggle the device state (dependent on current state).
This probably doesn’t answer your question but at least gives you more to ponder. 
It represents the current state.
Ok, so how to know a device offers an action?
In the example below, Button 18 offers no actions while LED 17 can be turned on. Both look identical.
By tapping it
But seriously, yes, it could be a bit confusing. Tappable buttons don’t have visual affordances to differentiate them from read-only sensors. Do you have a suggestion of how to improve it?
One first suggestion: removing the white circle for devices with no actions.
A device with a white circle offers interactivity. The LED 17 device has been changed to show the white circle.
Hmm, interesting idea to differentiate thing icons you can tap by adding a border. It is quite a subtle distinction though and I’m not sure if the “affordance” would be immediately obvious to users. We could put this through some quick user testing to compare the two designs.
Note that an alternative design I previously explored was to have an on/off button inside the circle which is the button you actually press, but space inside the circle is quite constrained.
Another option would consist on changing the background colour of the devices featuring an action when the mouse is hovering.
Devices with no actions stay unchanged.
See https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_hover
Note that touch-based devices do not have a hover state.
Nothing is perfect!
It would also be good to have a menu item like “Help” or a quick overview of how to use the UI that answered questions like these.
Or inactive devices are in light grey.
I had a new look at this issue with latest release 0.6.
If I press the physical button on, the interface is updated accordingly.
However, If I click on the check-box with my mouse, the tick appears and stays for a while.
The interface is still very confusing.
This might be a bug in the front end…
But what physical button are you using? A button which gets classified as a PushButton should have a read-only PushedProperty so this problem shouldn’t occur because you wouldn’t be able to change the on/off state in the UI (as that would have no effect on the real state of the button).
The Thing Description of that button should probably specify that the on property is read-only, if changing the value in software won’t change the physical state in hardware.
Maybe a field for sementic type should be added here ? (same in webthing-node sdk)
A similar question was raised about Question: Do Rules Transfer State or Action #693 with the Flip-Flop Implementation? #694.
The metaphor used by WebThings needs an urgent clarification. Otherwise, new developments may only increase the confusion.