dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #12711 from ArtemDzhereleiko/AD/scada/flow-meter-decimal-value

Browse Source 
Add property decimals for flow meter symbol
This commit is contained in:
Andrew Shvayka 2025-02-19 18:51:48 +02:00 committed by GitHub
commit a1a84acf2b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 147 additions and 494 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
application/src/main/data/json/system/scada_symbols/bottom-flow-meter.svg
View File

@ -57,7 +57,7 @@
}, },
{ {
"tag": "value", "tag": "value",
"stateRenderFunction": "var value = ctx.values.value;\nctx.api.text(element, value.toFixed(0));\n", "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, '', false);\nctx.api.text(element, value);\n",
"actions": { "actions": {
"click": { "click": {
"actionFunction": "ctx.api.callAction(event, 'displayClick');" "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@ -463,16 +463,20 @@
"name": "{i18n:scada.symbol.units}", "name": "{i18n:scada.symbol.units}",
"type": "units", "type": "units",
"default": "m³/hr", "default": "m³/hr",
"required": null,
"subLabel": null,
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "medium-width", "fieldClass": "medium-width",
"min": null, "disabled": false,
"max": null, "visible": true
"step": null },
{
"id": "valueDecimals",
"name": "{i18n:scada.symbol.decimals}",
"type": "number",
"default": 0,
"fieldClass": "medium-width",
"min": 0,
"step": 1,
"disabled": false,
"visible": true
}, },
{ {
"id": "defaultBorderColor", "id": "defaultBorderColor",
@ -511,16 +515,8 @@
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, },
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "activeBorderColor", "id": "activeBorderColor",
@ -559,16 +555,8 @@
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, },
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "warningBorderColor", "id": "warningBorderColor",
@ -607,16 +595,8 @@
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, },
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "criticalBorderColor", "id": "criticalBorderColor",
@ -655,16 +635,8 @@
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, },
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "backgroundColor", "id": "backgroundColor",
@ -703,48 +675,24 @@
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, },
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "fluidColor", "id": "fluidColor",
"name": "{i18n:scada.symbol.fluid-color}", "name": "{i18n:scada.symbol.fluid-color}",
"type": "color", "type": "color",
"default": "#1EC1F480", "default": "#1EC1F480",
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "pipeColor", "id": "pipeColor",
"name": "{i18n:scada.symbol.pipe-color}", "name": "{i18n:scada.symbol.pipe-color}",
"type": "color", "type": "color",
"default": "#FFFFFF", "default": "#FFFFFF",
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
} }
] ]
}]]></tb:metadata> }]]></tb:metadata>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 73 KiB

108
application/src/main/data/json/system/scada_symbols/horizontal-inline-flow-meter.svg
View File

@ -57,7 +57,7 @@
}, },
{ {
"tag": "value", "tag": "value",
"stateRenderFunction": "var value = ctx.values.value;\nctx.api.text(element, value.toFixed(0));\n", "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, '', false);\nctx.api.text(element, value);\n",
"actions": { "actions": {
"click": { "click": {
"actionFunction": "ctx.api.callAction(event, 'displayClick');" "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@ -463,16 +463,20 @@
"name": "{i18n:scada.symbol.units}", "name": "{i18n:scada.symbol.units}",
"type": "units", "type": "units",
"default": "m³/hr", "default": "m³/hr",
"required": null,
"subLabel": null,
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "medium-width", "fieldClass": "medium-width",
"min": null, "disabled": false,
"max": null, "visible": true
"step": null },
{
"id": "valueDecimals",
"name": "{i18n:scada.symbol.decimals}",
"type": "number",
"default": 0,
"fieldClass": "medium-width",
"min": 0,
"step": 1,
"disabled": false,
"visible": true
}, },
{ {
"id": "defaultBorderColor", "id": "defaultBorderColor",
@ -511,16 +515,8 @@
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, },
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "activeBorderColor", "id": "activeBorderColor",
@ -559,16 +555,8 @@
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, },
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "warningBorderColor", "id": "warningBorderColor",
@ -607,16 +595,8 @@
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, },
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "criticalBorderColor", "id": "criticalBorderColor",
@ -655,16 +635,8 @@
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, },
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "backgroundColor", "id": "backgroundColor",
@ -703,48 +675,24 @@
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, },
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "fluidColor", "id": "fluidColor",
"name": "{i18n:scada.symbol.fluid-color}", "name": "{i18n:scada.symbol.fluid-color}",
"type": "color", "type": "color",
"default": "#1EC1F480", "default": "#1EC1F480",
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "pipeColor", "id": "pipeColor",
"name": "{i18n:scada.symbol.pipe-color}", "name": "{i18n:scada.symbol.pipe-color}",
"type": "color", "type": "color",
"default": "#FFFFFF", "default": "#FFFFFF",
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
} }
] ]
}]]></tb:metadata> }]]></tb:metadata>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 77 KiB

After

Width:  |  Height:  |  Size: 76 KiB

104
application/src/main/data/json/system/scada_symbols/left-flow-meter.svg
View File

@ -57,7 +57,7 @@
}, },
{ {
"tag": "value", "tag": "value",
"stateRenderFunction": "var value = ctx.values.value;\nctx.api.text(element, value.toFixed(0));\n", "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, '', false);\nctx.api.text(element, value);\n",
"actions": { "actions": {
"click": { "click": {
"actionFunction": "ctx.api.callAction(event, 'displayClick');" "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@ -463,16 +463,16 @@
"name": "{i18n:scada.symbol.units}", "name": "{i18n:scada.symbol.units}",
"type": "units", "type": "units",
"default": "m³/hr", "default": "m³/hr",
"required": null, "fieldClass": "medium-width"
"subLabel": null, },
"divider": null, {
"fieldSuffix": null, "id": "valueDecimals",
"disableOnProperty": null, "name": "{i18n:scada.symbol.decimals}",
"rowClass": "", "type": "number",
"default": 0,
"fieldClass": "medium-width", "fieldClass": "medium-width",
"min": null, "min": 0,
"max": null, "step": 1
"step": null
}, },
{ {
"id": "defaultBorderColor", "id": "defaultBorderColor",
@ -510,17 +510,7 @@
"rangeAdvanced": [] "rangeAdvanced": []
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, }
"required": null,
"subLabel": null,
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "activeBorderColor", "id": "activeBorderColor",
@ -558,17 +548,7 @@
"rangeAdvanced": [] "rangeAdvanced": []
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, }
"required": null,
"subLabel": null,
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "warningBorderColor", "id": "warningBorderColor",
@ -606,17 +586,7 @@
"rangeAdvanced": [] "rangeAdvanced": []
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, }
"required": null,
"subLabel": null,
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "criticalBorderColor", "id": "criticalBorderColor",
@ -654,17 +624,7 @@
"rangeAdvanced": [] "rangeAdvanced": []
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, }
"required": null,
"subLabel": null,
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "backgroundColor", "id": "backgroundColor",
@ -702,49 +662,19 @@
"rangeAdvanced": [] "rangeAdvanced": []
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, }
"required": null,
"subLabel": null,
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "fluidColor", "id": "fluidColor",
"name": "{i18n:scada.symbol.fluid-color}", "name": "{i18n:scada.symbol.fluid-color}",
"type": "color", "type": "color",
"default": "#1EC1F480", "default": "#1EC1F480"
"required": null,
"subLabel": null,
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "pipeColor", "id": "pipeColor",
"name": "{i18n:scada.symbol.pipe-color}", "name": "{i18n:scada.symbol.pipe-color}",
"type": "color", "type": "color",
"default": "#FFFFFF", "default": "#FFFFFF"
"required": null,
"subLabel": null,
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
} }
] ]
}]]></tb:metadata> }]]></tb:metadata>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 72 KiB

104
application/src/main/data/json/system/scada_symbols/right-flow-meter.svg
View File

@ -57,7 +57,7 @@
}, },
{ {
"tag": "value", "tag": "value",
"stateRenderFunction": "var value = ctx.values.value;\nctx.api.text(element, value.toFixed(0));\n", "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, '', false);\nctx.api.text(element, value);\n",
"actions": { "actions": {
"click": { "click": {
"actionFunction": "ctx.api.callAction(event, 'displayClick');" "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@ -463,16 +463,16 @@
"name": "{i18n:scada.symbol.units}", "name": "{i18n:scada.symbol.units}",
"type": "units", "type": "units",
"default": "m³/hr", "default": "m³/hr",
"required": null, "fieldClass": "medium-width"
"subLabel": null, },
"divider": null, {
"fieldSuffix": null, "id": "valueDecimals",
"disableOnProperty": null, "name": "{i18n:scada.symbol.decimals}",
"rowClass": "", "type": "number",
"default": 0,
"fieldClass": "medium-width", "fieldClass": "medium-width",
"min": null, "min": 0,
"max": null, "step": 1
"step": null
}, },
{ {
"id": "defaultBorderColor", "id": "defaultBorderColor",
@ -510,17 +510,7 @@
"rangeAdvanced": [] "rangeAdvanced": []
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, }
"required": null,
"subLabel": null,
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "activeBorderColor", "id": "activeBorderColor",
@ -558,17 +548,7 @@
"rangeAdvanced": [] "rangeAdvanced": []
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, }
"required": null,
"subLabel": null,
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "warningBorderColor", "id": "warningBorderColor",
@ -606,17 +586,7 @@
"rangeAdvanced": [] "rangeAdvanced": []
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, }
"required": null,
"subLabel": null,
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "criticalBorderColor", "id": "criticalBorderColor",
@ -654,17 +624,7 @@
"rangeAdvanced": [] "rangeAdvanced": []
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, }
"required": null,
"subLabel": null,
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "backgroundColor", "id": "backgroundColor",
@ -702,49 +662,19 @@
"rangeAdvanced": [] "rangeAdvanced": []
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, }
"required": null,
"subLabel": null,
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "fluidColor", "id": "fluidColor",
"name": "{i18n:scada.symbol.fluid-color}", "name": "{i18n:scada.symbol.fluid-color}",
"type": "color", "type": "color",
"default": "#1EC1F480", "default": "#1EC1F480"
"required": null,
"subLabel": null,
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "pipeColor", "id": "pipeColor",
"name": "{i18n:scada.symbol.pipe-color}", "name": "{i18n:scada.symbol.pipe-color}",
"type": "color", "type": "color",
"default": "#FFFFFF", "default": "#FFFFFF"
"required": null,
"subLabel": null,
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
} }
] ]
}]]></tb:metadata> }]]></tb:metadata>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 72 KiB

108
application/src/main/data/json/system/scada_symbols/top-flow-meter.svg
View File

@ -57,7 +57,7 @@
}, },
{ {
"tag": "value", "tag": "value",
"stateRenderFunction": "var value = ctx.values.value;\nctx.api.text(element, value.toFixed(0));\n", "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, '', false);\nctx.api.text(element, value);\n",
"actions": { "actions": {
"click": { "click": {
"actionFunction": "ctx.api.callAction(event, 'displayClick');" "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@ -463,16 +463,20 @@
"name": "{i18n:scada.symbol.units}", "name": "{i18n:scada.symbol.units}",
"type": "units", "type": "units",
"default": "m³/hr", "default": "m³/hr",
"required": null,
"subLabel": null,
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "medium-width", "fieldClass": "medium-width",
"min": null, "disabled": false,
"max": null, "visible": true
"step": null },
{
"id": "valueDecimals",
"name": "{i18n:scada.symbol.decimals}",
"type": "number",
"default": 0,
"fieldClass": "medium-width",
"min": 0,
"step": 1,
"disabled": false,
"visible": true
}, },
{ {
"id": "defaultBorderColor", "id": "defaultBorderColor",
@ -511,16 +515,8 @@
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, },
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "activeBorderColor", "id": "activeBorderColor",
@ -559,16 +555,8 @@
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, },
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "warningBorderColor", "id": "warningBorderColor",
@ -607,16 +595,8 @@
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, },
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "criticalBorderColor", "id": "criticalBorderColor",
@ -655,16 +635,8 @@
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, },
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "backgroundColor", "id": "backgroundColor",
@ -703,48 +675,24 @@
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, },
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "fluidColor", "id": "fluidColor",
"name": "{i18n:scada.symbol.fluid-color}", "name": "{i18n:scada.symbol.fluid-color}",
"type": "color", "type": "color",
"default": "#1EC1F480", "default": "#1EC1F480",
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "pipeColor", "id": "pipeColor",
"name": "{i18n:scada.symbol.pipe-color}", "name": "{i18n:scada.symbol.pipe-color}",
"type": "color", "type": "color",
"default": "#FFFFFF", "default": "#FFFFFF",
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
} }
] ]
}]]></tb:metadata> }]]></tb:metadata>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 72 KiB

108
application/src/main/data/json/system/scada_symbols/vertical-inline-flow-meter.svg
View File

@ -57,7 +57,7 @@
}, },
{ {
"tag": "value", "tag": "value",
"stateRenderFunction": "var value = ctx.values.value;\nctx.api.text(element, value.toFixed(0));\n", "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, '', false);\nctx.api.text(element, value);\n",
"actions": { "actions": {
"click": { "click": {
"actionFunction": "ctx.api.callAction(event, 'displayClick');" "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@ -463,16 +463,20 @@
"name": "{i18n:scada.symbol.units}", "name": "{i18n:scada.symbol.units}",
"type": "units", "type": "units",
"default": "m³/hr", "default": "m³/hr",
"required": null,
"subLabel": null,
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "medium-width", "fieldClass": "medium-width",
"min": null, "disabled": false,
"max": null, "visible": true
"step": null },
{
"id": "valueDecimals",
"name": "{i18n:scada.symbol.decimals}",
"type": "number",
"default": 0,
"fieldClass": "medium-width",
"min": 0,
"step": 1,
"disabled": false,
"visible": true
}, },
{ {
"id": "defaultBorderColor", "id": "defaultBorderColor",
@ -511,16 +515,8 @@
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, },
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "activeBorderColor", "id": "activeBorderColor",
@ -559,16 +555,8 @@
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, },
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "warningBorderColor", "id": "warningBorderColor",
@ -607,16 +595,8 @@
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, },
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "criticalBorderColor", "id": "criticalBorderColor",
@ -655,16 +635,8 @@
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, },
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "backgroundColor", "id": "backgroundColor",
@ -703,48 +675,24 @@
}, },
"colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';" "colorFunction": "var temperature = value;\nif (typeof temperature !== undefined) {\n var percent = (temperature + 60)/120 * 100;\n return tinycolor.mix('blue', 'red', percent).toHexString();\n}\nreturn 'blue';"
}, },
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "fluidColor", "id": "fluidColor",
"name": "{i18n:scada.symbol.fluid-color}", "name": "{i18n:scada.symbol.fluid-color}",
"type": "color", "type": "color",
"default": "#1EC1F480", "default": "#1EC1F480",
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
}, },
{ {
"id": "pipeColor", "id": "pipeColor",
"name": "{i18n:scada.symbol.pipe-color}", "name": "{i18n:scada.symbol.pipe-color}",
"type": "color", "type": "color",
"default": "#FFFFFF", "default": "#FFFFFF",
"required": null, "disabled": false,
"subLabel": null, "visible": true
"divider": null,
"fieldSuffix": null,
"disableOnProperty": null,
"rowClass": "",
"fieldClass": "",
"min": null,
"max": null,
"step": null
} }
] ]
}]]></tb:metadata> }]]></tb:metadata>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 77 KiB

After

Width:  |  Height:  |  Size: 76 KiB

1
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -3218,6 +3218,7 @@
"bottom-fluid-color": "Bottom fluid color", "bottom-fluid-color": "Bottom fluid color",
"display": "Display", "display": "Display",
"value": "Value", "value": "Value",
"decimals": "Decimals",
"units": "Units", "units": "Units",
"flow-meter-value-hint": "Double value showing on flow meter display", "flow-meter-value-hint": "Double value showing on flow meter display",
"value-hint": "Double value indicating the current value", "value-hint": "Double value indicating the current value",