Comment réaliser une interface graphique sur un écran TFT ?
Objectifs
- On souhaite utiliser un écran TFT/LCD, incluant également une partie tactile, des cartes Disco-F746NG, pour réaliser une interface graphique permettant de piloter un système.
Matériel
- Carte DISCO-F746NG
Pré-requis
Exemples
Exemple réalisé par des étudiants
#include "F746_GUI.hpp"
#include "mbed.h"
int main()
{
const string TITRE_ENGL = " Control Panel for the RED Light";
const string TITRE_FRANC ="Tableau de controle de la voie ROUGE" ;
Label TITRE_ACCUEIL_FRANC(240, 40, TITRE_FRANC, Label::CENTER, Font16);
const int NUMBER_BUTTONS = 3;
const int NOMBRE_LANGUES = 2;
const string NOMS_BOUTONS_FRANC[NUMBER_BUTTONS] = {"Mode Continu", "Mode Sinusoidal", "Mode Musique"};
const string NOMS_BOUTONS_ENGL[NUMBER_BUTTONS] = {"Continueous Mode", "Sine", "Music"} ;
const string NOMS_LANGUES[NOMBRE_LANGUES] = {"English", "French"};
ButtonGroup BoutonsModes(10, 100, 145, 100, NUMBER_BUTTONS, NOMS_BOUTONS_FRANC, 10,2,3,-1, Font12, LCD_COLOR_WHITE, 0xFF003538, LCD_COLOR_RED, LCD_COLOR_DARKRED);
Button BoutonRetour(400,210,70,50,"Retour",Font12,LCD_COLOR_WHITE, GuiBase::ENUM_BACK, LCD_COLOR_BLUE, LCD_COLOR_DARKBLUE ) ;
Button ChoixLangue (80,210,70,50,"Langue",Font12,LCD_COLOR_WHITE, GuiBase::ENUM_BACK, LCD_COLOR_YELLOW, LCD_COLOR_YELLOW) ;
ButtonGroup Langues (150,210,70,50, NOMBRE_LANGUES, NOMS_LANGUES, 5, 10, 2, -1, Font12, LCD_COLOR_WHITE, GuiBase::ENUM_BACK, LCD_COLOR_YELLOW);
ButtonGroup BoutonsModes_ENGL(10, 100, 145, 100, NUMBER_BUTTONS, NOMS_BOUTONS_ENGL, 10,2,3,-1, Font12, LCD_COLOR_WHITE, 0xFF003538, LCD_COLOR_RED, LCD_COLOR_DARKRED);
Button BoutonRetour_ENGL (400,210,70,50,"Back",Font12,LCD_COLOR_WHITE, GuiBase::ENUM_BACK, LCD_COLOR_BLUE, LCD_COLOR_DARKBLUE ) ;
BoutonRetour.Erase() ;
Langues.EraseAll();
BoutonsModes_ENGL.EraseAll() ;
BoutonRetour_ENGL.Erase() ;
int langue_choisie = 1 ;
while(1){
int num ;
int num_langue ;
if (BoutonsModes.GetTouchedNumber(num)) {
if (langue_choisie ==0) {
BoutonRetour_ENGL.Draw() ;
BoutonsModes_ENGL.DrawAll() ;
//BoutonRetour_ENGL.Activate() ;
//BoutonsModes_ENGL.ActivateAll() ;
}
switch (num)
{
case 0: BoutonsModes.Activate(0);
BoutonsModes.Inactivate(1);
BoutonsModes.Inactivate(2);
BoutonRetour.Activate() ;
BoutonRetour.Draw() ;
if (langue_choisie ==0) {
BoutonsModes_ENGL.Draw(0);
BoutonRetour_ENGL.Draw();
BoutonsModes_ENGL.Inactivate(1);
BoutonsModes_ENGL.Inactivate(2);
}
break;
case 1: BoutonsModes.Inactivate(0);
BoutonsModes.Activate(1);
BoutonsModes.Inactivate(2);
BoutonRetour.Activate();
BoutonRetour.Draw() ;
if (langue_choisie ==0) {
BoutonsModes_ENGL.Draw(1);
BoutonRetour_ENGL.Draw();
BoutonsModes_ENGL.Inactivate(0);
BoutonsModes_ENGL.Inactivate(2);
}
break;
case 2: BoutonsModes.Inactivate(0);
BoutonsModes.Inactivate(1);
BoutonsModes.Activate(2);
BoutonRetour.Activate();
BoutonRetour.Draw();
if (langue_choisie ==0) {
BoutonsModes_ENGL.Draw(2);
BoutonRetour_ENGL.Draw();
BoutonsModes_ENGL.Inactivate(1);
BoutonsModes_ENGL.Inactivate(0);
}
break;
}
}
if (BoutonRetour.Touched()){
BoutonsModes.ActivateAll() ;
BoutonRetour.Erase() ;
if (langue_choisie ==0) {
BoutonsModes_ENGL.DrawAll() ;
BoutonsModes_ENGL.ActivateAll() ;
}
}
if (ChoixLangue.Touched()){
BoutonsModes.EraseAll() ;
Langues.DrawAll();
ChoixLangue.Inactivate() ;
}
if (Langues.GetTouchedNumber(num_langue)) {
if (num_langue==0) {
lcd.Clear(GuiBase::ENUM_BACK);
Label TITRE_ACCUEIL_ENGL(240, 40, TITRE_ENGL, Label::CENTER, Font16);
BoutonsModes_ENGL.DrawAll();
//Button boutonTEST(240, 100, 145,100,"Mode Continu",Font20, LCD_COLOR_GREEN, LCD_COLOR_WHITE, LCD_COLOR_RED, LCD_COLOR_WHITE);
//Button BoutonRetour_ENGL (400,210,70,50,"Back",Font12,LCD_COLOR_WHITE, GuiBase::ENUM_BACK, LCD_COLOR_BLUE, LCD_COLOR_DARKBLUE ) ;
// ButtonGroup Langues (130,110,70,50, NOMBRE_LANGUES, NOMS_LANGUES, 5, 10, 1, -1, Font12, LCD_COLOR_WHITE, GuiBase::ENUM_BACK, LCD_COLOR_YELLOW);
BoutonRetour.Erase() ;
Langues.EraseAll();
ChoixLangue.Draw() ;
ChoixLangue.Activate();
langue_choisie = 0 ;
}
else {
lcd.Clear(GuiBase::ENUM_BACK);
Label TITRE_ACCUEIL_FRANC(240, 40, TITRE_FRANC, Label::CENTER, Font16);
BoutonsModes.DrawAll() ;
BoutonRetour.Draw();
ChoixLangue.Draw();
BoutonRetour.Erase() ;
Langues.EraseAll();
ChoixLangue.Activate();
langue_choisie = 1 ;
}
}
}
}
Exemple réalisé lors du projet PIMS – WDM – en 2019, par Morgane LARDENNOIS, Rosemary COLAERT, Audrey MENAESSE et Etienne JUMPERTZ
Exemple F746_GUI
Exemple réalisé par Mikami.
#include "F746_GUI.hpp"
#include "mbed.h"
int main()
{
Label obj10(240, 2, "Demo: GUI parts, 2018/03/12", Label::CENTER, Font16);
Label obj11(240, 20, "Button, ButtonGroup, Label, NumericLabel, BlinkLabel,",
Label::CENTER);
Label obj12(240, 32, "SeekBar, SeekbarGroup, NumericUpDown",
Label::CENTER);
Button button1(10, 54, 30, 35, "1");
Button button2(42, 54, 30, 35, "2");
const int NUMBER_BUTTONS = 4;
const string STR1[NUMBER_BUTTONS] = {"Button1", "Button2", "Button3", "Activate"};
ButtonGroup bGroup1(168, 54, 66, 35, NUMBER_BUTTONS, STR1, 2, 2, 3, 1,
Font12, LCD_COLOR_WHITE, 0xFF003538, 0xFFB70068, 0xFFFF7FFF);
NumericLabel bTouch(240, 112, "", Label::LEFT, Font12, LCD_COLOR_MAGENTA); // Fonction pas encore comprise
// Control status of bGroup2
ButtonGroup bGroup2(168, 150, 66, 40, 3, (string[]){"0", "1", "2"}, 5, 5, 3);
bGroup2.InactivateAll();
// Switching buttons to control barH active or inactive
ButtonGroup bGroup3(78, 54, 40, 35, 2, (string[]){"ON", "OFF"}, 0, 0, 2);
bGroup3.TouchedColor(0);
Button doNotTouch(250, 220, 120, 40, "Don't Touch", Font12,
GuiBase::ENUM_TEXT, GuiBase::ENUM_BACK,
LCD_COLOR_DARKGREEN, LCD_COLOR_RED);
// Using default value for argument (Horizontal)
SeekBar barH(20, 250, 200, -5, 5, 0, "-5", "", "5");
NumericLabel numLabel1(80, 205, "%5.1f", barH.GetValue());
NumericLabel numLabel2(130, 205, "%3d", (int)barH.GetValue());
NumericLabel numLabel3(160, 205, "%3d");
// SeekbarGroup (vertical)
SeekbarGroup barV(410, 130, 121, 2, 45, -6, 6, 2,
SeekBar::Vertical, 0xFFA0FFC0);
Array<numericlabel *> numLabel4(2);
for (int n=0; n<2; n++) numLabel4[n] =
new NumericLabel(410+n*45, 104, "%4.1f", barV.GetValue(n), Label::CENTER);
NumericLabel numLabel5(455, 92, "%1d", barV.GetIntValue(0), Label::CENTER);
// Test of left-, cenrer-, and right-justified
Label leftJustified(420, 54, "ABC", Label::LEFT);
Label centerJustified(420, 64, "ABC", Label::CENTER);
Label rightJustified1(420, 74, "ABC", Label::RIGHT);
// NumericalUpDown
NumericUpDown nUd(3, 10, 190, 100, 999, 10);
while (true)
{
if (button1.Touched()) button2.Draw();
if (button2.Touched()) button1.Draw();
int num;
if (bGroup1.GetTouchedNumber(num))
bTouch.Draw("Button%d touched", num+1);
if (num == 3)
bGroup2.ActivateAll();
if (bGroup2.GetTouchedNumber(num))
switch (num)
{
case 0: button1.Activate();
bGroup1.Activate(1);
bGroup1.DrawAll();
break;
case 1: button1.Inactivate();
bGroup1.Inactivate(1);
break;
case 2: bGroup1.EraseAll();//for (int n=0; n<4; n++) bGroup1.Erase(n);
for (int n=0; n<2; n++)
{
barV.Draw(n, 0); // reset seekbar
numLabel4[n]->Draw("%4.1f", barV.GetValue(n));
}
break;
}
if (barH.Slide())
{
numLabel1.Draw("%5.1f", barH.GetValue());
int8_t x = (int8_t)barH.GetValue();
numLabel2.Draw("%3d", x);
numLabel3.Draw(barH.GetIntValue());
}
int sbNum;
if (barV.GetSlidedNumber(sbNum))
{
if (sbNum == 0) numLabel4[sbNum]->Draw("%4.1f", barV.GetValue(sbNum));
else numLabel4[sbNum]->Draw("%4.1f", barV.GetValue(sbNum));
if (sbNum == 1) numLabel5.Draw("%1d", barV.GetIntValue(sbNum));
}
// If "doNotTouch" button touched, trapped into endless loop
if (doNotTouch.Touched())
BlinkLabel warning(250, 200, "You must reset", Label::LEFT, Font16);
// SeekBar active inactive switching
if (bGroup3.Touched(0))
{
barH.Activate();
barV.ActivateAll();
}
if (bGroup3.Touched(1))
{
barH.Inactivate();
barV.InactivateAll();
}
if (nUd.Touched()) {} // Example of NumericalUpDown
wait(0.02f);
}
}
</numericlabel
| MInE | Prototyper | Prototyper avec Nucleo et MBED |
Nucléo – Réaliser une interface graphique sur écran TFT / 3