{"id":372,"date":"2026-04-30T10:27:19","date_gmt":"2026-04-30T13:27:19","guid":{"rendered":"https:\/\/solarisautomation.com\/?page_id=372"},"modified":"2026-04-30T10:40:53","modified_gmt":"2026-04-30T13:40:53","slug":"suzuki-2","status":"publish","type":"page","link":"https:\/\/solarisautomation.com\/index.php\/suzuki-2\/","title":{"rendered":"Supervis\u00f3rio"},"content":{"rendered":"\n<!DOCTYPE html>\n<html>\n<head>\n\n\n<script>\nwindow.onload = function () {\n\t\t\t\tvar chart = new CanvasJS.Chart(\"nivel_agua\", {\n\t\t\t\tanimationEnabled: false,\n\t\t\t\t\/\/width: 400,\n\t\t\t\ttheme: \"light2\", \/\/ \"light1\", \"light2\", \"dark1\", \"dark2\"\n\t\t\t\ttitle:{\n\t\t\t\t\ttext: \"N\u00edvel de \u00c1gua\"\n\t\t\t\t},\n\t\t\t\taxisY: {\n\t\t\t\t\ttitle: \"N\u00edvel\",\n\t\t\t\t\tmaximum: 4,\n\t\t\t\t\tminimum: 0\n\t\t\t\t},\n\t\t\t\tdata: [{        \n\t\t\t\t\ttype: \"column\",  \n\t\t\t\t\tshowInLegend: true, \n\t\t\t\t\tlegendMarkerColor: \"blue\",\n\t\t\t\t\tlegendText: \"N\u00edvel de \u00c1gua Atual 0-Vazio 1-Refer\u00eancia 2-Baixo 3-Medio 4- Alto\",\n\t\t\t\t\tdataPoints: [      \n\t\t\t\t\t\t{ y: 0,  label: \"N\u00edvel\", color: \"blue\"}\n\t\t\t\t\t]\n\t\t\t\t}]\n\t\t\t});\n\t\t\tchart.render();\n\n}\n<\/script>\n\n<script>\nwindow.onload = function () {\n\t\t\t\tvar chart = new CanvasJS.Chart(\"temperatura\", {\n\t\t\t\tanimationEnabled: false,\n\t\t\t\t\/\/width: 400,\n\t\t\t\ttheme: \"light2\", \/\/ \"light1\", \"light2\", \"dark1\", \"dark2\"\n\t\t\t\ttitle:{\n\t\t\t\t\ttext: \"Temperatura\"\n\t\t\t\t},\n\t\t\t\taxisY: {\n\t\t\t\t\ttitle: \"Temperatura\",\n\t\t\t\t\tmaximum: 100,\n\t\t\t\t\tminimum: 0\n\t\t\t\t},\n\t\t\t\tdata: [{        \n\t\t\t\t\ttype: \"column\",  \n\t\t\t\t\tshowInLegend: true, \n\t\t\t\t\tlegendMarkerColor: \"red\",\n\t\t\t\t\tlegendText: \"Temperatura Atual\",\n\t\t\t\t\tdataPoints: [      \n\t\t\t\t\t\t{ y: 0,  label: \"N\u00edvel\", color: \"red\"  }\n\t\t\t\t\t]\n\t\t\t\t}]\n\t\t\t});\n\t\t\tchart.render();\n\n}\n<\/script>\n\n\n\n\n\n<script>\n\t\tfunction atualizagraficonivel(dado,msg){\n\t\t\tvar chart = new CanvasJS.Chart(\"nivel_agua\", {\n\t\t\t\tanimationEnabled: false,\n\t\t\t\t\/\/width: 400,\n\t\t\t\ttheme: \"light2\", \/\/ \"light1\", \"light2\", \"dark1\", \"dark2\"\n\t\t\t\ttitle:{\n\t\t\t\t\t\ttext: \"N\u00edvel \" + msg\n\t\t\t\t\t},\n\t\t\t\taxisY: {\n\t\t\t\t\ttitle: \"N\u00edvel\",\n\t\t\t\t\tmaximum: 4,\n\t\t\t\t\tminimum: 0\n\t\t\t\t},\n\t\t\t\tdata: [{        \n\t\t\t\t\ttype: \"column\",  \n\t\t\t\t\tshowInLegend: true, \n\t\t\t\t\tlegendMarkerColor: \"blue\",\n\t\t\t\t\tlegendText: \"N\u00edvel de \u00c1gua Atual 0-Vazio 1-Refer\u00eancia 2-Baixo 3-Medio 4- Alto\",\n\t\t\t\t\tdataPoints: [      \n\t\t\t\t\t\t{ y: dado,  label: \"N\u00edvel\", color: \"blue\" }\n\t\t\t\t\t]\n\t\t\t\t}]\n\t\t\t});\n\t\t\tchart.render();\n\t\t}\n<\/script>\n\n\n<script>\n\t\tfunction atualizagraficotemp(dado){\n\t\t\tvar chart = new CanvasJS.Chart(\"temperatura\", {\n\t\t\t\tanimationEnabled: false,\n\t\t\t\t\/\/width: 400,\n\t\t\t\ttheme: \"light2\", \/\/ \"light1\", \"light2\", \"dark1\", \"dark2\"\n\t\t\t\ttitle:{\n\t\t\t\t\ttext: \"Temperatura \" + dado + \"\u00b0C\"\n\t\t\t\t},\n\t\t\t\taxisY: {\n\t\t\t\t\ttitle: \"Temperatura\",\n\t\t\t\t\tmaximum: 100,\n\t\t\t\t\tminimum: 0\n\t\t\t\t},\n\t\t\t\tdata: [{        \n\t\t\t\t\ttype: \"column\",  \n\t\t\t\t\tshowInLegend: true, \n\t\t\t\t\tlegendMarkerColor: \"red\",\n\t\t\t\t\tlegendText: \"Temperatura Atual\",\n\t\t\t\t\tdataPoints: [      \n\t\t\t\t\t\t{ y: dado,  label: \"N\u00edvel\", color: \"red\"  }\n\t\t\t\t\t]\n\t\t\t\t}]\n\t\t\t});\n\t\t\tchart.render();\n\t\t}\n<\/script>\n\n\n  <title>Supervis\u00e3o SUZ16071<\/title>\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/paho-mqtt\/1.0.1\/mqttws31.js\"><\/script>\n  <style>\n\theader {\n\t\tbackground-color: black;\n\t\tposition: relative;\n\t\tpadding: 1px;\n\t\ttext-align: center;\n\t\tfont-size: 20px;\n\t\tcolor: orange;\n\t}\n\t#conn {\n    position: absolute;\n    left: 10px;\n    top: 50%;\n    transform: translateY(-50%);\n\t}\n\t#conn img {\n    width: 50px;   \/* define a largura *\/\n    height: 50px;  \/* define a altura *\/\n    object-fit: contain; \/* mant\u00e9m a propor\u00e7\u00e3o da imagem *\/\n\t}\n\tfooter {\n\t\tbackground-color: black;\n\t\tpadding: 5px;\n\t\ttext-align: right;\n\t\tcolor: white;\n\t}\n\tarticle {\n\t\t\/*float: right;*\/\n\t\tpadding: 20px;\n\t\t\/*width: 100%;*\/\n\t\tbackground-color: orange;\n\t\t\/*height: 700px; \/* only for demonstration, should be removed *\/\n\t}\n\t#alarme {\n    font-family: Arial, sans-serif;\n    font-size: 20px;\n    color: red;\n\tmargin-bottom: 10px; \/* espa\u00e7o abaixo da div *\/\n\tposition: relative;\n    width: 99%;\n    height: 100%;\n\tmargin-top: 0.5%;\n\tmargin-left: 0.7%;\n\tbackground-color: rgba(255,255,255,.9);\n\tpadding: 1px;\n\ttext-align: center;\n\t\/*float: left;*\/\n\tfont-size:20px;\n\tfont-weight: bold;\n\t-moz-border-radius:7px;\n\t-webkit-border-radius:7px;\n\tborder-radius:7px;\n\tbox-shadow: 5px 5px 10px #000000;\n\t-webkit-box-shadow: 5px 5px 10px #000000;\n\t-moz-box-shadow: 5px 5px 10px #000000;\n\t}\n\t#op {\n    font-family: Arial, sans-serif;\n    font-size: 20px;\n    color: blue;\n\tmargin-bottom: 10px; \/* espa\u00e7o abaixo da div *\/\n\tposition: relative;\n    width: 99%;\n    height: 100%;\n\tmargin-top: 0.5%;\n\tmargin-left: 0.7%;\n\tbackground-color: rgba(255,255,255,.9);\n\tpadding: 1px;\n\ttext-align: center;\n\t\/*float: left;*\/\n\tfont-size:20px;\n\tfont-weight: bold;\n\t-moz-border-radius:7px;\n\t-webkit-border-radius:7px;\n\tborder-radius:7px;\n\tbox-shadow: 5px 5px 10px #000000;\n\t-webkit-box-shadow: 5px 5px 10px #000000;\n\t-moz-box-shadow: 5px 5px 10px #000000;\n\t}\n\t#tempo {\n    font-family: Arial, sans-serif;\n    font-size: 20px;\n    color: black;\n\tmargin-bottom: 10px; \/* espa\u00e7o abaixo da div *\/\n\tposition: relative;\n    width: 99%;\n    height: 100%;\n\tmargin-top: 0.5%;\n\tmargin-left: 0.7%;\n\tbackground-color: rgba(255,255,255,.9);\n\tpadding: 1px;\n\ttext-align: center;\n\t\/*float: left;*\/\n\tfont-size:20px;\n\tfont-weight: bold;\n\t-moz-border-radius:7px;\n\t-webkit-border-radius:7px;\n\tborder-radius:7px;\n\tbox-shadow: 5px 5px 10px #000000;\n\t-webkit-box-shadow: 5px 5px 10px #000000;\n\t-moz-box-shadow: 5px 5px 10px #000000;\n\t}\n\t#nivel_agua{\n\twidth: 50%;\n    height: 100%;\n\tmargin-top: 0.5%;\n\tmargin-left: 0.7%;\n\tbackground-color: rgba(255,255,255,.9);\n\tpadding: 1px;\n\ttext-align: center;\n\t\/*float: left;*\/\n\tfont-size:20px;\n\tfont-weight: bold;\n\t-moz-border-radius:7px;\n\t-webkit-border-radius:7px;\n\tborder-radius:7px;\n\tbox-shadow: 5px 5px 10px #000000;\n\t-webkit-box-shadow: 5px 5px 10px #000000;\n\t-moz-box-shadow: 5px 5px 10px #000000;\n\t}\n\t#temperatura{\n\twidth: 50%;\n    height: 100%;\n\tmargin-top: 0.5%;\n\tmargin-left: 0.7%;\n\tbackground-color: rgba(255,255,255,.9);\n\tpadding: 1px;\n\ttext-align: center;\n\t\/*float: left;*\/\n\tfont-size:20px;\n\tfont-weight: bold;\n\t-moz-border-radius:7px;\n\t-webkit-border-radius:7px;\n\tborder-radius:7px;\n\tbox-shadow: 5px 5px 10px #000000;\n\t-webkit-box-shadow: 5px 5px 10px #000000;\n\t-moz-box-shadow: 5px 5px 10px #000000;\n\t}\n\t#estatisticas{\n\twidth: 99%;\n    height: 100%;\n\tmargin-top: 0.5%;\n\tmargin-left: 0.7%;\n\tbackground-color: rgba(255,255,255,.9);\n\tpadding: 1px;\n\ttext-align: center;\n\t\/*float: left;*\/\n\tfont-size:20px;\n\tfont-weight: bold;\n\t-moz-border-radius:7px;\n\t-webkit-border-radius:7px;\n\tborder-radius:7px;\n\tbox-shadow: 5px 5px 10px #000000;\n\t-webkit-box-shadow: 5px 5px 10px #000000;\n\t-moz-box-shadow: 5px 5px 10px #000000;\n\t}\n\t\/* Responsive layout - makes the two columns\/boxes stack on top of each other instead of next to each other, on small screens *\/\n\t@media (max-width: 600px) {\n\tnav, article {\n\t\twidth: 100%;\n\t\theight: auto;\n\t\t}\n\t}\n<\/style>\n<\/head>\n\n\n<body>\n\t<header>\n\t\t<div id=\"conn\"><img src=https:\/\/solarisautomation.com\/wp-content\/uploads\/2026\/04\/k.lamp0_00.png alt=\"Status\"><\/div>\n\t\t<h2>Supervis\u00e3o Lavadora Suzuki<\/h2>\n\t<\/header>\n\t<article class=\"menucentral\">\n\t  <div id=\"alarme\"><\/div>\n\t  <div id=\"op\"><\/div>\n\t  <div id=\"tempo\"><\/div>\n\n\t  <div style=\"display: flex;\">\n\t\t<div id=\"nivel_agua\" style=\"height: 300px; width: 50%;\"><\/div>\n\t\t<div id=\"temperatura\" style=\"height: 300px; width: 50%;\"><\/div>\n\t\t<script src=\"https:\/\/cdn.canvasjs.com\/canvasjs.min.js\"><\/script>\n\t  <\/div>\n\t  \n\t  <div id=\"estatisticas\"><\/div>\n\n\n\t<script>\n    const client = new Paho.MQTT.Client(\"5eba10be1ea34bb884bcdd5d37385637.s1.eu.hivemq.cloud\", 8884, \"webClient_\" + Date.now());\n\n    client.onConnectionLost = function(responseObject) {\n      console.log(\"Conex\u00e3o perdida\");\n    };\n\n\tlet status = null;\n\tlet temperatura = 0;\n\tlet temperatura_ant = 0;\n\tlet nivel = 0;\n\tlet nivel_ant = 0;\n\tlet alarme = null;\n\tlet op = null;\n\tlet tempo = null;\n\n    client.onMessageArrived = function(message) {\n\t\tconst topico = message.destinationName;\n\t\tconst valor = message.payloadString;\n\t\tif (topico === \"M1\/Conexao\") {\n\t\t\tstatus = valor;\n\t\t\t\/\/document.getElementById(\"conn\").innerText = status;\n\t\t\tif (status==\"ESP-12 Conectado!\"){\n\t\t\t\tdocument.getElementById(\"conn\").innerHTML = `<img src=https:\/\/solarisautomation.com\/wp-content\/uploads\/2026\/04\/k.lamp0_01.png alt=\"Status\">`;\n\t\t\t}\n\t\t}\n\t\tif (topico === \"M1\/Temperatura\") {\n\t\t\ttemperatura = Number(valor);\n\t\t\t\/\/document.getElementById(\"temp\").innerText = temperatura;\n\t\t\tif (temperatura!=temperatura_ant){\n\t\t\t\ttemperatura_ant=temperatura;\n\t\t\t\tatualizagraficotemp(temperatura);\n\t\t\t}\n\t\t}\n\t\tif (topico === \"M1\/Nivel\") {\n\t\t\tnivel=Number(valor);\n\t\t\t\/\/document.getElementById(\"nivel\").innerText = nivel;\n\t\t\tif (nivel!=nivel_ant){\n\t\t\t\tnivel_ant=nivel;\n\t\t\t\tif (nivel==0){\n\t\t\t\t\tatualizagraficonivel(nivel,\"Vazio\");\n\t\t\t\t}\n\t\t\t\tif (nivel==1){\n\t\t\t\t\tatualizagraficonivel(nivel,\"Refer\u00eancia\");\n\t\t\t\t}\n\t\t\t\tif (nivel==2){\n\t\t\t\t\tatualizagraficonivel(nivel,\"Baixo\");\n\t\t\t\t}\n\t\t\t\tif (nivel==3){\n\t\t\t\t\tatualizagraficonivel(nivel,\"Medio\");\n\t\t\t\t}\n\t\t\t\tif (nivel==4){\n\t\t\t\t\tatualizagraficonivel(nivel,\"Alto\");\n\t\t\t\t}\n\t\t\t\t\n\t\t\t}\t\t\t\n\t\t}\n\t\tif (topico === \"M1\/Alarme\") {\n\t\t\talarme = valor;\n\t\t\tdocument.getElementById(\"alarme\").innerText = \"Alarmes do Sistema: \" + alarme;\n\t\t}\n\t\tif (topico === \"M1\/Operacao\") {\n\t\t\top = valor;\n\t\t\tdocument.getElementById(\"op\").innerText = \"Opera\u00e7\u00e3o Atual da M\u00e1quina: \" + op;\n\t\t}\n\t\tif (topico === \"M1\/Tempo\") {\n\t\t\ttempo = valor;\n\t\t\tdocument.getElementById(\"tempo\").innerText = \"Contagem de Tempo de Ciclo: \" + tempo;\n\t\t}\n    };\n\n    client.connect({\n\t\tuseSSL: true,\n\t\tuserName: \"solaris-esp01\",\n\t\tpassword: \"Solaris752752!\",\n\t\tonSuccess: function() {\n\t\t\tconsole.log(\"Conectado!\");\n\t\t\tclient.subscribe(\"M1\/Conexao\");\n\t\t\tclient.subscribe(\"M1\/Temperatura\");\n\t\t\tclient.subscribe(\"M1\/Nivel\");\n\t\t\tclient.subscribe(\"M1\/Alarme\");\n\t\t\tclient.subscribe(\"M1\/Operacao\");\n\t\t\tclient.subscribe(\"M1\/Tempo\");\n\t\t},\n\t\tonFailure: function(err) {\n\t\t\tconsole.error(\"Erro:\", err);\n\t\t}\n\t});\n\t<\/script>\n<\/article>\n\n  \n\n\n\t<footer>\n\t\t<p>\u00a9 Copyright Solaris Automation 2026 &#8211; All rights reserved<\/p>\n\t<\/footer>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Supervis\u00e3o SUZ16071 Supervis\u00e3o Lavadora Suzuki \u00a9 Copyright Solaris Automation 2026 &#8211; All rights reserved<\/p>\n","protected":false},"author":1,"featured_media":379,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-372","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/solarisautomation.com\/index.php\/wp-json\/wp\/v2\/pages\/372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solarisautomation.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/solarisautomation.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/solarisautomation.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solarisautomation.com\/index.php\/wp-json\/wp\/v2\/comments?post=372"}],"version-history":[{"count":5,"href":"https:\/\/solarisautomation.com\/index.php\/wp-json\/wp\/v2\/pages\/372\/revisions"}],"predecessor-version":[{"id":381,"href":"https:\/\/solarisautomation.com\/index.php\/wp-json\/wp\/v2\/pages\/372\/revisions\/381"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/solarisautomation.com\/index.php\/wp-json\/wp\/v2\/media\/379"}],"wp:attachment":[{"href":"https:\/\/solarisautomation.com\/index.php\/wp-json\/wp\/v2\/media?parent=372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}