SDK Widgets

General Information

The LCARS SDK provides an assortment of ready to use, data-driven widgets or framing. Widgets should be contained within their own namespace. Using the same template from the LCARS.element.prototype simply change/add:

//Check and Add Widget Group Namespace
if(!LCARS.element.sdk){LCARS.element.sdk = {};}
LCARS.element.sdk.solidLevelBar = function(oDef){...}

Widgets should maintain internal element references, global setting overrides and delete cleanup functions.

Solid Level Bar

The label and altLabel can display the value of the level bar when a default label value is set.

{type:'solidLevelBar', namespace:'sdk', color:'bg-blue-4', level:15, label:'15'}
{level:number}
{version:'horizontal | vertical'}
{reverse:boolean}

Scroll Button

The label and altLabel can display the value of the level bar when a default label value is set. Page and Amount settings is the pixel value to scroll by or how many pages to scroll by. Default scroll value if neither is passed is 60px.

{type:'scrollButton', namespace:'sdk', color:'bg-blue-4', target:'#idOfScrollArea'}
{target:'#idOfScrollArea | .classOfScrollArea}
{version:'horizontal | vertical'}
{reverse:boolean} {page:number} {amount:number}

Default Bracket

This is a generic bracket 2-column with 'scanning' animation. The label setting is the bottom title text and the altLabel is the top title text. Apply the `color:'text-color-3' setting to change the label's colors.

{type:'defaultBracket', namespace:'sdk'}
{content:[{...}, {...}, {...}]}

To custom color a default bracket simply apply and follow custom setting and template below.

coloring:{
    elbow:'bg-green-4',
    column1:['bg-blue-1', 'bg-green-2', 'bg-blue-1'],
    column2:['bg-blue-3', 'bg-green-4', 'bg-blue-3'],
    column3:['bg-blue-1', 'bg-green-2', 'bg-blue-1'],
    column4:['bg-blue-3', 'bg-green-4', 'bg-blue-3'],
    animated:'bg-red-1'                                          
}

Default Bar Frame

This is a basic window framing widget. It offers two title areas, content area and four button control areas. Apply the reverse setting to flip the header and footer layout. Use the content setting to access the content area.

Frame Structure

<header><cap><title><headerControlsBefore><bar-flex><headerControlsAfter><cap></header>
<content></content>
<footer><cap><footerControlsBefore><bar-flex><footerControlsAfter><title><cap></footer>

Specialized Settings

headerControlsBefore:[
    {type:'button', color:'bg-blue-1', label:'Text'},
],
headerControlsAfter:[
    {type:'button', color:'bg-green-2', label:'Text'},
    {type:'button', color:'bg-blue-4', label:'Text'}
],
footerControlsBefore:[
    {type:'button', color:'bg-green-1', label:'Text'},
    {type:'button', color:'bg-blue-3', label:'Text'},
],
footerControlsAfter:[
    {type:'button', color:'bg-green-1', label:'Text'}
],

coloring:{
    headerCapLeft:'bg-blue-1',  
    headerCapRight:'bg-green-1',  
    headerBar:'bg-blue-3',  
    headerTitle:'bg-blue-2',  
    footerCapLeft:'bg-green-4',  
    footerCapRight:'bg-green-2',  
    footerBar:'bg-blue-3',  
    footerTitle:'bg-green-1',  
},

content:[{...}, {...}, {...},]