WebVisu / Tickets / #41 How can we add support for expr-fill-color?

I will add some info that we already gathered:

The parsing most likely needs to be added in codesys.pp.js at line 741.

                    var exprFillColor = [];
                    var expr_fillColor = $myMedia.find('expr-fill-color');
                    if (expr_fillColor.length) {
                        exprFillColor = parseExpression(expr_fillColor);
                        // Read out value from visuVariables?
                        // convert to RGB?
                        // overwrite fill_color
                    }

vali dan - 2022-02-15

I feel like this case is not supported yet, so we could read the variables from xml and look for the correct one at this place, would this work?

If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

I currently have no running system here, but I guess this should be the way:

                    var exprFillColor = [];
                    var expr_fillColor = $myMedia.find('expr-fill-color');
                    if (expr_fillColor.length) {
                        exprFillColor = parseExpression(expr_fillColor);
                        // get value from visuVariables
                        // name is e.g. ".dwFarbe_F1" - value e.g. "4,418284,4,5"
                        exprFillColorRAW = visuVariables[exprFillColor];                        
                        // convert to RGB
                        exprFillColorRGB = TODOCONVERT(exprFillColorRAW);
                        // overwrite fill_color
                        fill_color = exprFillColorRGB;
                    }

Frank Benkert - 2022-02-16

Hi vali dan,
Thank you for your efforts to contribute a solution to the problem you found.
Unfortunately it is not that easy to implement.
The parsing is only the first half; the continuous evaluation of the variable and the drawing is the other half.

First of all: when can such an expression be specified? How can we determine wether we should use the constant "fill-color" or the expression "expr-fill-color"?

Then we have to pass the expression "expr-fill-color" and probably also "expr-fill-color-alarm" ??? additionally to the register function "registerSimpleShape". This one puts this via "newSimpleShape" into the global array "drawObjects". Of course the two expressions have to be saved there as well.

And finally the current value of the variables must be determined in "drawAllObjects" by calling "evalExpression".

This is because the variable can change its value all the time and not only when the shapes are read for the first time.

Can you provide me with a complete test project? Maybe I can give it a try.

cu
Frank

If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Hi Frank

Thank you very much for taking your time to answer our question, we really appreciate this.
We spent some time yesterday and figured out the drawing part of it as well.

Regarding your question, the expr-*-color - that always reference variables, are used when one adds variable names to this dialog in CoDeSys Element Configuration - Colorvariables:

We only implemented the "Fill Color" variable for now, as this currently suffices.

The parsing code used (codesys.pp.js, inserted at line 742), stores "name: " and then the variable name inside the fill_color, when expr-fill-color is present:

                    var expr_fillColor = $myMedia.find("expr-fill-color");
                    if (expr_fillColor.length){
                        var fill_colorE = parseExpression(expr_fillColor)
                        fill_color = "name: " + fill_colorE[0].value;
                    }

For the dynamic updating we added this code in drawing.pp.js at line 1271. The color value must be converted from dword to rgb(red,green,blue). The value e.g. for yellow is 65535.

            if (obj.fillStyle.includes("name")) {
                var name = obj.fillStyle.substring(10).slice(0, -1);
                var decimalColor = visuVariables[name].value;
                var red = (decimalColor & 0xFF) << 16;
                var green = (decimalColor & 0xFF00);
                var blue = (decimalColor & 0xFF0000) >> 16;  
                fillStyle = decimalToColorString(red | green | blue);
            } else {            
                fillStyle = obj.fillStyle;
            }

Similarly, the code could be extended for the other expr- values.

How can we add support for expr-fill-color?

Pure Browser based Visualisation for PLCs

Milestone

Searches

Help

#41 How can we add support for expr-fill-color?

Discussion