A full TouchGFX project with 3.5" SPI display and the full set of TouchGFX widgets

in this video I will show you how I set up a full touch FX Project based on the stm32 and the ili 9488 3.5 inch display I handle with a library you can find of my GitHub page I will start from the screen developing with the jfx designer going to the cube MX configuration needs introduced by the complex Transitions and we just used we will analyze some widgets and taking consideration the features we have we are using we will see how to choose the best ones the best gfx tools for our project then we will see how to set up the images coding inside the project and which coding we have to use saving space into RAM and flash memory and speeding up image processing or runtime finally we'll see how a develop coding relative screens widgets and Transitions and how I link touch effects to the rest of the project exchanging data to sensor actuators and so on so this is a project I refer here it's a programmable home thermostat in the Prototype setup of this video you see here I cut it off interface to the heater and the pair to sensor keeping the logic the functions and environmental project in this video we will analyze the graphic user interface developing details about this hardware and how to handle it is out of the topic of this video main screen shows the current temperature on this text and on the color gold then there is another gauge indicated the target imperative set the program temperature main screen has two states a standby starters indicating the temperatures the date and time and the heater status which is on if his icon is visible touching displays it goes to an enabled status showing some buttons after a timeout it returns them by program button goes to a page where I can set up the heater weekly plane we will not analyze details in this page as here about rgfx I don't have anything more but what we can see on the setup page here I can Define the current date and time and set the desired background line level for both States enable and stand by for instance I could set here a very low standby rate level and back to the main screen waiting for Western bite him out we will see the low light level let me set it back to a higher level for this video you can see I have also a screen transition well personally I don't like so much this kind of transitions I prefer simple plain screen changing but I added it here to show that touchfx allowed to start long time at animation but at all mostly develop over a long series of frames when started okay I set back the battery level to a high value for this video we will return analyzing this log animation in a short time here you see I'm using a slider that's a widget needing to handle dragging over the display if you want to use my library it has to be version 1.3 or above if you have seen my previous videos you know that in previous version of a library I was mainly using buttons in touch effects another widget is here setting date and time touching date enable a scroll wheel where I can select the current weekday touching time I enable the selection for hours and minutes when I move to other widgets like sliders or the button the scroll wheel disables setting date and times chosen clicking back button you see the calendar showing the updated values still in the setup page let me draw your attention to the widget I chosen touchfx provides a rich toolbox where the designer can find many alternative components moreover you can develop specific widgets your own widgets in the project selecting the right tool is important to get a good final result here for instance two similar widgets are available on an ili 1948 you can see that both widgets allow to select a weekday in a list when selected the value below the list is updated score list allow to make the selection with just a single wheel you can scroll the list and click over the choose an item scroll wheel automatically select the highlighted value so I need to add a button to choose it to confirm the choice so score list is more compact because it doesn't need a button you can click over a wheel confirming your selection but here we are working with a small display and the resistive touch sensor A it's hard for 3gfx distinguish between a selection Touch by a small dragging with a result of a not easy user interface so I decided to adopt a scroll Wheels obviously these are personal consideration you have to test the resolution offered by touch FX and select what is the best fitting your needs again about widget you see I can overlap many of them to get the function I need here on the main screen I have a solid color background a Gorge background picture a Goji showing a current temperature a second gauge showing a needle indicating the target temperature and above that a text indicated the current temperature finally buttons activating some functions when needed let's consider now all of these images involved in the touch FX widgets let's see if image coding and its memory occupation where we create a blank project with an RGB physics 5 display that's a configuration we are using now touch effect designer said the default configuration using RGB effect C5 for images without transferences and argb 8888 for images with transparencies as shown on support.tagifx.com website RGB foxy file needs to buy the pixel and amgb888 needs 4 by 10 pixel here we can see also that touchfx can handle also L8 RGB 565 and L8 argb 8888 both of them needing one byte per pixel the limit introduced by these formats is that they can handle images with only 256 color within the original palette but that normally is not a big limit as Graphics images normally use only a small range of colors let's try to see what this means in a project in a blank screen I set a solid color background let's say blue above that I add a picture I get a club background from the image stock of charge FX it has transferences you see the picture coordinates showing background let's save a project compile it and save a memory occupation picture was saved in the default format argp 8888 and the occupation is 225 kilobytes now we change its format to Elite argb 8888 the result is that the occupation is 56 kilobytes with a size of about one kilobyte it stores the color lookup table of a picture for more information about these color format please refer to the documentation in the video description but here I don't really need transparencies I know the color I will use as background so I could create a full color picture I use game handling images so I load the clock picture and at the background using the same color of my project background and save it in touch FX designer now I load my picture you see it's a full color picture but with the same result of the project effect designer will save the picture as RGB 565 needing 112 kilobytes and saving it as L8 RGB 535 I get a size of 56 kilobyte again with a color cap table this table collect over sizes we had for the pictures there is one more Advantage storing images without transparencies using argb888 touchfx has to convert images to RGB 565 required by the display anytime it has to update the screen using a full call or RGB 565 touchfx will just transfer the feature to the display without needy conversion with benefits in terms of performance so in my projects I set as default the L8 version of the color formats and only when this color coding cannot convert the picture having more than 256 color in the same file I try to avoid transparencies going to use RGB Fox's 5. this is the case for instance of a temperature gauge Arc it is full of rollers and trying to save it with the elite color format touch effects designer gives an arrow so I remove any transparencies to the picture encoded it as RGB fixes 5. let's see now the changes we need in Cuba Max setup handling animations we have seen that I have here in touchfx some animated widget and long transitions this animation needs the touch effects generates and transfer to the display along series of frames to achieve these I cannot just use Touch detection to activate frame updating and usually touchfx uses boosting signal from the display as a tick timer for these sequence of frames vusync is a signal provided by the display driver and it is usually intended for synchronization between the graphic system touch effects and we display to ensure that the frame transfer is properly aligned with a display update avoiding visual artifacts like tearing FX the display driver generates boosting signal usually 60 times per second but touchfx uses it also as a Time base for animation so using only buttons in touchfx I can avoid to provide this time base but using compressed Widgets or animations that gfx needs it display drivers like the ili 1948 or 9341 and even the st-7735 generate these signals but it is not made available by the boards we are using here if you want to have some practice with a boosting signal generative by the display you can use the X nuclear gfx boards they are using the same SD 7735 or the ili display drivers but making available the using signal on the board pins these boards instead don't provide it and the needing anyway touch effects a time-based signal handling animations we can provide it through a timer this is the microcontroller setting in Cuba Max you can see it is already set with a display handling and with the touchfx package configuration I already shown this setup in my previous video so I will not repeat here uselessly spending your time so as I said handling animation I have to set up a timer I just need a basic timer like Team 6 or team 7 providing just an interrupt call every counting period but here there are no basic timer available on f411 so I will use the tin 3 general purpose timer for more information about types of timer their features and availability on the stm32 family you can refer to the an4013 application note available on Vesti website back to the f411 configuration I have it working at 100 megahertz so I said ARR and PSC in order to get a timer period of 60 cycles per second then in Cube ID I will set up a period after callback that will just call Touch signal boosting function that we already know activates the gfx engine so about the timers in this project I have here Team 2 server PW and Signal controlling the display backlight and team three handing the touchfx activation I have also enabled the RTC simply to have the calendar available handling the weekly heater program about Cube ID before entering in details of a developing let's recap the designer project organization it is based on three screens main setup screen and program these screens uses a series of containers some of n are required by the widget used some others group widgets in a single element for an easier handling in Cuba D we can see that under the gfx folder GUI source and header folders We have a folder for each screen main setup and program when there is a container folder having a file for each container in the project the same structure is in good generator folder as the name let's understand good generated folder is handled by touch FX and we can't change the code inside that folder but we can look inside that understanding how touchfx works for instance you have seen on my main screen these two up and down button they allow a quick program of a ride we can have a temporary program change in case of need these two buttons have a name button temp up and button them down and have an interaction defined temp up FN and them down FN virtual function in Cube IDE we can see into good generated main screen mainviewbase.cpp there is a callback handle function receiving a parameter indicating the button pressed and calling the tem down FN or them down FN functions on the corresponding button all of this is done by touch FX and we have to develop these two functions that must be declared here in mainview.hpp this way and must be defined here in mainview.cpp it will increase or decrease of half a Celsius degree the program temperature this way I will Define the behaviors of a screen and its widgets let's see another example main screen has to update the information shown when changing if heater turns on or off if temperature changes or just changing the clock values to do that I have to set up an interaction trigger bathetic counter in the interaction parameters I can set how often it must be called the number of ticks between two calls and here it is at every single tick that means 60 times per second virtual function name is a TIG mainfn then I go again to the mainview.hpp declaring it and in the dot CPP file defining its content I'll go checking if button have to be set visible or invisible as per display status and I'll check changes in clock heater and temperature updating gauge and text so some widgets like buttons or sliders provide an interaction we can see on the designer some others directly provide the Callback function for the widget events finally there are many events for each screen a setup screen called entering into the screen and that you have down screen called exiting again detailed information on support.jfx.com so for every external event that has to be monitored by touch FX I set up as I did two functions I changed even function changes clock change it here change your time and so on polling event and verifying if a value changes and a get even function returning the value this way you see integ effects I go polling the various event to Monitor and start updating widgets if change it just calling the relative function outside edgefx I will implement the handling of a physical object when voj can be said by touch FX I Implement also a set value function registering the values received by Taj FX we can see here the function related to the clock change the clock function pause the clock and storing a steady variable the clock minute value if a value changes in the previous call it returns one otherwise zero get clock handles RTC and Returns the clock value set clock receive values from touchfx and update RTC so when I'm developing GUI through touch effects I just take care of a graphics element just using this function creating data then outside touchfx I handle the rest of the project providing this interface functions I feel comfortable working this way and I think useful sharing these software organization having done all of his changes to the gfx project although my main function has to be updated referring to the previous videos I will not call now touch senior vusiing because it is handled by the timer I will instead start the timer before entering into the main group again inside the main loop I will not anymore call touchinavusing I will instead handle the processes devices and peripherals here you see also the display backlight is handled as a device outside touch FX I'm on inter here the heater program progress and then consequently a handle here the command turning on and off the heater handling here the needed logic using hysteresis or a more complex PID algorithm if needed so this is how I handle Graphics in my projects with these small displays if I have a heavy job for a microcontroller I go directly driving a simple graphic of the display if a microcontroller have enough power enough time handing Graphics I set up a touchfx project mainly using buttons that allows me having good graphics results with a low impact of the overall performances and only if I have to handle slow processes I will go using heavier touch FX projects with complex widgets and transitions this is the case of a home thermostat even if handing Graphics I have a delayed response to the external events that will not compromise the process ending that has a very slow develop OK as always I hope I shown something useful for your project thank you for watching see you to the next video bye

Channel: Mauro De Vecchi - Bluewat

Views: 5,448

Keywords: STM32, TOUCHGFX, ILI9488, ST7735, ILI9341

Id: bG6XCDyCNzo

Length: 29min 15sec (1755 seconds)

Published: Mon Jun 19 2023