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