Add a bit of bling to your dashboards with decorated images to indicate the status of devices, people.... or anything really. Available now through HPM.
The background to this driver is that I was wanting to reproduce the avatar from the HE Community:
I can now use this driver to display the status of:
HA Infrastructure - such as lights, hubs, plugs and contact sensors
Personal Notifications - such as notifications for laundry being ready
What can I do with it?
On/Off (switch) status - displaying a dot in the top right when on, with the colour being configurable
4 Status Numbers - Displayed in the 4 "corners" of the avatar inside a dot. This can be used to indicate where more than one "thing" is being represented by the status dot, such as multiple messages / notifications, more than one device being in a certain state, etc.
More Information - The avatar image itself can have a URL associated with it, as well as each dot (when a number is displayed).
Configuration
HTML File Name - The display of the avatar is recorded in a HTML file on the HE hub in the local storage, the file name configured here allows for that to be set.
Image URL - A full URL link to an image file. For the fully local experience this can be stored on the HE hub, but any URL can be used. As an example, each of the avatar devices I have setup to represent my HE hubs each link to the Web UI for the relevant hub.
Height and Width - While these are individually configurable, they are best kept the same in most cases
Round Image - Some images do not need this rounding effect applied, so this is configurable
Size of dots displayed - Adjust this in conjunction with the image width and height, to ensure the status dots are in proportion to the avatar image
Default colour for dots displayed - This is a hexadecimal value representing the RGB values for the colour to be used in each dot.
URL Link opened when clicking on the avatar image - Allows for links to relevant information about what the avatar represents, can be left as # as a default
URL Link opened when clicking on status X dot - Each status dot can have a separate URL configured, allowing for more information on what the status dot indicates
Usage
The driver implements the switch capability, so any app the asks for a switch device could reference a device using this driver, or an RM rule could be setup to maintain the on/off value for this device for whatever you want it to represent.
For the 4 status numbers, these can be updated by calling the equivalent command, setStatusNum1, setStatusNum2, etc, typically through an RM rule using a Custom Command action. Setting the status number back to zero will mean the dot will no longer be displayed.
The device includes an iFrame attribute that can be selected when creating a dashboard tile using the Attribute template. A more refined appearance of dashboard tiles can be achieved using custom CSS, with plenty of examples throughout the Community, but with a central discussion located here.
2021-12-19: 1.3.1 - Ensured Dots sit on top of image, updating preferences refreshes avatar
2021-11-20: 1.3.0 - Added options for URL links for Avatar and each dot
2021-11-19: 1.2.0 - Added options for Image Rounding, Dot Size and Default colour
2021-11-13: 1.1.0 - Added Status Numbers
2021-11-11: 1.0.0 - Initial release
Updated the driver today, adding 4 status numbers. Plan on using this to indicate things like the number of notifications or devices that are represented by the dot.
Next I want to tackle a few aesthetics like colours being used, plus a few more concrete examples in my main post above.
@sburke781 Do dev's share code somehow? Is this something where the guts of it could be used by others in their drivers like a library function? I could easily imagine this becoming a standard for implementation! I use snippets of OP code and the HTML, image and iFrame components all are impactual (sp?) to things that external dashboard apps need / want or could use to get around the limitations and weakness of the HE dashboard. just . wow. it's like a drupal module.
Feature request: Can the different dots be configured to be links to web pages? Say I’ve got the top right dot signifying that there’s an update available for HE. I could then configure a URL for that dot to take me to the update page if I click it. The top left dot could signify that there are devices with low battery levels. Clicking that dot could take me to a dashboard URL with all my devices’ battery levels displayed.
That's so elegant! @jpage4500 has created Android Dashboard which is incredible - and he searches tiles for html elements such as < html >, < div> etc... which helps ID new tiles and their defaults. In turn this has cascaded into clean support of @bptworld code for a number of tiles and tile creation tools. And thats not all thats affected!
Last question before I go playing - does this circumvent the 1024 problem too? It looks like it might!
Yeah, was part of the reason I started playing with html files. Just note that they won't work remotely (I don't think) if you are not on a VPN and using a local dashboard.
I’m sorry, but I’m going to be really annoying (again). I’ve got another feature request… Seeing how brilliantly you were able to set each dot to a unique URL, would it be possible to set the colour of each dot independently as well? That way I could have a green one for hub updates for instance and a red one for errors or alerts. Extra points for the ability to be able to set these colours from RM
Don't worry, I was going to be annoying all on my own... Was planning on adding colour settings per dot as well. Adding commands to set each of those wouldn't be hard either. One complication may be the text colour, so will have to work on that part when I make the change.
Right now I'm grappling with sizing of the image while I try to get the launching of a pop-up iFrame going. Which I essentially have, just polishing how the image behaves when I resize the tile.
