259 views
in GUI Development by

Hello EW Team,

I have a scenario in which I am plotting a Sine Wave at Sub Path 0 with line separators at 90 deg and 270 deg as Subpath 1,2 respectively in Path1. Later I am scaling it and replotting the same in Path2 with Subpath 0 as Sine and Sub path 1, 2  as lines respectively. All this is successfully done. My query is that can I have variable colors for sub paths?? Like Sub path 0 has Red, 1 has Green, 2 has Blue etc.

Please find the reference image.

Thanks & Regards

Vandana Matai

1 Answer

0 votes
by

Hello Vandana Matai,

can I have variable colors for sub paths?? Like Sub path 0 has Red, 1 has Green, 2 has Blue etc.

the path color is not determined by the path but by the corresponding view (e.g. Stroke Path view). The path is just a storage for the coordinates the view does process and displays. To display 2 paths, each with a different color, you have to use 2 separate path objects and 2 separate views.

Technical background: the possibility to store multiple sub-paths within a path exists to support complex shapes. For example sub-path #0 for the outer shape and sub-path #1, #2, ... for some holes inside it. All sub-path belong thus together creating one complex shape which then is displayed with one color determined in the view.

I hope it helps you further.

Best regards

Paul Banach

by

Hello Paul, 

Thank you for the response. So, I understand that I have to use different Paths for different colors. Can we make this segment dynamic? In the code below, plotting the segment using Line is working but using StrokePath is not working. Why? I want to use StrokePath because I am scaling the graph later.

var float newValue = math_sin((float)posX)* 50;  			//float( math_rand(2,6));

if (noOfEdge <= 80)
{ Path2.AddLine(0,posX,newValue);
  trace "posX= ",posX, "Value of posX= ",Path2.GetNodeX( 0,noOfEdge);
  if (noOfEdge==20)
  {   
          {
            var Views::Line ln_seg1 = new Views::Line;
            ln_seg1.Point1 =<90,250>;// + point(90,0);
            ln_seg1.Point2 =<90,20>;// + point(90,0);
            ln_seg1.Color =#FDFF0EFF;
            ln_seg1.Width=2;
            ln_seg1.StackingPriority=2;
            Add(ln_seg1,1);
          }
          /*{
            var Views::StrokePath ln_seg1= new Views::StrokePath;
            var Graphics::Path Path3=new Graphics::Path;
            Path3.Begin(0,90,250.0);
            Path3.AddLine(0,90,20.0);
            ln_seg1.Path = Path3;
            ln_seg1.Color =#FDFF0EFF;
            ln_seg1.Width=2;
            //ln_seg1.StackingPriority=2;
            Add(ln_seg1,0);
          }*/
          
  }
}

 

A little diverted from Initial topic, but it's the same project. So, sorry.

Thanks & Regards,

Vandana Matai

 

by

Hello Vandana Matai,

... using Line is working but using StrokePath is not working. Why?

why it is not working is difficult to say. From technical point of view I don't see any obstacle to display a curve with separators. Let me analyze your application case once more. Accordingly I have understood you want to plot a sine curve and vertical line separators. The curve should appear with color X and the separators with color Y. You want both to be scaled equally. In such case:

1. Use two path objects. In object A stores the since curve data. In object B store the line separators.

2. To scale the path data stored in the objects A and B use two further path objects C and D.

3. Configure the object C to use the desired scaling factor by invoking its method C.Scale(...).

4. Copy the path contents from A to C using C.AddCopy( ..., A, ... ) method. C stores thereupon the contents from A being scaled.

5. Configure the object D to use the desired scaling factor by invoking its method D.Scale(...).

6. Copy the path contents from B to D using D.AddCopy( ..., B, ... ) method. D stores thereupon the contents from B being scaled.

7. Use two Stroke Path views E and F in your GUI component.

8. Connect the view E with path object C.

9. Configure the view E with the desired color to display the sine curve.

10. Connect the view F with path object D.

11. Configure the view F with the desired color to display the separators.

IMPORTANT: Since the separators are isolated line segments, it is obligatory to manage them as separate sub-paths. There is no possibility to have gaps within one sub-path. For example, if you want to display up to 10 vertical line separators, then the path object B has to be configured with capacity for at least 10 sub-path, by invoking the method B.SetMaxNoOfSubPath( 10 ) (See also Specify the maximum number of sub-paths).

For each new line separator you initialize the next following sub-path with capacity of 1 edge, and you add a single line segment to the sub-path. With the next line separator you do this on the next sub-path. For this purpose manage a counter of already recorded (stored lines). For example:

// When you want to add a new line separator

B.InitSubPath( noOfSeparatorsInThePathObjectB, 1 );
B.Begin( noOfSeparatorsInThePathObjectB,   xPos, yPos1 );
B.AddLine( noOfSeparatorsInThePathObjectB, xPos, yPos2 );

noOfSeparatorsInThePathObjectB++;

This applies also to the scaled copy of the path B named above D. The path object D has also to manage multiple sub-path, one for each line separator. When you copy the contents from the path B to D (step 6 above) you do this in a loop for each sub-path. For example:

var int32 i;

for ( i = 0; i < noOfSeparatorsInThePathObjectB; i++ )
  D.AddCopy( i, B, i, 0, B.GetNoOfEdges(i))

I hope it helps you further.

Best regards

Paul Banach

 

by
Hello Paul,

Thank you for perfect explanation! I understand that for all the variable colors I have to use different path and respective Stroked Paths.

Small clarification, as mentioned earlier "Like Sub path 0 has Red, 1 has Green, 2 has Blue etc.", I have to use all line separators of different colors. Like Sine Wave of may be Red, Line1 may be Blue, Line2 may be Green, Line3 may be Yellow and so on. We have 1 main curve and maximum 5-line separators currently in our project, but they are not always used in every case, that's why I wanted to make this plotting dynamic. So, the summary is, I need to have total 6 Paths for the original values and 6 for scaled values (no dynamic plotting). And scaled 6 Paths will be associated with 6 Stroke Path for the view. Thats a challenge as a beginner, but glad to have your support.

Thank you so much.

Wish you a very Happy New Year 2023.

Regards, Vandana Matai
by
Hello Vandana Matai,

I wish you a Happy New Year 2023 too!

Concerning your application case, it seems that you will need so many path objects. Alternatively, the usage of Line view to display the vertical bars could be considered. In fact drawing the vertical line by the Line view is more efficient than rendering it by the paths. The disadvantage: you will have to make more math calculation for the scaling to get the correct coordinates for the line views. But I think, it is also doable.

Best regards

Paul Banach
by

Hello Paul Banach,

Just small update, and no queries. smiley

Here is the output. I have used various 6 scaled Path Object and it's working well. This is small section of my graph. Many are in pipeline.

Thanks & Regards,

Vandana Matai. 

by
Great! I'm glad that it work.

Ask Embedded Wizard

Welcome to the question and answer site for Embedded Wizard users and UI developers.

Ask your question and receive answers from the Embedded Wizard support team or from other members of the community!

Embedded Wizard Website | Privacy Policy | Imprint

...