Is there any example or for making a graph on stm32f746g_disco with touchGFX?

[MFall.1]

I am trying to make a graph with touchgfx4.13 on stm32f746g_disco .

I am using CubeIDE ver 1.3.0

I tried to use Canvas Widget and used the sample codes on touchgfx zendesk site .

If I can draw even a line in a box I will be able to make the graph.

I hope Martin himself can make Kindly a video about it ,

[Jiri Klokocka]

I made it work on my STM32F429 VGA project.

There is graph widget on GitHub TouchGFX Open Repository:

https://github.com/touchgfx/touchgfx-open-repository/tree/master/widgets/Graph

Download it and put in the paths like in the original project.

The picture shows it in my STM32CubeIDE.

Then you only need to edit your ScreenXXXView.hpp:

#ifndef SCREENAVIEW_HPP
#define SCREENAVIEW_HPP
 
#include <gui_generated/screena_screen/screenAViewBase.hpp>
#include <gui/screena_screen/screenAPresenter.hpp>
#include <gui/common/Graph.hpp>
 
class screenAView : public screenAViewBase
{
public:
    screenAView();
    virtual ~screenAView() {}
    virtual void setupScreen();
    virtual void tearDownScreen();
    virtual void handleTickEvent();
protected:
    int tickCounter;
    int graph_YVal
    Graph graph;
};
 
#endif // SCREENAVIEW_HPP

And your ScreenXXXView.cpp:

#include <gui/screena_screen/screenAView.hpp>
 
 
screenAView::screenAView()
{
 
}
 
void screenAView::setupScreen()
{
    screenAViewBase::setupScreen();
 
    // Place the graph on the screen
    graph.setXY(20, 20);
 
    // Set the outer dimensions and color of the graph
    graph.setup(400, 200, Color::getColorFrom24BitRGB(0xFF, 0xFF, 0x00));
 
    // Set the range for the x and y axis of the graph. That is
    // the max and min x/y value that can be displayed inside the
    // dimension of the graph.
    graph.setRange(0, 400, 0, 200);
 
    // Set the line width in pixels
    graph.setLineWidth(1);
 
    add(graph);
}
 
void screenAView::tearDownScreen()
{
    screenAViewBase::tearDownScreen();
}
 
void screenAView::handleTickEvent(){
 
	// Number of ticks between inserting a point in the graph
    int interval = 1;
 
    if (tickCounter % interval == 0)
    {
        graph.addValue(tickCounter / interval, graph_YVal);
        graph_YVal+=5;
    }
 
    if ((tickCounter % (10 * interval)) == 0)
    {
    	graph_YVal = 0;
    }
 
    tickCounter++;
 
    if (tickCounter == 400 * interval)
    {
        graph.clear();
        graph.invalidate();
        tickCounter = 0;
        graph_YVal = 0;
    }
 
}

More you can do with graph you can find in TemplateView.cpp in the repository (link above).

My "code" draws a saw-like curve.

Jiri K.

[MFall.1]

Hi Jiri

Thanks so much I earlier saw your file and learned so much from that .

actually you used two line segment for each segment , it was so genius . I didn't use your Abstarct Graph , and directly used CanvasWidget but the same Idea as yours and finally I could make the graph as attached . I have two question

1- is there any straight way to draw a set of open lines , simply without having to render those as a closed shape .

2- I have to put TickCounter around 50 to work otherwise it can not invalidate completely , it draw just a random part of the container not all of that .

Any way I like to thank you again for your contribution .

Morteza

[Jiri Klokocka]

Nonono I did not write the Github code, I only used it an shared :)

I was also searching for some CanvasWidget example...