UI and graphic

TinyCLR OS
1

I had a look at the car wash example. All fine but how do I have to proceed to add a graph or get a space dedicated for it in the UI interface.
Example, Let’'s imagine I have various sensors for temp, pressure, humidity, wind speed… and I want to add some button or a list box to select the sensor and display a graph (build using Graphic.DrawLine, DrawRectange, DrawString and DisplayController.DrawPixel.)
All the UI disappear when the graph is drawn (flush). Is there a way to combine both ?

image

2

Draw all your graph objects into one UIElement, draw it same way as button, listbox….

Also, if you are using Native Display then no need to call Flush(). UI does it.

Another way, make a new class that inherit from Image class (the class we use to draw Visa, Master card image).

You may add some fields like values…

We added another example:

https://github.com/ghi-electronics/TinyCLR-Samples/blob/master/Official%20Demos/SCM20260D%20Dev/Demos/Utils/Icon.cs

So you can take a look on Icon.cs class which is inherit from Button, that may give you some ideas.

1 Like
3

Thanks Dat. I will check the example
Yes I can draw the graph objects in one UI Element but then I will have to use the GHIElectronics.TinyCLR.UI.Shapes.Line… Rectangle… instead of Graphics.Drawline… right ?
And If I can define the graph as UI elements, how do I dynamically plot the curve ?

4

You can use Graphics.Drawline …. but that graphic must come from the Image that you want to stick with your UI.

Like you have Image1, Image2,

you can get Graphic from Image1, something like

var g = Graphics.FromImage(Image1);

then use g to draw anything on Image1. Then use the Image1 as UIElement. But this just for understanding, not good for your project.

In your project, I think better if you inherit from GHIElectronics.TinyCLR.UI.Controls.Image

public sealed class MyGraph:GHIElectronics.TinyCLR.UI.Controls.Image {
    int row;
   int col;
   int value[]
……

   public override void OnRender(DrawingContext dc) {

      for (var r = 0; r < row; r++)
          dc.DrawLine…….
      for (var c = 0; c < col; c++)
          dc.DrawLine…….

     // draw value curve
        dc.DrawLine/dc.SetPixe/dc.DrawEllipse
      
   }
}

For draw curve, I don’t have good idea yet. you may use set pixel, draw multi lines with short width, or DrawEllipse with some special params so it become curve… Really have not played with curve, you may the first one. :d

5

if inherit from GHIElectronics.TinyCLR.UI.Controls.Image then you can use invalidate()

like

var myGraph = new MyGraph(…)

myGraph.value = {1,4,6,7};
myGraph.Invalidate();

myGraph.value = {4,5,7,8....};
myGraph.Invalidate();

Something like that, it will call Render() and redraw that objects, I believe.

6

mmh, doesn’t really look straightforward :). Note that I will probably send the data to my pc as the sensors will be outside and powered via solar panel (waiting for the new fez) but just for the exercise, I will have a closer look. You can have a nice ui but having the capability to add charting on top would be more fun.