SDK Programmer's Guide for Perspective Component Development

Module Development
, ,
1

Where can I find good reference for perspective module development?
The SDK Programmer's Guide I find only has Vision Component Development.. Is there an updated version of this guide?
I have followed the SDK examples, completed module signing, and created a skeleton project. However, I have found a limited availability of examples for perspective module development beyond the provided resources. I am currently facing challenges in getting react-konva to function properly within the perspective module. My goal is to grasp the process of accessing the Canvas in Perspective in order to develop components that can render 2D shapes.

2

There is one example in the IA github repo. And scattered commentary here on the forum. There's nothing gathered in one place.

3

hmmm ok. it would be nice if the new chatgpt can go through the forum and generate documentation :slight_smile:

anyways, can anyone help with my code please. I am trying to render a rectangle as perspective component, but getting Component Error. Where can I find what's wrong with the component?

here is my code:

import * as React from 'react';
import {
    Component,
    ComponentMeta,
    ComponentProps,
    PComponent,
    PropertyTree,
    SizeObject
} from '@inductiveautomation/perspective-client';
import { Stage, Layer, Rect } from 'react-konva';

export const COMPONENT_TYPE = "fh.display.rectangle";

export interface RectangleProps {
    width1: number;
    height1: number;
}

export class Rectangle extends Component<ComponentProps<RectangleProps>, any> {
    rootElementRef: Element | void;

    componentDidMount() {
        // If a reference to the root element is needed, it can be achieved using `this.props.store.element` after the
        // component has mounted.
        this.rootElementRef = this.props.store.element;
    }


    render() {
        return (
            <Stage
                {...this.props.emit()}
                width={200}
                height={200}
                container={this.rootElementRef}>
                <Layer>
                    <Rect
                        x={0}
                        y={0}
                        width={40}
                        height={40}
                        fill="red"
                    />
                </Layer>
            </Stage>
        );
    }
}


// This is the actual thing that gets registered with the component registry.
export class RectangleMeta implements ComponentMeta {

    getComponentType(): string {
        return COMPONENT_TYPE;
    }

    // the class or React Type that this component provides
    getViewComponent(): PComponent {
        return Rectangle;
    }

    getDefaultSize(): SizeObject {
        return ({
            width: 360,
            height: 360
        });
    }

    // Invoked when an update to the PropertyTree has occurred,
    // effectively mapping the state of the tree to component props.
    getPropsReducer(tree: PropertyTree): RectangleProps {
        return {
            width1: tree.readNumber("width1", 100),
            height1: tree.readNumber("height1", 100)
        };
    }
}
4

That's pretty unhelpful. Where are you getting that error message? How are you testing? Is there any more detail in the output console/browser console/gateway logs? Help us, help you.

5

I managed to build and generate .modl and installed correctly

installModule
installModule1465×177 9.71 KB

When I add this component ot the View, I get this error:

compError
compError833×563 18.8 KB

there is nothing obvious in Log:

logs
logs1468×600 39.2 KB

6

How about in the output console, in the designer? That's a "frontend" error in your component code, so the gateway log won't have anything.

7

these two lines are added everytime i dropped the component

11:26:38.040 [Browser Thread: 55566] ERROR Perspective.Designer.Workspace - level: LEVEL_ERROR
message: "TypeError: react__WEBPACK_IMPORTED_MODULE_0__.useId is not a function"
line_number: 125
source: "http://192.168.11.167:9088/res/perspective/js/react-dom-16.14.0.js"

11:26:38.042 [Browser Thread: 55566] ERROR Perspective.Designer.Workspace - level: LEVEL_ERROR
message: "ui.ErrorBoundary: Component error caught in error boundary: {\"componentStack\":\"\\n    in StageWrap\\n    in FiberProvider\\n    in ForwardRef\\n    in Rectangle\\n    in g\\n    in i\\n    in x\\n    in w\\n    in div\\n    in g\\n    in g\\n    in i\\n    in x\\n    in w\\n    in v\\n    in div\\n    in DraggableCore\\n    in div\\n    in w\\n    in div\\n    in o\"}"
line_number: 2
source: "http://192.168.11.167:9088/res/perspective/js/PerspectiveClient.888b30115ada5dea158c.js"
8

I am closing this - i managed to get my perspective module working nicely after a bit more research.

9

What was the problem?

10

bottom line is skill issue :grinning:,
limited knowledge javascript/typescript/react and also new to perspective. I have only used vision so far. But I think I am getting the idea of stuff in react a bit more know (thanks chatgpt for explaining it patiently). i decided not to use that react-konva thing, but use the standard canvas to start with;
It works pretty well, I have built library for conveyor, motor, etc and and linking to tags - seems to work well.

1 Like
11

Hello @ferihandoyo . I am having the same issue, Could you please tell me how you solve this issue? could you show your code here?
Thank you.

1 Like
12

It will be nice to document the solution in GitHub examples or somewhere.