Dynamic Images

image

 

Did you know that you don’t have to load all your images into an App Inventor app? While you shouldn’t use this technique for every image because it relies on an active data connection, you can create some dynamic content if applied just right. For example, a link to a moon phase image that changes, will automatically reflect the current moon phase every time the app opens.

All you need to do is host your images somewhere and use the web address to set the image of a component. Just to make sure your app doesn’t run into security issues, you should use a service that provides an SSL connection to your files. Google Picasa Web Albums is a great choice for this. Another very popular service which does one thing and one thing only, it takes an image and returns an HTTPS url to that image. It’s called SSLpic and can be found at http://www.sslpic.com/. SSLpic has some size requirements so it’s not as friendly as Picasa, but it’s an option and it’s always good to have options. I personally love everything Google, so I stick with Picasa Web Albums, plus I can manage all my photos at the same time, so everything is done centrally with one tool.

To demonstrate this, I am using the following images.

iamhubQRiconlogo

The images have the following URLs.

  • http://taiic.com/mtzcloud/iamhubQR.png
  • http://taiic.com/mtzcloud/icon.png
  • http://taiic.com/mtzcloud/logo.png

I created a new project in AI that will just have the components I need to show how this works. There is no actual app. However, if you do use this, make sure that the screen initialize event sets the images when the app starts.

image

I added the following components.

image

  • Image
  • Button
  • Canvas
    • ImageSprite
  • Canvas

In the Blocks Editor, I set the image for each component using the following blocks.

  • Image1.Picture
  • Button1.Image
  • ImageSprite1.Picture
  • Canvas2.BackgroundImage

Make sure that you use the full URL, including the http or https, or it will not work. My final blocks look like this.

image

I can quickly test this by right-clicking the block and clicking “Do It”

And I get the following.

image

And finally, I add these to the “Screen1.Initialize” event, to make sure the images are loaded when the app starts.

image

There you go, another fun way to spice up your apps with Google App Inventor.

Thinking Outside The Box

Here is a little suggestion for a fun way to make your images change automatically every time the app starts.

Lets take what I explained above and remove everything except “Image1”.

  1. Now go to “Built-In” in the Blocks Editor and drag out variable definition, and give it a name. I called mine “imageList”.
  2. Add “set Image1.Picture to”, to the Screen1.Initialize event.
  3. Drag out “call make a list”, and plug it into the definition you created in step 1.
  4. Plug each URL text block into the “call make a list” block.
  5. Drag out “call pick random item list” from “Lists”, under “Built-In” and plug it into “set Image1.Picture to”.
  6. Go to “My Blocks” –> “My Definitions”, drag out “global imageList” and plug it into “call pick random item list”.

The final blocks should look like this.

image

Once again, you can quickly test this if you right-click “Image1.Picture” and “Do It”. Do I need to link that video again? Smile with tongue out

Each time you do the above step, it will choose a random URL from the list and load it as the image. Pretty cool right?

So how can you take this further? Here are a few ideas that will be fun to work on.

  1. Create a slide show. You can keep changing the images and the slide show will be different every time.
    • Hint: File names need to be the same and you need to use a timer to change the image at a given interval
  2. Make the slide show dynamic. Use TWDB, to load the list from the db, which you can update with URLs
  3. Let  users create their own slide shows.
    • Hint: You’ll need a tag to identify the user so that each user has his/her own table row and does not overwrite other users.

See if you can come up with some other ways to use this technique. Comment below and tell me what you think about this. Do you think it’s useful? Have you already done something like this? Do you have any other ideas about using this in an app?

Don’t forget to join our community on facebook. Just hit the Like in the left sidebar (towards the top of the page), this button

Or directly on our fb page at http://www.facebook.com/pages/tAIICcom/116243311786911

You may also like...

  • Ed Joybells

    What happens if your not on-line?

  • Nice write up. It’ a great feature. I use it in my app AVO*, which I just released today. The app, which is a very, very niche geophysics tool, accepts some rock properties, computes some coefficients, then uses these to build a very long URL like this one for the Google Charts API and display a chart. Google Charts is an awesome service because there’s no way I could have dynamically built a convincing graphic any other way. When I’m on WiFi the whole process takes about half a second.

    Thanks for posting the workaround for checking to see if there’s a data connection. I will definitely be using that in my next release. Brilliant idea!