This is the code for the web based panel (web based UI) that will display the data received from arduino or can send some command to the Arduino<\/p>\n
All communications are done through a server (web server)<\/p>\n
The frontend code The backend codes<\/strong><\/p>\n This is the code for the web based panel (web based UI) that will display the data received from arduino or can send some command to the Arduino All communications are done through a server (web server) The frontend code <?php date_default_timezone_set(“Asia\/Kolkata”); $conn = mysql_connect(“localhost”,”root”,”xxxxxxxxxx”); if(!$conn) { \u00a0\u00a0 \u00a0echo “Error: failed to connect DB”; \u00a0\u00a0… Continue reading Arduino – Communicate With Server – Part 3 – Web Based Panel<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,3],"tags":[33],"class_list":["post-282","post","type-post","status-publish","format-standard","hentry","category-arduino","category-php","tag-web-panel-for-arduino","entry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/posts\/282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/comments?post=282"}],"version-history":[{"count":4,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/posts\/282\/revisions"}],"predecessor-version":[{"id":447,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/posts\/282\/revisions\/447"}],"wp:attachment":[{"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/media?parent=282"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/categories?post=282"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/tags?post=282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n<\/strong><\/p>\n\n
<?php<\/span>\r\ndate_default_timezone_set(\"Asia\/Kolkata\");<\/span>\r\n$conn = mysql_connect(\"localhost\",\"root\",\"xxxxxxxxxx\");<\/span>\r\nif(!$conn)<\/span>\r\n{<\/span>\r\n\u00a0\u00a0 \u00a0echo \"Error: failed to connect DB\";<\/span>\r\n\u00a0\u00a0 \u00a0die();<\/span>\r\n}<\/span>\r\n\r\nif(!mysql_select_db(\"xxxxxxxx\",$conn))<\/span>\r\n{<\/span>\r\n\u00a0\u00a0 \u00a0echo \"Error: failed to connect DB\";<\/span>\r\n\u00a0\u00a0 \u00a0die();<\/span>\r\n}<\/span>\r\n$jsonArray1 = array();<\/span>\r\n$jsonArray2 = array();<\/span>\r\n$i=0;<\/span>\r\n\r\n$result = mysql_query(\"select * from weather\");<\/span>\r\nwhile($rows = mysql_fetch_array($result))<\/span>\r\n{<\/span>\r\n\u00a0\u00a0 \u00a0$jsonArray1[$i] = array(date(\"Y,m,d,H,i\",$rows['time']), floatval($rows['temperature']));<\/span>\r\n\u00a0\u00a0 \u00a0$jsonArray2[$i++] = array(date(\"Y,m,d,H,i\",$rows['time']), floatval($rows['paM']));<\/span>\r\n}<\/span>\r\n?><\/span>\r\n<html><\/span>\r\n\u00a0 <head><\/span>\r\n\u00a0 <script type=\"text\/javascript\" src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.10.2\/jquery.min.js\"><\/script><\/span>\r\n\u00a0 <script type=\"text\/javascript\"><\/span>\r\n\u00a0 \u00a0\u00a0 \u00a0var chart, chart2;<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0 window.onload = function () {<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 chart = new CanvasJS.Chart(\"chartContainer\",<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 {<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 title:{<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 text: \"Temperature\"<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 },<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 axisY:{<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 minimum: 0,<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 maximum: 50\u00a0\u00a0\u00a0\u00a0 \u00a0<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 },<\/span>\r\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 data: [<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 type: \"line\",<\/span>\r\n\u00a0\u00a0 \u00a0<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 dataPoints: [<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <?php<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0for($j=0;$j<$i;$j++)<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0{<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ?><\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0{ x: new Date(<?php echo $jsonArray1[$j][0] ?>), y: <?php echo $jsonArray1[$j][1] ?> } <?php echo $j<$i-1?\",\" :\"\" ?><\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 <?php \u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ?>\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ]<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ]<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 });<\/span>\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 chart.render();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 chart2 = new CanvasJS.Chart(\"chartContainer2\",\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 title:{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 text: \"paM\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 },\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 axisY:{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 minimum: 1000,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 maximum: 1040\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 },\r\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 data: [\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 type: \"line\",\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 dataPoints: [\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <?php\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0for($j=0;$j<$i;$j++)\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ?>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0{ x: new Date(<?php echo $jsonArray2[$j][0] ?>), y: <?php echo $jsonArray2[$j][1] ?> } <?php echo $j<$i-1?\",\" :\"\" ?>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 <?php \u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ?>\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ]\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ]\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 chart2.render();\r\n\u00a0\u00a0 \u00a0\u00a0 }\r\n\u00a0\u00a0 \u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0function updateTemp() \r\n\u00a0\u00a0 \u00a0{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var str = JSON.parse(updateData(\"t\"));\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var date = str[1].split(\",\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0chart.options.data[0].dataPoints.push({x : new Date(date[0],date[1],date[2],date[3],date[4]),\u00a0 y : parseFloat(str[0]) });\r\n\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0chart.render(); \u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0};\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0function updatePressure() \r\n\u00a0\u00a0 \u00a0{\r\n\u00a0\u00a0 \u00a0 \u00a0\u00a0\u00a0 \u00a0var str = JSON.parse(updateData(\"p\"));\r\n\u00a0\u00a0 \u00a0 \u00a0\u00a0\u00a0 \u00a0var date = str[1].split(\",\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0chart2.options.data[0].dataPoints.push({ x : new Date(date[0],date[1],date[2],date[3],date[4]), y : parseFloat(str[0]) });\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0chart2.render();\r\n\u00a0\u00a0 \u00a0};\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0function updateData(type)\r\n\u00a0\u00a0 \u00a0{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var xmlhttp = new XMLHttpRequest();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 xmlhttp.open(\"GET\", \"dataPlotter.php?q=\" + type, false);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 xmlhttp.send();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return xmlhttp.responseText;\r\n\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0setInterval(\"updateTemp()\",360000);\r\n\u00a0\u00a0 \u00a0setInterval(\"updatePressure()\",480000);\r\n\u00a0\u00a0 \u00a0\r\n\u00a0 <\/script>\r\n\u00a0 <\/head>\r\n\r\n\u00a0 <body>\r\n<?php\r\n$result = mysql_query(\"select * from led_status\");\r\n$rows = mysql_fetch_array($result);\r\n?> \u00a0\r\n\u00a0 \u00a0\u00a0 \u00a0LED 1 <input type=\"checkbox\" value=\"<?php echo $rows['led_1']==1 ? 1 : 0 ?>\" <?php echo $rows['led_1']==1 ? \"checked=\"checked\"\" : \"\" ?> id=\"led_1\" name=\"led_1\" onclick=\"changeLEd('led_1')\" \/>\r\n\u00a0 \u00a0\u00a0 \u00a0LED 2 <input type=\"checkbox\" value=\"<?php echo $rows['led_2']==1 ? 1 : 0 ?>\" <?php echo $rows['led_2']==1 ? \"checked=\"checked\"\" : \"\" ?> id=\"led_2\" name=\"led_2\" onclick=\"changeLEd('led_2')\" \/>\r\n\u00a0\u00a0\u00a0 <!--Div that will hold the column chart-->\r\n\u00a0\u00a0\u00a0 <div id=\"chartContainer\" style=\"height: 300px; width: 100%;\"><\/div>\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 <div id=\"chartContainer2\" style=\"height: 300px; width: 100%;\"><\/div>\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0<script src=\"canvasjs.min.js\"><\/script>\r\n\u00a0\u00a0 \u00a0<script src=\"jquery.canvasjs.min.js\"><\/script>\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0<script type=\"text\/javascript\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0function changeLEd(whichLed)\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var state;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if(document.getElementById(whichLed).checked == true)\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0state = 1;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0else\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0state = 0;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var xmlhttp = new XMLHttpRequest();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 xmlhttp.open(\"GET\", \"change-led.php?which=\"+whichLed+\"&state=\"+state, false);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 xmlhttp.send();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return xmlhttp.responseText;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0<\/script>\r\n\u00a0 <\/body>\r\n<\/html><\/span><\/pre>\n<\/blockquote>\n\n
dataplotter.php<\/strong>\r\n\r\n<?php\r\ndate_default_timezone_set(\"Asia\/Kolkata\");\r\n$conn = mysql_connect(\"localhost\",\"root\",\"xxxxxxxxxx\");\r\nif(!$conn)\r\n{\r\n\u00a0\u00a0 \u00a0echo \"Error: failed to connect DB\";\r\n\u00a0\u00a0 \u00a0die();\r\n}\r\n\r\nif(!mysql_select_db(\"xxxxxxxx\",$conn))\r\n{\r\n\u00a0\u00a0 \u00a0echo \"Error: failed to connect DB\";\r\n\u00a0\u00a0 \u00a0die();\r\n}\r\n$jsonArray = array();\r\n$i=0;\r\n\r\nif(isset($_GET['q']) && strlen(strip_tags($_GET['q'])))\r\n{\r\n\u00a0\u00a0 \u00a0$type = strip_tags($_GET['q']);\r\n}\r\nelse\r\n{\r\n\u00a0\u00a0 \u00a0$type = \"t\";\r\n}\r\n\r\nif($type == \"t\")\r\n{\r\n\u00a0\u00a0 \u00a0$type = \"temperature\";\r\n}\r\nelse\r\n\u00a0\u00a0 \u00a0if($type == \"p\")\r\n\u00a0\u00a0 \u00a0{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$type = \"paM\";\r\n\u00a0\u00a0 \u00a0}\r\n\r\n$result = mysql_query(\"select \".$type.\",time from weather order by time desc limit 0,1\");\r\n$rows = mysql_fetch_array($result);\r\n\r\nheader('Content-Type: application\/json');\r\necho json_encode(array($rows[$type],date(\"Y,m,d,H,i\",$rows['time'])));\r\n?>\r\n\r\n<\/span><\/pre>\nchange-led.php<\/span>\r\n\r\n<\/strong><?php\r\n$conn = mysql_connect(\"localhost\",\"root\",\"xxxxxxxxxx\");\r\nif(!$conn)\r\n{\r\n\u00a0\u00a0 \u00a0echo \"Error: failed to connect DB\";\r\n\u00a0\u00a0 \u00a0die();\r\n}\r\n\r\nif(!mysql_select_db(\"xxxxxxx\",$conn))\r\n{\r\n\u00a0\u00a0 \u00a0echo \"Error: failed to connect DB\";\r\n\u00a0\u00a0 \u00a0die();\r\n}\r\n\r\n$whichLed = strip_tags($_GET['which']);\r\n$state = strip_tags($_GET['state']);\r\nmysql_query(\"update led_status set \".$whichLed.\" = \".intval($state));\r\n?><\/span><\/pre>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"