Hi i got help Recently to get an output from my Node Red Webpage.
Now i try to find a Solution to get an Input from Node Red to my Homepage to change my Nav Bar Position.
On my Webpage when i click for example at "Home" i get an output to Node Red "m-home"
Now i try to send for example "m-favorites" and let the Nav Bar jump to "Favorites" may someone know how i could do that?
[
{
"id": "8ad58918.ee8168",
"type": "http in",
"z": "b90548eaef2af54d",
"name": "",
"url": "/mysite",
"method": "get",
"upload": false,
"swaggerDoc": "",
"x": 810,
"y": 300,
"wires": [
[
"4c783328.03dc2c"
]
]
},
{
"id": "7a857226.0a6bec",
"type": "http in",
"z": "b90548eaef2af54d",
"name": "",
"url": "/mysitepost",
"method": "post",
"upload": false,
"swaggerDoc": "",
"x": 820,
"y": 500,
"wires": [
[
"ae61b4ee683c34a4",
"20480b13.afdb94"
]
]
},
{
"id": "20480b13.afdb94",
"type": "debug",
"z": "b90548eaef2af54d",
"name": "mysitepost",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 1070,
"y": 800,
"wires": []
},
{
"id": "2a90cbb3.d07964",
"type": "http response",
"z": "b90548eaef2af54d",
"name": "",
"statusCode": "",
"headers": {},
"x": 1470,
"y": 500,
"wires": []
},
{
"id": "e9a9f9c6.f8ce08",
"type": "template",
"z": "b90548eaef2af54d",
"name": "CSS",
"field": "payload.style",
"fieldType": "msg",
"format": "html",
"syntax": "mustache",
"template": ":root {\n\t--icon: #b0bfd8;\n}\n\nbody {\n\twidth: 100%;\n\theight: 100vh;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\toverflow: hidden;\n\tmargin: 0;\n\tbackground-color: #e3efe8;\n\tbackground-image: linear-gradient(315deg, #e3efe8 0%, #96a7cf 74%);\n}\n\n\nnav.menu {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tposition: relative;\n\theight: 150px;\n\tpadding: 0 29px 10px;\n\tbackground: #fff0;\n\talign-items: flex-end;\n\twidth: 700px;\n}\n\nnav.menu:before {\n\tcontent: \"\";\n\twidth: 100%;\n\theight: 150px;\n\tbackground: #181818;\n\tposition: absolute;\n\tleft: 0;\n\tbottom: 0;\n\tborder-radius: 20px;\n\tz-index: -1;\n\tbox-shadow: 1px 1px 2px 0px #fff;\n}\n\ninput { display: none; }\n\n.break {\n flex-basis: 100%;\n height: 0;\n}\n\nlabel {\n\ttext-decoration: none;\n\tfont-family: sans-serif;\n\ttext-transform: uppercase;\n\tfont-size: 14px;\n\tmin-width: 100px;\n\theight: 100px;\n\tmargin: 10px 10px 20px;\n\ttext-align: center;\n\tdisplay: inline-grid;\n\talign-items: end;\n\tcolor: #b0bfd8;\n\tposition: relative;\n\ttransition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;\n\tcursor: pointer;\n}\n\nlabel:hover {\n\tcolor: #fff;\n\ttext-shadow: 0 0 5px #fff, 0 0 10px #fff;\n}\n\ninput:checked + label {\n\tcolor: #fff;\n\theight: 130px;\n}\n\n.selector {\n\t--hole: #2196f3;\n\tbackground: \n\t\tradial-gradient(circle at 50% 50%, #fff8 30px, #fff0 45px, #fff 50px, #fff0 50px 100%), \n\t\tradial-gradient(circle at 50% 50%, var(--hole) 0 45px, #fff0 50px 100%),\n\t\tradial-gradient(circle at 50% 75px, #181818 0 70px, #fff0 71px 100%);\n\twidth: 95px;\n\theight: 95px;\n\tposition: absolute;\n\tbottom: 47px;\n\tleft: 0;\n\tz-index: -1;\n\ttransition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;\n\tborder: 19px solid #181818;\n\tborder-radius: 100%;\n}\n\n#m-home:checked ~ .selector {\n\tleft: 23px;\n}\n\n#m-search:checked ~ .selector {\n\tleft: 143px;\n\tfilter: hue-rotate(535deg);\n}\n\n#m-notification:checked ~ .selector {\n\tleft: 263px;\n\tfilter: hue-rotate(950deg);\n}\n\n#m-favorites:checked ~ .selector {\n\tleft: 383px;\n\tfilter: hue-rotate(1580deg);\n}\n\n#m-profile:checked ~ .selector {\n\tleft: 502px;\n\tfilter: hue-rotate(1850deg);\n}\n\n#m-profile2:checked ~ .selector {\n\tleft: 621px;\n\tfilter: hue-rotate(1850deg);\n}\n\n.selector:after {\n\tcontent: \"\";\n\tposition: absolute;\n\tbottom: -80px;\n\twidth: 80px;\n\theight: 10px;\n\tbackground: #181818;\n\tleft: calc(50% - 40px);\n\tborder-radius: 5px 5px 15px 15px;\n}\n\ninput:checked ~ .selector:after {\n\tbox-shadow: 0 -17px 35px 8px var(--hole);\n}\n\n\n\n\n\n\n\n/*** ICONS ***/\nlabel:before,\nlabel:after {\n\tcontent: \"\";\n\tposition: absolute;\n\tbox-sizing: border-box;\n\ttransition: all 0.5s ease 0s;\n}\n\nlabel:hover:before,\nlabel:hover:after {\n\tfilter: brightness(1.5) drop-shadow(0px 0px 4px #fff);\n\ttransition: all 0.5s ease 0s;\n}\n\ninput:checked + label:before, \ninput:checked + label:after {\n\tfilter: brightness(1.5) drop-shadow(0px 0px 2px var(--sel));\n\ttransition: all 0.5s ease 0s;\n}\n\n\nlabel[for=m-home]:before {\n\twidth: 40px;\n\theight: 40px;\n\tleft: 30px;\n\ttop: 30px;\n\ttransition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;\n\tborder-radius: 2px;\n\tbackground: \n\t\tconic-gradient(from 90deg at 65% 60%, var(--icon) 0 25%, #fff0 0 100%),\n\t\tconic-gradient(from 180deg at 35% 60%, var(--icon) 0 25%, #fff0 0 100%),\n\t\tconic-gradient(from 135deg at 50% 0%, var(--icon) 0 25%, #fff0 0 100%);\n\tbackground-repeat: no-repeat;\n\tbackground-size: 100% 100%, 100% 100%, 100% 27px;\n}\n\nlabel[for=m-home]:after {\n\twidth: 40px;\n\theight: 40px;\n\tleft: 30px;\n\ttop: 24px;\n\tborder: 6px solid var(--icon);\n\tborder-right-width: 0;\n\tborder-bottom-width: 0;\n\ttransform: rotate(45deg);\n\tborder-radius: 5px;\n\ttransition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;\n}\n\n\nlabel[for=m-search]:before {\n\twidth: 40px;\n\theight: 40px;\n\tleft: 20px;\n\ttop: 17px;\n\tborder: 6px solid var(--icon);\n\tborder-radius: 100%;\n\ttransition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;\n}\n\nlabel[for=m-search]:after {\n\twidth: 22px;\n\theight: 9px;\n\tleft: 60px;\n\ttop: 50px;\n\ttransition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;\n\tbackground: var(--icon);\n\ttransform-origin: left top;\n\ttransform: rotate(45deg);\n\tborder-radius: 0 10px 10px 0;\n}\n\n\nlabel[for=m-notification]:before {\n\twidth: 50px;\n\theight: 42px;\n\tleft: 25px;\n\ttop: 20px;\n\tz-index: 1;\n\tborder-radius: 30px 30px 0 0;\n\ttransition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;\n\tbackground: \n\t\tlinear-gradient(90deg, #fff0 0 6px, var(--icon) 0 calc(100% - 6px), #fff0 calc(100% - 6px) 100%), \n\t\tconic-gradient(from 135deg at 50% 33%, var(--icon) 0 25%, #fff0 0 100%);\n}\n\nlabel[for=m-notification]:after {\n\twidth: 10px;\n\theight: 57px;\n\tleft: 45px;\n\ttop: 14px;\n\tz-index: 0;\n\ttransition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;\n\tbackground: radial-gradient(circle at 50% 6px, var(--icon) 3px, #fff0 4px 100%), #fff0;\n\ttransform-origin: left top;\n\tborder-bottom: 6px solid var(--icon);\n\tborder-radius: 5px;\n}\n\n\nlabel[for=m-favorites]:before {\n\twidth: 50px;\n\theight: 50px;\n\tleft: 18px;\n\ttop: -9px;\n\ttransition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;\n\tbackground: \n\t\tradial-gradient(circle at 16px 16px, var(--icon) 0 16px, #fff0 calc(16px + 1px) 100%), \n\t\tradial-gradient(circle at 34px 34px, var(--icon) 0 16px, #fff0 calc(16px + 1px) 100%), \n\t\tlinear-gradient(45deg, var(--icon) 0 37px, #fff0 38px 100%);\n\tborder-radius: 17px 22px 17px 4px;\n\ttransform: rotate(-45deg);\n\ttransform-origin: center right;\n}\n\n\nlabel[for=m-profile]:before {\n\twidth: 50px;\n\theight: 54px;\n\ttop: 16px;\n\tbackground: \n\t\tradial-gradient(circle at 50% 15px, var(--icon) 0 12px, #fff0 13px 100%),\n\t\tradial-gradient(circle at 50% 100%, var(--icon) 0 22px, #fff0 23px 100%);\n\tleft: 25px;\n\tborder-radius: 8px;\n}\n\nlabel[for=m-profile2]:before {\n\twidth: 50px;\n\theight: 54px;\n\ttop: 16px;\n\tbackground: \n\t\tradial-gradient(circle at 50% 15px, var(--icon) 0 12px, #fff0 13px 100%),\n\t\tradial-gradient(circle at 50% 100%, var(--icon) 0 22px, #fff0 23px 100%);\n\tleft: 25px;\n\tborder-radius: 8px;\n}\n\n\ninput:checked + label {\n\tcolor: var(--sel);\n\ttext-shadow: 0 0 5px var(--sel), 0 0 10px var(--sel);\n}\t\n\ninput:checked + label[for=m-home] {\n\t--sel: #39a1f4;\n}\n\ninput:checked + label[for=m-search] {\n\t--sel: #f48d4e;\n}\n\ninput:checked + label[for=m-notification] {\n\t--sel: #84a91c;\n}\n\ninput:checked + label[for=m-favorites] {\n\t--sel: #ff6275;\n\theight: 125px;\n}\n\ninput:checked + label[for=m-profile] {\n\t--sel: #9d74ff;\n}\n\ninput:checked + label[for=m-profile2] {\n\t--sel: #9d74ff;\n}\n\n@media only screen and (orientation: portrait) {\n\tlabel { color: transparent !important; text-shadow: none !important;}\n}",
"x": 1390,
"y": 400,
"wires": [
[
"6d0947c7.d0d4d8"
]
]
},
{
"id": "61dbe146.63894",
"type": "template",
"z": "b90548eaef2af54d",
"name": "JavaScript",
"field": "payload.script",
"fieldType": "msg",
"format": "javascript",
"syntax": "plain",
"template": "const menu = document.getElementById('m');\nconst items =[\"m-home\", \"m-search\", \"m-notification\", \"m-favorites\", \"m-profile\", \"m-profile2\"];\n\nconst listener = async function(evt){\n if(items.includes(evt.target.id)){\n let obj;\n const url = origin + '/mysitepost';\n fetch(url, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\"item\":evt.target.id}),\n })\n .then(res => res.json())\n .then(data => obj = data)\n .then(() => {\n document.getElementById('log').innerHTML = obj.content;\n console.log(obj);\n })\n .catch(err => console.error(err))\n }\n}\n\nmenu.addEventListener('click', e => listener(e), false);\n\n\n\n",
"x": 1210,
"y": 400,
"wires": [
[
"e9a9f9c6.f8ce08"
]
]
},
{
"id": "c96f4682.70c4f8",
"type": "http response",
"z": "b90548eaef2af54d",
"name": "",
"statusCode": "",
"headers": {},
"x": 1690,
"y": 400,
"wires": []
},
{
"id": "6d0947c7.d0d4d8",
"type": "template",
"z": "b90548eaef2af54d",
"name": "HTML",
"field": "payload",
"fieldType": "msg",
"format": "handlebars",
"syntax": "mustache",
"template": "<html>\n <head>\n\n <style>{{{payload.style}}}</style>\n </head>\n <body>\n<div>\n<div style=\"flex-direction: column;\">\n<nav class=\"menu\" id=\"m\">\n\n\t<input type=\"radio\" name=\"nav-item\" id=\"m-home\" checked><label for=\"m-home\">Home</label>\n\t<input type=\"radio\" name=\"nav-item\" id=\"m-search\"><label for=\"m-search\">Search</label>\n\t<input type=\"radio\" name=\"nav-item\" id=\"m-notification\"><label for=\"m-notification\">Notification</label>\n\t<input type=\"radio\" name=\"nav-item\" id=\"m-favorites\"><label for=\"m-favorites\">Favorites</label>\n\t<input type=\"radio\" name=\"nav-item\" id=\"m-profile\"><label for=\"m-profile\">Profile</label>\n\t\t<input type=\"radio\" name=\"nav-item\" id=\"m-profile2\"><label for=\"m-profile2\">Profile2</label>\n\n\t<div class=\"selector\"></div>\n</nav>\n</div>\n\n<div id=\"log\"><br>initial content</div>\n</div>\n<script>{{{payload.script}}}</script>\n</body>",
"x": 1550,
"y": 400,
"wires": [
[
"c96f4682.70c4f8"
]
]
},
{
"id": "4c783328.03dc2c",
"type": "function",
"z": "b90548eaef2af54d",
"name": "msg.url = \"mysitepost\";",
"func": "msg.url = \"mysitepost\";\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"x": 1060,
"y": 300,
"wires": [
[
"61dbe146.63894"
]
]
},
{
"id": "ae61b4ee683c34a4",
"type": "function",
"z": "b90548eaef2af54d",
"name": "return msg.payload to client",
"func": "msg.payload.message = \"The included data was submitted and available in the msg.payload!\";\nmsg.payload.content = '<br>Some ' + msg.payload.item + ' content!';\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 1080,
"y": 500,
"wires": [
[
"20480b13.afdb94",
"2a90cbb3.d07964"
]
]
}
]
This is my Flow this creates the Web page at localhost:1880/mysite
Thx for Help
