Working with Image Providers

Topics

• Creating an Image Provider
• Using an Image Provider in a VisualTrack
• Specifying the Source to an Asset
• Using remote content via HTTP

An Image Provider generates visual content for tracks. They are grouped into single-frame image providers and imagesequence provider types. For example, an image provider of type stillimage generates a single image. When used as content for a VisualTrack the same image is repeated.

Image provider of type video generate image sequences. Such image providers will generate a new image for each new frame as the parent container progresses in time.

The content of image providers are cached, unless they contain dynamically generated. The renderer tries to minimize expensive operations, such as decoding a video, by caching the decoded frames.

Creating an Image Provider

The following example demonstrates how to create a simple image provider of type emptyimage, filled with a red solid color:

var ip = new sdl.ImageProvider({
    type: 'emptyimage'
    width: 200,
    height: 200,
    color: {
        red: 255,
        alpha: 255
    }
})

Using an Image Provider in a VisualTrack

When you have created an image provider you can use it as a source of content in a VisualTrack:

track.content = ip

Alternatively, you can create the image provider directly in the track:

var track = new sdl.VisualTrack({
    content: {
        type: 'emptyimage'
        width: 200,
        height: 200,
        color: {
            red: 255,
            alpha: 255
        }
    }
})

Image Provider Types

The most common ImageProvide are stillimage, video and textsimple. The video ImageProvider can handle all image and video types, and can handle remote image and video sources.

Type	Loads	Can load via HTTP?
stillimage	JPG, PNG, TIF Images	no
http	JPG, PNG, TIF Images	yes (HTTP/HTTPS only)
video	JPG, PNG, TIF Images, All Video types, ZIP files	yes

Specifying the Source to an Asset

The ImageProvider class has a property called source which is of type FileLocation. To specify a local asset in your project's userdata/ directory, you set the path property. To learn more about FileLocations, see the SDL Reference.

ip.source.path = "userdata/mycontent.png"

Using remote content via HTTP

To load content via HTTP and to use it in an image provider, specify a full HTTP URL in the path property of a FileLocation. To learn how to load variable content via HTTP see Working with Variables.

ip.source.path = "http://some.example.com/images/mycontent.png"