Tweaker
Introduction¶
Fine-tuning properties of target object. Reference
- Author: Rex
- Game object
Live demos¶
Usage¶
Install plugin¶
Load minify file¶
- Load plugin (minify file) in preload stage
scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI'); - Add tweaker object
var tweaker = scene.rexUI.add.tweaker(config);
Import plugin¶
- Install rex plugins from npm
npm i phaser3-rex-plugins - Install plugin in configuration of game
import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js'; var config = { // ... plugins: { scene: [{ key: 'rexUI', plugin: UIPlugin, mapping: 'rexUI' }, // ... ] } // ... }; var game = new Phaser.Game(config); - Add tweaker object
var tweaker = scene.rexUI.add.tweaker(config);
Import class¶
- Install rex plugins from npm
npm i phaser3-rex-plugins - Import class
import { Tweaker } from 'phaser3-rex-plugins/templates/ui/ui-components.js'; - Add tweaker object
var tweaker = new Tweaker(scene, config); scene.add.existing(tweaker);
Add tweaker object¶
var tweaker = scene.rexUI.add.tweaker({
// x: 0,
// y: 0,
// anchor: undefined,
// width: undefined,
// height: undefined,
// orientation: 0,
// style: { ... }
styles : {
itemWidth : 0,
inputRow: {
background: {
},
title: {
},
inputText: {
},
inputTextArea: {
height:
},
list: {
label: {
},
button: {
}
},
button: {
},
slider: {
track: {
},
indicator: {
},
thumb: {
}
},
colorInput: {
colorPicker: {
},
colorComponents: {
inputText: {
}
}
},
checkbox: {
},
toggleSwitch: {
},
space: {
left: 0, right: 0, top: 0, bottom: 0,
title: 0
}
},
separator: {
},
folder: {
},
tab: {
},
space: {
left: 0, right: 0, top: 0, bottom: 0, item: 0
},
},
// name: '',
// draggable: false,
// sizerEvents: false,
// enableLayer: false,
});
x,y: Position of this object, it is valid when this object is the top object.anchor: See anchor.left,right,centerX,x,top,bottom,centerY,y: Position based on visible window, which composed of- Percentage of visible width/height :
'p%', p:0~100.'left'(=0%),'center'(=50%),'right'(=100%)'top'(=0%),'center'(=50%),'bottom'(=100%)
- Offset :
'+n', or'-n'.
- Percentage of visible width/height :
width,height: Set size (invokeonResizeCallback) based on visible window, which composed of- Percentage of visible width/height :
'p%', p:0~100. - Padding :
'+n', or'-n'.
- Percentage of visible width/height :
onResizeCallback: A default resize callback will be assigned interanlly.
width,height: Minimum width, minimum height.orientation: Main orientation of the tweaker.'left-to-right','horizontal','h','x', or0: Arrange game objects from left ot right.'top-to-bottom','vertical','v','y', or1: Arrange game objects from top to bottom. Default value is1.
styles, orstyle: Styles settings of input rows, separator, folder, and tab. See Styles chapter for more detail.style.itemWidth: Width of input row, used iforientationis set to'y'(1).styles.space: Pads spaces.styles.space.left,styles.space.right,styles.space.top,styles.space.bottom: Space of bounds.styles.space.item: Space between 2 input rows.
name: Set name of this game object.draggable: Settrueto drag top-most object.sizerEvents: Settrueto fire sizer events. Default value isfalse.enableLayer:false: Add child game objects into scene's display list. Default behavior.true: Add child game objects into an internal layer game object. See also.
Custom class¶
- Define class
class MyTweaker extends RexPlugins.UI.Tweaker { constructor(scene, config) { super(scene, config); // ... scene.add.existing(this); } // ... } - Create instance
var tweaker = new MyTweaker(scene, config);
Add input row¶
An input row can fine-tuning properties of target object.
Text input row¶
object[key] is a text value.
tweaker.addInput(object, key, {
// view: 'string',
// icon: undefined,
// iconFrame: undefined,
// iconSize: undefined,
// title: undefined,
// orientation: 'x',
// monitor: false,
// key: undefined,
// autoUpdate: true,
// onValidate: undefined,
// onValueChange: undefined,
})
or
tweaker.addInput({
bindingTarget: object,
bindingKey: key,
// view: 'string',
// icon: undefined,
// iconFrame: undefined,
// iconSize: undefined,
// title: undefined,
// orientation: 'x',
// monitor: false,
// key: undefined,
// autoUpdate: true,
// onValidate: undefined,
// onValueChange: undefined,
})
bindingTarget: Binding target object.- Can bind target later via
tweaker.setBindingTarget(object).
- Can bind target later via
bindingKey: Bind to target's property key. Necessary fieldview: Set to'string', ifbindingTargetis not given.icon,iconFrame: Texture key, frame name of icon on title-label.iconSize: Fixed icon sizetitle: Display text of title-label. Default value is equal tokey.monitor:false: Don't update input text from current object. Default behavior.true: Update input text from current object, inpostupdateevent of scene.
key: Add this child into childMap, which could be read back bytweaker.getElement(key).undefined: Don't add this child. Default value.
autoUpdate:true: Update binding key when user input. Default behavior.false: UseonValueChangeto set value of binding key when user input.
onValidate:- Callback invoked when new value input.
function(newValue, oldValue, bindingTarget, bindingKey) { return true; }true: Accept this new value.false: Reject this new value.
undefined: Always accept new value changing. Default behavior.
- Callback invoked when new value input.
onValueChange:- Callback invoked when binding value changing.
function(newValue, oldValue, bindingTarget, bindingKey) { } undefined: Ignore this feature. Default value.
- Callback invoked when binding value changing.
Text-Area input row¶
object[key] is a text value.
tweaker.addInput(object, key, {
view: 'textarea',
// icon: undefined,
// iconFrame: undefined,
// iconSize: undefined,
// title: undefined,
// orientation: 'x',
// monitor: false,
// key: undefined,
// autoUpdate: true,
// onValidate: undefined,
// onValueChange: undefined,
})
or
tweaker.addInput({
bindingTarget: object,
bindingKey: key,
view: 'textarea',
// icon: undefined,
// iconFrame: undefined,
// iconSize: undefined,
// title: undefined,
// orientation: 'x',
// monitor: false,
// key: undefined,
// autoUpdate: true,
// onValidate: undefined,
// onValueChange: undefined,
})
bindingTarget: Binding target object.- Can bind target later via
tweaker.setBindingTarget(object).
- Can bind target later via
bindingKey: Bind to target's property key. Necessary fieldview:'textarea'.icon,iconFrame: Texture key, frame name of icon on title-label.iconSize: Fixed icon sizetitle: Display text of title-label. Default value is equal tokey.monitor:false: Don't update input text from current object. Default behavior.true: Update input text from current object, inpostupdateevent of scene.
key: Add this child into childMap, which could be read back bytweaker.getElement(key).undefined: Don't add this child. Default value.
autoUpdate:true: Update binding key when user input. Default behavior.false: UseonValueChangeto set value of binding key when user input.
onValidate:- Callback invoked when new value input.
function(newValue, oldValue, bindingTarget, bindingKey) { return true; }true: Accept this new value.false: Reject this new value.
undefined: Always accept new value changing. Default behavior.
- Callback invoked when new value input.
onValueChange:- Callback invoked when binding value changing.
function(newValue, oldValue, bindingTarget, bindingKey) { } undefined: Ignore this feature. Default value.
- Callback invoked when binding value changing.
Text input from list¶
object[key] is a text value.
tweaker.addInput(object, key, {
// view: 'list',
// icon: undefined,
// iconFrame: undefined,
// iconSize: undefined,
// title: undefined,
// orientation: 'x',
options: [
{text: text0, value: value0, /* icon: , iconFrame, .. */ },
{text: text1, value: value1, /* icon: , iconFrame, .. */ },
// ...
],
// monitor: false,
// key: undefined,
})
or
tweaker.addInput({
bindingTarget: object,
bindingKey: key,
// view: 'list',
// icon: undefined,
// iconFrame: undefined,
// iconSize: undefined,
// title: undefined,
// orientation: 'x',
options: [
{text: text0, value: value0, /* icon: , iconFrame, .. */ },
{text: text1, value: value1, /* icon: , iconFrame, .. */ },
// ...
],
// monitor: false,
// key: undefined,
})
bindingTarget: Binding target object.- Can bind target later via
tweaker.setBindingTarget(object).
- Can bind target later via
bindingKey: Bind to target's property key. Necessary fieldview: Set to'list', ifbindingTargetis not given.icon,iconFrame: Texture key, frame name of icon on title-label.iconSize: Fixed icon sizetitle: Display text of title-label. Default value is equal tokey.options: Option list, each item containstext: Display text.value: Setkeyto this value.icon,iconFrame, ... : See Reset display content of Label
monitor:false: Don't update input text from current object. Default behavior.true: Update input text from current object, inpostupdateevent of scene.
key: Add this child into childMap, which could be read back bytweaker.getElement(key).undefined: Don't add this child. Default value.
Text input from buttons¶
object[key] is a text value.
tweaker.addInput(object, key, {
view: 'buttons',
// icon: undefined,
// iconFrame: undefined,
// iconSize: undefined,
// title: undefined,
// orientation: 'x',
options: [
{text: text0, value: value0},
{text: text1, value: value1},
// ...
],
// monitor: false,
// key: undefined,
})
or
tweaker.addInput({
bindingTarget: object,
bindingKey: key,
view: 'buttons',
// icon: undefined,
// iconFrame: undefined,
// iconSize: undefined,
// title: undefined,
// orientation: 'x',
options: [
{text: text0, value: value0},
{text: text1, value: value1},
// ...
],
// monitor: false,
// key: undefined,
})
bindingTarget: Binding target object.- Can bind target later via
tweaker.setBindingTarget(object).
- Can bind target later via
bindingKey: Bind to target's property key. Necessary fieldview: Set to'buttons'.icon,iconFrame: Texture key, frame name of icon on title-label.iconSize: Fixed icon sizetitle: Display text of title-label. Default value is equal tokey.options: Option list, each item containstext: Display text.value: Setkeyto this value.
monitor:false: Don't update input text from current object. Default behavior.true: Update input text from current object, inpostupdateevent of scene.
key: Add this child into childMap, which could be read back bytweaker.getElement(key).undefined: Don't add this child. Default value.
Number input row¶
object[key] is a number value.
tweaker.addInput(object, key, {
// view: 'number',
// icon: undefined,
// iconFrame: undefined,
// iconSize: undefined,
// title: undefined,
// orientation: 'x',
// monitor: false,
// key: undefined,
})
or
tweaker.addInput({
bindingTarget: object,
bindingKey: key,
// view: 'number',
// icon: undefined,
// iconFrame: undefined,
// iconSize: undefined,
// title: undefined,
// orientation: 'x',
// monitor: false,
// key: undefined,
})
bindingTarget: Binding target object.- Can bind target later via
tweaker.setBindingTarget(object).
- Can bind target later via
bindingKey: Bind to target's property key. Necessary fieldview: Set to'number', ifbindingTargetis not given.icon,iconFrame: Texture key, frame name of icon on title-label.iconSize: Fixed icon sizetitle: Display text of title-label. Default value is equal tokey.monitor:false: Don't update input text from current object. Default behavior.true: Update input text from current object, inpostupdateevent of scene.
key: Add this child into childMap, which could be read back bytweaker.getElement(key).undefined: Don't add this child. Default value.
Number input in a range¶
object[key] is a number value.
tweaker.addInput(object, key, {
// view: 'range',
// icon: undefined,
// iconFrame: undefined,
// iconSize: undefined,
// title: undefined,
// orientation: 'x',
min: minValue,
max: maxValue,
// format: function(value) { return s; },
// inputTextReadOnly: false,
// monitor: false,
// key: undefined,
})
or
tweaker.addInput({
bindingTarget: object,
bindingKey: key,
// view: 'range',
// icon: undefined,
// iconFrame: undefined,
// iconSize: undefined,
// title: undefined,
// orientation: 'x',
min: minValue,
max: maxValue,
// format: function(value) { return s; },
// inputTextReadOnly: false,
// monitor: false,
// key: undefined,
})
bindingTarget: Binding target object.- Can bind target later via
tweaker.setBindingTarget(object).
- Can bind target later via
bindingKey: Bind to target's property key. Necessary fieldview: Set to'range', ifbindingTargetis not given.icon,iconFrame: Texture key, frame name of icon on title-label.iconSize: Fixed icon sizetitle: Display text of title-label. Default value is equal tokey.min,max: Minimum, maximun value of range.format: Callback to return formatted string for input text field.function(value) { return s; }inputTextReadOnly:false: Input text field is editable. Default behavior.true: Input text field is read-only.
monitor:false: Don't update input text from current object. Default behavior.true: Update input text from current object, inpostupdateevent of scene.
key: Add this child into childMap, which could be read back bytweaker.getElement(key).undefined: Don't add this child. Default value.
Number input from list¶
object[key] is a number value.
tweaker.addInput(object, key, {
// view: 'list',
// icon: undefined,
// iconFrame: undefined,
// iconSize: undefined,
// title: undefined,
// orientation: 'x',
options: [
{text: text0, value: value0},
{text: text1, value: value1},
// ...
],
// monitor: false,
// key: undefined,
})
or
tweaker.addInput({
bindingTarget: object,
bindingKey: key,
// view: 'list',
// icon: undefined,
// iconFrame: undefined,
// iconSize: undefined,
// title: undefined,
// orientation: 'x',
options: [
{text: text0, value: value0},
{text: text1, value: value1},
// ...
],
// monitor: false,
// key: undefined,
})
bindingTarget: Binding target object.- Can bind target later via
tweaker.setBindingTarget(object).
- Can bind target later via
bindingKey: Bind to target's property key. Necessary fieldview: Set to'list', ifbindingTargetis not given.icon,iconFrame: Texture key, frame name of icon on title-label.iconSize: Fixed icon sizetitle: Display text of title-label. Default value is equal tokey.options: Option list, each item containstext: Display text.value: Setkeyto this value.
monitor:false: Don't update input text from current object. Default behavior.true: Update input text from current object, inpostupdateevent of scene.
key: Add this child into childMap, which could be read back bytweaker.getElement(key).undefined: Don't add this child. Default value.
Number input from buttons¶
object[key] is a number value.
tweaker.addInput(object, key, {
view: 'buttons',
// icon: undefined,
// iconFrame: undefined,
// iconSize: undefined,
// title: undefined,
// orientation: 'x',
options: [
{text: text0, value: value0},
{text: text1, value: value1},
// ...
],
// monitor: false,
// key: undefined,
})
or
tweaker.addInput({
bindingTarget: object,
bindingKey: key,
view: 'buttons',
// icon: undefined,
// iconFrame: undefined,
// iconSize: undefined,
// title: undefined,
// orientation: 'x',
options: [
{text: text0, value: value0},
{text: text1, value: value1},
// ...
],
// monitor: false,
// key: undefined,
})
bindingTarget: Binding target object.- Can bind target later via
tweaker.setBindingTarget(object).
- Can bind target later via
bindingKey: Bind to target's property key. Necessary fieldview: Set to'buttons'.icon,iconFrame: Texture key, frame name of icon on title-label.iconSize: Fixed icon sizetitle: Display text of title-label. Default value is equal tokey.options: Option list, each item containstext: Display text.value: Setkeyto this value.
monitor:false: Don't update input text from current object. Default behavior.true: Update input text from current object, inpostupdateevent of scene.
key: Add this child into childMap, which could be read back bytweaker.getElement(key).undefined: Don't add this child. Default value.
Color input¶
object[key] is a number value.
tweaker.addInput(object, key, {
view: 'color',
// icon: undefined,
// iconFrame: undefined,
// iconSize: undefined,
// title: undefined,
// orientation: 'x',
// monitor: false,
// key: undefined,
})
or
tweaker.addInput({
bindingTarget: object,
bindingKey: key,
view: 'color',
// icon: undefined,
// iconFrame: undefined,
// iconSize: undefined,
// title: undefined,
// orientation: 'x',
// monitor: false,
// key: undefined,
})
bindingTarget: Binding target object.- Can bind target later via
tweaker.setBindingTarget(object).
- Can bind target later via
bindingKey: Bind to target's property key. Necessary fieldview: Set to'color'.icon,iconFrame: Texture key, frame name of icon on title-label.iconSize: Fixed icon sizetitle: Display text of title-label. Default value is equal tokey.monitor:false: Don't update input text from current object. Default behavior.true: Update input text from current object, inpostupdateevent of scene.
key: Add this child into childMap, which could be read back bytweaker.getElement(key).undefined: Don't add this child. Default value.
Boolean input row¶
object[key] is a boolean value.
tweaker.addInput(object, key, {
// view: 'boolean',
// icon: undefined,
// iconFrame: undefined,
// iconSize: undefined,
// title: undefined,
// orientation: 'x',
// monitor: false,
// key: undefined,
})
or
tweaker.addInput({
bindingTarget: object,
bindingKey: key,
// view: 'boolean',
// view: 'toggleSwitch',
// icon: undefined,
// iconFrame: undefined,
// iconSize: undefined,
// title: undefined,
// orientation: 'x',
// monitor: false,
// key: undefined,
})
bindingTarget: Binding target object.- Can bind target later via
tweaker.setBindingTarget(object).
- Can bind target later via
bindingKey: Bind to target's property key. Necessary fieldview: Set to'boolean', or'toggleSwitch', ifbindingTargetis not given.'boolean': Checkbox input. Default behavior.'toggleSwitch': Toggle switch input.
icon,iconFrame: Texture key, frame name of icon on title-label.iconSize: Fixed icon sizetitle: Display text of title-label. Default value is equal tokey.monitor:false: Don't update input text from current object. Default behavior.true: Update input text from current object, inpostupdateevent of scene.
key: Add this child into childMap, which could be read back bytweaker.getElement(key).undefined: Don't add this child. Default value.
Value callbacks row¶
tweaker.addInput({
bindingTarget: object,
onGetValue(bindingTarget) {
},
onSetValue(bindingTarget, value) {
},
view: ,
// Other properties..
// icon: undefined,
// iconFrame: undefined,
// iconSize: undefined,
// title: undefined,
// orientation: 'x',
// monitor: false,
// key: undefined,
})
bindingTarget: Binding target object.- Can bind target later via
tweaker.setBindingTarget(object).
- Can bind target later via
onGetValue: Callback to get dispaly valuefunction(bindingTarget) { return value; }onSetValue: Callback to set value to bindingTargetfunction(bindingTarget, value) { }view: Any kind of view listed before.icon,iconFrame: Texture key, frame name of icon on title-label.iconSize: Fixed icon sizetitle: Display text of title-label. Default value is equal tokey.monitor:false: Don't update input text from current object. Default behavior.true: Update input text from current object, inpostupdateevent of scene.
key: Add this child into childMap, which could be read back bytweaker.getElement(key).undefined: Don't add this child. Default value.
Note
No bindingKey parameter in this case.
Add button¶
tweaker.addButton({
// bindingTarget: object,
// icon: undefined,
// iconFrame: undefined,
// iconSize: undefined,
title: undefined,
label: undefined,
callback: function(target) {},
// key: undefined,
})
bindingTarget: Binding target will pass to callback. Optional.- Can bind target later via
tweaker.setBindingTarget(object).
- Can bind target later via
icon,iconFrame: Texture key, frame name of icon on title-label.iconSize: Fixed icon sizetitle: Display text of title-label.label: Display text of button, a string or a plain object.{ text: '', icon: undefined, iconFrame: undefined, iconSize: undefined, action: undefined, actionFrame: undefined, actionSize: undefined, }callback: Callback when clicking buttonfunction(target) { }key: Add this child into childMap, which could be read back bytweaker.getElement(key).undefined: Don't add this child. Default value.
See Styles of botton
Add buttons¶
tweaker.addButtons({
// bindingTarget: object,
// icon: undefined,
// iconFrame: undefined,
// iconSize: undefined,
title: undefined,
buttons:[
{
label: undefined,
callback: function(target) {},
},
{
label: undefined,
callback: function(target) {},
},
// ...
],
wrap: false,
// key: undefined,
})
bindingTarget: Binding target will pass to callback. Optional.- Can bind target later via
tweaker.setBindingTarget(object).
- Can bind target later via
icon,iconFrame: Texture key, frame name of icon on title-label.iconSize: Fixed icon sizetitle: Display text of title-label.buttons: Array of button label and button callback{ label: undefined, callback: function(target) {}, }-
label: Display text of button, a string or a plain object. ```javascript { text: '',icon: undefined, iconFrame: undefined, iconSize: undefined, action: undefined, actionFrame: undefined, actionSize: undefined,}
`` -callback: Callback when clicking buttonwrap-function(target) { }: Layout mode of buttons. -true: [fixwidth-sizer](ui-fixwidthsizer.md) layout. -false: [sizer](ui-sizer.md) layout. Default behavior. -key: Add this child into childMap, which could be read back bytweaker.getElement(key). -undefined` : Don't add this child. Default value.
-
See Styles of botton
Add separator¶
tweaker.addSeparator();
Add folder¶
Folder contains collapsible child tweaker game object.
var childTweaker = tweaker.addFolder({
title: titleA,
// expanded: true,
});
// childTweaker.addInput(...)
childTweaker: Child tweaker game object. Add input rows byaddInputmethod.titleTitle of folder. Click title can collapse or expand child tweaker game object.expanded:true: Expand child tweaker game object at beginning. Default behavior.false: Collapse child tweaker game object at beginning.
See Styles of folder
Add tab¶
Tab containes pages. Each page is a tweaker game object.
var childrenTweakers = tweaker.addTab({
pages: [
{
title: titleA,
// show: false
},
{
title: titleB
// show: false
},
// ...
]
});
// childrenTweakers[0].addInput(...)
// childrenTweakers[1].addInput(...)
childrenTweakers: Array of children tweaker game object. Add input rows byaddInputmethod.pages: Array of page setting.{ title: titleA, show: false, }title: Display text of page titleshow: Set totrueto show this page at beginning
See Styles of tab
Layout children¶
Arrange position of all elements.
tweaker.layout();
See also - dirty
Styles¶
Styles of text input¶
Style of text-area input is defined in
styles.inputRow.titlestyles.inputRow.inputTextstyles.inputRow.background
{
// style: {...}
styles: {
inputRow: {
background: {
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
title: {
background: {
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
text: {
fontFamily: 'Courier',
fontSize: '16px',
fontStyle: '',
backgroundColor: null,
color: '#fff',
stroke: '#fff',
strokeThickness: 0,
shadow: {
offsetX: 0,
offsetY: 0,
color: '#000',
blur: 0,
stroke: false,
fill: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
// more text styles
},
iconSize: undefined,
iconWidth: undefined, iconHeight: undefined,
space: {
left: 0, right: 0, top: 0, bottom:0,
icon: 0, text: 0
}
},
inputText: {
background: {
color: null,
color2: null,
horizontalGradient: true,
stroke: null,
strokeThickness: 2,
cornerRadius: 0,
cornerIteration: null
},
focusStyle: {
// color:
// color2:
// horizontalGradient:
// stroke:
// strokeThickness:
// cornerRadius:
// cornerIteration:
},
style: {
bold: false,
italic: false,
fontSize: '16px',
fontFamily: 'Courier',
color: '#fff',
stroke: '#fff',
strokeThickness: 0,
shadowColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 0,
backgroundColor: null,
backgroundHeight: undefined,
backgroundBottomY: undefined,
offsetX: 0,
offsetY: 0
},
cursorStyle: {
// bold:
// italic:
// fontSize:
// fontFamily:
// color:
// stroke:
// strokeThickness:
// shadowColor:
// shadowOffsetX:
// shadowOffsetY:
// shadowBlur:
// backgroundColor:
// backgroundHeight:
// backgroundBottomY:
// offsetX:
// offsetY:
}
},
space: {
left: 0, right: 0, top: 0, bottom: 0,
title: 0
},
proportion: {
title: 0, inputField: 0,
}
}
}
}
Styles of text-area input¶
Style of text-area input is defined in
styles.inputRow.titlestyles.inputRow.inputTextAreastyles.inputRow.inputTextstyles.inputRow.sliderstyles.inputRow.background
{
// style: {...}
styles: {
inputRow: {
background: {
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
title: {
background: {
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
text: {
fontFamily: 'Courier',
fontSize: '16px',
fontStyle: '',
backgroundColor: null,
color: '#fff',
stroke: '#fff',
strokeThickness: 0,
shadow: {
offsetX: 0,
offsetY: 0,
color: '#000',
blur: 0,
stroke: false,
fill: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
// more text styles
},
iconSize: undefined,
iconWidth: undefined, iconHeight: undefined,
space: {
left: 0, right: 0, top: 0, bottom:0,
icon: 0, text: 0
}
},
inputTextArea: {
height: undefined,
text: {
},
slider: {
// ...
}
},
inputText: {
background: {
color: null,
color2: null,
horizontalGradient: true,
stroke: null,
strokeThickness: 2,
cornerRadius: 0,
cornerIteration: null
},
focusStyle: {
// color:
// color2:
// horizontalGradient:
// stroke:
// strokeThickness:
// cornerRadius:
// cornerIteration:
},
style: {
bold: false,
italic: false,
fontSize: '16px',
fontFamily: 'Courier',
color: '#fff',
stroke: '#fff',
strokeThickness: 0,
shadowColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 0,
backgroundColor: null,
backgroundHeight: undefined,
backgroundBottomY: undefined,
offsetX: 0,
offsetY: 0
},
cursorStyle: {
// bold:
// italic:
// fontSize:
// fontFamily:
// color:
// stroke:
// strokeThickness:
// shadowColor:
// shadowOffsetX:
// shadowOffsetY:
// shadowBlur:
// backgroundColor:
// backgroundHeight:
// backgroundBottomY:
// offsetX:
// offsetY:
}
},
slider: {
track: {
height: 0,
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
indicator: {
height: 0,
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
thumb: {
width: 0, height: 0,
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
}
},
space: {
left: 0, right: 0, top: 0, bottom: 0,
title: 0
},
proportion: {
title: 0, inputField: 0,
}
}
}
}
Style of text-area is defined at styles.inputRow.inputTextArea :
- Define style of input text at
styles.inputRow.inputTextArea.text, if not given, it will usestyles.inputRow.inputText. - Define style of slider at
styles.inputRow.inputTextArea.slider, if not given, it will usestyles.inputRow.slider.
Styles of list input¶
Style of text/number list input is defined in
styles.inputRow.titlestyles.inputRow.liststyles.inputRow.background
{
// style: {...}
styles: {
inputRow: {
background: {
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
title: {
background: {
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
text: {
fontFamily: 'Courier',
fontSize: '16px',
fontStyle: '',
backgroundColor: null,
color: '#fff',
stroke: '#fff',
strokeThickness: 0,
shadow: {
offsetX: 0,
offsetY: 0,
color: '#000',
blur: 0,
stroke: false,
fill: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
// more text styles
},
iconSize: undefined,
iconWidth: undefined, iconHeight: undefined,
space: {
left: 0, right: 0, top: 0, bottom:0,
icon: 0, text: 0
}
},
list: {
label: {
background: {
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
text: {
fontFamily: 'Courier',
fontSize: '16px',
fontStyle: '',
backgroundColor: null,
color: '#fff',
stroke: '#fff',
strokeThickness: 0,
shadow: {
offsetX: 0,
offsetY: 0,
color: '#000',
blur: 0,
stroke: false,
fill: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
// more text styles
},
iconSize: undefined,
iconWidth: undefined, iconHeight: undefined,
space: {
left: 0, right: 0, top: 0, bottom:0,
icon: 0, text: 0
}
},
button: {
background: {
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
'hover.color': undefined,
'hover.alpha': undefined,
'hover.strokeColor': undefined,
'hover.strokeAlpha': undefined,
'hover.strokeWidth': undefined,
},
text: {
fontFamily: 'Courier',
fontSize: '16px',
fontStyle: '',
backgroundColor: null,
color: '#fff',
stroke: '#fff',
strokeThickness: 0,
shadow: {
offsetX: 0,
offsetY: 0,
color: '#000',
blur: 0,
stroke: false,
fill: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
// more text styles
},
iconSize: undefined,
iconWidth: undefined, iconHeight: undefined,
space: {
left: 0, right: 0, top: 0, bottom:0,
icon: 0, text: 0
}
},
list: {
alignParent: 'text',
alignSide: 'left',
expandDirection: 'down',
}
},
space: {
left: 0, right: 0, top: 0, bottom: 0,
title: 0
},
proportion: {
title: 0, inputField: 0,
}
}
}
}
Styles of buttons input¶
Style of buttons input is defined in
styles.inputRow.titlestyles.inputRow.buttonstyles.inputRow.background
{
// style: {...}
styles: {
inputRow: {
background: {
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
title: {
background: {
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
text: {
fontFamily: 'Courier',
fontSize: '16px',
fontStyle: '',
backgroundColor: null,
color: '#fff',
stroke: '#fff',
strokeThickness: 0,
shadow: {
offsetX: 0,
offsetY: 0,
color: '#000',
blur: 0,
stroke: false,
fill: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
// more text styles
},
iconSize: undefined,
iconWidth: undefined, iconHeight: undefined,
space: {
left: 0, right: 0, top: 0, bottom:0,
icon: 0, text: 0
}
},
button: {
background: {
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
text: {
fontFamily: 'Courier',
fontSize: '16px',
fontStyle: '',
backgroundColor: null,
color: '#fff',
stroke: '#fff',
strokeThickness: 0,
shadow: {
offsetX: 0,
offsetY: 0,
color: '#000',
blur: 0,
stroke: false,
fill: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
// more text styles
},
iconSize: undefined,
iconWidth: undefined, iconHeight: undefined,
space: {
left: 0, right: 0, top: 0, bottom:0,
icon: 0, text: 0
},
expand: true
},
space: {
left: 0, right: 0, top: 0, bottom: 0,
title: 0
},
proportion: {
title: 0, inputField: 0,
}
}
}
}
Styles of range input¶
Style of range input is defined in
styles.inputRow.title,styles.inputRow.sliderstyles.inputRow.inputTextstyles.inputRow.background
{
// style: {...}
styles: {
inputRow: {
background: {
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
title: {
background: {
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
text: {
fontFamily: 'Courier',
fontSize: '16px',
fontStyle: '',
backgroundColor: null,
color: '#fff',
stroke: '#fff',
strokeThickness: 0,
shadow: {
offsetX: 0,
offsetY: 0,
color: '#000',
blur: 0,
stroke: false,
fill: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
// more text styles
},
iconSize: undefined,
iconWidth: undefined, iconHeight: undefined,
space: {
left: 0, right: 0, top: 0, bottom:0,
icon: 0, text: 0
}
},
slider: {
track: {
height: 0,
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
indicator: {
height: 0,
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
thumb: {
width: 0, height: 0,
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
}
}
inputText: {
background: {
color: null,
color2: null,
horizontalGradient: true,
stroke: null,
strokeThickness: 2,
cornerRadius: 0,
cornerIteration: null
},
focusStyle: {
// color:
// color2:
// horizontalGradient:
// stroke:
// strokeThickness:
// cornerRadius:
// cornerIteration:
},
style: {
bold: false,
italic: false,
fontSize: '16px',
fontFamily: 'Courier',
color: '#fff',
stroke: '#fff',
strokeThickness: 0,
shadowColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 0,
backgroundColor: null,
backgroundHeight: undefined,
backgroundBottomY: undefined,
offsetX: 0,
offsetY: 0
},
cursorStyle: {
// bold:
// italic:
// fontSize:
// fontFamily:
// color:
// stroke:
// strokeThickness:
// shadowColor:
// shadowOffsetX:
// shadowOffsetY:
// shadowBlur:
// backgroundColor:
// backgroundHeight:
// backgroundBottomY:
// offsetX:
// offsetY:
}
},
space: {
left: 0, right: 0, top: 0, bottom: 0,
title: 0
},
proportion: {
title: 0, inputField: 0,
range: {
slider: 0,
inputText: 0,
}
}
}
}
}
- Set
proportion.range.sliderandproportion.range.inputTextto layout slider and inputText.
Styles of color input¶
Style of color input is defined in
styles.inputRow.title,styles.inputRow.inputTextstyles.inputRow.colorInputstyles.inputRow.background
{
// style: {...}
styles: {
inputRow: {
background: {
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
title: {
background: {
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
text: {
fontFamily: 'Courier',
fontSize: '16px',
fontStyle: '',
backgroundColor: null,
color: '#fff',
stroke: '#fff',
strokeThickness: 0,
shadow: {
offsetX: 0,
offsetY: 0,
color: '#000',
blur: 0,
stroke: false,
fill: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
// more text styles
},
iconSize: undefined,
iconWidth: undefined, iconHeight: undefined,
space: {
left: 0, right: 0, top: 0, bottom:0,
icon: 0, text: 0
}
},
colorInput: {
swatch: {
radius: 0,
size: undefined,
},
inputText: {
background: {
color: null,
color2: null,
horizontalGradient: true,
stroke: null,
strokeThickness: 2,
cornerRadius: 0,
cornerIteration: null
},
focusStyle: {
// color:
// color2:
// horizontalGradient:
// stroke:
// strokeThickness:
// cornerRadius:
// cornerIteration:
},
style: {
bold: false,
italic: false,
fontSize: '16px',
fontFamily: 'Courier',
color: '#fff',
stroke: '#fff',
strokeThickness: 0,
shadowColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 0,
backgroundColor: null,
backgroundHeight: undefined,
backgroundBottomY: undefined,
offsetX: 0,
offsetY: 0
},
cursorStyle: {
// bold:
// italic:
// fontSize:
// fontFamily:
// color:
// stroke:
// strokeThickness:
// shadowColor:
// shadowOffsetX:
// shadowOffsetY:
// shadowBlur:
// backgroundColor:
// backgroundHeight:
// backgroundBottomY:
// offsetX:
// offsetY:
}
},
// inputText: false,
colorPicker: {
background: {
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
}
},
colorComponents: {
inputText: {
background: {
color: null,
color2: null,
horizontalGradient: true,
stroke: null,
strokeThickness: 2,
cornerRadius: 0,
cornerIteration: null
},
focusStyle: {
// color:
// color2:
// horizontalGradient:
// stroke:
// strokeThickness:
// cornerRadius:
// cornerIteration:
},
style: {
bold: false,
italic: false,
fontSize: '16px',
fontFamily: 'Courier',
color: '#fff',
stroke: '#fff',
strokeThickness: 0,
shadowColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 0,
backgroundColor: null,
backgroundHeight: undefined,
backgroundBottomY: undefined,
offsetX: 0,
offsetY: 0
},
cursorStyle: {
// bold:
// italic:
// fontSize:
// fontFamily:
// color:
// stroke:
// strokeThickness:
// shadowColor:
// shadowOffsetX:
// shadowOffsetY:
// shadowBlur:
// backgroundColor:
// backgroundHeight:
// backgroundBottomY:
// offsetX:
// offsetY:
}
}
}
// colorComponents: false,
},
space: {
left: 0, right: 0, top: 0, bottom: 0,
title: 0
},
proportion: {
title: 0, inputField: 0,
}
}
}
}
Styles of boolean input¶
Style of boolean input is defined in
styles.inputRow.title,styles.inputRow.checkbox, orstyles.inputRow.toggleSwitchstyles.inputRow.background
{
// style: {...}
styles: {
inputRow: {
background: {
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
title: {
background: {
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
text: {
fontFamily: 'Courier',
fontSize: '16px',
fontStyle: '',
backgroundColor: null,
color: '#fff',
stroke: '#fff',
strokeThickness: 0,
shadow: {
offsetX: 0,
offsetY: 0,
color: '#000',
blur: 0,
stroke: false,
fill: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
// more text styles
},
iconSize: undefined,
iconWidth: undefined, iconHeight: undefined,
space: {
left: 0, right: 0, top: 0, bottom:0,
icon: 0, text: 0
}
},
// For checkbox view
checkbox: {
// size: undefined,
color: 0x005cb2,
boxFillAlpha: 1,
uncheckedColor: null,
uncheckedBoxFillAlpha: 1,
boxLineWidth: 4,
boxStrokeColor: 0x005cb2,
boxStrokeAlpha: 1,
uncheckedBoxStrokeColor: 0x005cb2,
uncheckedBoxStrokeAlpha: 1,
checkerColor: 0xffffff,
checkerAlpha: 1,
circleBox: false
animationDuration: 150,
readOnly: false,
},
// For toggle switch view
toggleSwitch: {
// size: undefined,
color: 0x005cb2,
trackFillAlpha: 1,
falseValueTrackColor: undefined,
falseValueTrackFillAlpha: 1,
thumbColor: 0xffffff,
thumbAlpha: 1,
trackWidth: 0.9,
trackHeight: 0.5,
trackCornerRadius: (trackHeight * 0.5),
thumbHeight: (trackHeight * 0.9),
thumbWidth: (thumbHeight),
thumbCornerRadius: (thumbHeight * 0.5),
thumbLeft: 0.3,
thumbRight: (1 - thumbLeft),
rtl: false,
animationDuration: 150,
readOnly: false,
},
space: {
left: 0, right: 0, top: 0, bottom: 0,
title: 0
},
proportion: {
title: 0, inputField: 0,
}
}
}
}
Styles of botton¶
Style of button is defined in
styles.inputRow.title,styles.inputRow.buttonstyles.inputRow.background
{
// style: {...}
styles: {
inputRow: {
background: {
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
title: {
background: {
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
text: {
fontFamily: 'Courier',
fontSize: '16px',
fontStyle: '',
backgroundColor: null,
color: '#fff',
stroke: '#fff',
strokeThickness: 0,
shadow: {
offsetX: 0,
offsetY: 0,
color: '#000',
blur: 0,
stroke: false,
fill: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
// more text styles
},
iconSize: undefined,
iconWidth: undefined, iconHeight: undefined,
space: {
left: 0, right: 0, top: 0, bottom:0,
icon: 0, text: 0
}
},
button: {
background: {
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
text: {
fontFamily: 'Courier',
fontSize: '16px',
fontStyle: '',
backgroundColor: null,
color: '#fff',
stroke: '#fff',
strokeThickness: 0,
shadow: {
offsetX: 0,
offsetY: 0,
color: '#000',
blur: 0,
stroke: false,
fill: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
// more text styles
},
iconSize: undefined,
iconWidth: undefined, iconHeight: undefined,
space: {
left: 0, right: 0, top: 0, bottom:0,
icon: 0, text: 0
}
},
space: {
left: 0, right: 0, top: 0, bottom: 0,
title: 0
},
proportion: {
title: 0, inputField: 0,
}
}
}
}
Styles of separator¶
Style of separator is defined in
styles.separator
{
// style: {...}
styles: {
separator: {
height: 0,
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
}
}
}
Styles of folder¶
Style of folder is defined in
styles.folder
{
// style: {...}
styles: {
folder: {
title: {
background: {
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
text: {
fontFamily: 'Courier',
fontSize: '16px',
fontStyle: '',
backgroundColor: null,
color: '#fff',
stroke: '#fff',
strokeThickness: 0,
shadow: {
offsetX: 0,
offsetY: 0,
color: '#000',
blur: 0,
stroke: false,
fill: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
// more text styles
},
iconSize: undefined,
iconWidth: undefined, iconHeight: undefined,
space: {
left: 0, right: 0, top: 0, bottom:0,
icon: 0, text: 0
},
expandedIcon: {
color: undefined,
alpha: 1,
strokeColor: undefined,
strokeAlpha: 1,
strokeWidth: 1,
arrowOnly: false,
easeDuration: 0,
}
},
background: {
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
},
space: {
left: 0, right: 0, top: 0, bottom:0,
}
}
}
}
Styles of tab¶
Style of tab is defined in
styles.tab
{
// style: {...}
styles: {
tab: {
tab: {
background: {
radius: 0,
// radius: {tl: {x,y}, tr: {x,y}, bl: {x,y}, br: {x,y}}
color: undefined,
alpha: undefined,
strokeColor: undefined,
strokeAlpha: undefined,
strokeWidth: undefined,
'active.color': undefined,
'active.alpha': undefined,
'active.strokeColor': undefined,
'active.strokeAlpha': undefined,
'active.strokeWidth': undefined,
},
text: {
fontFamily: 'Courier',
fontSize: '16px',
fontStyle: '',
backgroundColor: null,
color: '#fff',
stroke: '#fff',
strokeThickness: 0,
shadow: {
offsetX: 0,
offsetY: 0,
color: '#000',
blur: 0,
stroke: false,
fill: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
// more text styles
},
iconSize: undefined,
iconWidth: undefined, iconHeight: undefined,
space: {
left: 0, right: 0, top: 0, bottom:0,
icon: 0, text: 0
}
},
wrapTabs: false,
tabs: {
space: {
left: 0, right: 0, top: 0, bottom:0,
item: 0,
}
},
pages: {
fadeIn: 0,
}
}
}
}
Bind target¶
All input rows will bind to this new target, and update display status.
tweaker.setBindingTarget(object);
Get element¶
- Get by key
var gameObject = tweaker.getElement(key);key: Add bykeyparameter intweaker.addInput(config)methodtweaker.addInput({ key: ... })
- Get by name
or
var gameObject = tweaker.getElement('#' + name); // var gameObject = pages.getElement('#' + name, recursive);var gameObject = tweaker.getByName(name); // var gameObject = tweaker.getByName(name, recursive);recursive: Settrueto search all children recursively.