
Spisu treści:
2025 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2025-01-23 15:03

Masz więc Raspberry Pi i fajny pomysł, ale jak sprawić, by interakcja z nim była tak prosta jak smartfon?
Tworzenie graficznego interfejsu użytkownika (GUI) jest w rzeczywistości dość łatwe i przy odrobinie cierpliwości możesz tworzyć niesamowite projekty.
Krok 1: Ogólny przegląd
Jednym z najpotężniejszych narzędzi, jakie Raspberry Pi zapewnia w porównaniu z innymi mikrosystemami, jest szybkość i łatwość tworzenia graficznego interfejsu użytkownika (GUI) dla swojego projektu.
Jednym ze sposobów, aby to osiągnąć, specjalnością, jeśli masz pełny ekran dotykowy (lub standardowy ekran i urządzenie wejściowe, takie jak mysz), stało się niesamowite!
Na potrzeby tego artykułu będziemy używać Pythona 3 z Tkinter:
Potężna biblioteka do tworzenia aplikacji z graficznym interfejsem użytkownika (GUI) na Raspberry Pi, jeśli chodzi o twórców.
Tkinter jest prawdopodobnie najczęściej używany w Pythonie, a w Internecie istnieje wiele zasobów.
Krok 2: „Hello World” w Tkinter

Używamy aRaspberry Pi załadowanego Raspbian Stretch OS.
Aby uruchomić nasze aplikacje Tkinter GUI. możemy również użyć dowolnego innego systemu operacyjnego, który ma zainstalowany Python.
Raspbian jest dostarczany z zainstalowanymi Python 2, Python 3 i biblioteką Tkinter.
Aby sprawdzić, którą wersję zainstalowałeś, z terminala uruchom:
python3 --wersja
Utwórz nowy plik o nazwie app.py i wprowadź kod bazowy pokazany poniżej:
#!/usr/bin/python
from tkinter import * # importuje bibliotekę Tkinter root = Tk() # tworzy obiekt główny root.wm_title("Hello World") # ustawia tytuł okna root.mainloop() # uruchamia pętlę GUI
Jeśli nie używasz IDE, uruchom następujące polecenie w terminalu z katalogu zawierającego kod Pythona, aby uruchomić program.
python3 aplikacja.py
Krok 3: Dostosowywanie okna

Przyjrzyjmy się teraz, jak dostosować to okno.
Kolor tła
root.configure(bg="czarny") # zmień kolor tła na "czarny"
lub
root.configure(bg="#F9273E") # użyj kodu koloru szesnastkowego
Wymiary okna
root.geometry("800x480") # określ wymiar okna
lub
root.attributes("-fullscreen", True) # ustawione na pełny ekran
Pamiętaj, że utkniesz w trybie pełnoekranowym, jeśli nie stworzysz sposobu na wyjście
# możemy wyjść po naciśnięciu klawisza Escape
def end_fullscreen(event): root.attributes("-fullscreen", False) root.bind("", end_fullscreen)
Krok 4: Widgety w Tkinter


Tkinter zawiera wiele różnych widżetów, które pomogą Ci stworzyć najbardziej odpowiedni interfejs użytkownika. Widżety, których możesz użyć, obejmują:• pole tekstowe
• guziki
• przycisk wyboru
• suwak
• skrzynka na listy
• Przycisk radiowy
•itp..
Teraz możemy dodać kilka widżetów, takich jak tekst, przyciski i dane wejściowe.
Dodawanie widżetów
Etykiety
label_1 = Label(root, text="Witaj, świecie!")
Zanim jednak pojawi się w oknie, musimy ustawić jego pozycję. Użyjemy pozycjonowania siatki.
label_1.grid(wiersz=0, kolumna=0) # ustaw pozycję
Wejście wejściowe
label_1 = Label(root, text="Witaj, świecie!", font="Verdana 26 pogrubienie, fg="#000", bg="#99B898")
label_2 = Label(root, text="Jak masz na imię?", fg="#000", bg="#99B898") entry_1 = Entry(root) #input entry label_1.grid(row=0, kolumna=0) label_2.grid(wiersz=1, kolumna=0) wpis_1.grid(wiersz=1, kolumna=1)
guziki
#Dodaj przycisk w oknie
Button = Button(root, text="Prześlij") Button.grid(row=2, column=1)
Krok 5: Dodawanie logiki


Teraz mamy prosty formularz, jednak kliknięcie przycisku nic nie daje!!
Dowiemy się, jak skonfigurować zdarzenie w widżecie przycisków i powiązać je z funkcją, która uruchamia się po kliknięciu.
W tym celu zaktualizujemy label_1, aby wyświetlał "Hello + tekst wprowadzony do danych wejściowych". Po wybraniu przycisku przesyłania.
Pobierz poniższy kod, a następnie go uruchom.
Krok 6: Sterowanie diodami LED




Do tej pory widzimy jak dodać przycisk do okna i dodać do niego logikę w celu wykonania akcji.
Teraz trochę zmienimy kod. Stworzymy więc formularz i dodamy do niego dwa przyciski. Jeden do włączania/wyłączania diody LED, a drugi do wyjścia z programu.
Uwaga: Upewnij się, że zaktualizowałeś Raspberry przed rozpoczęciem i że masz zainstalowaną bibliotekę GPIO, Otwórz okno poleceń i wprowadź następujące polecenie instalacji biblioteki GPIO. Otwórz okno poleceń i wprowadź następujące dane:
$ sudo apt-get update
$ sudo apt-get zainstaluj python-rpi.gpio python3-rpi.gpio
Kompilacja:
Wymagane części:
1 x Raspberry Pi 3
1 x LED
Rezystor 1x330Ω
Budowanie obwodu:
Postępuj zgodnie z powyższymi zdjęciami.
Zwróć uwagę na orientację diody LED i pin, do którego jest podłączony (GPIO23).
Krok 7: Dodawanie kontrolera serwomotoru



Przejdziemy do czegoś innego niż przycisk, możemy również użyć różnych wejść do sterowania wyjściami PWM (Pulse Width Modulation) z Raspberry Pi.
Serwomotor to świetny wybór, który przekłada sygnał PWM na kąt.
Kompilacja:
Wymagane części:
1 x Raspberry Pi 3
1 x LED
Rezystor 1x330Ω
1 x serwosilnik
Budowanie obwodu:
Postępuj zgodnie ze schematem pokazanym powyżej (dioda LED podłączona do GPIO 23, silnik serwo podłączony do GPIO 18).
Sprawdź wideo, jeśli utknąłeś.
Krok 8: Wniosek

Masz to! Idź dalej i podbij niesamowite pomysły na interfejs użytkownika!
Jeśli masz jakieś pytanie, oczywiście możesz zostawić komentarz.
Aby zobaczyć więcej o moich pracach odwiedź mój kanał
myYouTube
mój Twitter
myLinkedin
Dzięki za przeczytanie tej instrukcji ^^ i miłego dnia. Do zobaczenia. Ahmed Nouira.
Zalecana:
Konwerter doładowania oparty na Esp8266 z niesamowitym interfejsem użytkownika Blynk z regulatorem sprzężenia zwrotnego: 6 kroków

Przetwornik doładowania oparty na Esp8266 z niesamowitym interfejsem użytkownika Blynk z regulatorem sprzężenia zwrotnego: W tym projekcie pokażę Ci wydajny i powszechny sposób zwiększania napięcia DC. Pokażę Ci, jak łatwo można zbudować konwerter doładowania za pomocą Nodemcu. Zbudujmy to. Zawiera również woltomierz ekranowy i informację zwrotną
Pierwsze kroki z interfejsem czujnika I2C? - Interfejs MMA8451 za pomocą ESP32: 8 kroków

Pierwsze kroki z interfejsem czujnika I2C? - Interfejs MMA8451 za pomocą ESP32: W tym samouczku dowiesz się wszystkiego o tym, jak uruchomić, podłączyć i uzyskać urządzenie I2C (akcelerometr) współpracujące z kontrolerem (Arduino, ESP32, ESP8266, ESP12 NodeMCU)
Tester baterii Arduino z interfejsem użytkownika WEB.: 5 kroków

Tester baterii Arduino z interfejsem użytkownika WEB.: Obecnie sprzęt elektroniczny wykorzystuje zapasowe baterie, aby zapisać stan, w którym operacja została przerwana, gdy sprzęt został wyłączony lub przypadkowo został wyłączony. Użytkownik po włączeniu powraca do punktu, w którym przebywał
Analizator logiczny z interfejsem użytkownika Androida: 7 kroków

Logic Analyzer z interfejsem użytkownika Android: Świat jest już zalany tak wieloma analizatorami stanów logicznych. W moim hobby elektronicznym potrzebowałem go do rozwiązywania problemów i debugowania. Przeszukałem internet, ale nie mogę znaleźć tego, którego szukam. A więc oto jestem, przedstawiając… „JESZCZE inny Lo
30 $ System nadzoru z interfejsem użytkownika: 7 kroków

30$ System nadzoru z interfejsem użytkownika: Niezwykle tani i bardzo łatwy do wykonania system nadzoru. Nie musisz być żadnym naukowcem, żeby to zrobić. Wszystkie wymagane części prawdopodobnie znajdziesz w lokalnym sklepie ze sprzętem. Będziesz potrzebować tylko 2 kątowniki, 2 serwosilniki, cou