-
Notifications
You must be signed in to change notification settings - Fork 68
zLCARS SDK 16323.311 WIKI (Archive)
Aric edited this page on Jan 17, 2017 · 11 revisions
Wiki Guide 16323.311 (SDK 3.1.1)
The LCARS SDK comes in three parts:
Illustrator files for mockups and direct sizing porting. Base CSS which is the minimal requirement to utilize the LCARS methodology. JS API which is optional but useful for creating, managing and maintaining the interfaces. The wiki assumed the JS API is utilized but all the classes and options are presented for any hardcoding of an interface.
Provided with the LCARS SDK are three built interfaces:
Random Color Generator - New color selection after every refresh and auto sizes with the built in zoom function. Hardcoded - Same layout as the Color Generator but is hardcoded html with all JS removed. Only powered by CSS. Visual Guide - A reference and testing setup for all elements and their variants.
NOTE When viewing interfaces in Firefox locally the font does not render correctly. You must change the security.fileuri.strict_origin_policy to false in about:config but then your filesystem is exposed so use with caution.
Aric edited this page on Sep 11, 2016 · 6 revisions
The core logic of the SDK lies within an expression function. This maintains the viewport sizing functionality, base element creation calls, event binders and object settings.
Objects settings can be redefined to allow for custom settings for 3rd party projects. The included settings are required and should be included if the call is redefined. When creating elements, event binders can set. The function checks if the main input is touch or mouse and applies the correct binder.
The most important part of the LCARS function expression is the creation calls. The 'type' variable of a definition references the specific create function. The SDK provides the base elements the LCARS methodology utilizes. Extend the create ability for new elements and full fledged widgets!
Every create function should return the created element, same with the settings.
//Refer to the file, lcarssdk.js for more detailed examples.
//Example of the LCARS expression
var LCARS = {
definition: function(element, args){
//Creates-updates object definition stored globally.
},
settings:{
set:function(element, args){
//Set parameters on created object.
},
get:function(element, arg, args){
//Set parameters on created object.
},
click: function(args){
//Bind events to created object.
},
label: function(args){
//Add label to object
},
},
button:{
create:function(args){
//Built in creation calls
},
settings:{
label:function(args){
//Overside native setting for this object type.
}
}
}
}
Aric edited this page on Oct 1, 2016 · 6 revisions
One of the trademarks of LCARS methodology is its use of color. Many fans have created assortments of color patterns and color groups based off the original work from Mr. Okuda and Mr. Drexler. Even more, many of the canon interfaces are backlit and not monitor based RGB making color translation a bit of a pickle.
The SDK does not include any pre-packaged colors. All colors used within a project are setup by the developer using whatever color names they prefer to represent their chosen color code values. The SDK uses the prefix 'bg-' for the color classes by default and it encouraged for others to do the same. Text also has color options using the 'text-' prefix for the color class.
Border color is include in the color settings because Elbows, for their inner radius, use a border trick to enable a reverse-border-radius.
Color sets should be the last thing in a projects CSS file mainly to ensure proper overriding with the typical color flashes, changes and states. Inherited colors go before the direct color placement.
There is an optional color theme provided width the SDK called the USS Not Affiliated, Aricwithana's personal color theme. The theme utilizes eight primary colors (blue/green palette), and a couple of specific red and grey accessory colors. Also included is a red alert variant when the class 'red-alert' is applied to the top most level of the interface.
Provided within the API is the function call LCARS.colorGen and LCARS.colorGroupGen which, when passed an array of color values and will return a random color from the array. LCARS.colorGroupGen requires the color array and number of colors requested in an returned array.
/* Default Color CSS within lcarssdk.css */
[class*="bg-"],
[class*="bg-"] > *:not([class*="bg-"]){
background-color:#999999;
border-color:#999999;
}
/* Theme USS Not Affiliated */
.bg-blue-1,
.bg-blue-1 > *:not([class*="bg-"]){
background-color:#99ccff;
border-color:#99ccff;
}
.text-blue-1{color:#99ccff;}
.red-alert .bg-blue-1,
.red-alert .bg-blue-1 > *:not([class*="bg-"]){
background-color:#cccccc;
border-color:#cccccc;
}
.red-alert .text-blue-1{color:#ffff66;}
//Sample object definition.
{type:'button', label:'text', color:'burnt-orange'}
//translates to DOM Object:
//Set-Get-Clear
$(element).objecSettings('color') => Get
$(element).objecSettings({color:'bg-blue-1'}); => Set
var colorArray = ['bg-blue-1', 'bg-blue-3', 'bg-green-4'];
$(element).objecSettings({color:LCARS.colorGen(colorArray)}); => Set randomly selected color from array
$(element).objecSettings({color:LCARS.colorGen(colorArray).replace('bg-', 'text-')}); => Set randomly selected color and swap it for a text color
$(element).objecSettings({color:null}); => Remove
LCARS.colorGen(['bg-blue-1', 'bg-green-3', 'bg-green-2', 'bg-blue-4']); => Returns a single string selection from passed array.
LCARS.colorGenGroup(['bg-blue-1', 'bg-green-3', 'bg-green-2', 'bg-blue-4'], 2); => Returns an array with a selection of colors matching the passed amount. ex: ['bg-green-3', 'bg-blue-4']
Aric edited this page on Sep 25, 2016 · 5 revisions
LCARS presents multiple element state visuals. From color transitions/changes, blinking, active states and more. The SDK does not presume to be able to maintain all canon state types so instead there is just a handful provided as a template for addons.
The SDK API applies states via a class name: disabled, blink, red-dark-blink, white-flash and red-dark-light provided
Disabled, hidden, fade, no-event and no-transition are usability states provided with the sdk.
There is a predefined CSS Active state that is commented out in the lcarssd.css file. An :active element changes to white and done through a CSS animation. This is so that the active state will always override all color settings or other assorted color animations. Both the background color and border color are applied for complex element inheritance (like elbow inner radius).
.blink:not(.complexButton){
-webkit-animation: blink 1.25s step-end infinite;
animation: blink 1.25s step-end infinite;
}
.blink.complexButton :not(.text){
-webkit-animation: blink 1.25s step-end infinite;
animation: blink 1.25s step-end infinite;
}
@-webkit-keyframes blink {
from, to { }
50% {background-color:transparent; color:transparent; border-color:transparent;}
}
@keyframes blink {
from, to { }
50% {background-color:transparent; color:transparent; border-color:transparent;}
}
$(element).objectSettings('state') => Get
$(element).objectSettings({state:'blink'}); => Set
$(element).objectSettings({state:null}); => Remove
Aric edited this page on Oct 1, 2016 · 6 revisions
LCARS does not have scrollbars insofar as I can find. This makes scrolling content a little trickier. LCARS does have canon scroll buttons that can scroll content, included with the scroll button addon within the SDK.
Step argument is a pixel value. Target pass an array of targets.
CSS Scrollbars have been disabled in all the browsers that support such a feature. For multi-browser or for fancier scrolling utilize the following, very awesome 3rd party plugin: http://idangero.us/swiper/
$(element).scrollingUp({step:250, target:['body']});
$(element).scrollingDown({step:250, target:['body']});
$(element).scrollingLeft({step:250, target:['.content']});
$(element).scrollingRight({step:250, target:['#content1, #content2']});
Aric edited this page on Sep 11, 2016 · 5 revisions
Objects are defined as simple javascript objects or proper JSON syntax.
{type:'button', id:'elementID', appendTo:'#customWrapper', label:':Label Text', color:'bg-blue-1'}
The most important of the definition is the 'type' argument. This setting is directly tied to the SDK Object Create Logic.
All other arguments are tied to the LCARS.defintion/LCARS.settings. When passing CSS selector targets, pass a string with a selector symbol.
Upon creation, each definition stored within the global variable 'allObjects'. If an element does not have an ID set, one will be dynamically created. All settings for an element are maintained in the stored definition. When an element is removed from the webview with the SDK API, its definition within the global variable is removed.
All objects are put into the global array as a singleton definition. As an example, a complex button is made up of a cap, bar and button. The complex button, when created has the passed ID applied. The sub cap, block and button would get a dynamically set ID and also placed into the global variable as a separate, singleton definition. This allows sub elements of larger elements to be manipulated separately while still maintaining the original 'copy' of the whole element stored under the complex button ID.
allObjects = {
btn_LCARS:{
type:'button',
color:'bg-red-1',
appendTo:'#customWrapper',
label:'alert',
click:swapAlerts,
tap:swapAlerts
},
elbow_hideUI:{
type:'elbow',
color:'bg-blue-1',
appendTo:'.templateFrame.typeA .dialog.typeB',
label:'hide ui',
version:'top-left',
click:hideUI,
tap:hideUI
}
}
//Access definition directly
allObjects.btn_lcars
allObjects.btn_lcars.type
//Retrieve full definition via $.fn
$(element).getDefinition(); => Get {} else false
//Retrieve direct children via $.fn
$(element).getChildren(); => Array - [{type:'button', label:'bleh'}, {type:'block', color:'bg-red-1'}] - Returns children definitions
$(element).getChildren(true); => Array - ['block_13', 'btn_ClickMe'] - Returns children IDs
Aric edited this page on Sep 11, 2016 · 4 revisions
Currently provided are two types of titles, default (large) and small. Large titles are header text. Half Titles take up the standard bar height of 30px.
//Sample Definitions
var def = {type:'title', text:'COMM SYSTEMS', appendTo:'body', color:'text-blue-1'}
//Create Object from Definition
$(def).createObject({});
type - String, REQUIRED, 'title'
id - String
version - String, 'large / small'
label - String
text - String
altLabel - String
color - String
attrs - Array, [{attr:'target', value:'_blank'}, {attr:'data-linkto', value:'.content'}]
state - String
noTransition - Boolean, true
noEvent - Boolean, true
hidden - Boolean, true
fade - Boolean, true
class - String
Aric edited this page on Oct 2, 2016 · 2 revisions Ovals are used generally as list markers and similar visual cues. Currently there is the default and a small version.
//Sample Definitions
var def = {type:'oval', appendTo:'body', color:'bg-blue'}
//Create Object from Definition
$(def).createObject({});
type - String, REQUIRED, 'oval'
id - String
color - String
attrs - Array, [{attr:'target', value:'_blank'}, {attr:'data-linkto', value:'.content'}]
size - String, 'small'
state - String
noTransition - Boolean, true
noEvent - Boolean, true
hidden - Boolean, true
fade - Boolean, true
class - String
Aric edited this page on Sep 1, 2014 · 2 revisions
//Sample Definitions
var def = {type:'img', src:'http://www.lcarssdk.org/images/logo.png'}
//Create Object from Definition
$(def).createObject({});
Default Args:
type - String, REQUIRED, 'img'
id - String
attrs - Array, [{attr:'target', value:'_blank'}, {attr:'data-linkto', value:'.content'}]
state - String
noTransition - Boolean, true
noEvent - Boolean, true
hidden - Boolean, true
fade - Boolean, true
class - String
src - String
click - Function
- Also Available: mouseenter, mouseleave, hover, mousedown, mouseup, tap, singleTap, doubleTap, longTap, swipe, swipeLeft, swipeRight, swipeUp, swipeDown
//Sample Definitions
var def = {type:'svg', xml:''}
//Create Object from Definition
$(def).createObject({});
Default Args:
type - String, REQUIRED, 'svg'
id - String
attrs - Array, [{attr:'target', value:'_blank'}, {attr:'data-linkto', value:'.content'}]
state - String
noTransition - Boolean, true
noEvent - Boolean, true
hidden - Boolean, true
fade - Boolean, true
class - String
xml - String - SVG XML Structure. - ''
click - Function
- Also Available: mouseenter, mouseleave, hover, mousedown, mouseup, tap, singleTap, doubleTap, longTap, swipe, swipeLeft, swipeRight, swipeUp, swipeDown
Aric edited this page on Sep 11, 2016 · 4 revisions
There are all different types of dialogs used within LCARS. While there wasn't a real need for a special {type:'dialog'} since a dialog is full template object but because of their heavy use and varieties of styles, having the ability to segment definitions as a dialog type is useful when reading through a complex UI definition structure.
The built in dialog create call has two optional titles, one in the footer and one in the header. If either of the args (or both) are passed, it will try and find a title element in the headers and footers of the dialog and set the value.
//Sample Definitions
var def = {type:'dialog', template:LCARS.templates.sdk.dialog.typeA, id:'saveWindow', headerTitle:'Confirmation'}
//Create Object from Definition
$(def).createObject({});
Default Args:
type - String, REQUIRED, 'dialog'
id - String
headerTitle - String
footerTitle - String
attrs - Array, [{attr:'target', value:'_blank'}, {attr:'data-linkto', value:'.content'}]
template - Array, [{type:'button'}, {type:'bar'}]
noTransition - Boolean, true
noEvent - Boolean, true
hidden - Boolean, true
fade - Boolean, true
class - String
flex - String, 'h/v'
flexC - String, 'h/v'
children - Array, [{type:'button'}, {type:'bar'}]
children - String, Raw HTML
click - Function
- Also Available: mouseenter, mouseleave, hover, mousedown, mouseup, tap, singleTap, doubleTap, longTap, swipe, swipeLeft, swipeRight, swipeUp, swipeDown
Aric edited this page on Oct 1, 2016 · 3 revisions
Columns and rows are exactly what they say they are. Both provide a standard spacing pattern which can be changed per row/column or universally. Rows, by default, is a flex parent to allow for the horizontal layout. In reverse columns do not provide flex settings by default.
//Sample Definitions
var colum = {type:'column', appendTo:'body'}
var row = {type:'row', flex:'h', appendTo:'body'}
//Create Object from Definition
$(def).createObject({});
type - String, REQUIRED, 'column/row'
id - String
attrs - Array, [{attr:'target', value:'_blank'}, {attr:'data-linkto', value:'.content'}]
noTransition - Boolean, true
noEvent - Boolean, true
hidden - Boolean, true
fade - Boolean, true
class - String
flex - String, 'h/v'
flexC - String, 'h/v'
children - Array, [{type:'button'}, {type:'bar'}]
children - String, Raw HTML
Aric edited this page on Sep 11, 2016 · 4 revisions
Caps are used to end layout or content. There generally are no children within a cap element, nor mouse/touch events. A label can be applied until the element is too small to support a label. When the size parameter is not utilized it will generate the default 60px height cap.
//Sample Definitions
var def = {type:'cap', appendTo:'body', color:'bg-blue-1'}
//Create Object from Definition
$(def).createObject({});
type - String, REQUIRED, 'cap'
id - String
label - String
altLabel - String
color - String
version - String, 'left / right'
attrs - Array, [{attr:'target', value:'_blank'}, {attr:'data-linkto', value:'.content'}]
size - String, 'tiny / small / medium / large / xlarge'
state - String
noTransition - Boolean, true
noEvent - Boolean, true
hidden - Boolean, true
fade - Boolean, true
class - String
flexC - String, 'h/v'
Aric edited this page on Sep 25, 2016 · 4 revisions
Buttons are one of the most basic elements of LCARS. The come in a variety of types, sizes and colors. Each button has two label options, as do most elements, positioned at the top and bottom.
Also provided is an 'endcap' variant. There is currently only one size 'large' provided. Reference the Visual Guide provided with the LCARS SDK library for reference.
//Sample Definition
var def = {type:'button', label:'Alert Status', altLabel:'Blue', appendTo:'body', color:'bg-blue-1', version:'left', click:swapAlerts, tap:swapAlerts}
//Create Object from Definition
$(def).createObject({});
//Default Args
type - String, REQUIRED, 'button'
id - String
version - String, 'pill/right/left'
endcap - Boolean, true
size - String, REQUIRED FOR ENDCAP, 'large'
label - String
altLabel - String
color - String
attrs - Array, [{attr:'target', value:'_blank'}, {attr:'data-linkto', value:'.content'}]
state - String
noTransition - Boolean, true
noEvent - Boolean, true
hidden - Boolean, true
fade - Boolean, true
class - String
flexC - String, 'h/v'
href - String
children - Object, [{type:'button'}, {type:'bar'}]
children - String, Raw HTML
click - Function
- Also Available: mouseenter, mouseleave, hover, mousedown, mouseup, tap, singleTap, doubleTap, longTap, swipe, swipeLeft, swipeRight, swipeUp, swipeDown
Aric edited this page on Sep 11, 2016 · 3 revisions There are all different types of brackets used within LCARS. While there wasn't a real need for a special {type:'bracket'} since a bracket is full template object but because of their heavy use and varieties of styles, having the ability to segment definitions as a bracket type is useful when reading through a complex UI definition structure.
//Sample Definitions
var def = {type:'bracket', template:LCARS.templates.sdk.bracket.typeA, id:'plasmaConstrictor'}
//Create Object from Definition
$(def).createObject({});
Default Args:
type - String, REQUIRED, 'bracket'
id - String
version - String
attrs - Array, [{attr:'target', value:'_blank'}, {attr:'data-linkto', value:'.content'}]
template - Array, [{type:'button'}, {type:'bar'}]
noTransition - Boolean, true
noEvent - Boolean, true
hidden - Boolean, true
fade - Boolean, true
class - String
flex - String, 'h/v'
flexC - String, 'h/v'
children - Array, [{type:'button'}, {type:'bar'}]
children - String, Raw HTML
click - Function
- Also Available: mouseenter, mouseleave, hover, mousedown, mouseup, tap, singleTap, doubleTap, longTap, swipe, swipeLeft, swipeRight, swipeUp, swipeDown
Aric edited this page on Sep 25, 2016 · 3 revisions
Blocks are generally used as sub elements of complex buttons, non-bar framing and filler areas.
//Sample Definitions
var def = {type:'block', appendTo:'body', color:'bg-blue-1'}
//Create Object from Definition
$(def).createObject({});
type - String, REQUIRED, 'block'
id - String
label - String
altLabel - String
color - String
size - String, xlarge/large/medium/small/tiny
attrs - Array, [{attr:'target', value:'_blank'}, {attr:'data-linkto', value:'.content'}]
state - String
noTransition - Boolean, true
noEvent - Boolean, true
hidden - Boolean, true
fade - Boolean, true
class - String
flexC - String, 'h/v'
Aric edited this page on Oct 1, 2016 · 2 revisions
These are generic parent containers. No special classes have been applied to the parent or the children.
//Sample Definitions
var def = {type:'wrapper', flex:'h', appendTo:'body', id:'wpr_topLevel'}
//Create Object from Definition
$(def).createObject({});
type - String, REQUIRED, 'wrapper/content'
id - String
attrs - Array, [{attr:'target', value:'_blank'}, {attr:'data-linkto', value:'.content'}]
noTransition - Boolean, true
noEvent - Boolean, true
hidden - Boolean, true
fade - Boolean, true
class - String
flex - String, 'h/v'
flexC - String, 'h/v'
children - Array, [{type:'button'}, {type:'bar'}]
children - String, Raw HTML
Aric edited this page on Sep 25, 2016 · 3 revisions Simple input text boxes. Ability to enable/disable password mode.
//Sample Definitions
var def = {type:'textInput', text:'INPUT VALUE HERE', appendTo:'body'}
//Create Object from Definition
$(def).createObject({});
Default Args:
type - String, REQUIRED, 'textInput'
id - String
password - Boolean, true
text - String, Text Content of input.
color - String
attrs - Array, [{attr:'target', value:'_blank'}, {attr:'data-linkto', value:'.content'}]
state - String
noTransition - Boolean, true
noEvent - Boolean, true
hidden - Boolean, true
fade - Boolean, true
class - String
flexC - String, 'h/v'
name - String
click - Function
- Also Available: mouseenter, mouseleave, hover, mousedown, mouseup, tap, singleTap, doubleTap, longTap, swipe, swipeLeft, swipeRight, swipeUp, swipeDown
Aricwithana edited this page on Nov 29, 2014 · 2 revisions
HTML Tag is a creation call that generate basic HTML markup. Apply inline styles, attributes, styles and content and the like as you would any other object. Net HTML markup using the children setting.
//Sample Definitions
var def = {type:'htmlTag', tag:'p', children:'COMM SYSTEMS', appendTo:'body'}
//Create Object from Definition
$(def).createObject({});
type - String, REQUIRED, 'htmlTag'
id - String
attrs - Array, [{attr:'style', value:'top:10px; width:100%;'}]
class - String
children - Object, [{type:'htmlTag', tag:'p', children:'I am child text for paragraph'}]
children - String, Raw HTML
Aric edited this page on Sep 10, 2016 · 6 revisions
A complex button is a collection of basic components grouped together as a single button.
The parameter 'template' is used to build the structure of the complex button. The SDK provides some basic layouts under the global variable 'LCARS.templates.sdk.buttons.complex.typeName/LCARS.templates.sdk.buttons.complexText.typeName'.
Complex buttons can have as many components as one wants but only one button and one text block max by default. Complex buttons are handled as a single unit with events tied to the complex button element as a whole. That being said, values can be applied individually to the components by the use of the children:[] setting or providing a custom template.
Complex buttons are a flex element. The children buttons fill the space left over.
There are two specialized versions included, vertical and duo. Vertical changes the layout of the complex button into a column.
Duo is created specifically to hold two buttons, each with their own event. By default it removes the spacing and creates a visually singular button. Duo works with either default horizontal or vertical layout versions. Duo elements do not come with or use the template setting. Pass the two buttons via the children:[] setting and set their events like normal.
Passing a value to the setting 'text' will add text to the large text block (if present in the template/children).
Complex buttons come with the ability to set a single color via the parent wrapper but also apply individual colors to the children via the colors:[] setting. Pass an array of color names and each color will be applied to matching index value sub child.
//Sample Definitions
var def = {type:'complexButton', label:'Alert Status', appendTo:'body', template:LCARS.templates.sdk.buttons.complex.typeA, click:swapAlerts, tap:swapAlerts}
var defMultiButton = {type:'complexButton', label:'Alert Status', appendTo:'body', template:[{type:'block'}, {type:'button', label:'button 1'}, {type:'button', label:'button 2'}], click:swapAlerts, tap:swapAlerts}
//Create Object from Definition
$(def).createObject({});
Default Args:
type - String, REQUIRED, 'complexButton'
id - String
version - String, 'duo'
direction - String, 'vertical'
label - String
altLabel - String
color - String
colors - Array, ['bg-blue-1', 'bg-green-1', 'bg-blue-3']
attrs - Array, [{attr:'target', value:'_blank'}, {attr:'data-linkto', value:'.content'}]
state - String
text - String
template - Array, [{type:'button'}, {type:'bar'}]
noTransition - Boolean, true
noEvent - Boolean, true
hidden - Boolean, true
fade - Boolean, true
class - String
flexC - String, 'h/v'
href - String
children - Object, [{type:'button'}, {type:'bar'}]
children - String, Raw HTML
click - Function
- Also Available: mouseenter, mouseleave, hover, mousedown, mouseup, tap, singleTap, doubleTap, longTap, swipe, swipeLeft, swipeRight, swipeUp, swipeDown
Aric edited this page on Oct 2, 2016 · 4 revisions
Bars are used as a form of framing. Bars are not used as children elements of complex buttons. Blocks are used instead.
Labels can be applied to bars but for maintaining an interaction pattern, bars should not have mouse/touch events in place. There is no CSS active state in place for that reason.
If no size parameter set, default size will be applied.
//Sample Definitions
var def = {type:'bar', appendTo:'body', color:'bg-blue-1'}
//Create Object from Definition
$(def).createObject({});
type - String, REQUIRED, 'bar'
id - String
label - String
altLabel - String
color - String
attrs - Array, [{attr:'target', value:'_blank'}, {attr:'data-linkto', value:'.content'}]
size - String, 'tiny, small, medium, large, xlarge'
state - String
noTransition - Boolean, true
noEvent - Boolean, true
hidden - Boolean, true
fade - Boolean, true
class - String
flex - String, 'h/v'
flexC - String, 'h/v'
children - Array, [{type:'button'}, {type:'bar'}]
children - String, Raw HTML
Aric edited this page on Sep 9, 2016 · 7 revisions
A complex duo button with stylized labels. Pass the target to scroll and the amount to scroll with each fire.
If no template parameter is passed the default vertical version will be utilized.
type - String, REQUIRED - 'scrollBar'
id - String
target - String - '#wpr_iholdContent > .content' - Element to scroll the contents of.
step - Int - Value to scroll by.
template - Array or premade like: LCARS.templates.sdk.scrollButton.typeAV
//Sample Definitions
var def = {type:'scrollButton', target:'#wpr_iholdContent', step:65, color:'bg-blue-1', template:LCARS.templates.sdk.scrollButton.typeAV}
//Create Object from Definition
$(def).createObject({appendTo:'body'});
Aric edited this page on Sep 9, 2016 · 6 revisions
This addon creates a horizontal or vertical bar with a cap which animates based upon the passed value. If the setting labelLink is enabled, the current label in use will auto update with the value number.
The bar works with a value of 0-100 so convert your number to a percentage. A min-width/height of the child bar element of 40px is the SDK standard.
If no template parameter is supplied the default will be utilized.
type - String, REQUIRED - 'levelBar'
id - String
label - String
direction - String - 'reverse'
orient - String - 'vertical'
color - String
level - Int - percentage
labelLink - String - 'label', 'altlabel'
template - Array, {type:'wrapper', class:'sdk widget levelBar typeA', children:[{type:'bar'}, {type:'cap'}]} - LCARS.templates.sdk.levelBar.typeA
//Sample Definitions
var def = {type:'levelBar', label:'50', color:'bg-blue-1', level:50, labelLink:'label'}
//Create Object from Definition
$(def).createObject({});
Aric edited this page on Sep 25, 2016 · 4 revisions
Elbows are the signature element of the LCARS logic methodology. CSS does not provide an inverse-border-radius setting so elbows are created similar to complex buttons. Inside an elbow are two elements, a bar and within that bar, a block (which the block provides the inner-radius visual).
There are four types of elbow orientation, each with an vertical variant.
Elbows come with a basic default sizing and can be changed via their settings. Outside the default setting there are four options - 'large / medium / base / small' Base is generally a projects 'custom' elbow developed specifically for that project. SDK Base is a standard 60px height so the outer radius is a 60px border-radius and modified inner radius.
//Sample Definitions
var def = {type:'elbow', label:'Warp', color:'bg-blue-1', version:'bottom-left', click:gotoWarp, tap:gotoWarp}
//Create Object from Definition
$(def).createObject({});
Default Args:
type - String, REQUIRED, 'elbow'
id - String
version - String, 'top-left / top-right / bottom-left / bottom-right'
orient - String, 'vertical'
label - String
altLabel - String
color - String
attrs - Array, [{attr:'target', value:'_blank'}, {attr:'data-linkto', value:'.content'}]
size - String, 'small/base/medium/large'
state - String
noTransition - Boolean, true
noEvent - Boolean, true
hidden - Boolean, true
fade - Boolean, true
class - String
flexC - String, 'h/v'
href - String
click - Function
- Also Available: mouseenter, mouseleave, hover, mousedown, mouseup, tap, singleTap, doubleTap, longTap, swipe, swipeLeft, swipeRight, swipeUp, swipeDown
Aric edited this page on Sep 1, 2014 · 2 revisions
'webviewInfo' is a global variable that is maintained by modified version of Matthew Hudson's device.js library. This is required else aspects of the SDK will not function properly.
Generally this file is in a minimized form but is released unminified for easy tweaking.
os - 'ios/android/blackberry/windows/ffos/meego'
device - 'ipod/ipad/iphone'
orientation - 'landscape/portrait'
input - 'desktop/touch'
type - 'mobile/tablet'
ie - true
webviewInfo = {os:null, device:null, orientation:null, input:null, type:null, ie:null}
Aric edited this page on Sep 10, 2016 · 3 revisions
Templates are easy to create for the SDK. By passing an object array as the children parameter, complex LCARS layouts can be created in a single shot. As an example, since there is not currently a Wordpress Plugin for the SDK, this website is a single variable template. Most templates will start with a type 'wrapper' element. Depending on the use, sometimes it is best to return a template during creation and then manipulate it before manual appending. Other times it is easier to do it all at once.
Slimmed templates are used for complex buttons and their variants. This is due to that the parent container is maintained within the LCARS.create logic. These slimmed templates just need the included elements to generate.
The SDK provides a prototype path to house templates:
LCARS.templates.x.x.x
LCARS.templates.groupName.elementName.elementType
LCARS.templates.sdk.buttons.radioText.typeBR
The group name is the most important part about the template paths. This will allow multiple template variations without conflict between user created content.
//Slimmed Template examples.
var complexButtons = {
typeA:[{type:'button', version:'left'}, {type:'block'}],
typeAR:[{type:'block'}, {type:'button', version:'tabRight'}],
typeB:[{type:'cap', version:'left'}, {type:'button'}],
typeBR:[{type:'button'}, {type:'cap', version:'right'}],
typeC:[{type:'button'}, {type:'block'}, {type:'block'}],
typeCR:[{type:'block'}, {type:'block'}, {type:'block'}],
typeD:[{type:'cap', version:'left'}, {type:'button'}, {type:'block'}],
typeDR:[{type:'block'}, {type:'button'}, {type:'cap', version:'right'}]
}
//Full Template
var dialogWindows = {
typeA:{type:'wrapper', class:'sdk dialog typeA', children:[
{type:'wrapper', class:'header', flex:'h', children:[{type:'cap', size:'small', version:'left'}, {type:'title', size:'half'}, {type:'bar', flexC:'h'}, {type:'cap', size:'small', version:'right'}]},
{type:'wrapper', class:'footer', flex:'h', children:[{type:'cap', size:'small', version:'left'}, {type:'bar', flexC:'h'}, {type:'title', size:'half'}, {type:'cap', size:'small', version:'right'}]},
{type:'wrapper', class:'content'}
]
}
}
Aric edited this page on Sep 25, 2016 · 6 revisions
A checkbox button is a specialized complex button. When the element is created a mouse/touch event is attached to handle the checked state automatically.
The parameter 'template' is used to build the structure of the checkbox button. The SDK provides some basic layouts under the global variable 'LCARS.templates.sdk.buttons.checkbox.typeName/LCARS.templates.sdk.buttons.checkboxText.typeName'.
Since a checkbox button is a complex button, apply the same techniques.
Included with the SDK is the 'check' block. This is a block which has a default CSS setting to change style when the checkbox button is checked vs unchecked. This is not required to be used for any element or just a plain button can be styled to display selection. This allows for all kinds of styles and visual changes for checkbox buttons. It is an optional thing only.
//Sample Definitions
var def = {type:'checkboxButton', label:'Alert Status', appendTo:'body', template:LCARS.templates.sdk.buttons.complex.typeA, click:swapAlerts, tap:swapAlerts}
//Create Object from Definition
$(def).createObject({});
Default Args:
type - String, REQUIRED, 'checkboxButton'
id - String
version - String, 'vertical'
label - String
altLabel - String
color - String
text - String
colors - Array, ['blue', 'red', 'yellow']
attrs - Array, [{attr:'target', value:'_blank'}, {attr:'data-linkto', value:'.content'}]
state - String
template - Array, [{type:'button'}, {type:'bar'}]
noTransition - Boolean, true
noEvent - Boolean, true
hidden - Boolean, true
fade - Boolean, true
class - String
flexC - String, 'h/v'
name - String
checked - Boolean, true
children - Object, [{type:'button'}, {type:'bar'}]
children - String, Raw HTML
click - Function
- Also Available: mouseenter, mouseleave, hover, mousedown, mouseup, tap, singleTap, doubleTap, longTap, swipe, swipeLeft, swipeRight, swipeUp, swipeDown
Aric edited this page on Sep 25, 2016 · 8 revisions
A radio button is a specialized complex button. When the element is created a mouse/touch event is attached to handle the checked state automatically. Use then name setting to attach radios into a group as normal.
The parameter 'template' is used to build the structure of the radio button. The SDK provides some basic layouts under the global variable 'LCARS.templates.sdk.buttons.radio.typeName/LCARS.templates.sdk.buttons.radioText.typeName'.
Since a radio button is a complex button, apply the same techniques.
Included with the SDK is the 'check' block. This is a block which has a default CSS setting to change style when the checkbox button is checked vs unchecked. This is not required to be used for any element or just a plain button can be styled to display selection. This allows for all kinds of styles and visual changes for radio buttons. It is an optional thing only.
//Sample Definitions
var def = {type:'radioButton', label:'Alert Status', appendTo:'body', name:'sampleRadio', template:sdkTemplates.complexButton.typeA}
//Create Object from Definition
$(def).createObject({});
Default Args:
type - String, REQUIRED, 'radioButton'
id - String
version - String, 'vertical'
label - String
altLabel - String
color - String
colors - Array, ['blue', 'red', 'yellow']
text - String
attrs - Array, [{attr:'target', value:'_blank'}, {attr:'data-linkto', value:'.content'}]
state - String
template - Array, [{type:'button'}, {type:'bar'}]
noTransition - Boolean, true
noEvent - Boolean, true
hidden - Boolean, true
fade - Boolean, true
class - String
flexC - String, 'h/v'
name - String
checked - Boolean, true
children - Object, [{type:'button'}, {type:'bar'}]
children - String, Raw HTML
click - Function
- Also Available: mouseenter, mouseleave, hover, mousedown, mouseup, tap, singleTap, doubleTap, longTap, swipe, swipeLeft, swipeRight, swipeUp, swipeDown
Aric edited this page on Mar 29, 2015 · 4 revisions
The definition of a viewport within the SDK is the top most parent container that maintains an entire interface. There is the ability to scale or zoom the whole interface or child areas with an interface
Firefox does not support zooming. Zooming is mainly used because in Webkit, zoom maintains a vector based view where as scale will turn the view into a texture and can create blury issues.
While the call triggers only once, there is also placed as a part of the window.resize listener to continually trigger when the window is resized.
The max parameter disables the scaling when the UI is 1:1 to the viewport
$(element).viewport('scale', {width:1080, height:1920, max:true});
$(element).viewport('childScale', {width:1080, height:1920, max:true});
$(element).viewport('zoom', {width:1080, height:1920});
$(element).viewport('childZoom', {width:1080, height:1920});
Aric edited this page on Sep 1, 2014 · 2 revisions
All needed elements are generated and appended to the DOM first normally. Next step is making those elements viewable. When an element is shown, the $.fn call will check to see if there is a definition in the global variable 'allObjects' and if there is an attached 'show' function to trigger. This enables the ability of triggering specific events tied to specific elements when they are available to the user.
LCARS element animations tend to follow a sequential pattern as elements are shown. Elements tend to animate in instantly or with a fade. By passing true to the fade parameter on the objects definition allows the show function to go between the two showing types. If fade is passed as an arg of the show call, it will override the definitions. The timing argument allows for a pause before moving to the next element.
The SDK provides a simple call that will sequentially show elements in the order presented. If selectors are used, elements will be shown in the order that they appear in the DOM. If the passed elements are sent as an object array, they will be shown in the order they are passed.
$(element).showObject({});
$('#thatButton, #thisButton, .bar, .block').showObjectSequence({fade:true, timing:250}); => Selector based. Removes elements in order of appearance within the DOM.
$([$('#thatButton'), $('#thisButton')]).showObjectSequence({fade:true, timing:250}); => Object based, removes in order of array.
Aricwithana edited this page on Dec 22, 2014 · 3 revisions
General rule is, if the SDK API created it, the API is used to remove it.
When removing objects from the DOM, the API provides its own call so proper cleanup is handled. When an object is removed, its definition is also removed from the global variable allObjects along with attached events. Before it is deleted from the global variable, the call checks to see if there is is a 'remove' function within the definition to trigger.
LCARS element animations tend to follow a sequential pattern as elements are removed. Elements tend to animate in instantly or with a fade. By passing true to the fade parameter on the objects definition allows the remove function to go between the two removal types. If fade is passed as an arg of the remove call, it will override the definitions. The timing argument allows for a pause before moving to the next element.
The SDK provides a simple call that will sequentially hide elements and then remove them in the order presented. If selectors are used, elements will be removed in the order that they appear in the DOM. If the passed elements are sent as an object array, they will be removed in the order they are passed.
$(element).removeObject(success);
$(elements).removeObject(success); => Remove multiple objects at the same time.
$('#thatButton, #thisButton, .bar, .block').removeObjectSequence({fade:true, timing:250}); => Selector based. Removes elements in order of appearance within the DOM.
$([$('#thatButton'), $('#thisButton')]).removeObjectSequence({fade:true, timing:250}); => Object based, removes in order of array.
Aric edited this page on Sep 9, 2016 · 15 revisions
$.objectSettings() is the universal call to set/get any setting applied to an object via the SDK API.
These are the built in options. Each object definition uses a different combination of settings. While some settings may not typically apply to an element, they can still be utilized. All non boolean/array/function values are passed as strings.
Not all settings have a logic block applied. Settings without a logic block are stored within the definition automatically. Example setting would be show/hide functions that are called when an element is hidden or shown.
Examples throughout the docs will provide possible options for settings used specifically for those elements. All elements have a default when no setting is applied and is required.
type - String, REQUIRED
id - String
color - String
version - String
direction - String
orient - String
label - String
altLabel - String
size - String
state - String
class - String - Set - 'newClass1 newClass2 newclass3'
class - Array - Remove - ['newClass2', 'newClass1']
style - String, Raw CSS Styles 'flex:2; min-height:60px;'
flex - String, 'h/v'
flexC - String, 'h/v'
noTransition - Boolean
noEvent - Boolean
disabled - Boolean
hidden - Boolean
fade - Boolean
readOnly - Boolean
checked - Boolean
password - Boolean
inputValue - String
text - String
name - String
href - String
src - String
attrs - Array, [{attr:'target', value:'_blank'}, {attr:'data-linkto', value:'.content'}]
children - Array, [{type:'button'}, {type:'bar'}]
children - String, Raw HTML
colors - Array, ['blue', 'yellow', 'red']
tag - String - HTML Tag name 'p/div/ul/li/etc..'
arrive - Function
leave- Function
endcap - Boolean
value - String
template - Array, [{type:'button'}, {type:'bar'}]
show - Function
hide - Function
remove - Function
click - Function
Also Available: mouseenter, mouseleave, hover, mousedown, mouseup, tap, singleTap, doubleTap, longTap, swipe, swipeLeft, swipeRight, swipeUp, swipeDown
//Setters-Getters
//Ex: $.objectSettings(argType, altArgs, success)
$(element).objectSettings('color'); => GET - Pass setting name as string
$(element).objectSettings('color', {altArgName:altArgVal}}); => GET - Pass secondary array of args to the called get setting type.
$(element).objectSettings({version:'top-left'}); => Set
$(element).objectSettings({version:'top-left', color:'red'}); => Set multiple
$(element).objectSettings({version:null, color:null}); => Remove
Aric edited this page on Sep 1, 2014 · 2 revisions
When an element is hidden via this API call, there is a check to see if there is a definition in the global variable 'allObjects' and if there is an attached 'hide' function to trigger.
LCARS element animations tend to follow a sequential pattern as elements are shown. Elements tend to animate in instantly or with a fade. By passing true to the fade parameter on the objects definition allows the show function to go between the two showing types. If fade is passed as an arg of the show call, it will override the definitions. The timing argument allows for a pause before moving to the next element.
If selectors are used, elements will be shown in the order that they appear in the DOM. If the passed elements are sent as an object array, they will be shown in the order they are passed.
$(element).hideObject({});
$('#thatButton, #thisButton, .bar, .block').hideObjectSequence({fade:true, timing:250}); => Selector based. Removes elements in order of appearance within the DOM.
$([$('#thatButton'), $('#thisButton')]).hideObjectSequence({fade:true, timing:250}); => Object based, removes in order of array.
Aric edited this page on Sep 1, 2014 · 2 revisions
When an element is hidden via this API call, there is a check to see if there is a definition in the global variable 'allObjects' and if there is an attached 'hide' function to trigger.
LCARS element animations tend to follow a sequential pattern as elements are shown. Elements tend to animate in instantly or with a fade. By passing true to the fade parameter on the objects definition allows the show function to go between the two showing types. If fade is passed as an arg of the show call, it will override the definitions. The timing argument allows for a pause before moving to the next element.
The SDK provides a simple call that will sequentially show elements in the order presented. If selectors are used, elements will be shown in the order that they appear in the DOM. If the passed elements are sent as an object array, they will be shown in the order they are passed.
$(element).hideObject({});
$('#thatButton, #thisButton, .bar, .block').hideObjectSequence({fade:true, timing:250}); => Selector based. Removes elements in order of appearance within the DOM.
$([$('#thatButton'), $('#thisButton')]).hideObjectSequence({fade:true, timing:250}); => Object based, removes in order of array.
Aric edited this page on Sep 1, 2014 · 2 revisions
$(element).hasAttr('someAttribute'); => true/false
$(element).hasAttr('someAttribute', 'value'); => Returns String value or false.
Aricwithana edited this page on Nov 29, 2014 · 3 revisions
The SDK provides a single $.fn call for all object creation. This is the single most important call. It is also used to generate templates or entirely functional interfaces, with just one line of code. Standard practice is to generate all elements outside the viewable area, in one shot. Then create animation sequences (or just instantly show) the elements. This helps reduce framerate drops and taxing hardware on older technology.
The call directly interacts with the LCARS.create API. The 'type' key of a definition directly calls the correct LCARS.objectType.create block. By extending the LCARS.object options new elements and widgets can be created.
The $.fn create call has an optional appendTo and timing parameters along with a success call. AppendTo parameter overrides any appendTo setting on an elements definition and applies to all elements created with that call. The success call triggers after all elements passed are generated. The timing parameter allows for adding a delay to the success call, set in milliseconds.
Just pass an element definition or an array of definitions.
//Basic Usage
$({definition}).createObject({appendTo:string, timing:250, success:function(){}}
$([{definition}, {definition}, {definition}]).createObject({appendTo:string, timing:250, success:function(){}}
$({type:'button', color:'red', appendTo:'body', id:'newButton'}).createObject({});
$({type:'button', color:'red', appendTo:'body', id:'newButton'}, {type:'bar', id:'bar_headerBar1', appendTo:'body'}).createObject({});
//AppendTo parameter set with creation call.
$({type:'button', appendTo:'body'}).createObject({}); => From Definition, applies to only that element if multiple elements created.
$({type:'button'}).createObject({appendTo:'body'}); => From Create Call, applies to all elements created with the call.
$({type:'button', appendTo:'body'}).createObject({appendTo:'#wpr_mainView'}); => Overrides all definitions appendTo settings.
$({type:'button'}).createObject({}); => No 'appendTo' passed, returns built element. Only pass a single element or template when returning.
//Create an element
$({type:'button', id:'elementID', appendTo:'body', label:'Text', color:'blue'}).createObject({});
//Sample Button Create Code from lcarssdk.js:
var LCARS = {
button:{
create:function(args){
if(args.link !== undefined){
var element = $('');
}else{
var element = $('');
}
element = LCARS.setObjectSettings(element, args);
return element;
}
},
}
//Extend LCARS.create with new object
LCARS.valueSlider.create = function(args){
//Build the new base element
return element;
}
//Create Custom Object
$({type:'valueSlider', id:'elementID', appendTo:'body', label:'Text', color:'blue', value:53}).createObject({});