Fonaments Tecnològics per a l'Escenotècnia

Projecte final electrònica digital

Projecte taula de control d'il·luminació

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.

Modificació del disseny inicial

Fins ara hem fet el disseny i la programació sense fer servir cap eina avançada de programació.

Això provoca que el nostre programa no sigui gens eficient i la quantitat de components i blocs vagi augmentant de forma exponencial a mida que anem afegint nous models de focus DMX al nostre programa.

Aquí és on ens adonem que no és pràctic seguir per aquest camí i plantegem fer un canvi que reudirà de manera sustancial la quantitat de components i de blocs de la nostra app.

Per fer-ho farem servir l'eina de programació "Llistes".

Llistes

Les "Llistes" com el seu nom indica ens permet crear un llistat d'elements.

Aquests elements poden ser tot tipus de components com ara: Texts, Etiquetes, Lliscadors, ...

A més podem crear llistes de llistes. I llistes de llistes de llistes ... així indefinidament.

El nou disseny

En el nou disseny del nostre projecte reaprofitarem components.

Serà en el moment que l'usuari de l'app triï el mode de funcionament del focus (3Ch, 6 Ch, ...) que adaptarem aquests components a cada mode de funcionament. També amagarem els compoents que no ens facin falta.

Quins són aquests components:

Ch_1_F1: és un contenidor horitzontal dins el qual hi ha:
- Contenidor horitzontal amb la informació de quin canal és i el valor numèric del valor DMX que té (Aquest contenidor el fem servir només per temes de maquetació: Per alinear l'etiqueta a l'esquerra).
  - Et_1_F1: Etiqueta amb el nom del canal DMX que conté
- TB_1_F1: Quadre de text on podrem veure el valor DMX del canal. També podrem modificar aquest valor manualment.
CL_1_F1: Control Lliscant on l'usuari podrà modificar el valor del canal DMX.

Propietats dels components

I ara els blocs

Llistes

Comencem generant totes les llistes que farem servir.

A aquestes 4 llistes tenim els components de la primera columna (Focus 1) sobre els que realitzarem accions en la programació dels blocs:

Quadres de text
Contenidors horitzontals
Lliscadors
Etiquetes

Una llista amb els diferents models de focus dels que disposem.

I una altra llista amb els modes de funcionament de cada model de focus. Atneció!! Aquesta és una llista de llistes i ha de ser coherent i ordenada seguint el mateix ordre de la llista de focus.

Per saber quants modes de funcionament té cada model de fucus diferent hem de mirar la seva fulla de característiques:

fulls de característiques dels nostres focus

A la llista de configuració també és una llista de llistes. De fet és una llista de llista de llista de llista. També ha de seguir el mateix ordre de la llista de focus i a més ha de respectar l'ordre de la llista de modes de funcionament.

Con està dissenyada:

Si un focus té 3 modes de funcionament haurem de fer una llista amb 3 elements. Cada un d'aquests elements haurà de tenir una llista amb tants elements com canals tingui el mode de funcionament. I aquí dins és on crearem la nostra llista de configuració del canal:

Canal DMX que s'ha de sumar al canal inicial assignat al focus (Ho farem servir quan enviem la dada per bluetooth).
Text que ha de tenir el nom del canal DMX (Ho farem servir per l'etiqueta.
Color (El farem servir pel lliscador)
Valor màxim que pot tenir el canal DMX (Acostuma a ser 255)
Valor mínim que pot tenir el canal DMX (Acostuma a ser 0)

Per saber quins són aquestes dades que hem de posar a cada canal hem de mirar els fulls de característiques dels nostres focus

I els esdeveniments de programació

Per afegir més focus per poder-los controlar simultaneament

Al Disenyador compiem i enganxem el CV_F1 per tal de tenir el CV_F2, CV_F3 i CV_F4

I ara modifiquem els blocs

Haurem de copiar i enganxar els següents blocs. A més els hi haurem d'adaptar les variables, llistes, components, ... per tal de que facin referència al focus que ens interessa (2, 3 o 4)

1.- Llistes de components: LlistaQuadresTextFx, LlistaContenidorsHFx, LlistaLliscadorsFx i LlistaEtiquetesFx

Esdeveniments: SelectorLlistaFocusX.Després de Seleccionar ModusFx.Abans de Seleccionar ModusF1.Després de Seleccionar

2.- Quan qualsevol quadre de text.Focus perdut: Hem d'afegir les preguntes pels focus 2, 3 i 4.

3.- Quan qualsevol control lliscant.Posició canviada: Hem d'afegir les preguntes pels focus 2, 3 i 4.

4.- Hem de crear els procediments: VisualitzaComponentsFx pels focus 2, 3 i 4.

A més també caldrà que afegim els blocs a l'esdeveniment Scree1.Inicialitza:

Així queden els blocs del projecte per 4 focus:

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.