787 lines
22 KiB
Plaintext
787 lines
22 KiB
Plaintext
{
|
|
"custom": {},
|
|
"params": {
|
|
"color": "#FFFFFF"
|
|
},
|
|
"propConfig": {
|
|
"params.color": {
|
|
"paramDirection": "inout",
|
|
"persistent": true
|
|
}
|
|
},
|
|
"props": {
|
|
"defaultSize": {
|
|
"height": 380,
|
|
"width": 250
|
|
}
|
|
},
|
|
"root": {
|
|
"children": [
|
|
{
|
|
"meta": {
|
|
"name": "Color Palette"
|
|
},
|
|
"position": {
|
|
"grow": 1
|
|
},
|
|
"props": {
|
|
"alignContent": "flex-start",
|
|
"alignItems": "flex-start",
|
|
"elementPosition": {
|
|
"basis": "20px",
|
|
"grow": 0,
|
|
"shrink": 0
|
|
},
|
|
"instances": [
|
|
{
|
|
"color": "#FFFFFF"
|
|
},
|
|
{
|
|
"color": "#D5D5D5"
|
|
},
|
|
{
|
|
"color": "#AAAAAA"
|
|
},
|
|
{
|
|
"color": "#808080"
|
|
},
|
|
{
|
|
"color": "#555555"
|
|
},
|
|
{
|
|
"color": "#2B2B2B"
|
|
},
|
|
{
|
|
"color": "#000000"
|
|
},
|
|
{
|
|
"color": "#FFCCCC"
|
|
},
|
|
{
|
|
"color": "#FF8A8A"
|
|
},
|
|
{
|
|
"color": "#FF4747"
|
|
},
|
|
{
|
|
"color": "#FF0000"
|
|
},
|
|
{
|
|
"color": "#D90000"
|
|
},
|
|
{
|
|
"color": "#AC0000"
|
|
},
|
|
{
|
|
"color": "#800000"
|
|
},
|
|
{
|
|
"color": "#FFE8CC"
|
|
},
|
|
{
|
|
"color": "#FFCA8A"
|
|
},
|
|
{
|
|
"color": "#FFAC47"
|
|
},
|
|
{
|
|
"color": "#FF8C00"
|
|
},
|
|
{
|
|
"color": "#D97700"
|
|
},
|
|
{
|
|
"color": "#AC5F00"
|
|
},
|
|
{
|
|
"color": "#804600"
|
|
},
|
|
{
|
|
"color": "#FFFFCC"
|
|
},
|
|
{
|
|
"color": "#FFFF8A"
|
|
},
|
|
{
|
|
"color": "#FFFF47"
|
|
},
|
|
{
|
|
"color": "#FFFF00"
|
|
},
|
|
{
|
|
"color": "#D9D900"
|
|
},
|
|
{
|
|
"color": "#ACAC00"
|
|
},
|
|
{
|
|
"color": "#808000"
|
|
},
|
|
{
|
|
"color": "#CCFFCC"
|
|
},
|
|
{
|
|
"color": "#8AFF8A"
|
|
},
|
|
{
|
|
"color": "#47FF47"
|
|
},
|
|
{
|
|
"color": "#00FF00"
|
|
},
|
|
{
|
|
"color": "#00D900"
|
|
},
|
|
{
|
|
"color": "#00AC00"
|
|
},
|
|
{
|
|
"color": "#008000"
|
|
},
|
|
{
|
|
"color": "#CCFFFF"
|
|
},
|
|
{
|
|
"color": "#8AFFFF"
|
|
},
|
|
{
|
|
"color": "#47FFFF"
|
|
},
|
|
{
|
|
"color": "#00FFFF"
|
|
},
|
|
{
|
|
"color": "#00D9D9"
|
|
},
|
|
{
|
|
"color": "#00ACAC"
|
|
},
|
|
{
|
|
"color": "#008080"
|
|
},
|
|
{
|
|
"color": "#CCCCFF"
|
|
},
|
|
{
|
|
"color": "#8A8AFF"
|
|
},
|
|
{
|
|
"color": "#4747FF"
|
|
},
|
|
{
|
|
"color": "#0000FF"
|
|
},
|
|
{
|
|
"color": "#0000D9"
|
|
},
|
|
{
|
|
"color": "#0000AC"
|
|
},
|
|
{
|
|
"color": "#000080"
|
|
},
|
|
{
|
|
"color": "#FFCCFF"
|
|
},
|
|
{
|
|
"color": "#FF8AFF"
|
|
},
|
|
{
|
|
"color": "#FF47FF"
|
|
},
|
|
{
|
|
"color": "#FF00FF"
|
|
},
|
|
{
|
|
"color": "#D900D9"
|
|
},
|
|
{
|
|
"color": "#AC00AC"
|
|
},
|
|
{
|
|
"color": "#800080"
|
|
}
|
|
],
|
|
"key": "value",
|
|
"path": "Framework/Color Picker/Color",
|
|
"style": {
|
|
"backgroundColor": "#FFFFFF"
|
|
},
|
|
"useDefaultViewHeight": false,
|
|
"useDefaultViewWidth": false,
|
|
"wrap": "wrap"
|
|
},
|
|
"scripts": {
|
|
"customMethods": [],
|
|
"extensionFunctions": null,
|
|
"messageHandlers": [
|
|
{
|
|
"messageType": "color-clicked",
|
|
"pageScope": true,
|
|
"script": "\tcolor \u003d payload[\"color\"]\n\tself.view.params.color \u003d color",
|
|
"sessionScope": false,
|
|
"viewScope": false
|
|
}
|
|
]
|
|
},
|
|
"type": "ia.display.flex-repeater"
|
|
},
|
|
{
|
|
"children": [
|
|
{
|
|
"children": [
|
|
{
|
|
"meta": {
|
|
"name": "Label"
|
|
},
|
|
"position": {
|
|
"basis": "40px",
|
|
"shrink": 0
|
|
},
|
|
"props": {
|
|
"style": {
|
|
"marginLeft": "6px"
|
|
},
|
|
"text": "Red"
|
|
},
|
|
"type": "ia.display.label"
|
|
},
|
|
{
|
|
"children": [
|
|
{
|
|
"meta": {
|
|
"name": "NumericEntryField"
|
|
},
|
|
"position": {
|
|
"basis": "32px",
|
|
"shrink": 0
|
|
},
|
|
"propConfig": {
|
|
"props.value": {
|
|
"binding": {
|
|
"config": {
|
|
"path": "view.params.color"
|
|
},
|
|
"transforms": [
|
|
{
|
|
"code": "\ttry:\n\t\treturn int(value[1:3], 16)\n\texcept:\n\t\treturn None",
|
|
"type": "script"
|
|
}
|
|
],
|
|
"type": "property"
|
|
},
|
|
"onChange": {
|
|
"enabled": null,
|
|
"script": "\tif origin in [\"Browser\", \"BindingWriteback\"]:\n\t\tif currentValue.value !\u003d None:\n\t\t\tcolor \u003d self.view.params.color\n\t\t\thexColor \u003d hex(currentValue.value).replace(\"0x\",\"\").upper().replace(\"L\",\"\")\n\t\t\tif len(hexColor) \u003d\u003d 1:\n\t\t\t\thexColor \u003d \"0%s\" % hexColor\n\t\t\tcolor \u003d \"#\" + hexColor + color[3:]\n\t\t\tself.view.params.color \u003d color"
|
|
}
|
|
}
|
|
},
|
|
"props": {
|
|
"format": "0,0",
|
|
"inputBounds": {
|
|
"maximum": 255,
|
|
"minimum": 0
|
|
},
|
|
"style": {
|
|
"borderRadius": "4px"
|
|
}
|
|
},
|
|
"type": "ia.input.numeric-entry-field"
|
|
}
|
|
],
|
|
"meta": {
|
|
"name": "FlexContainer"
|
|
},
|
|
"position": {
|
|
"basis": "50px",
|
|
"shrink": 0
|
|
},
|
|
"props": {
|
|
"direction": "column",
|
|
"justify": "center",
|
|
"style": {
|
|
"marginLeft": "10px",
|
|
"marginRight": "10px"
|
|
}
|
|
},
|
|
"type": "ia.container.flex"
|
|
},
|
|
{
|
|
"meta": {
|
|
"name": "Slider"
|
|
},
|
|
"position": {
|
|
"grow": 1
|
|
},
|
|
"propConfig": {
|
|
"props.value": {
|
|
"binding": {
|
|
"config": {
|
|
"bidirectional": true,
|
|
"path": "../FlexContainer/NumericEntryField.props.value"
|
|
},
|
|
"type": "property"
|
|
}
|
|
}
|
|
},
|
|
"props": {
|
|
"labels": {
|
|
"interval": 42.5,
|
|
"show": true
|
|
},
|
|
"max": 255,
|
|
"style": {
|
|
"marginLeft": "10px",
|
|
"marginRight": "20px"
|
|
}
|
|
},
|
|
"type": "ia.input.slider"
|
|
}
|
|
],
|
|
"meta": {
|
|
"name": "FlexContainer"
|
|
},
|
|
"position": {
|
|
"basis": "72px",
|
|
"shrink": 0
|
|
},
|
|
"props": {
|
|
"style": {
|
|
"overflow": "hidden"
|
|
}
|
|
},
|
|
"type": "ia.container.flex"
|
|
}
|
|
],
|
|
"meta": {
|
|
"name": "FlexContainer"
|
|
},
|
|
"position": {
|
|
"shrink": 0
|
|
},
|
|
"props": {
|
|
"direction": "column"
|
|
},
|
|
"type": "ia.container.flex"
|
|
},
|
|
{
|
|
"children": [
|
|
{
|
|
"children": [
|
|
{
|
|
"meta": {
|
|
"name": "Label"
|
|
},
|
|
"position": {
|
|
"basis": "40px",
|
|
"shrink": 0
|
|
},
|
|
"props": {
|
|
"style": {
|
|
"marginLeft": "6px"
|
|
},
|
|
"text": "Blue"
|
|
},
|
|
"type": "ia.display.label"
|
|
},
|
|
{
|
|
"children": [
|
|
{
|
|
"meta": {
|
|
"name": "NumericEntryField"
|
|
},
|
|
"position": {
|
|
"basis": "32px",
|
|
"shrink": 0
|
|
},
|
|
"propConfig": {
|
|
"props.value": {
|
|
"binding": {
|
|
"config": {
|
|
"path": "view.params.color"
|
|
},
|
|
"transforms": [
|
|
{
|
|
"code": "\ttry:\n\t\treturn int(value[3:5], 16)\n\texcept:\n\t\treturn None",
|
|
"type": "script"
|
|
}
|
|
],
|
|
"type": "property"
|
|
},
|
|
"onChange": {
|
|
"enabled": null,
|
|
"script": "\tif origin in [\"Browser\", \"BindingWriteback\"]:\n\t\tif currentValue.value !\u003d None:\n\t\t\tcolor \u003d self.view.params.color\n\t\t\thexColor \u003d hex(currentValue.value).replace(\"0x\",\"\").upper().replace(\"L\",\"\")\n\t\t\tif len(hexColor) \u003d\u003d 1:\n\t\t\t\thexColor \u003d \"0%s\" % hexColor\n\t\t\tcolor \u003d \"#\" + color[1:3] + hexColor + color[5:]\n\t\t\tself.view.params.color \u003d color"
|
|
}
|
|
}
|
|
},
|
|
"props": {
|
|
"format": "0,0",
|
|
"inputBounds": {
|
|
"maximum": 255,
|
|
"minimum": 0
|
|
},
|
|
"style": {
|
|
"borderRadius": "4px"
|
|
}
|
|
},
|
|
"type": "ia.input.numeric-entry-field"
|
|
}
|
|
],
|
|
"meta": {
|
|
"name": "FlexContainer"
|
|
},
|
|
"position": {
|
|
"basis": "50px",
|
|
"shrink": 0
|
|
},
|
|
"props": {
|
|
"direction": "column",
|
|
"justify": "center",
|
|
"style": {
|
|
"marginLeft": "10px",
|
|
"marginRight": "10px"
|
|
}
|
|
},
|
|
"type": "ia.container.flex"
|
|
},
|
|
{
|
|
"meta": {
|
|
"name": "Slider"
|
|
},
|
|
"position": {
|
|
"grow": 1
|
|
},
|
|
"propConfig": {
|
|
"props.value": {
|
|
"binding": {
|
|
"config": {
|
|
"bidirectional": true,
|
|
"path": "../FlexContainer/NumericEntryField.props.value"
|
|
},
|
|
"type": "property"
|
|
}
|
|
}
|
|
},
|
|
"props": {
|
|
"labels": {
|
|
"interval": 42.5,
|
|
"show": true
|
|
},
|
|
"max": 255,
|
|
"style": {
|
|
"marginLeft": "10px",
|
|
"marginRight": "20px"
|
|
}
|
|
},
|
|
"type": "ia.input.slider"
|
|
}
|
|
],
|
|
"meta": {
|
|
"name": "FlexContainer"
|
|
},
|
|
"position": {
|
|
"basis": "72px",
|
|
"shrink": 0
|
|
},
|
|
"props": {
|
|
"style": {
|
|
"overflow": "hidden"
|
|
}
|
|
},
|
|
"type": "ia.container.flex"
|
|
}
|
|
],
|
|
"meta": {
|
|
"name": "FlexContainer_1"
|
|
},
|
|
"position": {
|
|
"shrink": 0
|
|
},
|
|
"props": {
|
|
"direction": "column"
|
|
},
|
|
"type": "ia.container.flex"
|
|
},
|
|
{
|
|
"children": [
|
|
{
|
|
"children": [
|
|
{
|
|
"meta": {
|
|
"name": "Label"
|
|
},
|
|
"position": {
|
|
"basis": "40px",
|
|
"shrink": 0
|
|
},
|
|
"props": {
|
|
"style": {
|
|
"marginLeft": "6px"
|
|
},
|
|
"text": "Green"
|
|
},
|
|
"type": "ia.display.label"
|
|
},
|
|
{
|
|
"children": [
|
|
{
|
|
"meta": {
|
|
"name": "NumericEntryField"
|
|
},
|
|
"position": {
|
|
"basis": "32px",
|
|
"shrink": 0
|
|
},
|
|
"propConfig": {
|
|
"props.value": {
|
|
"binding": {
|
|
"config": {
|
|
"path": "view.params.color"
|
|
},
|
|
"transforms": [
|
|
{
|
|
"code": "\ttry:\n\t\treturn int(value[5:], 16)\n\texcept:\n\t\treturn None",
|
|
"type": "script"
|
|
}
|
|
],
|
|
"type": "property"
|
|
},
|
|
"onChange": {
|
|
"enabled": null,
|
|
"script": "\tif origin in [\"Browser\", \"BindingWriteback\"]:\n\t\tif currentValue.value !\u003d None:\n\t\t\tcolor \u003d self.view.params.color\n\t\t\thexColor \u003d hex(currentValue.value).replace(\"0x\",\"\").upper().replace(\"L\",\"\")\n\t\t\tif len(hexColor) \u003d\u003d 1:\n\t\t\t\thexColor \u003d \"0%s\" % hexColor\n\t\t\tcolor \u003d \"#\" + color[1:5] + hexColor\n\t\t\tself.view.params.color \u003d color"
|
|
}
|
|
}
|
|
},
|
|
"props": {
|
|
"format": "0,0",
|
|
"inputBounds": {
|
|
"maximum": 255,
|
|
"minimum": 0
|
|
},
|
|
"style": {
|
|
"borderRadius": "4px"
|
|
}
|
|
},
|
|
"type": "ia.input.numeric-entry-field"
|
|
}
|
|
],
|
|
"meta": {
|
|
"name": "FlexContainer"
|
|
},
|
|
"position": {
|
|
"basis": "50px",
|
|
"shrink": 0
|
|
},
|
|
"props": {
|
|
"direction": "column",
|
|
"justify": "center",
|
|
"style": {
|
|
"marginLeft": "10px",
|
|
"marginRight": "10px"
|
|
}
|
|
},
|
|
"type": "ia.container.flex"
|
|
},
|
|
{
|
|
"meta": {
|
|
"name": "Slider"
|
|
},
|
|
"position": {
|
|
"grow": 1
|
|
},
|
|
"propConfig": {
|
|
"props.value": {
|
|
"binding": {
|
|
"config": {
|
|
"bidirectional": true,
|
|
"path": "../FlexContainer/NumericEntryField.props.value"
|
|
},
|
|
"type": "property"
|
|
}
|
|
}
|
|
},
|
|
"props": {
|
|
"labels": {
|
|
"interval": 42.5,
|
|
"show": true
|
|
},
|
|
"max": 255,
|
|
"style": {
|
|
"marginLeft": "10px",
|
|
"marginRight": "20px"
|
|
}
|
|
},
|
|
"type": "ia.input.slider"
|
|
}
|
|
],
|
|
"meta": {
|
|
"name": "FlexContainer"
|
|
},
|
|
"position": {
|
|
"basis": "72px",
|
|
"shrink": 0
|
|
},
|
|
"props": {
|
|
"style": {
|
|
"overflow": "hidden"
|
|
}
|
|
},
|
|
"type": "ia.container.flex"
|
|
}
|
|
],
|
|
"meta": {
|
|
"name": "FlexContainer_2"
|
|
},
|
|
"position": {
|
|
"shrink": 0
|
|
},
|
|
"props": {
|
|
"direction": "column"
|
|
},
|
|
"type": "ia.container.flex"
|
|
},
|
|
{
|
|
"children": [
|
|
{
|
|
"meta": {
|
|
"name": "Label"
|
|
},
|
|
"position": {
|
|
"shrink": 0
|
|
},
|
|
"props": {
|
|
"style": {
|
|
"marginLeft": "6px",
|
|
"marginRight": "6px"
|
|
},
|
|
"text": "Color"
|
|
},
|
|
"type": "ia.display.label"
|
|
},
|
|
{
|
|
"meta": {
|
|
"name": "TextField"
|
|
},
|
|
"position": {
|
|
"basis": "100px",
|
|
"shrink": 0
|
|
},
|
|
"propConfig": {
|
|
"props.text": {
|
|
"binding": {
|
|
"config": {
|
|
"bidirectional": true,
|
|
"path": "view.params.color"
|
|
},
|
|
"type": "property"
|
|
}
|
|
}
|
|
},
|
|
"props": {
|
|
"style": {
|
|
"borderRadius": "4px"
|
|
}
|
|
},
|
|
"type": "ia.input.text-field"
|
|
},
|
|
{
|
|
"meta": {
|
|
"name": "Label_0"
|
|
},
|
|
"position": {
|
|
"basis": "20px"
|
|
},
|
|
"propConfig": {
|
|
"props.style.backgroundColor": {
|
|
"binding": {
|
|
"config": {
|
|
"path": "view.params.color"
|
|
},
|
|
"type": "property"
|
|
}
|
|
}
|
|
},
|
|
"props": {
|
|
"style": {
|
|
"borderColor": "#D3D3D3",
|
|
"borderRadius": "32px",
|
|
"borderStyle": "solid",
|
|
"borderWidth": "1px",
|
|
"margin": "6px"
|
|
}
|
|
},
|
|
"type": "ia.display.label"
|
|
},
|
|
{
|
|
"children": [
|
|
{
|
|
"events": {
|
|
"component": {
|
|
"onActionPerformed": {
|
|
"config": {
|
|
"script": "\t## Send message back to view/component that called color picker popup\n\tsystem.perspective.sendMessage(\n\t\t\"updateFromColorPicker\",\n\t\tpayload\u003d{\"color\": self.view.params.color},\n\t\tscope\u003d\"session\"\n\t)\n\t## close color picker poup\n\tsystem.perspective.closePopup(\"ColorPicker\")"
|
|
},
|
|
"scope": "G",
|
|
"type": "script"
|
|
}
|
|
}
|
|
},
|
|
"meta": {
|
|
"name": "Button Update and Close",
|
|
"tooltip": {
|
|
"enabled": true,
|
|
"location": "center-left",
|
|
"text": "Update and close"
|
|
}
|
|
},
|
|
"props": {
|
|
"image": {
|
|
"icon": {
|
|
"path": "material/exit_to_app"
|
|
}
|
|
},
|
|
"text": ""
|
|
},
|
|
"type": "ia.input.button"
|
|
}
|
|
],
|
|
"meta": {
|
|
"name": "FlexContainer"
|
|
},
|
|
"position": {
|
|
"grow": 1
|
|
},
|
|
"props": {
|
|
"justify": "flex-end"
|
|
},
|
|
"type": "ia.container.flex"
|
|
}
|
|
],
|
|
"meta": {
|
|
"name": "FlexContainer_0"
|
|
},
|
|
"position": {
|
|
"basis": "32px",
|
|
"shrink": 0
|
|
},
|
|
"props": {
|
|
"style": {
|
|
"marginBottom": "10px",
|
|
"marginTop": "10px"
|
|
}
|
|
},
|
|
"type": "ia.container.flex"
|
|
}
|
|
],
|
|
"meta": {
|
|
"name": "root"
|
|
},
|
|
"props": {
|
|
"direction": "column",
|
|
"style": {
|
|
"classes": "Framework/ColorPicker/Container"
|
|
}
|
|
},
|
|
"type": "ia.container.flex"
|
|
}
|
|
} |