Met de HCScreen-bibliotheek benaderen we steeds meer de mogelijkheid om een gemakkelijk te bedienen microcontroller met de ESP32 en een TFT-scherm te bouwen.
We krijgen een groot aantal nieuwe mogelijkheden door het gebruik van pictogrammen. Ten eerste zijn pictogrammen duidelijker en gemakkelijk te koppelen aan een bepaalde functie, ten tweede kunnen we nu ook de X-Y-opties van de joystick gebruiken.
Nieuwe functies in de bibliotheek:
initIconGrid (x, y, kolommen, rijen)
Op de posities x en y wordt een raster met kolommen en rijen gemaakt waarin pictogrammen met 31x31 pixels kunnen worden weergegeven. De functie controleert of de parameterlimieten van het display worden overschreden en corrigeert de parameters dienovereenkomstig.
initIconGrid ()
Deze vereenvoudigde vorm van de functie initialiseert een raster dat het hele scherm gebruikt (voor 160x128 zijn dit 5 x 4 pictogrammen).
showIcon (index, * pictogram)
Index is het nummer van de rastercel waarin het pictogram moet worden weergegeven. De nummering begint met 0 en wordt regel voor regel uitgevoerd, d.w.z. met 4 x 5 eerste regel = 0, 1, 2, 3, 4 tweede regel = 5, 6, 7, 8, 9 etc.
* pictogram is de aanwijzer naar een structuur van het type HCIcon in het programmageheugen.
showIcon (x, y, * pictogram)
Een andere variant voor het instellen van een pictogram, hier worden de kolom (x) en de rij (y) weergegeven waar het pictogram moet worden geplaatst. * pictogram is opnieuw de aanwijzer voor een HCIcon-structuur.
setGridColor (markeer kleur, achtergrondkleur)
Met deze functie kan de kleur van de achtergrond voor het raster en de kleur waarmee een geselecteerd pictogram moet worden gemarkeerd, worden ingesteld. De kleurwaarden worden overgedragen in 3-byte-indeling (rood, groen, blauw) zoals gebruikelijk op webpagina's. Dus b.v. 0xFF0000 = rood, 0x00FF00 = groen of 0x0000FF = blauw. De kleuren worden vervolgens automatisch geconverteerd naar het 16-bits formaat voor de weergave. Om een geselecteerd pictogram te markeren, wordt een vierkant rond het pictogram getekend in de markeringskleur.
Pictogrammen:
Een groter aantal algemene pictogrammen is al gedefinieerd in de pictogrammen-submap, die gemakkelijk in de schets kan worden opgenomen. Maar het is ook heel eenvoudig om uw eigen pictogram te maken. We hebben het beeldbewerkingsprogramma GIMP nodig. Als output hebben we een afbeelding nodig die we kunnen schalen tot 31 x 31 pixels. Vervolgens exporteren we de afbeelding en kiezen we de bronindeling, we kiezen c broncode (*. C) of c broncodekoptekst (*. H) door .c of .h toe te voegen als extensie van de bestandsnaam. Nadat we op de knop Exporteren hebben geklikt, verschijnt een dialoogvenster waarin we de naam van het pictogram invoeren (bijvoorbeeld icon_senden). Geen van de selectievakjes mag een vinkje hebben! Een bestand met de extensie .c of .h wordt nu gemaakt in de opgegeven doelmap. We openen dit bestand met een teksteditor. Het zou zoiets moeten beginnen:
/ * GIMP RGB C-Source afbeeldingsdump (icon_senden.c) * /
statische const struct {
niet ondertekende breedte;
niet-ondertekende hoogte;
unsigned int bytes_per_pixel; / * 2: RGB16, 3: RGB, 4: RGBA * /
unsigned char pixel_data [1024 * 386 * 3 + 1];
} icon_senden = {
31, 31, 3,
"\274\273\267\272\271......
We moeten nu het in het rood getoonde onderdeel vervangen door het structuurtype HCIcon, dat in de bibliotheek is gedefinieerd.
statische const HCIcon icon_senden = {
31, 31, 3,
"\274\273\267\272\271......
Als we dit bestand nu in de schets opnemen, kunnen we het adres van de structuur icon_senden gebruiken in de functie showIcon.
Belangrijk! Pictogrambestanden moeten altijd worden geïmporteerd in HCScreen.h.
Voorbeeld programma:
Een schets met de naam Esp32_Control_Center_Icon zou moeten bestaan in de voorbeeldprogramma's van de bibliotheek. We openen deze schets in de Arduino IDE en laden deze in de ESP32 die was verbonden met het TFT-display en de joystickmodule volgens de informatie in de opmerking.
Alle 20 pictogrammen moeten op het display worden weergegeven, zoals hier op de foto. Met de joystick kunnen we nu een pictogram selecteren en op de joystickknop drukken. Het nummer van het pictogram waarop werd geklikt, wordt weergegeven op de seriële monitor. In het voorbeeldprogramma krijgen twee pictogrammen een functie toegewezen. Als u op de pictogrammap klikt, wordt de inhoud van een SD-kaart weergegeven in de kaartlezer. Als u op het installatiepictogram klikt, wordt links onderaan een voorbeeldformulier met twee pictogrammen weergegeven.
De bibliotheek kan van zijnHCScreen-bibliotheekkan worden gedownload. Importeer in de Arduino IDE eenvoudig het ZIP-bestand van de download in bibliotheekbeheer.
Bekijk de andere berichten op HCScreen in deze blog. Daar vindt u ook gedetailleerde informatie over de gebruikte hardware.
