Modular version of storage monitor for 4 items, easy to implement, easy to develop.
{"slots":{"0":{"name":"screen","type":{"events":[],"methods":[]}},"1":{"name":"container4","type":{"events":[],"methods":[]}},"2":{"name":"container3","type":{"events":[],"methods":[]}},"3":{"name":"container2","type":{"events":[],"methods":[]}},"4":{"name":"container1","type":{"events":[],"methods":[]}},"5":{"name":"slot6","type":{"events":[],"methods":[]}},"6":{"name":"slot7","type":{"events":[],"methods":[]}},"7":{"name":"slot8","type":{"events":[],"methods":[]}},"8":{"name":"slot9","type":{"events":[],"methods":[]}},"9":{"name":"slot10","type":{"events":[],"methods":[]}},"-1":{"name":"unit","type":{"events":[],"methods":[]}},"-2":{"name":"system","type":{"events":[],"methods":[]}},"-3":{"name":"library","type":{"events":[],"methods":[]}}},"handlers":[{"code":"-- Stop Timer\n\nunit.stopTimer(\"screen\")\n\n-- Turn Off Screen\n\nscreen.deactivate()\nscreen.clear()","filter":{"args":[],"signature":"stop()","slotKey":"-1"},"key":"0"},{"code":"-- Start Timer\n\nunit.setTimer(\"screen\",1)\n\n-- Turn On Screen\n\nscreen.activate()","filter":{"args":[],"signature":"start()","slotKey":"-1"},"key":"1"},{"code":"local _MAX_WIDTH_ = 46.5\n\nlocal itemLabel1 = \"itemLabel1\" --export\nlocal itemMass1 = (container1 and container1.getItemsMass() or 0)\nlocal maxInContainer1 = 0 --export\nlocal itemDensity1 = 0 --export\n\nlocal itemLabel2 = \"itemLabel2\" --export\nlocal itemMass2 = (container2 and container2.getItemsMass() or 0)\nlocal maxInContainer2 = 0 --export\nlocal itemDensity2 = 0 --export\n\nlocal itemLabel3 = \"itemLabel3\" --export\nlocal itemMass3 = (container3 and container3.getItemsMass() or 0)\nlocal maxInContainer3 = 0 --export\nlocal itemDensity3 = 0 --export\n\nlocal itemLabel4 = \"itemLabel4\" --export\nlocal itemMass4 = (container4 and container4.getItemsMass() or 0)\nlocal maxInContainer4 = 0 --export\nlocal itemDensity4 = 0 --export\n\nlocal itemsData = {\n {\n label = itemLabel1,\n mass = itemMass1,\n containerCapacity = maxInContainer1,\n density = itemDensity1\n },\n {\n label = itemLabel2,\n mass = itemMass2,\n containerCapacity = maxInContainer2,\n density = itemDensity2\n },\n {\n label = itemLabel3,\n mass = itemMass3,\n containerCapacity = maxInContainer3,\n density = itemDensity3\n },\n {\n label = itemLabel4,\n mass = itemMass4,\n containerCapacity = maxInContainer4,\n density = itemDensity4\n }\n}\n\nfunction getBarStatus(item)\n local width = math.ceil(item.mass / item.density) * _MAX_WIDTH_ / item.containerCapacity\n\n if width > _MAX_WIDTH_ then\n return _MAX_WIDTH_\n end\n\n return width\nend\n\nfunction getItemStatus(item)\n local percent = math.ceil(item.mass / item.density / item.containerCapacity * 100)\n\n if percent <= 25 then\n return [[\n background: rgb(27,0,0);\n background: linear-gradient(90deg, rgba(27,0,0,1) 0%, rgba(129,23,23,1) 25%, rgba(251,0,0,1) 100%);\n ]]\n end\n\n if percent > 25 and percent < 60 then\n return [[\n background: rgb(27,0,0);\n background: linear-gradient(90deg, rgba(27,0,0,1) 0%, rgba(129,101,23,1) 25%, rgba(251,202,0,1) 100%)\n ]]\n end\n\n if percent > 100 then\n return [[\n background: rgb(27,0,0);\n background: linear-gradient(90deg, rgba(27,0,0,1) 0%, rgba(255,0,0,1) 25%, rgba(255,0,0,1) 100%)\n ]]\n end\n\n return [[\n background: rgb(5,27,0);\n background: linear-gradient(90deg, rgba(5,27,0,1) 0%, rgba(38,129,23,1) 25%, rgba(34,251,0,1) 100%);\n ]]\nend\n\nlocal dynamicStyle = \"\"\n\nfor i, item in pairs(itemsData) do\n dynamicStyle = dynamicStyle .. [[\n .progress-bar-item]] .. i .. [[ {\n width: ]] .. getBarStatus(item) .. [[vw;\n ]] .. getItemStatus(item) .. [[\n }\n ]]\nend\n\nlocal style = [[\nbody {\n width: auto;\n background-color: rgba(0, 0, 0, 1);\n}\n\nem {\n font-weight: bold;\n}\n\n.item1 {\n text-shadow: 0 0vw 0.11vw rgba(146, 220, 226, 0.8);\n color: rgba(146, 220, 226, 0.8);\n}\n\n.item2 {\n text-shadow: 0 0vw 0.11vw rgba(175, 170, 165, 0.8);\n color: rgba(175, 170, 165, 0.8);\n}\n\n.item3 {\n text-shadow: 0 0vw 0.11vw rgba(235, 99, 65, 0.8);\n color: rgba(235, 99, 65, 0.8);\n}\n\n.item4 {\n text-shadow: 0 0vw 0.11vw rgba(247, 250, 71, 0.8);\n color: rgba(247, 250, 71, 0.8);\n font-size: 2.58vw;\n}\n\n.weak {\n animation: faible 1s infinite alternate;\n}\n\n.progress-bar {\n overflow: visible;\n white-space: nowrap;\n height: auto;\n box-shadow: 0 0vw 0.2vw rgba(0, 0, 0, 0.8);\n}\n\n.prime {\n witdh : auto;\n position: absolute;\n left: 2.58vw;\n animation: show 1s ease-in;\n}\n\n.title h1 {\n font-size: 8vw;\n text-align: center;\n padding: 0.26vw;\n}\n\n.container {\n text-align: center;\n width: 50vw;\n display: grid;\n grid-template-columns: 25.8vw 20.64vw 100%;\n align-items: center;\n padding: 0.51vw;\n}\n\n.item_container {\n justify-self: auto;\n padding: 1.03vw;\n font-size: 3.09vw;\n text-align: center;\n color: white;\n}\n\n.item_container_item1 {\n background-color: rgba(146, 220, 226, 0.4);\n border: 0.2vw solid rgba(146, 220, 226, 1);\n}\n\n.item_container_item2 {\n background-color: rgba(175, 170, 165, 0.4);\n border: 0.2vw solid rgba(175, 170, 165, 1);\n}\n\n.item_container_item3 {\n background-color: rgba(235, 99, 65, 0.4);\n border: 0.2vw solid rgba(235, 99, 65, 1);\n\n}\n\n.item_container_item4 {\n background-color: rgba(247, 250, 71, 0.4);\n border: 0.2vw solid rgba(247, 250, 71, 1);\n font-size: 2.58vw;\n}\n\n.item_container_item1--1 {\n background-color: rgba(0, 0, 0, 0.4);\n}\n.item_container_item2--1 {\n background-color: rgba(0, 0, 0, 0.4);\n}\n.item_container_item3--1 {\n background-color: rgba(0, 0, 0, 0.4);\n}\n.item_container_item4--1 {\n background-color: rgba(0, 0, 0, 0.4);\n}\n\n.infos_title {\n position: relative;\n left: 34.83vw;\n color: red;\n margin-bottom: 3.09vw;\n width: 25.8vw;\n font-weight: bold;\n border-bottom: 0.31vw solid red;\n font-size: 3.92vw;\n animation: urgent 2s infinite alternate;\n}\n.item_container_message {\n justify-self: center;\n align-items: center;\n font-size: 3.09vw;\n text-align: center;\n color: white;\n padding-right: 0.16vw;\n}\n\n@keyframes show {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes faible {\n 0% {\n transform: scale(0.95);\n }\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes urgent {\n 0% {\n transform: scale(1.25);\n }\n 100% {\n transform: scale(1.5);\n }\n}\n\n]] .. dynamicStyle\n\nlocal htmlStart = [[\n<html>\n<head>\n<style>\n ]] .. style .. [[\n</style>\n</head>\n\n<header>\n\t<div class=\"title\">\n\t\t<h1>Storage monitor</h1>\n\t</div>\n</header>\n\n<body>\n<div class=\"prime\">\n]]\n\nlocal htmlEnd = [[\n</div>\n</body>\n</html>\n]]\n\nfunction convertUnit(volume)\n if volume <= 9999 then\n return volume .. \" L\"\n end\n if volume >= 10000 and volume < 1000000 then\n return math.floor(volume / 1000) .. \" Kl\"\n end\n if volume >= 1000000 then\n return math.floor(volume / 10000) / 100 .. \" Ml\"\n end\nend\n\nfunction container(item, index)\n return [[\n <div class=\"container\">\n <div class=\"container container__block--1\">\n <div class=\"item_container item_container_]] .. index .. [[\">\n ]] .. item.label .. [[ :\n </div>\n <div class=\"item_container item_container_]] .. index .. [[\">\n ]] .. convertUnit(item.containerCapacity) .. [[\n </div>\n <div class=\"item_container item_container_]] .. index .. [[ item_container_]] .. index .. [[--1\">\n <div class=\"progress-bar progress-bar-]] .. index .. [[\">\n ]] .. math.ceil(((item.mass / item.density) / item.containerCapacity) * 100) .. [[ %\n </div>\n </div>\n </div>\n </div>\n ]]\nend\n\nlocal containers = \"\"\n\nfor i, item in pairs(itemsData) do\n containers = containers .. container(item, \"item\" .. i)\nend\n\nlocal view = [[\n ]] .. htmlStart .. [[\n ]] .. containers .. [[\n ]] .. htmlEnd .. [[\n]]\n\nscreen.setHTML(view)\n","filter":{"args":[{"value":"screen"}],"signature":"tick(timerId)","slotKey":"-1"},"key":"2"}],"methods":[],"events":[]}
Easy to modify to your needs
Parameters docs
| Parameter | Description | Default value | Type |
|---|---|---|---|
| itemLabel1 | Display text | "itemLabel1" | String |
| maxInContainer1 | Maximum volume in container | 0 | Number |
| itemDensity1 | Density of content in container | 0 | Number |
| itemLabel2 | Display text | "itemLabel2" | String |
| maxInContainer2 | Maximum volume in container | 0 | Number |
| itemDensity2 | Density of content in container | 0 | Number |
| itemLabel3 | Display text | "itemLabel3" | String |
| maxInContainer3 | Maximum volume in container | 0 | Number |
| itemDensity3 | Density of content in container | 0 | Number |
| itemLabel4 | Display text | "itemLabel4" | String |
| maxInContainer4 | Maximum volume in container | 0 | Number |
| itemDensity4 | Density of content in container | 0 | Number |
Preview on screen M
