{"id":16529,"date":"2021-03-18T04:36:18","date_gmt":"2021-03-18T03:36:18","guid":{"rendered":"http:\/\/blog.wenzlaff.de\/?p=16529"},"modified":"2021-04-18T09:15:08","modified_gmt":"2021-04-18T07:15:08","slug":"qr-code-im-flow-anzeigen","status":"publish","type":"post","link":"http:\/\/blog.wenzlaff.de\/?p=16529","title":{"rendered":"Digitaler Impfnachweis der EU-Kommission setzt auf QR-Codes und nicht auf die &#8222;neue&#8220; Gesundheitskarte, deshalb hier die QR-Codes im NodeRed-Flow anzeigen"},"content":{"rendered":"<p><a href=\"http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/03\/Qr-code-scaled.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/03\/Qr-code-scaled.jpg\" alt=\"\" width=\"2560\" height=\"1919\" class=\"aligncenter size-full wp-image-16535\" srcset=\"http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/03\/Qr-code-scaled.jpg 2560w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/03\/Qr-code-300x225.jpg 300w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/03\/Qr-code-1024x768.jpg 1024w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/03\/Qr-code-768x576.jpg 768w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/03\/Qr-code-1536x1151.jpg 1536w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/03\/Qr-code-2048x1535.jpg 2048w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><br \/>\nIn <a href=\"http:\/\/blog.wenzlaff.de\/?p=16439\" rel=\"noopener\" target=\"_blank\">diesem<\/a> Beitrag hatte ich den neuen Node, der aus Text leicht einen QR-Code erzeugt beschrieben. Wie k\u00f6nnen aber nun QR-Codes direkt in einem NodeRed-Flow und nicht nur im Dashboard angezeigt werden?<\/p>\n<p>Hier ein produktiver Prototyp dazu, man sieht unten rechts den Barcode im Flow. Cool. Geht auch mit Impfnachweisen \ud83d\ude09 &#8230;<!--more--><\/p>\n<p><a href=\"http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/03\/qr-code-in-flow.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/03\/qr-code-in-flow.png\" alt=\"\" width=\"1854\" height=\"1052\" class=\"aligncenter size-full wp-image-16530\" srcset=\"http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/03\/qr-code-in-flow.png 1854w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/03\/qr-code-in-flow-300x170.png 300w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/03\/qr-code-in-flow-1024x581.png 1024w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/03\/qr-code-in-flow-768x436.png 768w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/03\/qr-code-in-flow-1536x872.png 1536w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><\/p>\n<p>Damit der Flow auf die QR-Code Dateien zugreifen kann, muss in der <strong>settings.js<\/strong><\/p>\n<p>das Verzeichnis f\u00fcr Static ge\u00f6ffnet werden: httpStatic: &#8218;\/data\/&#8216;  und dann ein restart. <\/p>\n<p>Dann kann man testen, ob der Zugriff auf das Verzeichnis \u00fcber URL l\u00e4uft z.B. http:\/\/pi:1880\/wenzlaff-address-qr-code.png<\/p>\n<p>Das Bild muss dann im Browser angezeigt werden.<\/p>\n<p>Hier der ganze Flow als Beispielcode <\/p>\n<pre class=\"lang:js decode:true \" >[\r\n    {\r\n        \"id\": \"15f97750.9f15d1\",\r\n        \"type\": \"inject\",\r\n        \"z\": \"fa6c893a.ae8d8\",\r\n        \"name\": \"Meine echte Bitcoin Adresse\",\r\n        \"props\": [\r\n            {\r\n                \"p\": \"payload\"\r\n            }\r\n        ],\r\n        \"repeat\": \"\",\r\n        \"crontab\": \"\",\r\n        \"once\": false,\r\n        \"onceDelay\": 0.1,\r\n        \"topic\": \"\",\r\n        \"payload\": \"bitcoin:1NSaQXyTHGanGvQHgPkoSDtbBY2LFySnyc\",\r\n        \"payloadType\": \"str\",\r\n        \"x\": 240,\r\n        \"y\": 160,\r\n        \"wires\": [\r\n            [\r\n                \"432536df.024b4\"\r\n            ]\r\n        ]\r\n    },\r\n    {\r\n        \"id\": \"ed289c05.b34a7\",\r\n        \"type\": \"comment\",\r\n        \"z\": \"fa6c893a.ae8d8\",\r\n        \"name\": \"(c) 2021 Thomas Wenzlaff www.wenzlaff.info\",\r\n        \"info\": \"\",\r\n        \"x\": 810,\r\n        \"y\": 60,\r\n        \"wires\": []\r\n    },\r\n    {\r\n        \"id\": \"987d0461.3a3738\",\r\n        \"type\": \"comment\",\r\n        \"z\": \"fa6c893a.ae8d8\",\r\n        \"name\": \"Create simple QR-Code from Bitcoin Address or other text\",\r\n        \"info\": \"\",\r\n        \"x\": 310,\r\n        \"y\": 60,\r\n        \"wires\": []\r\n    },\r\n    {\r\n        \"id\": \"c36f4049.b9248\",\r\n        \"type\": \"cryptoqrcode\",\r\n        \"z\": \"fa6c893a.ae8d8\",\r\n        \"name\": \"\",\r\n        \"filename\": \"\/data\/wenzlaff-address-qr-code.png\",\r\n        \"prefix\": \"\",\r\n        \"x\": 570,\r\n        \"y\": 160,\r\n        \"wires\": [\r\n            []\r\n        ]\r\n    },\r\n    {\r\n        \"id\": \"ca1faa5b.5d7e38\",\r\n        \"type\": \"image viewer\",\r\n        \"z\": \"fa6c893a.ae8d8\",\r\n        \"name\": \"Anzeigen\",\r\n        \"width\": \"160\",\r\n        \"data\": \"payload\",\r\n        \"dataType\": \"msg\",\r\n        \"x\": 900,\r\n        \"y\": 280,\r\n        \"wires\": [\r\n            []\r\n        ]\r\n    },\r\n    {\r\n        \"id\": \"38e5e7e1.a5be58\",\r\n        \"type\": \"jimp-image\",\r\n        \"z\": \"fa6c893a.ae8d8\",\r\n        \"name\": \"QR-Code\",\r\n        \"data\": \"payload\",\r\n        \"dataType\": \"msg\",\r\n        \"ret\": \"img\",\r\n        \"parameter1\": \"\",\r\n        \"parameter1Type\": \"msg\",\r\n        \"parameter2\": \"\",\r\n        \"parameter2Type\": \"msg\",\r\n        \"parameter3\": \"\",\r\n        \"parameter3Type\": \"msg\",\r\n        \"parameter4\": \"\",\r\n        \"parameter4Type\": \"msg\",\r\n        \"parameter5\": \"\",\r\n        \"parameter5Type\": \"msg\",\r\n        \"parameter6\": \"\",\r\n        \"parameter6Type\": \"msg\",\r\n        \"parameter7\": \"\",\r\n        \"parameter7Type\": \"msg\",\r\n        \"parameter8\": \"\",\r\n        \"parameter8Type\": \"msg\",\r\n        \"sendProperty\": \"payload\",\r\n        \"sendPropertyType\": \"msg\",\r\n        \"parameterCount\": 0,\r\n        \"jimpFunction\": \"none\",\r\n        \"selectedJimpFunction\": {\r\n            \"name\": \"none\",\r\n            \"fn\": \"none\",\r\n            \"description\": \"Just loads the image.\",\r\n            \"parameters\": []\r\n        },\r\n        \"x\": 740,\r\n        \"y\": 280,\r\n        \"wires\": [\r\n            [\r\n                \"ca1faa5b.5d7e38\"\r\n            ]\r\n        ]\r\n    },\r\n    {\r\n        \"id\": \"672bd969.3ff0d8\",\r\n        \"type\": \"function\",\r\n        \"z\": \"fa6c893a.ae8d8\",\r\n        \"name\": \"Set Payload\",\r\n        \"func\": \"msg.payload = \\\"http:\/\/PI-ADRESSE-Eintragen:1880\/wenzlaff-address-qr-code.png\\\"\\nreturn msg;\",\r\n        \"outputs\": 1,\r\n        \"noerr\": 0,\r\n        \"initialize\": \"\",\r\n        \"finalize\": \"\",\r\n        \"x\": 550,\r\n        \"y\": 280,\r\n        \"wires\": [\r\n            [\r\n                \"38e5e7e1.a5be58\"\r\n            ]\r\n        ]\r\n    },\r\n    {\r\n        \"id\": \"1d73b5de.0c1082\",\r\n        \"type\": \"comment\",\r\n        \"z\": \"fa6c893a.ae8d8\",\r\n        \"name\": \"In den paylod kommt der Inhalt des QR-Codes\",\r\n        \"info\": \"\",\r\n        \"x\": 280,\r\n        \"y\": 120,\r\n        \"wires\": []\r\n    },\r\n    {\r\n        \"id\": \"9c186f66.5f672\",\r\n        \"type\": \"ui_template\",\r\n        \"z\": \"fa6c893a.ae8d8\",\r\n        \"group\": \"133f148a.00b863\",\r\n        \"name\": \"QR-Code\",\r\n        \"order\": 0,\r\n        \"width\": \"9\",\r\n        \"height\": \"9\",\r\n        \"format\": \"\\n&lt;img width=\\\"300\\\" height=\\\"300\\\" src=\\\"{{msg.qrcode}}\\\" alt=\\\"QR-Code nicht gefunden.\\\"  \/&gt;\\n\",\r\n        \"storeOutMessages\": true,\r\n        \"fwdInMessages\": true,\r\n        \"resendOnRefresh\": true,\r\n        \"templateScope\": \"local\",\r\n        \"x\": 740,\r\n        \"y\": 220,\r\n        \"wires\": [\r\n            [\r\n                \"659b5615.61388\"\r\n            ]\r\n        ]\r\n    },\r\n    {\r\n        \"id\": \"659b5615.61388\",\r\n        \"type\": \"debug\",\r\n        \"z\": \"fa6c893a.ae8d8\",\r\n        \"name\": \"Info\",\r\n        \"active\": true,\r\n        \"tosidebar\": true,\r\n        \"console\": false,\r\n        \"tostatus\": true,\r\n        \"complete\": \"payload\",\r\n        \"targetType\": \"msg\",\r\n        \"statusVal\": \"payload\",\r\n        \"statusType\": \"auto\",\r\n        \"x\": 890,\r\n        \"y\": 220,\r\n        \"wires\": []\r\n    },\r\n    {\r\n        \"id\": \"e0d18c4.8e93d7\",\r\n        \"type\": \"comment\",\r\n        \"z\": \"fa6c893a.ae8d8\",\r\n        \"name\": \"Anpassung in der settings.js n\u00f6tig\",\r\n        \"info\": \"In der settings.js\\n\\ndas Verzeichnis f\u00fcr Static \u00f6ffnen\\n\\nhttpStatic: '\/data\/',\\n\\nsetzen. \\n\\nRestart. \\n\\nZugriff dann \u00fcber \\n\\nhttp:\/\/pi:1880\/wenzlaff-address-qr-code.png\",\r\n        \"x\": 240,\r\n        \"y\": 520,\r\n        \"wires\": []\r\n    },\r\n    {\r\n        \"id\": \"9bf09b2a.189ce8\",\r\n        \"type\": \"function\",\r\n        \"z\": \"fa6c893a.ae8d8\",\r\n        \"name\": \"Set Payload\",\r\n        \"func\": \"\/\/ damit der Browser das Bild neu l\u00e4dt, \\n\/\/ und nicht aus dem cash holt mit Date getTime das neuladen erzwingen\\nmsg.qrcode = \\\"http:\/\/pi-vier:1880\/wenzlaff-address-qr-code.png?\\\" + new Date().getTime();\\nreturn msg;\",\r\n        \"outputs\": 1,\r\n        \"noerr\": 0,\r\n        \"initialize\": \"\",\r\n        \"finalize\": \"\",\r\n        \"x\": 550,\r\n        \"y\": 220,\r\n        \"wires\": [\r\n            [\r\n                \"9c186f66.5f672\"\r\n            ]\r\n        ]\r\n    },\r\n    {\r\n        \"id\": \"432536df.024b4\",\r\n        \"type\": \"ui_text_input\",\r\n        \"z\": \"fa6c893a.ae8d8\",\r\n        \"name\": \"\",\r\n        \"label\": \"Inhalt\",\r\n        \"tooltip\": \"Der Text der hier eingebeben wird, wird automatisch zum QR-Code\",\r\n        \"group\": \"133f148a.00b863\",\r\n        \"order\": 1,\r\n        \"width\": \"9\",\r\n        \"height\": \"1\",\r\n        \"passthru\": true,\r\n        \"mode\": \"text\",\r\n        \"delay\": 300,\r\n        \"topic\": \"topic\",\r\n        \"topicType\": \"msg\",\r\n        \"x\": 310,\r\n        \"y\": 240,\r\n        \"wires\": [\r\n            [\r\n                \"672bd969.3ff0d8\",\r\n                \"9bf09b2a.189ce8\",\r\n                \"c36f4049.b9248\"\r\n            ]\r\n        ]\r\n    },\r\n    {\r\n        \"id\": \"30ce2267.ec683e\",\r\n        \"type\": \"comment\",\r\n        \"z\": \"fa6c893a.ae8d8\",\r\n        \"name\": \"Buy my a coffee: bitcoin:1NSaQXyTHGanGvQHgPkoSDtbBY2LFySnyc\",\r\n        \"info\": \"\",\r\n        \"x\": 750,\r\n        \"y\": 520,\r\n        \"wires\": []\r\n    },\r\n    {\r\n        \"id\": \"133f148a.00b863\",\r\n        \"type\": \"ui_group\",\r\n        \"name\": \"QR-Code\",\r\n        \"tab\": \"d59e6cd1.036bd\",\r\n        \"order\": 1,\r\n        \"disp\": true,\r\n        \"width\": \"9\",\r\n        \"collapse\": false\r\n    },\r\n    {\r\n        \"id\": \"d59e6cd1.036bd\",\r\n        \"type\": \"ui_tab\",\r\n        \"name\": \"QR-Code\",\r\n        \"icon\": \"dashboard\",\r\n        \"disabled\": false,\r\n        \"hidden\": false\r\n    }\r\n]<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>In diesem Beitrag hatte ich den neuen Node, der aus Text leicht einen QR-Code erzeugt beschrieben. Wie k\u00f6nnen aber nun QR-Codes direkt in einem NodeRed-Flow und nicht nur im Dashboard angezeigt werden? Hier ein produktiver Prototyp dazu, man sieht unten rechts den Barcode im Flow. Cool. Geht auch mit Impfnachweisen \ud83d\ude09 &#8230;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[220,4606,852,2520,4649,1023,7],"tags":[910,428,1183,879,4795,4794,4793,555,4786,4113,4787],"class_list":["post-16529","post","type-post","status-publish","format-standard","hentry","category-anleitung","category-crypto","category-heimautomatisierung","category-node-red","category-nodered","category-raspberry-pi","category-tools","tag-adresse","tag-barcode","tag-bitcoin","tag-digital","tag-eu","tag-impfnachweis","tag-impfnachweisen","tag-qr-code","tag-qrcod-im-flow","tag-qrcode","tag-qrcodt-erzeugen"],"_links":{"self":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts\/16529","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16529"}],"version-history":[{"count":0,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts\/16529\/revisions"}],"wp:attachment":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16529"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=16529"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=16529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}