November 9, 2010 
With the advent of the Web Viewer technology being added to FileMaker, developers started to employ these useful containers for all sorts of things. One of the obvious things is to add an animated GIF to a layout to give users an indication that something is happening when a long script is running. There is a technique that allows the GIF file to be stored in a Base64 text format in a FileMaker text field. The graphic can then function whether you are connected to the Internet or not.
This technique has been kicking around for a while but I haven’t seen anyone go through it step by step, including how to add new graphics.
Demo File
Download the Demo File here.
I have built a small demo file to demonstrate how this works. There are a couple of dozen icons already in the set, but you can add more if you want. The steps to add a new graphic are:
1) Click on the Icon Source button to open a web page with some open source animated GIFs. These are from a web site called mentalized.net When you see something you like on this web page, or some other source, right click on the image and copy the Source Link to the file.
2) Back in FileMaker, click on the the ‘Convert Image to Base64’ button. This will open a web page called www.greywyvern.com. They have helpfully provided a service that converts an image to it’s Base64 text equivalent.
Open Source Activity Indicators
Find an icon that you think will be suitable to your solution.
Right Click on the Image to copy the Image Address
This screenshot is from Safari on a Mac, your web browser’s contextual menu may look a little different, but there should be an option to copy the image’s address.
Now click the ‘Convert Image to Base64’ button
Bottom Right Corner. This will launch the greywyvern.com web site in your browser.
Base64 Encoder/Translator
Paste the URL that you copied in the previous step into the ‘Encode file from URL’ field.
Pasted Link
Then click ‘Submit’
Base64 Encoded version of your selected GIF is now in the second field
Copy the text
Click into the field:
Mac: Command A (Select All) then Command C (Copy)
Windows: Control A (Select All), then Control C (Copy)
Back in FileMaker
1) Create a New record
2) then paste (Command or Control V) the Base64 text into the Base64 field. You can also enter a name for the indicator, and perhaps paste the source URL for future reference, in case you are looking for other indicator graphics.
3) Your indicator should immediately show up in the Web Viewer below the text field.
Adjusting the Image Size
By default, if you don’t enter anything in the GIFWidth and GIFHeight fields, the graphic will be it’s default size. If you want to tweak it smaller or larger, you can do this by entering numbers in these two fields.
One Script, One Web Viewer Paste into your Solution
It is great having all these possibilities for progress indicators, but ultimately, you probably will just use one or two of these graphics in your solution. What I explain next is a method of creating a single script and web viewer to paste into your solutions to make it easy to integrate.
Select your Chosen Graphic
Copy and Paste the Base64 field info into the Set Variable $Base64 script. If you want to resize the graphic, enter values into the $GifWidth and $GifHeight variables.
Save the script.
The Set Global Variable Script Step
Notice that the $Base64 variable is being concatenated into a longer URL to create a global variable to use in the web viewer.
Create your Progress Layout
Pick a layout to display the animated icon. Create a Web Viewer
Define the Web Viewer
Turn off all the options for interaction.
Enter the Web Address as “data:text/html:,”& $$Prog_Icon_for_Webviewer
Add the Script to your Loop
I have a demo loop that doesn’t do anything except delay things so you can view the animated icon on the layout.
Remember to call the script that sets the Global Variable that feeds the Web Viewer.
Pause to Refresh the Screen
You may need to add a Pause/Resume Script step to allow the screen to refresh. You could set this to refresh every Nth repetition.
Progress Indicator at work
You can’t see it animated in this screen shot, but just pretend it is pulsing along sideways, giving users the necessary reassurance that the program is working away and will eventually come back to their control.
Having made adjustments to the script called “Set the Progress Icon to a Global Variable”, you can now paste the script, along with the Web Viewer as defined into any solution and it should just work. Remember to call the script early on in any routines that will display the progress indicator, so that the Global field is set and the icon can display properly in the web viewer.
FileMaker Versions This Technique Will Work In
I tested this technique with FileMaker 9, 10 and 11. In theory it could work all the way back to FileMaker 8.5 when FileMaker Inc., introduced the Web Viewer, but I am having trouble remembering what version we got Global Variables in. FileMaker 8.5 crashes on my computer now, so I could not test it.
Related Articles:
Where Am I? Using FileMaker Go 12 to track your Location
Making FileMaker interact with Google Translate
Creating Google Cluster Maps from FileMaker
HomeBase Software 
A reader emailed me directly to say:
“I’ve noticed that all animated GIFs in Filemaker are bordered with a 10 pixels blank frame inside the web viewer. Unfortunately, I have to work with black backgrounds and I’m still looking how to hide or delete this blank border.”
I believe that the pixel border you are seeing is one of the limitations of using animated GIFs. They don’t support an alpha layer the way PNG files do. PNG files don’t support animations, so you might be stuck.
You could try creating your own animated GIF with the same colour background as you are employing, then go to this link to convert it to Base64
http://www.greywyvern.com/code/php/binary2base64
Apparently there is a move afoot to make PNG files animate-able (APNG) but it doesn’t seem to work in most of the major browsers.
I found an SVG example that might work, though implementing it might be a challenge.
http://www.treebuilder.de/default.asp?file=313823.xml
Another approach is to employ the graphing capabilities in FM 11 if you are using that. I did a blog posting on that as well, here:
https://homebasesoftware.wordpress.com/2010/06/13/processing-indicator-in-filemaker-11/
Hope one of these suggestions helps you solve the issue.
Doug
You can change the Web Address calculation for the web viewer to include a little CSS to remove the blank 10 pixel frame around the image.
“data:text/html;,” & Icons::Base64Calc & “”
Nice article. Note to get rid of web viewer borders on a windows machine you can put the image inside some html:
“data:text/html,
”
&
“”
Readers may be interested in the following related article that uses a similar technique. http://www.cimbura.com/tech/wordpresstech/index.php/2011/01/19/awesome-progress-bar-for-filemaker/
hi doug,
thanks for the very useful step by step instructions about how to implement this and for providing all the related links. i am in the process of trying to implement this type of functionality right now but i am running into a few snags. i am trying to use the progress indicator on a “frozen” window while going to other layouts to create records and set fields. but for some reason, as soon as any “go to layout” script step executes, the “freeze window” aborts and i am taken away from the progress layout. will it not work in this manner? does freeze window not persist for “go to layout” calls? any thoughts would be greatly appreciated.
thanks,
john h.
What if you make your Progress Indicator ‘frozen window’ layout have the same base table as the layout where you are creating records and setting fields? That way, you could go to the progress indicator layout, create a record, set some fields and then when all the actions are complete, go to the final layout to display the new records.
Another approach might be to place a tab panel on the final layout, call the Go to Object script step to display the progress indicator on one tab panel, execute the rest of your script and then finally use the Go to Object script step (name your other tab panel so you can reference it).
hi doug,
thanks.. that was quick! i will try basing the progress layout on the same table as the “target” layout. although, in this particular script i don’t think i can use that method because it is generating related records for a contact in several tables (phone numbers, addresses, etc) so it is going to layouts based on several different tables.
i also like the tab panel idea. i guess i could adapt either of the methods you suggest by creating an identical progress layout on for each table needed. so the window would literally be frozen as we jump from table to table, but it would look frozen… i think?
can i trouble you with another question? i have another situation where i would like to use the progress indicator and that is when i go to my sales tax layout, if i haven’t recently been there, it takes several seconds for anything to happen (i think because there are numerous summary fields on the layout that need to generate before it will actually go to the layout or display the layout). is there a way to implement this so that the progress indicator will show for as long as needed and then somehow disappear once the fields have generated? in other words, if it is not being stopped by a script when your steps are finished, but rather you are waiting on filemaker to execute something, how do you know when to stop it and then actually tell it to do so?
thanks again for the other ideas in the meantime!
john h.
How about putting portals to the other related tables on the layout and create the records through portals?
An approach might be to use a loop that looks for a specific value to be filled in. When I do this with a web viewer, and am waiting for the web page to load and I don’t want anything to happen until it has some content, I do something like this:
LoopSet Variable [$MyWebViewerContent; GetLayoutObjectAttribute("MyWebViewer"; "content")]
Exit Loop If (not IsEmpty($MyWebViewerContent)
End Loop
Perform Script [Do whatever comes next]
Perhaps you could substitute a Summary Field for the Web Viewer content.
LoopSet Variable [$MySummaryFieldContent; Table::SummaryField]
Exit Loop If (not IsEmpty($MySummaryFieldContent)
End Loop
Perform Script [Hide the Progress Indicator]
‘not IsEmpty’ is FileMaker’s way of saying that the field or variable has some content.
hi doug,
i have called it quits for tonight but i will give it a try again tomorrow. i didn’t realize that summary fields were empty like that. i always assumed that they contained the last value that had been calculated until they were triggered to calculate/display the current value. i think your suggestion sounds like a promising one. i really appreciate the extra help! i’ll let you know what happens… if i don’t have any news to report before then…. happy new year!
john h.
hey doug,
happy new year… i have tried experimenting with this and have had mixed success. i was able in one implementation to get the freeze window to work properly, but when the window was frozen, as soon as i enter the looping part of the script, the web viewer itself (or perhaps i should say, the graphic that is used to indicate progress) stalls for the remainder of the script. in my case i have a clock-like spinning graphic with a tail that fades. it is still visible, but it stops rotating. i tried putting in the pause/resume step to refresh the window, but then, as you would expect, it unfreezes the window. i also tried creating a “progress” layout based on the same table in which i was creating/editing records and i have managed to get that to work (utilizing the same brief pause/resume step within the loop… otherwise it stalls too). that works pretty well… there is some flashing/flickering or less than smooth spinning of the graphic, but at least it is giving the desired feedback to the user! i’ll continue to tinker… thanks again for all the help.
john h.