Ce document décrit l'extension Visual Studio Code utilisée pour le développement d'applications du système Mozaïk.
Installation de l'extension
Pour utiliser l'extension, il est nécessaire de télécharger Visual Studio Code ici:
Visual Studio CodeL'extension est téléchargeable ici:
Extension pour Ubuntu ≥ 16.04Extension pour Windows 10/11 64bitsExtension pour OSX ≥ 10.9Pour installer l'extension, allez sur la page Extensions de Visual Studio Code, puis cliquez sur Install from VSIX
depuis le menu.
Une fois l'extension installée, vous pouvez accéder aux différentes commandes par le raccourci View -> Command Palette... puis
en tapant le préfix commun Mozaik.
Utilisation du SDK
Nouvelle animation
Ouvrez un dossier vide (Ctrl+K Ctrl+O) puis lancez la commande Init a new HTML application. Cette commande copie les fichiers suivants:
app.json
{
"name" : "Application name",
"description" : "Application description",
"app" :
{
"type" : "change",
"id" : "Streaming with interpolation"
},
"com" :
{
"type" : "html5",
"page" : "index.html"
}
} index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Title</title>
<style>
body
{
background: white;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
</body>
</html>Le fichier app.json décrit l'animation. Les champs name et description sont obligatoires pour décrire l'animation. La section app décrit le programme embarqué déployé sur le système Tiles, si vous utilisez un système Line ou DMX cette section n'est pas utilisée. Ici Streaming with Interpolation est utilisé pour streamer une page HTML. La dernière section com décrit quel type de contenu sera diffusé. Le type html5 permet de faire du streaming HTML, et le champ file défini le fichier à diffuser.
Vous trouverez ici deux animations d'exemple:
LogoGradientDémarrer l'animation
Utilisez la commande Start pour démarrer l'animation. Le simulateur est automatiquement lancé si
ce n'est pas déjà fait, puis connecte Visual Studio Code au debugger de la page HTML. Vous pouvez aussi accéder
au debugger via la page http://127.0.0.1:9229 depuis le navigateur Chrome.
Pour ajouter ou supprimer des dalles, maintenez la touche Ctrl puis utilisez le clic gauche ou droit de votre souris. La topologie ainsi construite peut-être sauvegardée à tout moment via le menu File -> save topology. Le menu Tools -> Capture peut-être utilisé pour réaliser des captures de l'animation en cours.
Créer une animation
Les dimensions de page web sont calculées à partir du rectangle englobant de la topologie. Vous pouvez utiliser tous les outils web classiques pour réaliser une animation. Par exemple, en utilisant un div il est possible d'allumer en rouge une dalle LED:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
body
{
background: black;
}
div
{
background: red;
position: fixed;
top: 0;
left: 0;
width: 10px;
height: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Ou via un canvas, de dessiner des formes arbitraires:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
body
{
background: black;
margin: 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas')
const context = canvas.getContext('2d')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
context.strokeStyle = 'blue';
context.beginPath();
context.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, 0, 2 * Math.PI);
context.stroke();
</script>
</body>
</html>Il existe beaucoup d'outils s'adaptant parfaitement à ce contexte de développement, par exemple:
p5.jsanime.jsQuand vous êtes satisfait, vous pouvez à tout moment relancer l'animation avec la commande Start.
Fonctions du SDK
Le SDK met à disposition plusieurs fonctions javascript pour faciliter le développement d'animations. Ces fonctions sont accessibles via l'objet window.
window.topology()
Cette fonction permet d'accéder à la topologie, sous le format suivant:
topology.js
const top =
{
matrix:
[
[ 1, 1, 1, 1, 1 ],
[ 1, 1, 1, 1, 1 ],
[ 1, 1, 1, 1, 1 ],
[ 1, 1, 1, 0, 0 ],
[ 1, 1, 1, 1, 1 ]
],
width: 5,
height: 5
}Où Les 1 désignent des dalles et 0 l'absence de dalles. Cette fonction permet de réaliser des animations s'adaptant à la forme de la topologie.
window.Persistent()
Cette classe permet de stocker des fichiers de manière persistente, y compris lorsque l'animation est mise à jour. Cela peut-être utilisé pour par exemple sauvegarder des fichiers de configuration ou des images capturés via la webcam. A noter que l'API standard LocalStorage peut-être utilisée dans le même but pour des petites données, mais les données seront perdues si vous changez le nom du fichier HTML de votre animation. Voici comment utiliser cette API:
persistent.js
async function main()
{
const p = new window.Persistent()
// Enregistrer du texte
await p.putJSON('data.txt', 'Hello world')
// Enregistrer du JSON
await p.putJSON('config.json', { infos: 'my config' })
// Enregistrer des données binaires
await p.putBuffer('bin/data1.bin', new Uint8Array([0xAA, 0xBB, 0xCC]))
await p.putBuffer('bin/data2.bin', new Uint8Array([0x11, 0x22, 0x33]))
// Lire la liste des fichiers dans un dossier
const list = await p.list('bin')
// Lire du texte
const text = await p.getText('data.txt')
// Lire du JSON
const json = await p.getJSON('config.json')
// Lire des données binaires
const bin = await p.getBuffer('bin/data1.bin')
// Accéder au fichier via un URL
await fetch('persistent://bin/data1.bin')
}
main()Envoyer une animation sur une passerelle
Quand votre animation est finalisée, vous pouvez l'envoyer sur une passerelle pour la tester avec votre système Tiles / Line / DMX.
Pour se faire, vous devez d'abord récupérer une clé API sur votre passerelle. Pour cela, connectez vous sur l'interface
d'administration de votre passerelle avec la commande Open the gateway admin page.
Dans le menu Paramètres, cliquez sur le bouton Nouvelle clé API pour générer
une nouvelle clé.
Pour envoyer l'animation vers la passerelle, utilisez la commande Upload the app to a gateway. Entrez la clé API que vous avez généré, et l'animation sera envoyée sur la passerelle. Elle sera ensuite disponible comme les autres animations sur la page d'accueil de l'administration.