Tegne på skærmen

I denne del af M5 Guide vil vi vise hvordan du kan tegne billeder, figurer og tekst på skærmen på din M5StickC, samt hvordan du roterer skærmen til landskabs-mode.

For at komme i gang, har du brug for at få adgang til skærmen via lcd objektet. Det gøres ved at importere det øverst i din Python-fil:

from m5stack import lcd

Når det er gjort, er du klar til at tegne. For eksempel kan du tegne en firkant ved at kalde funktionen lcd.rect():

lcd.rect(10, 10, 30, 40)

De første to værdier, 10 og 10, angiver hvor rektanglet skal tegnes som et x,`y`-koordinat. De næste to tal, 30 og 40, angiver hvor høj og hvor bred firkanten skal være.

Koordinatsystemet

For at kunne tegne på skærmen og angive hvor ting skal tegnes hende, skal man vide at koordinatsystemet i computere ikke er helt præcist som i matematik-undervisningen (men tæt på).

På computerskærme bruger man den konvention at koordinatet (0, 0) er placeret i det øverste venstre hjørne af skærmen, og at når y-værdien stiger, så flyttes koordinatet nedad, og ikke opad, som du ellers kender det fra matematik.

Her har vi prøvet at tegne koordinatsystemet ind ovenpå M5StickC:

M5StickC med koordinatsystem

Når du kører lcd.rect(10, 10, 30, 40), som beskrevet ovenfor, så kommer det altså til at se sådan her ud:

M5StickC med koordinatsystem

De andre tegnefunktioner fungerer nogenlunde på samme vis, og nedenfor kan du læse en beskrivelse for hver af dem om hvordan de virker. Fx er der lcd.ellipse(), til at tegne ellipser og cirkler, eller lcd.line() til at tegne linjer, eller lcd.triangle() til at tegne trekanter. Du kan også tegne tekst på skærmen med lcd.text().

Når du tegner, tegnes lagene i den rækkefølge de står i koden:

from m5stack import lcd
# skærmretningen
lcd.orient(lcd.PORTRAIT)

#farver baggrunden sort
lcd.clear(000000)

# Det gule hoved
lcd.circle(40, 50, 30, color=0xffcf00, fillcolor=0xffcf00)
#tegner en halvcirkel mund
lcd.arc(40, 60, 13, 2, 0, 180, color=0xa80000)

# Øjne med pupiller
lcd.circle(30, 40, 10, color=0xFFFFFF, fillcolor=0xFFFFFF)
lcd.circle(50, 40, 10, color=0xFFFFFF, fillcolor=0xFFFFFF)
lcd.circle(30, 43, 4, color=0x000000, fillcolor=0x000000)
lcd.circle(50, 43, 4, color=0x000000, fillcolor=0x000000)

# Hat
lcd.triangle(40, 0, 20, 27, 60, 27, color=0xf5e9b5, fillcolor=0xf3e9bd)

# Tekst: M5
lcd.text(30, 120, "M5", color=0xff9b00)
meget tegning

Farveangivelser

Som standard vil alle tegnefunktionerne tegne figurer med et hvidt omrids, men ellers gennemsigtige (ingen udfyldning). Farverne kan ændres ved at angive et eller to ekstra farveargumenter til funktionerne.

Hvis vi for eksempel vil tegne firkanten med grøn farve som omrids, kan vi skrive:

lcd.rect(10, 20, 30, 50, color=0x00FF00)

Hvis vi vil have grønt omrids og rød udfyldning, kan vi skrive:

lcd.rect(10, 20, 30, 50, color=0x00FF00, fillcolor=0xFF0000)

Farveværdierne angives i hexadecimale tal. Dem kan man fx slå op i tabeller online, eller ved at bruge farvevælger i et tegneprogram. De fleste viser dog farverne som #00FF00 (grøn), hvor man i Python vil skrive det samme som 0x00FF00. Læs mere om hexadecimale farveværdier

Skærmretning

En skærm kan vende på 4 forskellige måder, og alt afhængigt af hvordan du har tænkt dig at bruge din M5StickC, kan det være forskelligt hvad du gerne vil have til at være opad. Her er mulighederne:

M5StickC orienteringer (portræt, landskab, omvendt portræt, omvendt landskab)

For at indstille hvilken vej der er opad, skal du bruge kommandoen lcd.orient. Hvis du f.eks. vil lave et smart-watch med din M5StickC, kan det være at omvendt landskab er det du har brug for, og så skriver du:

lcd.orient(lcd.LANDSCAPE_FLIP)
lcd.orient(orientation)

Ændrer skærmretningen og sletter alt på skærmen. Påvirker alle følgende tegnekommandoer.

Parametre

orientation – skal være én af:

  • lcd.PORTRAIT (standard): portræt

  • lcd.LANDSCAPE: landskab

  • lcd.PORTRAIT_FLIP: omvendt portræt

  • lcd.LANDSCAPE_FLIP: omvendt landskab

For eksempel, for at tegne på skærmen i landskabs-mode:

lcd.orient(lcd.LANDSCAPE)

Skærmstørrelse

Skærmen på M5StickC er 160 pixels på den bredde led, og 80 pixels på den smalle led.

Det er ofte bedre at spørge systemet selv om skærmstørrelsen, fremfor at bruge tallene 160 og 80 som konstanter rundt i din kode.

Funktionen lcd.screensize() kan fortælle dig skærmens størrelse. Hvis du har indstillet skærmen i landskabs-mode, så vil den returnere (160, 80), mens i portræt-mode vil den returnere (80, 160).

lcd.screensize()
Returtype

(int, int)

Returnerer skærmstørrelsen i pixels, for eksempel:

screen_width, screen_height = lcd.screensize()

Tegn figurer på skærmen

lcd.clear()
lcd.clear(color)

Sletter alt på skærmen og farver den sort.

Eksempel:

lcd.clear()
Sort skærm

Farven kan angives ved at angive det valgfrie argument color.

Eksempel, hvor vi farver skærmen gul:

lcd.clear(0xFFFF00)
gul skærm
param valgfri color

Talværdi: farve på omrids

lcd.rect(x, y, height, width)
lcd.rect(x, y, height, width, color)
lcd.rect(x, y, height, width, color, fillcolor)

Tegn et rektangel. x, y angiver koordinatet for rektanglets øverste venstre hjørne. height og width angiver størrelsen på rektanglet. Som standard tegnes kun et hvidt omrids af rektanglet.

Eksempel:

lcd.rect(10, 10, 40, 30)
Hvidt rektangel

Farver på omrids og udfyldning kan ændres med de to valgfrie argumenter color og fillcolor. Farverne angives som hexadecimal farveværdi (fx 0xFF0000 for rød, se ovenfor).

Eksempel med rødt omrids:

lcd.rect(10, 10, 40, 30, color=0xFF0000)
rødt rektangel

Eksempel med rødt omrids og blå udfyldning:

lcd.rect(10, 10, 40, 30, color=0xFF0000, fillcolor=0x0000FF)
Blåt rektangel med rødt omrids

Hvis man vil tegne en firkant uden omrids, bør man sætte omridsfarve (color) og udfyldningsfarve (fillcolor) til at være samme farve.

Eksempel på rødt rektangel:

lcd.rect(10, 10, 40, 30, color=0xFF0000, fillcolor=0xFF0000)
Rødt rektangel
Parametre
  • x – Talværdi: x-koordinat for rektanglet (øverste venstre hjørne)

  • y – Talværdi: y-koordinat for rektanglet (øverste venstre hjørne)

  • width – Talværdi: bredden af rektanglet

  • height – Talværdi: højden af rektanglet

  • color (valgfri) – Talværdi: farve på omrids

  • fillcolor (valgfri) – Talværdi: udfyldningsfarve

lcd.roundrect(x, y, height, width, r)
lcd.roundrect(x, y, height, width, r, color)
lcd.roundrect(x, y, height, width, r, color, fillcolor)

Tegn et rektangel med afrundede hjørner. x, y angiver koordinatet for rektanglets øverste venstre hjørne. height og width angiver størrelsen på rektanglet. r angiver radius på de afrundede hjørner.

Hvis man for eksempel vil tegne et rektangel med let rundede hjørner, kan man angive en hjørneradius på 7 pixels:

lcd.roundrect(10, 10, 30, 40, 7)
Afrundede hjørnet rektangel

Som standard tegnes kun et hvidt omrids af rektanglet. Farver på omrids og udfyldning kan ændres med de to valgfrie argumenter color og fillcolor. Det foregår på samme måde som for lcd.rect().

Parametre
  • x – Talværdi: x-koordinat for rektanglet (øverste venstre hjørne)

  • y – Talværdi: y-koordinat for rektanglet (øverste venstre hjørne)

  • width – Talværdi: bredden af rektanglet

  • height – Talværdi: højden af rektanglet

  • r – Talværdi: radius på de afrundede hjørner

  • color (valgfri) – Talværdi: farve på omrids

  • fillcolor (valgfri) – Talværdi: udfyldningsfarve

lcd.line(x1, y1, x2, y2)
lcd.line(x1, y1, x2, y2, color)

Tegn en linje fra koordinat x1, y1 til koordinat x2, y2.

Eksempel:

lcd.line(10, 10, 50, 40)
Hvid linje

Farven kan ændres ved at angive argumentet color:

lcd.line(10, 10, 50, 40, color=0x00FF00)
Grøn linje
Parametre
  • x1 – Talværdi: x-koordinat hvor linjen skal starte

  • y1 – Talværdi: y-koordinat hvor linjen skal starte

  • x2 – Talværdi: x-koordinat hvor linjen skal slutte

  • y2 – Talværdi: y-koordinat hvor linjen skal slutte

  • color (valgfri) – Talværdi: farve på omrids

lcd.triangle(x1, y1, x2, y2, x3, y3)
lcd.triangle(x1, y1, x2, y2, x3, y3, color)
lcd.triangle(x1, y1, x2, y2, x3, y3, color, fillcolor)

Tegn en trekant ved at angive trekantens hjørner. x1, y1 angiver det første hjørne, x2, y2 det næste hjørne og x3, y3 det sidste hjørne.

Eksempel:

lcd.triangle(10, 10, 50, 40, 10, 70)
Trekant

Som standard tegnes kun et hvidt omrids af trekanten. Farver på omrids og udfyldning kan ændres med de to valgfrie argumenter color og fillcolor. Det foregår på samme måde som for lcd.rect().

Eksempel:

lcd.triangle(10, 10, 50, 40, 10, 70, color=0xFF0000, fillcolor=0x0000FF)
Farvet trekant
Parametre
  • x1 – Talværdi: x-koordinat for trekantens første hjørne

  • y1 – Talværdi: y-koordinat for trekantens første hjørne

  • x2 – Talværdi: x-koordinat for trekantens andet hjørne

  • y2 – Talværdi: y-koordinat for trekantens andet hjørne

  • x3 – Talværdi: x-koordinat for trekantens tredje hjørne

  • y3 – Talværdi: y-koordinat for trekantens tredje hjørne

  • color (valgfri) – Talværdi: farve på omrids

  • fillcolor (valgfri) – Talværdi: udfyldningsfarve

lcd.ellipse(x, y, width, height)
lcd.ellipse(x, y, width, height, opt, color)
lcd.ellipse(x, y, width, height, opt, color, fillcolor)

Tegn en ellipse. x, y angiver koordinatet for ellipsens centrum. height og width angiver størrelsen på rektanglet. Som standard tegnes kun et hvidt omrids af ellipsen.

Eksempel:

lcd.ellipse(40, 40, 20, 10)
Ellipse

Som standard tegnes kun et hvidt omrids af ellipsen. Farver på omrids og udfyldning kan ændres med de to valgfrie argumenter color og fillcolor. Det foregår på samme måde som for lcd.rect().

Eksempel:

lcd.ellipse(40, 40, 20, 10, color=0xFF0000, color=0x0000FF)
Farvet ellipse

Parametret opt kan bruges til at kun tegne nogle dele af ellipsen ved at angive et tal mellem 0 og 15. Hvis det ikke angives, tegnes hele ellipsen.

Parametre
  • x – Talværdi: x-koordinat for centrum af ellipsen

  • y – Talværdi: y-koordinat for centrum af ellipsen

  • width – Talværdi: bredden af ellipsen

  • height – Talværdi: højden af ellipsen

  • opt (valgfri) – Talværdi: tal mellem 0-15, angiver hvilke dele af ellipsen der skal tegnes (15 = tegn hele ellipsen)

  • color (valgfri) – Talværdi: farve på omrids

  • fillcolor (valgfri) – Talværdi: udfyldningsfarve

lcd.circle(x, y, radius)
lcd.circle(x, y, radius, color)
lcd.circle(x, y, radius, color, fillcolor)

Tegn en cirkel. x, y angiver koordinatet for cirklens centrum. radius angiver cirklens radius. Som standard tegnes kun et hvidt omrids af cirklen.

Eksempel:

lcd.circle(40, 40, 10)
Cirkel

Som standard tegnes kun et hvidt omrids af cirklen. Farver på omrids og udfyldning kan ændres med de to valgfrie argumenter color og fillcolor. Det foregår på samme måde som for lcd.rect().

Parametre
  • x – Talværdi: x-koordinat for centrum af cirklen

  • y – Talværdi: y-koordinat for centrum af cirklen

  • radius – Talværdi: cirklens radius

  • color (valgfri) – Talværdi: farve på omrids

  • fillcolor (valgfri) – Talværdi: udfyldningsfarve

lcd.arc(x, y, radius, thickness, start, end)
lcd.arc(x, y, radius, thickness, start, end, color)

Tegn en cirkelbue. x, y angiver koordinatet for cirkelbuens centrum. radius angiver cirkelbuens radius. thick angiver tykkelsen af buen. start og end fortæller ved hvilke vinkler at buen skal starte og stoppe, og vinklerne angives i grader (0-360).

Eksempel på cirkelbue der starter ved 0 grader og hen til 270 grader:

lcd.arc(40, 40, 20, 1, 0, 270)
Cirkelbue

Som standard tegnes kun et hvidt omrids af cirklen, men farven kan ændres med det valgfrie argument color. Det foregår på samme måde som for lcd.rect().

Parametre
  • x – Talværdi: x-koordinat for centrum af cirkelbuen

  • y – Talværdi: y-koordinat for centrum af cirkelbuen

  • radius – Talværdi: radius af cirkelbuen

  • thickness – Talværdi: tykkelse af cirkelbuen

  • start – Talværdi: startvinkel i grader (0-360)

  • end – Talværdi: slutvinkel i grader (0-360)

  • color (valgfri) – Talværdi: farve på omrids

lcd.polygon(x, y, radius, sides, thickness)
lcd.polygon(x, y, radius, sides, thickness, color)
lcd.polygon(x, y, radius, sides, thickness, color, fillcolor)
lcd.polygon(x, y, radius, sides, thickness, color, fillcolor, rotate)

Tegner et regulært polygon på skærmen. Et regulært polygon er kendetegnet ved at alle sider er lige lange og alle vinkler er lige store.

x, y angiver koordinatet for centrum af polygonet. radius angiver afstanden fra centrum til hjørnerne. sides angiver hvor mange sider polygonen skal have (trekant, firkant, femkant, sekskant, osv.)

Eksempel på en sekskant med radius på 10 pixels:

lcd.polygon(40, 40, 10, 6)
6-kantet polygon

Argumentet thick kan bruges til at ændre tykkelsen af omridset. For eksempel kan vi tegne en femkant med 3 pixel omrids:

lcd.polygon(40, 40, 15, 5, thick=2)
5-kantet polygon

Argumentet rotate kan bruges til at rotere polygonen et vist antal grader (0-360).

Argumentet fillcolor til lcd.polygon() virker til at være fejlbehæftet, så du kommer nok til at opleve problemer hvis du forsøger.

Parametre
  • x – Number: center x-coordinate

  • y – Number: center y-coordinate

  • radius – Number: radius of polygon

  • radius – Number: number of sides of the polygon

  • thickness – Number: thickness of border

  • rotate – Number: angle to rotate in degrees (0°-360°)

lcd.pixel(x, y)
lcd.pixel(x, y, color)

Tænd en enkelt pixel. x, y angiver hvilken pixel der skal tændes.

Som standard farves den angivne pixel hvid, det valgfrie farveargument gør det muligt at ændre det til en vilkårlig anden farve.

Tænd en pixel i gul farve:

lcd.pixel(40, 40, 0xFFFF00)
gul pixel

Tegn JPG og BMP billeder på skærmen

lcd.image(x, y, filename)

Indlæser en billedfil med navnet filename, som er placeret på M5StickC’ens filsystem. Understøtter kun .bmp og .jpg filer.

Parametre
  • x – Talværdi: x-koordinat hvor billedet skal tegnes

  • y – Talværdi: y-koordinat hvor billedet skal tegnes

  • filename – Tekststreng: filnavn på billedfilen, f.eks. "img.bmp" eller "photo.jpg"

Vær opmærksom på at billedet skal ligge på M5Stick’en for at kunne blive indlæst. Se Fra computer til M5stickC for hjælp til at overføre.

Tegne tekst på skærmen

lcd.text(x, y, msg)
lcd.text(x, y, msg, color)
lcd.text(x, y, msg, color, transparent=True)

Vis teksten msg på skærmen, ved det angivne koordinat x, y.

Eksempel:

lcd.text(10, 10, "Hello!")
tekst "Hello!"

Som standard bruges hvid tekstfarve, men det kan ændres via argumentet color:

lcd.text(10, 10, "Hello!", color=0xFF0000)
Rød tekst "Hello!"

Som standard tegnes også en sort baggrund, som teksten tegnes på. Hvis du vil slå denne sorte baggrund fra, og gøre baggrunden gennemsigtig, kan du angive transparent=True som argument:

lcd.text(10, 10, "Hello!", color=0xFF0000, transparent=True)

Hvis du vil bruge en anden skrifttype, så se funktionen lcd.font().

Hvis du vil centrere teksten på skærmen, kan vi erstatte enten x eller y, eller begge, med den specielle værdi lcd.CENTER.

lcd.font(font)

Indstiller hvilken skrifttype der skal bruges, når man bruger kommandoen lcd.text().

Eksempel:

lcd.font(lcd.FONT_DejaVu24)
lcd.text(5, 5, "Hello!")
Alternativ skrifttype tekst "Hello!"
Parametre

font – skal være én af følgende indbyggede værdier:

  • lcd.FONT_Default (standard)

  • lcd.FONT_DefaultSmall

  • lcd.FONT_DejaVu18

  • lcd.FONT_DejaVu24

  • lcd.FONT_DejaVu40

  • lcd.FONT_DejaVu56

  • lcd.FONT_DejaVu72

  • lcd.FONT_Ubuntu

  • lcd.FONT_Comic