A je to!
MBED HTTP client with web pages for server
Dependencies: DS1820
Fork of
J_HTTP_Client
by 
Jan Kamidra
Embed:
(wiki syntax)
Show/hide line numbers
control.php
00001 <?php 00002 session_start(); 00003 if($_SESSION["uname"] != true) {header("Location: index.php");;exit();} 00004 00005 $server = "sql.someweb.com"; // Here you place your MySQL server address 00006 $user = "johnybravo"; // Here you place your user name of your MySQL 00007 $pass = "bravo"; // Here you place your password of your MySQL 00008 $db = "dtb"; // Here you place your name of your DTB 00009 00010 $mysql = mysql_connect($server, $user, $pass); // Connect to MySQL 00011 mysql_select_db($db); // Select DTB of MySQL 00012 00013 if(!$mysql) 00014 { 00015 die("Unable connect to server!") 00016 } 00017 00018 if(isset( $_POST["submit"])) 00019 { 00020 If(isset($_POST["GPIO1"])){$gpio1 = 1;}else{$gpio1 = 0;} 00021 If(isset($_POST["GPIO2"])){$gpio2 = 1;}else{$gpio2 = 0;} 00022 If(isset($_POST["GPIO3"])){$gpio3 = 1;}else{$gpio3 = 0;} 00023 00024 $myfile = fopen("gpio.txt", "w") or die("Unable to open file!"); 00025 $txt = 'gpio:'.$gpio1.' '.$gpio2.' '.$gpio3.''; 00026 fwrite($myfile, $txt); 00027 fclose($myfile); 00028 } 00029 00030 $doSql = mysql_query('SELECT * FROM nucleo_data WHERE id=1'); 00031 $row = mysql_fetch_array($doSql); 00032 $temp = $row['temp']; 00033 $time = $row['time']; 00034 $date = $row['date']; 00035 00036 if(!file_exists("gpio.txt")) 00037 { 00038 $myfile = fopen("gpio.txt", "w"); 00039 $txt = 'gpio: 0 0 0'; 00040 fwrite($myfile, $txt); 00041 fclose($myfile); 00042 } 00043 $myfile = fopen("gpio.txt", "r"); 00044 $gpio = fread($myfile,filesize("gpio.txt")); 00045 fclose($myfile); 00046 ?> 00047 <!DOCTYPE html> 00048 <html> 00049 <head> 00050 <meta charset= "utf-8"> 00051 <title>Input/Output</title> 00052 <style> 00053 body 00054 { 00055 margin: 0; 00056 padding: 0; 00057 font-family: sans-serif; 00058 /*background: white url("nucleo.jpg") no-repeat fixed center;*/ 00059 } 00060 .box 00061 { 00062 position: absolute; 00063 top: 50%; 00064 left: 50%; 00065 transform: translate(-50%,-50%); 00066 width: 500px; 00067 padding: 40px; 00068 background: rgba(0,0,0,.8); 00069 box-sizing:border-box; 00070 box-shadow: 0 15px 25px rgba(0,0,0,.5); 00071 border-radius: 10px; 00072 } 00073 .box h2 00074 { 00075 margin: 0 50px 30px; 00076 padding: 0; 00077 color: #fff; 00078 text-align: center; 00079 } 00080 00081 00082 .box input[type="submit"] 00083 { 00084 background: transparent; 00085 border: none; 00086 outline: none; 00087 color: #fff; 00088 background: #03a9f4; 00089 padding: 10px 30px; 00090 cursor: pointer; 00091 border-radius: 5px; 00092 } 00093 .box input[type="submit"]:hover 00094 { 00095 cursor: pointer; 00096 background: #92b6d5; 00097 color: #fff; 00098 } 00099 00100 .box input[type=checkbox] 00101 { 00102 display: none; 00103 } 00104 00105 .box label[id="other"] 00106 { 00107 position: relative; 00108 padding: 0 10px; 00109 font-size:16px; 00110 color: #fff; 00111 vertical-align: middle; 00112 bottom: 10px; 00113 } 00114 00115 .box input[type="checkbox"] + label[id="check"] 00116 { 00117 margin: 12px 0 0 0; 00118 display: inline-block; 00119 width: 60px; 00120 height: 30px; 00121 appearance: none; 00122 background: #c6c6c6; 00123 outline: 0; 00124 border-radius: 20px; 00125 box-shadow: inset 0 0 5px; 00126 transition: .5; 00127 position: relative; 00128 } 00129 .box input:checked[type="checkbox"] + label[id="check"] 00130 { 00131 background: #03a9f4 00132 } 00133 .box input[type="checkbox"] + label[id="check"]:before 00134 { 00135 content: ''; 00136 position: absolute; 00137 width: 30px; 00138 height: 30px; 00139 border-radius:20px; 00140 top: 0; 00141 left: 0; 00142 background-color: white; 00143 transform: scale(0.9); 00144 box-shadow: 0 2px 5px rgba(0,0,0,.2); 00145 transition: .5s; 00146 } 00147 .box input:checked[type="checkbox"]+ label[id="check"]:before 00148 { 00149 left: 30px; 00150 } 00151 .box .loader 00152 { 00153 position: absolute; 00154 top: 57%; 00155 left: 68%; 00156 transform: translate(-50%, -50%); 00157 width: 200px; 00158 height: 200px; 00159 box-sizing: border-box; 00160 } 00161 .box .loader .face 00162 { 00163 position: absolute; 00164 border: 2px solid #121212; 00165 } 00166 .box .loader .face.face1 00167 { 00168 top: 0; 00169 left: 0; 00170 right: 0; 00171 bottom: 0; 00172 background: transparent; 00173 box-shadow: 0 0 10px rgba(0,0,0,1); 00174 border-radius:50%; 00175 border-left: 2px solid #ffff00; 00176 border-top: 2px solid #ffff00; 00177 animation: animate 10s linear infinite; 00178 } 00179 .box .loader .face.face2 00180 { 00181 top: 20px; 00182 left: 20px; 00183 right: 20px; 00184 bottom: 20px; 00185 background: transparent; 00186 box-shadow: 0 0 10px rgba(0,0,0,1); 00187 border-radius:50%; 00188 border-right: 2px solid #03a9f4; 00189 border-bottom: 2px solid #03a9f4; 00190 animation: animate 30s linear reverse infinite; 00191 } 00192 .box .loader .face .circle 00193 { 00194 position: absolute; 00195 top: calc(50% - 1px); 00196 left: 50%; 00197 width: 50%; 00198 height: 2px; 00199 transform-origin: left; 00200 } 00201 .box .loader .face.face1 .circle 00202 { 00203 transform: rotate(-45deg); 00204 } 00205 .box .loader .face.face2 .circle 00206 { 00207 transform: rotate(-45deg); 00208 } 00209 .box .loader .face .circle:before 00210 { 00211 content: ''; 00212 position: absolute; 00213 width: 10px; 00214 height: 10px; 00215 border-radius: 50%; 00216 background: #fff; 00217 top: -4px; 00218 right: -6px; 00219 } 00220 .box .loader .face.face1 .circle:before 00221 { 00222 background: #ffff00; 00223 box-shadow: 0 0 20px #ff0, 00224 0 0 40px #ff0, 00225 0 0 60px #ff0, 00226 0 0 80px #ff0, 00227 0 0 100px #ff0, 00228 0 0 0 5px rgba(255,255,0,.1); 00229 } 00230 .box .loader .face.face2 .circle:before 00231 { 00232 background: #03a9f4; 00233 box-shadow: 0 0 20px #03a9f4, 00234 0 0 40px #03a9f4, 00235 0 0 60px #03a9f4, 00236 0 0 80px #03a9f4, 00237 0 0 100px #03a9f4, 00238 0 0 0 5px rgba(3,169,244,.1); 00239 } 00240 @keyframes animateCircle 00241 { 00242 0% 00243 { 00244 transform: rotate(0deg); 00245 } 00246 100% 00247 { 00248 transform: rotate(360deg); 00249 } 00250 } 00251 @keyframes animate 00252 { 00253 0% 00254 { 00255 transform: rotate(45deg); 00256 } 00257 100% 00258 { 00259 transform: rotate(405deg); 00260 } 00261 } 00262 .loader .text 00263 { 00264 color: #fff; 00265 top: 35%; 00266 position: relative; 00267 text-align: center; 00268 font-size: 16px; 00269 } 00270 </style> 00271 </head> 00272 <body> 00273 <div class="box"> 00274 <h2>Control panel</h2> 00275 <form method="POST" action="#"> 00276 <div> 00277 <input type="checkbox" name="GPIO1" id="checkbox_1" value="" <?php echo ($gpio[5]==1 ? 'checked' : '');?>><label id="check" for ="checkbox_1"></label> 00278 <label id="other" for ="checkbox_1">LED1</label> 00279 </br> 00280 <input type="checkbox" name="GPIO2" id="checkbox_2" value="1" <?php echo ($gpio[7]==1 ? 'checked' : '');?>><label id="check" for ="checkbox_2"></label> 00281 <label id="other" for ="checkbox_1">LED2</label> 00282 </br> 00283 <input type="checkbox" name="GPIO3" id="checkbox_3" value="1" <?php echo ($gpio[9]==1 ? 'checked' : '');?>><label id="check" for ="checkbox_3"></label> 00284 <label id="other" for ="checkbox_1">LED3</label> 00285 </div> 00286 </br> 00287 <div class="loader"> 00288 <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> 00289 <div class="face face1"> 00290 <div class="circle"></div> 00291 </div> 00292 <div class="face face2"> 00293 <div class="circle"></div> 00294 </div> 00295 </div> 00296 <input type="submit" name="submit" value="submit"> 00297 </form> 00298 </div> 00299 </body> 00300 </html>
Generated on Wed Jul 13 2022 23:00:51 by
1.7.2