iobroker.mywebui 1.51.0 → 1.52.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/default-controls/controls/pipes/Short_Horizontal_Pipe.control +1 -1
- package/default-controls/controls/pipes/Short_Vertical_Pipe.control +1 -1
- package/default-controls/controls/pipes/pipe_90deg_curve1.control +1 -1
- package/default-controls/controls/pipes/pipe_90deg_curve2.control +1 -1
- package/default-controls/controls/pipes/pipe_90deg_curve3.control +1 -1
- package/default-controls/controls/pipes/pipe_90deg_curve4.control +1 -1
- package/default-controls/controls/pipes/pipe_tee.control +1 -1
- package/dist/backend/3d-editor-integration.js +1 -1
- package/dist/backend/ImportmapCreator.js +1 -1
- package/dist/backend/UploadHelper.js +1 -1
- package/dist/backend/main.js +1 -1
- package/io-package.json +1 -1
- package/package.json +1 -1
- package/www/3d-editor/js/Animation.js +1 -1
- package/www/3d-editor/js/AnimationResizer.js +1 -1
- package/www/3d-editor/js/Command.js +1 -1
- package/www/3d-editor/js/Config.js +1 -1
- package/www/3d-editor/js/Editor.js +1 -1
- package/www/3d-editor/js/EditorControls.js +1 -1
- package/www/3d-editor/js/GLTFImportDialog.js +1 -1
- package/www/3d-editor/js/History.js +1 -1
- package/www/3d-editor/js/Loader.js +1 -1
- package/www/3d-editor/js/LoaderUtils.js +1 -1
- package/www/3d-editor/js/Menubar.Add.js +1 -1
- package/www/3d-editor/js/Menubar.Edit.js +1 -1
- package/www/3d-editor/js/Menubar.File.js +1 -1
- package/www/3d-editor/js/Menubar.Help.js +1 -1
- package/www/3d-editor/js/Menubar.Render.js +1 -1
- package/www/3d-editor/js/Menubar.Status.js +1 -1
- package/www/3d-editor/js/Menubar.View.js +1 -1
- package/www/3d-editor/js/Menubar.js +1 -1
- package/www/3d-editor/js/Player.js +1 -1
- package/www/3d-editor/js/Resizer.js +1 -1
- package/www/3d-editor/js/Script.js +1 -1
- package/www/3d-editor/js/Selector.js +1 -1
- package/www/3d-editor/js/Sidebar.Geometry.BoxGeometry.js +1 -1
- package/www/3d-editor/js/Sidebar.Geometry.BufferGeometry.js +1 -1
- package/www/3d-editor/js/Sidebar.Geometry.CapsuleGeometry.js +1 -1
- package/www/3d-editor/js/Sidebar.Geometry.CircleGeometry.js +1 -1
- package/www/3d-editor/js/Sidebar.Geometry.CylinderGeometry.js +1 -1
- package/www/3d-editor/js/Sidebar.Geometry.DodecahedronGeometry.js +1 -1
- package/www/3d-editor/js/Sidebar.Geometry.ExtrudeGeometry.js +1 -1
- package/www/3d-editor/js/Sidebar.Geometry.IcosahedronGeometry.js +1 -1
- package/www/3d-editor/js/Sidebar.Geometry.LatheGeometry.js +1 -1
- package/www/3d-editor/js/Sidebar.Geometry.Modifiers.js +1 -1
- package/www/3d-editor/js/Sidebar.Geometry.OctahedronGeometry.js +1 -1
- package/www/3d-editor/js/Sidebar.Geometry.PlaneGeometry.js +1 -1
- package/www/3d-editor/js/Sidebar.Geometry.RingGeometry.js +1 -1
- package/www/3d-editor/js/Sidebar.Geometry.ShapeGeometry.js +1 -1
- package/www/3d-editor/js/Sidebar.Geometry.SphereGeometry.js +1 -1
- package/www/3d-editor/js/Sidebar.Geometry.TetrahedronGeometry.js +1 -1
- package/www/3d-editor/js/Sidebar.Geometry.TextGeometry.js +1 -1
- package/www/3d-editor/js/Sidebar.Geometry.TorusGeometry.js +1 -1
- package/www/3d-editor/js/Sidebar.Geometry.TorusKnotGeometry.js +1 -1
- package/www/3d-editor/js/Sidebar.Geometry.TubeGeometry.js +1 -1
- package/www/3d-editor/js/Sidebar.Geometry.js +1 -1
- package/www/3d-editor/js/Sidebar.Material.BooleanProperty.js +1 -1
- package/www/3d-editor/js/Sidebar.Material.ColorProperty.js +1 -1
- package/www/3d-editor/js/Sidebar.Material.ConstantProperty.js +1 -1
- package/www/3d-editor/js/Sidebar.Material.MapProperty.js +1 -1
- package/www/3d-editor/js/Sidebar.Material.NumberProperty.js +1 -1
- package/www/3d-editor/js/Sidebar.Material.Program.js +1 -1
- package/www/3d-editor/js/Sidebar.Material.RangeValueProperty.js +1 -1
- package/www/3d-editor/js/Sidebar.Material.js +1 -1
- package/www/3d-editor/js/Sidebar.Object.js +1 -1
- package/www/3d-editor/js/Sidebar.Project.App.js +1 -1
- package/www/3d-editor/js/Sidebar.Project.Materials.js +1 -1
- package/www/3d-editor/js/Sidebar.Project.Renderer.js +1 -1
- package/www/3d-editor/js/Sidebar.Project.Resources.js +1 -1
- package/www/3d-editor/js/Sidebar.Project.js +1 -1
- package/www/3d-editor/js/Sidebar.Properties.js +1 -1
- package/www/3d-editor/js/Sidebar.Scene.js +1 -1
- package/www/3d-editor/js/Sidebar.Script.js +1 -1
- package/www/3d-editor/js/Sidebar.Settings.History.js +1 -1
- package/www/3d-editor/js/Sidebar.Settings.Shortcuts.js +1 -1
- package/www/3d-editor/js/Sidebar.Settings.js +1 -1
- package/www/3d-editor/js/Sidebar.js +1 -1
- package/www/3d-editor/js/Storage.js +1 -1
- package/www/3d-editor/js/Strings.js +1 -1
- package/www/3d-editor/js/TextureParametersDialog.js +1 -1
- package/www/3d-editor/js/Toolbar.js +1 -1
- package/www/3d-editor/js/Viewport.Controls.js +1 -1
- package/www/3d-editor/js/Viewport.Info.js +1 -1
- package/www/3d-editor/js/Viewport.Pathtracer.js +1 -1
- package/www/3d-editor/js/Viewport.ViewHelper.js +1 -1
- package/www/3d-editor/js/Viewport.XR.js +1 -1
- package/www/3d-editor/js/Viewport.js +1 -1
- package/www/3d-editor/js/commands/AddObjectCommand.js +1 -1
- package/www/3d-editor/js/commands/AddScriptCommand.js +1 -1
- package/www/3d-editor/js/commands/Commands.js +1 -1
- package/www/3d-editor/js/commands/MoveObjectCommand.js +1 -1
- package/www/3d-editor/js/commands/MultiCmdsCommand.js +1 -1
- package/www/3d-editor/js/commands/RemoveObjectCommand.js +1 -1
- package/www/3d-editor/js/commands/RemoveScriptCommand.js +1 -1
- package/www/3d-editor/js/commands/SetColorCommand.js +1 -1
- package/www/3d-editor/js/commands/SetGeometryCommand.js +1 -1
- package/www/3d-editor/js/commands/SetGeometryValueCommand.js +1 -1
- package/www/3d-editor/js/commands/SetMaterialColorCommand.js +1 -1
- package/www/3d-editor/js/commands/SetMaterialCommand.js +1 -1
- package/www/3d-editor/js/commands/SetMaterialMapCommand.js +1 -1
- package/www/3d-editor/js/commands/SetMaterialRangeCommand.js +1 -1
- package/www/3d-editor/js/commands/SetMaterialValueCommand.js +1 -1
- package/www/3d-editor/js/commands/SetMaterialVectorCommand.js +1 -1
- package/www/3d-editor/js/commands/SetPositionCommand.js +1 -1
- package/www/3d-editor/js/commands/SetRotationCommand.js +1 -1
- package/www/3d-editor/js/commands/SetScaleCommand.js +1 -1
- package/www/3d-editor/js/commands/SetSceneCommand.js +1 -1
- package/www/3d-editor/js/commands/SetScriptValueCommand.js +1 -1
- package/www/3d-editor/js/commands/SetShadowValueCommand.js +1 -1
- package/www/3d-editor/js/commands/SetTextureParametersCommand.js +1 -1
- package/www/3d-editor/js/commands/SetUuidCommand.js +1 -1
- package/www/3d-editor/js/commands/SetValueCommand.js +1 -1
- package/www/dist/frontend/bundle/chunk-3C6XC7RW.js +1 -1
- package/www/dist/frontend/bundle/chunk-43HEBO5G.js +3 -3
- package/www/dist/frontend/bundle/chunk-5MUGMRXU.js +1 -1
- package/www/dist/frontend/bundle/chunk-5UBRCTRX.js +3 -3
- package/www/dist/frontend/bundle/chunk-65A3PNMG.js +1 -1
- package/www/dist/frontend/bundle/chunk-7CWDQGAG.js +3 -3
- package/www/dist/frontend/bundle/chunk-7PT7IGUJ.js +3 -3
- package/www/dist/frontend/bundle/chunk-AI5PDLDE.js +3 -3
- package/www/dist/frontend/bundle/chunk-AWKVUUKN.js +2 -2
- package/www/dist/frontend/bundle/chunk-B6NXWGSB.js +1 -1
- package/www/dist/frontend/bundle/chunk-BHSHNRXW.js +1 -1
- package/www/dist/frontend/bundle/chunk-BVONDEOL.js +3 -3
- package/www/dist/frontend/bundle/chunk-DNCD2F6X.js +2 -2
- package/www/dist/frontend/bundle/chunk-FHF6DL5U.js +1 -1
- package/www/dist/frontend/bundle/chunk-FO56TEZH.js +3 -3
- package/www/dist/frontend/bundle/chunk-JBDSDK2C.js +3 -3
- package/www/dist/frontend/bundle/chunk-K6IV7LKW.js +1 -1
- package/www/dist/frontend/bundle/chunk-KY73TL6O.js +3 -3
- package/www/dist/frontend/bundle/chunk-MECWXZRN.js +1 -1
- package/www/dist/frontend/bundle/chunk-NQ7L7KNT.js +3 -3
- package/www/dist/frontend/bundle/chunk-P7EOR36H.js +1 -1
- package/www/dist/frontend/bundle/chunk-PJYK24KZ.js +1 -1
- package/www/dist/frontend/bundle/chunk-QJJGP23I.js +1 -1
- package/www/dist/frontend/bundle/chunk-QV4IBWXA.js +1 -1
- package/www/dist/frontend/bundle/chunk-R6IQDPAP.js +3 -3
- package/www/dist/frontend/bundle/chunk-SE6N4ZEN.js +1 -1
- package/www/dist/frontend/bundle/chunk-SQHXO2IT.js +3 -3
- package/www/dist/frontend/bundle/chunk-UIP324PP.js +1 -1
- package/www/dist/frontend/bundle/chunk-V4C5FGJL.js +3 -3
- package/www/dist/frontend/bundle/chunk-WED7CGWA.js +3 -3
- package/www/dist/frontend/bundle/chunk-WQ5H5LTG.js +2 -2
- package/www/dist/frontend/bundle/chunk-WU54NCEU.js +1 -1
- package/www/dist/frontend/bundle/chunk-XFO5FUCN.js +1 -1
- package/www/dist/frontend/bundle/chunk-YUSK4FN3.js +3 -3
- package/www/dist/frontend/bundle/common/IobrokerHandler.js +1 -1
- package/www/dist/frontend/bundle/runtime/CustomControls.js +1 -1
- package/www/dist/frontend/bundle/runtime/ScreenViewer.js +1 -1
- package/www/dist/frontend/bundle/runtime/controls.js +4 -4
- package/www/dist/frontend/bundle/runtime/init.js +3 -3
- package/www/dist/frontend/common/Common.globals.js +1 -1
- package/www/dist/frontend/common/IobrokerHandler.js +1 -1
- package/www/dist/frontend/common/Runtime.js +1 -1
- package/www/dist/frontend/config/CommandHandling.js +1 -1
- package/www/dist/frontend/config/ConfigureWebcomponentDesigner.js +1 -1
- package/www/dist/frontend/config/DockHelper.js +1 -1
- package/www/dist/frontend/config/IobrokerWebui3DDriveEngine.js +1 -1
- package/www/dist/frontend/config/IobrokerWebui3DScreenEditor.js +3 -3
- package/www/dist/frontend/config/IobrokerWebui3DScreenPropertiesPanel.js +3 -3
- package/www/dist/frontend/config/IobrokerWebui3DScreenViewer.js +2 -2
- package/www/dist/frontend/config/IobrokerWebuiAppShell.js +3 -3
- package/www/dist/frontend/config/IobrokerWebuiBindingsEditor.js +1 -1
- package/www/dist/frontend/config/IobrokerWebuiConfirmationWrapper.js +3 -3
- package/www/dist/frontend/config/IobrokerWebuiControlPropertiesEditor.js +3 -3
- package/www/dist/frontend/config/IobrokerWebuiDynamicPropsEditor.js +1 -1
- package/www/dist/frontend/config/IobrokerWebuiEventAssignment.js +1 -1
- package/www/dist/frontend/config/IobrokerWebuiIconsView.js +3 -3
- package/www/dist/frontend/config/IobrokerWebuiMonacoEditor.js +2 -2
- package/www/dist/frontend/config/IobrokerWebuiPropertyGrid.js +1 -1
- package/www/dist/frontend/config/IobrokerWebuiScreenEditor.js +1 -1
- package/www/dist/frontend/config/IobrokerWebuiScreensView.js +2 -2
- package/www/dist/frontend/config/IobrokerWebuiSignalPropertyEditor.js +1 -1
- package/www/dist/frontend/config/IobrokerWebuiSolutionExplorer.js +3 -3
- package/www/dist/frontend/config/IobrokerWebuiTranslationEditor.js +1 -1
- package/www/dist/frontend/config/IobrokerWebuiWidgetGallery.js +3 -3
- package/www/dist/frontend/helper/DialogHelper.js +3 -3
- package/www/dist/frontend/helper/EsprimaHelper.js +1 -1
- package/www/dist/frontend/helper/Helper.js +1 -1
- package/www/dist/frontend/helper/LayoutHelper.js +1 -1
- package/www/dist/frontend/helper/XmlHelper.js +1 -1
- package/www/dist/frontend/helper/ZipHelper.js +1 -1
- package/www/dist/frontend/runtime/AnimationService.js +1 -1
- package/www/dist/frontend/runtime/CustomControls.js +1 -1
- package/www/dist/frontend/runtime/DynamicElementProperties.js +1 -1
- package/www/dist/frontend/runtime/HabPanelLikeMenu.js +2 -2
- package/www/dist/frontend/runtime/ScreenViewer.js +3 -3
- package/www/dist/frontend/runtime/TranslateableText.js +2 -2
- package/www/dist/frontend/runtime/VisibilityService.js +1 -1
- package/www/dist/frontend/runtime/controls.js +1 -1
- package/www/dist/frontend/runtime/init.js +1 -1
- package/www/dist/frontend/scripting/IobrokerWebuiScriptSystem.js +1 -1
- package/www/dist/frontend/scripting/blockly/OpenScreen.js +1 -1
- package/www/dist/frontend/scripting/blockly/webuiBlocklyToolbox.js +1 -1
- package/www/dist/frontend/services/DynamicPropertiesHelper.js +1 -1
- package/www/dist/frontend/services/IobrokerWebuiBindableLocalObjectsService.js +1 -1
- package/www/dist/frontend/services/IobrokerWebuiBindableObjectDragDropService.js +1 -1
- package/www/dist/frontend/services/IobrokerWebuiBindableObjectsForPropertiesService.js +1 -1
- package/www/dist/frontend/services/IobrokerWebuiBindableObjectsService.js +1 -1
- package/www/dist/frontend/services/IobrokerWebuiConfigButtonProvider.js +1 -1
- package/www/dist/frontend/services/IobrokerWebuiCopyPasteService.js +1 -1
- package/www/dist/frontend/services/IobrokerWebuiCustomControlEventsService.js +1 -1
- package/www/dist/frontend/services/IobrokerWebuiCustomElementContextMenu.js +1 -1
- package/www/dist/frontend/services/IobrokerWebuiDemoProviderService.js +1 -1
- package/www/dist/frontend/services/IobrokerWebuiDynamicPropertiesService.js +1 -1
- package/www/dist/frontend/services/IobrokerWebuiEventsService.js +1 -1
- package/www/dist/frontend/services/IobrokerWebuiExternalDragDropService.js +1 -1
- package/www/dist/frontend/services/IobrokerWebuiLitPropertiesService.js +1 -1
- package/www/dist/frontend/services/IobrokerWebuiPropertiesService.js +1 -1
- package/www/dist/frontend/services/IobrokerWebuiPropertyGroupsService.js +1 -1
- package/www/dist/frontend/services/IobrokerWebuiRefactorService.js +1 -1
- package/www/dist/frontend/services/IobrokerWebuiScreenContextMenu.js +1 -1
- package/www/dist/frontend/services/IobrokerWebuiSpecialPropertiesService.js +1 -1
- package/www/dist/frontend/services/IobrokerWebuiSpectrumEditorService.js +1 -1
- package/www/dist/frontend/services/IobrokerWebuiVisibilityPropertiesService.js +1 -1
- package/www/dist/frontend/services/LayoutComponentsPropertiesService.js +1 -1
- package/www/dist/frontend/widgets/customElementsObserver.js +1 -1
- package/www/dist/frontend/widgets/importWidgetFiles.js +1 -1
- package/www/dist/frontend/widgets/importWidgetFilesRuntime.js +1 -1
- package/www/dist/frontend/widgets/layout-components.js +1 -1
- package/www/dist/frontend/widgets/layout-placement-services.js +1 -1
- package/www/dist/frontend/widgets/testElement.js +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"html": "<div class=\"responsive-container\" style=\"width:100%;height:100%;position:relative;\"><svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 112.5 112.5\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\" xml:space=\"preserve\" style=\"display:block;\"><g id=\"Group_Horizonatal_Short\"><path d=\"M0,56.25 H112.5\" fill=\"none\" stroke=\"#646566\" stroke-width=\"30\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 H112.5\" fill=\"none\" stroke=\"#7a7b7c\" stroke-width=\"26\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 H112.5\" fill=\"none\" stroke=\"#949596\" stroke-width=\"21\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 H112.5\" fill=\"none\" stroke=\"#bdbebf\" stroke-width=\"15\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 H112.5\" fill=\"none\" stroke=\"#E0E0E0\" stroke-width=\"9\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 H112.5\" fill=\"none\" stroke=\"#efefef\" stroke-width=\"4\" stroke-linecap=\"butt\"></path></g><path id=\"flowingLiquid\" d=\"M0,56.25 H112.5\" fill=\"none\"></path></svg></div>", "style": ":host {\n width:100%;\n height:100%;\n\n}\n\n* {\n box-sizing: border-box;\n}\n\n\n.responsive-container {\n width: 100%;\n height: 100%;\n }\n\n@keyframes dashright {\n to {\n stroke-dashoffset: -200;\n }\n}\n\n@keyframes dashleft {\n to {\n stroke-dashoffset: 200;\n }\n}\n\n.flowingLiquidright {\n fill: none;\n stroke: brown;\n /* Qəhvəyi rəng */\n stroke-width: 10;\n stroke-dasharray: 10, 10;\n /* Dash və boşluq dəyərləri */\n animation: dashright 3s linear infinite;\n vector-effect: non-scaling-stroke;\n}\n\n.flowingLiquidleft {\n fill: none;\n stroke: brown;\n /* Qəhvəyi rəng */\n stroke-width: 10;\n stroke-dasharray: 10, 10;\n /* Dash və boşluq dəyərləri */\n animation: dashleft 3s linear infinite;\n vector-effect: non-scaling-stroke;\n}", "script": "export function init(instance)\r\n{\r\n \r\n instance._bindingsRefresh();\r\n \r\n //instance._assignEvent('pipewidth-changed', (ev) => updatewidth(ev.detail.newValue, instance));\r\n //instance._assignEvent('pipeheight-changed', (ev) => updateheight(ev.detail.newValue, instance));\r\n instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\r\n instance._assignEvent('strokewidth-changed', (ev) => updatestrokeWidth(ev.detail.newValue, instance));\r\n instance._assignEvent('strokecolor-changed', (ev) => updatestrokecolor(ev.detail.newValue, instance));\r\n instance._assignEvent('strokedasharray-changed', (ev) => updatestrokedasharray(ev.detail.newValue, instance));\r\n //instance._assignEvent('animationspeed-changed', (ev) => updateanimationspeed(ev.detail.newValue, instance));\r\n let flowingliquid = instance._getDomElement('flowingLiquid');\r\n flowingliquid.style.animationDuration=instance.animationspeed+'s';\r\n //instance.style.width = instance.pipewidth+\"px\";\r\n /*instance.style.height =instance.pipeheight+\"px\";*/\r\n instance.style.height = instance.pipesize+\"px\";\r\n flowingliquid.style.strokeWidth =instance.strokewidth;\r\n flowingliquid.style.stroke = instance.strokecolor;\r\n flowingliquid.style.strokeDasharray = instance.strokedasharray;\r\n checkflowdirection(instance);\r\n let sl = (!isNullOrUndefined(instance.signalleft)) ? window.IOB.subscribeState(instance.signalleft,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\r\n let sr = (!isNullOrUndefined(instance.signalright)) ? window.IOB.subscribeState(instance.signalright,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\r\n let animationspeed = (!isNullOrUndefined(instance.animationspeed)) ? window.IOB.subscribeState(instance.animationspeed,(id, state)=> updateanimationspeed(id,state,instance)) : {'val':false};\r\n\r\n}\r\n\r\n\r\n\r\nexport function disconnectedCallback(instance) { // Disconnect the observer when the element is removed from the DOM \r\n\r\n}\r\n\r\nasync function checkflowdirection(instance)\r\n{ \r\n let signalleft = instance.signalleft;\r\n let checksignalleft =(!isNullOrUndefined(signalleft)) ? await window.IOB.getState(signalleft) : {'val':false};\r\n let conditionleft = instance.conditionleft;\r\n let conditionleftvalue = instance.conditionleftvalue;\r\n let left = (!isNullOrUndefined(instance.left)) ? instance.left : false;\r\n\r\n let signalright = instance.signalright;\r\n let checksignalright =(!isNullOrUndefined(signalright)) ? await window.IOB.getState(signalright) : {'val':false};\r\n let conditionright = instance.conditionright;\r\n let conditionrightvalue = instance.conditionrightvalue;\r\n let right = (!isNullOrUndefined(instance.right)) ? instance.right : false;\r\n \r\n let x = (instance.left==true) ? selectCase(checksignalleft.val, conditionleft, conditionleftvalue) : false;\r\n let y = (instance.right==true) ? selectCase(checksignalright.val, conditionright, conditionrightvalue) : false;\r\n if (x == true || y == true) {\r\n if (x == true) {\r\n checkleft(left,instance);\r\n }\r\n if (y == true) {\r\n checkright(right,instance);\r\n }\r\n }\r\n else {\r\n nothing(instance);\r\n }\r\n \r\n}\r\n\r\nfunction handleStateChange(id, state,instance) {\r\n checkflowdirection(instance);\r\n}\r\n\r\nfunction updatewidth(value,instance){\r\n instance.style.width=value+\"px\";\r\n}\r\n\r\nfunction updateheight(value,instance){\r\n instance.style.height=value+\"px\";\r\n}\r\n\r\nfunction updatesize(value,instance){\r\n instance.style.height=value+\"px\";\r\n}\r\n\r\nfunction updatestrokeWidth(value,instance)\r\n{\r\n let flowingliquid = instance._getDomElement('flowingLiquid');\r\n flowingliquid.style.strokeWidth = value;\r\n \r\n}\r\n\r\nfunction updatestrokecolor(value,instance)\r\n{\r\n let flowingliquid = instance._getDomElement('flowingLiquid');\r\n flowingliquid.style.stroke = value;\r\n \r\n}\r\n\r\nfunction updatestrokedasharray(value,instance)\r\n{\r\n let flowingliquid = instance._getDomElement('flowingLiquid');\r\n flowingliquid.style.strokeDasharray = value;\r\n \r\n}\r\n\r\nfunction updateanimationspeed(id, state,instance)\r\n{\r\n let flowingliquid = instance._getDomElement('flowingLiquid');\r\n flowingliquid.style.animationDuration = state.val+'s';\r\n}\r\n\r\nfunction selectCase(value, condition, conditionvalue) {\r\n var flag1;\r\n switch (condition) {\r\n case 'exist':\r\n flag1 = value.includes(conditionvalue);\r\n break;\r\n\r\n case 'equal':\r\n let vl = Number(value);\r\n let convl = Number(Boolean(conditionvalue)) ;\r\n if (vl == convl) {\r\n return flag1 = true;\r\n }\r\n else\r\n {\r\n return flag1 = false;\r\n }\r\n break;\r\n\r\n case 'is not equal':\r\n let vl1 = Number(value);\r\n let convl1 = Number(Boolean(conditionvalue)) ;\r\n if (vl1 != convl1) {\r\n return flag1 = true;\r\n }\r\n else\r\n {\r\n return flag1 = false;\r\n }\r\n break;\r\n\r\n case 'less-than':\r\n if (parseInt(value) < parseInt(conditionvalue)) {\r\n return flag1 = true;\r\n }\r\n else\r\n {\r\n return flag1 = false;\r\n }\r\n break;\r\n\r\n case 'less-than or equal':\r\n if (parseInt(value) <= parseInt(conditionvalue)) {\r\n return flag1 = true;\r\n }\r\n else\r\n {\r\n return flag1 = false;\r\n }\r\n break;\r\n\r\n case 'greater-than':\r\n if (parseInt(value) > parseInt(conditionvalue)) {\r\n return flag1 = true;\r\n }\r\n else\r\n {\r\n return flag1 = false;\r\n }\r\n break;\r\n\r\n case 'greater-than or equal':\r\n if (parseInt(value) >= parseInt(conditionvalue)) {\r\n return flag1 = true;\r\n }\r\n else\r\n {\r\n return flag1 = false;\r\n }\r\n break;\r\n }\r\n return flag1;\r\n}\r\n\r\nfunction isNullOrUndefined(value) {\r\n return value === undefined || value === null || value ===\"\";\r\n}\r\n\r\nfunction nothing(instance) {\r\n //if(data==true)\r\n //{\r\n /*var svg = instance.shadowRoot.querySelector(\"svg\");\r\n var line = $(svg).find(\"line\");*/\r\n let path = instance._getDomElement('flowingLiquid');\r\n path.setAttribute(\"class\", '');\r\n path.setAttribute(\"visibility\", 'hidden');\r\n //$(line).css('display', 'none');\r\n // }\r\n }\r\n\r\n function checkleft(data,instance) {\r\n if (data == true) {\r\n let path = instance._getDomElement('flowingLiquid');\r\n path.setAttribute(\"class\", 'flowingLiquidleft');\r\n path.setAttribute(\"visibility\", 'visible');\r\n }\r\n }\r\n\r\nfunction checkright(data,instance) {\r\n if (data == true) {\r\n let path = instance._getDomElement('flowingLiquid');\r\n path.setAttribute(\"class\", 'flowingLiquidright');\r\n path.setAttribute(\"visibility\", 'visible');\r\n }\r\n} \r\n", "properties": {"pipesize": {"type": "number", "default": "100"}, "strokewidth": {"type": "number", "default": "5"}, "strokecolor": {"type": "color", "default": "brown"}, "strokedasharray": {"type": "string", "default": "0,10,0"}, "left": {"type": "boolean"}, "signalleft": {"type": "signal"}, "conditionleft": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditionleftvalue": {"type": "string"}, "right": {"type": "boolean"}, "signalright": {"type": "signal"}, "conditionright": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditionrightvalue": {"type": "string"}, "animationspeed": {"type": "signal"}}, "settings": {"width": "", "height": "", "visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}
|
|
1
|
+
{"html": "<div class=\"responsive-container\" style=\"width:100%;height:100%;position:relative;\"><svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 112.5 112.5\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\" xml:space=\"preserve\" style=\"display:block;\"><defs><linearGradient id=\"lgH\" gradientUnits=\"userSpaceOnUse\" x1=\"0\" y1=\"41.25\" x2=\"0\" y2=\"71.25\"><stop offset=\"0.01\" stop-color=\"#646566\"/><stop offset=\"0.16\" stop-color=\"#909091\"/><stop offset=\"0.49\" stop-color=\"#E0E0E0\"/><stop offset=\"1\" stop-color=\"#646566\"/></linearGradient></defs><g id=\"Group_Horizonatal_Short\"><path d=\"M0,56.25 H112.5\" fill=\"none\" stroke=\"url(#lgH)\" stroke-width=\"30\" stroke-linecap=\"butt\"></path></g><path id=\"flowingLiquid\" d=\"M0,56.25 H112.5\" fill=\"none\"></path></svg></div>", "style": ":host {\n width:100%;\n height:100%;\n\n}\n\n* {\n box-sizing: border-box;\n}\n\n\n.responsive-container {\n width: 100%;\n height: 100%;\n }\n\n@keyframes dashright {\n to {\n stroke-dashoffset: -200;\n }\n}\n\n@keyframes dashleft {\n to {\n stroke-dashoffset: 200;\n }\n}\n\n.flowingLiquidright {\n fill: none;\n stroke: brown;\n /* Qəhvəyi rəng */\n stroke-width: 10;\n stroke-dasharray: 10, 10;\n /* Dash və boşluq dəyərləri */\n animation: dashright 3s linear infinite;\n vector-effect: non-scaling-stroke;\n}\n\n.flowingLiquidleft {\n fill: none;\n stroke: brown;\n /* Qəhvəyi rəng */\n stroke-width: 10;\n stroke-dasharray: 10, 10;\n /* Dash və boşluq dəyərləri */\n animation: dashleft 3s linear infinite;\n vector-effect: non-scaling-stroke;\n}", "script": "export function init(instance)\r\n{\r\n \r\n instance._bindingsRefresh();\r\n \r\n //instance._assignEvent('pipewidth-changed', (ev) => updatewidth(ev.detail.newValue, instance));\r\n //instance._assignEvent('pipeheight-changed', (ev) => updateheight(ev.detail.newValue, instance));\r\n instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\r\n instance._assignEvent('strokewidth-changed', (ev) => updatestrokeWidth(ev.detail.newValue, instance));\r\n instance._assignEvent('strokecolor-changed', (ev) => updatestrokecolor(ev.detail.newValue, instance));\r\n instance._assignEvent('strokedasharray-changed', (ev) => updatestrokedasharray(ev.detail.newValue, instance));\r\n //instance._assignEvent('animationspeed-changed', (ev) => updateanimationspeed(ev.detail.newValue, instance));\r\n let flowingliquid = instance._getDomElement('flowingLiquid');\r\n flowingliquid.style.animationDuration=instance.animationspeed+'s';\r\n //instance.style.width = instance.pipewidth+\"px\";\r\n /*instance.style.height =instance.pipeheight+\"px\";*/\r\n instance.style.height = instance.pipesize+\"px\";\r\n flowingliquid.style.strokeWidth =instance.strokewidth;\r\n flowingliquid.style.stroke = instance.strokecolor;\r\n flowingliquid.style.strokeDasharray = instance.strokedasharray;\r\n checkflowdirection(instance);\r\n let sl = (!isNullOrUndefined(instance.signalleft)) ? window.IOB.subscribeState(instance.signalleft,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\r\n let sr = (!isNullOrUndefined(instance.signalright)) ? window.IOB.subscribeState(instance.signalright,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\r\n let animationspeed = (!isNullOrUndefined(instance.animationspeed)) ? window.IOB.subscribeState(instance.animationspeed,(id, state)=> updateanimationspeed(id,state,instance)) : {'val':false};\r\n\r\n}\r\n\r\n\r\n\r\nexport function disconnectedCallback(instance) { // Disconnect the observer when the element is removed from the DOM \r\n\r\n}\r\n\r\nasync function checkflowdirection(instance)\r\n{ \r\n let signalleft = instance.signalleft;\r\n let checksignalleft =(!isNullOrUndefined(signalleft)) ? await window.IOB.getState(signalleft) : {'val':false};\r\n let conditionleft = instance.conditionleft;\r\n let conditionleftvalue = instance.conditionleftvalue;\r\n let left = (!isNullOrUndefined(instance.left)) ? instance.left : false;\r\n\r\n let signalright = instance.signalright;\r\n let checksignalright =(!isNullOrUndefined(signalright)) ? await window.IOB.getState(signalright) : {'val':false};\r\n let conditionright = instance.conditionright;\r\n let conditionrightvalue = instance.conditionrightvalue;\r\n let right = (!isNullOrUndefined(instance.right)) ? instance.right : false;\r\n \r\n let x = (instance.left==true) ? selectCase(checksignalleft.val, conditionleft, conditionleftvalue) : false;\r\n let y = (instance.right==true) ? selectCase(checksignalright.val, conditionright, conditionrightvalue) : false;\r\n if (x == true || y == true) {\r\n if (x == true) {\r\n checkleft(left,instance);\r\n }\r\n if (y == true) {\r\n checkright(right,instance);\r\n }\r\n }\r\n else {\r\n nothing(instance);\r\n }\r\n \r\n}\r\n\r\nfunction handleStateChange(id, state,instance) {\r\n checkflowdirection(instance);\r\n}\r\n\r\nfunction updatewidth(value,instance){\r\n instance.style.width=value+\"px\";\r\n}\r\n\r\nfunction updateheight(value,instance){\r\n instance.style.height=value+\"px\";\r\n}\r\n\r\nfunction updatesize(value,instance){\r\n instance.style.height=value+\"px\";\r\n}\r\n\r\nfunction updatestrokeWidth(value,instance)\r\n{\r\n let flowingliquid = instance._getDomElement('flowingLiquid');\r\n flowingliquid.style.strokeWidth = value;\r\n \r\n}\r\n\r\nfunction updatestrokecolor(value,instance)\r\n{\r\n let flowingliquid = instance._getDomElement('flowingLiquid');\r\n flowingliquid.style.stroke = value;\r\n \r\n}\r\n\r\nfunction updatestrokedasharray(value,instance)\r\n{\r\n let flowingliquid = instance._getDomElement('flowingLiquid');\r\n flowingliquid.style.strokeDasharray = value;\r\n \r\n}\r\n\r\nfunction updateanimationspeed(id, state,instance)\r\n{\r\n let flowingliquid = instance._getDomElement('flowingLiquid');\r\n flowingliquid.style.animationDuration = state.val+'s';\r\n}\r\n\r\nfunction selectCase(value, condition, conditionvalue) {\r\n var flag1;\r\n switch (condition) {\r\n case 'exist':\r\n flag1 = value.includes(conditionvalue);\r\n break;\r\n\r\n case 'equal':\r\n let vl = Number(value);\r\n let convl = Number(Boolean(conditionvalue)) ;\r\n if (vl == convl) {\r\n return flag1 = true;\r\n }\r\n else\r\n {\r\n return flag1 = false;\r\n }\r\n break;\r\n\r\n case 'is not equal':\r\n let vl1 = Number(value);\r\n let convl1 = Number(Boolean(conditionvalue)) ;\r\n if (vl1 != convl1) {\r\n return flag1 = true;\r\n }\r\n else\r\n {\r\n return flag1 = false;\r\n }\r\n break;\r\n\r\n case 'less-than':\r\n if (parseInt(value) < parseInt(conditionvalue)) {\r\n return flag1 = true;\r\n }\r\n else\r\n {\r\n return flag1 = false;\r\n }\r\n break;\r\n\r\n case 'less-than or equal':\r\n if (parseInt(value) <= parseInt(conditionvalue)) {\r\n return flag1 = true;\r\n }\r\n else\r\n {\r\n return flag1 = false;\r\n }\r\n break;\r\n\r\n case 'greater-than':\r\n if (parseInt(value) > parseInt(conditionvalue)) {\r\n return flag1 = true;\r\n }\r\n else\r\n {\r\n return flag1 = false;\r\n }\r\n break;\r\n\r\n case 'greater-than or equal':\r\n if (parseInt(value) >= parseInt(conditionvalue)) {\r\n return flag1 = true;\r\n }\r\n else\r\n {\r\n return flag1 = false;\r\n }\r\n break;\r\n }\r\n return flag1;\r\n}\r\n\r\nfunction isNullOrUndefined(value) {\r\n return value === undefined || value === null || value ===\"\";\r\n}\r\n\r\nfunction nothing(instance) {\r\n //if(data==true)\r\n //{\r\n /*var svg = instance.shadowRoot.querySelector(\"svg\");\r\n var line = $(svg).find(\"line\");*/\r\n let path = instance._getDomElement('flowingLiquid');\r\n path.setAttribute(\"class\", '');\r\n path.setAttribute(\"visibility\", 'hidden');\r\n //$(line).css('display', 'none');\r\n // }\r\n }\r\n\r\n function checkleft(data,instance) {\r\n if (data == true) {\r\n let path = instance._getDomElement('flowingLiquid');\r\n path.setAttribute(\"class\", 'flowingLiquidleft');\r\n path.setAttribute(\"visibility\", 'visible');\r\n }\r\n }\r\n\r\nfunction checkright(data,instance) {\r\n if (data == true) {\r\n let path = instance._getDomElement('flowingLiquid');\r\n path.setAttribute(\"class\", 'flowingLiquidright');\r\n path.setAttribute(\"visibility\", 'visible');\r\n }\r\n} \r\n", "properties": {"pipesize": {"type": "number", "default": "100"}, "strokewidth": {"type": "number", "default": "5"}, "strokecolor": {"type": "color", "default": "brown"}, "strokedasharray": {"type": "string", "default": "0,10,0"}, "left": {"type": "boolean"}, "signalleft": {"type": "signal"}, "conditionleft": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditionleftvalue": {"type": "string"}, "right": {"type": "boolean"}, "signalright": {"type": "signal"}, "conditionright": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditionrightvalue": {"type": "string"}, "animationspeed": {"type": "signal"}}, "settings": {"width": "", "height": "", "visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"html": "<div class=\"responsive-container\" style=\"width:100%;height:100%;position:relative;\"><svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 112.5 112.5\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\" xml:space=\"preserve\" style=\"display:block;\"><g id=\"Group_Vertical_Short\"><path d=\"M56.25,0 V112.5\" fill=\"none\" stroke=\"#646566\" stroke-width=\"30\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 V112.5\" fill=\"none\" stroke=\"#7a7b7c\" stroke-width=\"26\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 V112.5\" fill=\"none\" stroke=\"#949596\" stroke-width=\"21\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 V112.5\" fill=\"none\" stroke=\"#bdbebf\" stroke-width=\"15\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 V112.5\" fill=\"none\" stroke=\"#E0E0E0\" stroke-width=\"9\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 V112.5\" fill=\"none\" stroke=\"#efefef\" stroke-width=\"4\" stroke-linecap=\"butt\"></path></g><path id=\"flowingLiquid\" d=\"M56.25,0 V112.5\" fill=\"none\"></path></svg></div>", "style": ":host {\n height: 100%;\n width: 100%;\n}\n\n* {\n box-sizing: border-box;\n}\n\n.responsive-container { width: 100%; height: 100%;} \n//.responsive-container svg {width: 100%; height: 100%;}\n\n@keyframes dashdown {\n to {\n stroke-dashoffset: -200;\n }\n}\n\n@keyframes dashup {\n to {\n stroke-dashoffset: 200;\n }\n}\n\n\n.flowingLiquiddown {\n fill: none;\n stroke: brown; /* Color of the liquid */\n stroke-width: 10;\n stroke-dasharray: 10, 10; /* Dash and gap values */\n animation: dashdown 3s linear infinite;\n vector-effect: non-scaling-stroke; /* Keeps stroke widths from scaling */\n}\n\n.flowingLiquidup {\n fill: none;\n stroke: brown; /* Color of the liquid */\n stroke-width: 10;\n stroke-dasharray: 10, 10; /* Dash and gap values */\n animation: dashup 3s linear infinite;\n vector-effect: non-scaling-stroke; /* Keeps stroke widths from scaling */\n}", "script": "export function init(instance)\n{\n \n instance._bindingsRefresh();\n \n //instance._assignEvent('pipewidth-changed', (ev) => updatewidth(ev.detail.newValue, instance));\n //instance._assignEvent('pipeheight-changed', (ev) => updateheight(ev.detail.newValue, instance));\n instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\n instance._assignEvent('strokewidth-changed', (ev) => updatestrokeWidth(ev.detail.newValue, instance));\n instance._assignEvent('strokecolor-changed', (ev) => updatestrokecolor(ev.detail.newValue, instance));\n instance._assignEvent('strokedasharray-changed', (ev) => updatestrokedasharray(ev.detail.newValue, instance));\n //instance._assignEvent('animationspeed-changed', (ev) => updateanimationspeed(ev.detail.newValue, instance));\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration=instance.animationspeed+'s';\n //instance.style.width = instance.pipewidth+\"px\";\n /*instance.style.height =instance.pipeheight+\"px\";*/\n instance.style.width = instance.pipesize+\"px\";\n flowingliquid.style.strokeWidth =instance.strokewidth;\n flowingliquid.style.stroke = instance.strokecolor;\n flowingliquid.style.strokeDasharray = instance.strokedasharray;\n checkflowdirection(instance);\n let sl = (!isNullOrUndefined(instance.signalup)) ? window.IOB.subscribeState(instance.signalup,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let sr = (!isNullOrUndefined(instance.signaldown)) ? window.IOB.subscribeState(instance.signaldown,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let animationspeed = (!isNullOrUndefined(instance.animationspeed)) ? window.IOB.subscribeState(instance.animationspeed,(id, state)=> updateanimationspeed(id,state,instance)) : {'val':false};\n\n}\n\n\n\nexport function disconnectedCallback(instance) { // Disconnect the observer when the element is removed from the DOM \n\n}\n\nasync function checkflowdirection(instance)\n{ \n let signalup = instance.signalup;\n let checksignalup =(!isNullOrUndefined(signalup)) ? await window.IOB.getState(signalup) : {'val':false};\n let conditionup = instance.conditionup;\n let conditionupvalue = instance.conditionupvalue;\n let up = (!isNullOrUndefined(instance.up)) ? instance.up : false;\n\n let signaldown = instance.signaldown;\n let checksignaldown =(!isNullOrUndefined(signaldown)) ? await window.IOB.getState(signaldown) : {'val':false};\n let conditiondown = instance.conditiondown;\n let conditiondownvalue = instance.conditiondownvalue;\n let down = (!isNullOrUndefined(instance.down)) ? instance.down : false;\n \n let x = (instance.up==true) ? selectCase(checksignalup.val, conditionup, conditionupvalue) : false;\n let y = (instance.down==true) ? selectCase(checksignaldown.val, conditiondown, conditiondownvalue) : false;\n if (x == true || y == true) {\n if (x == true) {\n checkup(up,instance);\n }\n if (y == true) {\n checkdown(down,instance);\n }\n }\n else {\n nothing(instance);\n }\n \n}\n\nfunction handleStateChange(id, state,instance) {\n checkflowdirection(instance);\n}\n\nfunction updatewidth(value,instance){\n instance.style.width=value+\"px\";\n}\n\nfunction updateheight(value,instance){\n instance.style.height=value+\"px\";\n}\n\nfunction updatesize(value,instance){\n instance.style.width=value+\"px\";\n}\n\nfunction updatestrokeWidth(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeWidth = value;\n \n}\n\nfunction updatestrokecolor(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.stroke = value;\n \n}\n\nfunction updatestrokedasharray(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeDasharray = value;\n \n}\n\nfunction updateanimationspeed(id, state,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration = state.val+'s';\n}\n\nfunction selectCase(value, condition, conditionvalue) {\n var flag1;\n switch (condition) {\n case 'exist':\n flag1 = value.includes(conditionvalue);\n break;\n\n case 'equal':\n let vl = Number(value);\n let convl = Number(Boolean(conditionvalue)) ;\n if (vl == convl) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'is not equal':\n let vl1 = Number(value);\n let convl1 = Number(Boolean(conditionvalue)) ;\n if (vl1 != convl1) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than':\n if (parseInt(value) < parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than or equal':\n if (parseInt(value) <= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than':\n if (parseInt(value) > parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than or equal':\n if (parseInt(value) >= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n }\n return flag1;\n}\n\nfunction isNullOrUndefined(value) {\n return value === undefined || value === null || value ===\"\";\n}\n\nfunction nothing(instance) {\n //if(data==true)\n //{\n /*var svg = instance.shadowRoot.querySelector(\"svg\");\n var line = $(svg).find(\"line\");*/\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", '');\n path.setAttribute(\"visibility\", 'hidden');\n //$(line).css('display', 'none');\n // }\n }\n\n function checkup(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquidup');\n path.setAttribute(\"visibility\", 'visible');\n }\n }\n\nfunction checkdown(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquiddown');\n path.setAttribute(\"visibility\", 'visible');\n }\n} \n", "properties": {"pipesize": {"type": "number", "default": "100"}, "strokewidth": {"type": "number", "default": "5"}, "strokecolor": {"type": "color", "default": "brown"}, "strokedasharray": {"type": "string", "default": "0,10,0"}, "up": {"type": "boolean"}, "signalup": {"type": "signal"}, "conditionup": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditionupvalue": {"type": "string"}, "down": {"type": "boolean"}, "signaldown": {"type": "signal"}, "conditiondown": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditiondownvalue": {"type": "string"}, "animationspeed": {"type": "signal"}}, "settings": {"width": "100%", "height": "100%", "visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}
|
|
1
|
+
{"html": "<div class=\"responsive-container\" style=\"width:100%;height:100%;position:relative;\"><svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 112.5 112.5\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\" xml:space=\"preserve\" style=\"display:block;\"><defs><linearGradient id=\"lgV\" gradientUnits=\"userSpaceOnUse\" x1=\"41.25\" y1=\"0\" x2=\"71.25\" y2=\"0\"><stop offset=\"0.01\" stop-color=\"#646566\"/><stop offset=\"0.16\" stop-color=\"#909091\"/><stop offset=\"0.49\" stop-color=\"#E0E0E0\"/><stop offset=\"1\" stop-color=\"#646566\"/></linearGradient></defs><g id=\"Group_Vertical_Short\"><path d=\"M56.25,0 V112.5\" fill=\"none\" stroke=\"url(#lgV)\" stroke-width=\"30\" stroke-linecap=\"butt\"></path></g><path id=\"flowingLiquid\" d=\"M56.25,0 V112.5\" fill=\"none\"></path></svg></div>", "style": ":host {\n height: 100%;\n width: 100%;\n}\n\n* {\n box-sizing: border-box;\n}\n\n.responsive-container { width: 100%; height: 100%;} \n//.responsive-container svg {width: 100%; height: 100%;}\n\n@keyframes dashdown {\n to {\n stroke-dashoffset: -200;\n }\n}\n\n@keyframes dashup {\n to {\n stroke-dashoffset: 200;\n }\n}\n\n\n.flowingLiquiddown {\n fill: none;\n stroke: brown; /* Color of the liquid */\n stroke-width: 10;\n stroke-dasharray: 10, 10; /* Dash and gap values */\n animation: dashdown 3s linear infinite;\n vector-effect: non-scaling-stroke; /* Keeps stroke widths from scaling */\n}\n\n.flowingLiquidup {\n fill: none;\n stroke: brown; /* Color of the liquid */\n stroke-width: 10;\n stroke-dasharray: 10, 10; /* Dash and gap values */\n animation: dashup 3s linear infinite;\n vector-effect: non-scaling-stroke; /* Keeps stroke widths from scaling */\n}", "script": "export function init(instance)\n{\n \n instance._bindingsRefresh();\n \n //instance._assignEvent('pipewidth-changed', (ev) => updatewidth(ev.detail.newValue, instance));\n //instance._assignEvent('pipeheight-changed', (ev) => updateheight(ev.detail.newValue, instance));\n instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\n instance._assignEvent('strokewidth-changed', (ev) => updatestrokeWidth(ev.detail.newValue, instance));\n instance._assignEvent('strokecolor-changed', (ev) => updatestrokecolor(ev.detail.newValue, instance));\n instance._assignEvent('strokedasharray-changed', (ev) => updatestrokedasharray(ev.detail.newValue, instance));\n //instance._assignEvent('animationspeed-changed', (ev) => updateanimationspeed(ev.detail.newValue, instance));\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration=instance.animationspeed+'s';\n //instance.style.width = instance.pipewidth+\"px\";\n /*instance.style.height =instance.pipeheight+\"px\";*/\n instance.style.width = instance.pipesize+\"px\";\n flowingliquid.style.strokeWidth =instance.strokewidth;\n flowingliquid.style.stroke = instance.strokecolor;\n flowingliquid.style.strokeDasharray = instance.strokedasharray;\n checkflowdirection(instance);\n let sl = (!isNullOrUndefined(instance.signalup)) ? window.IOB.subscribeState(instance.signalup,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let sr = (!isNullOrUndefined(instance.signaldown)) ? window.IOB.subscribeState(instance.signaldown,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let animationspeed = (!isNullOrUndefined(instance.animationspeed)) ? window.IOB.subscribeState(instance.animationspeed,(id, state)=> updateanimationspeed(id,state,instance)) : {'val':false};\n\n}\n\n\n\nexport function disconnectedCallback(instance) { // Disconnect the observer when the element is removed from the DOM \n\n}\n\nasync function checkflowdirection(instance)\n{ \n let signalup = instance.signalup;\n let checksignalup =(!isNullOrUndefined(signalup)) ? await window.IOB.getState(signalup) : {'val':false};\n let conditionup = instance.conditionup;\n let conditionupvalue = instance.conditionupvalue;\n let up = (!isNullOrUndefined(instance.up)) ? instance.up : false;\n\n let signaldown = instance.signaldown;\n let checksignaldown =(!isNullOrUndefined(signaldown)) ? await window.IOB.getState(signaldown) : {'val':false};\n let conditiondown = instance.conditiondown;\n let conditiondownvalue = instance.conditiondownvalue;\n let down = (!isNullOrUndefined(instance.down)) ? instance.down : false;\n \n let x = (instance.up==true) ? selectCase(checksignalup.val, conditionup, conditionupvalue) : false;\n let y = (instance.down==true) ? selectCase(checksignaldown.val, conditiondown, conditiondownvalue) : false;\n if (x == true || y == true) {\n if (x == true) {\n checkup(up,instance);\n }\n if (y == true) {\n checkdown(down,instance);\n }\n }\n else {\n nothing(instance);\n }\n \n}\n\nfunction handleStateChange(id, state,instance) {\n checkflowdirection(instance);\n}\n\nfunction updatewidth(value,instance){\n instance.style.width=value+\"px\";\n}\n\nfunction updateheight(value,instance){\n instance.style.height=value+\"px\";\n}\n\nfunction updatesize(value,instance){\n instance.style.width=value+\"px\";\n}\n\nfunction updatestrokeWidth(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeWidth = value;\n \n}\n\nfunction updatestrokecolor(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.stroke = value;\n \n}\n\nfunction updatestrokedasharray(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeDasharray = value;\n \n}\n\nfunction updateanimationspeed(id, state,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration = state.val+'s';\n}\n\nfunction selectCase(value, condition, conditionvalue) {\n var flag1;\n switch (condition) {\n case 'exist':\n flag1 = value.includes(conditionvalue);\n break;\n\n case 'equal':\n let vl = Number(value);\n let convl = Number(Boolean(conditionvalue)) ;\n if (vl == convl) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'is not equal':\n let vl1 = Number(value);\n let convl1 = Number(Boolean(conditionvalue)) ;\n if (vl1 != convl1) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than':\n if (parseInt(value) < parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than or equal':\n if (parseInt(value) <= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than':\n if (parseInt(value) > parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than or equal':\n if (parseInt(value) >= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n }\n return flag1;\n}\n\nfunction isNullOrUndefined(value) {\n return value === undefined || value === null || value ===\"\";\n}\n\nfunction nothing(instance) {\n //if(data==true)\n //{\n /*var svg = instance.shadowRoot.querySelector(\"svg\");\n var line = $(svg).find(\"line\");*/\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", '');\n path.setAttribute(\"visibility\", 'hidden');\n //$(line).css('display', 'none');\n // }\n }\n\n function checkup(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquidup');\n path.setAttribute(\"visibility\", 'visible');\n }\n }\n\nfunction checkdown(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquiddown');\n path.setAttribute(\"visibility\", 'visible');\n }\n} \n", "properties": {"pipesize": {"type": "number", "default": "100"}, "strokewidth": {"type": "number", "default": "5"}, "strokecolor": {"type": "color", "default": "brown"}, "strokedasharray": {"type": "string", "default": "0,10,0"}, "up": {"type": "boolean"}, "signalup": {"type": "signal"}, "conditionup": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditionupvalue": {"type": "string"}, "down": {"type": "boolean"}, "signaldown": {"type": "signal"}, "conditiondown": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditiondownvalue": {"type": "string"}, "animationspeed": {"type": "signal"}}, "settings": {"width": "100%", "height": "100%", "visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"html": "<div class=\"responsive-container\" style=\"width:100%;height:100%;position:relative;\"><svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 112.5 112.5\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\" xml:space=\"preserve\" style=\"display:block;\"><g id=\"Group_curve\"><path d=\"M56.25,0 A56.25,56.25 0 0 1 0,56.25\" fill=\"none\" stroke=\"#646566\" stroke-width=\"30\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 A56.25,56.25 0 0 1 0,56.25\" fill=\"none\" stroke=\"#7a7b7c\" stroke-width=\"26\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 A56.25,56.25 0 0 1 0,56.25\" fill=\"none\" stroke=\"#949596\" stroke-width=\"21\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 A56.25,56.25 0 0 1 0,56.25\" fill=\"none\" stroke=\"#bdbebf\" stroke-width=\"15\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 A56.25,56.25 0 0 1 0,56.25\" fill=\"none\" stroke=\"#E0E0E0\" stroke-width=\"9\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 A56.25,56.25 0 0 1 0,56.25\" fill=\"none\" stroke=\"#efefef\" stroke-width=\"4\" stroke-linecap=\"butt\"></path></g><path id=\"flowingLiquid\" d=\"M56.25,0 A56.25,56.25 0 0 1 0,56.25\" fill=\"none\"></path></svg></div>", "style": ":host {\n height: 20%;\n width: 20%;\n}\n\n* {\n box-sizing: border-box;\n}\n\n//.responsive-container { width: 20%; height: 20%;} \n//.responsive-container svg {width: 100%; height: 100%;}\n\n@keyframes dashdown {\n to {\n stroke-dashoffset: 200;\n }\n}\n\n@keyframes dashup {\n to {\n stroke-dashoffset: -200;\n }\n}\n\n\n.flowingLiquiddown {\n fill: none;\n stroke: brown; /* Color of the liquid */\n stroke-width: 10;\n stroke-dasharray: 10, 10; /* Dash and gap values */\n animation: dashdown 3s linear infinite;\n vector-effect: non-scaling-stroke; /* Keeps stroke widths from scaling */\n}\n\n.flowingLiquidup {\n fill: none;\n stroke: brown; /* Color of the liquid */\n stroke-width: 10;\n stroke-dasharray: 10, 10; /* Dash and gap values */\n animation: dashup 3s linear infinite;\n vector-effect: non-scaling-stroke; /* Keeps stroke widths from scaling */\n}", "script": "export function init(instance)\n{\n \n instance._bindingsRefresh();\n \n //instance._assignEvent('pipewidth-changed', (ev) => updatewidth(ev.detail.newValue, instance));\n //instance._assignEvent('pipeheight-changed', (ev) => updateheight(ev.detail.newValue, instance));\n instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\n instance._assignEvent('strokewidth-changed', (ev) => updatestrokeWidth(ev.detail.newValue, instance));\n instance._assignEvent('strokecolor-changed', (ev) => updatestrokecolor(ev.detail.newValue, instance));\n instance._assignEvent('strokedasharray-changed', (ev) => updatestrokedasharray(ev.detail.newValue, instance));\n //instance._assignEvent('animationspeed-changed', (ev) => updateanimationspeed(ev.detail.newValue, instance));\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration=instance.animationspeed+'s';\n //instance.style.width = instance.pipewidth+\"px\";\n instance.style.height =(instance.pipesize*2)+\"px\";\n instance.style.width = (instance.pipesize*2)+\"px\";\n flowingliquid.style.strokeWidth =instance.strokewidth;\n flowingliquid.style.stroke = instance.strokecolor;\n flowingliquid.style.strokeDasharray = instance.strokedasharray;\n checkflowdirection(instance);\n let sl = (!isNullOrUndefined(instance.signalup)) ? window.IOB.subscribeState(instance.signalup,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let sr = (!isNullOrUndefined(instance.signaldown)) ? window.IOB.subscribeState(instance.signaldown,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let animationspeed = (!isNullOrUndefined(instance.animationspeed)) ? window.IOB.subscribeState(instance.animationspeed,(id, state)=> updateanimationspeed(id,state,instance)) : {'val':false};\n\n}\n\n\n\nexport function disconnectedCallback(instance) { // Disconnect the observer when the element is removed from the DOM \n\n}\n\nasync function checkflowdirection(instance)\n{ \n let signalup = instance.signalup;\n let checksignalup =(!isNullOrUndefined(signalup)) ? await window.IOB.getState(signalup) : {'val':false};\n let conditionup = instance.conditionup;\n let conditionupvalue = instance.conditionupvalue;\n let up = (!isNullOrUndefined(instance.up)) ? instance.up : false;\n\n let signaldown = instance.signaldown;\n let checksignaldown =(!isNullOrUndefined(signaldown)) ? await window.IOB.getState(signaldown) : {'val':false};\n let conditiondown = instance.conditiondown;\n let conditiondownvalue = instance.conditiondownvalue;\n let down = (!isNullOrUndefined(instance.down)) ? instance.down : false;\n \n let x = (instance.up==true) ? selectCase(checksignalup.val, conditionup, conditionupvalue) : false;\n let y = (instance.down==true) ? selectCase(checksignaldown.val, conditiondown, conditiondownvalue) : false;\n if (x == true || y == true) {\n if (x == true) {\n checkup(up,instance);\n }\n if (y == true) {\n checkdown(down,instance);\n }\n }\n else {\n nothing(instance);\n }\n \n}\n\nfunction handleStateChange(id, state,instance) {\n checkflowdirection(instance);\n}\n\nfunction updatewidth(value,instance){\n instance.style.width=value+\"px\";\n}\n\nfunction updateheight(value,instance){\n instance.style.height=value+\"px\";\n}\n\nfunction updatesize(value,instance){\n instance.style.width=(value*2)+\"px\";\n instance.style.height=(value*2)+\"px\";\n}\n\nfunction updatestrokeWidth(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeWidth = value;\n \n}\n\nfunction updatestrokecolor(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.stroke = value;\n \n}\n\nfunction updatestrokedasharray(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeDasharray = value;\n \n}\n\nfunction updateanimationspeed(id, state,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration = state.val+'s';\n}\n\nfunction selectCase(value, condition, conditionvalue) {\n var flag1;\n switch (condition) {\n case 'exist':\n flag1 = value.includes(conditionvalue);\n break;\n\n case 'equal':\n let vl = Number(value);\n let convl = Number(Boolean(conditionvalue)) ;\n if (vl == convl) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'is not equal':\n let vl1 = Number(value);\n let convl1 = Number(Boolean(conditionvalue)) ;\n if (vl1 != convl1) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than':\n if (parseInt(value) < parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than or equal':\n if (parseInt(value) <= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than':\n if (parseInt(value) > parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than or equal':\n if (parseInt(value) >= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n }\n return flag1;\n}\n\nfunction isNullOrUndefined(value) {\n return value === undefined || value === null || value ===\"\";\n}\n\nfunction nothing(instance) {\n //if(data==true)\n //{\n /*var svg = instance.shadowRoot.querySelector(\"svg\");\n var line = $(svg).find(\"line\");*/\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", '');\n path.setAttribute(\"visibility\", 'hidden');\n //$(line).css('display', 'none');\n // }\n }\n\n function checkup(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquidup');\n path.setAttribute(\"visibility\", 'visible');\n }\n }\n\nfunction checkdown(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquiddown');\n path.setAttribute(\"visibility\", 'visible');\n }\n} \n", "properties": {"pipesize": {"type": "number", "default": "100"}, "strokewidth": {"type": "number", "default": "5"}, "strokecolor": {"type": "color", "default": "brown"}, "strokedasharray": {"type": "string", "default": "10, 10"}, "up": {"type": "boolean"}, "signalup": {"type": "signal"}, "conditionup": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditionupvalue": {"type": "string"}, "down": {"type": "boolean"}, "signaldown": {"type": "signal"}, "conditiondown": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditiondownvalue": {"type": "string"}, "animationspeed": {"type": "signal"}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}
|
|
1
|
+
{"html": "<div class=\"responsive-container\" style=\"width:100%;height:100%;position:relative;\"><svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 112.5 112.5\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\" xml:space=\"preserve\" style=\"display:block;\"><defs><radialGradient id=\"rg\" gradientUnits=\"userSpaceOnUse\" cx=\"0\" cy=\"0\" r=\"71.25\"><stop offset=\"0.583\" stop-color=\"#646566\"/><stop offset=\"0.646\" stop-color=\"#909091\"/><stop offset=\"0.785\" stop-color=\"#E0E0E0\"/><stop offset=\"1\" stop-color=\"#646566\"/></radialGradient></defs><g id=\"Group_curve\"><path d=\"M56.25,0 A56.25,56.25 0 0 1 0,56.25\" fill=\"none\" stroke=\"url(#rg)\" stroke-width=\"30\" stroke-linecap=\"butt\"></path></g><path id=\"flowingLiquid\" d=\"M56.25,0 A56.25,56.25 0 0 1 0,56.25\" fill=\"none\"></path></svg></div>", "style": ":host {\n height: 20%;\n width: 20%;\n}\n\n* {\n box-sizing: border-box;\n}\n\n//.responsive-container { width: 20%; height: 20%;} \n//.responsive-container svg {width: 100%; height: 100%;}\n\n@keyframes dashdown {\n to {\n stroke-dashoffset: 200;\n }\n}\n\n@keyframes dashup {\n to {\n stroke-dashoffset: -200;\n }\n}\n\n\n.flowingLiquiddown {\n fill: none;\n stroke: brown; /* Color of the liquid */\n stroke-width: 10;\n stroke-dasharray: 10, 10; /* Dash and gap values */\n animation: dashdown 3s linear infinite;\n vector-effect: non-scaling-stroke; /* Keeps stroke widths from scaling */\n}\n\n.flowingLiquidup {\n fill: none;\n stroke: brown; /* Color of the liquid */\n stroke-width: 10;\n stroke-dasharray: 10, 10; /* Dash and gap values */\n animation: dashup 3s linear infinite;\n vector-effect: non-scaling-stroke; /* Keeps stroke widths from scaling */\n}", "script": "export function init(instance)\n{\n \n instance._bindingsRefresh();\n \n //instance._assignEvent('pipewidth-changed', (ev) => updatewidth(ev.detail.newValue, instance));\n //instance._assignEvent('pipeheight-changed', (ev) => updateheight(ev.detail.newValue, instance));\n instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\n instance._assignEvent('strokewidth-changed', (ev) => updatestrokeWidth(ev.detail.newValue, instance));\n instance._assignEvent('strokecolor-changed', (ev) => updatestrokecolor(ev.detail.newValue, instance));\n instance._assignEvent('strokedasharray-changed', (ev) => updatestrokedasharray(ev.detail.newValue, instance));\n //instance._assignEvent('animationspeed-changed', (ev) => updateanimationspeed(ev.detail.newValue, instance));\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration=instance.animationspeed+'s';\n //instance.style.width = instance.pipewidth+\"px\";\n instance.style.height =(instance.pipesize*2)+\"px\";\n instance.style.width = (instance.pipesize*2)+\"px\";\n flowingliquid.style.strokeWidth =instance.strokewidth;\n flowingliquid.style.stroke = instance.strokecolor;\n flowingliquid.style.strokeDasharray = instance.strokedasharray;\n checkflowdirection(instance);\n let sl = (!isNullOrUndefined(instance.signalup)) ? window.IOB.subscribeState(instance.signalup,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let sr = (!isNullOrUndefined(instance.signaldown)) ? window.IOB.subscribeState(instance.signaldown,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let animationspeed = (!isNullOrUndefined(instance.animationspeed)) ? window.IOB.subscribeState(instance.animationspeed,(id, state)=> updateanimationspeed(id,state,instance)) : {'val':false};\n\n}\n\n\n\nexport function disconnectedCallback(instance) { // Disconnect the observer when the element is removed from the DOM \n\n}\n\nasync function checkflowdirection(instance)\n{ \n let signalup = instance.signalup;\n let checksignalup =(!isNullOrUndefined(signalup)) ? await window.IOB.getState(signalup) : {'val':false};\n let conditionup = instance.conditionup;\n let conditionupvalue = instance.conditionupvalue;\n let up = (!isNullOrUndefined(instance.up)) ? instance.up : false;\n\n let signaldown = instance.signaldown;\n let checksignaldown =(!isNullOrUndefined(signaldown)) ? await window.IOB.getState(signaldown) : {'val':false};\n let conditiondown = instance.conditiondown;\n let conditiondownvalue = instance.conditiondownvalue;\n let down = (!isNullOrUndefined(instance.down)) ? instance.down : false;\n \n let x = (instance.up==true) ? selectCase(checksignalup.val, conditionup, conditionupvalue) : false;\n let y = (instance.down==true) ? selectCase(checksignaldown.val, conditiondown, conditiondownvalue) : false;\n if (x == true || y == true) {\n if (x == true) {\n checkup(up,instance);\n }\n if (y == true) {\n checkdown(down,instance);\n }\n }\n else {\n nothing(instance);\n }\n \n}\n\nfunction handleStateChange(id, state,instance) {\n checkflowdirection(instance);\n}\n\nfunction updatewidth(value,instance){\n instance.style.width=value+\"px\";\n}\n\nfunction updateheight(value,instance){\n instance.style.height=value+\"px\";\n}\n\nfunction updatesize(value,instance){\n instance.style.width=(value*2)+\"px\";\n instance.style.height=(value*2)+\"px\";\n}\n\nfunction updatestrokeWidth(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeWidth = value;\n \n}\n\nfunction updatestrokecolor(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.stroke = value;\n \n}\n\nfunction updatestrokedasharray(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeDasharray = value;\n \n}\n\nfunction updateanimationspeed(id, state,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration = state.val+'s';\n}\n\nfunction selectCase(value, condition, conditionvalue) {\n var flag1;\n switch (condition) {\n case 'exist':\n flag1 = value.includes(conditionvalue);\n break;\n\n case 'equal':\n let vl = Number(value);\n let convl = Number(Boolean(conditionvalue)) ;\n if (vl == convl) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'is not equal':\n let vl1 = Number(value);\n let convl1 = Number(Boolean(conditionvalue)) ;\n if (vl1 != convl1) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than':\n if (parseInt(value) < parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than or equal':\n if (parseInt(value) <= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than':\n if (parseInt(value) > parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than or equal':\n if (parseInt(value) >= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n }\n return flag1;\n}\n\nfunction isNullOrUndefined(value) {\n return value === undefined || value === null || value ===\"\";\n}\n\nfunction nothing(instance) {\n //if(data==true)\n //{\n /*var svg = instance.shadowRoot.querySelector(\"svg\");\n var line = $(svg).find(\"line\");*/\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", '');\n path.setAttribute(\"visibility\", 'hidden');\n //$(line).css('display', 'none');\n // }\n }\n\n function checkup(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquidup');\n path.setAttribute(\"visibility\", 'visible');\n }\n }\n\nfunction checkdown(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquiddown');\n path.setAttribute(\"visibility\", 'visible');\n }\n} \n", "properties": {"pipesize": {"type": "number", "default": "100"}, "strokewidth": {"type": "number", "default": "5"}, "strokecolor": {"type": "color", "default": "brown"}, "strokedasharray": {"type": "string", "default": "10, 10"}, "up": {"type": "boolean"}, "signalup": {"type": "signal"}, "conditionup": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditionupvalue": {"type": "string"}, "down": {"type": "boolean"}, "signaldown": {"type": "signal"}, "conditiondown": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditiondownvalue": {"type": "string"}, "animationspeed": {"type": "signal"}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"html": "<div class=\"responsive-container\" style=\"width:100%;height:100%;position:relative;\"><svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 112.5 112.5\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\" xml:space=\"preserve\" style=\"display:block;\"><g id=\"Group_curve\"><path d=\"M56.25,0 A56.25,56.25 0 0 0 112.5,56.25\" fill=\"none\" stroke=\"#646566\" stroke-width=\"30\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 A56.25,56.25 0 0 0 112.5,56.25\" fill=\"none\" stroke=\"#7a7b7c\" stroke-width=\"26\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 A56.25,56.25 0 0 0 112.5,56.25\" fill=\"none\" stroke=\"#949596\" stroke-width=\"21\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 A56.25,56.25 0 0 0 112.5,56.25\" fill=\"none\" stroke=\"#bdbebf\" stroke-width=\"15\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 A56.25,56.25 0 0 0 112.5,56.25\" fill=\"none\" stroke=\"#E0E0E0\" stroke-width=\"9\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 A56.25,56.25 0 0 0 112.5,56.25\" fill=\"none\" stroke=\"#efefef\" stroke-width=\"4\" stroke-linecap=\"butt\"></path></g><path id=\"flowingLiquid\" d=\"M56.25,0 A56.25,56.25 0 0 0 112.5,56.25\" fill=\"none\"></path></svg></div>", "style": ":host {\n height: 20%;\n width: 20%;\n}\n\n* {\n box-sizing: border-box;\n}\n\n//.responsive-container { width: 100%; height: 100%;} \n//.responsive-container svg {width: 100%; height: 100%;}\n\n@keyframes dashdown {\n to {\n stroke-dashoffset: -200;\n }\n}\n\n@keyframes dashup {\n to {\n stroke-dashoffset: 200;\n }\n}\n\n\n.flowingLiquiddown {\n fill: none;\n stroke: brown; /* Color of the liquid */\n stroke-width: 10;\n stroke-dasharray: 10, 10; /* Dash and gap values */\n animation: dashdown 3s linear infinite;\n vector-effect: non-scaling-stroke; /* Keeps stroke widths from scaling */\n}\n\n.flowingLiquidup {\n fill: none;\n stroke: brown; /* Color of the liquid */\n stroke-width: 10;\n stroke-dasharray: 10, 10; /* Dash and gap values */\n animation: dashup 3s linear infinite;\n vector-effect: non-scaling-stroke; /* Keeps stroke widths from scaling */\n}", "script": "export function init(instance)\n{\n \n instance._bindingsRefresh();\n \n //instance._assignEvent('pipewidth-changed', (ev) => updatewidth(ev.detail.newValue, instance));\n //instance._assignEvent('pipeheight-changed', (ev) => updateheight(ev.detail.newValue, instance));\n instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\n instance._assignEvent('strokewidth-changed', (ev) => updatestrokeWidth(ev.detail.newValue, instance));\n instance._assignEvent('strokecolor-changed', (ev) => updatestrokecolor(ev.detail.newValue, instance));\n instance._assignEvent('strokedasharray-changed', (ev) => updatestrokedasharray(ev.detail.newValue, instance));\n //instance._assignEvent('animationspeed-changed', (ev) => updateanimationspeed(ev.detail.newValue, instance));\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration=instance.animationspeed+'s';\n //instance.style.width = instance.pipewidth+\"px\";\n instance.style.height =(instance.pipesize*2)+\"px\";\n instance.style.width = (instance.pipesize*2)+\"px\";\n flowingliquid.style.strokeWidth =instance.strokewidth;\n flowingliquid.style.stroke = instance.strokecolor;\n flowingliquid.style.strokeDasharray = instance.strokedasharray;\n checkflowdirection(instance);\n let sl = (!isNullOrUndefined(instance.signalup)) ? window.IOB.subscribeState(instance.signalup,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let sr = (!isNullOrUndefined(instance.signaldown)) ? window.IOB.subscribeState(instance.signaldown,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let animationspeed = (!isNullOrUndefined(instance.animationspeed)) ? window.IOB.subscribeState(instance.animationspeed,(id, state)=> updateanimationspeed(id,state,instance)) : {'val':false};\n\n}\n\n\n\nexport function disconnectedCallback(instance) { // Disconnect the observer when the element is removed from the DOM \n\n}\n\nasync function checkflowdirection(instance)\n{ \n let signalup = instance.signalup;\n let checksignalup =(!isNullOrUndefined(signalup)) ? await window.IOB.getState(signalup) : {'val':false};\n let conditionup = instance.conditionup;\n let conditionupvalue = instance.conditionupvalue;\n let up = (!isNullOrUndefined(instance.up)) ? instance.up : false;\n\n let signaldown = instance.signaldown;\n let checksignaldown =(!isNullOrUndefined(signaldown)) ? await window.IOB.getState(signaldown) : {'val':false};\n let conditiondown = instance.conditiondown;\n let conditiondownvalue = instance.conditiondownvalue;\n let down = (!isNullOrUndefined(instance.down)) ? instance.down : false;\n \n let x = (instance.up==true) ? selectCase(checksignalup.val, conditionup, conditionupvalue) : false;\n let y = (instance.down==true) ? selectCase(checksignaldown.val, conditiondown, conditiondownvalue) : false;\n if (x == true || y == true) {\n if (x == true) {\n checkup(up,instance);\n }\n if (y == true) {\n checkdown(down,instance);\n }\n }\n else {\n nothing(instance);\n }\n \n}\n\nfunction handleStateChange(id, state,instance) {\n checkflowdirection(instance);\n}\n\nfunction updatewidth(value,instance){\n instance.style.width=value+\"px\";\n}\n\nfunction updateheight(value,instance){\n instance.style.height=value+\"px\";\n}\n\nfunction updatesize(value,instance){\n instance.style.width=(value*2)+\"px\";\n instance.style.height=(value*2)+\"px\";\n}\n\nfunction updatestrokeWidth(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeWidth = value;\n \n}\n\nfunction updatestrokecolor(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.stroke = value;\n \n}\n\nfunction updatestrokedasharray(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeDasharray = value;\n \n}\n\nfunction updateanimationspeed(id, state,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration = state.val+'s';\n}\n\nfunction selectCase(value, condition, conditionvalue) {\n var flag1;\n switch (condition) {\n case 'exist':\n flag1 = value.includes(conditionvalue);\n break;\n\n case 'equal':\n let vl = Number(value);\n let convl = Number(Boolean(conditionvalue)) ;\n if (vl == convl) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'is not equal':\n let vl1 = Number(value);\n let convl1 = Number(Boolean(conditionvalue)) ;\n if (vl1 != convl1) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than':\n if (parseInt(value) < parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than or equal':\n if (parseInt(value) <= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than':\n if (parseInt(value) > parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than or equal':\n if (parseInt(value) >= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n }\n return flag1;\n}\n\nfunction isNullOrUndefined(value) {\n return value === undefined || value === null || value ===\"\";\n}\n\nfunction nothing(instance) {\n //if(data==true)\n //{\n /*var svg = instance.shadowRoot.querySelector(\"svg\");\n var line = $(svg).find(\"line\");*/\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", '');\n path.setAttribute(\"visibility\", 'hidden');\n //$(line).css('display', 'none');\n // }\n }\n\n function checkup(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquidup');\n path.setAttribute(\"visibility\", 'visible');\n }\n }\n\nfunction checkdown(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquiddown');\n path.setAttribute(\"visibility\", 'visible');\n }\n} \n", "properties": {"pipesize": {"type": "number", "default": "100"}, "strokewidth": {"type": "number", "default": "5"}, "strokecolor": {"type": "color", "default": "brown"}, "strokedasharray": {"type": "string", "default": "10, 10"}, "up": {"type": "boolean"}, "signalup": {"type": "signal"}, "conditionup": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditionupvalue": {"type": "string"}, "down": {"type": "boolean"}, "signaldown": {"type": "signal"}, "conditiondown": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditiondownvalue": {"type": "string"}, "animationspeed": {"type": "signal"}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}
|
|
1
|
+
{"html": "<div class=\"responsive-container\" style=\"width:100%;height:100%;position:relative;\"><svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 112.5 112.5\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\" xml:space=\"preserve\" style=\"display:block;\"><defs><radialGradient id=\"rg\" gradientUnits=\"userSpaceOnUse\" cx=\"112.5\" cy=\"0\" r=\"71.25\"><stop offset=\"0.583\" stop-color=\"#646566\"/><stop offset=\"0.646\" stop-color=\"#909091\"/><stop offset=\"0.785\" stop-color=\"#E0E0E0\"/><stop offset=\"1\" stop-color=\"#646566\"/></radialGradient></defs><g id=\"Group_curve\"><path d=\"M56.25,0 A56.25,56.25 0 0 0 112.5,56.25\" fill=\"none\" stroke=\"url(#rg)\" stroke-width=\"30\" stroke-linecap=\"butt\"></path></g><path id=\"flowingLiquid\" d=\"M56.25,0 A56.25,56.25 0 0 0 112.5,56.25\" fill=\"none\"></path></svg></div>", "style": ":host {\n height: 20%;\n width: 20%;\n}\n\n* {\n box-sizing: border-box;\n}\n\n//.responsive-container { width: 100%; height: 100%;} \n//.responsive-container svg {width: 100%; height: 100%;}\n\n@keyframes dashdown {\n to {\n stroke-dashoffset: -200;\n }\n}\n\n@keyframes dashup {\n to {\n stroke-dashoffset: 200;\n }\n}\n\n\n.flowingLiquiddown {\n fill: none;\n stroke: brown; /* Color of the liquid */\n stroke-width: 10;\n stroke-dasharray: 10, 10; /* Dash and gap values */\n animation: dashdown 3s linear infinite;\n vector-effect: non-scaling-stroke; /* Keeps stroke widths from scaling */\n}\n\n.flowingLiquidup {\n fill: none;\n stroke: brown; /* Color of the liquid */\n stroke-width: 10;\n stroke-dasharray: 10, 10; /* Dash and gap values */\n animation: dashup 3s linear infinite;\n vector-effect: non-scaling-stroke; /* Keeps stroke widths from scaling */\n}", "script": "export function init(instance)\n{\n \n instance._bindingsRefresh();\n \n //instance._assignEvent('pipewidth-changed', (ev) => updatewidth(ev.detail.newValue, instance));\n //instance._assignEvent('pipeheight-changed', (ev) => updateheight(ev.detail.newValue, instance));\n instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\n instance._assignEvent('strokewidth-changed', (ev) => updatestrokeWidth(ev.detail.newValue, instance));\n instance._assignEvent('strokecolor-changed', (ev) => updatestrokecolor(ev.detail.newValue, instance));\n instance._assignEvent('strokedasharray-changed', (ev) => updatestrokedasharray(ev.detail.newValue, instance));\n //instance._assignEvent('animationspeed-changed', (ev) => updateanimationspeed(ev.detail.newValue, instance));\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration=instance.animationspeed+'s';\n //instance.style.width = instance.pipewidth+\"px\";\n instance.style.height =(instance.pipesize*2)+\"px\";\n instance.style.width = (instance.pipesize*2)+\"px\";\n flowingliquid.style.strokeWidth =instance.strokewidth;\n flowingliquid.style.stroke = instance.strokecolor;\n flowingliquid.style.strokeDasharray = instance.strokedasharray;\n checkflowdirection(instance);\n let sl = (!isNullOrUndefined(instance.signalup)) ? window.IOB.subscribeState(instance.signalup,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let sr = (!isNullOrUndefined(instance.signaldown)) ? window.IOB.subscribeState(instance.signaldown,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let animationspeed = (!isNullOrUndefined(instance.animationspeed)) ? window.IOB.subscribeState(instance.animationspeed,(id, state)=> updateanimationspeed(id,state,instance)) : {'val':false};\n\n}\n\n\n\nexport function disconnectedCallback(instance) { // Disconnect the observer when the element is removed from the DOM \n\n}\n\nasync function checkflowdirection(instance)\n{ \n let signalup = instance.signalup;\n let checksignalup =(!isNullOrUndefined(signalup)) ? await window.IOB.getState(signalup) : {'val':false};\n let conditionup = instance.conditionup;\n let conditionupvalue = instance.conditionupvalue;\n let up = (!isNullOrUndefined(instance.up)) ? instance.up : false;\n\n let signaldown = instance.signaldown;\n let checksignaldown =(!isNullOrUndefined(signaldown)) ? await window.IOB.getState(signaldown) : {'val':false};\n let conditiondown = instance.conditiondown;\n let conditiondownvalue = instance.conditiondownvalue;\n let down = (!isNullOrUndefined(instance.down)) ? instance.down : false;\n \n let x = (instance.up==true) ? selectCase(checksignalup.val, conditionup, conditionupvalue) : false;\n let y = (instance.down==true) ? selectCase(checksignaldown.val, conditiondown, conditiondownvalue) : false;\n if (x == true || y == true) {\n if (x == true) {\n checkup(up,instance);\n }\n if (y == true) {\n checkdown(down,instance);\n }\n }\n else {\n nothing(instance);\n }\n \n}\n\nfunction handleStateChange(id, state,instance) {\n checkflowdirection(instance);\n}\n\nfunction updatewidth(value,instance){\n instance.style.width=value+\"px\";\n}\n\nfunction updateheight(value,instance){\n instance.style.height=value+\"px\";\n}\n\nfunction updatesize(value,instance){\n instance.style.width=(value*2)+\"px\";\n instance.style.height=(value*2)+\"px\";\n}\n\nfunction updatestrokeWidth(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeWidth = value;\n \n}\n\nfunction updatestrokecolor(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.stroke = value;\n \n}\n\nfunction updatestrokedasharray(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeDasharray = value;\n \n}\n\nfunction updateanimationspeed(id, state,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration = state.val+'s';\n}\n\nfunction selectCase(value, condition, conditionvalue) {\n var flag1;\n switch (condition) {\n case 'exist':\n flag1 = value.includes(conditionvalue);\n break;\n\n case 'equal':\n let vl = Number(value);\n let convl = Number(Boolean(conditionvalue)) ;\n if (vl == convl) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'is not equal':\n let vl1 = Number(value);\n let convl1 = Number(Boolean(conditionvalue)) ;\n if (vl1 != convl1) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than':\n if (parseInt(value) < parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than or equal':\n if (parseInt(value) <= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than':\n if (parseInt(value) > parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than or equal':\n if (parseInt(value) >= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n }\n return flag1;\n}\n\nfunction isNullOrUndefined(value) {\n return value === undefined || value === null || value ===\"\";\n}\n\nfunction nothing(instance) {\n //if(data==true)\n //{\n /*var svg = instance.shadowRoot.querySelector(\"svg\");\n var line = $(svg).find(\"line\");*/\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", '');\n path.setAttribute(\"visibility\", 'hidden');\n //$(line).css('display', 'none');\n // }\n }\n\n function checkup(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquidup');\n path.setAttribute(\"visibility\", 'visible');\n }\n }\n\nfunction checkdown(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquiddown');\n path.setAttribute(\"visibility\", 'visible');\n }\n} \n", "properties": {"pipesize": {"type": "number", "default": "100"}, "strokewidth": {"type": "number", "default": "5"}, "strokecolor": {"type": "color", "default": "brown"}, "strokedasharray": {"type": "string", "default": "10, 10"}, "up": {"type": "boolean"}, "signalup": {"type": "signal"}, "conditionup": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditionupvalue": {"type": "string"}, "down": {"type": "boolean"}, "signaldown": {"type": "signal"}, "conditiondown": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditiondownvalue": {"type": "string"}, "animationspeed": {"type": "signal"}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"html": "<div class=\"responsive-container\" style=\"width:100%;height:100%;position:relative;\"><svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 112.5 112.5\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\" xml:space=\"preserve\" style=\"display:block;\"><g id=\"Group_curve\"><path d=\"M0,56.25 A56.25,56.25 0 0 1 56.25,112.5\" fill=\"none\" stroke=\"#646566\" stroke-width=\"30\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 A56.25,56.25 0 0 1 56.25,112.5\" fill=\"none\" stroke=\"#7a7b7c\" stroke-width=\"26\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 A56.25,56.25 0 0 1 56.25,112.5\" fill=\"none\" stroke=\"#949596\" stroke-width=\"21\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 A56.25,56.25 0 0 1 56.25,112.5\" fill=\"none\" stroke=\"#bdbebf\" stroke-width=\"15\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 A56.25,56.25 0 0 1 56.25,112.5\" fill=\"none\" stroke=\"#E0E0E0\" stroke-width=\"9\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 A56.25,56.25 0 0 1 56.25,112.5\" fill=\"none\" stroke=\"#efefef\" stroke-width=\"4\" stroke-linecap=\"butt\"></path></g><path id=\"flowingLiquid\" d=\"M0,56.25 A56.25,56.25 0 0 1 56.25,112.5\" fill=\"none\"></path></svg></div>", "style": ":host {\n height: 20%;\n width: 20%;\n}\n\n* {\n box-sizing: border-box;\n}\n\n//.responsive-container { width: 100%; height: 100%;} \n//.responsive-container svg {width: 100%; height: 100%;}\n\n@keyframes dashdown {\n to {\n stroke-dashoffset: 200;\n }\n}\n\n@keyframes dashup {\n to {\n stroke-dashoffset: -200;\n }\n}\n\n\n.flowingLiquiddown {\n fill: none;\n stroke: brown; /* Color of the liquid */\n stroke-width: 10;\n stroke-dasharray: 10, 10; /* Dash and gap values */\n animation: dashdown 3s linear infinite;\n vector-effect: non-scaling-stroke; /* Keeps stroke widths from scaling */\n}\n\n.flowingLiquidup {\n fill: none;\n stroke: brown; /* Color of the liquid */\n stroke-width: 10;\n stroke-dasharray: 10, 10; /* Dash and gap values */\n animation: dashup 3s linear infinite;\n vector-effect: non-scaling-stroke; /* Keeps stroke widths from scaling */\n}", "script": "export function init(instance)\n{\n \n instance._bindingsRefresh();\n \n //instance._assignEvent('pipewidth-changed', (ev) => updatewidth(ev.detail.newValue, instance));\n //instance._assignEvent('pipeheight-changed', (ev) => updateheight(ev.detail.newValue, instance));\n instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\n instance._assignEvent('strokewidth-changed', (ev) => updatestrokeWidth(ev.detail.newValue, instance));\n instance._assignEvent('strokecolor-changed', (ev) => updatestrokecolor(ev.detail.newValue, instance));\n instance._assignEvent('strokedasharray-changed', (ev) => updatestrokedasharray(ev.detail.newValue, instance));\n //instance._assignEvent('animationspeed-changed', (ev) => updateanimationspeed(ev.detail.newValue, instance));\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration=instance.animationspeed+'s';\n //instance.style.width = instance.pipewidth+\"px\";\n instance.style.height =(instance.pipesize*2)+\"px\";\n instance.style.width = (instance.pipesize*2)+\"px\";\n flowingliquid.style.strokeWidth =instance.strokewidth;\n flowingliquid.style.stroke = instance.strokecolor;\n flowingliquid.style.strokeDasharray = instance.strokedasharray;\n checkflowdirection(instance);\n let sl = (!isNullOrUndefined(instance.signalup)) ? window.IOB.subscribeState(instance.signalup,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let sr = (!isNullOrUndefined(instance.signaldown)) ? window.IOB.subscribeState(instance.signaldown,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let animationspeed = (!isNullOrUndefined(instance.animationspeed)) ? window.IOB.subscribeState(instance.animationspeed,(id, state)=> updateanimationspeed(id,state,instance)) : {'val':false};\n\n}\n\n\n\nexport function disconnectedCallback(instance) { // Disconnect the observer when the element is removed from the DOM \n\n}\n\nasync function checkflowdirection(instance)\n{ \n let signalup = instance.signalup;\n let checksignalup =(!isNullOrUndefined(signalup)) ? await window.IOB.getState(signalup) : {'val':false};\n let conditionup = instance.conditionup;\n let conditionupvalue = instance.conditionupvalue;\n let up = (!isNullOrUndefined(instance.up)) ? instance.up : false;\n\n let signaldown = instance.signaldown;\n let checksignaldown =(!isNullOrUndefined(signaldown)) ? await window.IOB.getState(signaldown) : {'val':false};\n let conditiondown = instance.conditiondown;\n let conditiondownvalue = instance.conditiondownvalue;\n let down = (!isNullOrUndefined(instance.down)) ? instance.down : false;\n \n let x = (instance.up==true) ? selectCase(checksignalup.val, conditionup, conditionupvalue) : false;\n let y = (instance.down==true) ? selectCase(checksignaldown.val, conditiondown, conditiondownvalue) : false;\n if (x == true || y == true) {\n if (x == true) {\n checkup(up,instance);\n }\n if (y == true) {\n checkdown(down,instance);\n }\n }\n else {\n nothing(instance);\n }\n \n}\n\nfunction handleStateChange(id, state,instance) {\n checkflowdirection(instance);\n}\n\nfunction updatewidth(value,instance){\n instance.style.width=value+\"px\";\n}\n\nfunction updateheight(value,instance){\n instance.style.height=value+\"px\";\n}\n\nfunction updatesize(value,instance){\n instance.style.width=(value*2)+\"px\";\n instance.style.height=(value*2)+\"px\";\n}\n\nfunction updatestrokeWidth(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeWidth = value;\n \n}\n\nfunction updatestrokecolor(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.stroke = value;\n \n}\n\nfunction updatestrokedasharray(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeDasharray = value;\n \n}\n\nfunction updateanimationspeed(id, state,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration = state.val+'s';\n}\n\nfunction selectCase(value, condition, conditionvalue) {\n var flag1;\n switch (condition) {\n case 'exist':\n flag1 = value.includes(conditionvalue);\n break;\n\n case 'equal':\n let vl = Number(value);\n let convl = Number(Boolean(conditionvalue)) ;\n if (vl == convl) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'is not equal':\n let vl1 = Number(value);\n let convl1 = Number(Boolean(conditionvalue)) ;\n if (vl1 != convl1) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than':\n if (parseInt(value) < parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than or equal':\n if (parseInt(value) <= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than':\n if (parseInt(value) > parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than or equal':\n if (parseInt(value) >= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n }\n return flag1;\n}\n\nfunction isNullOrUndefined(value) {\n return value === undefined || value === null || value ===\"\";\n}\n\nfunction nothing(instance) {\n //if(data==true)\n //{\n /*var svg = instance.shadowRoot.querySelector(\"svg\");\n var line = $(svg).find(\"line\");*/\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", '');\n path.setAttribute(\"visibility\", 'hidden');\n //$(line).css('display', 'none');\n // }\n }\n\n function checkup(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquidup');\n path.setAttribute(\"visibility\", 'visible');\n }\n }\n\nfunction checkdown(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquiddown');\n path.setAttribute(\"visibility\", 'visible');\n }\n} \n", "properties": {"pipesize": {"type": "number", "default": "100"}, "strokewidth": {"type": "number", "default": "5"}, "strokecolor": {"type": "color", "default": "brown"}, "strokedasharray": {"type": "string", "default": "10, 10"}, "up": {"type": "boolean"}, "signalup": {"type": "signal"}, "conditionup": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditionupvalue": {"type": "string"}, "down": {"type": "boolean"}, "signaldown": {"type": "signal"}, "conditiondown": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditiondownvalue": {"type": "string"}, "animationspeed": {"type": "signal"}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}
|
|
1
|
+
{"html": "<div class=\"responsive-container\" style=\"width:100%;height:100%;position:relative;\"><svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 112.5 112.5\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\" xml:space=\"preserve\" style=\"display:block;\"><defs><radialGradient id=\"rg\" gradientUnits=\"userSpaceOnUse\" cx=\"0\" cy=\"112.5\" r=\"71.25\"><stop offset=\"0.583\" stop-color=\"#646566\"/><stop offset=\"0.646\" stop-color=\"#909091\"/><stop offset=\"0.785\" stop-color=\"#E0E0E0\"/><stop offset=\"1\" stop-color=\"#646566\"/></radialGradient></defs><g id=\"Group_curve\"><path d=\"M0,56.25 A56.25,56.25 0 0 1 56.25,112.5\" fill=\"none\" stroke=\"url(#rg)\" stroke-width=\"30\" stroke-linecap=\"butt\"></path></g><path id=\"flowingLiquid\" d=\"M0,56.25 A56.25,56.25 0 0 1 56.25,112.5\" fill=\"none\"></path></svg></div>", "style": ":host {\n height: 20%;\n width: 20%;\n}\n\n* {\n box-sizing: border-box;\n}\n\n//.responsive-container { width: 100%; height: 100%;} \n//.responsive-container svg {width: 100%; height: 100%;}\n\n@keyframes dashdown {\n to {\n stroke-dashoffset: 200;\n }\n}\n\n@keyframes dashup {\n to {\n stroke-dashoffset: -200;\n }\n}\n\n\n.flowingLiquiddown {\n fill: none;\n stroke: brown; /* Color of the liquid */\n stroke-width: 10;\n stroke-dasharray: 10, 10; /* Dash and gap values */\n animation: dashdown 3s linear infinite;\n vector-effect: non-scaling-stroke; /* Keeps stroke widths from scaling */\n}\n\n.flowingLiquidup {\n fill: none;\n stroke: brown; /* Color of the liquid */\n stroke-width: 10;\n stroke-dasharray: 10, 10; /* Dash and gap values */\n animation: dashup 3s linear infinite;\n vector-effect: non-scaling-stroke; /* Keeps stroke widths from scaling */\n}", "script": "export function init(instance)\n{\n \n instance._bindingsRefresh();\n \n //instance._assignEvent('pipewidth-changed', (ev) => updatewidth(ev.detail.newValue, instance));\n //instance._assignEvent('pipeheight-changed', (ev) => updateheight(ev.detail.newValue, instance));\n instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\n instance._assignEvent('strokewidth-changed', (ev) => updatestrokeWidth(ev.detail.newValue, instance));\n instance._assignEvent('strokecolor-changed', (ev) => updatestrokecolor(ev.detail.newValue, instance));\n instance._assignEvent('strokedasharray-changed', (ev) => updatestrokedasharray(ev.detail.newValue, instance));\n //instance._assignEvent('animationspeed-changed', (ev) => updateanimationspeed(ev.detail.newValue, instance));\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration=instance.animationspeed+'s';\n //instance.style.width = instance.pipewidth+\"px\";\n instance.style.height =(instance.pipesize*2)+\"px\";\n instance.style.width = (instance.pipesize*2)+\"px\";\n flowingliquid.style.strokeWidth =instance.strokewidth;\n flowingliquid.style.stroke = instance.strokecolor;\n flowingliquid.style.strokeDasharray = instance.strokedasharray;\n checkflowdirection(instance);\n let sl = (!isNullOrUndefined(instance.signalup)) ? window.IOB.subscribeState(instance.signalup,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let sr = (!isNullOrUndefined(instance.signaldown)) ? window.IOB.subscribeState(instance.signaldown,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let animationspeed = (!isNullOrUndefined(instance.animationspeed)) ? window.IOB.subscribeState(instance.animationspeed,(id, state)=> updateanimationspeed(id,state,instance)) : {'val':false};\n\n}\n\n\n\nexport function disconnectedCallback(instance) { // Disconnect the observer when the element is removed from the DOM \n\n}\n\nasync function checkflowdirection(instance)\n{ \n let signalup = instance.signalup;\n let checksignalup =(!isNullOrUndefined(signalup)) ? await window.IOB.getState(signalup) : {'val':false};\n let conditionup = instance.conditionup;\n let conditionupvalue = instance.conditionupvalue;\n let up = (!isNullOrUndefined(instance.up)) ? instance.up : false;\n\n let signaldown = instance.signaldown;\n let checksignaldown =(!isNullOrUndefined(signaldown)) ? await window.IOB.getState(signaldown) : {'val':false};\n let conditiondown = instance.conditiondown;\n let conditiondownvalue = instance.conditiondownvalue;\n let down = (!isNullOrUndefined(instance.down)) ? instance.down : false;\n \n let x = (instance.up==true) ? selectCase(checksignalup.val, conditionup, conditionupvalue) : false;\n let y = (instance.down==true) ? selectCase(checksignaldown.val, conditiondown, conditiondownvalue) : false;\n if (x == true || y == true) {\n if (x == true) {\n checkup(up,instance);\n }\n if (y == true) {\n checkdown(down,instance);\n }\n }\n else {\n nothing(instance);\n }\n \n}\n\nfunction handleStateChange(id, state,instance) {\n checkflowdirection(instance);\n}\n\nfunction updatewidth(value,instance){\n instance.style.width=value+\"px\";\n}\n\nfunction updateheight(value,instance){\n instance.style.height=value+\"px\";\n}\n\nfunction updatesize(value,instance){\n instance.style.width=(value*2)+\"px\";\n instance.style.height=(value*2)+\"px\";\n}\n\nfunction updatestrokeWidth(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeWidth = value;\n \n}\n\nfunction updatestrokecolor(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.stroke = value;\n \n}\n\nfunction updatestrokedasharray(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeDasharray = value;\n \n}\n\nfunction updateanimationspeed(id, state,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration = state.val+'s';\n}\n\nfunction selectCase(value, condition, conditionvalue) {\n var flag1;\n switch (condition) {\n case 'exist':\n flag1 = value.includes(conditionvalue);\n break;\n\n case 'equal':\n let vl = Number(value);\n let convl = Number(Boolean(conditionvalue)) ;\n if (vl == convl) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'is not equal':\n let vl1 = Number(value);\n let convl1 = Number(Boolean(conditionvalue)) ;\n if (vl1 != convl1) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than':\n if (parseInt(value) < parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than or equal':\n if (parseInt(value) <= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than':\n if (parseInt(value) > parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than or equal':\n if (parseInt(value) >= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n }\n return flag1;\n}\n\nfunction isNullOrUndefined(value) {\n return value === undefined || value === null || value ===\"\";\n}\n\nfunction nothing(instance) {\n //if(data==true)\n //{\n /*var svg = instance.shadowRoot.querySelector(\"svg\");\n var line = $(svg).find(\"line\");*/\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", '');\n path.setAttribute(\"visibility\", 'hidden');\n //$(line).css('display', 'none');\n // }\n }\n\n function checkup(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquidup');\n path.setAttribute(\"visibility\", 'visible');\n }\n }\n\nfunction checkdown(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquiddown');\n path.setAttribute(\"visibility\", 'visible');\n }\n} \n", "properties": {"pipesize": {"type": "number", "default": "100"}, "strokewidth": {"type": "number", "default": "5"}, "strokecolor": {"type": "color", "default": "brown"}, "strokedasharray": {"type": "string", "default": "10, 10"}, "up": {"type": "boolean"}, "signalup": {"type": "signal"}, "conditionup": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditionupvalue": {"type": "string"}, "down": {"type": "boolean"}, "signaldown": {"type": "signal"}, "conditiondown": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditiondownvalue": {"type": "string"}, "animationspeed": {"type": "signal"}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"html": "<div class=\"responsive-container\" style=\"width:100%;height:100%;position:relative;\"><svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 112.5 112.5\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\" xml:space=\"preserve\" style=\"display:block;\"><g id=\"Group_curve\"><path d=\"M112.5,56.25 A56.25,56.25 0 0 0 56.25,112.5\" fill=\"none\" stroke=\"#646566\" stroke-width=\"30\" stroke-linecap=\"butt\"></path><path d=\"M112.5,56.25 A56.25,56.25 0 0 0 56.25,112.5\" fill=\"none\" stroke=\"#7a7b7c\" stroke-width=\"26\" stroke-linecap=\"butt\"></path><path d=\"M112.5,56.25 A56.25,56.25 0 0 0 56.25,112.5\" fill=\"none\" stroke=\"#949596\" stroke-width=\"21\" stroke-linecap=\"butt\"></path><path d=\"M112.5,56.25 A56.25,56.25 0 0 0 56.25,112.5\" fill=\"none\" stroke=\"#bdbebf\" stroke-width=\"15\" stroke-linecap=\"butt\"></path><path d=\"M112.5,56.25 A56.25,56.25 0 0 0 56.25,112.5\" fill=\"none\" stroke=\"#E0E0E0\" stroke-width=\"9\" stroke-linecap=\"butt\"></path><path d=\"M112.5,56.25 A56.25,56.25 0 0 0 56.25,112.5\" fill=\"none\" stroke=\"#efefef\" stroke-width=\"4\" stroke-linecap=\"butt\"></path></g><path id=\"flowingLiquid\" d=\"M112.5,56.25 A56.25,56.25 0 0 0 56.25,112.5\" fill=\"none\"></path></svg></div>", "style": ":host {\n height: 20%;\n width: 20%;\n}\n\n* {\n box-sizing: border-box;\n}\n\n//.responsive-container { width: 100%; height: 100%;} \n//.responsive-container svg {width: 100%; height: 100%;}\n\n@keyframes dashdown {\n to {\n stroke-dashoffset: -200;\n }\n}\n\n@keyframes dashup {\n to {\n stroke-dashoffset: 200;\n }\n}\n\n\n.flowingLiquiddown {\n fill: none;\n stroke: brown; /* Color of the liquid */\n stroke-width: 10;\n stroke-dasharray: 10, 10; /* Dash and gap values */\n animation: dashdown 3s linear infinite;\n vector-effect: non-scaling-stroke; /* Keeps stroke widths from scaling */\n}\n\n.flowingLiquidup {\n fill: none;\n stroke: brown; /* Color of the liquid */\n stroke-width: 10;\n stroke-dasharray: 10, 10; /* Dash and gap values */\n animation: dashup 3s linear infinite;\n vector-effect: non-scaling-stroke; /* Keeps stroke widths from scaling */\n}", "script": "export function init(instance)\n{\n \n instance._bindingsRefresh();\n \n //instance._assignEvent('pipewidth-changed', (ev) => updatewidth(ev.detail.newValue, instance));\n //instance._assignEvent('pipeheight-changed', (ev) => updateheight(ev.detail.newValue, instance));\n instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\n instance._assignEvent('strokewidth-changed', (ev) => updatestrokeWidth(ev.detail.newValue, instance));\n instance._assignEvent('strokecolor-changed', (ev) => updatestrokecolor(ev.detail.newValue, instance));\n instance._assignEvent('strokedasharray-changed', (ev) => updatestrokedasharray(ev.detail.newValue, instance));\n //instance._assignEvent('animationspeed-changed', (ev) => updateanimationspeed(ev.detail.newValue, instance));\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration=instance.animationspeed+'s';\n //instance.style.width = instance.pipewidth+\"px\";\n instance.style.height =(instance.pipesize*2)+\"px\";\n instance.style.width = (instance.pipesize*2)+\"px\";\n flowingliquid.style.strokeWidth =instance.strokewidth;\n flowingliquid.style.stroke = instance.strokecolor;\n flowingliquid.style.strokeDasharray = instance.strokedasharray;\n checkflowdirection(instance);\n let sl = (!isNullOrUndefined(instance.signalup)) ? window.IOB.subscribeState(instance.signalup,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let sr = (!isNullOrUndefined(instance.signaldown)) ? window.IOB.subscribeState(instance.signaldown,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let animationspeed = (!isNullOrUndefined(instance.animationspeed)) ? window.IOB.subscribeState(instance.animationspeed,(id, state)=> updateanimationspeed(id,state,instance)) : {'val':false};\n\n}\n\n\n\nexport function disconnectedCallback(instance) { // Disconnect the observer when the element is removed from the DOM \n\n}\n\nasync function checkflowdirection(instance)\n{ \n let signalup = instance.signalup;\n let checksignalup =(!isNullOrUndefined(signalup)) ? await window.IOB.getState(signalup) : {'val':false};\n let conditionup = instance.conditionup;\n let conditionupvalue = instance.conditionupvalue;\n let up = (!isNullOrUndefined(instance.up)) ? instance.up : false;\n\n let signaldown = instance.signaldown;\n let checksignaldown =(!isNullOrUndefined(signaldown)) ? await window.IOB.getState(signaldown) : {'val':false};\n let conditiondown = instance.conditiondown;\n let conditiondownvalue = instance.conditiondownvalue;\n let down = (!isNullOrUndefined(instance.down)) ? instance.down : false;\n \n let x = (instance.up==true) ? selectCase(checksignalup.val, conditionup, conditionupvalue) : false;\n let y = (instance.down==true) ? selectCase(checksignaldown.val, conditiondown, conditiondownvalue) : false;\n if (x == true || y == true) {\n if (x == true) {\n checkup(up,instance);\n }\n if (y == true) {\n checkdown(down,instance);\n }\n }\n else {\n nothing(instance);\n }\n \n}\n\nfunction handleStateChange(id, state,instance) {\n checkflowdirection(instance);\n}\n\nfunction updatewidth(value,instance){\n instance.style.width=value+\"px\";\n}\n\nfunction updateheight(value,instance){\n instance.style.height=value+\"px\";\n}\n\nfunction updatesize(value,instance){\n instance.style.width=(value*2)+\"px\";\n instance.style.height=(value*2)+\"px\";\n}\n\nfunction updatestrokeWidth(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeWidth = value;\n \n}\n\nfunction updatestrokecolor(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.stroke = value;\n \n}\n\nfunction updatestrokedasharray(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeDasharray = value;\n \n}\n\nfunction updateanimationspeed(id, state,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration = state.val+'s';\n}\n\nfunction selectCase(value, condition, conditionvalue) {\n var flag1;\n switch (condition) {\n case 'exist':\n flag1 = value.includes(conditionvalue);\n break;\n\n case 'equal':\n let vl = Number(value);\n let convl = Number(Boolean(conditionvalue)) ;\n if (vl == convl) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'is not equal':\n let vl1 = Number(value);\n let convl1 = Number(Boolean(conditionvalue)) ;\n if (vl1 != convl1) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than':\n if (parseInt(value) < parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than or equal':\n if (parseInt(value) <= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than':\n if (parseInt(value) > parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than or equal':\n if (parseInt(value) >= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n }\n return flag1;\n}\n\nfunction isNullOrUndefined(value) {\n return value === undefined || value === null || value ===\"\";\n}\n\nfunction nothing(instance) {\n //if(data==true)\n //{\n /*var svg = instance.shadowRoot.querySelector(\"svg\");\n var line = $(svg).find(\"line\");*/\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", '');\n path.setAttribute(\"visibility\", 'hidden');\n //$(line).css('display', 'none');\n // }\n }\n\n function checkup(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquidup');\n path.setAttribute(\"visibility\", 'visible');\n }\n }\n\nfunction checkdown(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquiddown');\n path.setAttribute(\"visibility\", 'visible');\n }\n} \n", "properties": {"pipesize": {"type": "number", "default": "100"}, "strokewidth": {"type": "number", "default": "5"}, "strokecolor": {"type": "color", "default": "brown"}, "strokedasharray": {"type": "string", "default": "10, 10"}, "up": {"type": "boolean"}, "signalup": {"type": "signal"}, "conditionup": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditionupvalue": {"type": "string"}, "down": {"type": "boolean"}, "signaldown": {"type": "signal"}, "conditiondown": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditiondownvalue": {"type": "string"}, "animationspeed": {"type": "signal"}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}
|
|
1
|
+
{"html": "<div class=\"responsive-container\" style=\"width:100%;height:100%;position:relative;\"><svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 112.5 112.5\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\" xml:space=\"preserve\" style=\"display:block;\"><defs><radialGradient id=\"rg\" gradientUnits=\"userSpaceOnUse\" cx=\"112.5\" cy=\"112.5\" r=\"71.25\"><stop offset=\"0.583\" stop-color=\"#646566\"/><stop offset=\"0.646\" stop-color=\"#909091\"/><stop offset=\"0.785\" stop-color=\"#E0E0E0\"/><stop offset=\"1\" stop-color=\"#646566\"/></radialGradient></defs><g id=\"Group_curve\"><path d=\"M112.5,56.25 A56.25,56.25 0 0 0 56.25,112.5\" fill=\"none\" stroke=\"url(#rg)\" stroke-width=\"30\" stroke-linecap=\"butt\"></path></g><path id=\"flowingLiquid\" d=\"M112.5,56.25 A56.25,56.25 0 0 0 56.25,112.5\" fill=\"none\"></path></svg></div>", "style": ":host {\n height: 20%;\n width: 20%;\n}\n\n* {\n box-sizing: border-box;\n}\n\n//.responsive-container { width: 100%; height: 100%;} \n//.responsive-container svg {width: 100%; height: 100%;}\n\n@keyframes dashdown {\n to {\n stroke-dashoffset: -200;\n }\n}\n\n@keyframes dashup {\n to {\n stroke-dashoffset: 200;\n }\n}\n\n\n.flowingLiquiddown {\n fill: none;\n stroke: brown; /* Color of the liquid */\n stroke-width: 10;\n stroke-dasharray: 10, 10; /* Dash and gap values */\n animation: dashdown 3s linear infinite;\n vector-effect: non-scaling-stroke; /* Keeps stroke widths from scaling */\n}\n\n.flowingLiquidup {\n fill: none;\n stroke: brown; /* Color of the liquid */\n stroke-width: 10;\n stroke-dasharray: 10, 10; /* Dash and gap values */\n animation: dashup 3s linear infinite;\n vector-effect: non-scaling-stroke; /* Keeps stroke widths from scaling */\n}", "script": "export function init(instance)\n{\n \n instance._bindingsRefresh();\n \n //instance._assignEvent('pipewidth-changed', (ev) => updatewidth(ev.detail.newValue, instance));\n //instance._assignEvent('pipeheight-changed', (ev) => updateheight(ev.detail.newValue, instance));\n instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\n instance._assignEvent('strokewidth-changed', (ev) => updatestrokeWidth(ev.detail.newValue, instance));\n instance._assignEvent('strokecolor-changed', (ev) => updatestrokecolor(ev.detail.newValue, instance));\n instance._assignEvent('strokedasharray-changed', (ev) => updatestrokedasharray(ev.detail.newValue, instance));\n //instance._assignEvent('animationspeed-changed', (ev) => updateanimationspeed(ev.detail.newValue, instance));\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration=instance.animationspeed+'s';\n //instance.style.width = instance.pipewidth+\"px\";\n instance.style.height =(instance.pipesize*2)+\"px\";\n instance.style.width = (instance.pipesize*2)+\"px\";\n flowingliquid.style.strokeWidth =instance.strokewidth;\n flowingliquid.style.stroke = instance.strokecolor;\n flowingliquid.style.strokeDasharray = instance.strokedasharray;\n checkflowdirection(instance);\n let sl = (!isNullOrUndefined(instance.signalup)) ? window.IOB.subscribeState(instance.signalup,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let sr = (!isNullOrUndefined(instance.signaldown)) ? window.IOB.subscribeState(instance.signaldown,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let animationspeed = (!isNullOrUndefined(instance.animationspeed)) ? window.IOB.subscribeState(instance.animationspeed,(id, state)=> updateanimationspeed(id,state,instance)) : {'val':false};\n\n}\n\n\n\nexport function disconnectedCallback(instance) { // Disconnect the observer when the element is removed from the DOM \n\n}\n\nasync function checkflowdirection(instance)\n{ \n let signalup = instance.signalup;\n let checksignalup =(!isNullOrUndefined(signalup)) ? await window.IOB.getState(signalup) : {'val':false};\n let conditionup = instance.conditionup;\n let conditionupvalue = instance.conditionupvalue;\n let up = (!isNullOrUndefined(instance.up)) ? instance.up : false;\n\n let signaldown = instance.signaldown;\n let checksignaldown =(!isNullOrUndefined(signaldown)) ? await window.IOB.getState(signaldown) : {'val':false};\n let conditiondown = instance.conditiondown;\n let conditiondownvalue = instance.conditiondownvalue;\n let down = (!isNullOrUndefined(instance.down)) ? instance.down : false;\n \n let x = (instance.up==true) ? selectCase(checksignalup.val, conditionup, conditionupvalue) : false;\n let y = (instance.down==true) ? selectCase(checksignaldown.val, conditiondown, conditiondownvalue) : false;\n if (x == true || y == true) {\n if (x == true) {\n checkup(up,instance);\n }\n if (y == true) {\n checkdown(down,instance);\n }\n }\n else {\n nothing(instance);\n }\n \n}\n\nfunction handleStateChange(id, state,instance) {\n checkflowdirection(instance);\n}\n\nfunction updatewidth(value,instance){\n instance.style.width=value+\"px\";\n}\n\nfunction updateheight(value,instance){\n instance.style.height=value+\"px\";\n}\n\nfunction updatesize(value,instance){\n instance.style.width=(value*2)+\"px\";\n instance.style.height=(value*2)+\"px\";\n}\n\nfunction updatestrokeWidth(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeWidth = value;\n \n}\n\nfunction updatestrokecolor(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.stroke = value;\n \n}\n\nfunction updatestrokedasharray(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeDasharray = value;\n \n}\n\nfunction updateanimationspeed(id, state,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration = state.val+'s';\n}\n\nfunction selectCase(value, condition, conditionvalue) {\n var flag1;\n switch (condition) {\n case 'exist':\n flag1 = value.includes(conditionvalue);\n break;\n\n case 'equal':\n let vl = Number(value);\n let convl = Number(Boolean(conditionvalue)) ;\n if (vl == convl) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'is not equal':\n let vl1 = Number(value);\n let convl1 = Number(Boolean(conditionvalue)) ;\n if (vl1 != convl1) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than':\n if (parseInt(value) < parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than or equal':\n if (parseInt(value) <= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than':\n if (parseInt(value) > parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than or equal':\n if (parseInt(value) >= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n }\n return flag1;\n}\n\nfunction isNullOrUndefined(value) {\n return value === undefined || value === null || value ===\"\";\n}\n\nfunction nothing(instance) {\n //if(data==true)\n //{\n /*var svg = instance.shadowRoot.querySelector(\"svg\");\n var line = $(svg).find(\"line\");*/\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", '');\n path.setAttribute(\"visibility\", 'hidden');\n //$(line).css('display', 'none');\n // }\n }\n\n function checkup(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquidup');\n path.setAttribute(\"visibility\", 'visible');\n }\n }\n\nfunction checkdown(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquiddown');\n path.setAttribute(\"visibility\", 'visible');\n }\n} \n", "properties": {"pipesize": {"type": "number", "default": "100"}, "strokewidth": {"type": "number", "default": "5"}, "strokecolor": {"type": "color", "default": "brown"}, "strokedasharray": {"type": "string", "default": "10, 10"}, "up": {"type": "boolean"}, "signalup": {"type": "signal"}, "conditionup": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditionupvalue": {"type": "string"}, "down": {"type": "boolean"}, "signaldown": {"type": "signal"}, "conditiondown": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditiondownvalue": {"type": "string"}, "animationspeed": {"type": "signal"}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"html": "<div class=\"responsive-container\" style=\"width:100%;height:100%;position:relative;\"><svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 112.5 112.5\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\" xml:space=\"preserve\" style=\"display:block;\"><
|
|
1
|
+
{"html": "<div class=\"responsive-container\" style=\"width:100%;height:100%;position:relative;\"><svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 112.5 112.5\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\" xml:space=\"preserve\" style=\"display:block;\"><defs><linearGradient id=\"lgH\" gradientUnits=\"userSpaceOnUse\" x1=\"0\" y1=\"41.25\" x2=\"0\" y2=\"71.25\"><stop offset=\"0.01\" stop-color=\"#646566\"/><stop offset=\"0.16\" stop-color=\"#909091\"/><stop offset=\"0.49\" stop-color=\"#E0E0E0\"/><stop offset=\"1\" stop-color=\"#646566\"/></linearGradient><linearGradient id=\"lgV\" gradientUnits=\"userSpaceOnUse\" x1=\"41.25\" y1=\"0\" x2=\"71.25\" y2=\"0\"><stop offset=\"0.01\" stop-color=\"#646566\"/><stop offset=\"0.16\" stop-color=\"#909091\"/><stop offset=\"0.49\" stop-color=\"#E0E0E0\"/><stop offset=\"1\" stop-color=\"#646566\"/></linearGradient></defs><g id=\"Group_tee\"><path d=\"M56.25,56.25 V112.5\" fill=\"none\" stroke=\"url(#lgV)\" stroke-width=\"30\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 H112.5\" fill=\"none\" stroke=\"url(#lgH)\" stroke-width=\"30\" stroke-linecap=\"butt\"></path></g><path id=\"flowingLiquid\" d=\"M0,56.25 H112.5\" fill=\"none\"></path></svg></div>", "script": "export function init(instance){\n instance._bindingsRefresh();\n instance._assignEvent('tee-type-changed', (ev) => updateTee(ev.detail.newValue, instance));\n updateTee(instance.teeType, instance);\n}\n\nfunction updateTee(teeType, instance) {\n debugger;\n const svg = instance._getDomElement('tee_svg');\n if (!svg) {\n console.error('Tee SVG not found');\n return;\n }\n \n teeType = teeType || instance.teeType || '1';\n console.log('Updating tee type:', teeType);\n \n const tees = {\n '1': `<g id=\"Group_Tee_H\">\n <linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"56.2505\" y1=\"56.25\" x2=\"56.2505\" y2=\"0\">\n <stop offset=\"0.01\" style=\"stop-color:#646566\" />\n <stop offset=\"0.16\" style=\"stop-color:#909091\" />\n <stop offset=\"0.49\" style=\"stop-color:#E0E0E0\" />\n <stop offset=\"1\" style=\"stop-color:#646566\" />\n </linearGradient>\n <path fill=\"url(#SVGID_1_)\" d=\"M112.5,56.25H0V0h112.5V56.25z\" />\n </g>\n <g id=\"Group_Tee_V\">\n <linearGradient id=\"SVGID_2_\" gradientUnits=\"userSpaceOnUse\" x1=\"96.1426\" y1=\"31.2671\" x2=\"96.1426\" y2=\"-25.1353\" gradientTransform=\"matrix(0 -1 -1 0 59.3184 166.4961)\">\n <stop offset=\"0.01\" style=\"stop-color:#646566\" />\n <stop offset=\"0.18\" style=\"stop-color:#959595\" />\n <stop offset=\"0.5\" style=\"stop-color:#E0E0E0\" />\n <stop offset=\"1\" style=\"stop-color:#666666\" />\n </linearGradient>\n <path fill=\"url(#SVGID_2_)\" d=\"M84.453,112.393h-56.25l-0.152-52.848c0-20.878,12.613-31.23,28.172-31.23s28.172,10.352,28.172,31.23L84.453,112.393z\" />\n </g>`,\n \n '2': `<g id=\"Group_Tee_H\">\n <linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"56.2505\" y1=\"112.5\" x2=\"56.2505\" y2=\"56.2505\">\n <stop offset=\"0.01\" style=\"stop-color:#646566\" />\n <stop offset=\"0.16\" style=\"stop-color:#909091\" />\n <stop offset=\"0.49\" style=\"stop-color:#E0E0E0\" />\n <stop offset=\"1\" style=\"stop-color:#646566\" />\n </linearGradient>\n <path fill=\"url(#SVGID_1_)\" d=\"M0,56.25h112.5v56.25H0V56.25z\" />\n </g>\n <g id=\"Group_Tee_V\">\n <linearGradient id=\"SVGID_2_\" gradientUnits=\"userSpaceOnUse\" x1=\"28.125\" y1=\"42.1875\" x2=\"84.375\" y2=\"42.1875\">\n <stop offset=\"0.01\" style=\"stop-color:#646566\" />\n <stop offset=\"0.18\" style=\"stop-color:#959595\" />\n <stop offset=\"0.5\" style=\"stop-color:#E0E0E0\" />\n <stop offset=\"1\" style=\"stop-color:#666666\" />\n </linearGradient>\n <path fill=\"url(#SVGID_2_)\" d=\"M84.375,0v56.25c0,0-2.207,28.125-28.125,28.125c-26.336,0-28.125-28.125-28.125-28.125V0\" />\n </g>`,\n \n '3': `<g id=\"Group_Tee_V\">\n <linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"0\" y1=\"56.25\" x2=\"56.25\" y2=\"56.25\">\n <stop offset=\"0.01\" style=\"stop-color:#646566\" />\n <stop offset=\"0.18\" style=\"stop-color:#959595\" />\n <stop offset=\"0.5\" style=\"stop-color:#E0E0E0\" />\n <stop offset=\"1\" style=\"stop-color:#666666\" />\n </linearGradient>\n <path fill=\"url(#SVGID_1_)\" d=\"M56.25,0v112.5H0V0H56.25z\" />\n </g>\n <g id=\"Group_Tee_H\">\n <linearGradient id=\"SVGID_2_\" gradientUnits=\"userSpaceOnUse\" x1=\"70.3125\" y1=\"84.375\" x2=\"70.3125\" y2=\"28.1255\">\n <stop offset=\"0.01\" style=\"stop-color:#646566\" />\n <stop offset=\"0.16\" style=\"stop-color:#909091\" />\n <stop offset=\"0.49\" style=\"stop-color:#E0E0E0\" />\n <stop offset=\"1\" style=\"stop-color:#646566\" />\n </linearGradient>\n <path fill=\"url(#SVGID_2_)\" d=\"M112.5,84.375H56.25c0,0-28.125-0.825-28.125-28.125c0-28.125,28.125-28.125,28.125-28.125h56.25\" />\n </g>`,\n \n '4': `<g id=\"Group_Tee_V\">\n <linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"-0.75\" y1=\"57\" x2=\"55.5\" y2=\"57\" gradientTransform=\"matrix(-1 0 0 1 111 0)\">\n <stop offset=\"0.01\" style=\"stop-color:#646566\" />\n <stop offset=\"0.18\" style=\"stop-color:#959595\" />\n <stop offset=\"0.5\" style=\"stop-color:#E0E0E0\" />\n <stop offset=\"1\" style=\"stop-color:#666666\" />\n </linearGradient>\n <path fill=\"url(#SVGID_1_)\" d=\"M55.5,0.75v112.5h56.25V0.75H55.5z\" />\n </g>\n <g id=\"Group_Tee_H\">\n <linearGradient id=\"SVGID_2_\" gradientUnits=\"userSpaceOnUse\" x1=\"69.5625\" y1=\"85.125\" x2=\"69.5625\" y2=\"28.8755\" gradientTransform=\"matrix(-1 0 0 1 111 0)\">\n <stop offset=\"0.01\" style=\"stop-color:#646566\" />\n <stop offset=\"0.16\" style=\"stop-color:#909091\" />\n <stop offset=\"0.49\" style=\"stop-color:#E0E0E0\" />\n <stop offset=\"1\" style=\"stop-color:#646566\" />\n </linearGradient>\n <path fill=\"url(#SVGID_2_)\" d=\"M-0.75,85.125H55.5c0,0,28.125-0.825,28.125-28.125c0-28.125-28.125-28.125-28.125-28.125H-0.75\" />\n </g>`\n };\n \n svg.innerHTML = tees[teeType] || tees['1'];\n console.log('Tee updated successfully');\n}", "properties": {"teeType": {"type": "enum", "default": "1", "values": ["1", "2", "3", "4"]}, "width": {"type": "number", "default": "112.5"}, "height": {"type": "number", "default": "112.5"}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}
|