Wifi_control_bot/index_3.html at main · tvilight4/Wifi_control_bot · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
        <!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Wall-E motion page</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
				outline: none;
			}
			button {
				border: none;
				background: transparent;
			}
			body {
				width: 100%;
				height: 100vh;

				background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj48ZGVmcz48cGF0dGVybiBpZD0icGF0dGVybiIgd2lkdGg9IjQ2LjE5IiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMzQuNjQxMDE2MTUxMzc3NTUsMzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSgxMzUpICI+PHJlY3QgaWQ9InBhdHRlcm4tYmFja2dyb3VuZCIgd2lkdGg9IjQwMCUiIGhlaWdodD0iNDAwJSIgZmlsbD0icmdiYSgyNiwgMzIsIDQ0LDEpIj48L3JlY3Q+IDxwYXRoIGZpbGw9InJnYmEoNDUsIDU1LCA3MiwxKSIgZD0iTS0yMCAtMjAgaDIwMCB2MjAwIGgtMjAwIE0zMy43NyAyNS41TDI1Ljk4IDIxTDE4LjE5IDI1LjVMMTguMTkgMzQuNUwyNS45OCAzOUwzMy43NyAzNC41ek0xNi40NSAyNS41TDguNjYgMjFMMC44NyAyNS41TDAuODcgMzQuNUw4LjY2IDM5TDE2LjQ1IDM0LjV6TTcuNzkgMTAuNUwwIDZMLTcuNzkgMTAuNUwtNy43OSAxOS41TDAgMjRMNy43OSAxOS41ek0xNi40NSAtNC41TDguNjYgLTlMMC44NyAtNC41TDAuODcgNC41TDguNjYgOUwxNi40NSA0LjV6TTMzLjc3IC00LjVMMjUuOTggLTlMMTguMTkgLTQuNUwxOC4xOSA0LjVMMjUuOTggOUwzMy43NyA0LjV6TTQyLjQzIDEwLjVMMzQuNjQgNkwyNi44NSAxMC41TDI2Ljg1IDE5LjVMMzQuNjQgMjRMNDIuNDMgMTkuNXpNMjUuMTEgMTAuNUwxNy4zMiA2TDkuNTMgMTAuNUw5LjUzIDE5LjVMMTcuMzIgMjRMMjUuMTEgMTkuNXoiPjwvcGF0aD48cGF0aCBmaWxsPSJyZ2JhKDE5MCwgMjI3LCAyNDgsMSkiIGQ9Ik0tMjAgLTIwIGgyMDAgdjIwMCBoLTIwMCBNMjQuMjEgMjUuMjVMMTUuOTggMjAuNUw3Ljc1IDI1LjI1TDcuNzUgMzQuNzVMMTUuOTggMzkuNUwyNC4yMSAzNC43NXpNNi44OSAyNS4yNUwtMS4zNCAyMC41TC05LjU3IDI1LjI1TC05LjU3IDM0Ljc1TC0xLjM0IDM5LjVMNi44OSAzNC43NXpNLTEuNzcgMTAuMjVMLTEwIDUuNUwtMTguMjMgMTAuMjVMLTE4LjIzIDE5Ljc1TC0xMCAyNC41TC0xLjc3IDE5Ljc1ek02Ljg5IC00Ljc1TC0xLjM0IC05LjVMLTkuNTcgLTQuNzVMLTkuNTcgNC43NUwtMS4zNCA5LjVMNi44OSA0Ljc1ek0yNC4yMSAtNC43NUwxNS45OCAtOS41TDcuNzUgLTQuNzVMNy43NSA0Ljc1TDE1Ljk4IDkuNUwyNC4yMSA0Ljc1ek0zMi44NyAxMC4yNUwyNC42NCA1LjVMMTYuNDEgMTAuMjVMMTYuNDEgMTkuNzVMMjQuNjQgMjQuNUwzMi44NyAxOS43NXpNNDEuNTMgMjUuMjVMMzMuMyAyMC41TDI1LjA3IDI1LjI1TDI1LjA3IDM0Ljc1TDMzLjMgMzkuNUw0MS41MyAzNC43NXpNMTUuNTUgNDAuMjVMNy4zMiAzNS41TC0wLjkxIDQwLjI1TC0wLjkxIDQ5Ljc1TDcuMzIgNTQuNUwxNS41NSA0OS43NXpNLTEwLjQzIDI1LjI1TC0xOC42NiAyMC41TC0yNi44OSAyNS4yNUwtMjYuODkgMzQuNzVMLTE4LjY2IDM5LjVMLTEwLjQzIDM0Ljc1ek0tMTAuNDMgLTQuNzVMLTE4LjY2IC05LjVMLTI2Ljg5IC00Ljc1TC0yNi44OSA0Ljc1TC0xOC42NiA5LjVMLTEwLjQzIDQuNzV6TTE1LjU1IC0xOS43NUw3LjMyIC0yNC41TC0wLjkxIC0xOS43NUwtMC45MSAtMTAuMjVMNy4zMiAtNS41TDE1LjU1IC0xMC4yNXpNNDEuNTMgLTQuNzVMMzMuMyAtOS41TDI1LjA3IC00Ljc1TDI1LjA3IDQuNzVMMzMuMyA5LjVMNDEuNTMgNC43NXpNMzIuODcgNDAuMjVMMjQuNjQgMzUuNUwxNi40MSA0MC4yNUwxNi40MSA0OS43NUwyNC42NCA1NC41TDMyLjg3IDQ5Ljc1ek0tMS43NyA0MC4yNUwtMTAgMzUuNUwtMTguMjMgNDAuMjVMLTE4LjIzIDQ5Ljc1TC0xMCA1NC41TC0xLjc3IDQ5Ljc1ek0tMTkuMDkgMTAuMjVMLTI3LjMyIDUuNUwtMzUuNTUgMTAuMjVMLTM1LjU1IDE5Ljc1TC0yNy4zMiAyNC41TC0xOS4wOSAxOS43NXpNLTEuNzcgLTE5Ljc1TC0xMCAtMjQuNUwtMTguMjMgLTE5Ljc1TC0xOC4yMyAtMTAuMjVMLTEwIC01LjVMLTEuNzcgLTEwLjI1ek0zMi44NyAtMTkuNzVMMjQuNjQgLTI0LjVMMTYuNDEgLTE5Ljc1TDE2LjQxIC0xMC4yNUwyNC42NCAtNS41TDMyLjg3IC0xMC4yNXpNNTAuMTkgMTAuMjVMNDEuOTYgNS41TDMzLjczIDEwLjI1TDMzLjczIDE5Ljc1TDQxLjk2IDI0LjVMNTAuMTkgMTkuNzV6TTE1LjU1IDEwLjI1TDcuMzIgNS41TC0wLjkxIDEwLjI1TC0wLjkxIDE5Ljc1TDcuMzIgMjQuNUwxNS41NSAxOS43NXoiPjwvcGF0aD48L3BhdHRlcm4+ICA8L2RlZnM+IDxyZWN0IGZpbGw9InVybCgjcGF0dGVybikiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiPjwvcmVjdD48L3N2Zz4=");
				display: flex;
				justify-content: center;
				align-items: center;
			}
			main {
				background-color: rgba(0, 150 , 136 , 0.7);
				/* backdrop-filter: blur(2px); */
				color: purple;
				min-width: 35%;
				padding: 2em;
				height: 90vh;
				border-radius: 10px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;

				font-weight: 100;


			}
			   #one{
				width: 100px;
				height: 50px;
				color: aqua;
				background-color: purple;
				cursor: pointer;
			    }
			   #two{
				width: 100px;
				height: 50px;
				color: aqua;
				background-color: purple;

				cursor: pointer;
			   }
			   #three{
				width: 100px;
				height: 50px;
				background-color: purple;
				color: aqua;
				cursor: pointer;
			   }
			   #four{
				width: 100px;
				height: 50px;
				color: aqua;
				background-color: purple;
                cursor: pointer;
			   }


		</style>
	</head>
	<body>
		<main>
			<h1>Motion of Wall-E</h1>
			<div class="button-group">
			<input type="button" value="FRONT" id="one"/>
			</div>
			<div class="button-group">
			<input type="button" value="BACKWARDS" id="two"/>
            </div>
			<div class="button-group">
			<input type="button" value="LEFT" id="three"/>
            </div>
			<div class="button-group">
			<input type="button" value="RIGHT" id="four"/>
            </div>
		</main>

		</main>
		<script>
			let inpArray = document.querySelectorAll("input[type='button']");
			function submitVals() {
				const data = {};
				data["one"] = parseInt(document.getElementById("one").value);
				data["two"] = parseInt(document.getElementById("two").value);
				data["three"] = parseInt(document.getElementById("three").value);
				data["four"] = parseInt(document.getElementById("four").value);

				let finaldata = JSON.stringify(data);
				console.log(finaldata);

				let xhr = new XMLHttpRequest();

				// Vedant!
				let url = "/api/v1/pid";

				// open a connection
				xhr.open("POST", url, true);

				// Set the request header i.e. which type of content you are sending
				xhr.setRequestHeader("Content-Type", "application/json");
				// Create a state change callback
				xhr.onreadystatechange = function () {
					if (xhr.readyState === 4) {
						if (xhr.status == 400) {
							console.log("Success!");
						} else {
							console.log(xhr.status);
						}
						// Print received data from server
					}
				};

				// Sending data with the request
				xhr.send(finaldata);
			}


		</script>
	</body>
</html>