M5StickC Fajnie wyglądający zegarek z menu i regulacją jasności: 8 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:27

W tym samouczku dowiemy się, jak zaprogramować ESP32 M5Stack StickC z Arduino IDE i Visuino do wyświetlania czasu na LCD, a także ustawić czas i jasność za pomocą menu i przycisków StickC.

Obejrzyj film demonstracyjny.

Krok 1: Czego będziesz potrzebować

M5StickC ESP32: możesz go dostać tutaj

Program Visuino: Pobierz Visuino

Uwaga: Sprawdź ten samouczek tutaj, jak zainstalować kartę StickC ESP32

Krok 2: Uruchom Visuino i wybierz typ płyty M5 Stack Stick C

Uruchom Visuino, jak pokazano na pierwszym obrazku Kliknij przycisk "Narzędzia" na komponencie Arduino (Zdjęcie 1) w Visuino Gdy pojawi się okno dialogowe, wybierz "M5 Stack Stick C", jak pokazano na Zdjęciu 2

Krok 3: W Visuino ustaw płytkę StickC

1. Kliknij kartę „M5 Stack Stick C”, aby ją wybrać
2. W oknie „Właściwości” wybierz „Moduły” i kliknij „+”, aby rozwinąć,
3. Wybierz "Wyświetl ST7735" i kliknij "+", aby go rozwinąć,
4. Ustaw „Orientację” na „goRight”
5. Ustaw „Kolor tła” na „ClBlack”
6. Wybierz „Elementy” i kliknij niebieski przycisk z 3 kropkami…
7. Wyświetli się okno dialogowe elementów
8. W oknie dialogowym elementów przeciągnij 2X „Pole tekstowe” z prawej strony na lewą
9. Kliknij „Pole tekstowe1” po lewej stronie, aby je zaznaczyć, a następnie w oknie „Właściwości” kliknij „Kolor” i ustaw go na „aclOrange” i kliknij „Kolor wypełnienia” i ustaw go na „aclBlack” (Ty może bawić się kolorami, jeśli chcesz) -również w oknach właściwości ustaw X:10 i Y:20 tutaj chcesz wyświetlić czas na wyświetlaczu LCD-ustaw rozmiar:3 (jest to rozmiar czcionki czasu)
10. Kliknij „Pole tekstowe2” po lewej stronie, aby je zaznaczyć, a następnie w oknie „Właściwości” kliknij „Kolor” i ustaw go na „aclAqua” i kliknij „Kolor wypełnienia” i ustaw go na „aclBlack”

(Możesz bawić się kolorami, jeśli chcesz) -ustaw „Wartość początkową” na: Ustaw GODZINĘ

-także w oknach właściwości ustaw X:10 i Y:2 tutaj chcesz wyświetlić menu na LCD -ustaw rozmiar:1 (jest to rozmiar czcionki menu)

Zamknij okno elementów

1. Kliknij kartę „M5 Stack Stick C”, aby ją wybrać
2. W oknie „Właściwości” wybierz „Moduły” i kliknij „+”, aby rozwinąć,
3. Wybierz „Wyświetl budzik czasu rzeczywistego (RTC)” i kliknij „+”, aby go rozwinąć,
4. Wybierz „Elementy” i kliknij niebieski przycisk z 3 kropkami…
5. W oknie Elements przeciągnij "Ustaw godzinę" z prawej strony na lewą - aw oknie właściwości ustaw "Dodaj wartość" na:True i "Wartość" na: 1
6. W oknie Elements przeciągnij "Ustaw minutę" z prawej strony na lewą i w oknie właściwości ustaw "Dodaj wartość" na:True i "Wartość" na: 1
7. W oknie Elements przeciągnij "Ustaw drugi" z prawej strony na lewą - aw oknie właściwości ustaw "Dodaj wartość" na:True i "Wartość" na: 1

Zamknij okno elementów

Krok 4: Dodaj komponenty w Visuino

1. Dodaj 2x komponent „Przycisk odrzucenia”
2. Dodaj komponent „Przycisk automatycznego powtarzania”
3. Dodaj komponent „Tablica tekstowa”
4. Dodaj komponent „Tablica analogowa”
5. Dodaj 2x komponent „Licznik”
6. Dodaj komponent „Clock Demux (przełącznik wielu kanałów wyjściowych)”
7. Dodaj komponent "Decode (Split) Date/Time"
8. Dodaj komponent „FormattedText1”

Krok 5: W komponentach zestawu Visuino

1. Wybierz składnik „FormattedText1” i w oknie „Właściwości” ustaw „Tekst” na: %0:%1:%2
2. Kliknij dwukrotnie komponent „FormattedText1” i w oknie dialogowym Elementy przeciągnij 3x „Element tekstowy” w lewo
3. Wybierz "TextElement1" po lewej stronie i w oknie właściwości ustaw "Wypełnij znak" na: 0 i "Długość" na: 2
4. Wybierz "TextElement2" po lewej stronie i w oknie właściwości ustaw "Wypełnij znak" na: 0 i "Długość" na: 2
5. Wybierz "TextElement3" po lewej stronie i w oknie właściwości ustaw "Wypełnij znak" na: 0 i "Długość" na: 2
6. Wybierz komponent "ClockDemmux1" iw oknie właściwości ustaw "Output Pins" na: 5
7. Wybierz składnik „Licznik1” iw oknie właściwości rozwiń „Max” i ustaw „Wartość” na: 4
8. Wybierz składnik „Licznik1” iw oknie właściwości rozwiń „Min” i ustaw „Wartość” na: 0
9. Wybierz komponent "Licznik 2" iw oknie właściwości rozwiń "Max" i ustaw "Wartość" na: 6
10. Wybierz składnik „Licznik2” iw oknie właściwości rozwiń „Min” i ustaw „Wartość” na: 0BUDOWANIE MENU:
11. Wybierz komponent „Array1” (Text Array) i kliknij go dwukrotnie.-W oknie elementów przeciągnij 4X „Wartość” na lewą stronę-Po lewej stronie wybierz „Item[1]” i w oknie właściwości ustaw „Wartość” na: USTAW GODZINY-Po lewej stronie wybierz "Pozycja[2]" iw oknie właściwości ustaw "Wartość" na: USTAW MINUTY-Po lewej stronie wybierz "Pozycja[3]" iw oknie właściwości ustaw "Wartość" na: SET SECONDS-Po lewej stronie Wybierz "Item[4]" iw oknie właściwości ustaw "Value" na: SET BRIGHTNESSZamknij okno Elements. USTAWIANIE WARTOŚCI JASNOŚCI:

12. Wybierz komponent „Array2” (Analog Array) i kliknij go dwukrotnie.-W oknie elementów przeciągnij 6X „Wartość” na lewą stronę-Po lewej stronie wybierz „Item[0]” i w oknie właściwości ustaw „Wartość” do: 1

    -Po lewej stronie wybierz "Pozycja[1]" iw oknie właściwości ustaw "Wartość" na: 0.9

    -Po lewej stronie wybierz "Item[2]" iw oknie właściwości ustaw "Value" na: 0.8 -Po lewej stronie wybierz "Item[3]" iw oknie właściwości ustaw "Value" na: 0.7-On lewa strona Wybierz "Item[4]" iw oknie właściwości ustaw "Wartość" na: 0.6-Po lewej stronie wybierz "Item[5]" i w oknie właściwości ustaw "Wartość" na: 0.55

Krok 6: W komponentach Visuino Connect

1. Podłącz styk A (M5) „M5 Stack Stick C” do styku „Button2” [In]
2. Podłącz styk „M5 Stack Stick C” [B] do styku „Button1” [In]
3. Połącz pin „Button2” [Out] z pinem „RepeatButton1” [In]
4. Połącz pin „RepeatButton1” [Out] z pinem „ClockDemmux1” [In]
5. Połącz pin „Przycisk 1” [Wy] z pinem „Licznik 1” [We]
6. Podłącz styk „M5 Stack Stick C” > „Budzik czasu rzeczywistego (RTC)” [Out] do styku „DecodeDateTime1” [In]
7. Połącz "DecodeDateTime1" pin[Hour] z "FormattedText1">"TextElement1" pin[In]
8. Połącz pin „DecodeDateTime1”[Minuta] z pinem „FormattedText1”>”TextElement2”[In]
9. Połącz "DecodeDateTime1" pin[Second] z "FormattedText1">"TextElement3" pin[In]
10. Podłącz pin [Wyjście] „Sformatowany tekst1” do płyty „M5 Stack Stick C” > „Wyświetlacz ST7735” > pin „Pole tekstowe1” [In]
11. Połącz pin [Out] „Counter1” z pinem „ClockDemmux1” [Wybierz] i z pinem „Array1” [Indeks]
12. Podłącz styk „Licznik 2” [Wyjście] do styku „Tablica 2” [Indeks]
13. Podłącz pin „Array1” [Out] do płyty „M5 Stack Stick C” > „Display ST7735” > Pin „Text Field2” [In]
14. Podłącz pin „Array2” [Wyjście] do płyty „M5 Stack Stick C” > „Wyświetlacz ST7735” > pin [Jasność]
15. Podłącz pin „ClockDemmux1”[1] do płyty „M5 Stack Stick C” > „Budzik czasu rzeczywistego (RTC)” > pin „Ustaw godzinę1” [Zegar]
16. Podłącz pin „ClockDemmux1” [2] do płyty „M5 Stack Stick C” > „Budzik czasu rzeczywistego (RTC)” > pin „Ustaw minutę 1” [Zegar]
17. Podłącz pin „ClockDemmux1” [3] do płyty „M5 Stack Stick C” > „Budzik czasu rzeczywistego (RTC)” > pin „Ustaw drugi1” [Zegar]
18. Podłącz pin „ClockDemmux1” [4] do pinu „Counter2” [In]

Krok 7: Wygeneruj, skompiluj i prześlij kod Arduino

W Visuino, na dole kliknij zakładkę "Build", upewnij się, że wybrany jest właściwy port, a następnie kliknij przycisk "Compile/Build and Upload".

Krok 8: Graj

Jeśli włączysz moduł M5Sticks, wyświetlacz powinien zacząć pokazywać godzinę. Możesz zmienić czas i jasność za pomocą przycisków "B", aby wyświetlić Menu i przełączać pomiędzy (Ustaw godziny, Ustaw minuty, Ustaw sekundy, Ustaw jasność) i użyj przycisku "M5" do ustawienia.

Gratulacje! Ukończyłeś projekt M5Sticks z Visuino. Dołączony jest również projekt Visuino, który stworzyłem dla tego Instructable, możesz go pobrać tutaj. Możesz go pobrać i otworzyć w Visuino: