Hello,
i found that example for a Node Red Website:
https://flows.nodered.org/flow/1bffe6808d37bd96cce283939983e758
I changed it to an Dashboard Navigation Bar, that worked great. Now i am looking for a Way that when i press an Icon on the Bar that i get an input in Node RED
Here is my Flow :
[{"id":"1e0841f1.ac68fe","type":"http in","z":"23fdc39b.828c1c","name":"","url":"/mysite","method":"get","upload":false,"swaggerDoc":"","x":670,"y":800,"wires":[["4c783328.03dc2c"]]},{"id":"5de0bbd4.6c8574","type":"http in","z":"23fdc39b.828c1c","name":"","url":"/mysitepost","method":"post","upload":false,"swaggerDoc":"","x":690,"y":1000,"wires":[["80321000.f2dc5","75913f37.78e6e"]]},{"id":"4c783328.03dc2c","type":"function","z":"23fdc39b.828c1c","name":"msg.url = \"mysitepost\";","func":"msg.url = \"mysitepost\";\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":910,"y":800,"wires":[["b2f5bdf9.e09f1"]]},{"id":"80321000.f2dc5","type":"debug","z":"23fdc39b.828c1c","name":"mysitepost","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1330,"y":1000,"wires":[]},{"id":"8de9647.b8a9a98","type":"http response","z":"23fdc39b.828c1c","name":"","x":1350,"y":960,"wires":[]},{"id":"b2972258.ecf54","type":"template","z":"23fdc39b.828c1c","name":"CSS","field":"payload.style","fieldType":"msg","format":"html","syntax":"mustache","template":"html {\n\n box-sizing: border-box;\n --bgColorMenu : #1d1d27;\n --duration: .7s; \n\n}\n\nhtml *,\nhtml *::before,\nhtml *::after {\n\n box-sizing: inherit;\n\n}\n\nbody{\n \n margin: 0;\n\n height: 100vh;\n overflow: hidden;\n align-items: center;\n justify-content: center;\n background-color: #ffb457;\n -webkit-tap-highlight-color: transparent;\n transition: background-color var(--duration);\n\n}\n\n.menu{\n\n margin: 0;\n display: flex;\n /* Works well with 100% width */\n width: 32.05em;\n font-size: 1.5em;\n padding: 1.6em;\n position: relative;\n align-items: center;\n justify-content: center;\n background-color: var(--bgColorMenu);\n \n}\n\n.menu__item{\n \n all: unset;\n flex-grow: 1;\n z-index: 100;\n display: flex;\n cursor: pointer;\n position: relative;\n border-radius: 50%;\n align-items: center;\n will-change: transform;\n justify-content: center;\n padding: 0.55em 0 0.85em;\n transition: transform var(--timeOut , var(--duration));\n \n}\n\n.menu__item::before{\n \n content: \"\";\n z-index: -1;\n width: 4.2em;\n height: 4.2em;\n border-radius: 50%;\n position: absolute;\n transform: scale(0);\n transition: background-color var(--duration), transform var(--duration);\n \n}\n\n\n.menu__item.active {\n\n transform: translate3d(0, -.8em , 0);\n\n}\n\n.menu__item.active::before{\n \n transform: scale(1);\n background-color: var(--bgColorItem);\n\n}\n\n.icon{\n \n width: 2.6em;\n height: 2.6em;\n stroke: white;\n fill: transparent;\n stroke-width: 1pt;\n stroke-miterlimit: 10;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-dasharray: 400;\n \n}\n\n.menu__item.active .icon {\n\n animation: strok 1.5s reverse;\n \n}\n\n@keyframes strok {\n\n 100% {\n\n stroke-dashoffset: 400;\n\n }\n\n}\n\n.menu__border{\n\n left: 0;\n bottom: 99%;\n width: 10.9em;\n height: 2.4em;\n position: absolute;\n clip-path: url(#menu);\n will-change: transform;\n background-color: var(--bgColorMenu);\n transition: transform var(--timeOut , var(--duration));\n \n}\n\n.svg-container {\n\n width: 0;\n height: 0;\n}\n\n\n@media screen and (max-width: 50em) {\n .menu{\n font-size: .8em;\n }\n}","x":1070,"y":900,"wires":[["cb052a52.de5398"]]},{"id":"b2f5bdf9.e09f1","type":"template","z":"23fdc39b.828c1c","name":"JavaScript","field":"payload.script","fieldType":"msg","format":"javascript","syntax":"plain","template":"// Designed by: Mauricio Bucardo\n// Original image:\n// https://dribbble.com/shots/5619509-Animated-Tab-Bar\n\n\"use strict\"; \n\nconst body = document.body;\nconst bgColorsBody = [\"#ffb457\", \"#ff96bd\", \"#9999fb\", \"#ffe797\", \"#cffff1\"];\nconst menu = body.querySelector(\".menu\");\nconst menuItems = menu.querySelectorAll(\".menu__item\");\nconst menuBorder = menu.querySelector(\".menu__border\");\nlet activeItem = menu.querySelector(\".active\");\n\nfunction clickItem(item, index) {\n\n menu.style.removeProperty(\"--timeOut\");\n \n if (activeItem == item) return;\n \n if (activeItem) {\n activeItem.classList.remove(\"active\");\n }\n\n \n item.classList.add(\"active\");\n body.style.backgroundColor = bgColorsBody[index];\n activeItem = item;\n offsetMenuBorder(activeItem, menuBorder);\n \n \n}\n\nfunction offsetMenuBorder(element, menuBorder) {\n\n const offsetActiveItem = element.getBoundingClientRect();\n const left = Math.floor(offsetActiveItem.left - menu.offsetLeft - (menuBorder.offsetWidth - offsetActiveItem.width) / 2) + \"px\";\n menuBorder.style.transform = `translate3d(${left}, 0 , 0)`;\n\n}\n\noffsetMenuBorder(activeItem, menuBorder);\n\nmenuItems.forEach((item, index) => {\n\n item.addEventListener(\"click\", () => clickItem(item, index));\n \n})\n\nwindow.addEventListener(\"resize\", () => {\n offsetMenuBorder(activeItem, menuBorder);\n menu.style.setProperty(\"--timeOut\", \"none\");\n});","x":910,"y":900,"wires":[["b2972258.ecf54"]]},{"id":"d2c0bc2a.05a02","type":"http response","z":"23fdc39b.828c1c","name":"","x":1350,"y":900,"wires":[]},{"id":"57316751.8bd948","type":"comment","z":"23fdc39b.828c1c","name":"Login Form","info":"","x":870,"y":860,"wires":[]},{"id":"ad88b28c.bc842","type":"function","z":"23fdc39b.828c1c","name":"return msg.payload to client","func":"msg.payload = 'The following data was submitted and available in the msg.payload: '+msg.payload;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":1080,"y":960,"wires":[["8de9647.b8a9a98"]]},{"id":"42a9d329.9cdf6c","type":"comment","z":"23fdc39b.828c1c","name":"Inject msg object properties","info":"","x":880,"y":760,"wires":[]},{"id":"75913f37.78e6e","type":"json","z":"23fdc39b.828c1c","name":"","x":890,"y":960,"wires":[["ad88b28c.bc842"]]},{"id":"86c08a83.385758","type":"comment","z":"23fdc39b.828c1c","name":"Website","info":"","x":650,"y":720,"wires":[]},{"id":"111485fa.14c4aa","type":"comment","z":"23fdc39b.828c1c","name":"Form Submission","info":"","x":680,"y":940,"wires":[]},{"id":"3c029955.901626","type":"comment","z":"23fdc39b.828c1c","name":"Node-RED Public Site - README","info":"This Flow demonstrates how to create\na simple frontend webpage with Node-RED.\n\nThe public facing page consists of the \nclient side JavaScript, CSS and HTML. \n\nThe important technique is how the mustache \ntemplates are used. Each template will set the\n\"property\" relative to the content. \n\nThe CSS node sets the \"msg.payload.style\" property.\nThe JavaScript node sets the \"msg.payload.script\" property.\nThe HTML node then includes these properties \n<script>{{{payload.script}}}</script>\n<style>{{{payload.style}}}</style>\n\n\nThis example was created by http://www.InternetofLEGO.com\n\n","x":980,"y":620,"wires":[]},{"id":"cb052a52.de5398","type":"template","z":"23fdc39b.828c1c","name":"HTML","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n <head>\n\n <style>{{{payload.style}}}</style>\n </head>\n \n\n\n\n <h2>.</h2>\n \n\n\n\n\n\n<menu class=\"menu\">\n \n <button class=\"menu__item active\" style=\"--bgColorItem: #ff8c00;\" >\n <svg class=\"icon\" viewBox=\"0 0 24 24\">\n <path d=\"M3.8,6.6h16.4\"/>\n <path d=\"M20.2,12.1H3.8\"/>\n <path d=\"M3.8,17.5h16.4\"/>\n\n </svg>\n </button>\n\n <button class=\"menu__item\" style=\"--bgColorItem: #f54888;\">\n <svg class=\"icon\" viewBox=\"0 0 24 24\">\n <path d=\"M6.7,4.8h10.7c0.3,0,0.6,0.2,0.7,0.5l2.8,7.3c0,0.1,0,0.2,0,0.3v5.6c0,0.4-0.4,0.8-0.8,0.8H3.8\n C3.4,19.3,3,19,3,18.5v-5.6c0-0.1,0-0.2,0.1-0.3L6,5.3C6.1,5,6.4,4.8,6.7,4.8z\"/>\n <path d=\"M3.4,12.9H8l1.6,2.8h4.9l1.5-2.8h4.6\"/>\n </svg>\n </button>\n\n <button class=\"menu__item\" style=\"--bgColorItem: #4343f5;\" >\n <svg class=\"icon\" viewBox=\"0 0 24 24\">\n <path d=\"M3.4,11.9l8.8,4.4l8.4-4.4\"/>\n <path d=\"M3.4,16.2l8.8,4.5l8.4-4.5\"/>\n <path d=\"M3.7,7.8l8.6-4.5l8,4.5l-8,4.3L3.7,7.8z\"/>\n </button>\n\n <button class=\"menu__item\" style=\"--bgColorItem: #e0b115;\" > \n <svg class=\"icon\" viewBox=\"0 0 24 24\" >\n <path d=\"M5.1,3.9h13.9c0.6,0,1.2,0.5,1.2,1.2v13.9c0,0.6-0.5,1.2-1.2,1.2H5.1c-0.6,0-1.2-0.5-1.2-1.2V5.1\n C3.9,4.4,4.4,3.9,5.1,3.9z\"/>\n <path d=\"M4.2,9.3h15.6\"/>\n <path d=\"M9.1,9.5v10.3\"/>\n </button>\n\n <button class=\"menu__item\" style=\"--bgColorItem:#65ddb7;\">\n <svg class=\"icon\" viewBox=\"0 0 24 24\" >\n <path d=\"M5.1,3.9h13.9c0.6,0,1.2,0.5,1.2,1.2v13.9c0,0.6-0.5,1.2-1.2,1.2H5.1c-0.6,0-1.2-0.5-1.2-1.2V5.1\n C3.9,4.4,4.4,3.9,5.1,3.9z\"/>\n <path d=\"M5.5,20l9.9-9.9l4.7,4.7\"/>\n <path d=\"M10.4,8.8c0,0.9-0.7,1.6-1.6,1.6c-0.9,0-1.6-0.7-1.6-1.6C7.3,8,8,7.3,8.9,7.3C9.7,7.3,10.4,8,10.4,8.8z\"/>\n </svg>\n </button>\n\n <div class=\"menu__border\"></div>\n\n </menu>\n\n <div class=\"svg-container\">\n <svg viewBox=\"0 0 202.9 45.5\" >\n <clipPath id=\"menu\" clipPathUnits=\"objectBoundingBox\" transform=\"scale(0.0049285362247413 0.021978021978022)\">\n <path d=\"M6.7,45.5c5.7,0.1,14.1-0.4,23.3-4c5.7-2.3,9.9-5,18.1-10.5c10.7-7.1,11.8-9.2,20.6-14.3c5-2.9,9.2-5.2,15.2-7\n c7.1-2.1,13.3-2.3,17.6-2.1c4.2-0.2,10.5,0.1,17.6,2.1c6.1,1.8,10.2,4.1,15.2,7c8.8,5,9.9,7.1,20.6,14.3c8.3,5.5,12.4,8.2,18.1,10.5\n c9.2,3.6,17.6,4.2,23.3,4H6.7z\"/>\n </clipPath>\n </svg>\n </div>\n\n<script>{{{payload.script}}}</script>","x":1210,"y":900,"wires":[["d2c0bc2a.05a02"]]}]
The Web site is aviable at: http://localhost:1880/mysite
Maybe someone got an idea how i could do that.
Thx in advance
