Mobilní a webová aplikace Blynk
Blynk je nástroj pro tvorbu mobilního rozhraní a zároveň signalizační prostředník (relay) přes MQTT. Rychle v něm vytvoříte ovládání a zobrazení pro svá zařízení IoT. Tento návod vás provede sestavením hardwaru a jeho připojením ke cloudu.
Cloud se pak propojí s projektem v aplikaci Blynk ve vašem telefonu. Lokální část projektu běží na systému HARDWARIO Raspbian, který má pro propojení připravené všechny potřebné komponenty.
Na konci příkladu budete umět zapínat a vypínat relé, rozsvěcet a zhasínat LED pásek, měnit intenzitu světla posuvníkem a sledovat teplotu (a další sbírané hodnoty) včetně grafů.
Příklady použití platformy TOWER s aplikací Blynk najdete na naší stránce na hackster.io.
Nastavení aplikace Blynk
Nejdřív si stáhněte aplikaci Blynk a vytvořte si účet:
Nastavení Node-RED
Pokud v Node-RED nevidíte uzly Blynk, nainstalujte balíček Blynk node-red-contrib-blynk-ws.
Postupujte podle některého z návodů k projektům, kde je instalace, vytváření a propojování uzlů podrobně vysvětlené.
Videonávod
Pokud dáváte přednost videonávodu, podívejte se na toto video. Je natočené ve starší verzi aplikace Playground, postup je ale stejný.
Přehrání načte video ze služby YouTube (Google).
Příklad: převod ZeRGBA na hexadecimální hodnoty RGB
Hodnoty barev z aplikace Blynk je potřeba převést na správný hexadecimální řetězec RGB. Použijte uzel function v Node-RED a vložte do něj kód níže. Nezapomeňte přepnout ZeRGBa do režimu MERGE a nastavit rozsah hodnot všech tří kanálů na 0–255.
JSON níže je potřeba importovat do Node-RED.
Pokud nevíte, co je Node-RED, můžete si přečíst sekci Programování na počítači nebo sekci Server na Raspberry Pi.
JSON flow ukázkového projektu Blynk
[
{
"id":"702c9447.9b790c",
"type":"blynk-ws-in-write",
"z":"aaf5722e.dfdca",
"name":"",
"pin":"1",
"client":"746d7fe1.2a0be",
"x":330,
"y":280,
"wires":[
[
"4da0fdbd.a3c614"
]
]
},
{
"id":"4da0fdbd.a3c614",
"type":"function",
"z":"aaf5722e.dfdca",
"name":"Convert to BC format",
"func":"var finalString = '\"#'\nvar colorToSave = \"\";\nmsg.arrayOfValues.forEach((color) => {\n var carry = (parseInt(color)).toString(16)\n if(carry.length == 1) carry = \"0\" + carry;\n finalString += carry;\n colorToSave += carry;\n});\n\nflow.set(\"color\", colorToSave);\n\nif((flow.get(\"ledstrip\")) == false){\n msg.payload = '\"#000000(00)\"'\n}\nelse{\n var white = flow.get(\"white\");\n if(white == null) white = \"00\";\n msg.payload = finalString + '(' + white + ')\"'; \n}\n\n\nmsg.topic = \"node/power-controller:0/led-strip/-/color/set\";\nreturn msg;\n",
"outputs":1,
"noerr":0,
"x":600,
"y":280,
"wires":[
[
"a7ef9db0.cc602"
]
]
},
{
"id":"a7ef9db0.cc602",
"type":"mqtt out",
"z":"aaf5722e.dfdca",
"name":"",
"topic":"",
"qos":"",
"retain":"",
"broker":"71afb0a.14d505",
"x":870,
"y":420,
"wires":[
]
},
{
"id":"b596fcc7.b5206",
"type":"blynk-ws-in-write",
"z":"aaf5722e.dfdca",
"name":"",
"pin":"4",
"client":"746d7fe1.2a0be",
"x":330,
"y":460,
"wires":[
[
"80140f23.46bf6"
]
]
},
{
"id":"80140f23.46bf6",
"type":"function",
"z":"aaf5722e.dfdca",
"name":"String to bool parser",
"func":"if(msg.payload == true)\n{\n msg.payload = true;\n}\nelse{\n msg.payload = false;\n}\nmsg.topic = \"node/power-controller:0/relay/-/state/set\";\nreturn msg;",
"outputs":1,
"noerr":0,
"x":600,
"y":460,
"wires":[
[
"a7ef9db0.cc602"
]
]
},
{
"id":"62416cd0.a6dbf4",
"type":"blynk-ws-in-write",
"z":"aaf5722e.dfdca",
"name":"",
"pin":"3",
"client":"746d7fe1.2a0be",
"x":330,
"y":400,
"wires":[
[
"3bce27cc.257308"
]
]
},
{
"id":"3bce27cc.257308",
"type":"function",
"z":"aaf5722e.dfdca",
"name":"Handler",
"func":"var lastColor = flow.get(\"color\")|| \"000000(00)\";\n\nif(msg.payload == false) {\n msg.payload = '\"#000000(00)\"';\n flow.set(\"ledstrip\", false);\n}\nelse {\n msg.payload = '\"#' + '' + lastColor + '\"';\n flow.set(\"ledstrip\", true);\n}\nmsg.topic = \"node/power-controller:0/led-strip/-/color/set\";\n\nreturn msg;",
"outputs":1,
"noerr":0,
"x":640,
"y":400,
"wires":[
[
"a7ef9db0.cc602"
]
]
},
{
"id":"d619d828.3e1bf8",
"type":"blynk-ws-in-write",
"z":"aaf5722e.dfdca",
"name":"",
"pin":"5",
"client":"746d7fe1.2a0be",
"x":330,
"y":520,
"wires":[
[
"9b87dc69.53d55"
]
]
},
{
"id":"e267bf2d.7e292",
"type":"blynk-ws-in-write",
"z":"aaf5722e.dfdca",
"name":"",
"pin":"6",
"client":"746d7fe1.2a0be",
"x":330,
"y":580,
"wires":[
[
"81fcc52c.023c08"
]
]
},
{
"id":"3121623b.8b75de",
"type":"blynk-ws-in-write",
"z":"aaf5722e.dfdca",
"name":"",
"pin":"2",
"client":"746d7fe1.2a0be",
"x":330,
"y":340,
"wires":[
[
"99a36ea2.e29bf"
]
]
},
{
"id":"9b87dc69.53d55",
"type":"function",
"z":"aaf5722e.dfdca",
"name":"Rainbow",
"func":"if(msg.payload == true && flow.get(\"ledstrip\")||true){\n msg.payload = '{\"type\":\"rainbow\", \"wait\":50}';\n msg.topic = \"node/power-controller:0/led-strip/-/effect/set\" \n}\n\nreturn msg;",
"outputs":1,
"noerr":0,
"x":640,
"y":520,
"wires":[
[
"a7ef9db0.cc602"
]
]
},
{
"id":"81fcc52c.023c08",
"type":"function",
"z":"aaf5722e.dfdca",
"name":"Theater chase",
"func":"if(msg.payload == true && flow.get(\"ledstrip\")||true){\n msg.payload = '{\"type\":\"theater-chase-rainbow\", \"wait\":50}';\n msg.topic = \"node/power-controller:0/led-strip/-/effect/set\" \n}\n\nreturn msg;",
"outputs":1,
"noerr":0,
"x":620,
"y":580,
"wires":[
[
"a7ef9db0.cc602"
]
]
},
{
"id":"99a36ea2.e29bf",
"type":"function",
"z":"aaf5722e.dfdca",
"name":"White color handler",
"func":"var carry = (parseInt(msg.payload)).toString(16)\nif(carry.length == 1) carry = \"0\" + carry;\n\nflow.set(\"white\", carry);\n\nvar color = flow.get(\"color\");\nif(color == null) color = \"000000\";\n\nmsg.payload = '\"#' + color +'(' + carry + ')\"';\nmsg.topic = \"node/power-controller:0/led-strip/-/color/set\";\nreturn msg;",
"outputs":1,
"noerr":0,
"x":610,
"y":340,
"wires":[
[
"a7ef9db0.cc602"
]
]
},
{
"id":"d40dc7b0.acf648",
"type":"blynk-ws-in-write",
"z":"aaf5722e.dfdca",
"name":"",
"pin":"7",
"client":"746d7fe1.2a0be",
"x":330,
"y":640,
"wires":[
[
"a03ff4eb.de9fd8"
]
]
},
{
"id":"a03ff4eb.de9fd8",
"type":"function",
"z":"aaf5722e.dfdca",
"name":"Brightness handler",
"func":"if(msg.payload == true && flow.get(\"ledstrip\")||true){\n msg.payload = msg.payload;\n msg.topic = \"node/power-controller:0/led-strip/-/brightness/set\" \n}\n\nreturn msg;",
"outputs":1,
"noerr":0,
"x":610,
"y":640,
"wires":[
[
"a7ef9db0.cc602"
]
]
},
{
"id":"746d7fe1.2a0be",
"type":"blynk-ws-client",
"z":"",
"name":"",
"path":"ws://blynk-cloud.com/websockets",
"key":"",
"dbg_all":false,
"dbg_read":false,
"dbg_write":false,
"dbg_notify":false,
"dbg_mail":false,
"dbg_prop":false,
"dbg_low":false,
"dbg_pins":""
},
{
"id":"71afb0a.14d505",
"type":"mqtt-broker",
"z":"",
"broker":"127.0.0.1",
"port":"1883",
"clientid":"",
"usetls":false,
"compatmode":true,
"keepalive":"60",
"cleansession":true,
"willTopic":"",
"willQos":"0",
"willPayload":"",
"birthTopic":"",
"birthQos":"0",
"birthPayload":""
}
]
Po importu by se měl zobrazit tento flow:
Teď naskenujte QR kód níže, kterým do aplikace Blynk naimportujete všechny potřebné widgety.
Po naskenování QR kódu by aplikace měla zobrazit widgety rozmístěné takto:
