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

UI: Optimize cross pipe render function.

Browse Source
This commit is contained in:
Igor Kulikov 2024-07-01 17:06:07 +03:00
parent dd8a89b706
commit 6d54263aae
1 changed files with 1 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
application/src/main/data/json/system/scada_symbols/cross-pipe.svg
View File

@ -8,7 +8,7 @@
],
"widgetSizeX": 1,
"widgetSizeY": 1,
"stateRenderFunction": "var horizontalLiquidPattern = ctx.svg.defs().findOne('pattern#horizontal-liquid');\nvar horizontalFluidElements = ctx.tags['horizontal-fluid'];\n\nif (horizontalLiquidPattern) {\n horizontalLiquidPattern.id(ctx.api.generateElementId());\n for (var i=0;i<horizontalFluidElements.length;i++) {\n horizontalFluidElements[i].fill(horizontalLiquidPattern);\n }\n} else {\n horizontalLiquidPattern = horizontalFluidElements[0].reference('fill');\n}\n\nvar verticalLiquidPattern = ctx.svg.defs().findOne('pattern#vertical-liquid');\nvar verticalFluidElements = ctx.tags['vertical-fluid'];\n\nif (verticalLiquidPattern) {\n verticalLiquidPattern.id(ctx.api.generateElementId());\n for (var i=0;i<verticalFluidElements.length;i++) {\n verticalFluidElements[i].fill(verticalLiquidPattern);\n }\n} else {\n verticalLiquidPattern = verticalFluidElements[0].reference('fill');\n}\n\nif (horizontalLiquidPattern) {\n var fluid = ctx.values.horizontalFluid && !ctx.values.leak;\n var flow = ctx.values.horizontalFlow;\n var flowDirection = ctx.values.horizontalFlowDirection;\n var flowAnimationSpeed = ctx.values.horizontalFlowAnimationSpeed;\n \n updateLiquidPatternAnimation(horizontalLiquidPattern, fluid, \n flow, flowDirection, flowAnimationSpeed);\n}\n\nif (verticalLiquidPattern) {\n var fluid = ctx.values.verticalFluid && !ctx.values.leak;\n var flow = ctx.values.verticalFlow;\n var flowDirection = ctx.values.verticalFlowDirection;\n var flowAnimationSpeed = ctx.values.verticalFlowAnimationSpeed;\n \n updateLiquidPatternAnimation(verticalLiquidPattern, fluid, \n flow, flowDirection, flowAnimationSpeed);\n}\n\nfunction updateLiquidPatternAnimation(liquidPattern, fluid, flow, flowDirection, flowAnimationSpeed) {\n var elementFluid = liquidPattern.remember('fluid');\n var elementFlow = null;\n var elementFlowDirection = null;\n \n if (fluid !== elementFluid) {\n liquidPattern.remember('fluid', fluid);\n elementFlow = null;\n elementFlowDirection = null;\n } else {\n elementFlow = liquidPattern.remember('flow');\n elementFlowDirection = liquidPattern.remember('flowDirection');\n }\n \n if (fluid) {\n if (flow !== elementFlow) {\n liquidPattern.remember('flow', flow);\n if (flow) {\n liquidPattern.remember('flowDirection', flowDirection);\n animateFlow(liquidPattern, flowDirection);\n } else {\n ctx.api.resetAnimation(liquidPattern);\n }\n } else if (flow && elementFlowDirection !== flowDirection) {\n liquidPattern.remember('flowDirection', flowDirection);\n animateFlow(liquidPattern, flowDirection);\n }\n if (flow && liquidPattern) {\n liquidPattern.timeline().speed(flowAnimationSpeed);\n }\n } else {\n ctx.api.resetAnimation(liquidPattern);\n }\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n ctx.api.resetAnimation(liquidPattern);\n var deltaX = forwardElseReverse ? 172 : -172;\n liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n}\n\n",
"stateRenderFunction": "var horizontalLiquidPattern = prepareLiquidPattern('horizontal-liquid', 'horizontal-fluid');\nvar verticalLiquidPattern = prepareLiquidPattern('vertical-liquid', 'vertical-fluid');\n\nif (horizontalLiquidPattern) {\n var fluid = ctx.values.horizontalFluid && !ctx.values.leak;\n var flow = ctx.values.horizontalFlow;\n var flowDirection = ctx.values.horizontalFlowDirection;\n var flowAnimationSpeed = ctx.values.horizontalFlowAnimationSpeed;\n \n updateLiquidPatternAnimation(horizontalLiquidPattern, fluid, \n flow, flowDirection, flowAnimationSpeed);\n}\n\nif (verticalLiquidPattern) {\n var fluid = ctx.values.verticalFluid && !ctx.values.leak;\n var flow = ctx.values.verticalFlow;\n var flowDirection = ctx.values.verticalFlowDirection;\n var flowAnimationSpeed = ctx.values.verticalFlowAnimationSpeed;\n \n updateLiquidPatternAnimation(verticalLiquidPattern, fluid, \n flow, flowDirection, flowAnimationSpeed);\n}\n\nfunction prepareLiquidPattern(patternId, fluidElementTag) {\n var liquidPattern = ctx.svg.defs().findOne('pattern#'+patternId);\n var fluidElements = ctx.tags[fluidElementTag];\n\n if (liquidPattern) {\n liquidPattern.id(ctx.api.generateElementId());\n for (var i=0;i<fluidElements.length;i++) {\n fluidElements[i].fill(liquidPattern);\n }\n } else {\n liquidPattern = fluidElements[0].reference('fill');\n }\n return liquidPattern;\n}\n\nfunction updateLiquidPatternAnimation(liquidPattern, fluid, flow, flowDirection, flowAnimationSpeed) {\n var elementFluid = liquidPattern.remember('fluid');\n var elementFlow = null;\n var elementFlowDirection = null;\n \n if (fluid !== elementFluid) {\n liquidPattern.remember('fluid', fluid);\n elementFlow = null;\n elementFlowDirection = null;\n } else {\n elementFlow = liquidPattern.remember('flow');\n elementFlowDirection = liquidPattern.remember('flowDirection');\n }\n \n if (fluid) {\n if (flow !== elementFlow) {\n liquidPattern.remember('flow', flow);\n if (flow) {\n liquidPattern.remember('flowDirection', flowDirection);\n animateFlow(liquidPattern, flowDirection);\n } else {\n ctx.api.resetAnimation(liquidPattern);\n }\n } else if (flow && elementFlowDirection !== flowDirection) {\n liquidPattern.remember('flowDirection', flowDirection);\n animateFlow(liquidPattern, flowDirection);\n }\n if (flow && liquidPattern) {\n liquidPattern.timeline().speed(flowAnimationSpeed);\n }\n } else {\n ctx.api.resetAnimation(liquidPattern);\n }\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n ctx.api.resetAnimation(liquidPattern);\n var deltaX = forwardElseReverse ? 172 : -172;\n liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n}\n\n",
"tags": [
{
"tag": "horizontal-fluid",

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 46 KiB