+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: changing the state of the button to switch the widget (/showthread.php?tid=3516)
changing the state of the button to switch the widget - anett@poczta.fm - 18.08.2021
Hi;
I created 3 buttons in the objects, each of them switches the appropriate widget after clicking, it works fine, but my problem concerns the buttons themselves, which do not change the state of on and off when the widget is started. Although the object tab gives the possibility to change the state of the button's appearance (off icon and on icon). In my case, it changes the color of the button from black to green). I am asking for a hint where the problem is, how to solve it. In the attachment, I am sending a screen with visualization.
Thank you in advance
RE: changing the state of the button to switch the widget - admin - 19.08.2021
The object will not change it's value when clicked if a widget is attached to this object.
There's a solution using Custom JavaScript: https://forum.logicmachine.net/showthread.php?tid=3127&pid=20521#pid20521
RE: changing the state of the button to switch the widget - anett@poczta.fm - 19.08.2021
Works fantastic!!!
,thank you very much
RE: changing the state of the button to switch the widget - anett@poczta.fm - 19.08.2021
Hi;
I have one more request, another problem appeared inside the widget, where I have "+", "-" buttons (visualization attached). I would like to switch them after clicking on the button. Toggle style. In the editor, set the on and off icons, it works in such a way that after clicking only one button (for example +), both the "+" and "-" buttons change the state. I need codeI need a code in style toogle buttons. Can you help me?
RE: changing the state of the button to switch the widget - admin - 20.08.2021
Do you want to highlight that the icon was clicked? Or do you want the icon to switch to a different one to show which action has been performed (plus or minus)?
RE: changing the state of the button to switch the widget - anett@poczta.fm - 20.08.2021
(20.08.2021, 08:44)admin Wrote: Do you want to highlight that the icon was clicked? Or do you want the icon to switch to a different one to show which action has been performed (plus or minus)?
I want to show that the icon has been clicked. I want to substitute another svg file after clicking. Something like toggle, first click, icon change, second click, birth to first icon, etc.
RE: changing the state of the button to switch the widget - admin - 20.08.2021
You will need to attach an event script to the control object (0/1/24) and create two status objects for plus/minus (32/1/13 and 32/1/14 in this example, change as needed). Then you need to attach status objects to the plus/minus buttons.
Event script:
Code:
stat_1 = '32/1/14'
stat_0 = '32/1/13'
if event.getvalue() then
stat_c = stat_1
stat_i = stat_0
else
stat_c = stat_0
stat_i = stat_1
end
-- toggle status
grp.write(stat_c, not grp.getvalue(stat_c))
-- turn off opposite status
grp.write(stat_i, false)RE: changing the state of the button to switch the widget - anett@poczta.fm - 20.08.2021
Okay, I will do according to your directions. Thanks
I still miss one more question until I am fully happy
Changing the state of the button after hovering the button (as in the attachment). Not a click, but a mouse hover. Something like css :hover. But css won't work here because I want to replace svg files. Is there any java script code that will find my svg file after custom class and replace the path to another file (like visualization)?
RE: changing the state of the button to switch the widget - admin - 23.08.2021
This can be done via Custom CSS. Change Additional class (link1 in this example) and background url as needed. Repeat for each item where you want to change the hover icon.
Code:
.link1:hover .icon {
background-image: url('/scada/resources/icons/camera.svg');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}
.link1:hover .icon img {
visibility: hidden;
}RE: changing the state of the button to switch the widget - anett@poczta.fm - 23.08.2021
(23.08.2021, 06:42)admin Wrote: This can be done via Custom CSS. Change Additional class (link1 in this example) and background url as needed. Repeat for each item where you want to change the hover icon.
Code:.link1:hover .icon {
background-image: url('/scada/resources/icons/camera.svg');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}
.link1:hover .icon img {
visibility: hidden;
}
Works very well, thank you very much!
RE: changing the state of the button to switch the widget - anett@poczta.fm - 23.08.2021
I have 2 questions about how widgets work. First question: In the plan editor, I can only add a witget to the plan in the facility tab, where after clicking the button the widget is visible. Is it possible to insert a widget into the plan without buttons, so that the widget is visible immediately after loading the plan? As I see it in Mozaic 3.0. The second question concerns the operation of wigets and buttons. I would like one of the three widgets to be active immediately after the page is loaded. Now the witget starts only after clicking on one of the three buttons (I sent the visualization).
Thanks
Aneta
RE: changing the state of the button to switch the widget - Daniel - 23.08.2021
Why don't you just put the default widget elements directly on plan and the other two will overlap when selected.
See also this: https://forum.logicmachine.net/showthread.php?tid=1460&pid=8873#pid8873
RE: changing the state of the button to switch the widget - anett@poczta.fm - 23.08.2021
How can I push a widget directly on the plan without any buttons? I am a complete beginner here and I don't get it yet. I only found a way to place widgets in the "object" tab, but I have to use buttons here.
aneta
RE: changing the state of the button to switch the widget - Daniel - 23.08.2021
Not widget only elements from the widget.
RE: changing the state of the button to switch the widget - anett@poczta.fm - 23.08.2021
The function you gave me ling from "widget-autoopen" is of no use to me because it does not apply to the first page.
I'll explain my problem again. After loading, my website looks like in the attachment, view1. Only after pressing the button I turn on the widget "set temperature" or "air supply" or "lamellas". I would like the first "set temperature" widget to be visible immediately after loading the page