{"id":2,"date":"2024-08-14T04:39:31","date_gmt":"2024-08-14T04:39:31","guid":{"rendered":"https:\/\/www.mosnet.info\/?page_id=2"},"modified":"2024-11-23T02:27:07","modified_gmt":"2024-11-23T02:27:07","slug":"st01","status":"publish","type":"page","link":"https:\/\/www.mosnet.info\/","title":{"rendered":"Station 01"},"content":{"rendered":"<style>\nbody {<br \/>\n    font-family: Arial, sans-serif;<br \/>\n}<\/p>\n<p>.background-image-table {<br \/>\n    width: 100%;<br \/>\n    margin: 20px auto;<br \/>\n    border-collapse: collapse;<br \/>\n    background-image: url('https:\/\/www.mosnet.info\/wp-content\/uploads\/2024\/08\/Untitled.png'); \/* Set your background image here *\/<br \/>\n    background-size: cover; \/* Ensure the image covers the entire table *\/<br \/>\n    background-position: center; \/* Center the image *\/<br \/>\n    background-repeat: no-repeat; \/* Avoid repeating the image *\/<br \/>\n    text-align: center;<br \/>\n}<\/p>\n<p>.background-image-table th, .background-image-table td {<br \/>\n    padding: 15px;<br \/>\n    border: 1px solid #ddd;<br \/>\n    background-color: rgba(255, 255, 255, 0.8); \/* Add transparency to make content readable *\/<br \/>\n}<\/p>\n<p>.background-image-table th {<br \/>\n    background-color: rgba(0, 0, 0, 0.6);<br \/>\n    color: #fff;<br \/>\n}<\/p>\n<p>        body, html {<br \/>\n            margin: 0;<br \/>\n            height: 100%;<br \/>\n        }<\/p>\n<p>        table {<br \/>\n            height: 80vh;<br \/>\n            width: 80%;<br \/>\n            border-collapse: collapse;<\/p>\n<p>        }<\/p>\n<p>        td {<br \/>\n            padding: 5px;<br \/>\n            border: 5px solid black;<br \/>\n            text-align: center;<br \/>\n            vertical-align: middle;<br \/>\n        }<br \/>\n    <\/style>\n<p>&nbsp;<\/p>\n<h1>Condition of SwitchGear Monitoring System (COSMOS 1.0)<\/h1>\n<p>&nbsp;<\/p>\n<table class=\"background-image-table\" width=\"80%\">\n<tbody>\n<tr>\n<td>\n<h2>Train track switch<\/h2>\n<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td rowspan=\"4\"><head>\r\n    <script type=\"text\/javascript\" src=\"https:\/\/www.gstatic.com\/charts\/loader.js\"><\/script>\r\n    <script type=\"text\/javascript\">\r\n        google.charts.load('current', {'packages':['corechart']});\r\n        google.charts.setOnLoadCallback(drawChartM);\r\n\r\n        function drawChartM() {\r\n            \/\/ Fetch data from the PHP function\r\n            fetch('https:\/\/www.mosnet.info\/wp-content\/plugins\/fromCosmosv1\/motorvolt.php')\r\n                .then(response => response.json())\r\n                .then(chartData => {\r\n                    \/\/ Reverse the data order to change direction\r\n                    chartData.reverse();\r\n\r\n                    \/\/ Prepare the data for Google Charts\r\n                    var data = new google.visualization.DataTable();\r\n                    data.addColumn('string', 'Time (hh:mm)'); \/\/ Horizontal axis (formatted time)\r\n                    data.addColumn('number', 'Left'); \/\/ Vertical axis (value28)\r\n                    data.addColumn('number', 'Right'); \/\/ Vertical axis (value29)\r\n\r\n                    \/\/ Populate the data table\r\n                    chartData.forEach(function(row) {\r\n                        data.addRow([row.DataM, row.value20, row.value21]);\r\n                    });\r\n\r\n                    \/\/ Set chart options\r\n                    var options = {\r\n                        title: 'Motor Voltage',\r\n                        hAxis: { title: 'Time (hh:mm)' },\r\n                        vAxis: { title: 'Volt' },\r\n                        bars: 'vertical',\r\n                        bar: { groupWidth: '75%' },\r\n                        colors: ['#1b9e77', '#d95f02'],\r\n                        height: 300\r\n\t\t\t\t\t\t\r\n                    };\r\n\r\n                    \/\/ Instantiate and draw the chart\r\n                    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div8'));\r\n                    chart.draw(data, options);\r\n                });\r\n        }\r\n\t\t\r\n        setInterval(drawChartM, 30000);\r\n    <\/script>\r\n<\/head>\r\n<body>\r\n     <style>\r\n        #chart_div8 {\r\n            width: 80vw; \/* Set the width using vh (viewport height) *\/\r\n            height: 300px; \/* Keep the height as fixed or adjust as needed *\/\r\n        }\r\n \r\n    .home-button {\r\n        display: inline-block;\r\n        padding: 10px 20px;\r\n        font-size: 16px;\r\n        color: #fff;\r\n        background-color: #007bff; \/* Blue color *\/\r\n        border: none;\r\n        border-radius: 5px;\r\n        text-decoration: none;\r\n        text-align: center;\r\n    }\r\n\r\n    .home-button:hover {\r\n        background-color: #0056b3; \/* Darker blue on hover *\/\r\n    }\r\n<\/style>\r\n    <div id=\"chart_div8\"><\/div>\r\n<\/body>\r\n <center> <a href=\"dc-150v\/\" class=\"home-button\">Voltage data history<\/a><\/center><head>\r\n    <script type=\"text\/javascript\" src=\"https:\/\/www.gstatic.com\/charts\/loader.js\"><\/script>\r\n    <script type=\"text\/javascript\">\r\n        google.charts.load('current', {'packages':['corechart']});\r\n        google.charts.setOnLoadCallback(drawChart);\r\n\r\n        function drawChart() {\r\n            \/\/ Fetch data from the PHP function\r\n            fetch('https:\/\/www.mosnet.info\/wp-content\/plugins\/fromCosmosv1\/pressure.php')\r\n                .then(response => response.json())\r\n                .then(chartData => {\r\n                    \/\/ Reverse the data order to change direction\r\n                    chartData.reverse();\r\n\r\n                    \/\/ Prepare the data for Google Charts\r\n                    var data = new google.visualization.DataTable();\r\n                    data.addColumn('string', 'Time (hh:mm)'); \/\/ Horizontal axis (formatted time)\r\n                    data.addColumn('number', 'Left'); \/\/ Vertical axis (value28)\r\n                    data.addColumn('number', 'Right'); \/\/ Vertical axis (value29)\r\n\r\n                    \/\/ Populate the data table\r\n                    chartData.forEach(function(row) {\r\n                        data.addRow([row.Data1, row.value28, row.value29]);\r\n                    });\r\n\r\n                    \/\/ Set chart options\r\n                    var options = {\r\n                        title: 'Pressure',\r\n                        hAxis: { title: 'Time (hh:mm)' },\r\n                        vAxis: { title: 'Bar' },\r\n                        bars: 'vertical',\r\n                        bar: { groupWidth: '75%' },\r\n                        colors: ['#1b9e77', '#d95f02'],\r\n                        height: 300\r\n\t\t\t\t\t\t\r\n                    };\r\n\r\n                    \/\/ Instantiate and draw the chart\r\n                    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div7'));\r\n                    chart.draw(data, options);\r\n                });\r\n        }\r\n\t\t\r\n        setInterval(drawChart, 30000);\r\n    <\/script>\r\n<\/head>\r\n<body>\r\n     <style>\r\n        #chart_div7 {\r\n            width: 80vw; \/* Set the width using vh (viewport height) *\/\r\n            height: 300px; \/* Keep the height as fixed or adjust as needed *\/\r\n        }\r\n\t\t  .home-button {\r\n        display: inline-block;\r\n        padding: 10px 20px;\r\n        font-size: 16px;\r\n        color: #fff;\r\n        background-color: #007bff; \/* Blue color *\/\r\n        border: none;\r\n        border-radius: 5px;\r\n        text-decoration: none;\r\n        text-align: center;\r\n    }\r\n\r\n    .home-button:hover {\r\n        background-color: #0056b3; \/* Darker blue on hover *\/\r\n    }\r\n    <\/style>\r\n    <div id=\"chart_div7\"><\/div>\r\n<\/body>\r\n\r\n   \r\n\r\n\r\n\r\n <center> <a href=\"pressure\/\" class=\"home-button\">Pressure data history<\/a><\/center><\/td>\n<td><center><head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Dynamic Gauge Chart<\/title>\r\n    <script type=\"text\/javascript\" src=\"https:\/\/www.gstatic.com\/charts\/loader.js\"><\/script>\r\n    <script type=\"text\/javascript\">\r\n        google.charts.load('current', {'packages':['gauge']});\r\n        google.charts.setOnLoadCallback(drawChart);\r\n\r\n        function drawChart() {\r\n            fetch('https:\/\/www.mosnet.info\/wp-content\/plugins\/fromCosmosv1\/supplyvolt.php')\r\n                .then(response => response.text())\r\n                .then(maxValue => {\r\n                    \/\/ Ensure maxValue is a number\r\n                    var numericValue = parseFloat(maxValue);\r\n\r\n                    \/\/ Create a data table\r\n                    var data = google.visualization.arrayToDataTable([\r\n                        ['Label', 'Value'],\r\n                        ['V', numericValue]\r\n                    ]);\r\n\r\n                    \/\/ Chart options\r\n                    var options = {\r\n                        width: 400, height: 120,\r\n                        redFrom: 0, redTo: 80,\r\n                        yellowFrom: 80, yellowTo: 90,\r\n                        greenFrom: 90, greenTo: 110,\r\n                        minorTicks: 5,\r\n                        max: 110\r\n                    };\r\n\r\n                    \/\/ Create and draw the chart\r\n                    var chart = new google.visualization.Gauge(document.getElementById('chart_div'));\r\n                    chart.draw(data, options);\r\n                })\r\n                .catch(error => console.error('Error fetching data:', error));\r\n        }\r\n\r\n        \/\/ Refresh the chart every 30 seconds\r\n        setInterval(drawChart, 30000);\r\n    <\/script>\r\n    <style>\r\n        #chart_div {\r\n            width: 100%;\r\n            height: 100px;\r\n            margin: auto;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <p>Supply Voltage<\/p>\r\n    <div id=\"chart_div\"><\/div>\r\n<\/body>\r\n\r\n<\/center><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\"><head>\r\n\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n    <style>\r\n        \/* CSS for tank container and styling *\/\r\n        #tank {\r\n            position: relative;\r\n            width: 80px;\r\n            height: 100px;\r\n            background-color: #e0e0e0;\r\n            border: 2px solid #444;\r\n            border-radius: 15px;\r\n            margin: 20px auto;\r\n            overflow: hidden;\r\n        }\r\n\r\n        #oil-level {\r\n            position: absolute;\r\n            bottom: 0;\r\n            width: 100%;\r\n            background-color: #0077b6;\r\n            transition: height 0.5s ease;\r\n        }\r\n\r\n        #oil-label {\r\n            position: absolute;\r\n            top: 10px;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            font-size: 10px;\r\n            font-weight: bold;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\t<center><p>\tOil Level\t<\/p><\/center>\r\n    <div id=\"tank\">\r\n\t\t<div id=\"oil-level\"><\/div>\r\n        <div id=\"oil-label\"><span id=\"oil-percentage0\"><\/span><\/div>\r\n    <\/div>\r\n \r\n\r\n    <script>\r\n        \/\/ JavaScript to dynamically set the oil level\r\n        function updateOilLevel(percentage) {\r\n            const oilLevel = document.getElementById('oil-level');\r\n            const oilPercentageLabel = document.getElementById('oil-percentage');\r\n\r\n            \/\/ Update height based on percentage\r\n            oilLevel.style.height = percentage + '%';\r\n            oilPercentageLabel.textContent = percentage + '%';\r\n        }\r\n\r\n        \/\/ Simulating data (you can replace this with data from PHP)\r\n        var oilLevelPercentage = 74.1; \/\/ For example, the oil level is 75%\r\n\t\t\r\n        \r\n           fetch('https:\/\/www.mosnet.info\/wp-content\/plugins\/fromCosmosv1\/oillevel.php')\r\n                .then(response => response.text())\r\n                .then(maxValue => {\r\n                    \/\/ Ensure maxValue is a number\r\n                   \/\/ var oilLevelPercentage =100* parseFloat(maxValue);\t\r\n\t\t\t   updateOilLevel(parseInt(100*parseFloat(maxValue)));\r\n                })\r\n                .catch(error => console.error('Error fetching data:', error));\r\n      setInterval(updateOilLevel(75),30000);\r\n     \/\/   setInterval(drawChart, 30000);\r\n\r\n    <\/script>\r\n<\/body>\r\n\r\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\"><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\"><\/td>\n<\/tr>\n<tr>\n<td colspan=\"2\"><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; Condition of SwitchGear Monitoring System (COSMOS 1.0) &nbsp; Train track switch<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.mosnet.info\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mosnet.info\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mosnet.info\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mosnet.info\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mosnet.info\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":102,"href":"https:\/\/www.mosnet.info\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":503,"href":"https:\/\/www.mosnet.info\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/503"}],"wp:attachment":[{"href":"https:\/\/www.mosnet.info\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}