Custom On/Off Button

Ignition
1

I have two buttons that I got from the Symbol Factory:

I want to put one on top of the other so when you press it, it turns green or red. I see where you can add an image to a two-state toggle button using the Image Path property. However, it looks like those image types don’t include .svg files and I don’t see anyway to save the images in the Symbol Factory to my hard drive.

Thanks,

2

Someone will probably point you in the right direction of the location folder.

Another way is to google search and find more options. Other then that if your on windows use the sniping feature. Open them in your paint program of choice, remove the background and save as png.

3

There must be a way to do this. There are a ton of both built-in buttons and ones in the Symbol Factory. I can’t believe I’m stuck with a square button that just says on or off. If it’s too difficult to explain in a post, just point me in the right direction.

Thanks

4

When you place a symbol from the factory in a window (or on a template), it isn’t one simple component. Drill down into it to locate the path/ellipse/shape that provides the colored insert, and bind the color property to your status bit one way or another. I recommend adding a custom boolean to that nested object and using the style customizer to change the color based on that bit.

5

As an alternative, you can group two symbols together, with a status bit as a custom property of the group. Toggle the visibility based on the status bit.

If you’re doing this more than once, you can also make a custom component out of the group.

6

Thanks guys! I’ll let you know how it turns out.

7

So I grouped the two images together, created a boolean custom property for the group called Status but as a group there’s no style customizer so how do I tell it what to be if the value is 0 or 1? Do I have to script it? With a single component it’s pretty easy to change the color or make it visible or invisible. Once they’re grouped that goes away.

I even tried tried setting a custom property for each component individually but once they were grouped, same problem.

8

You have to use an if() expression binding on the elements’ color properties to supply the two different colors.

9

Bind the visible property of each button to your Status property. Bind the one you want to show when Status is on directly to Status and bind the other one to not Status via an expression binding:

!{Root Container.Group Component Name.Status}

Adjust component path inside curly braces to match your component.

10

Use the tree view to select components inside the group and access their properties. Or double-click on the group component to enter the group and then you can select individual components inside the group. Your group has properties, and the individual components still have their properties inside the group.

11

An example to illustrate:

SymbolFactory Button Example.proj (31.2 KB)

EDIT: Reworked them to have a separate write value and status value.

12

I’m making progress. I loaded the sample project and setup my own Test button. I created the custom properties, Status and WriteVal just like in the ones that were there. However, I’m not clear on how the bindings are setup. If you can clarify that for me, I’d appreciate it.

Here’s what mine looks like vs yours at the moment:

13

The chain links to the right of an item in that tree indicates it has one or more bound properties. The other symbol to the right of the top one indicates a script (right-click and choose Scripting to view/edit) . To view/edit/add property bindings, select a component in the tree and then look at the properties in the properties pane. Any bound properties are bold. Tap the button to the right of any property to add/view/change binding. Here’s some material on property bindings you may find helpful:
https://inductiveuniversity.com/video/search/?q=binding
Consider starting here:
https://inductiveuniversity.com/video/property-binding/7.9