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...