Creating custom Perspective Components

Ignition
1

Is it possible to create custom Components and add them to the Perspective Components panel? For example, I would like to create a Bootstrap-style Alert component (I built an Alert view and use an embedded view and message handlers currently), or specialized graph components (such as canvasjs charts). I realize this will probably involve using React.

Also, is it worth taking the time to build the Components or should I just use the Webdev module?

1 Like
2

You can, but it requires fairly advanced knowledge of React/front-end, and at least a passing knowledge of Java building and packaging, because Ignition modules are essentially just .zip files of Java code.

You can take a look at https://github.com/inductiveautomation/ignition-sdk-examples/tree/master/perspective-component for an 8.0.X example, but be aware that there are breaking API changes that are as-yet undocumented in creating a Perspective component for 8.1.X.

2 Likes
3

Exactly what I was looking for… Thanks @PGriffith

4

That would be nice if there will be some video on how to create component for perspective. The topic is complex.

6 Likes
5

Hi @PGriffith,

is there any video or manuals for getting started with the development ?

regards

6

The only way to get some videos about this topic is to get gold certificate to access them in your account section.
You also need to know typescript and react and basic java language.

7

Thanks Nader,
I suppose you speak about the tea and coffee video.
I will look a it.
I saw some of your project and it looks very nice.
Do you have some tips and tricks for me to start design my own object ?

Regards

8

Yes, exactly, I put some steps for anybody who likes to use perspective in full power.
my tips are learning following at following steps:

  1. HTML/CSS3 (Must)

  2. Study Perspective global CSS3 file (Must)
    At this point, you can do most of the animations and effects you want in The Perspective

  3. Learn javascript fully
    At this point, you understand what is going on under the hood. So you can get many good ideas to implement some more effects by using python in Perspective. Python plays The Javascript role in Perspective. For example, you can create a page with panning, zooming, and cluttering capability like the map.
    Or, all component events like mouseClick, … are the same syntax in javascript.

  4. Learn Chrome dev tools. You need it to debug and understand some components’ CSS settings for further manipulation.

  5. Learn React fully

  6. Learn some basics of Webpack

  7. Learn some basics of Java :sob:

  8. Other tools like Yarn, Graddle … are handle by IA example.

For me, because I don’t have knowledge of JAVA right now and still learning React, I design my components separately and use web dev module and iframe to import them into perspective view which very complicated task. Especially for syncing changes from perspective to component. For some basic component that doesn’t need any update from the perspective session, this method is ideal for now.
As you can see, the process is like using JAVA classes in Vision and using Paintable Canvas(like iframe).
Learn Web development is much much easier, more fun, and enjoyable compare to JAVA.

5 Likes
9

Thanks for the help and tips

10

Hi Nader,
Thanks for the detailed Tips.

I wanted to ask regarding where can I find the Perspective global CSS3 file?

Thanks,
Jatin

11

Enable advanced stylesheet here:

image