z Porting v3.11 to v4.00 notes - Aricwithana/LCARS-SDK GitHub Wiki
LCARS SDK JS API Compare:
V3.11 V4.00
var timing_sequence = 65; | var lcars =
var allObjects = {}; | colors:
var objectCount = 0; | pool:
| blue:
var LCARS = | green:
templates: | purple:
sdk: | orange:
scrollButton: | red:
levelBar: | grey:
bracket: | primary:
dialog: | secondary:
framing: | tertiary:
scrollButton: | custom:
|
levelBar: |
settings: | var LCARS =
color:function(args) | active:
label:function(args) | element:
altLabel:function(args) | aside:
level:function(args) | bar:
| block:
bracket: | button:
| cap:
dialog: | column:
| complex-button:
scaler: function(panelW, panelH, wrapper, max) | content:
childScale:function(panelW, panelH, wrapper, max) | details:
zoom:function(width, height) | elbow:
childZoom:function(width, height) | endcap:
colorGen: function(array) | footer:
colorGroupGen:function(array, iLength) | header:
| html-tag:
settings: | img:
set:function(element, args) | main:
get:function(element, arg, args) | nav:
click:function(args) | oval:
mouseenter:function(args) | row:
mouseleave:function(args) | section:
hover:function(args) | svg:
mousedown:function(args) | text:
mouseup:function(args) | title:
tap:function(args) | wrapper:
singleTap:function(args) | sdk:
doubleTap:function(args) | scrollButton:
longTap:function(args) | scrollUp:function()
swipe:function(args) | scrollDown:function()
swipeLeft:function(args) | scrollLeft:function()
swipeRight:function(args) | scrollRight:function()
swipeUp:function(args) | solidLevelBar:
swipeDown:function(args) | setting:
type:function(args) | color:function(object, value)
color:function(args) | level:function(object, value)
version:function(args) | defaultBracket:
direction:function(args) | setting:
orient:function(args) | coloring:function(object, value)
label:function(args) | defaultBarFrame:
altLabel:function(args) | template:
size:function(args) | setting:
state:function(args) | reverse:function(object, value)
class:function(args) | coloring:function(object, value)
style:function(args) | content:function(object, value)
flex:function(args) | headerControlsBefore:function(object, value)
flexC:function(args) | headerControlsAfter:function(object, value)
noTransition:function(args) | footerControlsBefore:function(object, value)
noEvent:function(args) | footerControlsAfter:function(object, value)
disabled:function(args) | label:function(object, value)
hidden:function(args) | altLabel:function(object, value)
fade:function(args) |
readOnly:function(args) | setting:
checked:function(args) | altLabel:function(object, sValue)
password:function(args) | attr:function(object, oValue)
inputValue:function(args) | class:function(object, oValue)
text:function(args) | children:function(object, value)
name:function(args) | color:function(object, sValue)
href:function(args) | colors:function(object, aValue)
src:function(args) | direction:function(object, sValue)
attrs:function(args) | disabled:function(object, bValue)
children:function(args) | fade:function(object, bValue)
colors:function(args) | flex:function(object, sValue)
html:function(args) | flexc:function(object, sValue)
leave:function(args) | hidden:function(object, bValue)
arrive:function(args) | href:function(object, sValue)
endcap:function(args) | html:function(object, sValue)
| inputValue:function(object, sValue)
definition:function(element, args) | label:function(object, sValue)
| name:function(object, sValue)
button: | group:function(object, sValue)
elbow: | noEvent:function(object, bValue)
bar: | noTransition:function(object, bValue)
cap: | password:function(object, bValue)
block: | readOnly:function(object, bValue)
oval: | reverse:function(object, bValue)
complexButton: | size:function(object, sValue)
settings: | src:function(object, sValue)
label:function(args) | state:function(object, sValue)
altLabel:function(args) | style:function(object, oValue)
text:function(args) | text:function(object, sValue)
| toggle:function(object, bValue)
radioInput: | toggleGroup:function(object, sValue)
| version:function(object, sValue)
radio: | arrive:function(object, fValue)
settings: | leave:function(object, fValue)
label:function(args) | event:function(object, oValue)
altLabel:function(args) | receiver:function(object, oValue)
text:function(args) | delete:function(object, oValue)
| click:function(object, value)
checkboxInput: | mouseenter:function(object, value)
| mouseleave:function(object, value)
checkbox: | mousedown:function(object, value)
settings: | mouseup:function(object, value)
label:function(args) | mousemove:function(object, value)
altLabel:function(args) | mouseout:function(object, value)
text:function(args) | mouseover:function(object, value)
| hover:function(object, value)
wrapper: | tapstart:function(object, value)
content: | tapend:function(object, value)
column: | tap:function(object, value)
row: | singletap:function(object, value)
title: | doubletap:function(object, value)
text: | taphold:function(object, value)
img: | swipe:function(object, value)
svg: | swipeup:function(object, value)
textInput: | swiperight:function(object, value)
bracket: | swipedown:function(object, value)
dialog: | swipeleft:function(object, value)
settings: | swipeend:function(object, value)
headerTitle:function(args) | scrollstart:function(object, value)
footerTitle:function(args) | scrollend:function(object, value)
content:function(args) | orientationchange:function(object, value)
htmlTag: | tap2:function(object, value)
| taphold2:function(object, value)
function radioCheckboxState(func) |
| helper:
$.fn.createObject = function(args) | toggleGroups:
$.fn.removeObject = function(success) | aRandColor: function(array)
$.fn.removeObjectSequence = function(args) | aRandColorGroup:function(array, iLength)
$.fn.showObject = function(args) | viewportScale: function(object, oArgs)
$.fn.showObjectSequence = function(args) | viewportZoom:function(object, oArgs)
$.fn.hideObject = function(args) | toggleCheck:function(dom, fValue)
$.fn.hideObjectSequence = function(args) |
$.fn.objectSettings = function(setting, args, success) | create:function(oDef)
$.fn.getDefinition = function() | delete:function(object)
$.fn.getChildren = function(id) |
$.fn.viewport = function(action, args) | $.fn.objectSet = function(setting, value)
$.fn.hasAttr = function(arg, string) |
$.fn.scrollingUp = function(args) |
$.fn.scrollingDown = function(args) |
$.fn.scrollingLeft = function(args) |
$.fn.scrollingRight = function(args) |
LCARS SDK CSS Changes:
3.11 --> 4.00 Base: italic --> text-italic span --> <eliminated:See ...> Flexbox Model: flexv --> flex-v flexcv --> flex-c-v flexh --> flex-h flexch --> flex-c-h Styling Classes: Button: button.pill --> button.round button.right --> button.round-right button.left --> button.round-left Cap: cap.left --> cap.round-left cap.right --> cap.round-right Complex Button: complexButton --> complex-button Duo & Duo Vertical Complex Button: (unchanged ...) complexButton.vertical --> complexButton.vertical complexButton.duo --> complexButton.duo Radio Complex Button: radio --> <eliminated:See ...> radio.checked --> <eliminated:See ...> Checkbox Complex Button: checkbox --> <eliminated:See ...> checkbox.checked --> <eliminated:See ...> Endcap Buttons: endcap.large --> endcap (ex. endcap.large.bottom-right --> endcap.bottom-right) Columns: column.flexv --> column.flex-v sdk.scrollButton --> scrollUp: --> scrollDown: --> scrollLeft: --> scrollRight: --> scrollButton.vertical --> sdk.scroll-button.vertical scrollButton.horizontal --> sdk.scroll-button.horizontal sdk.levelBar --> sdk.solid-level-bar sdk.bracket --> sdk.default-bracket sdk.dialog --> <eliminated:See default-bar-frame> sdk.default-bar-frame
LCARS SDK jquery startup change:
v3.11
var exampleUI = {type:'wrapper', id:'wpr_viewport', version:'row', flex:'h'};
$(document).on('ready', function(){
$(exampleUI).createObject({appendTo:'body'});
});
v4.00
var exampleUI = {type:'wrapper', id:'wpr_viewport', version:'row', flex:'h'};
$( document ).ready(function() {
$('body').append( LCARS.create(exampleUI).dom );
});
LCARS SDK javascript example changes:
v3.11 {type:'wrapper', class:'content', flexC:'v', style:' overflow:auto;'}
v4.0 {type:'wrapper', style:{'overflow':'auto'}, version:'content', flexc:'v'}
v3.11 {type:'bar', color:LCARS.colorGen(uiColors), flexC:'h'},
v4.0 {type:'bar', color:LCARS.helper.aRandColor(uiColors), flexc:'h'},
v3.11 {type:'elbow', version:'top-left', color:LCARS.colorGen(uiColors), class:'step-two'},
v4.0 {type:'elbow', version:'horizontal', direction:'top-left', color:LCARS.helper.aRandColor(uiColors), class:'step-two'},
v3.11 {type:'column', style:'justify-content: flex-end;', flexC:'v', flex:'v', children:[{type:'complexButton', text:'55', template:LCARS.templates.sdk.buttons.complexText.typeG, colors:LCARS.colorGroupGen(uiColors, 3)}]}
v4.0 {type:'column', style:{'justify-content':'flex-end'}, flexc:'v', flex:'v', children:[{type:'complexButton', children:[{type:'cap', version:'round-left'}, {type:'block'}, {type:'text', text:'55'}, {type:'button', version:'round-right'}], colors:LCARS.helper.aRandColorGroup(uiColors, 4)}]}
v3.11 {type:'bracket', template:bracket},
v4.0 {type:'defaultBracket', namespace:'sdk', coloring:{
elbow:LCARS.helper.aRandColor(uiColors),
column1:LCARS.helper.aRandColorGroup(uiColors, 3),
column2:LCARS.helper.aRandColorGroup(uiColors, 3),
column3:LCARS.helper.aRandColorGroup(uiColors, 3),
column4:LCARS.helper.aRandColorGroup(uiColors, 3),
animated:'bg-red-1'}},