poc-stencil-rng-images v0.0.1

Génération de nombres aléatoire & Traitement d'image

Ce projet est un exemple d'application Stencil comportant deux fonctionnalités :

• Génération de nombres aléatoires entre 0 et 100, traitement de ce nombre et affichage du résultat;
• Traitement d'image par alpha blending et affichage du résultat.

Un composant generic-parent permet de choisir entre les deux fonctionnalités au démarrage du projet.

Génération de nombre aléatoire

Cette fonctionnalité est découpée en trois composants :

• random-number-generator: un composant qui génère un nombre aléatoire entre 0 et 100. Il accepte comme prop optionnelle un portOut de type MessagePort appartenant à une MessageChannel mc1 instanciée dans le composant parent.

• number-treatment: un composant qui reçoit le nombre généré par le random-number-generator et le multiplie par un nombre passé en prop. Il accepte comme prop optionnelle deux MessagePort, un pour recevoir le nombre envoyé par le générateur, nommé portIn et appartenant à la MessageChannel mc1, et un pour envoyer le nombre traité, nommé portOut et appartenant à la MessageChannel mc2.

• number-display: un composant qui reçoit le nombre généré par le number-treatment et l'affiche. Il accepte comme prop optionnelle un portIn de type MessagePort appartenant à la MessageChannel mc2.

Traitement d'image

Cette fonctionnalité est découpée en trois composants :

• images-dropdown : un composant qui affiche un menu déroulant permettant de choisir un format d'image entre 200x200 et 300x300. Une image correspondante sera alors récupérée depuis le site picsum. Il accepte comme prop optionnelle un portOut de type MessagePort appartenant à la MessageChannel mc1 instanciée dans le composant parent.

• image-treatment : un composant qui reçoit l'url de l'image récupérée par le images-dropdown. Il renvoie cette url ainsi qu'une valeur d'opacité qu'il fait varier entre 0 et 1 toutes les 500ms. Il accepte comme prop optionnelle deux MessagePort, un pour recevoir l'url envoyée par le images-dropdown, nommé portIn et appartenant à la MessageChannel mc1, et un pour envoyer l'url et la valeur d'opacité, nommé portOut et appartenant à la MessageChannel mc2.

• image-display : un composant qui reçoit l'url et la valeur d'opacité envoyées par le image-treatment et affiche l'image en lui appliquant la valeur d'opacité reçue. Il accepte comme prop optionnelle un portIn de type MessagePort appartenant à la MessageChannel mc2.

Mise en route

Pour lancer le projet localement, exécutez les commandes suivantes :

npm install
npm start

Le projet se lancera sur le port 3333.

Pour lancer le projet via Docker, exécutez les commandes suivantes :

docker build . -t <your_username>/poc-stencil-rng-and-images
docker run -p <port_of_your_choice>:3333 -d <your_username>/poc-stencil-rng-and-images