Like to see if I could please get some help in getting the below script working for an animated image I’d like to place on a particular “view page” .
I’ve replaced frames 1-3 below with actual working URLs containing the images I’ve created but I can’t get the images to display on the page. Any and all help would be appreciated.
Just an fyi, this script was created using OpenAI.
“Frame1.png”, // replaced with working URL containing image1
“Frame2.png”, // replaced with working URL containing image2
“Frame3.png”, // replaced with working URL containing image3
];
// Set the duration (in milliseconds) between each frame
const frameDuration = 200;
let currentFrameIndex = 0;
const animatedImage = document.getElementById(“animatedImage”);
// Function to change the image source to the next frame
For those you don’t have KTL, I highly suggest looking into implementing it into your app(s).
Norm is awesome to work with and KTL has made a big difference in our various apps. So much that I have a few customers comment about some of the improvements that came with us implementing KTL.
APNG Maker
If you want to generate a single PNG file from all those in your animation, you can use this cool online and free utility: Animated PNG (APNG) Maker (ezgif.com).
What I recommend is use the inspection tool (right-click on image / inspect) and play with the parameters.
In the Style tab, you can add
position: absolute
left: 10%
top: 50%
etc…
It also depends where the image is added. I use append, but prepend also works to add before the view.
Ask ChatGPT or W3S for examples and inspiration.
Auto-refresh
_ar is always per individual view. So you can create an empty Rich Text view just for the image, without the _ar keyword. You don’t need a details view or anyting else. Also, you can get cloaser to the ideal placement of the image this way. A bit of CSS on that view can fine-tune the result.
Leave the _ar in for the other views you want refreshed periodically.
Hey Norm, I used that exact PNG maker and made an animated APNG and tried to implement it into the script you gave me and it didn’t work. The only way I was able to get animation, was by putting in (4) separate image URLs. Similar to what you did, btw love your example PNG file…
As far as reposition the animated image file, I know exactly where on the page I want it to go but can’t figure out the script that ChagGPT created. I placed this script inside your script and made multiple changes with no luck. Here’s the script:
// Function to change the position of the image on the page
Here’s your updated code, with just one animated PNG file and an absolute position setting on screen. The image is attached to the document instead of the view. This gives you a better control to place the image anywhere on the screen, and not bound to the view.
I also changed the render to trigger on a specific scene instead of a view.
const sceneWithImage = 'scene_124';
$(document).on('knack-scene-render.' + sceneWithImage, function (event, view, data) {
var img = document.getElementById('animatedImage');
if (!img) {
img = document.createElement('img');
$('.kn-scene').append(img);
img.setAttribute('id', 'animatedImage');
img.src = 'https://ctrnd.s3.amazonaws.com/Lib/KTL/Media/anim/animatedPng_counting_1to5.png';
//Top left of screen, with 1px margin.
img.style.position = 'absolute';
//Top left
img.style.left = '1px'; // X-coordinate in pixels
img.style.top = '1px'; // Y-coordinate in pixels
//Centered
//img.style.left = '50%';
//img.style.top = '50%';
//img.style.transform = 'translate(-50%, -50%)';
}
})
If you uncomment the lines below //Centered, you will see the image in the dead center of the screen.
Hey Norm, I can get your sample “image source” to work, but I’ve created an animated image and can’t seem to get it to work. I used the same app you recommend from ezgif.com and if I drag the image to a blank Chrome page, it shows its animated. Mostly like the way I’m trying to place the source file and where I’m storing it.
IDK, I need to figure out how to place animated image in my on folder or cloud storage.
If you got a minute would you look at the post I posted in “help center” named (Display Rules Using Values from Connected Object’s Field). I know you can figure it out. Trying to use values of connected object field values for display rules. Knack let’s you show the connected fields but no reference them…
I’ve changed the code a bit in the post above. I attached the image to the .kn-scene div otherwise it stays there when you navigate away!
Did you manage to show your image in your app? BTW, the storage location is not relevant, any URL will do. Of course, it’s always better to create a reliable copy on your own server and use this one instead, just in case it disappears some day.
Good Morning Norm, I was able to get the “animated” image to display when using the URL than Knack provided when I posted the image a couple posts ago.
When I import the animated image into my table (images), and get the URL by inspecting table/image thru Chrome and place that URL into script, doesn’t work, only shows an image but it’s not animated.
Only when I use the above URL will the animated image work. ???
Norm, I’ve placed a blank field called “animatedImage” on a details page which is being used for the animated image in the script and I’m trying to use display rules to turn on/off the animated image and no matter what I do, the animated image stay on/displayed.
Any suggestions what be appreciated.
Update, just realized that the field animateImage does nothing due to you new script and has been removed.
Is there a way in the script that I can set rules of displaying the animated image?
I do like the new script better as far as displaying and controlling image placement. I use KTL’s “autorefresh” feature and this script doesn’t make the image refresh (flash on/off) every 5 seconds which is what I have the autofresh set to for that particular page/view.
