M5StickC viileän näköinen kello, jossa on valikko ja kirkkauden säätö: 8 vaihetta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 08:59

Tässä opetusohjelmassa opimme ohjelmoimaan ESP32 M5Stack StickC: n Arduino IDE: n ja Visuinon avulla näyttämään ajan nestekidenäytöllä ja myös asettamaan ajan ja kirkkauden käyttämällä valikkoa ja StickC -painikkeita.

Katso esittelyvideo.

Vaihe 1: Mitä tarvitset

M5StickC ESP32: saat sen täältä

Visuino -ohjelma: Lataa Visuino

Huomautus: Tarkista tämä opetusohjelma StickC ESP32 -levyn asentamisesta

Vaihe 2: Käynnistä Visuino ja valitse M5 Stack Stick C -korttityyppi

Käynnistä Visuino ensimmäisen kuvan mukaisesti Napsauta Visuinon Arduino -komponentin (Kuva 1) "Työkalut" -painiketta. Kun valintaikkuna tulee näkyviin, valitse "M5 Stack Stick C", kuten kuvassa 2

Vaihe 3: Aseta VisuCossa StickC -kortti

1. Valitse "M5 Stack Stick C" -kortti
2. Valitse "Ominaisuudet" -ikkunassa "Moduulit" ja laajenna napsauttamalla "+",
3. Valitse "Display ST7735" ja laajenna se napsauttamalla "+",
4. Aseta "Suunta" -asetukseksi "goRight"
5. Aseta "Taustaväri" -asetukseksi "ClBlack"
6. Valitse "Elementit" ja napsauta sinistä painiketta, jossa on 3 pistettä…
7. Elementit -valintaikkuna tulee näkyviin
8. Vedä elementtivalintaikkunassa 2X "Tekstikenttä" oikealta puolelta vasemmalle
9. Valitse se napsauttamalla "Tekstikenttä1" vasemmalla puolella, sitten "Ominaisuudet" -ikkunassa "Väri" ja aseta se "aclOrange" ja napsauta "Täytä väri" ja aseta se "aclBlack" (voi leikkiä väreillä, jos haluat) -myös ominaisuusikkunoissa X: 10 ja Y: 20 tässä haluat näyttää ajan nestekidenäytössä: 3 (tämä on ajan fonttikoko)
10. Valitse se napsauttamalla "Tekstikenttä2" vasemmalla puolella, sitten "Ominaisuudet" -ikkunassa "Väri" ja aseta se "aclAqua" ja napsauta "Täytä väri" ja aseta se "aclBlack"

(Voit leikkiä väreillä, jos haluat) -asetukseksi "Alkuperäinen arvo" asetetaan: Aseta HOUR

-myös ominaisuusikkunoissa X: 10 ja Y: 2 tässä haluat näyttää valikon nestekidenäytöllä -sarjan koko: 1 (tämä on valikon fonttikoko)

Sulje elementti -ikkuna

1. Valitse "M5 Stack Stick C" -kortti
2. Valitse "Ominaisuudet" -ikkunassa "Moduulit" ja laajenna napsauttamalla "+",
3. Valitse "Näytä reaaliaikainen herätyskello (RTC)" ja laajenna sitä napsauttamalla "+",
4. Valitse "Elementit" ja napsauta sinistä painiketta, jossa on 3 pistettä…
5. Vedä elementtivalintaikkunassa "Aseta tunti" oikealta puolelta vasemmalle ja ominaisuusikkunan "Lisää arvo" arvoksi: Tosi ja "Arvo" arvoon: 1
6. Vedä elementtivalintaikkunassa "Aseta minuutti" oikealta puolelta vasemmalle ja ominaisuusikkunan "Lisää arvo" arvoksi: Tosi ja "Arvo" arvoon: 1
7. Vedä elementtivalintaikkunassa "Aseta toinen" oikealta puolelta vasemmalle ja ominaisuusikkunan "Lisää arvo" arvoksi: Tosi ja "Arvo" arvoon: 1

Sulje elementti -ikkuna

Vaihe 4: Lisää Visuino -komponentteja

1. Lisää 2x "Debounce Button" -komponentti
2. Lisää "Auto Repeat Button" -komponentti
3. Lisää "Text Array" -komponentti
4. Lisää "Analog Array" -komponentti
5. Lisää 2x "laskuri" -komponentti
6. Lisää "Clock Demux (Multiple Output Channel Switch)" -komponentti
7. Lisää "Decode (Split) Date/Time" -komponentti
8. Lisää "FormattedText1" -komponentti

Vaihe 5: Visuino -sarjan komponenteissa

1. Valitse "FormattedText1" -komponentti ja valitse "Ominaisuudet" -ikkunan "Teksti" -asetukseksi:%0:%1:%2
2. Kaksoisnapsauta "FormattedText1" -komponenttia ja vedä Elements -valintaikkunassa 3x "Text Element" vasemmalle
3. Valitse "TextElement1" vasemmalta ja aseta ominaisuusikkunassa "Täytä merkki" arvoon: 0 ja "Pituus": 2
4. Valitse "TextElement2" vasemmalta ja aseta ominaisuusikkunassa "Täytä merkki" arvoon: 0 ja "Pituus": 2
5. Valitse "TextElement3" vasemmalta ja aseta ominaisuusikkunassa "Täytä merkki" arvoon: 0 ja "Pituus": 2
6. Valitse "ClockDemmux1" -komponentti ja aseta ominaisuusikkunan "Tulostustapit" -asetukseksi: 5
7. Valitse "Counter1" -komponentti ja laajenna ominaisuusikkunassa "Max" ja aseta "Value" arvoon: 4
8. Valitse "Counter1" -komponentti ja laajenna ominaisuusikkunassa "Min" ja aseta "Value" -arvoksi: 0
9. Valitse "Counter2" -komponentti ja laajenna ominaisuusikkunassa "Max" ja aseta "Value" arvoon: 6
10. Valitse "Counter2" -komponentti ja laajenna ominaisuusikkunassa "Min" ja aseta "Value" -arvoksi: 0 VALIKON RAKENTAMINEN:
11. Valitse "Array1" -komponentti (Text Array) ja kaksoisnapsauta sitä.-Vedä elementti-ikkunassa 4X "Value" vasemmalle puolelle-Valitse vasemmalta "Item [1]" ja ominaisuusikkunassa "Value" to: SET HOURS-Valitse vasemmalta "Item [2]" ja aseta ominaisuusikkunan "Value" arvoksi: SET MINUTES-Valitse vasemmalta "Item [3]" ja ominaisuusikkunasarjasta "Value" to: SET SECONDS-Valitse vasemmalta "Item [4]" ja aseta ominaisuusikkunan "Value" arvoksi: SET BRIGHTNESSSulje Elementit-ikkuna. ARVOJEN KIRKKAUS:

12. Valitse "Array2" -komponentti (analoginen taulukko) ja kaksoisnapsauta sitä.-Vedä elementti-ikkunassa 6X "Arvo" vasemmalle puolelle-Valitse vasemmalta "Kohde [0]" ja ominaisuusikkunassa "Arvo" kohteeseen: 1

    -Valitse vasemmalta "Item [1]" ja aseta ominaisuusikkunassa "Value" arvoon: 0.9

    -Valitse vasemmalta "Item [2]" ja aseta ominaisuusikkunassa "Value" arvoon: 0.8 -Valitse vasemmalta "Item [3]" ja ominaisuusikkunassa "Value" arvoon: 0.7 -On vasen puoli Valitse "Tuote [4]" ja aseta ominaisuusikkunassa "Arvo" arvoon: 0.6-Valitse vasemmalta "Kohde [5]" ja aseta ominaisuusikkunassa "Arvo" arvoon: 0.55

Vaihe 6: Visuino Connect -komponentit

1. Liitä "M5 Stack Stick C" -tappi A (M5) Button2 -nastaan [In]
2. Liitä "M5 Stack Stick C" -tappi [B] "Button1" -nastaan [In]
3. Liitä "Button2" -nasta [Out] "RepeatButton1" -nastaan [In]
4. Liitä "RepeatButton1" -nasta [Out] "ClockDemmux1" -nastaan [In]
5. Liitä "Button1" -nasta [Out] "Counter1" -nastaan [In]
6. Liitä "M5 Stack Stick C"> "Real Time Alarm Clock (RTC)" -nasta [Out] "DecodeDateTime1" -nastaan [In]
7. Yhdistä "DecodeDateTime1" -nasta [Tunti] "FormattedText1"> "TextElement1" -nastaan [In]
8. Yhdistä "DecodeDateTime1" -nasta [minuutti] muotoon "FormattedText1"> "TextElement2" -nasta [In]
9. Yhdistä "DecodeDateTime1" -nasta [toinen] "FormattedText1"> "TextElement3" -nastaan [In]
10. Liitä "FormattedText1" -nasta [Out] "M5 Stack Stick C" -korttiin> "Display ST7735"> "Text Field1" pin [In]
11. Liitä "Counter1" -nasta [Out] "ClockDemmux1" -nastaan [Valitse] ja "Array1" -nastaan [hakemisto]
12. Liitä Counter2 -nasta [Out] Array2 -nastaan [hakemisto]
13. Liitä Array1 -nasta [Out] "M5 Stack Stick C" -korttiin> "Display ST7735"> "Text Field2" pin [In]
14. Liitä Array2 -nasta [lähtö] "M5 Stack Stick C" -korttiin> "Näyttö ST7735"> nasta [Kirkkaus]
15. Liitä "ClockDemmux1" -tappi [1] "M5 Stack Stick C" -korttiin> "Real Time Alarm Clock (RTC)"> "Set Hour1" pin [Clock]
16. Liitä "ClockDemmux1" -tappi [2] "M5 Stack Stick C" -korttiin> "Real Time Alarm Clock (RTC)"> "Set Minute1" -tappi [Kello]
17. Liitä "ClockDemmux1" -tappi [3] "M5 Stack Stick C" -korttiin> "Real Time Alarm Clock (RTC)"> "Set Second1" -tappi [Kello]
18. Liitä "ClockDemmux1" -tappi [4] "Counter2" -nastaan [In]

Vaihe 7: Luo, käännä ja lähetä Arduino -koodi

Visuinossa napsauta "Rakenna" -välilehden alareunasta, varmista, että oikea portti on valittu, ja napsauta sitten "Käännä/rakenna ja lähetä" -painiketta.

Vaihe 8: Pelaa

Jos virta kytketään M5Sticks -moduuliin, näytön pitäisi alkaa näyttää aikaa. Voit muuttaa aikaa ja kirkkautta painikkeilla "B" näyttääksesi valikon ja vaihtaaksesi (Aseta tunnit, Aseta minuutit, Aseta sekunnit, Aseta kirkkaus) ja käytä painiketta "M5" sen asettamiseen.

Onnittelut! Olet suorittanut M5Sticks -projektisi Visuinon kanssa. Liitteenä on myös Visuino -projekti, jonka loin tälle Instructablelle, voit ladata sen täältä. Voit ladata ja avata sen Visuinossa: