This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

changing the state of the button to switch the widget
#1
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

Attached Files Thumbnail(s)
   
Reply
#2
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/showthrea...1#pid20521
Reply
#3
Works fantastic!!!
,thank you very much  Heart
Reply
#4
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?

Attached Files Thumbnail(s)
   
Reply
#5
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)?
Reply
#6
(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.
Reply
#7
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)
Reply
#8
Okay, I will do according to your directions. Thanks

I still miss one more question until I am fully happySmile

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)?

Attached Files Thumbnail(s)
   
Reply
#9
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;
}
Reply
#10
(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!
Reply
#11
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

Attached Files Thumbnail(s)
   
Reply
#12
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/showthrea...73#pid8873
------------------------------
Ctrl+F5
Reply
#13
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
Reply
#14
Not widget only elements from the widget.
------------------------------
Ctrl+F5
Reply
#15
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

Attached Files Thumbnail(s)
   
Reply


Forum Jump: