MBED HTTP client with web pages for server
Dependencies: DS1820
Fork of J_HTTP_Client by
ForServer/control.php
- Committer:
- JohnnyK
- Date:
- 2018-05-23
- Revision:
- 1:920482bc63f4
- Parent:
- 0:d90e1f7bda1f
File content as of revision 1:920482bc63f4:
<?php session_start(); if($_SESSION["uname"] != true) {header("Location: index.php");;exit();} $server = "sql.someweb.com"; // Here you place your MySQL server address $user = "johnybravo"; // Here you place your user name of your MySQL $pass = "bravo"; // Here you place your password of your MySQL $db = "dtb"; // Here you place your name of your DTB $mysql = mysql_connect($server, $user, $pass); // Connect to MySQL mysql_select_db($db); // Select DTB of MySQL if(!$mysql) { die("Unable connect to server!") } if(isset( $_POST["submit"])) { If(isset($_POST["GPIO1"])){$gpio1 = 1;}else{$gpio1 = 0;} If(isset($_POST["GPIO2"])){$gpio2 = 1;}else{$gpio2 = 0;} If(isset($_POST["GPIO3"])){$gpio3 = 1;}else{$gpio3 = 0;} $myfile = fopen("gpio.txt", "w") or die("Unable to open file!"); $txt = 'gpio:'.$gpio1.' '.$gpio2.' '.$gpio3.''; fwrite($myfile, $txt); fclose($myfile); } $doSql = mysql_query('SELECT * FROM nucleo_data WHERE id=1'); $row = mysql_fetch_array($doSql); $temp = $row['temp']; $time = $row['time']; $date = $row['date']; if(!file_exists("gpio.txt")) { $myfile = fopen("gpio.txt", "w"); $txt = 'gpio: 0 0 0'; fwrite($myfile, $txt); fclose($myfile); } $myfile = fopen("gpio.txt", "r"); $gpio = fread($myfile,filesize("gpio.txt")); fclose($myfile); ?> <!DOCTYPE html> <html> <head> <meta charset= "utf-8"> <title>Input/Output</title> <style> body { margin: 0; padding: 0; font-family: sans-serif; /*background: white url("nucleo.jpg") no-repeat fixed center;*/ } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 500px; padding: 40px; background: rgba(0,0,0,.8); box-sizing:border-box; box-shadow: 0 15px 25px rgba(0,0,0,.5); border-radius: 10px; } .box h2 { margin: 0 50px 30px; padding: 0; color: #fff; text-align: center; } .box input[type="submit"] { background: transparent; border: none; outline: none; color: #fff; background: #03a9f4; padding: 10px 30px; cursor: pointer; border-radius: 5px; } .box input[type="submit"]:hover { cursor: pointer; background: #92b6d5; color: #fff; } .box input[type=checkbox] { display: none; } .box label[id="other"] { position: relative; padding: 0 10px; font-size:16px; color: #fff; vertical-align: middle; bottom: 10px; } .box input[type="checkbox"] + label[id="check"] { margin: 12px 0 0 0; display: inline-block; width: 60px; height: 30px; appearance: none; background: #c6c6c6; outline: 0; border-radius: 20px; box-shadow: inset 0 0 5px; transition: .5; position: relative; } .box input:checked[type="checkbox"] + label[id="check"] { background: #03a9f4 } .box input[type="checkbox"] + label[id="check"]:before { content: ''; position: absolute; width: 30px; height: 30px; border-radius:20px; top: 0; left: 0; background-color: white; transform: scale(0.9); box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: .5s; } .box input:checked[type="checkbox"]+ label[id="check"]:before { left: 30px; } .box .loader { position: absolute; top: 57%; left: 68%; transform: translate(-50%, -50%); width: 200px; height: 200px; box-sizing: border-box; } .box .loader .face { position: absolute; border: 2px solid #121212; } .box .loader .face.face1 { top: 0; left: 0; right: 0; bottom: 0; background: transparent; box-shadow: 0 0 10px rgba(0,0,0,1); border-radius:50%; border-left: 2px solid #ffff00; border-top: 2px solid #ffff00; animation: animate 10s linear infinite; } .box .loader .face.face2 { top: 20px; left: 20px; right: 20px; bottom: 20px; background: transparent; box-shadow: 0 0 10px rgba(0,0,0,1); border-radius:50%; border-right: 2px solid #03a9f4; border-bottom: 2px solid #03a9f4; animation: animate 30s linear reverse infinite; } .box .loader .face .circle { position: absolute; top: calc(50% - 1px); left: 50%; width: 50%; height: 2px; transform-origin: left; } .box .loader .face.face1 .circle { transform: rotate(-45deg); } .box .loader .face.face2 .circle { transform: rotate(-45deg); } .box .loader .face .circle:before { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff; top: -4px; right: -6px; } .box .loader .face.face1 .circle:before { background: #ffff00; box-shadow: 0 0 20px #ff0, 0 0 40px #ff0, 0 0 60px #ff0, 0 0 80px #ff0, 0 0 100px #ff0, 0 0 0 5px rgba(255,255,0,.1); } .box .loader .face.face2 .circle:before { background: #03a9f4; box-shadow: 0 0 20px #03a9f4, 0 0 40px #03a9f4, 0 0 60px #03a9f4, 0 0 80px #03a9f4, 0 0 100px #03a9f4, 0 0 0 5px rgba(3,169,244,.1); } @keyframes animateCircle { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes animate { 0% { transform: rotate(45deg); } 100% { transform: rotate(405deg); } } .loader .text { color: #fff; top: 35%; position: relative; text-align: center; font-size: 16px; } </style> </head> <body> <div class="box"> <h2>Control panel</h2> <form method="POST" action="#"> <div> <input type="checkbox" name="GPIO1" id="checkbox_1" value="" <?php echo ($gpio[5]==1 ? 'checked' : '');?>><label id="check" for ="checkbox_1"></label> <label id="other" for ="checkbox_1">LED1</label> </br> <input type="checkbox" name="GPIO2" id="checkbox_2" value="1" <?php echo ($gpio[7]==1 ? 'checked' : '');?>><label id="check" for ="checkbox_2"></label> <label id="other" for ="checkbox_1">LED2</label> </br> <input type="checkbox" name="GPIO3" id="checkbox_3" value="1" <?php echo ($gpio[9]==1 ? 'checked' : '');?>><label id="check" for ="checkbox_3"></label> <label id="other" for ="checkbox_1">LED3</label> </div> </br> <div class="loader"> <div class="text">Temperature: <?php if(isset($temp)) { echo $temp; } ?>℃</br> Date: <?php if(isset($date)) { echo $date; } ?></br>Time: <?php if(isset($time)) { echo $time; } ?></div> <div class="face face1"> <div class="circle"></div> </div> <div class="face face2"> <div class="circle"></div> </div> </div> <input type="submit" name="submit" value="submit"> </form> </div> </body> </html>