{"id":14297,"date":"2020-12-28T18:59:59","date_gmt":"2020-12-28T17:59:59","guid":{"rendered":"https:\/\/nerdiy.de\/?p=14297"},"modified":"2021-03-16T15:21:02","modified_gmt":"2021-03-16T14:21:02","slug":"howto-pxlblck-display-relative-values-as-a-bargraph-2","status":"publish","type":"post","link":"https:\/\/nerdiy.de\/en\/howto-pxlblck-display-relative-values-as-a-bargraph-2\/","title":{"rendered":"HowTo: pxlBlck - Display relative values as BarGraph"},"content":{"rendered":"<p>I started documenting the pxlBlcks (which I had put off for a long time) in November 2020 after Hackaday.com announced the \"GoodBye 2020\" challenge. (More info about it here: <strong><em><a href=\"https:\/\/hackaday.io\/contest\/175608-goodbye-2020\/details\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/hackaday.io\/contest\/175608-goodbye-2020\/details<\/a><\/em><\/strong>)<\/p>\n\n\n\n<p>I had used the pxlBlcks for a long time, but as so often I never found the time\/motivation to write it down.<\/p>\n\n\n\n<p>If you have read the description of the challenge mentioned above, you might have noticed that the challenge fits very well to the functionality of the pxlBlcks. Scrolling texts could be displayed on it for a long time. So, for example, a \"Good Bye 2020\" message can be displayed without major problems. <\/p>\n\n\n\n<p>Thanks to a tip from one of the first testers of the pxlBlck plugin, I came up with another idea how to visualize even better when the year 2020 is finally behind you: A kind of loading bar that visualizes how many days of the year 2020 are already gone and accordingly still remain.<\/p>\n\n\n\n<p>For this purpose I have implemented a new command in the pxlBlck plugin with which up to five relative (percent) values can be shown on the display. So you can display not only the end of a period but also various scaled (if the value is absolute) or relative values.<\/p>\n\n\n\n<p>For example, the value of relative humidity can be displayed very well, because this value is already relative and corresponds to a percentage value. To display absolute values you have to use a bit more \"mathematics\". Sounds complicated. But it is not.<\/p>\n\n\n\n<p>How you can show relative values on the display of your pxlBlck in loading bar optics is described in the following article.<\/p>\n\n\n\n<div class=\"wp-block-jetpack-tiled-gallery aligncenter is-style-rectangular\"><div class=\"tiled-gallery__gallery\"><div class=\"tiled-gallery__row\"><div class=\"tiled-gallery__col\" style=\"flex-basis:66.7874160296666%\"><figure class=\"tiled-gallery__item\"><a href=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01343-scaled.jpg?ssl=1\"><img decoding=\"async\" data-attachment-id=\"14350\" data-permalink=\"https:\/\/nerdiy.de\/en\/howto-pxlblck-display-relative-values-as-a-bargraph-2\/www-nerdiy-de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01343\/\" data-orig-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01343-scaled.jpg?fit=2560%2C1707&amp;ssl=1\" data-orig-size=\"2560,1707\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;5.6&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;ILCE-6000&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;1609087641&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;43&quot;,&quot;iso&quot;:&quot;3200&quot;,&quot;shutter_speed&quot;:&quot;0.016666666666667&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01343\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01343-scaled.jpg?fit=300%2C200&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01343-scaled.jpg?fit=810%2C540&amp;ssl=1\" role=\"button\" tabindex=\"0\" aria-label=\"Open image 1 of 6 in full-screen\" srcset=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01343-scaled.jpg?strip=info&#038;w=600&#038;ssl=1 600w,https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01343-scaled.jpg?strip=info&#038;w=900&#038;ssl=1 900w,https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01343-scaled.jpg?strip=info&#038;w=1200&#038;ssl=1 1200w,https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01343-scaled.jpg?strip=info&#038;w=1500&#038;ssl=1 1500w,https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01343-scaled.jpg?strip=info&#038;w=1800&#038;ssl=1 1800w,https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01343-scaled.jpg?strip=info&#038;w=2000&#038;ssl=1 2000w\" alt=\"\" data-height=\"1707\" data-id=\"14350\" data-link=\"https:\/\/nerdiy.de\/?attachment_id=14350\" data-url=\"https:\/\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01343-scaled.jpg\" data-width=\"2560\" src=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01343-scaled.jpg?ssl=1\" layout=\"responsive\"\/><\/a><\/figure><\/div><div class=\"tiled-gallery__col\" style=\"flex-basis:33.212583970333384%\"><figure class=\"tiled-gallery__item\"><a href=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01346-scaled.jpg?ssl=1\"><img decoding=\"async\" data-attachment-id=\"14351\" data-permalink=\"https:\/\/nerdiy.de\/en\/howto-pxlblck-display-relative-values-as-a-bargraph-2\/www-nerdiy-de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01346\/\" data-orig-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01346-scaled.jpg?fit=2560%2C1707&amp;ssl=1\" data-orig-size=\"2560,1707\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;4.5&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;ILCE-6000&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;1609087654&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;25&quot;,&quot;iso&quot;:&quot;3200&quot;,&quot;shutter_speed&quot;:&quot;0.02&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01346\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01346-scaled.jpg?fit=300%2C200&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01346-scaled.jpg?fit=810%2C540&amp;ssl=1\" role=\"button\" tabindex=\"0\" aria-label=\"Open image 2 of 6 in full-screen\" srcset=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01346-scaled.jpg?strip=info&#038;w=600&#038;ssl=1 600w,https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01346-scaled.jpg?strip=info&#038;w=900&#038;ssl=1 900w,https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01346-scaled.jpg?strip=info&#038;w=1200&#038;ssl=1 1200w,https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01346-scaled.jpg?strip=info&#038;w=1500&#038;ssl=1 1500w,https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01346-scaled.jpg?strip=info&#038;w=1800&#038;ssl=1 1800w,https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01346-scaled.jpg?strip=info&#038;w=2000&#038;ssl=1 2000w\" alt=\"\" data-height=\"1707\" data-id=\"14351\" data-link=\"https:\/\/nerdiy.de\/?attachment_id=14351\" data-url=\"https:\/\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01346-scaled.jpg\" data-width=\"2560\" src=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01346-scaled.jpg?ssl=1\" layout=\"responsive\"\/><\/a><\/figure><figure class=\"tiled-gallery__item\"><a href=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01348-scaled.jpg?ssl=1\"><img decoding=\"async\" data-attachment-id=\"14352\" data-permalink=\"https:\/\/nerdiy.de\/en\/howto-pxlblck-display-relative-values-as-a-bargraph-2\/www-nerdiy-de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01348\/\" data-orig-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01348-scaled.jpg?fit=2560%2C1707&amp;ssl=1\" data-orig-size=\"2560,1707\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;4.5&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;ILCE-6000&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;1609087664&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;25&quot;,&quot;iso&quot;:&quot;3200&quot;,&quot;shutter_speed&quot;:&quot;0.016666666666667&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01348\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01348-scaled.jpg?fit=300%2C200&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01348-scaled.jpg?fit=810%2C540&amp;ssl=1\" role=\"button\" tabindex=\"0\" aria-label=\"Open image 3 of 6 in full-screen\" srcset=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01348-scaled.jpg?strip=info&#038;w=600&#038;ssl=1 600w,https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01348-scaled.jpg?strip=info&#038;w=900&#038;ssl=1 900w,https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01348-scaled.jpg?strip=info&#038;w=1200&#038;ssl=1 1200w,https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01348-scaled.jpg?strip=info&#038;w=1500&#038;ssl=1 1500w,https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01348-scaled.jpg?strip=info&#038;w=1800&#038;ssl=1 1800w,https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01348-scaled.jpg?strip=info&#038;w=2000&#038;ssl=1 2000w\" alt=\"\" data-height=\"1707\" data-id=\"14352\" data-link=\"https:\/\/nerdiy.de\/?attachment_id=14352\" data-url=\"https:\/\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01348-scaled.jpg\" data-width=\"2560\" src=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01348-scaled.jpg?ssl=1\" layout=\"responsive\"\/><\/a><\/figure><\/div><\/div><div class=\"tiled-gallery__row\"><div class=\"tiled-gallery__col\" style=\"flex-basis:33.33333333333333%\"><figure class=\"tiled-gallery__item\"><a href=\"https:\/\/i2.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01349-scaled.jpg?ssl=1\"><img decoding=\"async\" data-attachment-id=\"14354\" data-permalink=\"https:\/\/nerdiy.de\/en\/howto-pxlblck-display-relative-values-as-a-bargraph-2\/www-nerdiy-de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01349\/\" data-orig-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01349-scaled.jpg?fit=2560%2C1707&amp;ssl=1\" data-orig-size=\"2560,1707\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;4.5&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;ILCE-6000&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;1609087669&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;25&quot;,&quot;iso&quot;:&quot;3200&quot;,&quot;shutter_speed&quot;:&quot;0.01&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01349\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01349-scaled.jpg?fit=300%2C200&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01349-scaled.jpg?fit=810%2C540&amp;ssl=1\" role=\"button\" tabindex=\"0\" aria-label=\"Open image 4 of 6 in full-screen\" srcset=\"https:\/\/i2.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01349-scaled.jpg?strip=info&#038;w=600&#038;ssl=1 600w,https:\/\/i2.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01349-scaled.jpg?strip=info&#038;w=900&#038;ssl=1 900w,https:\/\/i2.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01349-scaled.jpg?strip=info&#038;w=1200&#038;ssl=1 1200w,https:\/\/i2.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01349-scaled.jpg?strip=info&#038;w=1500&#038;ssl=1 1500w,https:\/\/i2.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01349-scaled.jpg?strip=info&#038;w=1800&#038;ssl=1 1800w,https:\/\/i2.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01349-scaled.jpg?strip=info&#038;w=2000&#038;ssl=1 2000w\" alt=\"\" data-height=\"1707\" data-id=\"14354\" data-link=\"https:\/\/nerdiy.de\/?attachment_id=14354\" data-url=\"https:\/\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01349-scaled.jpg\" data-width=\"2560\" src=\"https:\/\/i2.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01349-scaled.jpg?ssl=1\" layout=\"responsive\"\/><\/a><\/figure><\/div><div class=\"tiled-gallery__col\" style=\"flex-basis:33.33333333333333%\"><figure class=\"tiled-gallery__item\"><a href=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01351-scaled.jpg?ssl=1\"><img decoding=\"async\" data-attachment-id=\"14356\" data-permalink=\"https:\/\/nerdiy.de\/en\/howto-pxlblck-display-relative-values-as-a-bargraph-2\/www-nerdiy-de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01351\/\" data-orig-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01351-scaled.jpg?fit=2560%2C1707&amp;ssl=1\" data-orig-size=\"2560,1707\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;4.5&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;ILCE-6000&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;1609087682&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;25&quot;,&quot;iso&quot;:&quot;3200&quot;,&quot;shutter_speed&quot;:&quot;0.0125&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01351\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01351-scaled.jpg?fit=300%2C200&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01351-scaled.jpg?fit=810%2C540&amp;ssl=1\" role=\"button\" tabindex=\"0\" aria-label=\"Open image 5 of 6 in full-screen\" srcset=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01351-scaled.jpg?strip=info&#038;w=600&#038;ssl=1 600w,https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01351-scaled.jpg?strip=info&#038;w=900&#038;ssl=1 900w,https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01351-scaled.jpg?strip=info&#038;w=1200&#038;ssl=1 1200w,https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01351-scaled.jpg?strip=info&#038;w=1500&#038;ssl=1 1500w,https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01351-scaled.jpg?strip=info&#038;w=1800&#038;ssl=1 1800w,https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01351-scaled.jpg?strip=info&#038;w=2000&#038;ssl=1 2000w\" alt=\"\" data-height=\"1707\" data-id=\"14356\" data-link=\"https:\/\/nerdiy.de\/?attachment_id=14356\" data-url=\"https:\/\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01351-scaled.jpg\" data-width=\"2560\" src=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01351-scaled.jpg?ssl=1\" layout=\"responsive\"\/><\/a><\/figure><\/div><div class=\"tiled-gallery__col\" style=\"flex-basis:33.33333333333333%\"><figure class=\"tiled-gallery__item\"><a href=\"https:\/\/i2.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01352-scaled.jpg?ssl=1\"><img decoding=\"async\" data-attachment-id=\"14357\" data-permalink=\"https:\/\/nerdiy.de\/en\/howto-pxlblck-display-relative-values-as-a-bargraph-2\/www-nerdiy-de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01352\/\" data-orig-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01352-scaled.jpg?fit=2560%2C1707&amp;ssl=1\" data-orig-size=\"2560,1707\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;4.5&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;ILCE-6000&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;1609087691&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;25&quot;,&quot;iso&quot;:&quot;3200&quot;,&quot;shutter_speed&quot;:&quot;0.0125&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01352\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01352-scaled.jpg?fit=300%2C200&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01352-scaled.jpg?fit=810%2C540&amp;ssl=1\" role=\"button\" tabindex=\"0\" aria-label=\"Open image 6 of 6 in full-screen\" srcset=\"https:\/\/i2.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01352-scaled.jpg?strip=info&#038;w=600&#038;ssl=1 600w,https:\/\/i2.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01352-scaled.jpg?strip=info&#038;w=900&#038;ssl=1 900w,https:\/\/i2.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01352-scaled.jpg?strip=info&#038;w=1200&#038;ssl=1 1200w,https:\/\/i2.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01352-scaled.jpg?strip=info&#038;w=1500&#038;ssl=1 1500w,https:\/\/i2.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01352-scaled.jpg?strip=info&#038;w=1800&#038;ssl=1 1800w,https:\/\/i2.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01352-scaled.jpg?strip=info&#038;w=2000&#038;ssl=1 2000w\" alt=\"\" data-height=\"1707\" data-id=\"14357\" data-link=\"https:\/\/nerdiy.de\/?attachment_id=14357\" data-url=\"https:\/\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01352-scaled.jpg\" data-width=\"2560\" src=\"https:\/\/i2.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01352-scaled.jpg?ssl=1\" layout=\"responsive\"\/><\/a><\/figure><\/div><\/div><\/div><\/div>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 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\/khh2ycqSGkk?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><figcaption>Goodbye 2020 \ud83d\ude42<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2><span style=\"color: #ff0000;\">Safety instructions <\/span><\/h2>\r\n<p><span style=\"color: #ff0000;\">I know the following notes are always kind of annoying and seem unnecessary. Unfortunately, many people who knew &quot;better&quot; have lost eyes, fingers or other things due to carelessness or injured themselves. Data loss is almost negligible in comparison, but even these can be really annoying. Therefore, please take five minutes to read the safety instructions. Because even the coolest project is not worth injury or other trouble.<\/span><br \/><strong><em><a href=\"https:\/\/nerdiy.de\/en\/safety-instructions\/\"><span style=\"color: #ff0000;\">https:\/\/www.nerdiy.de\/sicherheitshinweise\/<\/span><\/a><\/em><\/strong><\/p>\r\n<h2>Affiliate links\/advertising links<\/h2>\r\n<p><em>The links to online shops listed here are so-called affiliate links. If you click on such an affiliate link and make a purchase via this link, Nerdiy.de will receive a commission from the relevant online shop or provider. The price does not change for you. If you make your purchases via these links, you support Nerdiy.de in being able to offer other useful projects in the future. \ud83d\ude42\u00a0<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Requirements<\/h2>\n\n\n\n<p>To be able to use the information in this article, you should have already built and programmed your pxlBlck. You can find more information in the following articles.<\/p>\n\n\n\n<ul class=\"wp-block-list\" id=\"block-352027ef-e924-40a5-85fd-fec49edf612c\"><li><a href=\"https:\/\/nerdiy.de\/en\/pxlblck\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><em>pxlBlck - An IOT\/SmartHome Information System<\/em><\/strong><\/a><\/li><li><a href=\"https:\/\/nerdiy.de\/en\/howto-install-and-configure-pxlblck-the-pxlblck-plugin\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><em>pxlBlck - Install and configure the pxlBlck plugin<\/em><\/strong><\/a><\/li><li><strong><em><a href=\"https:\/\/nerdiy.de\/en\/howto-configure-pxlblck-clockfaces-and-screensavers-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">pxlBlck - configure clock faces and screensavers<\/a><\/em><\/strong><\/li><\/ul>\n\n\n\n<p><strong>Required tool:<\/strong><br>- none -<\/p>\n\n\n\n<p><strong>Required material:<\/strong><br>- none -<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">The command for displaying relative values<\/h2>\n\n\n\n<p>The following command is suitable to show relative or limited absolute values on the display of the pxlBlck. The \"direction\" of the visualized loading bar on the display can be set. Additionally a \"filled\"-flag can be set for the first of the sent relative values. This has the consequence that the display area is colored from zero up to the desired value also in the adjusted color. Last but not least, the display color of each individual value can be set.<\/p>\n\n\n\n<p>If you prefer to see examples: Scroll a little further. Below I have listed several examples including the commands used.<\/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>pbbar<\/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><em>pbbar<\/em>,[<em>display_duration<\/em>1-86400000],[<em>mirrored<\/em><\/em> <em>0-1],[<em><em><em>first_bar_filled<\/em><\/em><\/em><\/em> <em>0-1],[<em><em><em>display_direction<\/em><\/em><\/em><\/em> <em>0-1],[<em><em><em>bar_graph_value<\/em><\/em><\/em><\/em> <em>0-100],[<em><em><em><em>red<\/em><\/em><\/em><\/em><\/em> <em>0-255],[<em><em><em><em>green<\/em><\/em><\/em><\/em><\/em> <em>0-255],[<em>blue<\/em><\/em> <em>0-500],<\/em>[up to four additional value groups]<\/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>display_duration<\/em><\/td><td>This parameter defines the display duration of the displayed value. This starts after all values have been shown on the display.<\/td><td class=\"has-text-align-center\" data-align=\"center\">1-86400000<\/td><\/tr><tr><td><em>mirrored<\/em><\/td><td>You can use this parameter to mirror the display of the value. With the help of the parameter \"<em><em>display_direction<\/em><\/em>\"This means that the BarGraph can be aligned in all directions. <\/td><td class=\"has-text-align-center\" data-align=\"center\">0-1<\/td><\/tr><tr><td><em><em>first_bar_filled<\/em><\/em><\/td><td>This parameter enables or disables the filled representation for the first value. So if you set the first value to 25 and this parameter is enabled, 25% of the matrix will be \"filled\" with the color desired for this parameter. <\/td><td class=\"has-text-align-center\" data-align=\"center\">0-1<\/td><\/tr><tr><td><em><em>display_direction<\/em><\/em><\/td><td>This parameter configures whether the value is displayed horizontally (0) or vertically (1). With the help of the parameter \"<em>mirrored<\/em>\", this alignment can be additionally mirrored.<\/td><td class=\"has-text-align-center\" data-align=\"center\">0-1<\/td><\/tr><tr><td>direct_output<\/td><td>If this option is set (=1) then the value is immediately shown on the display. The display animation is therefore not shown.<\/td><td class=\"has-text-align-center\" data-align=\"center\">0-1<\/td><\/tr><tr><td><em><em>bar_graph_value<\/em><\/em><\/td><td>This is the actual value between 0 and 100 that you want to display.<\/td><td class=\"has-text-align-center\" data-align=\"center\">0-100<\/td><\/tr><tr><td><em><em>red<\/em><\/em><\/td><td>This parameter determines the brightness of the red color of the associated value.<\/td><td class=\"has-text-align-center\" data-align=\"center\">0-255<\/td><\/tr><tr><td><em><em>green<\/em><\/em><\/td><td>This parameter sets the brightness of the green color of the associated value.<\/td><td class=\"has-text-align-center\" data-align=\"center\">0-255<\/td><\/tr><tr><td><em>blue<\/em><\/td><td>This parameter sets the brightness of the blue color of the associated value.<\/td><td class=\"has-text-align-center\" data-align=\"center\">0-255<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">Example<\/h5>\n\n\n\n<p>More detailed information including pictures and videos of the different representations and how you can display them on your pxlBlck are included in the following paragraph.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Display more than one value at the same time<\/h2>\n\n\n\n<p>If you want to visualize only one value on the display of your pxlBlck, the structure of the command is quite simple. You can simply use the table above as a guide. For example, a command to display only one value could look like this.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>pbbar,<span style=\"color:#ff0000\" class=\"has-inline-color\">10000<\/span>,<span style=\"color:#01b3ff\" class=\"has-inline-color\">1<\/span>,<span style=\"color:#f500fe\" class=\"has-inline-color\">1<\/span>,0,<span style=\"color:#6200ff\" class=\"has-inline-color\">0<\/span>,<span style=\"color:#f9a200\" class=\"has-inline-color\">75<\/span>,<span style=\"color:#49fe01\" class=\"has-inline-color\">50,00,0,<\/span><\/strong><\/li><\/ul>\n\n\n\n<p>This command shows for <span style=\"color:#ff0000\" class=\"has-inline-color\">10 seconds (=10000ms)<\/span> the <span style=\"color:#01b3ff\" class=\"has-inline-color\">mirrored <\/span>and <span style=\"color:#f500fe\" class=\"has-inline-color\">filled <\/span>Value <span style=\"color:#f9a200\" class=\"has-inline-color\">75<\/span> <span style=\"color:#6200ff\" class=\"has-inline-color\">With animation<\/span> in the <span style=\"color:#49fe01\" class=\"has-inline-color\">Color red<\/span> an.<\/p>\n\n\n\n<p>If you now want to display (the maximum possible) five values, the command could look like this.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>pbbar,10000,1,1,0,0,10,<span style=\"color:#fc0000\" class=\"has-inline-color\">255,0,0<\/span>,<span style=\"color:#ff7300\" class=\"has-inline-color\">25,0,255,0<\/span>,<span style=\"color:#2fff00\" class=\"has-inline-color\">50,0,0,255<\/span>,<span style=\"color:#0400ff\" class=\"has-inline-color\">75,0,255,255<\/span>,<span style=\"color:#f700ff\" class=\"has-inline-color\">100,255,0,255,<\/span><\/strong><\/li><\/ul>\n\n\n\n<p>In the given example I have marked the settings for each value in color. The first value and its color settings are marked red, the second orange, the third green, the fourth blue and the fifth pink.<\/p>\n\n\n\n<p>So you can send several values with only one command to the pxlBlck for display. But make sure that a maximum of five values can be displayed at the same time.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Example: Using rules to display a defined duration for a date every hour<\/h2>\n\n\n\n<p>For example, if you want to show (as mentioned above) when the current year (2020) is (finally) over, you can use the following rules.<\/p>\n\n\n\n<p>These rules calculate the difference to 1.1.2020 00:00 from the current date or time and convert this difference into a percentage. This percentage is then used to \"feed\" the \"pbbar\" command. Since the display on the pxlBlck_32x8 and the pxlBlck_RingClock differ slightly, you will find two slightly different codes for the rules of your pxlBlck below.<\/p>\n\n\n\n<p>Since the pxlBlck_32x8 can also display a scrolling text, the rules example for the pxlBlck_32x8 also includes the automatic output of \"Goodbye\" messages (in different languages). (Why? See the \"GoodBye 2020\" challenge above. \ud83d\ude42 ).<\/p>\n\n\n\n<p>The rules are triggered every minute by the \"Clock#Time\" event. Information about the ESP-Easy-Rules can be found under the following links.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><em><a href=\"https:\/\/www.letscontrolit.com\/wiki\/index.php\/Tutorial_Rules\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.letscontrolit.com\/wiki\/index.php\/Tutorial_Rules<\/a><\/em><\/strong><\/li><li><strong><em><a href=\"https:\/\/www.letscontrolit.com\/wiki\/index.php\/ESPEasy_System_Variables\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.letscontrolit.com\/wiki\/index.php\/ESPEasy_System_Variables<\/a><\/em><\/strong><\/li><li><strong><em><a href=\"https:\/\/www.letscontrolit.com\/wiki\/index.php\/EasyFormula\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.letscontrolit.com\/wiki\/index.php\/EasyFormula<\/a><\/em><\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 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\/qRqMcECKxsQ?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><figcaption>View of the rules listed below On the displays of the plBlck_32x8, pxlBlck_8x8 and the pxlBlck_RingClock.<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">For pxlBlck_RingClock<\/h3>\n\n\n\n<p>Here is the Rules example for the pxlBlck_RingClock.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-7p5welj6b7.jpg?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"810\" height=\"572\" data-attachment-id=\"14337\" data-permalink=\"https:\/\/nerdiy.de\/en\/howto-pxlblck-display-relative-values-as-a-bargraph-2\/www-nerdiy-de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-7p5welj6b7\/\" data-orig-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-7p5welj6b7.jpg?fit=1224%2C864&amp;ssl=1\" data-orig-size=\"1224,864\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-7p5welj6b7\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-7p5welj6b7.jpg?fit=300%2C212&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-7p5welj6b7.jpg?fit=810%2C572&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-7p5welj6b7.jpg?resize=810%2C572&#038;ssl=1\" alt=\"\" class=\"wp-image-14337\" srcset=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-7p5welj6b7.jpg?resize=1024%2C723&amp;ssl=1 1024w, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-7p5welj6b7.jpg?resize=300%2C212&amp;ssl=1 300w, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-7p5welj6b7.jpg?resize=768%2C542&amp;ssl=1 768w, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-7p5welj6b7.jpg?w=1224&amp;ssl=1 1224w\" sizes=\"auto, (max-width: 810px) 100vw, 810px\" \/><\/a><\/figure>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">on Clock#Time=All,**:** do \/\/1577833200=unixtime at &quot;1.1.2020 @ 00:00&quot; let,1,%unixtime%-1577833200 \/\/calculating seconds passed since 1.1.2020 @ 00:00 let,1, %v1%\/60 \/\/converting to minutes passed since 1.1.2020 @ 00:00 let,1,%v1%\/60 \/\/converting to hours passed since 1.1.2020 @ 00:00 let,1,%v1%\/24 \/\/converting to days passed since 1.1.2020 @ 00:00 let,2,%v1%\/365 \/\/calculating relative value of &quot;how many days of the year 2020 are passed&quot; let,2,%v2%*100 \/\/converting relative (float) value to percentage pbbar,10000,1,1,0,%v2%,50,00,0, endon<\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">For pxlBlck_32x8<\/h3>\n\n\n\n<p>Here is the Rules example for the pxlBlck_RingClock.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-ptkgdynqd1.jpg?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"810\" height=\"572\" data-attachment-id=\"14338\" data-permalink=\"https:\/\/nerdiy.de\/en\/howto-pxlblck-display-relative-values-as-a-bargraph-2\/www-nerdiy-de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-ptkgdynqd1\/\" data-orig-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-ptkgdynqd1.jpg?fit=1224%2C864&amp;ssl=1\" data-orig-size=\"1224,864\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-ptkgdynqd1\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-ptkgdynqd1.jpg?fit=300%2C212&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-ptkgdynqd1.jpg?fit=810%2C572&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-ptkgdynqd1.jpg?resize=810%2C572&#038;ssl=1\" alt=\"\" class=\"wp-image-14338\" srcset=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-ptkgdynqd1.jpg?resize=1024%2C723&amp;ssl=1 1024w, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-ptkgdynqd1.jpg?resize=300%2C212&amp;ssl=1 300w, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-ptkgdynqd1.jpg?resize=768%2C542&amp;ssl=1 768w, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-ptkgdynqd1.jpg?w=1224&amp;ssl=1 1224w\" sizes=\"auto, (max-width: 810px) 100vw, 810px\" \/><\/a><\/figure>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">on Clock#Time=All,**:** do \/\/1577833200=unixtime at &quot;1.1.2020 @ 00:00&quot; let,1,%unixtime%-1577833200 \/\/calculating seconds passed since 1.1.2020 @ 00:00 let,1, %v1%\/60 \/\/converting to minutes passed since 1.1.2020 @ 00:00 let,1,%v1%\/60 \/\/converting to hours passed since 1.1.2020 @ 00:00 let,1,%v1%\/24 \/\/converting to days passed since 1.1.2020 @ 00:00 let,2,%v1%\/365 \/\/calculating relative value of &quot;how many days of the year 2020 are passed&quot; let,2,%v2%*100 \/\/converting relative (float) value to percentage pbbar,2000,0,1,1,%v2%,0,10,0, Delay 2000 \/\/ to give some time for the display of the bar setting pbrntxt,10,10,10,0,0,0,25,8 ,Au Revoir - Adios - Goodbye - Do Svidaniya - G\u00fcle g\u00fcle - Aloha - Selamat tinggal - DaH jImej - Sayonara - I am groot., endon<\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Allow remaining duration to be displayed continuously<\/h3>\n\n\n\n<p>In case you want to display the remaining duration (or any other displayed value) continuously, you just need to set the display duration to be longer than the display refresh interval.<\/p>\n\n\n\n<p>So if you want to show a value on the display every minute and this value should be shown permanently or until the next update, you have to set the value for <em>display_duration<\/em> to (at least) 60000(ms). <\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Example: Send relative (percent) value from NodeRed and display it on the pxlBlck<\/h2>\n\n\n\n<p>An example how to send a relative percentage value (i.e. a value from 0-100) from NodeRed to the pxlBlck and show it on its display can be found in the following NodeCode.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-jaimx9xq6w.jpg?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"810\" height=\"274\" data-attachment-id=\"14339\" data-permalink=\"https:\/\/nerdiy.de\/en\/howto-pxlblck-display-relative-values-as-a-bargraph-2\/www-nerdiy-de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-jaimx9xq6w\/\" data-orig-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-jaimx9xq6w.jpg?fit=1129%2C381&amp;ssl=1\" data-orig-size=\"1129,381\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-jaimx9xq6w\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-jaimx9xq6w.jpg?fit=300%2C101&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-jaimx9xq6w.jpg?fit=810%2C274&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-jaimx9xq6w.jpg?resize=810%2C274&#038;ssl=1\" alt=\"\" class=\"wp-image-14339\" srcset=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-jaimx9xq6w.jpg?resize=1024%2C346&amp;ssl=1 1024w, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-jaimx9xq6w.jpg?resize=300%2C101&amp;ssl=1 300w, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-jaimx9xq6w.jpg?resize=768%2C259&amp;ssl=1 768w, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-jaimx9xq6w.jpg?w=1129&amp;ssl=1 1129w\" sizes=\"auto, (max-width: 810px) 100vw, 810px\" \/><\/a><figcaption>Here you can see the view of the example in the editor of NodeRed.<br>To make the example work you have to change the name of your pxlBlck. You can find more information about this below the examples listed here.<\/figcaption><\/figure>\n\n\n\n<p>The code for the NodeRed examples described here can be found at the following link.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><em><a href=\"https:\/\/github.com\/Nerdiyde\/NodeRedSnippets\/blob\/master\/snippets\/pxlBlck_pbbar_command_nodeRed_control_example.json\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/Nerdiyde\/NodeRedSnippets\/blob\/master\/snippets\/pxlBlck_pbbar_command_nodeRed_control_example.json<\/a><\/em><\/strong><\/li><\/ul>\n\n\n\n<p>How to import it into your NodeRed installation is described in the following article.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><em><a href=\"https:\/\/nerdiy.de\/en\/import-and-export-nodered-node-code\/\" target=\"_blank\" rel=\"noreferrer noopener\">NodeRed - import and export node code<\/a><\/em><\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 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\/6a-kWiDZhz4?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><figcaption>View on the display if you use the above example for NodeRed.<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Example: Send non-relative values from NodeRed and display them on the PxlBlck.<\/h2>\n\n\n\n<p>This example shows how you can send non-relative values to your pxlBlck using NodeRed. For this to work, the absolute value is limited to \"down\" and \"up\" using the range-node and scaled to the 0-100 value range of the pxlBlck. This happens in the node named \"set allowed range for scaling\".<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-oaklxblyaf.jpg?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"810\" height=\"218\" data-attachment-id=\"14340\" data-permalink=\"https:\/\/nerdiy.de\/en\/howto-pxlblck-display-relative-values-as-a-bargraph-2\/www-nerdiy-de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-oaklxblyaf\/\" data-orig-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-oaklxblyaf.jpg?fit=1273%2C342&amp;ssl=1\" data-orig-size=\"1273,342\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-oaklxblyaf\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-oaklxblyaf.jpg?fit=300%2C81&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-oaklxblyaf.jpg?fit=810%2C218&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-oaklxblyaf.jpg?resize=810%2C218&#038;ssl=1\" alt=\"\" class=\"wp-image-14340\" srcset=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-oaklxblyaf.jpg?resize=1024%2C275&amp;ssl=1 1024w, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-oaklxblyaf.jpg?resize=300%2C81&amp;ssl=1 300w, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-oaklxblyaf.jpg?resize=768%2C206&amp;ssl=1 768w, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-oaklxblyaf.jpg?w=1273&amp;ssl=1 1273w\" sizes=\"auto, (max-width: 810px) 100vw, 810px\" \/><\/a><figcaption>Here you can see the view of the example in the editor of NodeRed.<br>To make the example work you have to change the name of your pxlBlck. You can find more information about this below the examples listed here.<\/figcaption><\/figure>\n\n\n\n<p>The code for the NodeRed examples described here can be found at the following link. <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><em><a href=\"https:\/\/github.com\/Nerdiyde\/NodeRedSnippets\/blob\/master\/snippets\/pxlBlck_pbbar_command_nodeRed_control_example.json\">https:\/\/github.com\/Nerdiyde\/No<\/a><a href=\"https:\/\/github.com\/Nerdiyde\/NodeRedSnippets\/blob\/master\/snippets\/pxlBlck_pbbar_command_nodeRed_control_example.json\" target=\"_blank\" rel=\"noreferrer noopener\">i.e<\/a><a href=\"https:\/\/github.com\/Nerdiyde\/NodeRedSnippets\/blob\/master\/snippets\/pxlBlck_pbbar_command_nodeRed_control_example.json\">eRedSnippets\/blob\/master\/snippets\/pxlBlck_pbbar_command_nodeRed_control_example.json<\/a><\/em><\/strong><\/li><\/ul>\n\n\n\n<p>How to import it into your NodeRed installation is described in the following article.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><em><a href=\"https:\/\/nerdiy.de\/en\/import-and-export-nodered-node-code\/\" target=\"_blank\" rel=\"noreferrer noopener\">NodeRed - import and export node code<\/a><\/em><\/strong><\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"block-ae547ff6-b825-4a84-bd5f-44439ce0c9f1\">Example: Send five relative values from NodeRed and display them on the PxlBlck at the same time<\/h2>\n\n\n\n<p>This example shows how you can send five values at the same time to your pxlBlck using NodeRed. Additionally you can set the display options. The single values will be collected in variables and on push of a button (\"send to pxlBlck\") assembled to a command and sent to the pxlBlck.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-jn072mvzsy.jpg?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"810\" height=\"497\" data-attachment-id=\"14341\" data-permalink=\"https:\/\/nerdiy.de\/en\/howto-pxlblck-display-relative-values-as-a-bargraph-2\/www-nerdiy-de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-jn072mvzsy\/\" data-orig-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-jn072mvzsy.jpg?fit=1190%2C730&amp;ssl=1\" data-orig-size=\"1190,730\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-jn072mvzsy\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-jn072mvzsy.jpg?fit=300%2C184&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-jn072mvzsy.jpg?fit=810%2C497&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-jn072mvzsy.jpg?resize=810%2C497&#038;ssl=1\" alt=\"\" class=\"wp-image-14341\" srcset=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-jn072mvzsy.jpg?resize=1024%2C628&amp;ssl=1 1024w, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-jn072mvzsy.jpg?resize=300%2C184&amp;ssl=1 300w, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-jn072mvzsy.jpg?resize=768%2C471&amp;ssl=1 768w, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-jn072mvzsy.jpg?w=1190&amp;ssl=1 1190w\" sizes=\"auto, (max-width: 810px) 100vw, 810px\" \/><\/a><figcaption>Here you can see the view of the example in the editor of NodeRed.<br>To make the example work you have to change the name of your pxlBlck. You can find more information about this below the examples listed here.<\/figcaption><\/figure>\n\n\n\n<p>The code for the NodeRed examples described here can be found at the following link.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><em><a href=\"https:\/\/github.com\/Nerdiyde\/NodeRedSnippets\/blob\/master\/snippets\/pxlBlck_pbbar_command_nodeRed_control_example.json\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/Nerdiyde\/NodeRedSnippets\/blob\/master\/snippets\/pxlBlck_pbbar_command_nodeRed_control_example.json<\/a><\/em><\/strong><\/li><\/ul>\n\n\n\n<p>How to import it into your NodeRed installation is described in the following article.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><em><a href=\"https:\/\/nerdiy.de\/en\/import-and-export-nodered-node-code\/\" target=\"_blank\" rel=\"noreferrer noopener\">NodeRed - import and export node code<\/a><\/em><\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 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\/8ztvh2nygiE?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><figcaption>View on the display of the pxlBlck_32x8 if you use the above example for NodeRed. The first displayed value (green) has first the value 25, then 50 and then 0.<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Info about customization\/configuration of the listed NodeRed examples.<\/h2>\n\n\n\n<p>You should adjust the above examples a bit before you can test them successfully.<\/p>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile has-light-gray-background-color has-background\"><figure class=\"wp-block-media-text__media\"><a href=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-vtohom28m0.jpg?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"699\" height=\"857\" data-attachment-id=\"14348\" data-permalink=\"https:\/\/nerdiy.de\/en\/howto-pxlblck-display-relative-values-as-a-bargraph-2\/www-nerdiy-de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-vtohom28m0\/\" data-orig-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-vtohom28m0.jpg?fit=699%2C857&amp;ssl=1\" data-orig-size=\"699,857\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-vtohom28m0\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-vtohom28m0.jpg?fit=245%2C300&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-vtohom28m0.jpg?fit=699%2C857&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-vtohom28m0.jpg?resize=699%2C857&#038;ssl=1\" alt=\"\" class=\"wp-image-14348 size-full\" srcset=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-vtohom28m0.jpg?w=699&amp;ssl=1 699w, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-vtohom28m0.jpg?resize=245%2C300&amp;ssl=1 245w\" sizes=\"auto, (max-width: 699px) 100vw, 699px\" \/><\/a><\/figure><div class=\"wp-block-media-text__content\">\n<p>For this you have to enter the appropriate name of your pxlBlck in the MQTT node.<\/p>\n\n\n\n<p>In the example visible on the left, the name of my used pxlBlck is<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>pxlBlck_32x8_ESP32<\/p><\/blockquote>\n\n\n\n<p>You should change this part of the topic and of course enter the name of your pxlBlck there.<\/p>\n<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile has-light-gray-background-color has-background\"><figure class=\"wp-block-media-text__media\"><a href=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-oalgj3m8xl.jpg?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"810\" height=\"459\" data-attachment-id=\"14349\" data-permalink=\"https:\/\/nerdiy.de\/en\/howto-pxlblck-display-relative-values-as-a-bargraph-2\/www-nerdiy-de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-oalgj3m8xl\/\" data-orig-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-oalgj3m8xl.jpg?fit=1463%2C828&amp;ssl=1\" data-orig-size=\"1463,828\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-oalgj3m8xl\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-oalgj3m8xl.jpg?fit=300%2C170&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-oalgj3m8xl.jpg?fit=810%2C459&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-oalgj3m8xl.jpg?resize=810%2C459&#038;ssl=1\" alt=\"\" class=\"wp-image-14349 size-full\" srcset=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-oalgj3m8xl.jpg?resize=1024%2C580&amp;ssl=1 1024w, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-oalgj3m8xl.jpg?resize=300%2C170&amp;ssl=1 300w, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-oalgj3m8xl.jpg?resize=768%2C435&amp;ssl=1 768w, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-oalgj3m8xl.jpg?resize=135%2C75&amp;ssl=1 135w, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-chrome-oalgj3m8xl.jpg?w=1463&amp;ssl=1 1463w\" sizes=\"auto, (max-width: 810px) 100vw, 810px\" \/><\/a><\/figure><div class=\"wp-block-media-text__content\">\n<p>Here you can see the content of the first function node. <\/p>\n\n\n\n<p>You don't have to change anything here. However, it's worth a look here if you're interested in how the command is composed and where the data is obtained from. \ud83d\ude42<\/p>\n<\/div><\/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>I started with the documentation of the pxlBlcks in November 2020 after Hackaday.com announced the \"GoodBye 2020\"-Challenge. (More info here: https:\/\/hackaday.io\/contest\/175608-goodbye-2020\/details) I had used [...]<\/p>","protected":false},"author":1,"featured_media":14353,"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,146,113,153,61,339],"tags":[245,170,165,151,154,301],"class_list":["post-14297","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3d-druck","category-abendprojekt2h","category-esp-easy","category-node-red","category-pxlblck","category-smarthome","category-sticky","tag-esp32","tag-esp8266-2","tag-espeasy","tag-espeasy-plugin","tag-pxlblck","tag-pxlblckusecase"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>HowTo: pxlBlck - Relative Werte als BarGraph darstellen - 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-pxlblck-display-relative-values-as-a-bargraph-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HowTo: pxlBlck - Relative Werte als BarGraph darstellen - 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-pxlblck-display-relative-values-as-a-bargraph-2\/\" \/>\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-28T17:59:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-03-16T14:21:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01328-scaled.jpg?fit=2560%2C1707&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1707\" \/>\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=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-relative-werte-als-bargraph-darstellen\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-relative-werte-als-bargraph-darstellen\\\/\"},\"author\":{\"name\":\"Fab\",\"@id\":\"https:\\\/\\\/nerdiy.de\\\/de_de\\\/#\\\/schema\\\/person\\\/f1579a71868adb0be60a74246d3e0908\"},\"headline\":\"HowTo: pxlBlck &#8211; Relative Werte als BarGraph darstellen\",\"datePublished\":\"2020-12-28T17:59:59+00:00\",\"dateModified\":\"2021-03-16T14:21:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-relative-werte-als-bargraph-darstellen\\\/\"},\"wordCount\":1783,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\\\/\\\/nerdiy.de\\\/de_de\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-relative-werte-als-bargraph-darstellen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/nerdiy.de\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01328-scaled.jpg?fit=2560%2C1707&ssl=1\",\"keywords\":[\"ESP32\",\"ESP8266\",\"ESPEasy\",\"ESPEasy-Plugin\",\"pxlBlck\",\"pxlBlckUsecase\"],\"articleSection\":[\"3D-Druck\",\"Abendprojekt(&lt;2h)\",\"ESP Easy\",\"Node Red\",\"pxlBlck\",\"SmartHome\",\"Sticky\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-relative-werte-als-bargraph-darstellen\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-relative-werte-als-bargraph-darstellen\\\/\",\"url\":\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-relative-werte-als-bargraph-darstellen\\\/\",\"name\":\"HowTo: pxlBlck - Relative Werte als BarGraph darstellen - nerdiy.de - DIY, Elektronik, 3D Druck und mehr...\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/nerdiy.de\\\/de_de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-relative-werte-als-bargraph-darstellen\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-relative-werte-als-bargraph-darstellen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/nerdiy.de\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01328-scaled.jpg?fit=2560%2C1707&ssl=1\",\"datePublished\":\"2020-12-28T17:59:59+00:00\",\"dateModified\":\"2021-03-16T14:21:02+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-relative-werte-als-bargraph-darstellen\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-relative-werte-als-bargraph-darstellen\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-relative-werte-als-bargraph-darstellen\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/nerdiy.de\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01328-scaled.jpg?fit=2560%2C1707&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/nerdiy.de\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01328-scaled.jpg?fit=2560%2C1707&ssl=1\",\"width\":2560,\"height\":1707},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/nerdiy.de\\\/howto-pxlblck-relative-werte-als-bargraph-darstellen\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/nerdiy.de\\\/de_de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HowTo: pxlBlck &#8211; Relative Werte als BarGraph darstellen\"}]},{\"@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 - Display relative values as BarGraph - 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-pxlblck-display-relative-values-as-a-bargraph-2\/","og_locale":"en_US","og_type":"article","og_title":"HowTo: pxlBlck - Relative Werte als BarGraph darstellen - 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-pxlblck-display-relative-values-as-a-bargraph-2\/","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-28T17:59:59+00:00","article_modified_time":"2021-03-16T14:21:02+00:00","og_image":[{"width":2560,"height":1707,"url":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01328-scaled.jpg?fit=2560%2C1707&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":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/nerdiy.de\/howto-pxlblck-relative-werte-als-bargraph-darstellen\/#article","isPartOf":{"@id":"https:\/\/nerdiy.de\/howto-pxlblck-relative-werte-als-bargraph-darstellen\/"},"author":{"name":"Fab","@id":"https:\/\/nerdiy.de\/de_de\/#\/schema\/person\/f1579a71868adb0be60a74246d3e0908"},"headline":"HowTo: pxlBlck &#8211; Relative Werte als BarGraph darstellen","datePublished":"2020-12-28T17:59:59+00:00","dateModified":"2021-03-16T14:21:02+00:00","mainEntityOfPage":{"@id":"https:\/\/nerdiy.de\/howto-pxlblck-relative-werte-als-bargraph-darstellen\/"},"wordCount":1783,"commentCount":4,"publisher":{"@id":"https:\/\/nerdiy.de\/de_de\/#organization"},"image":{"@id":"https:\/\/nerdiy.de\/howto-pxlblck-relative-werte-als-bargraph-darstellen\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01328-scaled.jpg?fit=2560%2C1707&ssl=1","keywords":["ESP32","ESP8266","ESPEasy","ESPEasy-Plugin","pxlBlck","pxlBlckUsecase"],"articleSection":["3D-Druck","Abendprojekt(&lt;2h)","ESP Easy","Node Red","pxlBlck","SmartHome","Sticky"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/nerdiy.de\/howto-pxlblck-relative-werte-als-bargraph-darstellen\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/nerdiy.de\/howto-pxlblck-relative-werte-als-bargraph-darstellen\/","url":"https:\/\/nerdiy.de\/howto-pxlblck-relative-werte-als-bargraph-darstellen\/","name":"HowTo: pxlBlck - Display relative values as BarGraph - nerdiy.de - DIY, electronics, 3D printing and more...","isPartOf":{"@id":"https:\/\/nerdiy.de\/de_de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/nerdiy.de\/howto-pxlblck-relative-werte-als-bargraph-darstellen\/#primaryimage"},"image":{"@id":"https:\/\/nerdiy.de\/howto-pxlblck-relative-werte-als-bargraph-darstellen\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01328-scaled.jpg?fit=2560%2C1707&ssl=1","datePublished":"2020-12-28T17:59:59+00:00","dateModified":"2021-03-16T14:21:02+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-relative-werte-als-bargraph-darstellen\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/nerdiy.de\/howto-pxlblck-relative-werte-als-bargraph-darstellen\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/nerdiy.de\/howto-pxlblck-relative-werte-als-bargraph-darstellen\/#primaryimage","url":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01328-scaled.jpg?fit=2560%2C1707&ssl=1","contentUrl":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-relative-werte-als-bargraph-darstellen-dsc01328-scaled.jpg?fit=2560%2C1707&ssl=1","width":2560,"height":1707},{"@type":"BreadcrumbList","@id":"https:\/\/nerdiy.de\/howto-pxlblck-relative-werte-als-bargraph-darstellen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/nerdiy.de\/de_de\/"},{"@type":"ListItem","position":2,"name":"HowTo: pxlBlck &#8211; Relative Werte als BarGraph darstellen"}]},{"@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-relative-werte-als-bargraph-darstellen-dsc01328-scaled.jpg?fit=2560%2C1707&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9GM3g-3IB","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":16917,"url":"https:\/\/nerdiy.de\/en\/news-june-2021-my-projects-for-the-hackadayprize-2021\/","url_meta":{"origin":14297,"position":0},"title":"News: June 2021 - My projects for the HackadayPrize 2021","author":"Fab","date":"3. June 2021","format":false,"excerpt":"Vor ein paar Tagen wurde der Hackaday Prize 2021 angek\u00fcndigt. Relativ schnell war f\u00fcr mich klar, dass ich auch dieses Jahr wieder versuchen m\u00f6chte ein paar meiner Projekte einzureichen. Dabei war der Zeitplan ziemlich Straff. Ich hatte bereits in den Kommentaren unter dem Artikel zum HackadayPrize gelesen, dass die Fristen\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\/2021\/06\/www.nerdiy.de-news-meine-projekte-fuer-den-hackadayprize-2021-dsc01817-scaled.jpg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2021\/06\/www.nerdiy.de-news-meine-projekte-fuer-den-hackadayprize-2021-dsc01817-scaled.jpg?fit=1200%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2021\/06\/www.nerdiy.de-news-meine-projekte-fuer-den-hackadayprize-2021-dsc01817-scaled.jpg?fit=1200%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2021\/06\/www.nerdiy.de-news-meine-projekte-fuer-den-hackadayprize-2021-dsc01817-scaled.jpg?fit=1200%2C800&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2021\/06\/www.nerdiy.de-news-meine-projekte-fuer-den-hackadayprize-2021-dsc01817-scaled.jpg?fit=1200%2C800&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":13745,"url":"https:\/\/nerdiy.de\/en\/howto-configure-pxlblck-clockfaces-and-screensavers-2\/","url_meta":{"origin":14297,"position":1},"title":"HowTo: pxlBlck \u2013 configure clock faces and screen savers","author":"Fab","date":"12. December 2020","format":false,"excerpt":"Die einstellbaren Ziffernbl\u00e4tter unterscheiden sich von der Art der verwendeten LED-Matrix. Dies ist leider so, da unterschiedliche Matrix-Gr\u00f6\u00dfen unterschiedliche Darstellungen erm\u00f6glichen bzw. nicht erm\u00f6glichen. Um Euch trotzdem einen kleinen \u00dcberblick zu geben welche Ziffernbl\u00e4tter bei welcher Matrix m\u00f6glich sind, kommt hier eine Vorstellung der einstellbaren Ziffernbl\u00e4tter und die Angabe unter\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-ziffernblaetter-und-bildschirmschoner-konfigurieren-20201209-125839.jpg?fit=1200%2C900&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-ziffernblaetter-und-bildschirmschoner-konfigurieren-20201209-125839.jpg?fit=1200%2C900&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-ziffernblaetter-und-bildschirmschoner-konfigurieren-20201209-125839.jpg?fit=1200%2C900&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-ziffernblaetter-und-bildschirmschoner-konfigurieren-20201209-125839.jpg?fit=1200%2C900&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/nerdiy.de\/wp-content\/uploads\/2020\/12\/www.nerdiy.de-howto-pxlblck-ziffernblaetter-und-bildschirmschoner-konfigurieren-20201209-125839.jpg?fit=1200%2C900&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":13274,"url":"https:\/\/nerdiy.de\/en\/howto-install-and-configure-pxlblck-the-pxlblck-plugin\/","url_meta":{"origin":14297,"position":2},"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":13724,"url":"https:\/\/nerdiy.de\/en\/howto-pxlblck-commands-to-configure-the-pxlblck\/","url_meta":{"origin":14297,"position":3},"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":8847,"url":"https:\/\/nerdiy.de\/en\/pxlblck-all-infos-for-testers-of-the-latest-pre-release\/","url_meta":{"origin":14297,"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":13964,"url":"https:\/\/nerdiy.de\/en\/howto-configure-and-display-pxlblck-animations\/","url_meta":{"origin":14297,"position":5},"title":"HowTo: pxlBlck \u2013 Configure and display animations","author":"Fab","date":"12. December 2020","format":false,"excerpt":"Mithilfe des pxlBlcks k\u00f6nnt Ihr Euch auf verschiedenen Wegen \u00fcber Ereignisse informieren lassen. Eine dieser M\u00f6glichkeiten besteht darin sich zuvor eingestellte Icons anzeigen lassen zu k\u00f6nnen. Leider funktioniert diese M\u00f6glichkeit nur auf LED-Matrizen mit einer H\u00f6he gr\u00f6\u00dfer als eins, also nicht auf den pxlBlcks welch \"nur\" einen LED-Streifen bzw. eine\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-animationen-konfigurieren-und-anzeigen-img-20201210-235604.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-howto-pxlblck-animationen-konfigurieren-und-anzeigen-img-20201210-235604.jpg?fit=1200%2C1200&ssl=1&resize=350%2C200 1x, 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=1200%2C1200&ssl=1&resize=525%2C300 1.5x, 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=1200%2C1200&ssl=1&resize=700%2C400 2x, 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=1200%2C1200&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/nerdiy.de\/en\/wp-json\/wp\/v2\/posts\/14297","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=14297"}],"version-history":[{"count":0,"href":"https:\/\/nerdiy.de\/en\/wp-json\/wp\/v2\/posts\/14297\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nerdiy.de\/en\/wp-json\/wp\/v2\/media\/14353"}],"wp:attachment":[{"href":"https:\/\/nerdiy.de\/en\/wp-json\/wp\/v2\/media?parent=14297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nerdiy.de\/en\/wp-json\/wp\/v2\/categories?post=14297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nerdiy.de\/en\/wp-json\/wp\/v2\/tags?post=14297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}