////////////////////////////////////////////////////  
        //       IoT Tesla Coil and Cooling Fan           //
       //                on Localhost                    //
      //           -------------------------            //
     //              Arduino Nano 33 IoT               //           
    //               by Kutluhan Aktar                // 
   //                                                //
  ////////////////////////////////////////////////////

// Develop a web application in PHP (Tesla Coil Controller) to control a Tesla coil and fan via Arduino Nano 33 IoT. 
// Get information from the Tesla Coil Controller without needing to trigger an event by hand.
//
// For more information:
// https://www.theamplituhedron.com/projects/IoT-Tesla-Coil-and-Cooling-Fan-on-the-Localhost
// 
// You can inspect the mentioned web application in free version on TheAmplituhedron before downloading on your computer if you are a subscriber:
// https://www.theamplituhedron.com/dashboard/Tesla-Coil-Controller
//
// Connections
// Arduino Nano 33 IoT:           
//                                2-Way Relay (5V)
// D2  --------------------------- IN_1
// D3  --------------------------- IN_2
//                                Cooling Fan Control LED (Green)
// D4  --------------------------- 



// Include required libraries:
#include <SPI.h>
#include <WiFiNINA.h>

char ssid[] = "[SSID]";       // your network SSID (name)
char pass[] = "[PASSWORD]";               // your network password (use for WPA, or use as key for WEP)
int keyIndex = 0;                          // your network key Index number (needed only for WEP)

int status = WL_IDLE_STATUS;

char server[] = "192.168.1.20";    // enter the loclhost address

// Define the application (Tesla Coil Controller) terminal path in the localhost.
String terminal = "/Tesla_Coil_Controller/terminal.php";

// Initialize the Ethernet client library
WiFiClient client;

// Define the data holders.
String readString, coil_status, fan_status;

// Define the 2-Way Relay input pins:
#define IN_1 2
#define IN_2 3

// Define the cooling fan control LED:
#define c_LED 4

void setup() {
Serial.begin(9600);

pinMode(IN_1, OUTPUT);
pinMode(IN_2, OUTPUT);
pinMode(c_LED, OUTPUT);

 // check for the WiFi module:
  if (WiFi.status() == WL_NO_MODULE) { Serial.println("Communication with WiFi module failed!"); }
  // attempt to connect to Wifi network:
  while (status != WL_CONNECTED) {
    Serial.print("Attempting to connect to SSID: ");
    Serial.println(ssid);
    // Connect to WPA/WPA2 network. Change this line if using open or WEP network:
    status = WiFi.begin(ssid, pass);
    // wait 10 seconds for connection:
    delay(10000);
     // Verify connection on the serial monitor.
     Serial.println("Connected to WiFi!");
  }

}

void loop() {
 // Connect to the web application named Tesla Coil Controller on the localhost.
 if (client.connect(server, 80)) {
   Serial.println("Connected to the localhost!"); // if you get a connection, report back via serial:
   // Make an HTTP request:
   client.println("GET " + terminal + "?feature=print HTTP/1.1");
   client.println("Host: 192.168.1.20");
   client.println("Connection: close");
   client.println();
   delay(1000);
 }else{
   Serial.print("Conection Failed!"); 
 }

 // Get the response text to obtain the command variables (coil and fan).
 while(client.available()){ char c = client.read(); readString += c; }
 if(readString != ""){
   // Split the reposnse string by a pre-defined delimiter in a simple way. '%'(percentage) is defined as the delimiter in this project.
   int delimiter_1 = readString.indexOf("%");
   int delimiter_2 = readString.indexOf("%", delimiter_1 +1);
   int delimiter_3 = readString.indexOf("%", delimiter_2 +1);
   // Glean information as substrings.
   coil_status = readString.substring(delimiter_1 + 1, delimiter_2);
   fan_status = readString.substring(delimiter_2 + 1, delimiter_3);

   readString = "";
 }

 Serial.println("Coil Status: " + coil_status);
 Serial.println("Fan Status: " + fan_status);

 // Activate the requested commands:
 if(coil_status == "ON"){ digitalWrite(IN_1, HIGH); }else if(coil_status == "OFF"){ digitalWrite(IN_1, LOW); }
 if(fan_status == "ON"){ digitalWrite(IN_2, HIGH); digitalWrite(c_LED, HIGH); }else if(fan_status == "OFF"){ digitalWrite(IN_2, LOW); digitalWrite(c_LED, LOW); }

}

<?php 

class tesla_coil {
	public $conn, $table;
	
	public function database_define($DBServerName, $DBUserName, $DBPassword, $DBName, $table){
		// Define the table name, and connect to the database.
		$this->table = $table;
		$this->conn = mysqli_connect($DBServerName, $DBUserName, $DBPassword, $DBName);
	}
	
	public function save_data($coil, $fan){
		// Save new commmands to the table.
		$sql = "UPDATE `$this->table` SET `coil`='$coil', `fan`='$fan' WHERE id=1";
		if(mysqli_query($this->conn, $sql)){ echo "SAVED!<br>Coil => ".$coil."<br>Fan => ".$fan; }else{ echo 'ERROR!'; }

	}
	
	public function print_data(){
		// Print the current command variables.
		$sql = "SELECT * FROM `$this->table` WHERE id=1";
		$result = mysqli_query($this->conn, $sql);
		while($rows = mysqli_fetch_assoc($result)){
			echo '%'.$rows['coil'].'%'.$rows['fan'].'%';
		}
	}
}

?>

<?php 

// Include the tesla_coil class.
include_once "class.php";
// Define a new tesla_coil object.
$tesla_coil = new tesla_coil();

// Define the database and the table in which you want to save data.
// Enter the server name, the user name, the user password, the database name (teslacoilcontroller), and the table name (values).
// On the localhost, these are the default settings. Change the database name (teslacoilcontroller) and the table name (values) if you created a different database and table.
$tesla_coil->database_define("localhost", "root", "", "teslacoilcontroller", "values");

// Depending on the feature variable, save new commands to the table or print the current command variables.
if(isset($_GET["feature"]) && $_GET["feature"] == "save" && isset($_GET["coil"]) && isset($_GET["fan"])){
	$tesla_coil->save_data($_GET["coil"], $_GET['fan']);
}

if(isset($_GET["feature"]) && $_GET["feature"] == "print"){
	$tesla_coil->print_data();
}


?>

<!DOCTYPE html>
<html>
<head>
 <title>Tesla Coil Controller</title>
 
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="theme-color" content="#ff5c33">
 <meta name="apple-mobile-web-app-status-bar-style" content="#ff5c33">

 <!--link to favicon-->
 <link rel="icon" type="image/png" sizes="36x36" href="icon.png">
 <link rel="icon" type="image/png" sizes="48x48" href="icon.png">
 <link rel="icon" type="image/png" sizes="78x78" href="icon.png">

  <!-- link to font -->
 <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400&display=swap" rel="stylesheet">
 
 <!--link to index.css-->
 <link rel="stylesheet" type="text/css" href="index.css">
 
 <!-- link to FontAwesome-->
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
 
  <!--link to jQuery script-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>
 <body>
<div id="controller">
<h2>Tesla Coil Controller</h2>
<p>Tesla Coil:</p>
<label>Activate <input type="radio" name="coil" value="ON"/> <span></span> </label>
<label>Deactivate <input type="radio" name="coil" value="OFF" checked /> <span></span> </label>
<p>Cooling Fan:</p>
<label>Activate <input type="radio" name="fan" value="ON"/> <span></span> </label>
<label>Deactivate <input type="radio" name="fan" value="OFF" checked /> <span></span> </label>
<p id="text">Waiting...</p>
</div>

<!-- Implement the index.js file -->
<script type="text/javascript" src="index.js"></script>

 </body>
 </html>

html{background-color:#eb2e00;font-family: 'Roboto Slab', serif;}

div{display:block;background-color:#1F2020;width:80%;margin:auto;border:2px solid white;border-radius:20px;padding-left:10px;padding-right:10px;}
h2{color:white;font-size:25px;text-align:center;user-select:none;}
p{color:#A5282C;text-decoration:underline;font-size:20px;}
#text{text-align:center;color:#F3D060;font-size:15px;text-decoration:none;}

label {display:block;position:relative;cursor:pointer;font-size:25px;color:#F3D060;user-select:none;padding-left:35px;margin-left:20px;margin-top:20px;margin-bottom:20px;}
label input{position:absolute;height:0;width:0;}
span {position:absolute;top:1px;left:0;height:30px;width:30px;background-color:#EE7762;}
span:after {content: "\2714";position: absolute;top:-1px;right:5px;display:none;color:#5EB0E5;}
label:hover span {background-color:#A5282C;}
label input:checked ~ span {background-color:#A5282C;}
label input:checked ~ span:after {display: block;}

document.getElementById("controller").addEventListener("input", () => {
	// Define variables.
	let coil, fan;
	// Get selected values.
	document.getElementsByName("coil").forEach((object) => { if(object.checked) coil = object.value; });
	document.getElementsByName("fan").forEach((object) => { if(object.checked) fan = object.value; });
	
	$.ajax({
		// Define the required variables to save commands to the database.
		url: "terminal.php?feature=save&coil=" + coil + "&fan=" + fan,
		type: "GET",
		success: (response) => {
			// Print the response text to see whether it is successful or not.
			$("#text").html("DATA => " + response);
		}
	});
});

-- CREATE A DATABASE TABLE NAMED VALUES --

CREATE TABLE `values`(
   id int(11) AUTO_INCREMENT PRIMARY KEY NOT NULL,
   coil varchar(255) NOT NULL,
   fan varchar(255) NOT NULL
    
);

-- INSERT DEFAULT VARIABLES -- 

INSERT INTO `values`(`coil`, `fan`) VALUES ('OFF', 'OFF');