MBED HTTP client with web pages for server

Dependencies:   DS1820

Fork of J_HTTP_Client by Jan Kamidra

Files at this revision

API Documentation at this revision

Comitter:
JohnnyK
Date:
Sun May 13 16:31:13 2018 +0000
Child:
1:920482bc63f4
Commit message:
First test

Changed in this revision

DS1820.lib Show annotated file Show diff for this revision Revisions of this file
ForServer/Readme.txt Show annotated file Show diff for this revision Revisions of this file
ForServer/control.php Show annotated file Show diff for this revision Revisions of this file
ForServer/gpio.txt Show annotated file Show diff for this revision Revisions of this file
ForServer/index.php Show annotated file Show diff for this revision Revisions of this file
ForServer/login_page.php Show annotated file Show diff for this revision Revisions of this file
ForServer/nucleoin.php Show annotated file Show diff for this revision Revisions of this file
main.cpp Show annotated file Show diff for this revision Revisions of this file
mbed-os.lib Show annotated file Show diff for this revision Revisions of this file
--- /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; } ?>&#8451;</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