Tworząc urządzenia elektroniczne napotykamy na nie lada wyzwanie: W jaki sposób zorganizować estetyczny, funkcjonalny interfejs użytkownika i nie stracić na to całego roku życia. Najpopularniejsze stosowane rozwiązania to: siedmiosegmentowe wyświetlacze LED i alfanumeryczne LCD. Bardziej zaawansowane projekty dostają graficzne wyświetlacze o wyższej rozdzielczości. Nadal jednak pozostaje problem estetycznej obudowy urządzenia, wkomponowania w nia wyświetlacza i zorganizowania wygodnych metod wprowadzania danych.
Pewnego dnia podczas pracy nad innym projektem niespodziewanie pojawił się pomysł: Hmmm, gdyby tak możliwe było proste stworzenie interfejsu użytkownika na ekranie smartfona – bez konieczności zagłębiania się w meandry programowania androida....
Czy udałoby się na bazie podstawowego modułu BBMagic stworzyć taki most pomiędzy mikrokontrolerem a aplikacją Android. Kontroler komunikowałby się z modułem poprzez UART, a ten z kolei z urządzeniem mobilnym poprzez interfejs Bluetooth Low Energy (BLE).
Po wielu, wielu próbach i kolejno odrzucanych pomysłach udało się wreszcie spiąć cały system komunikacji. Kod JSON wrzucany do UARTa zaczął generować na ekranie smartfona przyciski, przełączniki, paski postępu, wybieralne listy i pola tekstowe. (Co to jest JSON (JavaScript Object Notation)
Jak wygląda to w praktyce? Proces komunikacji najlepiej widać po podłączeniu modułu do terminala odpalonego na PCcie.
Po uruchomieniu na smartfonie aplikacji, przyciskamy START i z listy wybieramy urządzenie, z którym chcemy zestawić połączenie. Teraz wrzucamy do UARTa kod JSON – opis interfejsu, który ma zostać wyświetlony na ekranie. Poniższy przykład składa się z dwóch kontrolek ułożonych jedna pod drugą: pola tekstowego (TextView) i przycisku (Button).
{
"ty":"lout",
"or":"V",
"img":"3",
"cs":[
{
"ty":"TextView",
"n":"t1",
"te":"\nUwaga na CoV-2",
"tc":"250,250,250",
"ts":"40",
"w":"2"
},
{
"ty":"button",
"n":"b1",
"te":"OK",
"ud":"1",
"ts":"40",
"tc":"190,190,190",
"bg":"90,20,0",
"w":"1"
},
{
"ty":"TextView",
"w":"6"
}]
}
Po przesłaniu danych, na ekranie telefonu pojawi się taki oto widok:
Naciśnięcie guzika spowoduje wysłanie przez UART informacji: $by,b1”1”. Oznacza to, że przycisk b1 został naciśnięty.
Sterowanie kontrolkami interfejsu jest również proste.
Komenda $set,t1:te=”Hi BBMobile” ustawia nowy napis kontrolki t1, a komenda: $set,b1:te="GO GO GO"bg="254,60,0" zmienia tło i napis przycisku.
Nazwę modułu, która pokazuje się na liście urządzeń przy zestawianiu połączenia oraz w lewym górnym rogu aplikacji można dowolnie zmienić. Ograniczeniem jest długość - maksymalnie 25 znaków. Aby ograniczyć dostęp niepowołanym możliwe jest ustawienie PINu o maksymalnej długości 10 cyfr. Wtedy podczas łączenia zobaczymy taki oto ekran:
Na zakończenie pozostaje wysłać do UARTa komendę, która bardzo pasuje do obecnej sytuacji społecznej:
$set,t1:te="Uwaga na CoV-2",b1:te="ROZUMIEM"bg="254,100,0"
PS.: Jeśli któryś z kolegów ma na warsztacie lub w głowie projekt, w którym moduł byłby przydatny to jest kilka w wersji beta do oddania.
Trzymajcie się zdrowo!
Pewnego dnia podczas pracy nad innym projektem niespodziewanie pojawił się pomysł: Hmmm, gdyby tak możliwe było proste stworzenie interfejsu użytkownika na ekranie smartfona – bez konieczności zagłębiania się w meandry programowania androida....
Czy udałoby się na bazie podstawowego modułu BBMagic stworzyć taki most pomiędzy mikrokontrolerem a aplikacją Android. Kontroler komunikowałby się z modułem poprzez UART, a ten z kolei z urządzeniem mobilnym poprzez interfejs Bluetooth Low Energy (BLE).
Po wielu, wielu próbach i kolejno odrzucanych pomysłach udało się wreszcie spiąć cały system komunikacji. Kod JSON wrzucany do UARTa zaczął generować na ekranie smartfona przyciski, przełączniki, paski postępu, wybieralne listy i pola tekstowe. (Co to jest JSON (JavaScript Object Notation)
Jak wygląda to w praktyce? Proces komunikacji najlepiej widać po podłączeniu modułu do terminala odpalonego na PCcie.
Po uruchomieniu na smartfonie aplikacji, przyciskamy START i z listy wybieramy urządzenie, z którym chcemy zestawić połączenie. Teraz wrzucamy do UARTa kod JSON – opis interfejsu, który ma zostać wyświetlony na ekranie. Poniższy przykład składa się z dwóch kontrolek ułożonych jedna pod drugą: pola tekstowego (TextView) i przycisku (Button).
{
"ty":"lout",
"or":"V",
"img":"3",
"cs":[
{
"ty":"TextView",
"n":"t1",
"te":"\nUwaga na CoV-2",
"tc":"250,250,250",
"ts":"40",
"w":"2"
},
{
"ty":"button",
"n":"b1",
"te":"OK",
"ud":"1",
"ts":"40",
"tc":"190,190,190",
"bg":"90,20,0",
"w":"1"
},
{
"ty":"TextView",
"w":"6"
}]
}
Po przesłaniu danych, na ekranie telefonu pojawi się taki oto widok:
Naciśnięcie guzika spowoduje wysłanie przez UART informacji: $by,b1”1”. Oznacza to, że przycisk b1 został naciśnięty.
Sterowanie kontrolkami interfejsu jest również proste.
Komenda $set,t1:te=”Hi BBMobile” ustawia nowy napis kontrolki t1, a komenda: $set,b1:te="GO GO GO"bg="254,60,0" zmienia tło i napis przycisku.
Nazwę modułu, która pokazuje się na liście urządzeń przy zestawianiu połączenia oraz w lewym górnym rogu aplikacji można dowolnie zmienić. Ograniczeniem jest długość - maksymalnie 25 znaków. Aby ograniczyć dostęp niepowołanym możliwe jest ustawienie PINu o maksymalnej długości 10 cyfr. Wtedy podczas łączenia zobaczymy taki oto ekran:
Na zakończenie pozostaje wysłać do UARTa komendę, która bardzo pasuje do obecnej sytuacji społecznej:
$set,t1:te="Uwaga na CoV-2",b1:te="ROZUMIEM"bg="254,100,0"
PS.: Jeśli któryś z kolegów ma na warsztacie lub w głowie projekt, w którym moduł byłby przydatny to jest kilka w wersji beta do oddania.
Trzymajcie się zdrowo!
Cool? Ranking DIY
