how can i add custom component to ignition or how can i use html to edit component shape

Ignition
1

hi iam new with ignition .
how can i add custom component to ignition or how can i use html to edit component shape

2

You would add a custom component to Ignition by writing a module.

This doesn't provide a lot of insight into what you are trying to accomplish.

You don't really use HTML to "change a component's shape" that is accomplished using CSS.

Highly recommend that you complete the courses at Inductive University.

2 Likes
3

thank but how can i writing a module.

4

It's a non-trivial process that, in particular for Perspective, requires knowledge of the backend Java code, the frontend Javascript/Typescript code, and IA's build system of choice, Gradle.

There's an example, with some documentation attached:

It is not an easy process.

2 Likes
5

@Abdelati_talat_elsha can you describe your use case? Here's how I "create components" in Perspective even though they aren't technically components...

We generally use embedded views in Perspective to build and nest components in Perspective. You can then define your own parameter structure for a view and use those parameters to configure or dynamically update instances of an embedded view. We use this technique extensively and it's relatively simple.

If you want more of a visual/drawn component, you can embed a SVG inside a view, then embed that view. Build a SVG inside a vector graphics software like Affinity Designer, Inkscape, or Figma. Pay attention to the structure and naming of your groups/layers within your designer software, since this will translate to how you can view the SVG structure within Ignition.

Once you embed a SVG in Ignition, you can dive into the SVG structure within the properties editor and place bindings on portions of the SVG. The easiest examples are to toggle display on or off for parts of a SVG, or to bind simple attributes like colors or strings of text.

  1. Updating embedded SVGs is not easy once you have bindings applied, as you will lose bindings. I've been tempted to script the association of bindings based on tags in the SVG text in my graphics editor, but this hasn't been a slam dunk. Count on re-binding in your embedded SVGs if you re-embed into a view.

  2. Related to above, this is a particularly important time to use the best practice of abstracting custom view properties for doing the heavy lifting on logic for your bindings. I usually think of it in three steps: First, the embedded view's parameter structure should be designed to be intuitive, semantic, and simple for any time I seek to instantiate that view by embedding it. Second, the binding for the SVG should be as generic and rebuildable as possible in case I need to update the SVG. Third, a custom property structure is where I have the freedom to do complex things to link simple parameters with simple SVG bindings.

1 Like