Managing Fonts & Resources

App Resources

The following table presents some common app assets and where they should be located within webOS TV apps. Do not count on the TV to have an Internet connection for the core functionality of your app (unless, of course, your app relies on a web-based service for functionality). Keep assets that need to be loaded frequently local to the app (packaged with the application) rather than require them to be loaded from the Internet.

Resource type Recommended location Do's and Don'ts
Image Included with packaged app. For Enyo Bootplate apps, they should be placed into /assets. DO use image compression tools to reduce size and decrease load times.
Audio Usually included with packaged app. For large, infrequently access audio, you can place these online. For Enyo Bootplate apps, they should be placed into /assets. DO pick a bit rate that produces acceptable audio quality.
Video Remote. Unless small or required for app functionality, video resources should be loaded as needed. DO pre-process video to the appropriate resolution and bit rate required for use within your app.
Font Included with packaged app. For Enyo Bootplate apps, place fonts into /assets. DO make sure fonts are properly licensed for distribution.
Do use system fonts when appropriate.
Text Included with packaged app. For Enyo Bootplate apps, place into /assets. DO place small amounts of text directly into your app source.
DO load larger files as needed by performing local Ajax requests.

Packaging Assets

Assets you use in your app should be packaged with your application for deployment to the TV. For Enyo projects, place assets in the assets directory. For other projects, choose a directory within your application and place assets there. You can create sub-directories to group assets as needed.

Image, Audio and Video Assets

Image, audio and video assets are accessed relative to the location of the index.html file within your package structure, except in the case of CSS files. CSS assets are referenced relative to the location of the CSS file.

 

For example, a typical project directory looks like this: 

empty-project.png

 

From the index.html file, refer to an image in the assets directory as follows:

<body style='background-image: url("assets/my_image.png")'>

 

The same path applies to JavaScript files, regardless of where they are in your project:

myImage.setSrc("assets/my_image.png");

 

From a css file located in source/css:

.my-background {
	background-image: url("../../assets/my_image.png");
}

Font Assets

Font assets can be packaged with your app. Fonts are also referred to relative to the location of index.html. The following sample specifies a font resource for h2 tags:

@font-face {
	font-family: AlexBrush;
	src: url('assets/AlexBrush-regular.ttf');
}
h2 {
	font-family: AlexBrush;
}

Text Assets

Use Ajax to load text assets. Refer to text assets relative to the location of index.html. Load a JSON file with Enyo like this:

fetchPackageData: function() {
	var request = enyo.Ajax({
		url: "assets/data.json"
	});
	request.response(this, function(inSender, inResponse) {
		this.jsonData = inResponse;
	});
	request.go();
}

 

Navigation