How to use Canvas Widgets?

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

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?

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

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);
}

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