[RELEASE] Status Avatar

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:

HubitatCommunityAvatar

I can now use this driver to display the status of:

  • HA Infrastructure - such as lights, hubs, plugs and contact sensors

  • Hubitat Elevation Hubs - either as a single image or as a decoration overlaid on another tile (shown on top of a tile with the Hub Information output)
    image

  • Personal Notifications - such as notifications for laundry being ready
    image

What can I do with it?
  • On/Off (switch) status - displaying a dot in the top right when on, with the colour being configurable
    image

  • 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.
    image

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

Enjoy!!

Simon

11 Likes

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

Love your work :+1:

1 Like

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.

Another update today, v1.2.0, to include preferences for:

  • Image Rounding - Toggle this on / off depending on the type of image you are displaying. Some "icon" style images do not need to be rounded
  • Dot Size - Adjust the size (in pixels) of the dots displayed based on the size of the avatar image
  • Default Dot colour - Set the default colour of the dots using a 6 character hexadecimal string

More customisation will come (I hope), particularly with the choice of colours. I will also post some examples of my use of these changes shortly.

Simon

1 Like

This is huge! maybe a game changer imho.
Did you solve the 'dynamically store a image in File Manager' problem or is that still manual?

Thanks. No, the image files are still a manual upload or web url.

@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. :slight_smile:

Love your work Simon!

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.

1 Like

Yep, I just didn't post it because it is available for install via hpm, but you are welcome to check it out.

1 Like

Thanks. I'll see what I can do. I wanted to have mine open a pop-up iFrame by simply clicking on the image, but I'll see what I can do with the dots

1 Like

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.

Done!! :slight_smile:

Updated the avatar driver to include additional preference settings, specifying a link for each dot and a link for the avatar image itself.

If a number is recorded in one of the dots, you will be able to click the number and open the link in a new tab.

If using the avatar to record a single on/off dot, use the link configured for the avatar image as the way to follow up on what the dot represents.

Simon

2 Likes

Awesome Simon! :+1: I’ll see if I can give it a go tonight :slight_smile:

1 Like

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 :wink:

1 Like

Don't worry, I was going to be annoying all on my own... :slight_smile: 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.

1 Like

Is it currently possible to include a number (or a single char like a ?) in a dot as per this screenshot ?

HubitatCommunityAvatar

If you run the custom command set status num 1, that will put a number in that dot.

1 Like

Very useful for a counter indication

1 Like