Vysoce vypadající hodinky M5StickC s nabídkou a ovládáním jasu: 8 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:18

V tomto tutoriálu se naučíme, jak naprogramovat ESP32 M5Stack StickC s Arduino IDE a Visuino tak, aby zobrazoval čas na LCD displeji a také nastavit čas a jas pomocí nabídky a tlačítek StickC.

Podívejte se na ukázkové video.

Krok 1: Co budete potřebovat

M5StickC ESP32: získáte zde

Program Visuino: Stáhněte si Visuino

Poznámka: Podívejte se na tento návod, jak nainstalovat desku StickC ESP32

Krok 2: Spusťte Visuino a vyberte typ desky M5 Stack Stick C

Spusťte Visuino, jak je znázorněno na prvním obrázku Klikněte na tlačítko „Nástroje“na komponentě Arduino (obrázek 1) ve Visuinu Když se zobrazí dialogové okno, vyberte „M5 Stack Stick C“, jak je znázorněno na obrázku 2

Krok 3: Ve Visuinu nastavte StickC Board

1. Kliknutím na desku „M5 Stack Stick C“ji vyberte
2. V okně „Vlastnosti“vyberte „Moduly“a kliknutím na „+“rozbalte,
3. Vyberte „Zobrazit ST7735“a kliknutím na „+“jej rozbalte,
4. Nastavte „Orientace“na „goRight“
5. Nastavit "Barva pozadí" na "ClBlack"
6. Vyberte „Prvky“a klikněte na modré tlačítko se 3 tečkami…
7. Zobrazí se dialog Elements
8. V dialogu Prvky přetáhněte 2X „Textové pole“z pravé strany doleva
9. Kliknutím na „Textové pole1“na levé straně jej vyberte, poté v „Vlastnosti“klikněte na „Barva“a nastavte ji na „aclOrange“a klikněte na „Vyplnit barvu“a nastavte na „aclBlack“(Vy můžete hrát s barvami, pokud chcete) -také ve vlastnostech okna sada X: 10 a Y: 20 toto je místo, kde chcete zobrazit čas na velikosti sady LCD: 3 (to je velikost písma času)
10. Kliknutím na „Textové pole2“na levé straně jej vyberte, poté v „Vlastnosti“klikněte na „Barva“a nastavte ji na „aclAqua“a klikněte na „Vyplnit barvu“a nastavte na „aclBlack“

(Pokud chcete, můžete si pohrát s barvami) -nastavte „Počáteční hodnotu“na: Nastavit HODINU

-také ve vlastnostech okna nastavit X: 10 a Y: 2 toto je místo, kde chcete zobrazit nabídku na LCD -set velikost: 1 (to je velikost písma nabídky)

Zavřete okno prvků

1. Kliknutím na desku „M5 Stack Stick C“ji vyberte
2. V okně „Vlastnosti“vyberte „Moduly“a kliknutím na „+“rozbalte,
3. Vyberte „Zobrazit budík v reálném čase (RTC)“a rozbalte jej kliknutím na „+“,
4. Vyberte „Prvky“a klikněte na modré tlačítko se 3 tečkami…
5. V dialogu Prvky přetáhněte „Nastavit hodinu“z pravé strany doleva-a v okně vlastností nastavte „Přidat hodnotu“na: True a „Hodnota“na: 1
6. V dialogu Prvky přetáhněte „Nastavit minutu“z pravé strany doleva-a v okně vlastností nastavte „Přidat hodnotu“na: True a „Hodnota“na: 1
7. V dialogu Prvky přetáhněte „Nastavit druhé“z pravé strany doleva-a v okně vlastností nastavte „Přidat hodnotu“na: Pravda a „Hodnota“na: 1

Zavřete okno prvků

Krok 4: Ve Visuinu přidejte komponenty

1. Přidejte 2x komponentu „Debounce Button“
2. Přidejte komponentu „Tlačítko automatického opakování“
3. Přidejte komponentu „Text Array“
4. Přidejte komponentu „Analog Array“
5. Přidejte 2x součást „Counter“
6. Přidejte komponentu „Clock Demux (Multiple Output Channel Switch)“
7. Přidejte komponentu „Dekódovat (rozdělit) datum/čas“
8. Přidejte komponentu „FormattedText1“

Krok 5: Ve Visuino Set Components

1. Vyberte komponentu „FormattedText1“a v okně „Vlastnosti“nastavte „Text“na:%0:%1:%2
2. Dvakrát klikněte na komponentu „FormattedText1“a v dialogu Prvky přetáhněte 3x „Textový prvek“doleva
3. Vyberte "TextElement1" na levé straně a v okně vlastností nastavte "Vyplnit znak" na: 0 a "Délka" na: 2
4. Vyberte "TextElement2" na levé straně a v okně vlastností nastavte "Vyplnit znak" na: 0 a "Délka" na: 2
5. Vyberte "TextElement3" na levé straně a v okně vlastností nastavte "Vyplnit znak" na: 0 a "Délka" na: 2
6. Vyberte komponentu „ClockDemmux1“a v okně vlastností nastavte „Výstupní piny“na: 5
7. Vyberte komponentu „Counter1“a v okně vlastností rozbalte „Max“a nastavte „Hodnota“na: 4
8. Vyberte komponentu „Counter1“a v okně vlastností rozbalte „Min“a nastavte „Hodnota“na: 0
9. Vyberte komponentu „Counter2“a v okně vlastností rozbalte „Max“a nastavte „Hodnota“na: 6
10. Vyberte komponentu „Counter2“a v okně vlastností rozbalte „Min“a nastavte „Hodnota“na: 0BUILDING THE MENU:
11. Vyberte komponentu „Array1“(textové pole) a dvakrát na ni klikněte.-V okně prvků přetáhněte 4X „Value“na levou stranu-Na levé straně vyberte „Item [1]“a v okně vlastností nastavte „Value“do: NASTAVTE HODINY-Na levé straně vyberte „Item [2]“a v okně vlastností nastavte „Value“na: SET MINUTES-Na levé straně vyberte „Item [3]“a v okně vlastností nastavte „Value“to: SET SECONDS-Na levé straně vyberte „Item [4]“a v okně vlastností nastavte „Value“na: SET BRIGHTNESS Zavřete okno Elements. Nastavení hodnot pro BRIGHTNESS:

12. Vyberte komponentu „Array2“(Analog Array) a dvakrát na ni klikněte.-V okně prvků přetáhněte 6X „Value“na levou stranu-Na levé straně vyberte „Item [0]“a v okně vlastností nastavte „Value“do: 1

    -Na levé straně vyberte „Položka [1]“a v okně vlastností nastavte „Hodnota“na: 0,9

    -Na levé straně vyberte „Položka [2]“a v okně vlastností nastavte „Hodnota“na: 0,8 -Na levé straně vyberte „Položka [3]“a v okně vlastností nastavte „Hodnota“na: 0,7 -Zapnuto na levé straně Vyberte „Položka [4]“a v okně vlastností nastavte „Hodnota“na: 0,6-Na levé straně vyberte „Položka [5]“a v okně vlastností nastavte „Hodnota“na: 0,55

Krok 6: V komponentách Visuino Connect

1. Připojte pin „M5 Stack Stick C“A (M5) ke kolíku „Button2“[In]
2. Připojte pin „M5 Stack Stick C“[B] ke kolíku „Button1“[In]
3. Připojte pin „Button2“[Out] ke kolíku ‘RepeatButton1‘[In]
4. Připojte pin „RepeatButton1“[Out] ke kolíku „ClockDemmux1“[In]
5. Připojte pin „Button1“[Out] ke kolíku „Counter1“[In]
6. Připojte pin „M5 Stack Stick C“> „Budík v reálném čase (RTC)“[Výstup] ke kolíku „DecodeDateTime1“[Vstup]
7. Připojte pin „DecodeDateTime1“[hodina] ke kolíku „FormattedText1“> „TextElement1“[In]
8. Připojte pin „DecodeDateTime1“[Minuta] ke kolíku „FormattedText1“> „TextElement2“[In]
9. Připojte pin „DecodeDateTime1“[Druhý] ke kolíku „FormattedText1“> „TextElement3“[V]
10. Připojte pin „FormattedText1“[Out] k desce „M5 Stack Stick C“> „Display ST7735“> pin „Text Field1“[In]
11. Připojte pin „Counter1“[Out] ke kolíku „ClockDemmux1“[Vyberte] a ke kolíku „Array1“[Index]
12. Připojte pin „Counter2“[Out] k pinu „Array2“[Index]
13. Připojte pin „Array1“[Out] k desce „M5 Stack Stick C“> „Display ST7735“> pin „Text Field2“[In]
14. Připojte pin „Array2“[Out] k desce „M5 Stack Stick C“> „Display ST7735“> pin [Brightness]
15. Připojte pin „ClockDemmux1“[1] k desce „M5 Stack Stick C“> „Budík v reálném čase (RTC)“> pin „Nastavit hodinu 1“[Hodiny]
16. Připojte pin „ClockDemmux1“[2] k desce „M5 Stack Stick C“> „Budík v reálném čase (RTC)“> Pin „Nastavit minutu1“[Hodiny]
17. Připojte pin „ClockDemmux1“[3] k desce „M5 Stack Stick C“> „Budík v reálném čase (RTC)“> Pin „Nastavit druhý1“[Hodiny]
18. Připojte pin „ClockDemmux1“[4] ke kolíku „Counter2“[In]

Krok 7: Generujte, kompilujte a nahrajte kód Arduino

1. Ve Visuinu ve spodní části klikněte na kartu „Build“, ujistěte se, že je vybrán správný port, poté klikněte na tlačítko „Compile/Build and Upload“.

Krok 8: Hrajte

Pokud napájíte modul M5Sticks, na displeji by se měl začít zobrazovat čas. Čas a jas můžete změnit pomocí tlačítek „B“pro zobrazení Menu a přepínání mezi (Nastavit hodiny, Nastavit minuty, Nastavit sekundy, Nastavit jas) a použít tlačítko „M5“pro jeho nastavení.

Gratulujeme! Dokončili jste svůj projekt M5Sticks s Visuino. Také je připojen projekt Visuino, který jsem vytvořil pro tento Instructable, můžete si jej stáhnout zde. Můžete si jej stáhnout a otevřít ve Visuinu: