{"id":13964,"date":"2020-12-12T17:08:43","date_gmt":"2020-12-12T16:08:43","guid":{"rendered":"https:\/\/nerdiy.de\/?p=13964"},"modified":"2020-12-12T18:36:51","modified_gmt":"2020-12-12T17:36:51","slug":"howto-configure-and-display-pxlblck-animations","status":"publish","type":"post","link":"https:\/\/nerdiy.de\/en\/howto-configure-and-display-pxlblck-animations\/","title":{"rendered":"HowTo: pxlBlck \u2013 Configure and display animations"},"content":{"rendered":"<p>You can use the pxlBlck to be informed about events in various ways. One of these options is to display previously set icons.<\/p>\n\n\n\n<p>Unfortunately, this option only works on LED matrices with a height greater than one, i.e. not on the pxlBlcks which \"only\" use an LED strip or a 1\u00d760 LED matrix. <\/p>\n\n\n\n<p>Therefore, in addition to the option of displaying icons, there is also the option of displaying animations. These animations work on all LED matrices supported by the pxlBlck plug-in.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Animation basics<\/h2>\n\n\n\n<p>Animations can only be displayed using the correct command. This means that they are only executed on an event-related basis. <\/p>\n\n\n\n<p>For example, you can trigger an animation when a certain message is sent to the pxlBlck via MQTT, a connected sensor has assumed a certain state, but also, for example, when the pxlBlck has started or has lost the connection to the WLAN. I will collect a few examples of this under the tag pxlBlckUsecase. You can find a list of these use cases under <strong><em><a href=\"https:\/\/nerdiy.de\/en\/day\/pxlblckusecase\/\">https:\/\/nerdiy.de\/tag\/pxlblckusecase\/<\/a><\/em><\/strong><\/p>\n\n\n\n<p>Here are a few basics on the basic structure of the command for triggering animations on the pxlBlck. How you can send this command to the pxlBlck is also described in the article <strong><em><a rel=\"noreferrer noopener\" href=\"https:\/\/nerdiy.de\/en\/howto-espeasy-execute-commands-2-2\/\" target=\"_blank\">ESPEasy - Execute commands and actions via HTTP, MQTT, UDP and directly<\/a><\/em><\/strong> described. Basic information on the structure of the pxlBlck commands can also be found in this article<strong><em> <a href=\"https:\/\/nerdiy.de\/en\/howto-pxlblck-commands-to-configure-the-pxlblck\/\" target=\"_blank\" rel=\"noreferrer noopener\">pxlBlck - Commands for configuring the pxlBlck<\/a><\/em><\/strong><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Command name<\/strong><\/h4>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em>pbani<\/em><\/p><\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Command overview<\/strong><\/h4>\n\n\n\n<p class=\"has-light-gray-background-color has-background\"><em>pbani,[animation_type 1-6],[color_on_red 0-255],[<em>color_on_<\/em><\/em>green <em>0-255],[<em>color_on_<\/em><\/em>blue <em>0-255],[<em>color_off_red <\/em>0-255],[<em><em>color_off_green<\/em><\/em><\/em> <em>0-255],[<em><em>color_off_blue<\/em><\/em><\/em> <em>0-255],[animation_delay 0-500],<\/em><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Parameter description<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table class=\"has-fixed-layout\"><thead><tr><th>Parameter name<\/th><th>Description<\/th><th class=\"has-text-align-center\" data-align=\"center\">Permitted value range<\/th><\/tr><\/thead><tbody><tr><td><em>animation_type<\/em><\/td><td>This parameter defines the type of animation. An overview of the possible animations can be found in the following table.<\/td><td class=\"has-text-align-center\" data-align=\"center\">1-6<\/td><\/tr><tr><td><em>color_on_red<\/em><\/td><td>This parameter determines the brightness of the red color in the input animation.<\/td><td class=\"has-text-align-center\" data-align=\"center\">0-255<\/td><\/tr><tr><td><em><em>color_on_<\/em><\/em>green<\/td><td>This parameter determines the brightness of the green color in the input animation.<\/td><td class=\"has-text-align-center\" data-align=\"center\">0-255<\/td><\/tr><tr><td><em><em>color_on_<\/em><\/em>blue<\/td><td>This parameter determines the brightness of the blue color in the input animation.<\/td><td class=\"has-text-align-center\" data-align=\"center\">0-255<\/td><\/tr><tr><td><em><em>color_off_red<\/em><\/em><\/td><td>This parameter determines the brightness of the red color in the output animation.<\/td><td class=\"has-text-align-center\" data-align=\"center\">0-255<\/td><\/tr><tr><td><em><em>color_off_green<\/em><\/em><\/td><td>This parameter determines the brightness of the green color in the output animation.<\/td><td class=\"has-text-align-center\" data-align=\"center\">0-255<\/td><\/tr><tr><td><em><em>color_off_blue<\/em><\/em><\/td><td>This parameter determines the brightness of the blue color in the output animation.<\/td><td class=\"has-text-align-center\" data-align=\"center\">0-255<\/td><\/tr><tr><td><em>animation_delay<\/em><\/td><td>Here you can set the duration of the animation. It is specified in milliseconds and describes the display duration per pixel.<\/td><td class=\"has-text-align-center\" data-align=\"center\">0-500<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Overview of the animations<\/h4>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table class=\"has-fixed-layout\"><thead><tr><th>ID<\/th><th>Description<\/th><\/tr><\/thead><tbody><tr><td>1<\/td><td>The LED matrix is filled from the right with the input color and then overwritten to the left with the output color.<\/td><\/tr><tr><td>2<\/td><td>The LED matrix is filled from the left with the input color and then overwritten to the right with the output color.<\/td><\/tr><tr><td>3<\/td><td>A vertical line (in input color) moves from left to right (in output color).<\/td><\/tr><tr><td>4<\/td><td>A vertical line (in output color) moves from left to right (in input color).<\/td><\/tr><tr><td>5<\/td><td>The LED matrix is filled from both sides towards the mtte and then dissolved again.<\/td><\/tr><tr><td>6<\/td><td>The LED matrix is filled from the center and then dissolved again.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Information on implementation<\/h2>\n\n\n\n<p>The execution of animations is implemented in such a way that no other tasks can be performed while the animation is being displayed. As a result, loading the pxlBlck web menu, for example, cannot be continued while an animation is being displayed. In addition, no other commands are processed while the animation is running. However, these should be executed after the animation has finished.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\"Cooldown time\"<\/h2>\n\n\n\n<p>The processing of animations is time-limited. This means that after receiving a command to display an animation, the pxlBlck ignores further commands to display animations for a certain time. <\/p>\n\n\n\n<p>This time period is defined in the source code and cannot be changed during operation. If you want to change it: It is defined with the #define PXLBLCK_ANIMATION_COOLDOWN_TIME.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Examples<\/h2>\n\n\n\n<p>The following paragraph lists a few example commands and their view on the various pxlBlcks.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"810\" height=\"456\" src=\"https:\/\/www.youtube.com\/embed\/X7pPk5TqrA8?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Info<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Animation type: 1<\/li><li>Delay: 50ms<\/li><li>Input color (RGB value): 1<em>50,0,0<\/em> <\/li><li>Output color (RGB value): <em><em>0,0,150<\/em><\/em><\/li><\/ul>\n\n\n\n<p><strong>Command<\/strong>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>pbani,1,150,0,0,0,0,150,50<\/p><\/blockquote>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"810\" height=\"456\" src=\"https:\/\/www.youtube.com\/embed\/B3FCAiDHOBg?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Info<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Animation type: 2<\/li><li>Delay: 50ms<\/li><li>Input color (RGB value): <em>50,50,50<\/em> <\/li><li>Output color (RGB value): <em><em>0,50,0<\/em><\/em><\/li><\/ul>\n\n\n\n<p><strong>Command<\/strong>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em>pbani,2,50,50,50,0,0,50,50,<\/em><\/p><\/blockquote>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"810\" height=\"456\" src=\"https:\/\/www.youtube.com\/embed\/rl0Y3ab9Q3A?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Info<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Animation type: 3<\/li><li>Delay: 150ms<\/li><li>Input color (RGB value): <em>50,50,50<\/em> <\/li><li>Output color (RGB value): <em><em>0,50,0<\/em><\/em><\/li><\/ul>\n\n\n\n<p><strong>Command<\/strong>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em>pbani,3,50,50,50,0,50,0,150,<\/em><\/p><\/blockquote>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"810\" height=\"456\" src=\"https:\/\/www.youtube.com\/embed\/_exVcOy0am0?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Info<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Animation type: 4<\/li><li>Delay: 50ms<\/li><li>Input color (RGB value): <em>50,50,50<\/em> <\/li><li>Output color (RGB value): <em><em>0,50,0<\/em><\/em><\/li><\/ul>\n\n\n\n<p><strong>Command<\/strong>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em>pbani,4,50,50,50,0,50,0,50,<\/em><\/p><\/blockquote>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"810\" height=\"456\" src=\"https:\/\/www.youtube.com\/embed\/g_9IGZt369E?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Info<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Animation type: 5<\/li><li>Delay: 50ms<\/li><li>Input color (RGB value): <em>50,50,50<\/em> <\/li><li>Output color (RGB value): <em><em>0,0,50<\/em><\/em><\/li><\/ul>\n\n\n\n<p><strong>Command<\/strong>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em>pbani,5,50,50,50,0,0,50,50,<\/em><\/p><\/blockquote>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"810\" height=\"456\" src=\"https:\/\/www.youtube.com\/embed\/BFq4-BxC2RA?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Info<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Animation type: 6<\/li><li>Delay: 20ms <\/li><li>Input color (RGB value): <em>50,50,50<\/em> <\/li><li>Output color (RGB value): <em><em>0,50,0<\/em><\/em><\/li><\/ul>\n\n\n\n<p><strong>Command<\/strong>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em>pbani,6,50,50,50,0,50,0,50,<\/em><\/p><\/blockquote>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"810\" height=\"456\" src=\"https:\/\/www.youtube.com\/embed\/GxfUo1EHsWw?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Info<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Animation type: 5<\/li><li>Delay: 20ms (20ms is the default delay used if this parameter is set to zero)<\/li><li>Input color (RGB value): 15<em>0,0,0<\/em> <\/li><li>Output color (RGB value): <em><em>0,0,0<\/em><\/em><\/li><\/ul>\n\n\n\n<p><strong>Command<\/strong>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em>pbani,5,150,0,0,0,0,0,<\/em><\/p><\/blockquote>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"810\" height=\"456\" src=\"https:\/\/www.youtube.com\/embed\/cSa_kvL_rto?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Info<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Animation type: 1<\/li><li>Delay: 20ms (20ms is the default delay used if this parameter is set to zero)<\/li><li>Input color (RGB value): 10<em>0,100,100<\/em> <\/li><li>Output color (RGB value): <em><em>0,0,0<\/em><\/em><\/li><\/ul>\n\n\n\n<p><strong>Command<\/strong>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em>pbani,1,100,100,100,0,0,0,<\/em><\/p><\/blockquote>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"810\" height=\"456\" src=\"https:\/\/www.youtube.com\/embed\/yLOpYtMl3-U?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Info<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Animation type: 1<\/li><li>Delay: 50ms <\/li><li>Input color (RGB value): 15<em>0,0,0<\/em> <\/li><li>Output color (RGB value): <em><em>0,0,150<\/em><\/em><\/li><\/ul>\n\n\n\n<p><strong>Command<\/strong>:<\/p>\n\n\n\n<p><em>pbani,1,150,0,0,0,0,150,50<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"810\" height=\"456\" src=\"https:\/\/www.youtube.com\/embed\/UfPeH5waXGM?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Info<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Animation type: 3<\/li><li>Delay: 150ms<\/li><li>Input color (RGB value): 5<em>0,50,50<\/em> <\/li><li>Output color (RGB value): <em><em>0,50,0<\/em><\/em><\/li><\/ul>\n\n\n\n<p><strong>Command<\/strong>:<\/p>\n\n\n\n<p>pbani,3,50,50,50,0,50,0,150<\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"810\" height=\"456\" src=\"https:\/\/www.youtube.com\/embed\/WSQdn8GZbH8?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Info<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Animation type: 4<\/li><li>Delay: 50ms<\/li><li>Input color (RGB value): 5<em>0,50,50<\/em> <\/li><li>Output color (RGB value): <em><em>0,50,0<\/em><\/em><\/li><\/ul>\n\n\n\n<p><strong>Command<\/strong>:<\/p>\n\n\n\n<p>pbani,4,50,50,50,0,50,0,50<\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2>Have fun with the project<\/h2>\r\n<p>I hope everything worked as described for you. If not or you have questions or suggestions please let me know in the comments. I will then add this to the article if necessary.<br \/>Ideas for new projects are always welcome. \ud83d\ude42<\/p>\r\n<p><strong>PS Many of these projects - especially the hardware projects - cost a lot of time and money. Of course I do this because I enjoy it, but if you think it&#039;s cool that I share the information with you, I would be happy about a small donation to the coffee fund. \ud83d\ude42<\/strong><\/p>\r\n<p><a href=\"https:\/\/ko-fi.com\/nerdiy\" target=\"_blank\" rel=\"noopener\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" style=\"border: 0px; height: 36px;\" src=\"https:\/\/i0.wp.com\/cdn.ko-fi.com\/cdn\/kofi4.png?resize=143%2C36&#038;ssl=1\" alt=\"Buy Me a Coffee at ko-fi.com\" width=\"143\" height=\"36\" border=\"0\" \/><\/a>\u00a0 \u00a0 \u00a0 \u00a0<input name=\"cmd\" type=\"hidden\" value=\"_s-xclick\" \/> <input name=\"hosted_button_id\" type=\"hidden\" value=\"UAZE9RMHJY7VJ\" \/> <input title=\"PayPal - The safer, easier way to pay online!\" alt=\"Donate with PayPal button\" name=\"submit\" src=\"https:\/\/www.paypalobjects.com\/de_DE\/DE\/i\/btn\/btn_donateCC_LG.gif\" type=\"image\" \/> <img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.paypal.com\/de_DE\/i\/scr\/pixel.gif?resize=1%2C1&#038;ssl=1\" alt=\"\" width=\"1\" height=\"1\" border=\"0\" \/><\/p>","protected":false},"excerpt":{"rendered":"<p>With the help of pxlBlck you can be informed about events in different ways. One of these ways is to display previously set icons. Unfortunately this possibility [...]<\/p>","protected":false},"author":1,"featured_media":13991,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[91,149,86,146,153,61],"tags":[29,245,82,165,151],"class_list":["post-13964","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3d-druck","category-abendprojekt2h","category-elektronik","category-esp-easy","category-pxlblck","category-smarthome","tag-arduino","tag-esp32","tag-esp8266","tag-espeasy","tag-espeasy-plugin"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>HowTo: pxlBlck - Animationen konfigurieren und anzeigen - nerdiy.de - DIY, Elektronik, 3D Druck und mehr...<\/title>\n<meta name=\"description\" content=\"Read a huge collection of detailed Tutorials on Nerdiy.de about all kind of Software, Hardware and general maker topics.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/nerdiy.de\/en\/howto-configure-and-display-pxlblck-animations\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HowTo: pxlBlck - Animationen konfigurieren und anzeigen - nerdiy.de - DIY, Elektronik, 3D Druck und mehr...\" \/>\n<meta property=\"og:description\" content=\"Read a huge collection of detailed Tutorials on Nerdiy.de about all kind of Software, Hardware and general maker topics.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/nerdiy.de\/en\/howto-configure-and-display-pxlblck-animations\/\" \/>\n<meta property=\"og:site_name\" content=\"nerdiy.de - DIY, Elektronik, 3D Druck und mehr...\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/nerdiy.de\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/nerdiy.de\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-12T16:08:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-12T17:36:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-animationen-konfigurieren-und-anzeigen-img-20201210-235604.jpg?fit=1564%2C1564&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1564\" \/>\n\t<meta property=\"og:image:height\" content=\"1564\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@nerdiyde\" \/>\n<meta name=\"twitter:site\" content=\"@nerdiyde\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\\\/\"},\"author\":{\"name\":\"Fab\",\"@id\":\"https:\\\/\\\/nerdiy.de\\\/de_de\\\/#\\\/schema\\\/person\\\/f1579a71868adb0be60a74246d3e0908\"},\"headline\":\"HowTo: pxlBlck &#8211; Animationen konfigurieren und anzeigen\",\"datePublished\":\"2020-12-12T16:08:43+00:00\",\"dateModified\":\"2020-12-12T17:36:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\\\/\"},\"wordCount\":919,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/nerdiy.de\\\/de_de\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/nerdiy.de\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/www.nerdiy.de-howto-pxlblck-animationen-konfigurieren-und-anzeigen-img-20201210-235604.jpg?fit=1564%2C1564&ssl=1\",\"keywords\":[\"Arduino\",\"ESP32\",\"ESP8266\",\"ESPEasy\",\"ESPEasy-Plugin\"],\"articleSection\":[\"3D-Druck\",\"Abendprojekt(&lt;2h)\",\"Elektronik\",\"ESP Easy\",\"pxlBlck\",\"SmartHome\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\\\/\",\"url\":\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\\\/\",\"name\":\"HowTo: pxlBlck - Animationen konfigurieren und anzeigen - nerdiy.de - DIY, Elektronik, 3D Druck und mehr...\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/nerdiy.de\\\/de_de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/nerdiy.de\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/www.nerdiy.de-howto-pxlblck-animationen-konfigurieren-und-anzeigen-img-20201210-235604.jpg?fit=1564%2C1564&ssl=1\",\"datePublished\":\"2020-12-12T16:08:43+00:00\",\"dateModified\":\"2020-12-12T17:36:51+00:00\",\"description\":\"Read a huge collection of detailed Tutorials on Nerdiy.de about all kind of Software, Hardware and general maker topics.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/nerdiy.de\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/www.nerdiy.de-howto-pxlblck-animationen-konfigurieren-und-anzeigen-img-20201210-235604.jpg?fit=1564%2C1564&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/nerdiy.de\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/www.nerdiy.de-howto-pxlblck-animationen-konfigurieren-und-anzeigen-img-20201210-235604.jpg?fit=1564%2C1564&ssl=1\",\"width\":1564,\"height\":1564},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/nerdiy.de\\\/de_de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HowTo: pxlBlck &#8211; Animationen konfigurieren und anzeigen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/nerdiy.de\\\/de_de\\\/#website\",\"url\":\"https:\\\/\\\/nerdiy.de\\\/de_de\\\/\",\"name\":\"nerdiy.de - DIY, Elektronik, 3D Druck und mehr...\",\"description\":\"Bei nerdiy.de dreht sich alles um Elektronik, Heimwerken, 3D-Druck, Smart Home und viele andere technische Themen.\",\"publisher\":{\"@id\":\"https:\\\/\\\/nerdiy.de\\\/de_de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/nerdiy.de\\\/de_de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/nerdiy.de\\\/de_de\\\/#organization\",\"name\":\"Nerdiy.de\",\"url\":\"https:\\\/\\\/nerdiy.de\\\/de_de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/nerdiy.de\\\/de_de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/nerdiy.de\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/www.nerdiy.de-v1.0final180x180-1.png?fit=180%2C180&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/nerdiy.de\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/www.nerdiy.de-v1.0final180x180-1.png?fit=180%2C180&ssl=1\",\"width\":180,\"height\":180,\"caption\":\"Nerdiy.de\"},\"image\":{\"@id\":\"https:\\\/\\\/nerdiy.de\\\/de_de\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/nerdiy.de\",\"https:\\\/\\\/x.com\\\/nerdiyde\",\"https:\\\/\\\/www.instagram.com\\\/nerdiy.de\\\/\",\"https:\\\/\\\/www.pinterest.de\\\/nerdiyde\\\/\",\"https:\\\/\\\/www.youtube.com\\\/nerdiy\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/nerdiy.de\\\/de_de\\\/#\\\/schema\\\/person\\\/f1579a71868adb0be60a74246d3e0908\",\"name\":\"Fab\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5cd8a2c5a20873f04ac46048f749a6f5335f6d9d3af744d9bb04f4052c44fca2?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5cd8a2c5a20873f04ac46048f749a6f5335f6d9d3af744d9bb04f4052c44fca2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5cd8a2c5a20873f04ac46048f749a6f5335f6d9d3af744d9bb04f4052c44fca2?s=96&d=mm&r=g\",\"caption\":\"Fab\"},\"sameAs\":[\"https:\\\/\\\/nerdiy.de\",\"https:\\\/\\\/www.facebook.com\\\/nerdiy.de\\\/\",\"https:\\\/\\\/www.instagram.com\\\/nerdiy.de\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/nerdiy-de\\\/\",\"http:\\\/\\\/www.pinterest.com\\\/nerdiyde\\\/\",\"https:\\\/\\\/x.com\\\/nerdiyde\",\"https:\\\/\\\/www.youtube.com\\\/c\\\/Nerdiy\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HowTo: pxlBlck - Configure and display animations - nerdiy.de - DIY, electronics, 3D printing and more...","description":"Read a huge collection of detailed Tutorials on Nerdiy.de about all kind of Software, Hardware and general maker topics.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/nerdiy.de\/en\/howto-configure-and-display-pxlblck-animations\/","og_locale":"en_US","og_type":"article","og_title":"HowTo: pxlBlck - Animationen konfigurieren und anzeigen - nerdiy.de - DIY, Elektronik, 3D Druck und mehr...","og_description":"Read a huge collection of detailed Tutorials on Nerdiy.de about all kind of Software, Hardware and general maker topics.","og_url":"https:\/\/nerdiy.de\/en\/howto-configure-and-display-pxlblck-animations\/","og_site_name":"nerdiy.de - DIY, Elektronik, 3D Druck und mehr...","article_publisher":"https:\/\/www.facebook.com\/nerdiy.de","article_author":"https:\/\/www.facebook.com\/nerdiy.de\/","article_published_time":"2020-12-12T16:08:43+00:00","article_modified_time":"2020-12-12T17:36:51+00:00","og_image":[{"width":1564,"height":1564,"url":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-animationen-konfigurieren-und-anzeigen-img-20201210-235604.jpg?fit=1564%2C1564&ssl=1","type":"image\/jpeg"}],"author":"Fab","twitter_card":"summary_large_image","twitter_creator":"@nerdiyde","twitter_site":"@nerdiyde","twitter_misc":{"Written by":"Fab","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/nerdiy.de\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\/#article","isPartOf":{"@id":"https:\/\/nerdiy.de\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\/"},"author":{"name":"Fab","@id":"https:\/\/nerdiy.de\/de_de\/#\/schema\/person\/f1579a71868adb0be60a74246d3e0908"},"headline":"HowTo: pxlBlck &#8211; Animationen konfigurieren und anzeigen","datePublished":"2020-12-12T16:08:43+00:00","dateModified":"2020-12-12T17:36:51+00:00","mainEntityOfPage":{"@id":"https:\/\/nerdiy.de\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\/"},"wordCount":919,"commentCount":0,"publisher":{"@id":"https:\/\/nerdiy.de\/de_de\/#organization"},"image":{"@id":"https:\/\/nerdiy.de\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-animationen-konfigurieren-und-anzeigen-img-20201210-235604.jpg?fit=1564%2C1564&ssl=1","keywords":["Arduino","ESP32","ESP8266","ESPEasy","ESPEasy-Plugin"],"articleSection":["3D-Druck","Abendprojekt(&lt;2h)","Elektronik","ESP Easy","pxlBlck","SmartHome"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/nerdiy.de\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/nerdiy.de\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\/","url":"https:\/\/nerdiy.de\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\/","name":"HowTo: pxlBlck - Configure and display animations - nerdiy.de - DIY, electronics, 3D printing and more...","isPartOf":{"@id":"https:\/\/nerdiy.de\/de_de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/nerdiy.de\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\/#primaryimage"},"image":{"@id":"https:\/\/nerdiy.de\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-animationen-konfigurieren-und-anzeigen-img-20201210-235604.jpg?fit=1564%2C1564&ssl=1","datePublished":"2020-12-12T16:08:43+00:00","dateModified":"2020-12-12T17:36:51+00:00","description":"Read a huge collection of detailed Tutorials on Nerdiy.de about all kind of Software, Hardware and general maker topics.","breadcrumb":{"@id":"https:\/\/nerdiy.de\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/nerdiy.de\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/nerdiy.de\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\/#primaryimage","url":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-animationen-konfigurieren-und-anzeigen-img-20201210-235604.jpg?fit=1564%2C1564&ssl=1","contentUrl":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-animationen-konfigurieren-und-anzeigen-img-20201210-235604.jpg?fit=1564%2C1564&ssl=1","width":1564,"height":1564},{"@type":"BreadcrumbList","@id":"https:\/\/nerdiy.de\/howto-pxlblck-animationen-konfigurieren-und-anzeigen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/nerdiy.de\/de_de\/"},{"@type":"ListItem","position":2,"name":"HowTo: pxlBlck &#8211; Animationen konfigurieren und anzeigen"}]},{"@type":"WebSite","@id":"https:\/\/nerdiy.de\/de_de\/#website","url":"https:\/\/nerdiy.de\/de_de\/","name":"nerdiy.de - DIY, electronics, 3D printing and more...","description":"At nerdiy.de, everything revolves around electronics, DIY, 3D printing, smart home and many other technical topics.","publisher":{"@id":"https:\/\/nerdiy.de\/de_de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/nerdiy.de\/de_de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/nerdiy.de\/de_de\/#organization","name":"Nerdiy.de","url":"https:\/\/nerdiy.de\/de_de\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/nerdiy.de\/de_de\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/04\/www.nerdiy.de-v1.0final180x180-1.png?fit=180%2C180&ssl=1","contentUrl":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/04\/www.nerdiy.de-v1.0final180x180-1.png?fit=180%2C180&ssl=1","width":180,"height":180,"caption":"Nerdiy.de"},"image":{"@id":"https:\/\/nerdiy.de\/de_de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/nerdiy.de","https:\/\/x.com\/nerdiyde","https:\/\/www.instagram.com\/nerdiy.de\/","https:\/\/www.pinterest.de\/nerdiyde\/","https:\/\/www.youtube.com\/nerdiy"]},{"@type":"Person","@id":"https:\/\/nerdiy.de\/de_de\/#\/schema\/person\/f1579a71868adb0be60a74246d3e0908","name":"Fab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5cd8a2c5a20873f04ac46048f749a6f5335f6d9d3af744d9bb04f4052c44fca2?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5cd8a2c5a20873f04ac46048f749a6f5335f6d9d3af744d9bb04f4052c44fca2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5cd8a2c5a20873f04ac46048f749a6f5335f6d9d3af744d9bb04f4052c44fca2?s=96&d=mm&r=g","caption":"Fab"},"sameAs":["https:\/\/nerdiy.de","https:\/\/www.facebook.com\/nerdiy.de\/","https:\/\/www.instagram.com\/nerdiy.de","https:\/\/www.linkedin.com\/company\/nerdiy-de\/","http:\/\/www.pinterest.com\/nerdiyde\/","https:\/\/x.com\/nerdiyde","https:\/\/www.youtube.com\/c\/Nerdiy"]}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-animationen-konfigurieren-und-anzeigen-img-20201210-235604.jpg?fit=1564%2C1564&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9GM3g-3De","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":13274,"url":"https:\/\/nerdiy.de\/en\/howto-install-and-configure-pxlblck-the-pxlblck-plugin\/","url_meta":{"origin":13964,"position":0},"title":"HowTo: pxlBlck \u2013 Install and configure the pxlBlck plugin","author":"Fab","date":"12. December 2020","format":false,"excerpt":"Das pxlBlck-plugin f\u00fcr das ESPEasy Framework ist das \"Software-Gegenst\u00fcck\" zu den pxlBlck-Plattformen. Mit dem Plugin k\u00f6nnt Ihr die verbauten LED Matrizen leicht ansteuern und mithilfe der anderen Funktionen ist relativ leicht eigene Animationen und Benachrichtigungen auf der LED-Matrix anzuzeigen. pxlBlck-Plattform Bevor Ihr mit der Installation des Plugins fortfahrt, solltet Ihr\u2026","rel":"","context":"In &quot;3D-Druck&quot;","block_context":{"text":"3D-Druck","link":"https:\/\/nerdiy.de\/en\/category\/3d-printing\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-das-pxlblck-plugin-installieren-und-konfigurieren-firefox-8k7fzetyi1.jpg?fit=969%2C861&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-das-pxlblck-plugin-installieren-und-konfigurieren-firefox-8k7fzetyi1.jpg?fit=969%2C861&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-das-pxlblck-plugin-installieren-und-konfigurieren-firefox-8k7fzetyi1.jpg?fit=969%2C861&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-das-pxlblck-plugin-installieren-und-konfigurieren-firefox-8k7fzetyi1.jpg?fit=969%2C861&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":7726,"url":"https:\/\/nerdiy.de\/en\/howto-design-pxlblck-icons-transfer-to-the-pxlblck-and-display\/","url_meta":{"origin":13964,"position":1},"title":"HowTo: pxlBlck \u2013 design icons, transfer them to the pxlBlck and display them","author":"Fab","date":"12. December 2020","format":false,"excerpt":"Mit der Entwicklung der pxlBlcks habe ich begonnen, weil ich auf der Suche nach einer M\u00f6glichkeit war \u00fcber Ereignisse im SmartHome informiert zu bleiben. Mittlerweile gibt es dazu zwei in das pxlBlck-Plugin integrierte Optionen. Neben der M\u00f6glichkeit Animationen anzeigen zu k\u00f6nnen gibt es dazu auch die M\u00f6glichkeit vordefinierte Icons auf\u2026","rel":"","context":"In &quot;Abendprojekt(&lt;2h)&quot;","block_context":{"text":"Abendprojekt(&lt;2h)","link":"https:\/\/nerdiy.de\/en\/category\/evening-project2h\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-incollage-20200604-194845972.jpg?fit=1200%2C1200&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-incollage-20200604-194845972.jpg?fit=1200%2C1200&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-incollage-20200604-194845972.jpg?fit=1200%2C1200&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-incollage-20200604-194845972.jpg?fit=1200%2C1200&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-incollage-20200604-194845972.jpg?fit=1200%2C1200&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":13724,"url":"https:\/\/nerdiy.de\/en\/howto-pxlblck-commands-to-configure-the-pxlblck\/","url_meta":{"origin":13964,"position":2},"title":"HowTo: pxlBlck \u2013 Commands for configuring the pxlBlck","author":"Fab","date":"12. December 2020","format":false,"excerpt":"Das pxlBlck-plugin bzw. die Funktionen Eures pxlBlck lassen sich prinzipiell auf zwei unterschiedlichen Wegen konfigurieren. Eine M\u00f6glichkeit ist die Konfiguration der meisten Funktionen \u00fcber das Webmen\u00fc des Plugins. Viele Infos dazu findet Ihr in dem Artikel pxlBlck - Das pxlBlck-Plugin installieren und konfigurieren Neben dieser M\u00f6glichkeit k\u00f6nnt Ihr Euren pxBlck\u2026","rel":"","context":"In &quot;Elektronik&quot;","block_context":{"text":"Elektronik","link":"https:\/\/nerdiy.de\/en\/category\/electronics\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-icons-designen-auf-den-pxlblck-uebertragen-und-anzeigen-firefox-nn3d9sugck.jpg?fit=1152%2C783&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-icons-designen-auf-den-pxlblck-uebertragen-und-anzeigen-firefox-nn3d9sugck.jpg?fit=1152%2C783&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-icons-designen-auf-den-pxlblck-uebertragen-und-anzeigen-firefox-nn3d9sugck.jpg?fit=1152%2C783&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-icons-designen-auf-den-pxlblck-uebertragen-und-anzeigen-firefox-nn3d9sugck.jpg?fit=1152%2C783&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-icons-designen-auf-den-pxlblck-uebertragen-und-anzeigen-firefox-nn3d9sugck.jpg?fit=1152%2C783&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":974,"url":"https:\/\/nerdiy.de\/en\/pxlblck\/","url_meta":{"origin":13964,"position":3},"title":"pxlBlck - An IOT\/SmartHome Information System","author":"Fab","date":"12. December 2020","format":false,"excerpt":"pxlBlck ist ein System aus Hard- und Software um ein Informationssystem f\u00fcr das SmartHome aufzubauen. Es stehen verschiedene Software- und Hardwareoptionen zur Verf\u00fcgung. Dank der Integration in ein EspEasy-Plugin k\u00f6nnen die pxlBlck's ohne externe Automatisierungssoftware automatisiert werden. In Kombination mit externer Automatisierungssoftware (z. B. NodeRed, MQTT-Server, etc...) k\u00f6nnen auch verschiedene\u2026","rel":"","context":"In &quot;3D-Druck&quot;","block_context":{"text":"3D-Druck","link":"https:\/\/nerdiy.de\/en\/category\/3d-printing\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/11\/www.nerdiy.de-20200717-184353-scaled.jpg?fit=1200%2C900&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/11\/www.nerdiy.de-20200717-184353-scaled.jpg?fit=1200%2C900&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/11\/www.nerdiy.de-20200717-184353-scaled.jpg?fit=1200%2C900&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/11\/www.nerdiy.de-20200717-184353-scaled.jpg?fit=1200%2C900&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/11\/www.nerdiy.de-20200717-184353-scaled.jpg?fit=1200%2C900&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":8847,"url":"https:\/\/nerdiy.de\/en\/pxlblck-all-infos-for-testers-of-the-latest-pre-release\/","url_meta":{"origin":13964,"position":4},"title":"pxlBlck - All information for testers of the latest pre-release","author":"Fab","date":"15. August 2020","format":false,"excerpt":"Liebe Tester,zu allererst vielen Dank, dass Ihr Euch bereit erkl\u00e4rt habt das pxlBlck Plugin zu testen. :) Im folgenden versuche ich alles aufzulisten, dass Ihr f\u00fcr die Installation und den Betrieb des Plugins ben\u00f6tigt. Wenn etwas fehlt erw\u00e4hnt das bitte einfach in der Kommtnarfunktion ganz am Ende der Seite. :)\u2026","rel":"","context":"In &quot;pxlBlckDev&quot;","block_context":{"text":"pxlBlckDev","link":"https:\/\/nerdiy.de\/en\/category\/esp-easy\/pxlblck\/pxlblckdev\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/08\/www.nerdiy.de-img-20200604-200809-046.jpg?fit=1080%2C1080&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/08\/www.nerdiy.de-img-20200604-200809-046.jpg?fit=1080%2C1080&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/08\/www.nerdiy.de-img-20200604-200809-046.jpg?fit=1080%2C1080&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/08\/www.nerdiy.de-img-20200604-200809-046.jpg?fit=1080%2C1080&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/08\/www.nerdiy.de-img-20200604-200809-046.jpg?fit=1080%2C1080&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":7680,"url":"https:\/\/nerdiy.de\/en\/howto-build-pxlblck-pxlblck_slotclock\/","url_meta":{"origin":13964,"position":5},"title":"HowTo: pxlBlck - build pxlBlck_SlotClock","author":"Fab","date":"12. December 2020","format":false,"excerpt":"Die pxlBlck_SlotClock besteht aus einer 1x60 LED Matrix. So kann sie die Uhrzeit nach dem gleichen Schema wie eine Analoge Uhr darstellen. Die Farben der einzelnen Zeiger lassen sich einstellen. Zus\u00e4tzlich lassen sich Stundenmarkierungen anzeigen. Dadurch wird die Orientierung und das ablesen der Uhrzeit etwas leichter. :) Um \u00fcber Ereignisse\u2026","rel":"","context":"In &quot;3D-Druck&quot;","block_context":{"text":"3D-Druck","link":"https:\/\/nerdiy.de\/en\/category\/3d-printing\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-pxlblck_slotclock-aufbauen-dsc00766-1-scaled.jpg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-pxlblck_slotclock-aufbauen-dsc00766-1-scaled.jpg?fit=1200%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-pxlblck_slotclock-aufbauen-dsc00766-1-scaled.jpg?fit=1200%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-pxlblck_slotclock-aufbauen-dsc00766-1-scaled.jpg?fit=1200%2C800&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-pxlblck_slotclock-aufbauen-dsc00766-1-scaled.jpg?fit=1200%2C800&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/nerdiy.de\/en\/wp-json\/wp\/v2\/posts\/13964","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nerdiy.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nerdiy.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nerdiy.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nerdiy.de\/en\/wp-json\/wp\/v2\/comments?post=13964"}],"version-history":[{"count":0,"href":"https:\/\/nerdiy.de\/en\/wp-json\/wp\/v2\/posts\/13964\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nerdiy.de\/en\/wp-json\/wp\/v2\/media\/13991"}],"wp:attachment":[{"href":"https:\/\/nerdiy.de\/en\/wp-json\/wp\/v2\/media?parent=13964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nerdiy.de\/en\/wp-json\/wp\/v2\/categories?post=13964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nerdiy.de\/en\/wp-json\/wp\/v2\/tags?post=13964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}