J'ai commencé à développer les pxlBlcks parce que je cherchais un moyen de rester informé des événements dans le SmartHome. Il existe maintenant deux options intégrées au plugin pxlBlck pour ce faire.
En plus de pouvoir afficher des animations, il est également possible de charger des icônes prédéfinies sur le pxlBlck et de les y afficher.
Ces icônes sont préalablement créées à l'aide d'un programme d'édition d'images et transférées sur le pxlBlck. Vous pouvez alors y apparaître en tapant la bonne commande.
L'article suivant décrit comment créer ces icônes, les transférer sur le pxlBlck puis les y afficher.
Consignes de sécurité
Je sais que les notes suivantes sont toujours un peu ennuyeuses et semblent inutiles. Malheureusement, de nombreuses personnes qui savaient "mieux" ont perdu des yeux, des doigts ou d'autres choses à cause d'une négligence ou se sont blessées. La perte de données est presque négligeable en comparaison, mais même celles-ci peuvent être vraiment ennuyeuses. Par conséquent, veuillez prendre cinq minutes pour lire les consignes de sécurité. Parce que même le projet le plus cool ne vaut pas une blessure ou d'autres problèmes.
https://www.nerdiy.de/sicherheitshinweise/
Liens d'affiliation/publicitaires
Les liens vers des boutiques en ligne répertoriés ici sont des liens dits d'affiliation. Si vous cliquez sur un tel lien d'affiliation et effectuez un achat via ce lien, Nerdiy.de recevra une commission de la boutique en ligne ou du fournisseur concerné. Le prix ne change pas pour vous. Si vous effectuez vos achats via ces liens, vous aidez Nerdiy.de à pouvoir proposer d'autres projets utiles à l'avenir. 🙂
Conditions préalables
Avant de pouvoir afficher des icônes sur votre pxlBlck, vous devez déjà l'avoir configuré et programmé. Vous trouverez des informations sur les différentes plates-formes matérielles dans la catégorie suivante
Des informations sur la programmation et la configuration du pxlBlck sont disponibles dans les articles suivants
- pxlBlck - Installer et configurer le plugin pxlBlck
- pxlBlck - Commandes pour configurer le pxlBlck
- pxlBlck - Configurer les cadrans d'horloge et les économiseurs d'écran
Outil requis :
- Non -
Matériel nécessairel :
- Non -
Télécharger GIMP
En principe, vous n'avez besoin que d'un programme d'édition d'images avec lequel vous pouvez créer ou éditer des fichiers .ppm.
L'un de ces programmes est "GIMP". C'est gratuit et vous pouvez le télécharger à partir du lien ci-dessous.
Installer GIMP
Après avoir téléchargé GIMP, vous devez d'abord installer le programme.
Ouvrez le fichier téléchargé et...
... installe le programme.
Vous trouverez également des informations sur l'installation d'un programme dans l'article Installer des programmes - un exemple
Créer un nouveau fichier
Après l'installation, vous pouvez commencer maintenant. Pour ce faire, lancez GIMP.
GIMP démarre par défaut avec une fenêtre vide. Puisque vous voulez maintenant créer une icône, vous devez d'abord créer un nouveau fichier.
Pour cela, cliquez sur "Fichier" et "Nouveau".
Une fenêtre s'ouvrira alors dans laquelle vous devez maintenant ouvrir les "Options avancées" en cliquant sur le plus dans la zone marquée en rouge.
Définissez maintenant toutes les options dans la fenêtre de dialogue comme indiqué dans l'image de gauche.
La "taille de l'image" dans la zone supérieure marquée en rouge est spéciale. Parce que cela doit correspondre à votre pxlBlck.
Par exemple, voulez-vous une icône pour le pxlBlck_8x8 design, vous devez également entrer un 8 pour "Largeur" et "Hauteur".
La dimension de l'icône doit donc toujours correspondre à la dimension de la matrice LED utilisée.
Zoom sur la vue du fichier
Étant donné que le fichier est très petit, vous devez agrandir la zone de l'image.
Pour cela, cliquez sur le symbole loupe et activez le mode loupe.
Ensuite, pour agrandir l'image, il vous suffit de faire glisser un carré sur la zone que vous souhaitez agrandir.
Modifier l'image et dessiner le contenu
Vous pouvez enfin commencer à modifier l'icône.
Bascule en mode stylet pour modifier l'icône. Pour ce faire, cliquez sur le symbole du pinceau dans la barre d'outils et maintenez le bouton de la souris enfoncé.
Cela fera apparaître un autre menu dans lequel vous pourrez ensuite sélectionner l'icône du crayon.
Afin que vous puissiez éditer l'icône pixel par pixel, vous devez maintenant définir "l'épaisseur du stylo" sur un pixel.
Pour ce faire, déplacez le curseur dans la zone marquée en rouge complètement vers la gauche ou réglez-le manuellement sur un.
Maintenant, vous pouvez déjà modifier l'image.
Pour changer la couleur du stylo, vous pouvez utiliser le "sélecteur de couleurs" pour définir une couleur différente.
Pour cela, cliquez sur le carré de couleur (ici noir) dans la zone marquée en rouge.
Cela ouvre le "Color Picker" affiché à gauche.
Sélectionnez la couleur que vous souhaitez configurer pour l'icône et confirmez-la en cliquant sur "OK".
Vous pouvez maintenant concevoir l'icône selon vos souhaits.
Dans l'exemple de gauche, j'ai simplement peint une barre colorée.
Notez que les carrés noirs ne brillent pas sur le pxlBlck. la zone blanche, d'autre part, brille de couleur blanche.
Exporter l'icône au format correct
Dès que vous avez fini d'éditer votre icône, vous devez maintenant l'exporter avant de pouvoir la copier dans le pxlBlck.
Pour cela, cliquez à nouveau sur « Fichier » puis sur « Exporter sous… ».
Dans la fenêtre de dialogue qui s'ouvre maintenant, vous devez d'abord vérifier que l'option (en bas à gauche) "Sélectionner le type de fichier (par extension)" est activée.
Ensuite, vous choisissez un emplacement de stockage et entrez un nom de votre choix comme nom de fichier. Cependant, il est important que l'extension de fichier .ppm lit.
Dès que tout est correctement configuré, vous pouvez fermer la boîte de dialogue en cliquant sur "OK".
Dans la petite fenêtre de dialogue qui s'ouvre, confirmez que vous souhaitez enregistrer le fichier au format "ASCII".
Votre fichier d'icône devrait maintenant avoir été créé à l'emplacement que vous avez sélectionné.
N'oubliez pas cet emplacement, car à partir de là, le fichier d'icône sera copié sur votre pxlBlck dans le paragraphe suivant.
Copier les icônes dans le pxlBlock
Le fichier d'icône créé doit maintenant être transféré sur votre pxlBlck.
Pour ce faire, revenez au menu Web de votre pxlBlck. Pour ce faire, vous devez saisir l'adresse IP du pxlBlck dans la barre d'adresse de votre navigateur.
Passez ensuite à l'onglet "Outils" en cliquant sur le bouton marqué en rouge.
Dans l'onglet "Outils", faites défiler vers le bas de la page de configuration.
Cliquez sur le bouton "Navigateur de fichiers" ici.
Dans cette fenêtre, vous pouvez voir tous les fichiers déjà stockés dans la mémoire du pxlBlck ou ESP8266.
Afin de charger le nouveau fichier icône dans cette mémoire, vous devez d'abord cliquer sur le bouton "Télécharger".
Dans la vue suivante, cliquez sur le bouton marqué en rouge "Parcourir"...
...et sélectionnez votre fichier précédemment créé.
Confirmez ensuite en cliquant sur « Ouvrir ».
Vous êtes maintenant dans la fenêtre précédente.
Pour que le téléchargement du fichier sélectionné démarre, vous devez maintenant cliquer sur le bouton "Télécharger".
Selon la taille du fichier d'icône, le téléchargement peut prendre un certain temps.
Dès que le processus est terminé, vous verrez le message de réussite surligné en rouge.
Pour vérifier que le fichier a été téléchargé avec succès, vous pouvez maintenant revenir à l'onglet "Outils" et...
... à partir de là, passez au "Navigateur de fichiers".
Le fichier téléchargé précédemment devrait maintenant y être répertorié.
Commande pour afficher les icônes sur le pxlBlck
Vous avez maintenant transféré le fichier icône sur votre pxlBlck. Cependant, l'icône ne s'affiche que si vous envoyez une commande au pxlBlck. Ci-dessous dans ce paragraphe (Nom : Exemples), vous trouverez quelques exemples d'affichage de l'icône d'exemple créée précédemment.
Comment envoyer des commandes à un appareil ESPEasy est dans l'article ESPEasy - Exécutez des commandes et des actions via HTTP, MQTT, UDP et directement décrites.
nom de la commande
pbicon
aperçu des commandes
pbicon,[animation entrante 0-255], [animation sortante 0-255], [en retard 0-255], [afficher le retard 0-255], [délai de sortie 0-255], [luminosité 0-255], [texte courant 0-255],[nom de l'icône],[répétition 0-10],
Paramètre Description
| le nom du paramètre | Description | Plage de valeurs autorisée |
|---|---|---|
| animation entrante | L'identifiant de l'animation d'entrée | 1-3 |
| animation sortante | L'ID de l'animation de départ | 1-3 |
| en retard | Ce paramètre définit la durée utilisée pour l'animation d'entrée. Il est spécifié en millisecondes. | 0-2000 |
| afficher le retard | Avec ce paramètre, vous pouvez définir la durée d'affichage de l'icône et, si nécessaire, du texte. Il est spécifié en millisecondes. | 0-10000 |
| retard de sortie | Ce paramètre définit la durée utilisée pour l'animation de sortie. Il est spécifié en millisecondes. | 0-2000 |
| luminosité | Avec ce paramètre, vous pouvez définir la luminosité maximale de votre icône et de votre texte. Veuillez considérer qu'une luminosité élevée nécessite également plus de puissance et que la matrice LED connectée doit être conçue en conséquence. | 0-100 |
| texte courant | Vous pouvez utiliser ce paramètre pour spécifier un texte qui s'affiche avec l'icône. Si aucun texte n'est souhaité, vous pouvez simplement laisser ce paramètre vide. | texte |
| nom de l'icône | Ce paramètre correspond au nom de fichier de l'icône uploadé dans le SPIFFS du pxlBlck | texte |
| répétition | Vous pouvez utiliser ce paramètre pour répéter l'affichage de l'icône. Par exemple, des icônes clignotantes peuvent également être implémentées. | 0-10 |
Les tableaux suivants contiennent un aperçu des animations disponibles pour afficher et masquer les icônes.
Animations en fondu
| Nom de famille | Description | IDENTIFIANT |
|---|---|---|
| fondu enchaîné | L'icône et, le cas échéant, le texte défilant s'affichent avec le temps de "délai d'affichage" réglé. | 1 |
| Instantané | L'icône et tout texte spécifié s'affichent immédiatement. | 2 |
| Volez depuis la droite | L'icône et le texte défilant éventuellement spécifiés sont poussés dans la zone d'affichage depuis le côté droit. Le temps "show delay" définit la durée de ce processus. | 3 |
Animations en fondu
| Nom de famille | Description | IDENTIFIANT |
|---|---|---|
| disparaître | L'icône et, le cas échéant, le texte défilant sont masqués avec le temps de "délai de sortie" défini. | 1 |
| arrêt instantané | L'icône et tout texte spécifié sont immédiatement masqués. | 2 |
| Volez vers la gauche | L'icône et le texte défilant éventuellement spécifiés sont poussés hors de la zone d'affichage vers la gauche. Le temps de "retard de sortie" définit la durée de ce processus. | 3 |
exemples
Il existe différentes façons d'exécuter des commandes sur votre pxlBlck. L'une de ces méthodes fonctionne via le menu Web.
Pour ce faire, passez à l'onglet "Outils".
Là, vous pouvez entrer la commande dans le champ de texte de gauche marqué en rouge.
En cliquant sur "Soumettre", la commande est envoyée au pxlBlck et exécutée.
Lorsque l'icône est trouvée, le message en surbrillance s'affiche.
L'icône s'affiche directement avec les paramètres définis sur l'écran pxlBlck.
Si vous avez spécifié un nom de fichier incorrect pour le fichier d'icône et que le nom de fichier est introuvable, le message d'erreur marqué s'affichera.
De plus, toute la matrice LED du pxlBlck clignote cinq fois en rouge.
L'affichage de l'icône précédemment créée est décrit à titre d'exemple (y compris les commandes utilisées) dans le paragraphe suivant.
Info:
- Animation d'entrée : 1
- Animation de sortie : 1
- Délai d'entrée : 1 000 ms
- Temps d'affichage : 10 000 ms
- Délai de sortie : 1 000 ms
- Luminosité maximale : 50%
- Texte : – (aucun texte n'est affiché)
- Nom de l'icône : Test.ppm
- Répétitions : aucune
Commande:
pbicon,1,1,1000,10000,1000,50,-,Test.ppm,
Info:
- Animation d'entrée : 1
- Animation de sortie : 1
- Délai d'entrée : 100 ms
- Temps d'affichage : 100 ms
- Délai de sortie : 100 ms
- Luminosité maximale : 50%
- Texte : – (aucun texte n'est affiché)
- Nom de l'icône : Test.ppm
- Représentants : 3
Commande:
pbicon,1,1,100,100,100,50,-,Test.ppm,3,
Info:
- Animation d'entrée : 3
- Animation de sortie : 3
- Délai d'entrée : 100 ms
- Temps d'affichage : 1 000 ms
- Délai de sortie : 100 ms
- Luminosité maximale : 50%
- Texte : – (aucun texte n'est affiché)
- Nom de l'icône : Test.ppm
- Représentants : 2
Commande:
pbicon,3,3,100,1000,100,50,-,Test.ppm,2,
Info:
- Animation d'entrée : 3
- Animation de sortie : 3
- Délai d'entrée : 1 000 ms
- Temps d'affichage : 1 000 ms
- Délai de sortie : 500 ms
- Luminosité maximale : 50%
- Texte: Message d'essai
- Nom de l'icône : Test.ppm
- Répétitions : aucune
Commande:
pbicon,3,3,1000,1000,500,50,TestMessage,Test.ppm,
Info:
- Animation d'entrée : 2
- Animation de sortie : 3
- Délai d'entrée : 1 000 ms
- Temps d'affichage : 1 000 ms
- Délai de sortie : 500 ms
- Luminosité maximale : 50%
- Texte: Message d'essai
- Nom de l'icône : Test.ppm
- Répétitions : aucune
Commande:
pbicon,2,3,1000,1000,500,50,TestMessage,Test.ppm,
Info:
- Animation d'entrée : 1
- Animation de sortie : 3
- Délai d'entrée : 2 000 ms
- Temps d'affichage : 1 000 ms
- Délai de sortie : 500 ms
- Luminosité maximale : 50%
- Texte: Message d'essai
- Nom de l'icône : Test.ppm
- Répétitions : aucune
Commande:
pbicon,1,3,2000,1000,500,50,TestMessage,Test.ppm,
Info:
- Animation d'entrée : 3
- Animation de sortie : 1
- Délai d'entrée : 1 000 ms
- Temps d'affichage : 1 000 ms
- Délai de sortie : 500 ms
- Luminosité maximale : 50%
- Texte : – (aucun texte n'est affiché)
- Nom de l'icône : Test.ppm
- Répétitions : aucune
Commande:
pbicon,3,1,1000,1000,500,50,-,Test.ppm,
Télécharger les icônes préparées
Vous pouvez également trouver l'icône d'exemple créée ici et quelques autres icônes préparées sous le lien suivant dans le Nerdiy Git : https://github.com/Nerdiyde/pxlBlck/tree/main/icons
Amusez-vous avec le projet
J'espère que tout a fonctionné comme décrit. Si ce n'est pas le cas ou si vous avez des questions ou des suggestions, faites-le moi savoir dans les commentaires. Je les ajouterai à l'article si nécessaire.
Les idées de nouveaux projets sont toujours les bienvenues. 🙂
PS Beaucoup de ces projets - en particulier les projets matériels - coûtent beaucoup de temps et d'argent. Bien sûr, je le fais parce que j'aime ça, mais si vous pensez que c'est cool que je partage l'information avec vous, je serais heureux d'un petit don au fonds du café. 🙂
Français 
Deutsch 
English 
Español 
Nederlands
Bonjour! J'ai encore une question. Je lance la date toutes les 10 secondes en ce moment. Maintenant, je voulais afficher la température ou la date (%sysday_0%.%sysmonth_0%.%sysyears% ) comme un "arrêt sur image". D'une manière ou d'une autre, je ne peux pas l'obtenir. Pouvez-vous peut-être montrer un petit exemple?
Salut Stefan,
donc vous voulez afficher un texte en permanence, n'est-ce pas ?
Cela ne peut pas être fait si facilement. Mais je vais l'écrire et j'ajouterai cette fonction bientôt. 🙂
Cordialement
Fabien