Obraz z Raspberry Pi w oknie przeglądarki + sterowanie pozycją + oświetlenie

Obraz z RaspberrPi w oknie przeglądarki + sterowanie pozycją + oświetlenie

Witam,

Od jakiegoś czasu tworze system do łatwego łączenia ze sobą rządzeń takich jak RaspberrPi, arduino, i sterowanie nimi przez strony internetowe. Projekt jest całkowicie darmowy ( i jak narazie w wersji Beta).

Planuje przygotować serie artykułów które będą pokazywać możliwości systemu i jego używanie.

Na początek wyświetlanie obrazu kamery w oknie przeglądarki z kamerki RaspberryPi, sterowanie tą kamerką i załączanie dodatkowego oświetlenia.

Ten kurs będzie się składał z trzech części:

• instalacja remoteme.org na raspberryPi
• podłączenie i podgląd kamery w komórce, tablecie ogólnie wszędzie tam gdzie jest nowoczesna przeglądarka
• sterowanie pozycją kamery, podświetleniem

taki efekt uzyskamy :

Wersja video tego kursu:

Co potrzebujemy:

• Podgląd
  • Raspberry PI Zero W
  • Dedykowanej kamery
• Sterowanie
  • 12-kanał sterownik LED 16-bit PWM I2Czgodny z Adafruit  29zł link
  • 
  • Dwa serwo mechanizmy kompatybilne z uchwytem na kamerkę (np SG90) 2*9.9zł =20zł link
  • 
  • Uchwyt na kamerke 7.8 zł 

    

• Podświetlenie
  • Konwerter stanów logicznych 4.5zł
  • 
  • power led 3.5zł
  • tranzystor Mosfet typu N np IRF540N MOSFET 2zł
  • opornik 220 om
  • mocne oporniki  do podłączenia diody( do wyliczenia wartości oporników polecam użyć gotowego kalkulatora )
  •  

Czego NIE potrzebujemy:

• Publicznego IP
• Własnego serwera
• Zaawansowanych umiejętności programistycznych ( w zasadzie to będzie kopiuj wklej )
• Pluginów do przeglądarki, flasha, specjalnych programów do odbioru obrazu

Jak to będzie działać:

Na RaspberryPi będzie uruchomiony program „remoteme” jego zadanie to zarejestrowanie się w systemie remoteme.org, uruchomienie sesji WebRTC przez którą nasze RPi będzie wysyłało obraz z kamery do przeglądarki, a przeglądarka będzie wysyłała wiadomości (sterowanie kamerką i diodą).

Na stronie internetowej ( hostowana na remoteme.org ale z pełną możliwością zmian) będzie Javascript będzie on przechwytywał muśnięcia palcem (ruch myszki) i wysyłał wiadomości do pozycji kamery. Drugim zadaniem JS będzie spięcie sesji WebRTC (video)

Skrypt pythonowy – sterowanie serwami i diodą led

System Remoteme.org umożliwi komunikację pomiędzy javascriptem,  RaspberryPi, skryptem pythonowym

Co to jest remoteme.org:

Jest to DARMOWE środowisko składające się z:

• System webowego app.remoteme.org
• programu na RaspberryPi
• opensourcowy zestaw bilbiotek (C++, python, javascript ) )
• w przyszłości aplikacja na Androida

Całe środowisko umożliwia w łatwy sposób komunikacje przez internet różnych urządzeń, i sterowanie nimi przez stronę internetową (hostowane na remoteme.org lub nie), restowe API.

Instalacja programu na raspberryPi:

Uzyskanie podglądu video na stronie internetowej.

https://app.remoteme.org/ rejestrujemy się w zakładce SingUp – bardzo ważne nie podajecie swojego adresu email więc jak zapomnicie hasła to nie ma możliwości jego odzyskania !.

Zarejestrowanie RasbperryPi w systemie. Do tego potrzebujemy poprzez konsolę wgrac i uruchomić program remoteme ( jak skonfigurowąć nasze RPI – wgranie systemu jak sie łączyć konsolą, skonfigurować komunikacje I2C i kamerkę)

W katalogu gdzie chcemy żeby nasz program się znajdował (potem możemy zmienić po prostu przenosząc cały katalog remoteme w inne miejsce)

Polecenie ściąga program, pliki konfiguracyjne itd.

przechodzimy do nowo utworzonego katalogu

Co instalacja robi z Waszym RaspberryPi:

• instaluje biblioteki pythona https://pypi.python.org/pypi/psutil
• isntaluje biblioteki pythona https://github.com/adafruit/Adafruit_Python_PCA9685
• zmienia wpisy w pliku conf.json w nowo utworzonym katalogu remoteme

Gdy system pyta nas o instalacje bibliotek pythonowych [ y Enter ]

następnie program skonfiguruje połaczenie z systemem app.remoteme.org

System pyta o „Provide Token and press enter” na stronie https://app.remoteme.org w zakładce Token klikamy „New Token” wprowdzamy nazwe token1 i klikamy OK

—————————————–

Czym są tokeny:

kopiujemy token:

i wklejamy (shift + Insert) do puttego, potem podajemy nazwe naszego Rasbperry pI np [Rpi] i deviceId np [1]:

uruchamiamy program remoteme

a w zakładce Devices w systemie :

https://app.remoteme.org/en/#/app/devices

zielona ikonka: wskazuje ze urządzenie jest aktualnie podłączone.

Zresetujmy program na RPi i obserwujmy ikonkę i konsolę,

Podląd kamerki na stronie internetowej.

Dodamy stronę internetową z gotowych szablonów i będziemy się cieszyć podglądem kamery:

W zakładce devices klikamy New:

następnie „New Web Page” i ustawiamy wszytko jak na screnie poniżej:

nie zapomnijcie zaznaczyć active i templatu „justVideo”

————————————–

————————————–

po kliknięciu „Submit”:

Pojawiło sie nowe urządzenie – strona internetowa. rozwińmy ją:

Wybraliśmy gotowy szablon, dlatego system od razu dodał nam pliki ze stroną internetową gdzie zobaczymy podgląd widoku kamerki:

kliknijmy na index.html i otwórzmy stronę w nowej zakładce:

UWAGA korzystajcie z najnowszego Firefox’a albo chrome’a.

I dostajemy piękny obraz z kamerki  (a dioda na kamerce Rpi będzie się świeciła):

Oczywiście tylko wy macie do niej dostep i jak sie wylogujecie i odświeżycie podgląd to nic się nie wyświetli.

Teraz otworzymy tą samą stronę ale w komórce. Na komórce nie chcemy się logować tylko skorzystamy z linka który otworzy nam podgląd do naszego Rpi (wcześniej musimy zamknąć podląd kamery na komputerze (dioda na kamerce zgaśnie – Rpi transmituje obraz tylko do jednego odbiorcy naraz)):

Klikamy na Index.html ale tym razem wybieramy „Get anonymous link …”:

I mamy:

linków będzie tyle ile mamy wygenerowanych tokenów, gdy powiązany z linkiem token usuniemy po jakimś czasie używanie tego konkretnego adresu nie będzie możliwe. Zamiast żmudnego przepisywanie adresu do komórki otwórzmy kod QR

i zeskanujmy go (Otwórzmy link w najnowszym Firefoxie, chrome i inne na razie nie wspierają w pełni Webrtc)

Jeżeli jesteśmy w tej samej sieci Wifi co Rpi na pewno otrzymamy podgląd jeżeli natomiast korzystamy z internetu mobilnego to możliwe, że będziemy musieli  dodać serwer Turn ( prawdopodobnie nasze ustawienia firewall nie pozwalają na bezpośrednie połączenia, albo nasz dostawa internetu umieścił nas za NATem):

Podpięcie Serwo Mechanizmów:

Do sterowania servo mechanizmów użyjemy 12-kanałowego sterownika LED 16-bit PWM I2C zgodnego z Adafruit. Komunikuje się on z Rpi poprzez interfejs I2C. Adafruit udostępnia bibliotekę pythona która działa out-of-the-box, Jeżeli w drugim kroku instalacji remoteme na RPi wybraliście opcje [Tak] macie tą bibliotekę już zainstalowaną ;).

Podłączenia:

Pin SDA, SCL, i ground podłączamy do tak samo oznaczonych pinów w RPI:

oznaczenie pinów w RPI wygląda tak:

(czerwone oznaczenia pinów ułatwią Wam liczenie pinów na samym urządzeniu)

Tutaj znajdziecie pełny obrazek z wyprowadeniami Pinów Rpi

Do pinu V+ i Vcc na sterowniku podłączamy napięcie +5V, Vcc służy do zasilania samego układu zaś V+ do zasilania serwo mechanizmów, a same serwa przypinamy zgodnie z kolorami na kablu i na układzie. Szczegóły samego układu tutaj

Przed złożeniem podstawki na kamerkę musimy ustawić serwa w pozycji środkowej – ułatwi to w znacznym stopniu kalibracje samej podstawki. Nie musimy pisać programu do obsługi serw prosty przykład który nam wystarczy znajduje się w szablonie servo. W zakładce Devices wybieramy [New] -> [New Web Page] i uzupełniamy okienko :

[Submit]

Pokaże nam się nowe urządzenie Servo WWW. Ale jak ja otworzymy w nowej zakładce i spróbujemy poruszać suwakami to nie będzie działać w konsoli htmlowej ([F12] w chromie) mamy odpowiedź:

Dlaczego ?

Strona internetowa wysyła wiadomośći do skryptu który steruje serwo mechanizmami, my takiego skryptu jeszcze nie mamy dlatego strona nie wie gdzie wysyłać wiadomośći.

Dodajmy skrypt. Skrypt oczywiście będzie sie znajdował na RaspberryPi dodajmy go:

zakładka Devices

z menu wybieramy [Add external script]

pojawia sie okienko które uzupełniamy:

[Submit]

po restarcie pliki do skryptu są dodane i nasz skrypt jest podłączony:

—————————-

Teraz możemy już wysyłać wiadomości ze strony “WWW servo” do skryput pythonowego, no prawie bo strona jeszcze nie zna adresu skryptu pythonowego.

kliamy [Open] i edytujemy:

10 dlatego ze nasz srkypt pythonowy ma deviceId 10:

otwieramy plik index.html w nowej zakladce:

i jak poruszamy sliderami to poruszają się też serwa:

Teraz musimy metodą prób i błedów odnaleść maksylalne wychylenia serw w moim przypadku to 225 i 880 wiec oba serwa ustawiam w pozycji 552 ( bo (225+880)=552.5), i ustawione serwa w pozycji centrlanej  odłączamy od sterownika.

teraz zmontowanie serw do uchwytu kamerki:

i gotowa podstawka razem z diodą LED (możecie narazie diode pominąć)

Wracamy do strony sterowania kamerą i suwakami ustawiamy pozycje centralną kamery ( to ważne żeby było dokładnie)

w moim przypadku wyśrodkowana kamera dla osi X=568 dla osi Y = 506, zakres ruchu kamery dla osi X wynosi 312 w obie strony, a dla osi Y 237 także w obie strony, Ważne, żeby kamera obracała się swobodnie w całym obszarze, przykład w filmie

Podsumowując pozycje kamery:

Programowanie :

Musimy zmodyfikować skrypty najpierw zmodyfikujemy skrypt WWW żęby zczytywał muśnięcia placa, i wysyłał współrzędne do zmodyfkowanego skryptu z serwami.

Na pierwszy ogień idzie skrypt WWW, zmodyfikujemy nasze urządzenie “video”

index.html

Dodajemy stałą która reprezentuje adres skryptu pythonowego:

miejsce gdzie będziemy wyświetlać pozycję kamery:

i eventy to poruszania myszką i muśniecia palcem:

przed zmianą:

po zmianie:

Klikamy [Save], zamykamy edycje index.html

script.js

dodajemy funkcje które przechwycą ruch myszki i palca:

obie funkcje wywołują tą samą funckje positionChange z parametreami [x,y]

sama funkcja positionChange:

na podstawie rozmiaru komponentu remotemeVideo wywołuje funkcje sendCameraNow z parametrami x,y ale tym razem x i y są z przedziału -1,1, czyli  sendCameraNow (-1,-1) oznacza ze chcemy spojrzeć kamerą na skrajny róg sendCameraNow (0,0) wysrodkowanie kamery, itd

i funkcja sendCameraNow(x,y):

na początku wyświetlamy pozycje kamery w naszym divie, ułatwi to debugowanie, potem tworzymy wiadomość będzie ona miała 5 bajtów długości:

• bajt pierwszy to 1 zeby skrypt pythonowy wiedział ze chcemy sterować pozycja kamery
• dwa kolejne bajty to pozycja kamery w osi X ( wysyłane jako dwu-bajtowy integer)
• i kolejne dwa bajty to pozycja kamery w osi Y ( również wysyłane jako dwu-bajtowy integer)

bazując na naszych obliczeniach pozycji kamery i wychyleń, do skryptu wysyłamy pozycje do wysterowania serw, porownajcie stałe:

z pozycjami i wychyleniami jakie obliczyliśmy wyżej, jak centrowaliśmy kamerę i ustawialiśmy jej maksymalne wychylenia

opis funkcji putShort i putBayte jak i innych które sie przydają tutaj

tak przygotowaną wiadomość wysyłamy do naszego skryptu pythonowego:

opis obiektu remoteme tutaj

wszystkie zmiany jakie dokonaliśmy w pliku script.js:

sprawdzmy jak strona działa. index.html -> [open at new tab]

jak poruszamy myszką, albo palcem na komórce na górze zmienia się wysyłana pozycja kamery

Sama kamera sie nie rusza. Co gorsze nasz skrypt o deviceid10 sie rozłączył.

Dlaczego ? zmieniliśmy format wysyłanej wiadomości, i nasz skrypt pythonowy spodziewał się czegoś innego i rzucił błędem. Sprawdźmy logi

klik -> open

Mamy winowajce, zmieniliśmy format wiadomości i teraz wysyłamy wiadomość o rozmiarze 5 python spodziewał się długości 3 nie wiedział jak sobie poradzić i się wysypał.

zmodyfikujmy wiec skrypt pythonowy żeby poprawnie odbierał wiadomości:

python.py

funkcja która odbiera wiadomości jest taka:

do zmiennej data zapisujemy dwie wartości integerowe pierwsza jest jedno-bajtowa druga 2 bajtowa. Pamiętamy ze javascript wysyła wiadomości 5 bajtowe , 1 bajtowy integer i dwa dwa batjtowe integery, zczytajmy je:

pierwszy bajt oznacza czym chcemy sterować na razie mamy tylko kamerkę i wtedy pierwszy bajt to 1 a następne dwie liczby do pozycja serw do wysterowania wiec po modyfikacji mamy:

• data[0] – ==1 dla pozycji kamery
• data[1] – pozycja kamery w osi x
• data[2] – pozycja kamery w osi y

Jak nie pamiętajcie wróćcie do funkcji  sendCameraNow w javascripcie.

zapisujemy zmienioną funkcje, program na Rpi się zresetuje.

gdy teraz otworzymy stronę do sterowania kamera

https://app.remoteme.org/wp/100/index.html

jak poruszamy myszką to zmienia się pozycja kamery. Ale jest jeden problem wysyłamy za dużo wiadomości naraz, bo za kazdym ruchem myszki wysyłamy wiadomość. Musimy to ograniczyć.

wracamy do index.html importujemy potrzebny plik z funkcjami:

opis Klasy tutaj

a w script.js:

na samej górze:

150 oznacza – nie wysyłaj wiadmości częsciej niż co 150ms

Modfikujemy funkcje positionChange

zapisujemy, i odświeżamy stronę z podglądem video. Teraz działa znakomicie :D. Na komórce też będzie działać super.

Świecenie diodą:

Ogólnie przez stronę javascript wyślemy wiadomość która ustawi pin na Rpi w stan niski lub wysoki, pin przez konwerter napięć wysteruje tranzystor mosfet, a ten załączy/ rozłączy diodę.

schemat połączeń:

Programowanie:

index.html

jak wcisniemy na klawiaturze dowolny klawisz dioda sie zapali albo zgasnie.

komponent ktory pokazuje stan diody i umozliwia jej włączanie wyłączanie.

style.css

komponent jest okrągły i ma zółte wypełnienie jak dioda jest włączona.

script.js

i tą funkcje dodajemy.

tak samo jak pozycja kamery jest to 5 bajtowa wiadomość tym razem pierwszy bajt to 2, a następny dwubajtowy integer to 1 dla diody zapalonej i 0 gdy ma zgasnąć.

python.py

importujemy biblioteke do obslugi wyjść. i definiujemy pod jakim pinem będziemy sterować diodą.

funckja do ustawień pinów.

wołana w głównym bloku programu

i zmodfykowana funkcja do odbioru wiadmości:

Gotowe :)

Wszystko działa jak to sobie zaplanowaliśmy :)

kompletne kody źródłowe tutaj

Mam nadzieje, że Kurs wam się spodobał, jeżeli coś jest niejasne piszcie w komentarzach.

FB projektu: klik

kanał na youtube: klik

Jak pisałem wyżej następnym projektem będzie sterowany samochód z użyciem kamerki z tego kursu ;)

Pozdrawiam,

Maciek