MBED HTTP client with web pages for server
Dependencies: DS1820
Fork of J_HTTP_Client by
Revision 0:d90e1f7bda1f, committed 2018-05-13
- Comitter:
- JohnnyK
- Date:
- Sun May 13 16:31:13 2018 +0000
- Child:
- 1:920482bc63f4
- Commit message:
- First test
Changed in this revision
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/DS1820.lib Sun May 13 16:31:13 2018 +0000 @@ -0,0 +1,1 @@ +http://developer.mbed.org/users/hudakz/code/DS1820/#b593a82ce790
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/ForServer/Readme.txt Sun May 13 16:31:13 2018 +0000 @@ -0,0 +1,14 @@ +You need all these files copy into a server with PHP 5.6 and MySQL support. +gpio.txt is not necessary to copy cuz php script will create automatically when file not found. +In MySQL create DTB with tables: + - Table 'users' with fields 'u_name', 'u_password' and some 'id' + - Table 'nucleo_data' with fields 'id', 'time', 'date' and 'temp' + +Control.php only rewrite one row in database now but MySQL tables and SQL commands in PHP scripts can be simply change for tamperature log. +Login_page.php not have register and forgot password functions. Working only with users writed in MySQL table 'users'. + +*I do not know why, but when i open control.php in online compiler and scroll down to CSS style, page will freze so maybe export will be better solution than open it here. + +This was my first HTML, PHP and CSS work so thank to: + - Online Tutorials chanel from youtube (most of CSS efect was from here) https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog. + - www.w3schools.com most of PHP was from here \ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/ForServer/control.php Sun May 13 16:31:13 2018 +0000
@@ -0,0 +1,300 @@
+<?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>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/ForServer/gpio.txt Sun May 13 16:31:13 2018 +0000 @@ -0,0 +1,1 @@ +gpio:0 0 0 \ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/ForServer/index.php Sun May 13 16:31:13 2018 +0000
@@ -0,0 +1,3 @@
+<?php
+ header('Location: login_page.php');
+?>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/ForServer/login_page.php Sun May 13 16:31:13 2018 +0000
@@ -0,0 +1,135 @@
+<?php
+ session_start();
+
+ $server = "sql2.webzdarma.cz";
+ $user = "johnkwzcz9067";
+ $pass = "Nucleo144";
+ $db = "johnkwzcz9067";
+
+
+ $mysql = mysql_connect($server, $user, $pass); //Join to MySQL
+ mysql_select_db($db);
+
+ if(isset( $_POST["submit"]))
+ {
+ $uname = $_POST["username"];
+ $upass = $_POST["password"];
+ $u_name = mysql_fetch_array(mysql_query('SELECT u_name FROM users WHERE u_name="'.$uname.'" AND u_password="'.$upass.'" '));
+ $u_pass = mysql_fetch_array(mysql_query('SELECT u_password FROM users WHERE u_name="'.$uname.'" AND u_password="'.$upass.'" '));
+
+ if($uname != $u_name['u_name'] and $upass != $u_pass['u_password'])
+ {
+ $messge = "Invalid Login!";
+ }
+ else
+ {
+ $_SESSION["uname"] = $uname;
+ header('Location: control.php');
+ }
+ }
+?>
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset= "utf-8">
+ <title>Login</title>
+ <style>
+ body
+ {
+ margin: 0;
+ padding: 0;
+ font-family: sans-serif;
+ /*background: url(bg.jpg);*/
+ background-size: cover;
+ }
+ .box
+ {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%,-50%);
+ width: 400px;
+ 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 0 30px;
+ padding: 0;
+ color: #fff;
+ text-align: center;
+ }
+ .box .mess h3
+ {
+ margin: 0 0 20px;
+ padding: 0;
+ color: #03a9f4;
+ text-align: center;
+ }
+ .box inputBox
+ {
+ position: relative;
+ }
+ .box .inputBox input
+ {
+ width: 100%;
+ padding: 10px 0;
+ font-size: 16px;
+ color: #fff;
+ letter-spacing: 1px;
+ margin-bottom: 30px;
+ border: none;
+ border-bottom: 1px solid #fff;
+ outline: none;
+ background: transparent;
+ }
+ .box .inputBox label
+ {
+ padding: 10px 0;
+ font-size:16px;
+ color: #fff;
+ pointer-events: none;
+ }
+
+ .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;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="box">
+ <h2>Login</h2>
+ <form method="POST" action="#">
+ <div class= "mess">
+ <h3><?php if(isset($messge)) { echo $messge; } ?></h3>
+ </div>
+ <div class= "inputBox">
+ <label for="username">Username</label>
+ <input type="text" name="username" placeholder="Enter your User name" required="">
+ </div>
+ <div class= "inputBox">
+ <label for="password">Password</label>
+ <input type="password" name="password" placeholder="Enter your Password" required="">
+ </div>
+ <input type="submit" name="submit" value="submit">
+ </form>
+ </div>
+ </body>
+</html>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/ForServer/nucleoin.php Sun May 13 16:31:13 2018 +0000
@@ -0,0 +1,41 @@
+<?php
+ $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!");
+ }
+
+ $doSql = mysql_query('SELECT * FROM nucleo_data WHERE id=1');
+
+ if(mysql_num_rows($doSql) == 0){
+ mysql_query('INSERT INTO nucleo_data (id, time, date, temp) VALUES (1, '.date("H:i:s",time()).', '.date("Y-m-d",time()).', 0)');
+ }
+
+ if($mysql and isset($_GET['temp'])){
+ $temp = sanitize($_GET['temp']);
+
+ $sqll = 'UPDATE nucleo_data SET temp="'.$temp.'", time="'.date("H:i:s",time()).'", date="'.date("Y-m-d",time()).'" WHERE id=1';
+ $doSqll = mysql_query($sqll);
+
+ if($doSqll){
+ echo 'Zapis byl uspesny';
+ }
+ else{
+ die('Invalid query: ' . mysql_error());
+ }
+ }
+ function sanitize($input){
+ $input = htmlspecialchars($input);
+ $input = htmlentities($input);
+ $input = strip_tags($input);
+ $input = trim($input);
+ return $input;
+ }
+?>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/main.cpp Sun May 13 16:31:13 2018 +0000
@@ -0,0 +1,168 @@
+/*
+This fun example was comleted by JohnnyK / odiin@seznam.cz 5/2018
+I am an amateur so this program and web pages are not perfect but working.
+In folder ForServer you can found .php files what you can use for control 3 GPIO (on/off) pins and show temperature on the page. For more follow Readme.txt
+THX Mbed team and Mbed community and all other who want to help other people be a maker :)
+
+I know Mbed web server is better/faster for gpio control but in my country it is not possible to take advantage of ipv6 without extra cost. Our standart is mixed ipv4/ipv6 but with dynamic and not public IP address.
+*/
+#include "mbed.h"
+#include "DS1820.h"
+#include "EthernetInterface.h"
+
+#define SERVER "server.someweb.com" // Here you must place your web server address
+#define PORT 80
+#define HOST "yourweb.com" // Here you must place your web domain
+#define GPIOPAGE "gpio.txt" // Name of TXT file for GPIO setting
+#define TEMPPAGE "nucleoin.php" // Name of web page for temperature add/update
+
+DigitalOut gpio[3] = {D8, LED2, LED3};
+DigitalOut myled1(LED1);
+InterruptIn button(USER_BUTTON);
+Serial pc(SERIAL_TX, SERIAL_RX);
+EthernetInterface net;
+DS1820 ds1820(A0);
+TCPSocket socket;
+Timer timer;
+Ticker ticker;
+
+float temperature;
+int gpioSet[3];
+int i;
+
+void liveLed();
+void justDoIt();
+void connectionStop();
+void softReset();
+
+int main() {
+
+ pc.printf("Client running...\n");
+ // Attach the address of the interrupt handler routine for pushbutton
+ button.rise(&softReset);
+ // Live led
+ ticker.attach(&liveLed, 0.5);
+ // Bring up the ethernet interface
+ net.connect();
+ // Show the network address
+ const char *ip = net.get_ip_address();
+ // Check ip
+ if(ip){
+ pc.printf("IP address is: %s\n", ip);
+ }else{
+ pc.printf("No IP");
+ // Reset when no IP was detected
+ softReset();
+ }
+ // Begin DS1820
+ if(ds1820.begin()) {
+ // Start temperature conversion
+ ds1820.startConversion();
+ // Ĺet DS1820 complete the temperature conversion
+ wait(0.5);
+ } else {
+ pc.printf("No DS1820 sensor found!\r\n");
+ // Reset when no sencor was detected
+ softReset();
+ }
+
+ timer.start();
+
+ while(1){
+ wait(0.5);
+ if(timer > 10){
+ pc.printf("Counter: %d\n", i++);
+ // Read temperature
+ temperature = ds1820.read();
+ pc.printf("Temperature = %3.1f\r\n", temperature);
+ // Start temperature conversion
+ ds1820.startConversion();
+ // Call function for temeperature send and request for gpio setting
+ justDoIt();
+ // Set gpio state for all gpio ports in array
+ for(int i = 0; i < 3; i++){
+ if (gpio[i].read()!= gpioSet[i]){
+ // Set gpio from latest recieved meassege
+ gpio[i] = gpioSet[i];
+ }
+ }
+ // Reset Timer
+ timer.reset();
+ }
+ }
+}
+
+void justDoIt() {
+ char sbuffer[100];
+ char rbuffer[250];
+ char *buffer;
+ int scount;
+ int rcount;
+ //*************************First request*************************
+ // Open a socket on the network interface
+ socket.open(&net);
+ // Create a TCP connection to server and check of success
+ if (socket.connect(SERVER, PORT) < 0) {
+ pc.printf("Failed to connect with server\n\r");
+ connectionStop();
+ }
+ // Fill command string into buffer
+ sprintf(sbuffer,"GET /%s HTTP/1.1\r\nHost: %s\r\nConnection: close\r\n\r\n", GPIOPAGE, HOST);
+ // Send http request
+ scount = socket.send(sbuffer, sizeof sbuffer);
+ // Print shorter string of sended messeage
+ pc.printf("sent %d [%.*s]\n", scount, strstr(sbuffer, "\r\n")-sbuffer, sbuffer);
+ // Recieve simple http response
+ rcount = socket.recv(rbuffer, sizeof rbuffer);
+ // Print out the response
+ pc.printf("recv %d [%.*s]\n", rcount, strstr(rbuffer, "\r\n")-rbuffer, rbuffer);
+ // Ignore data from server and take only values after "gpio:" like 1 0 1
+ buffer = strstr(rbuffer, "gpio:")+ 5;
+ // Extract into int buffer
+ sscanf(buffer,"%d %d %d", &gpioSet[0], &gpioSet[1], &gpioSet[2]);
+ // Close the socket to return its memory
+ socket.close();
+ wait(1);
+ //*************************Second request*************************
+ // Open a socket on the network interface
+ socket.open(&net);
+ // Create a TCP connection to server and check of success
+ if (socket.connect(SERVER, PORT) < 0) {
+ pc.printf("Failed to connect with server\n\r");
+ connectionStop();
+ }
+ // Fill command string into buffer
+ sprintf(sbuffer,"GET /%s/?temp=%3.1f HTTP/1.1\r\nHost: %s\r\nConnection: close\r\n\r\n", TEMPPAGE, temperature, HOST );
+ // Send http request
+ scount = socket.send(sbuffer, sizeof sbuffer);
+ pc.printf("sent %d [%.*s]\n", scount, strstr(sbuffer, "\r\n")-sbuffer, sbuffer);
+ // Recieve http response
+ rcount = socket.recv(rbuffer, sizeof rbuffer);
+ // Print out the response line
+ pc.printf("recv %d [%.*s]\n", rcount, strstr(rbuffer, "\r\n")-rbuffer, rbuffer);
+ // Close the socket to return its memory
+ socket.close();
+}
+
+void connectionStop(){
+ // Timer stop
+ timer.stop();
+ // Close the socket to return its memory
+ socket.close();
+ // Bring down the network interface
+ net.disconnect();
+ // Mbed reset
+ softReset();
+}
+
+void softReset(){
+ // Wait
+ wait(2);
+ // Mbed reset
+ NVIC_SystemReset();
+}
+
+void liveLed(){
+ // Change state of Led one
+ myled1 =! myled1;
+}
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/mbed-os.lib Sun May 13 16:31:13 2018 +0000 @@ -0,0 +1,1 @@ +https://github.com/ARMmbed/mbed-os/#ae6c7c60f91c89cbf755a2f3c8ec9c66635849fd
