What’s overscan and why do I have to deal with it?
by @ryancanullaOverscan is extra image area around the four edges of a video image that may not be seen reliably by the viewer. It exists because television sets in the 1930s through 1970s were highly variable in how the video image was framed within the cathode ray tube (CRT).
source: Wikipedia
Simply put, overscan is about 5% (this will vary depending on TV size/manufacturer) of your content that will be cropped when put on a tv screen. If you crop an image and blow it up to the original size, you would be overscanning. If you are familiar with print, this process is similar to “bleeding”. Consider the example below.
The reason overscan exists is because of older CRT TV’s where the tube couldn’t produce quality images on the edge of the tube. In order to effectively deal with poor quality on the edges of tubes, TV manufacturers made tubes larger and hid the part that was blurry behind the TV casing, essentially cropping a portion of the image.
Look at the black bar of meta-data at the top of the screen
Check out the green line on the left of the screen.
Okay, I know what you’re saying, “So what; who still uses CRT anyway? Why am I still being affected by this?”, but the short of it is that over the years broadcast companies have been using this “cropped” area to send meta information over analog signals. Also, since they expect it to be cropped, there is less time polishing the content available on the edges of the screen. This is the reason that even modern TV’s overscan.
Tell me litl makes it easier?
We sure do! Now that you know all about overscan, know that we handle everything for you so you don’t need to actually do anything different! Continue to use liquid layouts (based off percentages) and set view & view sizes by listening for the ViewChangeEvent on your litl service. In that event you will find the full viewing area for your TV screen.
Check out this sample code.
ViewManager.as
package com.litl.overscan
{
import com.litl.sdk.enum.View;
import com.litl.sdk.message.InitializeMessage;
import com.litl.sdk.message.ViewChangeMessage;
import com.litl.sdk.service.LitlService;
import flash.display.Sprite;
import flash.utils.Dictionary;
public class LitlViewManager extends Sprite
{
private var _service:LitlService;
private var _currentViewState:String;
protected var _view:Sprite;
protected var controller:GameController = GameController.getInstance();
protected var currentView:ViewBase;
protected var views:Dictionary;
public function LitlViewManager(view:Sprite) {
_view = view;
views = new Dictionary();
}
protected function setView(e:ViewChangeMessage):void {
// Remove the current view from the display list.
if (currentView && contains(currentView)) {
removeChild(currentView);
}
if (views == null)
views = new Dictionary(false);
currentView = views[e.view] as ViewBase;
switch (e.view) {
default:
throw new Error("Unknown view state");
break;
case View.CHANNEL:
if (currentView == null)
currentView = new ChannelView(_service);
_currentViewState = View.CHANNEL;
break;
case View.FOCUS:
if (currentView == null)
currentView = new ChannelView(_service);
_currentViewState = View.CHANNEL;
break;
case View.CARD:
if (currentView == null)
currentView = new CardView();
_currentViewState = View.CARD;
break;
}
views[e.view] = currentView;
controller.currentView = currentView;
// IMPORTANT -- This is where we update the size of the display object
// based on the dimensions returned by our ViewChangeEvent
// NOTE -- If you extend ViewBase from our SDK rather than sprite, you will have
// access to the setSize() method
currentView.setSize(e.width, e.height);
if (!contains(currentView))
addChild(currentView);
}
public function set service(value:LitlService):void {
_service = value;
_service.addEventListener(ViewChangeMessage.VIEW_CHANGE, setView);
}
public function get currentViewState():String {
return _currentViewState;
}
}
}
ChannelView.as
package com.litl.marbelmayhem.views
{
import flash.display.Shape;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.events.Event;
import flash.net.URLRequest;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
public class Scoreboard extends ViewBase
{
private var background:Sprite;
private var timeBG:Bitmap;
private var logo:Bitmap;
private var timeDisplay:TextField;
public function Scoreboard(e:ViewBase) {
super();
_view = e;
init();
}
private function init():void {
createChildren();
}
// NOTE -- This is where we instantiate our objects and add them to memory
private function createChildren():void {
background = new Sprite();
background.graphics.beginFill(0x333333);
background.graphics.drawRect(0, 0, 1280, 800 * .15);
addChild(background);
logo = gameAssets.logoBitmap;
logo.cacheAsBitmap = true;
addChild(logo);
timeBG = gameAssets.timeBGBitmap;
timeBG.cacheAsBitmap = true;
addChild(timeBG);
var timeFormat:TextFormat = new TextFormat();
timeFormat.font = "Calibri";
timeFormat.size = 34;
timeFormat.color = 0x000000;
timeDisplay = new TextField();
timeDisplay.autoSize = TextFieldAutoSize.LEFT;
timeDisplay.defaultTextFormat = timeFormat;
timeDisplay.setTextFormat(timeFormat);
addChild(timeDisplay);
}
// Note -- The sizeUpdated() is part of ViewBase and called when the setSize() is called.
// This means that whenever our size changes the objects on our stage will
// reset. Notice how they are set using percentages (get liquid baby!)
override protected function sizeUpdated():void {
logo.x = this.width * .10;
logo.y = (background.height / 2) - (logo.height / 2);
timeBG.x = (this.width / 2) - (timeBG.width / 2);
timeBG.y = (background.height / 2) - (timeBG.height / 2);
timeDisplay.x = (timeBG.x + (timeBG.width / 2)) - (timeDisplay.width / 2);
timeDisplay.y = (timeBG.y + (timeBG.height / 2)) - (timeBG.height / 2) + 5;
}
}
}
Managing Channel Properties on the litl OS
by @ryancanullaWhat are channel properties?
Channel properties allow the developer to take application data and put it in local system storage. This memory is limited, but can be very useful for channel configurations, user preferences, high scores, or something else that’s needed by your channel.
There are four types of channel properties. Each property type has a specific set of permissions. Permissions range from device specific to properties that are shared amongst different accounts/households/devices.
Below is a list of the litl OS channel properties:
- Global: generally read-only and tell the channel about the device/environment which they are running on
- Account: these properties will be included on all instances of your channel for one household account
- Device: properties that are only visible to one specific channel and only on the device it is installed/running on
- Shared: properties that are shared with any account/household that your channel is shared with
Storing properties locally
To store properties on your device simply set them on your LitlService instance; in this example that would be the service variable. Keep in mind that channel properties should be name value pairs.
Example:
service.addEventListener(PropertyMessage.PROPERTY_CHANGED, onPropertiesChanged);
Example:
service.sharedProperties.myProp = "some value"; service.accountProperties.anotherProp = "another value"; service.deviceProperties.thirdProp = "yet another";
Retrieving local properties from your channel
Listen for the “PROPERTY_CHANGED” event on your LitlService instance. Once you do that you will have everything you need inside of the event handler message.
In the event handler you will look for an Array of properties (e.parameters). Once you have that you can loop though this array to a) check for specific property names (ie. “Prop1”, “madeUpProperty”, or “zipCode”) or b) check what type of property type you are dealing with (ie. DEVICE, SHARED, ACCOUNT, or GLOBAL).
Example:
private function onPropertiesChanged(e:PropertyMessage):void {
var properties:Array = e.parameters;
for(var i:uint=0; i < properties.length; i++) {
if(properties[i].name == "zipCode" && e.propertyScope == PropertyScope.GLOBAL){
zipLabel.text = properties[i].value;
}
}
}
Note that it is important to match the properties that you are looking for with the property type that you expext it should be paired to.
if(properties[i].name == "username" && e.propertyScope == PropertyScope.DEVICE){
You can find a great example of working with channel properties in the ZipCode tutorial on the Sample Channels page:
What’s in the litl SDK package?
by @chuckstar
After downloading the SDK package, you'll want to explore everything we have included to make it easy for you to start building channels.
1. The controls folder contains a SWC and source code for the custom controls we've built for channels. You can either drop the SWC into your project (in Flex, put it in your Libs folder) or map the source code folder (src) from your project. These controls provide you drop in functionality that replicate unique user patterns we find coming up often in channel development. For tips and code samples getting started with the Controls, check out the "Meet our Controls" tutorial. Full asdocs for the core class library are available here.
2. The core folder contains a SWC and source code for the core library you need to build channels. This class library acts as the bridge between the litl OS and your Actionscript 3 code. You can either drop the SWC into your project (in Flex, put it in your Libs folder) or map the source code folder (src) from your project. Full asdocs for the core class library are available here.
3. In the documentation folder, you'll find the aforementioned asdocs available for your local use. While always available and updated online, we felt giving hard copies to you would be useful should you find yourself building channels offline.
4. The samples folder contains several ready-to-run projects in Flash Pro, FlashBuilder (fxp) and Actionscript project formats. Reflecting various 'template' channels, these are great examples of how to build a channel. Some of the examples are so complete, you may only be steps away from customizing it and launching it as your own.
5. Lastly, the simulator folder contains our key tool: The litl AIR-based Simulator. Designed to test your channel as you build it, this app simulates our OS on your desktop so you can experience the channel exactly as you would on the device.
Download the SDK here.
What are the Channel Views?
by @chuckstarA litl Channel is made of 3 distinct views: Card, Focus and Channel.
Card View {310px by166px}
Think of Card View as the minimized, mini-app version of the channel. Living as a 'card' on the litl OS home screen, users can glance at updated sports scores, see latest video/episodes available and even scroll through images respective to whatever content/service the Channel is built around. For games, Card View can display top scores or inform of other users online looking to play.
Focus View {1280px by 730px}
When the litl is in laptop mode and the card has been opened, the Channel displays in Focus View. This is where the user can interact with the Channel content using the webbook's keyboard and trackpad. The size of this View is basically a full screen instance of the Channel, with the litl OS Taskbar on top. The Options panel is something that can be invoked from within this View, so the user can adjust settings/properties of the Channel.
Channel View {1280px by 800px}
When the litl is in easel mode and a Channel is open or selected, the Channel displays in Channel View. Designed to be more of a passive experience, only the GoButton and Wheel controls (also accessible with the optional webbook remote) can control the Channel. This View is ideal for sitting back, watching video or seeing the latest headlines, tweets and status scroll through the screen. As with the Bakespace Recipes Channel, this View is also great for simplifying content display and interaction, where the user can page up and down or browse easily through information.
When building a Channel, you can use the ViewChanged event to adapt your Channel to whicever view the device calls for. Using pre-built containers, like mx:ViewStack in Flex, it is simple to setup layouts in your application that correspond to each View in the Channel.
What is a channel?
by @chuckstarA channel is a litl application running on a full-screen, in-browser instance of Adobe Flash Player. Slightly different than a standard swf, a channel is built with the litl SDK to bridge Flash with the unique ‘view’ modes and user controls of the litl. You can use your favorite Flash authoring tools to code litl channels, and use either a litl webbook or our Simulator (packaged with the SDK) to test and refine your channels. Our channels take standard web content, in the form of text, images, video, 3D animation and games, and present them in a more streaming and optimized way for the litl.
The following are good examples of channel adaptations from standard web content to litl channels:
The Facebook Status channel:
Note how in the web browser (left) there is more abundance of content and less focus on detail. In the channel experience (right), litl webbook users focus on each status update from their friends as they are posted, brought to life by animated and uniquely designed figures. Much more fun and useful, especially from across a kitchen or on a large-screen television!
The BakeSpace Recipes channel:
Note how this channel (right) features larger content and the user can navigate within and between recipes with the minimal control interface in easel mode.
Who is the target audience for the litl webbook?
by @chuckstar
The litl webbook is finding its strongest appeal amongst busy families looking for a simpler way to enjoy the web. They want to go online for fun and recreation, but they've got no patience for computers and operating systems that are needlessly complex. When they want to go online, they just want their computer to work -- no software updating, no hard drive backups, no anti-virus worries, and no operating system security patches!
What is the litl webbook?
by @chuckstar
The litl webbook is an "Internet computer", a new type of computer built on and for the web. It can go online in a conventional laptop-like mode, rendering websites with its modern browser and built-in support for Flash. Used like this, it's ideal for traditional "lean forward" web activities like searching, reading, typing, and clicking. However, the computer can also stand upright like an easel when its screen and keyboard are flipped around its hinge. In this new mode, the litl webbook and its exposed 12-inch screen transform into a platform for "lean back" or passive web activities -- watching video, enjoying photos, listening to music, and scanning headlines, for example. The device also connects to large-screen televisions via a plug-and-play HDMI connection for a larger-than-large viewing experience.
How are channels distributed to litl webbook owners?
by @chuckstar
All channels appear in the litl operating system as a "litl card", our version of a desktop icon. A card is the minimized, yet still functional version of the channel. Among the default cards on a new litl webbook are basic operating settings, a web browser, a Mediawall for viewing photos and video clips, and our proprietary card catalog. The latter lets the user search, browse, view, discover and download channels of their choice. Channels make their way into the card catalog via a simple submission and review process by the litl team. While free to litl users now, we will add fee-based channels into the card catalog over the next few months. Developers and content partners looking to build and deploy channels can learn more and get started at http://developer.litl.com.
Where is the webbook being used?
by @chuckstar
The litl webbook's versatility makes it useful throughout the home. From the bedroom and family room to the kitchen and laundry room, the computer brings the convenience of an always-on web connection that's never more than a few steps away. When folded into its upright easel mode, it takes up minimal space on a crowded kitchen counter, a busy basement workbench, or a tiny patio table on the deck. Despite its small size, it brings the versatility of a computer, clock, radio, photo frame, and web TV. And, weighing in under 3 pounds, the litl webbook's highly portable from room to room.
What channels do litl webbook users want to experience and enjoy?
by @chuckstar
We hear a lot from our users about how they're using their litl webbook. Kids use it to access homework resources online, play video games, watch TV shows, exchange photos with grandma and grandpa, or chat with friends about a favorite YouTube video. Adults use their litl webbook to shop, watch web movies, bank online, check in with work, read the news, stream photos, or check out recipes. We see the biggest demand for litl channel content in games, HD video, and simplified and fun presentation of popular web content optimized for litl views and controls.
We won!
