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.
Eines dieser Programme ist “GIMP”. Dies ist kostenlos und Ihr könnt es unter folgendem Link herunterladen.
Installer GIMP
Nach dem Download von “GIMP” müsst Ihr das Programm zunächst installieren.
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.
Klickt dazu auf “File” und und “New”.
Daraufhin öffnet sich ein Fenster indem Ihr nun noch die “Advanced Options” öffnen müsst indem Ihr in dem rot markierten Bereich auf das Plus klickt.
Définissez maintenant toutes les options dans la fenêtre de dialogue comme indiqué dans l'image de gauche.
Besonders ist dabei die “Image size” im oberen rot markierten Bereich. Denn diese muss zu Eurem pxlBlck passen.
Par exemple, voulez-vous une icône pour le pxlBlck_8x8 designen so müsst Ihr hier auch Für “Width” und “Height” jeweils eine 8 angeben.
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.
Damit Ihr das Icon nun auch Pixel für Pixel bearbeiten könnt müsst Ihr nun noch die “Stift-Dicke” auf ein Pixel einstellen.
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.
Um die Stiftfarbe zu wechseln könnt Ihr mithilfe des “Color-Pickers” eine andere Farbe einstellen.
Pour cela, cliquez sur le carré de couleur (ici noir) dans la zone marquée en rouge.
Dadurch öffnet sich der links dargestellte “Color-Picker”.
Wählt dort die Farbe die Ihr für das Icon konfigurieren wollt und bestätigt dies mit einem Klick auf “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.
Klickt dazu wieder auf “File” und auf “Export As…”.
In dem sich nun öffnenden Dialogfenster müsst Ihr als erstes Prüfen, dass die Option (unten links) “Select File Type (By Extension)” aktiviert ist.
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.
Sobald alles korrekt konfiguriert ist könnt Ihr die Dialogbox mit einem Klick auf “OK” schließen.
In dem sich öffnenden kleinen Dialogfenster bestätigt Ihr, dass Ihr die Datei im “ASCII”-Format speichern wollt.
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.
Wechselt dann in den Tab “Tools” indem Ihr auf den rot markierten Button klickt.
Scrollt in dem “Tools”-Tab bis zum unteren Ende der Konfigurationsseite.
Klickt dort auf den Button “File browser”.
Dans cette fenêtre, vous pouvez voir tous les fichiers déjà stockés dans la mémoire du pxlBlck ou ESP8266.
Um nun die neue Icon-Datei in diesen Speicher zu laden müsst Ihr zunächst auf den “Upload”-Button klicken.
In der nächsten Ansicht klickt Ihr auf den rot markierten “Durchsuchen”-Button…
...et sélectionnez votre fichier précédemment créé.
Bestätigt dies dann durch einen Klick auf “Öffnen”.
Vous êtes maintenant dans la fenêtre précédente.
Damit der Upload der ausgewählten Datei startet müsst Ihr nun auf den Button “Upload” klicken.
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.
Um zu Überprüfen, dass die Datei erfolgreich hochgeladen wurde, könnt Ihr nun nochmal zum “Tools”-Tab wechseln und …
… von dort aus in den “File browser” wechseln.
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é | Das Icon und ggf. der Lauftext werden mit der eingestellten “show delay”-Zeit eingeblendet. | 1 |
| Instantané | L'icône et tout texte spécifié s'affichent immédiatement. | 2 |
| Volez depuis la droite | Das Icon und der ggf. festgelegte Lauftext werden von der rechten Seite in den Display-Bereich eingeschoben. Dabei definiert die “show delay”-Zeit wie lang dieser Vorgang dauert. | 3 |
Animations en fondu
| Nom de famille | Description | IDENTIFIANT |
|---|---|---|
| disparaître | Das Icon und ggf. der Lauftext werden mit der eingestellten “out delay”-Zeit ausgeblendet. | 1 |
| arrêt instantané | L'icône et tout texte spécifié sont immédiatement masqués. | 2 |
| Volez vers la gauche | Das Icon und der ggf. festgelegte Lauftext werden zur Linken Seite aus dem Display-Bereich geschoben. Dabei definiert die “out delay”-Zeit wie lang dieser Vorgang dauert. | 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, allez dans l'onglet "Outils".
Là, vous pouvez entrer la commande dans le champ de texte de gauche marqué en rouge.
Durch einen klick auf “Submit” wird der Befehl an den pxlBlck gesendet und ausgeführt.
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
Hallo! Ich habe mal eine weitere Frage. Ich lasse das Datum im Moment alle 10 Sekunden durchlaufen. Jetzt wollte ich die Temperatur oder eben auch das Datum (%sysday_0%.%sysmonth_0%.%sysyears% ) als “Standbild” anzeigen lassen. Irgendwie bekomme ich es nicht hin. Kannst du dazu vielleicht mal eine kleines Beispiel zeigen?
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