A je to! / Mbed OS J_HTTP_Client

MBED HTTP client with web pages for server

Dependencies:   DS1820

Fork of J_HTTP_Client by Jan Kamidra

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; } ?>&#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>