Identify specific component instances from .tsx code to write unique values to

Hello again. FYI…this is regarding Perspective component/module development.

My view has several instances of the same custom component, each with a property shaped exactly as a UDT tag. Each instance’s property is bound to a different instance of the UDT. In MyComponent.tsx I’m writing a value to key in my UDT property and it writes to every instance of the component…not the behavior I’m looking for. Each component instance acts like an instance in so far as the bond tag data read is unique. However, the component acts like a copy when writing values from .tsx code. How can I target a specific component instance?

Thank you.

PS…looking though the perspective-client node modules etc looking for something…can’t seem to knit it together…and I keep looking…

show me where you read and write the properties.
also maybe the binding you use to bind them to the udt instances

Here’s to code from the .tsx file just to test writing to a bound tag, and the UDT and the binding.

export class ValveBasicMeta implements ComponentMeta {

    tmpInt = 0;

    getPropsReducer(tree: PropertyTree): ValveBasicProps {
        this.tmpInt++;
        tree.write("UdtValveBasic.UdtHmiCmds.intHandOffAuto", this.tmpInt);
        let defaultUDT = {
            intStateNumber: -3,
            strName: "strName",
            strPidTagName: "strPidTagName",
            UdtHmiCmds: {
                boolClose: false,
                boolOpen: false,
                boolReset: false,
                intHandOffAuto: -3
            }
        };

        return {
            UdtValveBasic:  tree.read("UdtValveBasic", defaultUDT),
            imageUrls: tree.readArray("imageUrls")
        };
    }

    getComponentType(): string {
        return COMPONENT_TYPE;
    }

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

    getViewComponent(): PComponent {
        return ValveBasic;
    }

}



hmm i dont see valuebasic01 change now tho? so its not writing to it right?

here you are returning ValveBasic but you only showed me the ValveBasicMeta

getViewComponent(): PComponent {
        return ValveBasic;
    }

I do things a bit different tho, but idk if that would make any difference.

What i do is
add this to the ValveBasic Props:
writeUdt: (text: string[])=>void;
and call something like this in the ValveBasic component:
this.props.props.writeUdt(this.tmpInt);

(i need 2 props idk if you will need that too)

and then put this in the return of the meta propsreducer

return {
            UdtValveBasic:  tree.read("UdtValveBasic", defaultUDT),
            imageUrls: tree.readArray("imageUrls")
            writeUdt:(tmpInt: any) => {tree.write("UdtValveBasic.UdtHmiCmds.intHandOffAuto", tmpInt);},
        };

i suppose (tmpInt: any) could be (tmpInt: int) too

Hi Victor,
It is, you can see it writing to intHandOffAuto if you enlarge the video (the shadow at the bottom in the ordinary view hides it). I tried what you suggested (thank you), however it seems to do the same thing.

ah mb my mouse was over the video so the progress bar was covering it.
Are you sure you didnt bind anything to the other tag? Cuz idk how it could write to a tag without a binding.

no wait where do you initialize the int? tmpint?

I have two instances of my component; each are bidirectionally bound to tags ValveBasic00 and ValveBasic01, respectively.

tmpInt (the variable I’m writing to the UdtValveBasic.UdtHmiCmds.intHandOffAuto property) is initialized in ValveBasicMeta (see below).

export class ValveBasicMeta implements ComponentMeta {
    tmpInt = 0;

This is weird…tmpInt is an instance member of ValveBasicMeta so it have its own value…guess I need to read more about TypeScript? I will keep digging.

wait but… now they both start at 0 and count at the same speed? xD
So i think they are seperate but just counting at the same speed lol

find out by putting a console.log(tmpInt ) under the tmpInt ++ and check the console to see if each number gets printed twice

also you should do var tmpInt = 0;

Haha, I thought that too and double checked. There was about 5 seconds between binding each of the components to different tags, the counts should have been off by a few thousand. I tested again, snagged vid below (zipped up so I can upload it).
wtf.zip (3.5 MB)

Regarding declaring with var, my IDE barks at me, it doesn’t like it, it gives me this error


I tried using var at the module level but it breaks the lslint rules :(…suppose I could modify them.

But it starts counting the moment the screen is loaded, it doesn’t have to be bonded at all to start counting. Try the console log. I bet it will print double.

HA! Victor, you’re absolutely correct! I bolded every second one for visibility. Dang, once again troubleshooting a non-bug but an optical illusion :sweat_smile:
Thanks for your help Victor!
Regards,
Ted.

13:02:45.991 [Browser Thread: 49475] INFO Perspective.Designer.Workspace - myComp.ValveBasic: grrrInt = 11589
13:02:45.991 [Browser Thread: 49475] INFO Perspective.Designer.Workspace - myComp.ValveBasic: grrrInt = **11489**
13:02:45.995 [Browser Thread: 49475] INFO Perspective.Designer.Workspace - myComp.ValveBasic: grrrInt = 11590
13:02:45.995 [Browser Thread: 49475] INFO Perspective.Designer.Workspace - myComp.ValveBasic: grrrInt = **11490**
13:02:46.000 [Browser Thread: 49475] INFO Perspective.Designer.Workspace - myComp.ValveBasic: grrrInt = 11591
13:02:46.001 [Browser Thread: 49475] INFO Perspective.Designer.Workspace - myComp.ValveBasic: grrrInt = **11491**
13:02:46.005 [Browser Thread: 49475] INFO Perspective.Designer.Workspace - myComp.ValveBasic: grrrInt = 11592
13:02:46.005 [Browser Thread: 49475] INFO Perspective.Designer.Workspace - myComp.ValveBasic: grrrInt = **11492**
1 Like

xD it can happen to the best of us :stuck_out_tongue: