Animated GIF for Control Page

Posted on
Sun Oct 09, 2016 5:37 am
DaveL17 offline
User avatar
Posts: 6404
Joined: Aug 20, 2013
Location: Chicago, IL, USA

Animated GIF for Control Page

I was "taking a break" last night and was playing around with the idea of how to create an animated GIF to display information on a control page. (Thanks to Terry for the tip on ImageMagick. :D ) Obviously, replace the variable 'text_list' with whatever Indigo hooks you want. The underlying bar image was created elsewhere and the image size is based off that.

The result:
bar_animation.gif
bar_animation.gif (70.3 KiB) Viewed 6936 times


Download the script file on GitHub.

[ETA: moved script to GitHub]

I came here to drink milk and kick ass....and I've just finished my milk.

[My Plugins] - [My Forums]

Posted on
Sun Oct 09, 2016 6:29 am
roussell offline
User avatar
Posts: 1108
Joined: Aug 18, 2008
Location: Alabama

Re: Animated GIF for Control Page

That's cool! I didn't even realize that control pages could display animated gifs!

Terry

Posted on
Sun Oct 09, 2016 6:48 am
durosity offline
User avatar
Posts: 4158
Joined: May 10, 2012
Location: Newcastle Upon Tyne, Ye Ol' England.

Re: Animated GIF for Control Page

Oh great, time for me to redesign again!!!

Computer says no.

Posted on
Sun Oct 09, 2016 6:55 am
DaveL17 offline
User avatar
Posts: 6404
Joined: Aug 20, 2013
Location: Chicago, IL, USA

Re: Animated GIF for Control Page

It works great. I do this with my local weather radar image too (it's an animated PNG). One note is that this works for control pages that are displayed in a browser, but not in Indigo Touch (Touch displays only the first frame of the image).

I still need to figure out how to get Indigo to be able to see that ImageMagick is installed (since it was installed with MacPorts, Indigo can't see it). If you happen to know what changes need to be made to .bashrc (or whatever) to get Indigo to see it, please share!

ETA: Nevermind. Regarding Indigo "visibility", all that's necessary is to add the path to the ImageMagick commands. In my case, for example, instead of this:
Code: Select all
convert...

use this:
Code: Select all
/opt/local/bin/convert...

To find the path to ImageMagick in Terminal, use:
Code: Select all
which convert

I came here to drink milk and kick ass....and I've just finished my milk.

[My Plugins] - [My Forums]

Posted on
Sun Oct 09, 2016 6:55 am
DaveL17 offline
User avatar
Posts: 6404
Joined: Aug 20, 2013
Location: Chicago, IL, USA

Re: Animated GIF for Control Page

durosity wrote:
Oh great, time for me to redesign again!!!

Just move straight to "Acceptance". You'll save some time.

I came here to drink milk and kick ass....and I've just finished my milk.

[My Plugins] - [My Forums]

Posted on
Sun Oct 09, 2016 6:59 am
durosity offline
User avatar
Posts: 4158
Joined: May 10, 2012
Location: Newcastle Upon Tyne, Ye Ol' England.

Re: Animated GIF for Control Page

I have already. Though I'm not doing much until i7 ships. So only 2-3 years wait!

Computer says no.

Posted on
Tue Oct 11, 2016 6:21 am
DaveL17 offline
User avatar
Posts: 6404
Joined: Aug 20, 2013
Location: Chicago, IL, USA

Re: Animated GIF for Control Page

Here's one idea...

bar_animation.gif
bar_animation.gif (89.75 KiB) Viewed 6749 times

I came here to drink milk and kick ass....and I've just finished my milk.

[My Plugins] - [My Forums]

Posted on
Thu Apr 30, 2020 3:45 pm
mgolden50 offline
User avatar
Posts: 229
Joined: Jan 29, 2007
Location: Chandler, AZ

Re: Animated GIF for Control Page

Hi Dave,

Have you come up with a way to use this capability to horizontally scroll a long weather description horizontally (ala: ticker tape style)?

Posted on
Thu Apr 30, 2020 5:38 pm
DaveL17 offline
User avatar
Posts: 6404
Joined: Aug 20, 2013
Location: Chicago, IL, USA

Re: Animated GIF for Control Page

I'm not sure I've ever tried. It's been a while since I've looked at Imagemagick but as I recall, the output is just a series of still images played in an animated gif. So you'd have to construct each image with the text shifted.

Code: Select all
his is some text.  T
is is some text.  Th
s is some text.  Thi
 is some text.  This
is some text.  This
s some text.  This i
 some text.  This is
some text.  This is
ome text.  This is s
me text.  This is so
e text.  This is som
 text.  This is some
text.  This is some
ext.  This is some t
xt.  This is some te
t.  This is some tex
.  This is some text
  This is some text.
 This is some text.
This is some text. 

Here's the code to generate the looped text:
Code: Select all
t = "This is some text.  "

for _ in range(len(t)):
    t = t[1:] + t[0]
    print(t)

I came here to drink milk and kick ass....and I've just finished my milk.

[My Plugins] - [My Forums]

Posted on
Thu Apr 30, 2020 6:06 pm
mgolden50 offline
User avatar
Posts: 229
Joined: Jan 29, 2007
Location: Chandler, AZ

Re: Animated GIF for Control Page

Thanks Dave,

I think I'll scroll over and give this a try :?

Posted on
Thu Apr 30, 2020 6:14 pm
DaveL17 offline
User avatar
Posts: 6404
Joined: Aug 20, 2013
Location: Chicago, IL, USA

Re: Animated GIF for Control Page

If you land on something that you like, please consider sharing it with the class. :D

Good luck!

I came here to drink milk and kick ass....and I've just finished my milk.

[My Plugins] - [My Forums]

Posted on
Thu Jun 04, 2020 8:31 am
mgolden50 offline
User avatar
Posts: 229
Joined: Jan 29, 2007
Location: Chandler, AZ

Re: Animated GIF for Control Page

Well, professor Dave, for the class here is what I've come up with.
The script below is also more of a proof of concept or a how-to for creating Control Pages
with horizontally scrolling text animations.
This prototype script has its seeds in your earlier contributions. (And it could certainly
benefit from a tightening up by better Python programmers than me--such as yourself.)
However, any Python programmer should find it easy to adapt it for use with Indigo to scroll
text from Indigo variables that contain long strings that are imported from sources like the NOAA Plus
plugin or any other source.

Note that this script requires ImageMagick to be installed on the server machine.
ImageMagick is not a part of the base Python installation, so you'll need to install it
to a place that Indigo can see. (I used Mac Ports to import it.)

The main issue that remains to be solved is to programatically assemble the .png images
created by this script into apng animations rather than GIF animations, that ImaggeMagick
creates, by installing and using the APNGASM package available on GitHub. This is
important because Gif animations do not run on Indigo control pages but apng animations
do and will display on Control Pages that are displayed on Safari.

The current version of this script attached here only creates a GIF animation;. but if
converted to to an to an apng animation using a free web service like
https://ezgif.com/gif-to-apng, itnwill display correctly on a Safari Control Page.
But, of course, if the apng file is not created programatically, the text string to be
scrolled by the animation cannot be updated periodically by a simple update of a text
variable's content. (I used Mac Ports to install the APNGASGM module from Github which
placed it in the same directory as ImageMagick)

I currently lack the Python sub-process programming skills to properly configure the
CLI calls to correctly invoke the required APNGASM commands and attributes to replace
those now directed to the ImageMagick module. Any assistance would be much appreciated.

The APNGASM --Help output looks like this:
APNG Assembler v3.1.6 (frontend v3.1.6)
===============================================================================
ALLOWED OPTIONS
-------------------------------------------------------------------------------
Information Options:
-v [ --version ] Display the version.
-h [ --help ] View detailed help.
Main Options:
-d [ --delay ] arg (=100) Default frame delay [in miliseconds or
fractions of a second], default is 100.
-l [ --loops ] arg (=0) Number of loops. Use 0 [the default]
for infinite loops.
-f [ --file ] arg Loads an XML or JSON animation
directive file.
-s [ --skip ] Skip the first frame. When animation is
not supported the first frame is shown.
-D [ --disassemble ] arg Specifies Disassemble file (Then, can
NOT specify other files)
-o [ --output ] arg Specifies Output File (Then, 1st
argument is NOT output-file)
-j [ --json ] [=arg(=animation.json)] Specifies output json file.
-x [ --xml ] [=arg(=animation.xml)] Specifies output xml file.
Overwrite Options:
-n [ --nooverwrite ] exit when overwrite.
-i [ --interactive ] prompt before overwrite. (default)
-F [ --force ] always overwrites existing file.
EXAMPLE
-------------------------------------------------------------------------------
Assemble an APNG:
apngasm -o outfile.png frame1.png frame2.png frame3.png [options]
apngasm -o outfile.png frame*.png [options]
Assemble an APNG with specific frame delays in miliseconds:
apngasm -o outfile.png frame1.png 200 frame2.png 100 [options]
Assemble an APNG with specific frame delays in fractions of a second:
apngasm -o outfile.png frame1.png 1:2 frame2.png 3:5 [options]
Disassemble an APNG file into frames and JSON/XML directive files:
apngasm -o output_dir -D apng_file.png
-------------------------------------------------------------------------------
Thanks for your support!
Mike G.

[code]#! /usr/bin/env python2.7
# -*- coding: utf-8 -*-
import os
"""
A prototype script for creating a "ticker tape" style animated, horizontally scrolling
long text string, for use on Indigo control pages based on the ImageMagick library.
"""

import subprocess
## Where the animated GIF image will reside. Spaces must be escaped.
work_fldr = "/Library/Application\ Support/Perceptive\ Automation/Indigo\ 7.4/IndigoWebServer/images/controls/static/"
## This variable limits the character width of the "ticker tape" on the Control Page
## The pixel width of the initial .png frame image needs to be sufficient to accomodate
## the specified number of characters at the point size specified in the imageMagick
## setup
DisplayFieldLength = 29
## When finally interrated with Indigo, the line below will point to and Indigo varible.
char_List = " Today: Sunny, with a high near 108. West wind 5 to 10 mph. Tonight: Mostly clear, with a low around 78. West wind around 5 mph becoming calm in the evening. "
## The lines following convert the long string into a list of strings that are
## within the specified width and successively moved one character to the left
list_Of_Chars = []
list_Of_Display_FrameStrings = []
t = char_List
for i in range(len(t)):
t = t[1:] + t[0]
eachDisplayFrameCharList = t[0:DisplayFieldLength]
eachDisplayrameString = "".join(eachDisplayFrameCharList)
## This is the final list of Display Field Strigs
list_Of_Display_FrameStrings.append(eachDisplayrameString)
## Now comes the magic of ImageMagick which converts each display field string into
## a graphic image and combines it with a frame image copied from an initial frame
## template. the new .png frames are then given a sequential number and saved to be
## used by ImageMagic to create the final Gif animation file.
## First part of the output command string.

## The first ImageMagick command specifies the delay time that each animation frame
## waits before the next image is displayed and sets size in pixels of the text image
## within the frame image.
output_cmd = "/opt/local/bin/convert -delay 15 -size 200x27 "

## Next iterate through the items in the list_Of_Display_FrameStrings to create
## sequential frame images based on each sequential display string image.
## those images are saved as enumerated files that will be used to build the animation.
for num in range(1, len(list_Of_Display_FrameStrings) + 1):
## Build each frame image setting the font, font color, t texpoint size, and the
## reference to the text to be added to the frame image.
proc = subprocess.Popen("/opt/local/bin/convert {0}bar.png -font arial -fill Goldenrod -pointsize 70 -gravity center -annotate +10+17 '{1}' "
"{0}bar_frame{2}.png".format(work_fldr, list_Of_Display_FrameStrings[num - 1], num), stdout=subprocess.PIPE, stderr=subprocess.PIPE, shell=True)
## For debugging, you can look at the shell's return.
#print(proc.communicate())
## Add command to the output command string to save each new frame image.
output_cmd += "-dispose previous -page +0+0 {0}bar_frame{1}.png ".format(work_fldr, num)
## The last part of the output command string
output_cmd += "-loop 0 {0}bar_animation.gif".format(work_fldr)
## Next to last call ImageMagick to actually build the GIF animation usinge the command
## composed in the preceding line
proc1 = subprocess.Popen(output_cmd, stdout=subprocess.PIPE, stderr=subprocess.PIPE, shell=True)

## Finally, emove all of the .png files that were used to create the animaton--since next animated strings may have different file counts
fileCount = len(list_Of_Display_FrameStrings)
for n in range (0,fileCount):
# print((work_fldr+"bar_frame"+str(n)+".png"))
try:
cmd_rm = "rm -rf "+work_fldr+"bar_frame"+str(n)+".png"
os.system(cmd_rm)
#os.remove ("/Library/Application\ Support/Perceptive\ Automation/Indigo\ 7.4/IndigoWebServer/images/controls/static/bar_frame1.png")
except OSError as err:
print("rm -rf "+work_fldr+"bar_frame"+str(n)+".png")
[/code]
Attachments
bar_animation.png
bar_animation.png (187.87 KiB) Viewed 5131 times

Posted on
Thu Jun 04, 2020 9:11 am
DaveL17 offline
User avatar
Posts: 6404
Joined: Aug 20, 2013
Location: Chicago, IL, USA

Re: Animated GIF for Control Page

Neat! I noticed that there was an extra double quote at the beginning of your doctoring, so I took that out. Not sure why your code isn't showing as formatted code--there's got to be something confusing phpbb-- but I also noticed that it's missing the necessary indents (try block, for loops, etc.)

I came here to drink milk and kick ass....and I've just finished my milk.

[My Plugins] - [My Forums]

Posted on
Thu Jun 04, 2020 9:22 am
mgolden50 offline
User avatar
Posts: 229
Joined: Jan 29, 2007
Location: Chandler, AZ

Re: Animated GIF for Control Page

Don't know either why the code is not displaying as code.

I also noticed that there something flaky about when the scrolled text gets to the words that are the end of the display field width..

But the real thing I could use some help with is the use of the APNGASM module for creating animated APNG files.

Posted on
Thu Jun 04, 2020 9:28 am
mgolden50 offline
User avatar
Posts: 229
Joined: Jan 29, 2007
Location: Chandler, AZ

Re: Animated GIF for Control Page

Had my code displayed as code the indents would have shown up.
I was two lazy to add the try blocks until I get closer to a finished product.

Thanks,

Mike

Who is online

Users browsing this forum: No registered users and 1 guest