Animated gif (LOGO) on a form

WebGraphics doesn’t support the clip method…do you think it’s possible to build the “OldSchoolProgressBar” for a Xojo WebApp?

Seems like the client side WebTimer should be sufficient for fairly rapid redraws. Trying to figure it out as I think the “clip” method is just for optimizing the animation. Not sure.

Instead of timers and eating up unnecessary bandwidth and CPU, why not use a WebControlWrapper, and make an animated CSS progressbar? Then all rendering is done on the user machine, browser-side, and the web app only sends a signal that causes the animation to start, stop, increment, whatever you want! :slight_smile: There are animated CSS progressbar (and other awesome controls and CSS & HTML5 goodies) examples all over the web

https://www.google.com/search?q=css+animated+progress+bar&rlz=1CDGOYI_enUS700US700&oq=css+animated+progre&aqs=chrome.1.69i57j0l3.4176j0j9&hl=en-US&sourceid=chrome-mobile&ie=UTF-8

And you’re application will run much more smoothly by making as much rendering happen user-side as possible. This is greatly seen when 15, 20, 100 users are accessing the application simultaneously :-o Xojo web applications are a dream come true for developers, and work like magic for a few users; but the true colors and efficiency of a developers code are seen when multitudes start accessing the application. Keeping this in mind will always lead to success. Don’t sacrifice simple code for better code; even if it is a little more work… in the end, you can add that to your code arensal :slight_smile: Once you have a strong code arsenal, applications that should take months to develop will take weeks and days.

Here’s some open source web controls that need updating in my git for anyone that wants them… These have not been optimized for efficiency. :slight_smile:

http://git./mcombatti/XDSWebControls

Thanks, my initial thought was simply to use an animated gif more or less. I noted that Gerardo included the non-optimized code in some notes as well. Which probably extends somewhat better to the web. I think WebTimers are client side operations, not sure if they necessitate round trips to the hosting server or not. I think it “tries” to stay in the client environment unless the timer event makes a call to a server side operation. That said…I would prefer not to roll my own timer eating up CPU cycles and let the browser engine take car of some basic animations (CSS as you suggested). I will look over your excellent suggestions closely. Thank you. Your rapid response is most appreciated.

They do.

I suggest either using the animated gif idea or use the WebSDK to make your own control with html, CSS and JavaScript

I’ve never tried baking my own control yet…but I do need to learn that at some point. I’ve successfully used the Xojo Animation engine to manipulate controls on a page. Really I’m just trying to generate the appearance of “data flow” between two images. I thought I might be able to use the animator to make this work…with a little clever use of two identical controls and swapping in and out visibility settings… but it’s hard to coordinate this as the visibility setting doesn’t generally play really well with the animator. I think I’m just making things more difficult than they need to be.

This whole thread shows a definite love for complexity. Use a webTimer that pushes the progressBar in it’s Action event, and you will be fine.

Michael got that right… seems unecesarily complex. . What I’m actually trying to do is graphically display the “flow” of info from one place to another on a web app. Actual progress on the bar isn’t an important element. I’m trying to create a look (think flux capacitor) between elements. I thought ye old Mac OS animated progress bar has about the right look with the chasing shades of blue. Also not wanting to drag responsiveness through the mud… so…an animated gif sounds like the best option to run several in a screen concurrently. I may need 5 or so in the page at once and need to toggle them active on/off. Seems a little heavy to build 5 webhtmlviewers each holding one small animated gif. Thought I might could cheat and use something like an indeterminate state progress bar. The standard Xojo web progress bar animated smoothly but has no option for color etc…it’s a boring blue/grey. once I go to custom bars…I lose the smooth indeterminate animation I require.

Perhaps a little CSS trickery will solve my problem. :slight_smile:

Problem is that dragging an animated gif into the project will freeze it. You have to copy it with a copy file step into Resources, then create a Webfile from it, and then you will be able to use it as URL for a WebImageView.

I have picked a progressbar animated gif from http://ajaxload.info/
I used a slightly modified version of the Webfile Open example :

Add MyFile as WebFile to App.

[code] dim f as FolderItem = app.executablefile.parent.child(“Resources”).child(“ajax-loader.gif”)

If f <> Nil And f.Exists Then
// Convert the FolderItem to a WebFile
App.MyFile = WebFile.Open(f) // MyFile is a property on the App object
ImageView1.url = App.MyFile.URL
End If[/code]

There are quantities of creative animated gif progressbars on the web. I just picked the first one I found.

Careful Michel, I don’t want to have to put you on my payroll :stuck_out_tongue: I did find that moving the gif into the project would “freeze it” and noted that you’ve previously explained that behavior. – so I tried just saving the gif to disk… then opening the file in a browser to grab the URL file://…etc. – that didn’t work. So I tried opening the file as a Webfile and read the URL property and assign it to a WebHTMLViewer…and that didn’t work (unless I did something wrong). I tried using the browser page source to create an HTML wrapper and assign the HTML file to an a webHTMLViewer…and that didn’t work. I think I recall you saying…that"something" has to “serve” up the URL result. So I’m thinking…ugh…I have to run another web server just to serve up the gifs to my Xojo stand alone server. I’ve been trying to use a WebHTMLViewer – not a WebImageView. I will make the adjustment and see if using the WebImageView is what I’ve been missing.

Yup, That did it. I needed to assign the MyFile.URL to a WebImageView, not a WebHTMLViewer. This definitely works…and with minimal fuss! I tried all kinds of “solutions” only to get blocked at one place or another. I probably know a dozen ways that sound logical but fail for one reason or another. THANK YOU MICHEL!

:slight_smile: