🎈Preview version V0.5. Currently remaking with Node-red Dashboard.Preview Link
⚙️reCamera Dashboard is a visual Demo built on the node-red framework. It provides user with a web interface for network configuration, live view, web ssh, system information and other security configuration. You can change the Dashboard at any time in node-red to customize the functionality. Preview Link
⚙️Preinstall nodes dependence
Find the following nodes in User Setting -> Palette -> Install and install them.
@flowfuse/node-red-dashboard:1.19.1
node-red-contrib-os:0.2.1
⚙️Preview and download the flow.js file of the dashboard.
[{"id":"36487a7f023a67a8","type":"tab","label":"Preview","disabled":false,"info":"","env":[]},{"id":"772e6979.67cd08","type":"tab","label":"Device Info","disabled":false,"info":""},{"id":"35445cf45a7ff5ec","type":"tab","label":"Default Pages","disabled":false,"info":"","env":[]},{"id":"453c8631c4e4b0d5","type":"sscma","host":"localhost","port":"1883","clientid":"recamera","username":"","password":""},{"id":"53a493606ee6d430","type":"ui-group","name":"Preview","page":"eb4ea4ad231b87b6","width":"6","height":"12","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"d9c66abde84c734d","type":"ui-group","name":"Model Selection","page":"eb4ea4ad231b87b6","width":"4","height":"10","order":2,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"eb4ea4ad231b87b6","type":"ui-page","name":"Preview","ui":"6b7688bddd92fc1f","path":"/page1","icon":"home","layout":"grid","theme":"234998f63c55af55","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":true,"disabled":false},{"id":"6b7688bddd92fc1f","type":"ui-base","name":"reCamera Prototype","path":"/dashboard","appIcon":"//images.weserv.nl/?url=https://www.hbzjkhhz.fun/wp-content/uploads/2024/11/1732178239-reCameraAppIcon.png","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"234998f63c55af55","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"2788be32a24982e1","type":"ui-page","name":"Network","ui":"6b7688bddd92fc1f","path":"/network","icon":"wifi","layout":"grid","theme":"234998f63c55af55","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":3,"className":"","visible":"true","disabled":"false"},{"id":"0403368ef716b66e","type":"ui-spacer","group":"d9c66abde84c734d","name":"spacer","tooltip":"","order":5,"width":"2","height":"1","className":""},{"id":"15bec593c23e2df1","type":"ui-group","name":"Wi-Fi","page":"2788be32a24982e1","width":"6","height":"1","order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"853d93c4c0f19c38","type":"ui-group","name":"Power","page":"034b986fab50b7bb","width":"6","height":"1","order":5,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"a2f6b486b575c329","type":"ui-group","name":"Sys Info","page":"034b986fab50b7bb","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"034b986fab50b7bb","type":"ui-page","name":"Device Info","ui":"6b7688bddd92fc1f","path":"/Device","icon":"cog","layout":"grid","theme":"234998f63c55af55","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":4,"className":"","visible":"true","disabled":"false"},{"id":"cb81f9d78a6a3513","type":"ui-group","name":"Memory","page":"034b986fab50b7bb","width":"6","height":"1","order":4,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"35ddf11ddd1ade60","type":"ui-group","name":"Load","page":"034b986fab50b7bb","width":"6","height":"1","order":3,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"8ee7b1867c318ca3","type":"ui-group","name":"Storage","page":"034b986fab50b7bb","width":"6","height":"1","order":2,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"4b590614656223c2","type":"ui-page","name":"Security","ui":"6b7688bddd92fc1f","path":"/page5","icon":"security","layout":"grid","theme":"234998f63c55af55","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":5,"className":"","visible":"true","disabled":"false"},{"id":"d3e7dcd4b2447549","type":"ui-page","name":"Terminal","ui":"6b7688bddd92fc1f","path":"/page6","icon":"console","layout":"grid","theme":"234998f63c55af55","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":6,"className":"","visible":"true","disabled":"false"},{"id":"81281cef191589bb","type":"ui-link","name":"Workspace","ui":"6b7688bddd92fc1f","path":"http://192.168.42.1:1880/","icon":"application-braces","order":2,"visible":"true","disabled":"false"},{"id":"5523c1a9d58f422d","type":"ui-page","name":"Power","ui":"6b7688bddd92fc1f","path":"/page7","icon":"power","layout":"grid","theme":"234998f63c55af55","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":7,"className":"","visible":"true","disabled":"false"},{"id":"7f84e6e11f01d5aa","type":"ui-group","name":"Security","page":"4b590614656223c2","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"62e3f90362f475e5","type":"ui-group","name":"Terminal","page":"d3e7dcd4b2447549","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"a1fd3c70294c849d","type":"ui-group","name":"Power","page":"5523c1a9d58f422d","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"c74851666f9e9c6e","type":"camera","z":"36487a7f023a67a8","light":false,"client":"453c8631c4e4b0d5","x":231,"y":422,"wires":[["2696f0e9801987e4","06ec1439c52797c2","a2831dbef4c34207"]]},{"id":"593b63a07f7f6068","type":"function","z":"36487a7f023a67a8","name":"Get base 64 img output","func":"// 获取输入消息的 payload\nvar imageData = msg.payload.data.image;\n// var imageBoxes = msg.payload.data.boxes;\n\n// 输出图像信息\nmsg.payload = {\n image: imageData,\n // boxes: imageBoxes\n \n};\n\n// node.warn(msg.payload);\n\n// 返回新的消息\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":610,"y":220,"wires":[["e5a61b46eb1b6f86"]]},{"id":"e5a61b46eb1b6f86","type":"ui-template","z":"36487a7f023a67a8","group":"53a493606ee6d430","page":"","ui":"","name":"Display image","order":3,"width":"0","height":"0","head":"","format":"<template>\n <div class=\"overlay-container\">\n <!-- Original Image -->\n <img :src=\"'data:image/jpeg;base64,' + msg.payload.image\" \n class=\"image\" \n style=\"max-width: 100%; height: 640 px; object-fit: contain; position: absolute;\"/>\n </div>\n</template>\n<style>\n .overlay-container {\n position: relative;\n width: 100%;\n height: 100%;\n }\n .image {\n z-index: 1;\n position: absolute;\n top: 0;\n left: 0;\n }\n</style>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":880,"y":220,"wires":[[]]},{"id":"acf09ef357b6a207","type":"ui-template","z":"36487a7f023a67a8","group":"53a493606ee6d430","page":"","ui":"","name":"draw out frame","order":2,"width":"0","height":"0","head":"","format":"<template>\n <canvas id=\"objectCanvas\" width=\"640 px\" height=\"640 px\">\n </canvas>\n</template>\n\n<script>\nexport default {\n mounted() {\n this.$nextTick(() => {\n const canvas = document.getElementById('objectCanvas');\n if (!canvas) {\n console.error(\"Canvas element not found\");\n return;\n }\n const ctx = canvas.getContext('2d');\n\n // Define class colors\n const classColors = {\n person: \"#ff0000\", bicycle: \"#00ff00\", car: \"#0000ff\", motorcycle: \"#ffff00\", airplane: \"#ff00ff\",\n bus: \"#00ffff\", train: \"#800000\", truck: \"#808000\", boat: \"#800080\", \"traffic light\": \"#008080\",\n \"fire hydrant\": \"#c0c0c0\", \"stop sign\": \"#ffa500\", \"parking meter\": \"#a52a2a\", bench: \"#008000\",\n bird: \"#000080\", cat: \"#ff6347\", dog: \"#4682b4\", horse: \"#daa520\", sheep: \"#5f9ea0\", cow: \"#9acd32\",\n elephant: \"#6a5acd\", bear: \"#7fffd4\", zebra: \"#8b4513\", giraffe: \"#b8860b\", backpack: \"#556b2f\",\n umbrella: \"#2e8b57\", handbag: \"#66cdaa\", tie: \"#4682b4\", suitcase: \"#8a2be2\", frisbee: \"#d2691e\",\n skis: \"#dc143c\", snowboard: \"#00008b\", \"sports ball\": \"#006400\", kite: \"#8b008b\", \"baseball bat\": \"#9932cc\",\n \"baseball glove\": \"#9400d3\", skateboard: \"#ff1493\", surfboard: \"#00ced1\", \"tennis racket\": \"#1e90ff\",\n bottle: \"#ff4500\", \"wine glass\": \"#2f4f4f\", cup: \"#8b0000\", fork: \"#cd5c5c\", knife: \"#4b0082\",\n spoon: \"#800080\", bowl: \"#e9967a\", banana: \"#f4a460\", apple: \"#ff6347\", sandwich: \"#8a2be2\",\n orange: \"#ff4500\", broccoli: \"#32cd32\", carrot: \"#228b22\", \"hot dog\": \"#b22222\", pizza: \"#ff8c00\",\n donut: \"#f08080\", cake: \"#ff69b4\", chair: \"#6b8e23\", couch: \"#3cb371\", \"potted plant\": \"#8fbc8f\",\n bed: \"#00fa9a\", \"dining table\": \"#adff2f\", toilet: \"#7fff00\", tv: \"#7cfc00\", laptop: \"#00ff7f\",\n mouse: \"#00bfff\", remote: \"#1e90ff\", keyboard: \"#4682b4\", \"cell phone\": \"#5f9ea0\", microwave: \"#6495ed\",\n oven: \"#dc143c\", toaster: \"#ff7f50\", sink: \"#ff6347\", refrigerator: \"#ff4500\", book: \"#8b4513\",\n clock: \"#a52a2a\", vase: \"#ff6347\", scissors: \"#9932cc\", \"teddy bear\": \"#8a2be2\", \"hair drier\": \"#9400d3\",\n toothbrush: \"#ff1493\"\n };\n\n const classNames = Object.keys(classColors);\n\n this.$watch('msg.payload', (data) => {\n if (data && data.boxes) {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n const scaleX = canvas.width / data.originalWidth;\n const scaleY = canvas.height / data.originalHeight;\n\n data.boxes.forEach((box) => {\n const [cx, cy, width, height, confidence, classId] = box;\n const className = classNames[classId] || \"unknown\";\n const color = classColors[className] || \"#ffffff\"; // Default to white if class not found\n\n // Calculate top-left corner and scale\n const x = (cx - width / 2) * scaleX;\n const y = (cy - height / 2) * scaleY;\n const w = width * scaleX;\n const h = height * scaleY;\n\n // Draw bounding box\n ctx.strokeStyle = color;\n ctx.lineWidth = 2;\n ctx.strokeRect(x, y, w, h);\n\n // Draw label\n ctx.fillStyle = color;\n ctx.font = '14px Arial';\n const label = `${className} (${confidence.toFixed(2)})`;\n ctx.fillText(label, x + 5, y - 5);\n });\n }\n });\n });\n }\n};\n</script>\n\n<style>\ncanvas {\n z-index: 2;\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n width: 640;\n height: 640;\n}\n</style>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":860,"y":480,"wires":[[]]},{"id":"d2d741215066436a","type":"function","z":"36487a7f023a67a8","name":"Get detection box info","func":"// 获取输入消息的 payload\nvar imageBoxes = msg.payload.data.boxes;\n// var boxNum = msg.payload.data.boxes.length();\n\n\n// 输出图像信息\nmsg.payload = {\n boxes: imageBoxes,\n originalWidth:640,\n originalHeight:480\n};\n\n// node.warn(msg.payload);\n\n// 返回新的消息\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":620,"y":480,"wires":[["acf09ef357b6a207"]]},{"id":"263684946e55f174","type":"ui-text","z":"36487a7f023a67a8","group":"d9c66abde84c734d","order":1,"width":0,"height":0,"name":"","label":"Current Model is: Yolo 11n","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":1260,"y":380,"wires":[]},{"id":"5ded44dc7402ea98","type":"ui-dropdown","z":"36487a7f023a67a8","group":"d9c66abde84c734d","name":"","label":"Select Option:","tooltip":"","order":3,"width":0,"height":0,"passthru":false,"multiple":false,"chips":false,"clearable":false,"options":[{"label":"Counting Person","value":"0","type":"str"},{"label":"Gesture Recognition","value":"1","type":"str"},{"label":"More","value":"2","type":"str"}],"payload":"","topic":"topic","topicType":"msg","className":"","typeIsComboBox":true,"x":1220,"y":460,"wires":[[]]},{"id":"378623334dee45b4","type":"ui-button","z":"36487a7f023a67a8","group":"d9c66abde84c734d","name":"","label":"Apply","order":4,"width":0,"height":0,"emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":1190,"y":500,"wires":[[]]},{"id":"3d7d78677d61b37a","type":"ui-text","z":"36487a7f023a67a8","group":"d9c66abde84c734d","order":2,"width":0,"height":0,"name":"","label":"Available Demo","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":1220,"y":300,"wires":[]},{"id":"2696f0e9801987e4","type":"stream","z":"36487a7f023a67a8","name":"stream","protocol":0,"port":554,"session":"live","username":"admin","password":"admin","client":"453c8631c4e4b0d5","x":390,"y":500,"wires":[]},{"id":"06ec1439c52797c2","type":"model","z":"36487a7f023a67a8","name":"","uri":"","model":"yolo11n_cv181x_int8.cvimodel","tscore":0.45,"tiou":0.25,"debug":true,"trace":false,"counting":false,"classes":"person,bicycle,car,motorcycle,airplane,bus,train,truck,boat,traffic light,fire hydrant,stop sign,parking meter,bench,bird,cat,dog,horse,sheep,cow,elephant,bear,zebra,giraffe,backpack,umbrella,handbag,tie,suitcase,frisbee,skis,snowboard,sports ball,kite,baseball bat,baseball glove,skateboard,surfboard,tennis racket,bottle,wine glass,cup,fork,knife,spoon,bowl,banana,apple,sandwich,orange,broccoli,carrot,hot dog,pizza,donut,cake,chair,couch,potted plant,bed,dining table,toilet,tv,laptop,mouse,remote,keyboard,cell phone,microwave,oven,toaster,sink,refrigerator,book,clock,vase,scissors,teddy bear,hair drier,toothbrush","splitter":"0,0,0,0","client":"453c8631c4e4b0d5","x":390,"y":360,"wires":[["593b63a07f7f6068","d2d741215066436a"]]},{"id":"713e323f54f5dfd2","type":"ui-slider","z":"36487a7f023a67a8","group":"d9c66abde84c734d","name":"Confidence","label":"Confidence","tooltip":"","order":7,"width":0,"height":0,"passthru":false,"outs":"all","topic":"topic","topicType":"msg","thumbLabel":"true","showTicks":"always","min":0,"max":"100","step":1,"className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","x":1210,"y":560,"wires":[[]]},{"id":"ba49c12080809bf7","type":"ui-slider","z":"36487a7f023a67a8","group":"d9c66abde84c734d","name":"IoU","label":"IoU","tooltip":"","order":6,"width":0,"height":0,"passthru":false,"outs":"all","topic":"topic","topicType":"msg","thumbLabel":"true","showTicks":"always","min":0,"max":"100","step":1,"className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","x":1190,"y":620,"wires":[[]]},{"id":"a2831dbef4c34207","type":"save","z":"36487a7f023a67a8","name":"save","slice":"300","storage":"local","duration":"1","start":true,"client":"453c8631c4e4b0d5","x":370,"y":700,"wires":[]},{"id":"1649ae1e846acd4a","type":"inject","z":"36487a7f023a67a8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":200,"y":700,"wires":[["a2831dbef4c34207"]]},{"id":"1fe758318c23b037","type":"ui-text","z":"36487a7f023a67a8","group":"53a493606ee6d430","order":1,"width":0,"height":0,"name":"","label":"View RSTP stream at port 554","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":1270,"y":220,"wires":[]},{"id":"ed27cae4.70b728","type":"inject","z":"772e6979.67cd08","name":"update","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"30","crontab":"","once":true,"onceDelay":"","topic":"","payload":"","payloadType":"date","x":94,"y":245,"wires":[["f25a9b1d.c6fce8","c63cb373.ce94f","21faa622.8c25da","7cf01d46.a3cad4","470242d7e0ff5a83","c52fa30928fc1673"]]},{"id":"e6b8a679.aff648","type":"function","z":"772e6979.67cd08","name":"","func":"msg.payload = msg.payload.memusage;\nreturn msg;","outputs":1,"timeout":"","noerr":0,"initialize":"","finalize":"","libs":[],"x":480,"y":580,"wires":[["cad9b978910c6f64"]]},{"id":"dd0cca19.6f90a8","type":"function","z":"772e6979.67cd08","name":"","func":"function formatBytes(bytes,decimals) {\n if(bytes === 0) return '0 Byte';\n var k = 1000; // or 1024 for binary\n var dm = decimals + 1 || 3;\n var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\n var i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];\n}\n\nmsg.payload = formatBytes(msg.payload.totalmem);\nreturn msg;","outputs":1,"noerr":0,"x":480,"y":620,"wires":[["e44044438f64d561"]]},{"id":"308d683f.10ab08","type":"function","z":"772e6979.67cd08","name":"","func":"function formatBytes(bytes,decimals) {\n if(bytes === 0) return '0 Byte';\n var k = 1000; // or 1024 for binary\n var dm = decimals + 1 || 3;\n var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\n var i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];\n}\n\nmsg.payload = formatBytes(msg.payload.freemem);\nreturn msg;","outputs":1,"noerr":0,"x":480,"y":660,"wires":[["1c3c61e4b9c1493d"]]},{"id":"20567afa.bd4466","type":"function","z":"772e6979.67cd08","name":"","func":"function timeConversion(millisec) {\n\n var seconds = (millisec / 1000).toFixed(1);\n\n var minutes = (millisec / (1000 * 60)).toFixed(1);\n\n var hours = (millisec / (1000 * 60 * 60)).toFixed(1);\n\n var days = (millisec / (1000 * 60 * 60 * 24)).toFixed(1);\n\n if (seconds < 60) {\n return seconds + \" Sec\";\n } else if (minutes < 60) {\n return minutes + \" Min\";\n } else if (hours < 24) {\n return hours + \" Hrs\";\n } else {\n return days + \" Days\"\n }\n}\n\nmsg.payload = timeConversion(msg.payload.uptime * 1000);\nreturn msg;","outputs":1,"noerr":0,"x":461,"y":80,"wires":[["56483138ec7e43b1"]]},{"id":"f745cace.30f2d8","type":"function","z":"772e6979.67cd08","name":"","func":"msg.payload = msg.payload.hostname;\nreturn msg;","outputs":1,"noerr":0,"x":460,"y":117,"wires":[["adf74ed12bc4bc6a"]]},{"id":"3153bd68.82b782","type":"function","z":"772e6979.67cd08","name":"","func":"msg.payload = msg.payload.platform;\nreturn msg;","outputs":1,"noerr":0,"x":462,"y":155,"wires":[["6d51e653b415b19e"]]},{"id":"7eec4b7e.c15ad4","type":"function","z":"772e6979.67cd08","name":"","func":"msg.payload = msg.payload.arch;\nreturn msg;","outputs":1,"noerr":0,"x":463,"y":194,"wires":[["77cd1a50b077b7e9"]]},{"id":"6b4d7f76.271fb","type":"function","z":"772e6979.67cd08","name":"","func":"msg.payload = msg.payload.release;\nreturn msg;","outputs":1,"noerr":0,"x":464,"y":230,"wires":[["dfc592aff0377aa1"]]},{"id":"fbd3e7db.8ca558","type":"function","z":"772e6979.67cd08","name":"","func":"msg.payload = msg.payload.memusage;\nreturn msg;","outputs":1,"timeout":"","noerr":0,"initialize":"","finalize":"","libs":[],"x":480,"y":540,"wires":[["afa9c487d23a4946"]]},{"id":"c759448a.854258","type":"comment","z":"772e6979.67cd08","name":"Memory Usage","info":"","x":680,"y":500,"wires":[]},{"id":"ff2b3794.382148","type":"comment","z":"772e6979.67cd08","name":"System Information","info":"","x":650,"y":40,"wires":[]},{"id":"afa9c487d23a4946","type":"ui-chart","z":"772e6979.67cd08","group":"cb81f9d78a6a3513","name":"Memory - 24 Hours","label":"24 Hours","order":2,"chartType":"line","category":"topic","categoryType":"msg","xAxisLabel":"","xAxisProperty":"","xAxisPropertyType":"timestamp","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"HH:mm:ss","xmin":"","xmax":"","yAxisLabel":"%","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"","ymax":"","bins":10,"action":"append","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"86400","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","interpolation":"linear","x":690,"y":540,"wires":[[]]},{"id":"a7ef82ce5039f3f3","type":"ui-button","z":"772e6979.67cd08","group":"853d93c4c0f19c38","name":"","label":"Reboot","order":3,"width":0,"height":0,"emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":80,"y":1200,"wires":[["062153cab0708d4b"]]},{"id":"eff1a2b29d264e9d","type":"ui-button","z":"772e6979.67cd08","group":"853d93c4c0f19c38","name":"","label":"Shutdown","order":2,"width":0,"height":0,"emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":80,"y":1140,"wires":[["763adecf7bc5be80"]]},{"id":"cad9b978910c6f64","type":"ui-gauge","z":"772e6979.67cd08","name":"Memory Usage","group":"cb81f9d78a6a3513","order":1,"width":3,"height":3,"gtype":"gauge-half","gstyle":"rounded","title":"1 Minute","units":"Usage","icon":"memory","prefix":"","suffix":"%","segments":[{"from":"0","color":"#5cd65c"},{"from":"40","color":"#ffc800"},{"from":"70","color":"#ea5353"}],"min":0,"max":"100","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":680,"y":580,"wires":[]},{"id":"e44044438f64d561","type":"ui-text","z":"772e6979.67cd08","group":"cb81f9d78a6a3513","order":3,"width":0,"height":0,"name":"Total Memory","label":"Total Memory","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":680,"y":620,"wires":[]},{"id":"1c3c61e4b9c1493d","type":"ui-text","z":"772e6979.67cd08","group":"cb81f9d78a6a3513","order":4,"width":0,"height":0,"name":"Free Memory","label":"Free Memory","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":670,"y":660,"wires":[]},{"id":"56483138ec7e43b1","type":"ui-text","z":"772e6979.67cd08","group":"a2f6b486b575c329","order":1,"width":0,"height":0,"name":"Uptime","label":"Uptime","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":860,"y":80,"wires":[]},{"id":"adf74ed12bc4bc6a","type":"ui-text","z":"772e6979.67cd08","group":"a2f6b486b575c329","order":2,"width":0,"height":0,"name":"Hostname","label":"Hostname","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":645,"y":127,"wires":[]},{"id":"6d51e653b415b19e","type":"ui-text","z":"772e6979.67cd08","group":"a2f6b486b575c329","order":3,"width":0,"height":0,"name":"Platform","label":"Platform","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":635,"y":167,"wires":[]},{"id":"77cd1a50b077b7e9","type":"ui-text","z":"772e6979.67cd08","group":"a2f6b486b575c329","order":4,"width":0,"height":0,"name":"Arch","label":"Arch","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":625,"y":207,"wires":[]},{"id":"dfc592aff0377aa1","type":"ui-text","z":"772e6979.67cd08","group":"a2f6b486b575c329","order":5,"width":0,"height":0,"name":"Release","label":"Release","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":635,"y":247,"wires":[]},{"id":"ef986a57b3ca3f3f","type":"exec","z":"772e6979.67cd08","command":"sh -c \"echo 3 > /proc/sys/vm/drop_caches\"","addpay":false,"append":"","useSpawn":"","timer":"","winHide":false,"name":"Clear Cached Memory","x":340,"y":1080,"wires":[[],[],[]]},{"id":"763adecf7bc5be80","type":"exec","z":"772e6979.67cd08","command":"reboot","addpay":false,"append":"","useSpawn":"","timer":"","winHide":false,"name":"Reboot","x":300,"y":1140,"wires":[[],[],[]]},{"id":"062153cab0708d4b","type":"exec","z":"772e6979.67cd08","command":"shutdown -h now","addpay":false,"append":"","useSpawn":"","timer":"","winHide":false,"name":"Shutdown","x":300,"y":1200,"wires":[[],[],[]]},{"id":"f077c92954ab4b80","type":"ui-button","z":"772e6979.67cd08","group":"853d93c4c0f19c38","name":"Clear Cached Memory","label":"Clear Cached Memory","order":1,"width":0,"height":0,"emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":120,"y":1080,"wires":[["ef986a57b3ca3f3f"]]},{"id":"470242d7e0ff5a83","type":"exec","z":"772e6979.67cd08","command":"top -d 0.5 -b -n2 | grep \"Cpu(s)\"|tail -n 1 | awk '{print ($2 + $4) / 100}'","addpay":false,"append":"","useSpawn":"","timer":"","winHide":false,"name":"CPU Load","x":330,"y":360,"wires":[["123556a6e9bf2ba9","b4993966523af7cd"],[],[]]},{"id":"b8fe901430229832","type":"comment","z":"772e6979.67cd08","name":"CPU Load","info":"","x":520,"y":320,"wires":[]},{"id":"123556a6e9bf2ba9","type":"ui-gauge","z":"772e6979.67cd08","name":"CPU","group":"35ddf11ddd1ade60","order":1,"width":3,"height":3,"gtype":"gauge-half","gstyle":"rounded","title":"CPU","units":"Usage","icon":"cpu-64-bit","prefix":"","suffix":"%","segments":[{"from":"0","color":"#5cd65c"},{"from":"40","color":"#ffc800"},{"from":"70","color":"#ea5353"}],"min":0,"max":"100","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":510,"y":360,"wires":[]},{"id":"b4993966523af7cd","type":"ui-chart","z":"772e6979.67cd08","group":"35ddf11ddd1ade60","name":"CPU Load%","label":"CPU Load%","order":2,"chartType":"line","category":"topic","categoryType":"msg","xAxisLabel":"","xAxisProperty":"","xAxisPropertyType":"timestamp","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"HH:mm:ss","xmin":"","xmax":"","yAxisLabel":"%","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"","ymax":"","bins":10,"action":"append","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":"5","removeOlderUnit":"60","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","interpolation":"linear","x":530,"y":400,"wires":[[]]},{"id":"c52fa30928fc1673","type":"exec","z":"772e6979.67cd08","command":"df -h","addpay":false,"append":"","useSpawn":"","timer":"","winHide":false,"name":"Disk Usage","x":290,"y":780,"wires":[["3a63caead1e27f63"],[],[]]},{"id":"3a63caead1e27f63","type":"function","z":"772e6979.67cd08","name":"function 2","func":"// Input payload as a string\nlet data = msg.payload;\n\n// Split the input into lines\nlet lines = data.split('\\n');\n\n// Initialize variables\nlet totalSize = 0; // Total space size in GB\nlet totalUsed = 0; // Used space in GB\nlet totalAvailable = 0; // Available space in GB\n\n// Regular expression to extract size, used, and available space from each line\nlet regex = /\\/dev\\/\\S+\\s+([\\d.]+)G\\s+([\\d.]+)G\\s+([\\d.]+)G\\s+\\d+%/;\n\n// Iterate through each line and sum the values\nfor (let line of lines) {\n let match = line.match(regex);\n if (match) {\n // Extract the values in GB\n totalSize += parseFloat(match[1]); // Total Size\n totalUsed += parseFloat(match[2]); // Used\n totalAvailable += parseFloat(match[3]); // Available\n }\n}\n\n// Format the results to two decimal places\ntotalSize = totalSize.toFixed(2); \ntotalUsed = totalUsed.toFixed(2); \ntotalAvailable = totalAvailable.toFixed(2); \n\n// Calculate used and free percentages\nlet usedPercentage = ((totalUsed / totalSize) * 100).toFixed(2);\nlet freePercentage = ((totalAvailable / totalSize) * 100).toFixed(2);\n\n// Create different messages for each output\nlet output1 = { payload: totalSize }; // Total size in GB\nlet output2 = { payload: totalUsed }; // Used space in GB\nlet output3 = { payload: totalAvailable }; // Available space in GB\nlet output4 = { payload: usedPercentage }; // Used percentage\nlet output5 = { payload: freePercentage }; // Free percentage\n\n// Return all five outputs as an array\nreturn [output1, output2, output3, output4, output5];\n","outputs":5,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":480,"y":800,"wires":[["b4d1a5f6ebf4d5fc"],["8048bf79ab7a2c1c"],["f17dda10cc817e05"],["3ba364d6b2c87e48"],["46211c6549d8c086"]]},{"id":"6274f64d6b5a6059","type":"comment","z":"772e6979.67cd08","name":"Disk Usage","info":"","x":670,"y":740,"wires":[]},{"id":"b4d1a5f6ebf4d5fc","type":"ui-text","z":"772e6979.67cd08","group":"8ee7b1867c318ca3","order":1,"width":0,"height":0,"name":"Total Storage","label":"Total Storage (GB)","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":670,"y":780,"wires":[]},{"id":"8048bf79ab7a2c1c","type":"ui-text","z":"772e6979.67cd08","group":"8ee7b1867c318ca3","order":2,"width":0,"height":0,"name":"Used Storage","label":"Used Storage (GB)","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":680,"y":820,"wires":[]},{"id":"f17dda10cc817e05","type":"ui-text","z":"772e6979.67cd08","group":"8ee7b1867c318ca3","order":3,"width":0,"height":0,"name":"Free Storage","label":"Free Storage (GB)","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":670,"y":860,"wires":[]},{"id":"3ba364d6b2c87e48","type":"ui-gauge","z":"772e6979.67cd08","name":"Used Storage","group":"8ee7b1867c318ca3","order":4,"width":3,"height":3,"gtype":"gauge-tank","gstyle":"needle","title":"Used Storage","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#a8f5ff"},{"from":"15","color":"#55dbec"},{"from":"35","color":"#53b4fd"},{"from":"50","color":"#2397d1"}],"min":0,"max":"100","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":680,"y":900,"wires":[]},{"id":"46211c6549d8c086","type":"ui-gauge","z":"772e6979.67cd08","name":"Free Storage","group":"8ee7b1867c318ca3","order":5,"width":3,"height":3,"gtype":"gauge-tank","gstyle":"needle","title":"Free Storage","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#a8f5ff"},{"from":"15","color":"#55dbec"},{"from":"35","color":"#53b4fd"},{"from":"50","color":"#2397d1"}],"min":0,"max":"100","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":670,"y":940,"wires":[]},{"id":"f25a9b1d.c6fce8","type":"OS","z":"772e6979.67cd08","name":"","x":289,"y":125,"wires":[["f745cace.30f2d8","3153bd68.82b782","7eec4b7e.c15ad4","6b4d7f76.271fb"]]},{"id":"c63cb373.ce94f","type":"Uptime","z":"772e6979.67cd08","name":"","x":300,"y":80,"wires":[["20567afa.bd4466"]]},{"id":"21faa622.8c25da","type":"CPUs","z":"772e6979.67cd08","name":"","x":289,"y":170,"wires":[[]]},{"id":"7cf01d46.a3cad4","type":"Memory","z":"772e6979.67cd08","name":"","x":300,"y":540,"wires":[["e6b8a679.aff648","dd0cca19.6f90a8","308d683f.10ab08","fbd3e7db.8ca558"]]},{"id":"26049de63a7c276c","type":"ui-iframe","z":"35445cf45a7ff5ec","name":"Security","group":"7f84e6e11f01d5aa","order":1,"src":"http://192.168.42.1/#/security","width":6,"height":8,"x":540,"y":300,"wires":[]},{"id":"065482ff4ae93ed5","type":"ui-iframe","z":"35445cf45a7ff5ec","name":"Network","group":"15bec593c23e2df1","order":1,"src":"http://192.168.42.1/#/network","width":"6","height":"18","x":540,"y":380,"wires":[]},{"id":"bdacae98db81c9e1","type":"ui-iframe","z":"35445cf45a7ff5ec","name":"Terminal","group":"62e3f90362f475e5","order":1,"src":"http://192.168.42.1/#/terminal","width":"6","height":"18","x":540,"y":480,"wires":[]}]⚙️Follow these steps to import flow.js
Step1 click Import
Step2 click select a file to import then select dashboard_v_0.5.json and click Import.
