How to use Canvas Widgets?

JGonz.2 · ‎2020-01-20

Hi.

I would like to know how to use Canvas Widgets from scratch. Especially this Widget: https://github.com/touchgfx/touchgfx-open-repository/tree/master/widgets/Gauge

I already read the readme.md from open repository and also this post https://touchgfx.zendesk.com/hc/en-us/articles/205074491-Canvas-Widgets?mobile_site=true

But can't understand how to really integrate inmy project, which files modify and how to manipulate the widget.

Is there any code example about it?

Bob Bailey · ‎2020-01-20

Example code is nowhere to be found, I copied some things I see in the generated files for other screens.

This is how I made it work.

I created a screen in the designer with one box on it to make it blank.

copied the Gauge cpp and hpp files into the project. I put them in with the core files (for now I suppose)

put the bitmap files for the background and center in TouchGFX/assets

generated code in the designer to get the screen built and the bitmaps converted.

in the view .cpp file I added and configured the gauge, added an updating function, and setup the canvasbuffer

GaugeScreen1View::GaugeScreen1View()

{

touchgfx::CanvasWidgetRenderer::setupBuffer(canvasBuffer, CANVAS_BUFFER_SIZE);

}

void GaugeScreen1View::setupScreen()

{

GaugeScreen1ViewBase::setupScreen();

mygauge.setBitmaps(Bitmap(BITMAP_MYGAUGE1_ID), Bitmap(BITMAP_GAUGE_NEEDLE_PIN_ID)); //BITMAP_GAUGE_BACKGROUND_ID

mygauge.setLimits(-100, 200, 180, 450); // input value range, corresponding needle angle (up is 0, clockwise is positive)

mygauge.setXY(245,5);

mygauge.setValue(20);//

add(mygauge);

}

void GaugeScreen1View::UpdateVal(DisplayData_t * pData)

{

mygauge.setValue((pData->value)); //

}

the hpp file needs declarations

class GaugeScreen1View: public GaugeScreen1ViewBase

{

public:

GaugeScreen1View();

virtual ~GaugeScreen1View() {}

virtual void setupScreen();

virtual void tearDownScreen();

void UpdateVal(DisplayData_t * pData);

protected:

Gauge mygauge;

private:

/*

* Canvas Buffer Size

*/

static const uint16_t CANVAS_BUFFER_SIZE = 7200;

uint8_t canvasBuffer[CANVAS_BUFFER_SIZE];

};

this should work, I had to strip out some proprietary junk.

I think I changed some things in the Gauge code, I remember changing the needle shape to fit my bitmap. That stuff should be parameterized (which i will do in my stuff).

(this is the type of example code the documentation needs.)

Bob

JGonz.2 · ‎2020-01-20

Hi Bob.

Thank you for your reply

So, I tried to implement your example, but I cannot find "DisplayData_t" typedef. Is this your own implementation?

Bob Bailey · ‎2020-01-20

yes, thats my own definition, its a structure containing a bunch of things that I send to the GUI from another task. just replace it with something ordinary for testing. Passing data to the GUI is its own subject, there is a good youtube video on it. There is a thread about it on this forum also.

Bob

JGonz.2 · ‎2020-01-21

Hi Bob, thank you again.

Now I can see the gauge on my display, but I can't change the value.

The gauge not fit on the display too.

Where in the code of the code should I call the "update_val" function?

I'm trying override handleTickEvent to update the gauge value but no success:

#ifndef SCREEN_MONITORVIEW_HPP
#define SCREEN_MONITORVIEW_HPP
 
#include <gui_generated/screen_monitor_screen/Screen_monitorViewBase.hpp>
#include <gui/screen_monitor_screen/Screen_monitorPresenter.hpp>
 
#include "../../../../Core/Inc/Gauge.hpp"
 
class Screen_monitorView : public Screen_monitorViewBase
{
public:
    Screen_monitorView();
    virtual ~Screen_monitorView() {}
    virtual void setupScreen();
    virtual void tearDownScreen();
    //virtual void show_gauge();
    void UpdateVal(int value);
    uint32_t tick = 0;
    virtual void handleTickEvent()
    {
    	tick += 10;
    	if (tick >= 100){
    		tick = 0;
    	}
    	this->UpdateVal(tick);
    }
 
 
protected:
    Gauge gauge;
 
private:
    static const uint16_t CANVAS_BUFFER_SIZE = 7200;
    uint8_t canvasBuffer[CANVAS_BUFFER_SIZE];
};
 
#endif // SCREEN_MONITORVIEW_HPP

And this is my .cpp code:

#include <gui/screen_monitor_screen/Screen_monitorView.hpp>
 
 
Screen_monitorView::Screen_monitorView()
{
	  touchgfx::CanvasWidgetRenderer::setupBuffer(canvasBuffer, CANVAS_BUFFER_SIZE);
}
 
void Screen_monitorView::setupScreen()
{
    Screen_monitorViewBase::setupScreen();
    gauge.setBitmaps(Bitmap(BITMAP_GAUGE_BACKGROUND_ID), Bitmap(BITMAP_GAUGE_NEEDLE_PIN_ID)); //BITMAP_GAUGE_BACKGROUND_ID
    gauge.setLimits(-100, 200, 180, 450); // input value range, corresponding needle angle (up is 0, clockwise is positive)
    gauge.setXY(60,0);
    gauge.setValue(20);//
    add(gauge);
 
    //tearDownScreen();
 
}
 
void Screen_monitorView::tearDownScreen()
{
    Screen_monitorViewBase::tearDownScreen();
}
 
//void Screen_monitorView::show_gauge(){
//
//	// Set the background and center bitmaps
//	gauge.setBitmaps(Bitmap(BITMAP_GAUGE_BACKGROUND_ID), Bitmap(BITMAP_GAUGE_NEEDLE_PIN_ID));
//	// Set the value range to 0-30 and the corresponding degrees to 240-480
//	gauge.setLimits(0, 30, 240, 480);
//	// Place the gauge on the screen
//	gauge.setXY(100,85);
//	// Set the formula for moving the needle
//	gauge.setEasingEquation(EasingEquations::linearEaseNone);
//	// Set the speed of the needle movement
//	gauge.setAnimationDuration(20);
//	// Set current value to 20
//	gauge.setValue(20);
//	// Add widget
//	add(gauge);
//
//}
 
void Screen_monitorView::UpdateVal(int value)
{
	gauge.setValue(value);
	add(gauge);
}

Bob Bailey · ‎2020-01-23

I used my own bitmap, you may need to resize or replace yours, you may need to change the needle size also

UpdateVal is usually called from the presenter. which is called from the model.

don't add the gauge in the update. you only add it when the screen is "setup" (this is likely your issue)

Bob

BO Re.1 · ‎2020-02-21

Hi Bob,

can i ask you a quick question on this topic,

im trying to implement the guage and have set it up similar to your example(in hpp and view files), its currently on my third screen but when i press the button to enter the screen the ui becomes unresponsive. i have been reading up on the canvas widget and there is a lot about declaring in target/main.cpp but i dont seem to have this file... but i am thinking its memory allocation that causing this. would you have any idea?

any help or advice is much appreciated 😉

Barry

Bob Bailey · ‎2020-02-21

I could not get the canvas buffer stuff to work when I declared it in the main.cpp file, so I put it in the screen files, you can see where its in the view.cpp and .hpp files above.

does the screen work without the gauge on it?

what changes have you made to the gauge class, perhaps remove alterations until you get back to something that works.

you can post some of the code also, so we (community members, and ST people) can take a look

Bob

BO Re.1 · ‎2020-02-24

Hey Bob,

thanks for getting back to me, i have it working now as experiment, i am updating it from main through RTOS queue and it seems to be working fine.

my problem was the alterations i was making, i had so many lines commented out and so on it was better to just started a new project. then ST link wouldst flash the board :-(... so i eventually i re did it through the designer and fingers crossed it looks to be working fine..

next job now it to amalgamate different parts of project.

one more question if you dont mind can you re size the gauge in code or does it need to be done externally

Barry

Bob Bailey · ‎2020-02-24

I have not done it, but the gauge should be able to be resized. will just take some work.

I don't believe you will find any documentation or examples though. So you will just have to experiment.

Post back your results