Projecte final electrònica digital

Projecte taula de control d'il·luminació

A aquest pàgina web hi ha la versió reduida del tutorial. Per seguir la versió expandida heu d'anar al següent enllaç:

https://sites.google.com/itaeb.cat/escenotecniam2/ufs/uf-4-sistemes-inform%C3%A0tics/projecte-final-electr%C3%B2nica-digital

AppInventor
ArduinoBlocks amb shield DMX
Introducció a IoT amb ThingSpeak

App Inventor

App Inventor ens permet crear apps per tauletes i telèfons mòbils.

Nosltres ho farem servir per crear el controlador des d'on lleçarem les instruccions del que volem que facion els nostres focos.

El primer que farem és anar la pàgina web: https://ai2.appinventor.mit.edu/ ens acreditarem i començarem un projecte nou.

Aquesta és la visió de la pantalla on haurem de dissenyar la interfície d'usuari (Dissenyador).

A l'esquerra hi ha la paleta on apareixen tots els components que podem afegir al nostre projecte.

A la part central tenim la pantalla on haurem de distribuir els components arrossegats des de la paleta de components.

I a la dreta ens apareixen les propietats de l'element que haguem seleccionat a cada coment.

Pantalla de programació (Blocs)

Si cliquem sobre del botó (Blocs) que hi ha a la part superior dreta de la pantalla anirem a la pantalla on farem la programació dels elements incorporats quan hem fet el disseny.

A aqueta pantalla tenim a la part esquerra el llistat de totes les funcions que podem fer servir i un llistat dels components arrossegats des de la paleta a la pantalla disseny.

Inicialment només apareix el component (Screen1)

Comencem el nostre disseny

Dins de la paleta de Disposició triarem:

Un (C. disposició horitzontal amb barra) i dins d'aquest contenidor arrossegarem tres (C. disposició vertical amb barra).

Dins de cada un dels (C. disposció vertical) i arrosegarem un (Selector de llista) de la paleta (Interfície d'usuari)

A aquest selector de llista hi apareixeran tots els tipus de focus dels que disposem.

I sota de cada (Selector de llista) afegim un altre (C. disposició vertical)

Dins aquestes disposicions afegirem tot el necessari per fer anar cada focus.

El primer element que afegirem serà un (Quadre de text)

Aquest quadre de text serà on l'usuari de l'app introduirà el canal DMX de cada focus.

Per tal de no perdre'ns a l'hora de programar hem (Canviat el nom) d'alguns components.

També hem modificat les propietats dels (Quadres de text):

- (Pista) per posar el text d'ajuda: Canal DMX

- Marquem el chec de (Només nombres)

També canvien la propietat (Text) dels tres (Selectors de llista) i posarem Focus 1, Focus 2 i Focus 3 respectivament.

Ara passem a fer una mica de programació

No podem deixar tota la programació pel final. Quan es programa s'ha d'anara verificant que el nostre programa funciona correctament a mida que anem avançant.

Llavors hem de clicar sobre el botó de (Blocs) per anar a la pantalla de programació

Ara veiem que sota del compoent (Screen1) ens apareixen la resta de compoents que hem arrossegat fins a la pantalla.

A mida que anem afegint més focus aquesta llista s'anirà ampliant amb els nous focus.

Primer anirem a la Paleta (Variables) i arrossegarem l'element (Crea variable global) a la zona de programació.

De la paleta (Llista) enxanxarem l'element (Crea llista)

I per últim de la Paleta (Text) agafarem dos textes en blanc i els engaxem a la nostra llista.

Amb el teclat de l'ordinador escrivim al primer quadre de text "Cap" i al segon quadre de text "Colorband T3BT ILS"

Ara inicialitzarem els (Selectors de llista) amb el llistat dels focus que acabem de crear.

Aquesta inicialització la farem quan s'inicii la pantalla:

Per això, seleccionem de la paleta l'element (Screen1) i arrosseguem l'esdeveniment (Quan Screen1.Inicialitza)

Dins d'aquest esdeveniment posarem per cada un dels selectors de llista el bloc: (Assigna a Selector_de_llista1.Elements).

I de la Paleta (Variables) hi enganxarem la (grobal LlistaFocus)

Provem si funciona el nostre projecte

Per mirar com funciona el que hem programat fins ara farem servir l'app (MIT AI2 Companion) del Play Store

Seguim programant

I ara modifiquem la propietat (Text) dels nostres selectors de llista per podar el nom del focus que l'usuari ha triat.

Per fer-ho hem d'arrossegar per cada (Selector de de llista) l'esdeveniment (Quan Selector_de_llista1.Després de seleccionar)

I dins d'aquests podem el bloc (Selector_lector_de_llista1.Text).

Al que enganxarem el bloc (selector_de_llista1.Selecció)

I tornem a mirar si funciona el nou canvi que hem fet a la programació.

Modifiquem aquests últims blocs que hem posat i li afegim una condició que amagarà totes les propietats dels focus si en el selector de llista s'ha triat l'opció "Cap"

I tornem a mirar si funciona el nou canvi que hem fet a la programació.

Ara toca saber com funciona cada tipus de focus

Per seguir endavant caldrà que mirem els fulls de característiques dels nostres focus per saber quins son els paràmetres que podem controlar de cada tipus de focus.

Per exemple a la pàgina 8 del manual del Focus: Colorband T3BT ILS trobem que té tres modes de funcionament (3Ch, 5Ch i 13Ch).

A més veiem, per cada un dels 3 modes de funcionament, quin canal realitza què funció.

Així doncs, el nostre programa airà de tenir en compte tots aquests paràmetres.

Al Dissenyador hem afegit 3 (Selectors de llista). Els hi hem canviat el nom perModeF1, ModeF2 i ModeF3.

A tots tres Selectors de llista a més els hi hem canviat el text per: "Mode funcionament"

També hem afegit 3 (C. vertical amb barra) i els he renombrat com: CVModeF3Ch1, CVModeF3Ch2 i CVModeF3Ch3

Aquí és apareixeran els controls quan triem el Mode 3Ch del focus Colorband T3BT ILS

Això ho haurem de repetir pel Focus 2 i pel Focus 3.

El mode 3CH és el més fàcil: Només es controla la intensitat que volem de color Vermell, Verd i Blau.

Per això hem afegit 3 (Disposicions horitzontals) dins de cada una hi hem afegit una (Etiqueta) i un (Control Lliscant).

A les Etiquetes només els hi hem canviat la propietat Text de cada una pels texts: "R:", "G:" i "B:".

I als Controls lliscants els hi hem canviat varies prpietats:

El (Color a l'esquerra): Pel color vermell, verd i blau.
El (Valor màxil) per 255.
El (Calor mínim) per 0.
La (Posició del cursor) per 125.

Abans de fer la programació dels blocs per enviar a la nostra placa ESP32 els valors de cada canal hem de programar la connexió Bluetooth.

Per fer-ho el primer de tot és afegir el component (Client Bluetooth) de la paleta de (Connectivitat) al nostre disseny.

Connexió Bluetooth

També hem afegit un altre (Selector de llista) a la part superior de la nostra pantalla.

Li hem canviat la propietat (Text) per: "Connecta't"

I l'hem renombrat com a: "SLBluetooth"

Aquí clicarà l'usuari quan vulgui connectar-se via Bluetooth a una placa ESP32.

Al nostre programa afegirem els blocs que faran la connexió via Bluetooth.

Aquest programa es pot millorar afegint senyals d'alerta si no es pot fer la connexió correctament.

Enviament d'informació via Bluetooth

I aquí programem l'enviament de la potència de cada color via Bluetooth a la placa ESP32.

L'enviament el fem de la següent manera:

Enviem 2 Bytes en format text:

1r Byte: Canal al que enviem la informació. Atenció Un univers DMX pot contenir fins a 512 canals. Però nosaltres estem enviant la informació en un Byte. Això vol dir que només podem fer servir els canals que van del 0 al 255 (2^8 = 256).

2n Byte: Un nombre del 0 al 255 que serà la potència d'il·luminació de cada color.

Shield DMX

Jumpers

El shield DMX es configurablem. Si seguim les instruccions que hi ha al manual no podem treballar amb el Wifi ni amb el Bluetooth. Per això hem de posar els jumpers tal i com es veu a la imatge.

Enable
DE: Treballa en mode controlador i no com a slave (esclau).
TX-uart iRX-uart: Envia la informació al DMX fent servir els pins D0 i D1 de la placa.

Això sí, hem de tenir en compte que quan enviem el programa des d'ArduinoBlocks a la placa ESP32 hem de desconnectar el jumper RX-uart. I tornar-lo a posar un cop el programa s'ha copil·lat i pujat a la placa correctament.