Animated Images possible

Feature Requests
#1

…is what I’m trying to do.

I was going to keep quiet on this but, I’d like to expand on some of the simple animations I have going already. :grin: I’ve mentioned it briefly before (old forum) but, I’m really itching to figure this out. I believe this might constitute as a feature request.

I can make simple animations like pop-ups expanding open/close or pages fading in/out. I can only do this by a lot of Property Actions from Event Triggers (me clicking on something)

What I would like to do is make these animations by a Data Trigger. For example: When the air conditioner turns on (“Cooling”), show an animation of the fan spinning or air moving. I can’t figure this out… Is it possible?

If not, my request is to make it possible.

An alternative idea would be an Animated Image Button. This button would allow for multiple images to be loaded. It has a property/trigger that, if changed, it will start a progression through the images. It would have a property to loop the images if desired and a property to adjust the delay between each image.

GIF’s have been around prior to Al Gore inventing the internet and there’s still debate on if it’s pronounced “JIF” or “GIF” so, I want to stay away from GIFs. Second, they don’t support transparent background (I think).

This was me trying to figure it out and a proof of concept but, take a look at my attached hrp. (Its fun for ages 4 and up LOL!). Click on the images or buttons.
animations.hrp (2.8 MB)

Anyone else interested in some motion? Pop a vote up there.
Ceiling fan

Can MediaElement be used to play a video?
Help on custom dimmer light tile and icons
#2

It’s not currently possible to animate PNG files using Data Triggers. Likely will require a new control as you’ve outlined.

It does appear that GIFs do support transparency although that’s not really a solution right now anyway. Only the Windows UWP app will animate them.

#3

It is possible to insert animations. I use a small webserver with HTML pages that contain animated gifs. Then you can use them by inserting them into THR as a web browser. The scrollbars are only visible in the THR preview. On my iPad it looks like are normal animated image.
Here a example from my LCARS design on which I work as preview in THR:

3 Likes
#4

Oh this is way cool! Thanks for sharing. My next rainy day project.

#5

Funny you should say rainy day project… Top of my priority list was animating my weather page.

#6

Thanks Kalle! I use a ton of transparency in all my pages so I’ll need to play around with your suggestion.

#7

I was happy to do it.
This is what the HTML code looks like:

<!DOCTYPE html>
<html lang="us">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GIF Webpage</title>
    <style>
        body {
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            width: 100vw;
            height: 100vh;
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="http://your_IP:port/your_image.gif" alt="GIF">
    </div>
</body>
</html>

This HTML code creates a webpage that displays a GIF as the background (png or bmp is also possible, but not animated). Here’s a breakdown of each part:

  1. HTML Structure:
  • <!DOCTYPE html>: Declares the document as HTML5.
  • <html lang="us">: Starts the HTML document and sets the language to English.
  • <head>: Contains metadata and links to external resources.
  • <body>: Contains the visible content of the webpage.
  1. Metadata in <head>:
  • <meta charset="UTF-8">: Sets the character encoding to UTF-8.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the webpage displays correctly on mobile devices.
  • <title>GIF Webpage</title>: Sets the title of the webpage.
  1. CSS Styles in <style>:
  • body: Sets the background to black, centers the content, and ensures the content takes up the full height of the screen.
  • .container: Sets the width and height to 100% of the viewport.
  • img: Sets the width and height of the image to 100% of the container and ensures the image covers the container completely.
  1. Content in <body>:
  • <div class="container">: A container div that holds the image.
  • <img src="http://your_IP:port/your_image.gif" alt="GIF">: An image tag that loads the GIF from the specified URL.

In summary, this code displays a GIF image that fills the entire screen with a black background.

You can create as many pages as you need.
I have no idea how much it affects the performance of THR, but these files aren’t really that big and I didn’t notice any slowdown on my iPad Air 2

2 Likes
#8

Late to the party here, but I’ve been trying to do something similar. When motion is detected in a particular room, I’ve wanted to have an icon flash off and on, letting me know of the movement. What I ended up doing involved using Hubitat.
In Hubitat:
–Set up a virtual switch (VS_THRHallBath_Motion)
–Created a rule that watches the Motion detector (Presence Hall Bath)
While (Presence Hall Bath motion is active(F) [FALSE]) Repeat every 0:00:01
On: VS_THRHallBath_Motion
Delay 0:00:00.5
Off: VS_THRHallBath_Motion
END-REP
In THR:
–Import the VS_THRHallBath_Motion device
–I used 2 Datatriggers on the icon I want to flash to monitor VS_THRHallBath_Motion.Switch and set the icon visibility appropriately.

I realize this might tax the Hubitat and is not the optimimum way to do this, but thought I’d toss it out there in case someone could use it. IMHO, support for animated gif would be the way to go.

#9

Good idea @Styxman. Welcome to the party!!! Great idea to automate the virtual devices. I use virtual devices (helpers on my home assistant hub) to show status of activities of things across all my THR devices.

To take it a step further, instead of a binary switch, you could use a number value to give you a multi state. I believe you would need to use a virtual dimmer in HE. for example, create rule that make changes the value to 1,2,3,repeat. 0 would be off.
This way you could get a bit more than just on/off.

~4 years later - sadly I don’t think there’s a chance this feature request will ever be implemented. For many of my pages, I am using Home Assistant dashboards (kiosk mode) through a web Browser which tickles my fancy just enough.

#10

@Jdamore, making it a dimmer will certainly make it more versatile, for sure. I’m sure I can come up with stuff to do with that. Do find/think going about this the way I am would tax the Hubitat box? My thoughts are that it would only be for short bursts of time (I’m the only person in my home).

I’m also running HA just for the Sonos integration (don’t like Hubitat functionality). I use Multi-System Reactor to do all the grouping/volume setting, etc for some scenes.

#11

I guess that depends on how much you actually have going on. You’ll just have to try!

The biggest reason I moved away from HE was my automations/integrations were pegging the hub (Ver.C5) and it was locking up (had to reboot). Since I was using the HE virtual devices in THR, if the HE hub locked up, it crippled my whole setup.

I still use the HE hub but only as a zigbee/zwave coordinator integrated to HA.