Back to Design / Interaction - Yahoo! TV Widgets Forum
0

Bundling images

I see in the acceptance docs that "Images The images bundled with a widget should only be those required for backgrounds, controls, branding, or the no-network state. Other images should be fetched dynamically and displayed (not stored)."

We have a weather app a number of images used as backgrounds depending on conditions (which we find out about via JSON data request). The app responds much better when the images are there than when it needs to fetch them.

How should this be handled?

by
Report Abuse
8 Replies
  • How big is the combination of all images?

    -Jeremy
    Report Abuse
    0
  • QUOTE (Jeremy Johnstone @ Dec 10 2009, 12:46 PM) <{POST_SNAPBACK}>
    How big is the combination of all images?

    -Jeremy


    The combination of all the images and views is 28 MB. Is this too large to be submitted?
    Report Abuse
    0
  • Yeah, near 30M.

    However, that's for 540 and 1080 together.

    The biggest files are the per-condition full-sidebar backgrounds.

    I'm concerned it will be a really slow UX if we need to fetch those.
    Report Abuse
    0
  • QUOTE (kpmartinatdci @ Dec 11 2009, 07:36 AM) <{POST_SNAPBACK}>
    Yeah, near 30M.

    However, that's for 540 and 1080 together.

    The biggest files are the per-condition full-sidebar backgrounds.

    I'm concerned it will be a really slow UX if we need to fetch those.

    30M is going to be way too big. I think the limit for widget size for each resolution is 4-5M.
    Report Abuse
    0
  • One thing that might help is that images can be set with a "loadingSrc" image.

    So you can do something like:
    CODE
    myImg = new KONtx.element.Image({
      loadingSrc : "images/960x540/loadingImg.png, // This would be common for all views
      src: "http://www.mysite.com/myimg.png" // Unique to this view.
    })


    That way at least the user experience can make sense while the image loads via http.

    Another thing to look at is if you can break it into multiple images and maybe use something smaller.
    Report Abuse
    0
  • QUOTE (kpmartinatdci @ Dec 11 2009, 07:36 AM) <{POST_SNAPBACK}>
    Yeah, near 30M.

    However, that's for 540 and 1080 together.

    The biggest files are the per-condition full-sidebar backgrounds.

    I'm concerned it will be a really slow UX if we need to fetch those.


    Definitely definitely won't be allowed. If memory serves, the limit is 2mb. The Yahoo! weather widget already on the platform loads these from remote for all but the most common 3-4 images, so the experience can be decent even with remote images.

    -Jeremy
    Report Abuse
    0
  • OK, we yanked those images and have them on a server. Performance is, well, sluggish on a set-top box.

    I'd like to use the Image Dictionary as described on pages 101 and 102 in the docs, and I have defined (in widget.xml) an image I'd like to use in two different views...

    <image usage="960x540.theme" src="image/960x540/defaultTheme.png"/>

    But I don't see how to actually use that image. I've tried mimicking what I see in the API's views.js, like this...

    var theThemeImgElement = widget.getImage(Theme.keys.screen + '.theme');
    this.theme = new KONtx.element.Image({
    element: theThemeImgElement
    }).appendTo(this.mainContainer);

    ...but no joy.

    And that's just trying to use the default image. I trust I should be able to use setImage() to update the src on the image in the Image Dictionary, so I don't need to keep refetching the image from the server? (There's a comment here on the forum to the effect that frequently used images are already cached, but this seem to not be true.)
    Report Abuse
    0
  • Please ignore the "Image Dictionary". It has nothing to do with what you are trying to solve and I will make sure this is handled in the documentation better.

    -Jeremy
    Report Abuse
    0
Ask a Question

Recent Posts

in Design / Interaction - Yahoo! TV Widgets