Build: un telecomando personalizzato con intelligenza artificiale

PLAYDECK ti offre già due comodi telecomandi: Bitfocus Companion se disponi di un Deck Stream o di un ATEM, e il sistema integrato Web Remote se ti serve solo un browser connesso alla stessa rete Wi-Fi.

"Custom Remote" è la terza opzione. Si incolla un file HTML, PLAYDECK lo riproduce su questo PC e il tuo telefono lo apre tramite un codice QR. ChatGPT, Gemini o Claude si limitano a riscrivere quel file. PLAYDECK non comunica mai con l'IA e non devi mai installare un chatbot all'interno del sistema di riproduzione.

Questo strumento è pensato per quei casi in cui Web Remote non è adatto: un responsabile di sala a cui servono solo tre pulsanti giganti, un produttore che vuole che il tempo rimanente sia grande come un camion, uno spettacolo che ha bisogno di un comando in più che l’interfaccia utente predefinita non mostra. Descrivi il compito in parole semplici. L’IA restituisce il codice HTML. Tu lo incolli.

Non modificare i file presenti nella cartella del programma PLAYDECK. Gli aggiornamenti li sovrascrivono. “Custom Remote” è il fork che sopravvive agli aggiornamenti.

In questo articolo:
Cosa ottieni
Usa l'esempio (inizia da qui)
Lasciamo che sia l'intelligenza artificiale a cambiarlo
Comandi e stato in tempo reale
Utilizzo di Web Remote come base
Se qualcosa non funziona


Cosa ottieni

Impostazioni → Telecomando → Telecomando personalizzato.

PLAYDECK memorizza il tuo codice HTML e lo rende disponibile a un indirizzo fisso:

http://YOUR-PC:11411/custom

L'URL non cambia quando si incolla un nuovo layout. Il codice QR accanto alla casella contiene lo stesso indirizzo. Il telefono e il PC PLAYDECK devono essere connessi alla stessa rete Wi-Fi. Se la pagina rimane vuota, abilitare la porta TCP 11411 nel firewall (la stessa porta già utilizzata da Companion e Web Remote).

C’è sempre e solo uno Telecomando personalizzato. Una scatola, un file, un codice QR. È fatto apposta. Non stai creando un servizio di hosting per siti web. Stai realizzando il telecomando per questo spettacolo.

Il Web Remote integrato rimane su / (la radice della porta 11411). Companion rimane Companion. Overlays e Director View mantengono i propri modelli. Custom Remote non li sostituisce.


Usa l'esempio (inizia da qui)

Se non l’hai mai fatto prima, non partire da una pagina vuota e non utilizzare Web Remote. Parti dall’esempio. Si tratta di una tastiera pensata innanzitutto per l’uso con il telefono: due canali, tasti di trasporto grandi, “clip successiva” / “blocco successivo” nelle stesse modalità utilizzate da Companion (Cue, Play, Cue+Play, Fade). Mostra il nome del clip, trascorso, rimanente, e blocco rimanente. I clip e i blocchi infiniti sono contrassegnati con il simbolo ∞ (a volte  più la durata del loop). È lo stesso testo che PLAYDECK mostra nella barra di avanzamento. Non inventiamo un conto alla rovescia fittizio.

  1. Impostazioni → Telecomando → Telecomando personalizzato.
  2. Clicca Carica campione.
  3. Clicca Salva e apri telecomando personalizzato.
  4. Scansiona il codice QR con la fotocamera del tuo telefono oppure apri l'indirizzo nel browser del telefono.

Dovresti poter selezionare un punto specifico, riprodurre, mettere in pausa, interrompere la riproduzione, tornare all’inizio della playlist e scorrere clip per clip o blocco per blocco, senza dover prima consultare un elenco di comandi.

Quel “Sample” è anche il file che si fornisce all’IA. Contiene già l’unico codice tecnico che conta: un tag script e i comandi PLAYDECK scritti sui pulsanti.


Lasciamo che sia l'intelligenza artificiale a cambiarlo

Copia tutto il contenuto della casella HTML. Incollalo su ChatGPT (o Gemini / Claude). Spiega a cosa serve il comando, non quale libreria JavaScript utilizzare.

Inserisci questa frase in ogni prompt:

Resta in linea <script src="/playdeck-remote.js"></script>. Non aprire un WebSocket personale. Non modificare il file playdeck-remote.js. data-cmd è un comando PLAYDECK presente nell'elenco dei comandi. data-bind mostra lo stato in tempo reale.

A questo punto aggiungi il lavoro, ad esempio:

Responsabile di reparto, solo Canale 1

Configuralo come iPad per il responsabile di sala. Solo canale 1. Tempo rimanente ben visibile. Tre pulsanti: PLAY, PAUSA, RIPRODUCI CLIP SUCCESSIVA. Sfondo scuro, senza bordi dorati, aree di selezione di grandi dimensioni.

Rinnovare il design, mantenendo i pulsanti

Mantenere tutti i pulsanti e i comandi esistenti. Modificare solo i colori, la spaziatura e il carattere in modo che assomigli a un pannello di trasmissione. Il canale in riproduzione deve rimanere ben visibile.

Aggiungi un'azione in più

Lascia il campione così com'è. Aggiungi un pulsante sotto il Canale 1 che invii startoverlay|1|1. Assegnagli il nome OVERLAY 1.

Incolla il codice HTML restituito dall'IA nella casella → Salva e Apri → ricarica il telefono. Se l'IA ha eliminato il tag script, PLAYDECK lo reinserisce al momento del salvataggio. Se l'IA ha inventato nomi di pulsanti come dall'inizio oppure successivo anziché eseguire comandi effettivi, quei tasti non avranno alcun effetto — riattiva il comando “Elenco comandi” data-cmd.

È possibile incollare il testo nella casella con Ctrl+V. Non è presente un pulsante "Incolla" separato. Selezionare "Carica esempio" o "Carica da Web" per sostituire il contenuto della casella e salvare. Digitare nella casella senza prima salvare e aprire il file non aggiorna il telefono.


Comandi e stato in tempo reale

Lo script di supporto /playdeck-remote.js funziona solo con WebSocket. Non copiare quel file sull'IA. Non modificarlo. Il file HTML è l'unico file della conversazione.

Un pulsante è un comando PLAYDECK, della stessa famiglia di quelli utilizzati dal comando personalizzato di Companion:





Il testo in tempo reale è data-bind inoltre canale dati:

<div data-bind="channelName" data-channel="1"></div>
<div data-bind="clipName" data-channel="1"></div>
<div data-bind="elapsed" data-channel="1"></div>
<div data-bind="remain" data-channel="1"></div>
<div data-bind="blockRemain" data-channel="1"></div>
<div data-bind="blockName" data-channel="1"></div>


"Trascorso" e "Rimanente" indicano la durata della clip. "Rimanente del blocco" indica il blocco. "Infinito" mostra il simbolo ∞.

L'elenco completo dei comandi si trova in PLAYDECK: Menu principale → Documentazione. Se è possibile inviarlo da Companion come comando personalizzato, è possibile inserirlo in data-cmd.

Se una pagina richiede una logica che gli attributi non sono in grado di fornire (un contatore di visualizzazioni, una tabella riassuntiva), quel codice JavaScript aggiuntivo va inserito nello stesso file HTML. Utilizza PlaydeckRemote.send('play|1') e PlaydeckRemote.onStatus(...). È ancora un unico file, non c'è ancora un secondo WebSocket.


Utilizzo di Web Remote come base

Sample è la soluzione ideale per l'intelligenza artificiale: pochi pulsanti, poco codice.

A volte ti viene proprio voglia di Il telecomando web di Nick — l’elenco dei clip, le barre di avanzamento, le schede dei canali — ma di colore arancione invece che grigio, oppure un orologio più grande, oppure schede nascoste. Poi:

  1. Telecomando personalizzato → Carica Web Remote → Salva e Apri.
  2. Ora disponi di una copia del Web Remote integrato in /personalizzato. Il Web Remote originale all'indirizzo / rimane invariato.
  3. Copia quel codice HTML nell'IA seguendo una regola rigorosa:

Questa pagina è PLAYDECK Web Remote. Modifica solo i CSS e le etichette. Non riscrivere il codice JavaScript che genera la playlist, le barre di avanzamento o le schede dei canali. Mantieni <script src="/playdeck-remote.js"></script>.

Se l'IA “semplifica” quel codice JavaScript, l'elenco dei clip di solito smette di funzionare. Ricarica Web Remote e riprova con una richiesta più semplice (solo i colori).

Non dire mai alle persone di modificare qualcosa webremote.html sul disco e conservare una copia di backup per la prossima reinstallazione. È proprio a questo che serve Custom Remote.


Se qualcosa non funziona

Pagina vuota del telefono. Stessa rete Wi-Fi del PC PLAYDECK? La porta TCP 11411 è abilitata? Prova prima a salvare e aprire il file sul PC. L'indirizzo è http://IP:11411/custom — né https, né un’altra porta.

I pulsanti non funzionano. Il tag script deve rimanere. data-cmd deve essere un comando vero e proprio (riproduci|1, non riproduci). Ricaricare dopo aver salvato e aperto.

Tempi bloccati o elenco non aggiornato. Aggiorna la pagina. Se si tratta di una copia tramite Web Remote, attendere qualche secondo: quella pagina aggiorna i dati della playlist a intervalli brevi.

∞ al posto di un orologio. Il clip o il blocco ha una durata infinita (live, loop, clock). PLAYDECK mostra lo stesso.

Volevo modificare il Web Remote standard. Hai fatto così: "Carica Web Remote" è quella pagina, fornita come "Custom Remote". Lascia / per tutti coloro che desiderano ancora l'interfaccia utente predefinita.

Companion / Piattaforma Stream. Continua a utilizzare Companion per l'hardware. Custom Remote è un'applicazione HTML su smartphone o tablet e non sostituisce il modulo.