Arduino - Web Pattern Unlock

It's a security feature for Arduino. User is required to input the unlock pattern before remotely controlling/monitoring Arduino.

Jun 4, 2018

•

22603 views

•

44 respects

security

remote control

web control

Components and supplies

Arduino UNO

Servo Motor SG90 180 degree

PHPoC WiFi Shield for Arduino

Jumper Wires

USB Cable 2.0 Type A/B for Arduino Uno

Servo Motor SG92R

Project description

Code

unlock.php

php

This is Web user interface

1<!DOCTYPE html>
2<html>
3<head>
4<title>Arduino - PHPoC Shield</title>
5<meta  name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
6<meta  charset="utf-8">
7<style>
8body { text-align: center; font-size: width/2pt;  }
9h1 { font-weight: bold; font-size: width/2pt; }
10h2 { font-weight: bold;  font-size: width/2pt; }
11button { font-weight: bold; font-size: width/2pt; }
12</style>
13<script>
14
15var  CMD_AUTH = 0;
16var CMD_CTRL = 1;
17var ws;
18var authorized = false;
19
20/*  unlock variable */
21var unlock_width = 400, unlock_height = 400;
22var unlock_inner_radius  = 14;
23var unlock_middle_radius = 22;
24var unlock_outer_radius  = 34;
25var  unlock_gap = 140;
26var unlock_touch_state = 0;
27var unlock_touch_x = 0, unlock_touch_y  = 0;
28var unlock_touch_list = new Array();
29var unlock_ratio = 1;
30
31/*  control variable: change as you want, as your application */
32var servo_width  = 401, servo_height = 466;
33var servo_pivot_x = 200, servo_pivot_y = 200;
34var  servo_bracket_radius = 160, servo_bracket_angle = 0;
35var servo_bracket_img =  new Image();
36var servo_click_state = 0;
37var servo_last_angle = 0;
38var servo_mouse_xyra  = {x:0, y:0, r:0.0, a:0.0};
39
40servo_bracket_img.src = "servo_bracket.png";
41
42function  init()
43{
44	/* init unlock part */
45	
46	var unlock = document.getElementById("unlock");
47	unlock.width  = unlock_width;
48	unlock.height = unlock_height;
49 
50	unlock.addEventListener("touchstart",  unlock_mouse_down);
51	unlock.addEventListener("touchend", unlock_mouse_up);
52	unlock.addEventListener("touchmove",  unlock_mouse_move);
53	unlock.addEventListener("mousedown", unlock_mouse_down);
54	unlock.addEventListener("mouseup",  unlock_mouse_up);
55	unlock.addEventListener("mousemove", unlock_mouse_move);
56	
57	var  ctx = unlock.getContext("2d");
58	ctx.translate(unlock_width/2, unlock_height/2);
59	ctx.shadowBlur  = 20;
60	ctx.shadowColor = "LightGray";
61	ctx.lineCap="round";
62	ctx.lineJoin="round";
63	
64	/*  init control part */
65	var servo = document.getElementById("servo");
66
67	servo.width  = servo_width;
68	servo.height = servo_height;
69	servo.style.backgroundImage  = "url('/servo_body.png')";
70
71	servo.addEventListener("touchstart", servo_mouse_down);
72	servo.addEventListener("touchend",  servo_mouse_up);
73	servo.addEventListener("touchmove", servo_mouse_move);
74	servo.addEventListener("mousedown",  servo_mouse_down);
75	servo.addEventListener("mouseup", servo_mouse_up);
76	servo.addEventListener("mousemove",  servo_mouse_move);
77
78	ctx = servo.getContext("2d");
79	ctx.translate(servo_pivot_x,  servo_pivot_y);
80	
81	update_view();
82}
83function connect_onclick()
84{
85	if(ws  == null)
86	{
87		var ws_host_addr = "<?echo _SERVER("HTTP_HOST")?>";
88		if((navigator.platform.indexOf("Win")  != -1) && (ws_host_addr.charAt(0) == "["))
89		{
90			// network resource  identifier to UNC path name conversion
91			ws_host_addr = ws_host_addr.replace(/[\\[\\]]/g,  '');
92			ws_host_addr = ws_host_addr.replace(/:/g, "-");
93			ws_host_addr  += ".ipv6-literal.net";
94		}
95		
96		ws = new WebSocket("ws://" +  ws_host_addr + "/web_pattern", "text.phpoc");
97		document.getElementById("ws_state").innerHTML  = "CONNECTING";
98		ws.onopen = ws_onopen;
99		ws.onclose = ws_onclose;
100		ws.onmessage  = ws_onmessage;
101	}
102	else
103		ws.close();
104}
105function ws_onopen()
106{
107	document.getElementById("ws_state").innerHTML  = "<font color='blue'>CONNECTED</font>";
108	document.getElementById("bt_connect").innerHTML  = "Disconnect";
109	update_view();
110}
111function ws_onclose()
112{
113	document.getElementById("ws_state").innerHTML  = "<font color='gray'>CLOSED</font>";
114	document.getElementById("bt_connect").innerHTML  = "Connect";
115	ws.onopen = null;
116	ws.onclose = null;
117	ws.onmessage  = null;
118	ws = null;
119	authorized = false;
120	update_view();
121}
122function  ws_onmessage(e_msg)
123{
124	e_msg = e_msg || window.event; // MessageEvent
125	
126	var  resp = parseInt(e_msg.data);
127	
128	if(resp == 202)
129		authorized = true;
130	else  if(resp == 401)
131		authorized = false;
132	else
133		console.log("unknown:"  + resp);
134	
135	update_view();
136}
137function update_view()
138{
139	if(!authorized)
140		unlock_update_view();
141	else
142		servo_update_view();
143}
144
145function  unlock_update_view()
146{
147	document.body.style.backgroundColor = "black";
148	document.body.style.color  = "white";
149	
150	var unlock_area = document.getElementById('unlock_area');
151	var  control_area = document.getElementById('control_area');
152	
153	unlock_area.style.display  = 'block';
154	control_area.style.display = 'none';
155	
156	var unlock = document.getElementById("unlock");
157	var  ctx = unlock.getContext("2d");
158	
159	ctx.clearRect(-unlock_width/2, -unlock_height/2,  unlock_width, unlock_height);
160	
161	// draw touched point and line
162	ctx.lineWidth  = 10;
163	ctx.strokeStyle="white";
164	ctx.globalAlpha=1;
165	ctx.beginPath();
166	for  (var i = 0; i < unlock_touch_list.length; i++) 
167	{
168		var temp = unlock_touch_list[i]  - 1;
169		var x =  temp % 3 - 1;
170		var y = Math.floor(temp / 3) - 1;
171		
172		ctx.lineTo(x*unlock_gap,  y*unlock_gap);
173	}
174	
175	if(unlock_touch_state)
176		ctx.lineTo(unlock_touch_x,  unlock_touch_y);
177	
178	ctx.stroke();
179	
180	for (var i = 0; i < unlock_touch_list.length;  i++) 
181	{
182		var temp = unlock_touch_list[i] - 1;
183		var x =  temp %  3 - 1;
184		var y = Math.floor(temp / 3) - 1;
185		
186		ctx.globalAlpha=0.2;
187		ctx.fillStyle  = "white";
188		ctx.beginPath();
189		ctx.arc(x*unlock_gap, y*unlock_gap,  unlock_outer_radius, 0, 2 * Math.PI);
190		ctx.fill();
191	}
192	
193	// draw  base
194	for(var y = -1; y <= 1; y++)
195	{
196		for(var x = -1; x <= 1; x++)
197		{
198			ctx.globalAlpha=0.5;
199			ctx.fillStyle  = "white";
200			ctx.beginPath();
201			ctx.arc(x*unlock_gap, y*unlock_gap,  unlock_middle_radius, 0, 2 * Math.PI);
202			ctx.fill();
203			
204			ctx.globalAlpha=1;
205			ctx.fillStyle  = "Cyan";
206			ctx.beginPath();
207			ctx.arc(x*unlock_gap, y*unlock_gap,  unlock_inner_radius, 0, 2 * Math.PI);
208			ctx.fill();
209		}
210	}
211}
212function  unlock_process_event(event)
213{
214	if(event.offsetX)
215	{
216		unlock_touch_x  = event.offsetX - unlock_width/2;
217		unlock_touch_y = event.offsetY - unlock_height/2;
218	}
219	else  if(event.layerX)
220	{
221		unlock_touch_x = event.layerX - unlock_width/2;
222		unlock_touch_y  = event.layerY - unlock_height/2;
223	}
224	else
225	{
226		unlock_touch_x  = (Math.round(event.touches[0].pageX - event.touches[0].target.offsetLeft)) - unlock_width/2;
227		unlock_touch_y  = (Math.round(event.touches[0].pageY - event.touches[0].target.offsetTop)) - unlock_height/2;
228	}
229	
230	for(var  i = 1; i <= 9; i++)
231	{
232		if(i == unlock_touch_list[unlock_touch_list.length  - 1])
233			continue;
234		
235		var idx_x = (i-1)%3 - 1;
236		var idx_y  = Math.floor((i-1)/3) - 1;
237		
238		var center_x = idx_x*unlock_gap;
239		var  center_y = idx_y*unlock_gap;
240		
241		var dist = Math.sqrt( (unlock_touch_x  - center_x)*(unlock_touch_x - center_x) + (unlock_touch_y - center_y)*(unlock_touch_y  - center_y) );
242		
243		if(dist < unlock_outer_radius)
244		{
245			unlock_touch_list.push(i);
246			unlock_touch_state  = 1;
247			break;
248		}
249	}
250
251	update_view();
252}
253function unlock_mouse_down()
254{
255	if(ws  == null || authorized)
256		return;
257	
258	event.preventDefault();
259	unlock_process_event(event);
260}
261function  unlock_mouse_up()
262{
263	if(ws == null || authorized)
264		return;
265	
266	event.preventDefault();
267	
268	if(ws  != null && authorized == false)
269		send_to_Arduino(CMD_AUTH, unlock_touch_list.toString());
270	
271	unlock_touch_state  = 0;
272	unlock_touch_list.splice(0, unlock_touch_list.length); 
273	update_view();
274}
275function  unlock_mouse_move()
276{
277	if(ws == null || authorized)
278		return;
279	
280	event.preventDefault();
281	
282	if(authorized)
283		return;
284	
285	unlock_process_event(event);
286}
287
288function  servo_update_view()
289{
290	document.body.style.backgroundColor = "white";
291	document.body.style.color  = "black";
292	
293	var unlock_area = document.getElementById('unlock_area');
294	var  control_area = document.getElementById('control_area');
295	
296	unlock_area.style.display  = 'none';
297	control_area.style.display = 'block';
298	
299	/* modify our control  area here */
300	var servo = document.getElementById("servo");
301	var ctx =  servo.getContext("2d");
302
303	ctx.clearRect(-servo_pivot_x, -servo_pivot_y,  servo_width, servo_height);
304	ctx.rotate(servo_bracket_angle / 180 * Math.PI);
305
306	ctx.drawImage(servo_bracket_img,  -servo_pivot_x, -servo_pivot_y);
307
308	ctx.rotate(-servo_bracket_angle / 180  * Math.PI);
309}
310function check_range_xyra(event, servo_mouse_xyra)
311{
312	var  x, y, r, a, rc_x, rc_y, radian;
313	var min_r, max_r, width;
314
315	if(event.touches)
316	{
317		var  touches = event.touches;
318
319		x = (touches[0].pageX - touches[0].target.offsetLeft)  - servo_pivot_x;
320		y = servo_pivot_y - (touches[0].pageY - touches[0].target.offsetTop);
321		min_r  = 60;
322		max_r = servo_pivot_x;
323		width = 40;
324	}
325	else
326	{
327		x  = event.offsetX - servo_pivot_x;
328		y = servo_pivot_y - event.offsetY;
329		min_r  = 60;
330		max_r = servo_bracket_radius;
331		width = 20;
332	}
333
334	/*  cartesian to polar coordinate conversion */
335	r = Math.sqrt(x * x + y * y);
336	a  = Math.atan2(y, x);
337
338	servo_mouse_xyra.x = x;
339	servo_mouse_xyra.y = y;
340	servo_mouse_xyra.r  = r;
341	servo_mouse_xyra.a = a;
342
343	radian = servo_bracket_angle / 180 *  Math.PI;
344
345	/* rotate coordinate */
346	rc_x = x * Math.cos(radian) - y *  Math.sin(radian);
347	rc_y = x * Math.sin(radian) + y * Math.cos(radian);
348
349	if((r  < min_r) || (r > max_r))
350		return false;
351
352	if((rc_y < -width) || (rc_y  > width))
353		return false;
354
355	return true;
356}
357function servo_mouse_down()
358{
359	if(event.touches  && (event.touches.length > 1))
360		servo_click_state = event.touches.length;
361
362	if(servo_click_state  > 1)
363		return;
364
365	if(check_range_xyra(event, servo_mouse_xyra))
366	{
367		servo_click_state  = 1;
368		servo_last_angle = servo_mouse_xyra.a / Math.PI * 180.0;
369	}
370}
371function  servo_mouse_up()
372{
373	servo_click_state = 0;
374}
375function servo_mouse_move()
376{
377	var  angle;
378
379	if(event.touches && (event.touches.length > 1))
380		servo_click_state  = event.touches.length;
381
382	if(servo_click_state > 1)
383		return;
384
385	if(!servo_click_state)
386		return;
387
388	if(!check_range_xyra(event,  servo_mouse_xyra))
389	{
390		servo_click_state = 0;
391		return;
392	}
393
394	angle  = servo_mouse_xyra.a / Math.PI * 180.0;
395
396	if((Math.abs(angle) > 90) && (angle  * servo_last_angle < 0))
397	{
398		if(servo_last_angle > 0)
399			servo_last_angle  = -180;
400		else
401			servo_last_angle = 180;
402	}
403
404	servo_bracket_angle  += (servo_last_angle - angle);
405	servo_last_angle = angle;
406
407	if(servo_bracket_angle  > 90)
408		servo_bracket_angle = 90;
409
410	if(servo_bracket_angle < -90)
411		servo_bracket_angle  = -90;
412
413	servo_update_view();
414	
415	send_to_Arduino(CMD_CTRL, Math.floor(servo_bracket_angle))
416
417	debug  = document.getElementById("debug");
418	debug.innerHTML = Math.floor(servo_bracket_angle);
419
420	event.preventDefault();
421}
422
423function  send_to_Arduino(cmd, data)
424{
425	if(ws.readyState == 1)
426	{
427		ws.send(cmd  + ":" + data + "\
\
428");
429	}
430}
431
432window.onload = init;
433</script>
434</head>
435
436<body>
437
438<p>
439<h1>Arduino  - Web Pattern Unlock</h1>
440</p>
441<div id="unlock_area" style="display:block;">
442	<canvas  id="unlock"></canvas>
443</div>
444<div id="control_area" style="display:none;">
445	<canvas  id="servo"></canvas>
446	<p>Angle : <span id="debug">0</span></p>
447</div>
448<h2>
449<p>WebSocket  : <span id="ws_state">null</span></p>
450<button id="bt_connect" type="button"  onclick="connect_onclick();">Connect</button>
451</h2>
452
453</body>
454</html>

<!DOCTYPE html>
<html>
<head>
<title>Arduino - PHPoC Shield</title>
<meta  name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<meta  charset="utf-8">
<style>
body { text-align: center; font-size: width/2pt;  }
h1 { font-weight: bold; font-size: width/2pt; }
h2 { font-weight: bold;  font-size: width/2pt; }
button { font-weight: bold; font-size: width/2pt; }
</style>
<script>

var  CMD_AUTH = 0;
var CMD_CTRL = 1;
var ws;
var authorized = false;

/*  unlock variable */
var unlock_width = 400, unlock_height = 400;
var unlock_inner_radius  = 14;
var unlock_middle_radius = 22;
var unlock_outer_radius  = 34;
var  unlock_gap = 140;
var unlock_touch_state = 0;
var unlock_touch_x = 0, unlock_touch_y  = 0;
var unlock_touch_list = new Array();
var unlock_ratio = 1;

/*  control variable: change as you want, as your application */
var servo_width  = 401, servo_height = 466;
var servo_pivot_x = 200, servo_pivot_y = 200;
var  servo_bracket_radius = 160, servo_bracket_angle = 0;
var servo_bracket_img =  new Image();
var servo_click_state = 0;
var servo_last_angle = 0;
var servo_mouse_xyra  = {x:0, y:0, r:0.0, a:0.0};

servo_bracket_img.src = "servo_bracket.png";

function  init()
{
	/* init unlock part */
	
	var unlock = document.getElementById("unlock");
	unlock.width  = unlock_width;
	unlock.height = unlock_height;
 
	unlock.addEventListener("touchstart",  unlock_mouse_down);
	unlock.addEventListener("touchend", unlock_mouse_up);
	unlock.addEventListener("touchmove",  unlock_mouse_move);
	unlock.addEventListener("mousedown", unlock_mouse_down);
	unlock.addEventListener("mouseup",  unlock_mouse_up);
	unlock.addEventListener("mousemove", unlock_mouse_move);
	
	var  ctx = unlock.getContext("2d");
	ctx.translate(unlock_width/2, unlock_height/2);
	ctx.shadowBlur  = 20;
	ctx.shadowColor = "LightGray";
	ctx.lineCap="round";
	ctx.lineJoin="round";
	
	/*  init control part */
	var servo = document.getElementById("servo");

	servo.width  = servo_width;
	servo.height = servo_height;
	servo.style.backgroundImage  = "url('/servo_body.png')";

	servo.addEventListener("touchstart", servo_mouse_down);
	servo.addEventListener("touchend",  servo_mouse_up);
	servo.addEventListener("touchmove", servo_mouse_move);
	servo.addEventListener("mousedown",  servo_mouse_down);
	servo.addEventListener("mouseup", servo_mouse_up);
	servo.addEventListener("mousemove",  servo_mouse_move);

	ctx = servo.getContext("2d");
	ctx.translate(servo_pivot_x,  servo_pivot_y);
	
	update_view();
}
function connect_onclick()
{
	if(ws  == null)
	{
		var ws_host_addr = "<?echo _SERVER("HTTP_HOST")?>";
		if((navigator.platform.indexOf("Win")  != -1) && (ws_host_addr.charAt(0) == "["))
		{
			// network resource  identifier to UNC path name conversion
			ws_host_addr = ws_host_addr.replace(/[\\[\\]]/g,  '');
			ws_host_addr = ws_host_addr.replace(/:/g, "-");
			ws_host_addr  += ".ipv6-literal.net";
		}
		
		ws = new WebSocket("ws://" +  ws_host_addr + "/web_pattern", "text.phpoc");
		document.getElementById("ws_state").innerHTML  = "CONNECTING";
		ws.onopen = ws_onopen;
		ws.onclose = ws_onclose;
		ws.onmessage  = ws_onmessage;
	}
	else
		ws.close();
}
function ws_onopen()
{
	document.getElementById("ws_state").innerHTML  = "<font color='blue'>CONNECTED</font>";
	document.getElementById("bt_connect").innerHTML  = "Disconnect";
	update_view();
}
function ws_onclose()
{
	document.getElementById("ws_state").innerHTML  = "<font color='gray'>CLOSED</font>";
	document.getElementById("bt_connect").innerHTML  = "Connect";
	ws.onopen = null;
	ws.onclose = null;
	ws.onmessage  = null;
	ws = null;
	authorized = false;
	update_view();
}
function  ws_onmessage(e_msg)
{
	e_msg = e_msg || window.event; // MessageEvent
	
	var  resp = parseInt(e_msg.data);
	
	if(resp == 202)
		authorized = true;
	else  if(resp == 401)
		authorized = false;
	else
		console.log("unknown:"  + resp);
	
	update_view();
}
function update_view()
{
	if(!authorized)
		unlock_update_view();
	else
		servo_update_view();
}

function  unlock_update_view()
{
	document.body.style.backgroundColor = "black";
	document.body.style.color  = "white";
	
	var unlock_area = document.getElementById('unlock_area');
	var  control_area = document.getElementById('control_area');
	
	unlock_area.style.display  = 'block';
	control_area.style.display = 'none';
	
	var unlock = document.getElementById("unlock");
	var  ctx = unlock.getContext("2d");
	
	ctx.clearRect(-unlock_width/2, -unlock_height/2,  unlock_width, unlock_height);
	
	// draw touched point and line
	ctx.lineWidth  = 10;
	ctx.strokeStyle="white";
	ctx.globalAlpha=1;
	ctx.beginPath();
	for  (var i = 0; i < unlock_touch_list.length; i++) 
	{
		var temp = unlock_touch_list[i]  - 1;
		var x =  temp % 3 - 1;
		var y = Math.floor(temp / 3) - 1;
		
		ctx.lineTo(x*unlock_gap,  y*unlock_gap);
	}
	
	if(unlock_touch_state)
		ctx.lineTo(unlock_touch_x,  unlock_touch_y);
	
	ctx.stroke();
	
	for (var i = 0; i < unlock_touch_list.length;  i++) 
	{
		var temp = unlock_touch_list[i] - 1;
		var x =  temp %  3 - 1;
		var y = Math.floor(temp / 3) - 1;
		
		ctx.globalAlpha=0.2;
		ctx.fillStyle  = "white";
		ctx.beginPath();
		ctx.arc(x*unlock_gap, y*unlock_gap,  unlock_outer_radius, 0, 2 * Math.PI);
		ctx.fill();
	}
	
	// draw  base
	for(var y = -1; y <= 1; y++)
	{
		for(var x = -1; x <= 1; x++)
		{
			ctx.globalAlpha=0.5;
			ctx.fillStyle  = "white";
			ctx.beginPath();
			ctx.arc(x*unlock_gap, y*unlock_gap,  unlock_middle_radius, 0, 2 * Math.PI);
			ctx.fill();
			
			ctx.globalAlpha=1;
			ctx.fillStyle  = "Cyan";
			ctx.beginPath();
			ctx.arc(x*unlock_gap, y*unlock_gap,  unlock_inner_radius, 0, 2 * Math.PI);
			ctx.fill();
		}
	}
}
function  unlock_process_event(event)
{
	if(event.offsetX)
	{
		unlock_touch_x  = event.offsetX - unlock_width/2;
		unlock_touch_y = event.offsetY - unlock_height/2;
	}
	else  if(event.layerX)
	{
		unlock_touch_x = event.layerX - unlock_width/2;
		unlock_touch_y  = event.layerY - unlock_height/2;
	}
	else
	{
		unlock_touch_x  = (Math.round(event.touches[0].pageX - event.touches[0].target.offsetLeft)) - unlock_width/2;
		unlock_touch_y  = (Math.round(event.touches[0].pageY - event.touches[0].target.offsetTop)) - unlock_height/2;
	}
	
	for(var  i = 1; i <= 9; i++)
	{
		if(i == unlock_touch_list[unlock_touch_list.length  - 1])
			continue;
		
		var idx_x = (i-1)%3 - 1;
		var idx_y  = Math.floor((i-1)/3) - 1;
		
		var center_x = idx_x*unlock_gap;
		var  center_y = idx_y*unlock_gap;
		
		var dist = Math.sqrt( (unlock_touch_x  - center_x)*(unlock_touch_x - center_x) + (unlock_touch_y - center_y)*(unlock_touch_y  - center_y) );
		
		if(dist < unlock_outer_radius)
		{
			unlock_touch_list.push(i);
			unlock_touch_state  = 1;
			break;
		}
	}

	update_view();
}
function unlock_mouse_down()
{
	if(ws  == null || authorized)
		return;
	
	event.preventDefault();
	unlock_process_event(event);
}
function  unlock_mouse_up()
{
	if(ws == null || authorized)
		return;
	
	event.preventDefault();
	
	if(ws  != null && authorized == false)
		send_to_Arduino(CMD_AUTH, unlock_touch_list.toString());
	
	unlock_touch_state  = 0;
	unlock_touch_list.splice(0, unlock_touch_list.length); 
	update_view();
}
function  unlock_mouse_move()
{
	if(ws == null || authorized)
		return;
	
	event.preventDefault();
	
	if(authorized)
		return;
	
	unlock_process_event(event);
}

function  servo_update_view()
{
	document.body.style.backgroundColor = "white";
	document.body.style.color  = "black";
	
	var unlock_area = document.getElementById('unlock_area');
	var  control_area = document.getElementById('control_area');
	
	unlock_area.style.display  = 'none';
	control_area.style.display = 'block';
	
	/* modify our control  area here */
	var servo = document.getElementById("servo");
	var ctx =  servo.getContext("2d");

	ctx.clearRect(-servo_pivot_x, -servo_pivot_y,  servo_width, servo_height);
	ctx.rotate(servo_bracket_angle / 180 * Math.PI);

	ctx.drawImage(servo_bracket_img,  -servo_pivot_x, -servo_pivot_y);

	ctx.rotate(-servo_bracket_angle / 180  * Math.PI);
}
function check_range_xyra(event, servo_mouse_xyra)
{
	var  x, y, r, a, rc_x, rc_y, radian;
	var min_r, max_r, width;

	if(event.touches)
	{
		var  touches = event.touches;

		x = (touches[0].pageX - touches[0].target.offsetLeft)  - servo_pivot_x;
		y = servo_pivot_y - (touches[0].pageY - touches[0].target.offsetTop);
		min_r  = 60;
		max_r = servo_pivot_x;
		width = 40;
	}
	else
	{
		x  = event.offsetX - servo_pivot_x;
		y = servo_pivot_y - event.offsetY;
		min_r  = 60;
		max_r = servo_bracket_radius;
		width = 20;
	}

	/*  cartesian to polar coordinate conversion */
	r = Math.sqrt(x * x + y * y);
	a  = Math.atan2(y, x);

	servo_mouse_xyra.x = x;
	servo_mouse_xyra.y = y;
	servo_mouse_xyra.r  = r;
	servo_mouse_xyra.a = a;

	radian = servo_bracket_angle / 180 *  Math.PI;

	/* rotate coordinate */
	rc_x = x * Math.cos(radian) - y *  Math.sin(radian);
	rc_y = x * Math.sin(radian) + y * Math.cos(radian);

	if((r  < min_r) || (r > max_r))
		return false;

	if((rc_y < -width) || (rc_y  > width))
		return false;

	return true;
}
function servo_mouse_down()
{
	if(event.touches  && (event.touches.length > 1))
		servo_click_state = event.touches.length;

	if(servo_click_state  > 1)
		return;

	if(check_range_xyra(event, servo_mouse_xyra))
	{
		servo_click_state  = 1;
		servo_last_angle = servo_mouse_xyra.a / Math.PI * 180.0;
	}
}
function  servo_mouse_up()
{
	servo_click_state = 0;
}
function servo_mouse_move()
{
	var  angle;

	if(event.touches && (event.touches.length > 1))
		servo_click_state  = event.touches.length;

	if(servo_click_state > 1)
		return;

	if(!servo_click_state)
		return;

	if(!check_range_xyra(event,  servo_mouse_xyra))
	{
		servo_click_state = 0;
		return;
	}

	angle  = servo_mouse_xyra.a / Math.PI * 180.0;

	if((Math.abs(angle) > 90) && (angle  * servo_last_angle < 0))
	{
		if(servo_last_angle > 0)
			servo_last_angle  = -180;
		else
			servo_last_angle = 180;
	}

	servo_bracket_angle  += (servo_last_angle - angle);
	servo_last_angle = angle;

	if(servo_bracket_angle  > 90)
		servo_bracket_angle = 90;

	if(servo_bracket_angle < -90)
		servo_bracket_angle  = -90;

	servo_update_view();
	
	send_to_Arduino(CMD_CTRL, Math.floor(servo_bracket_angle))

	debug  = document.getElementById("debug");
	debug.innerHTML = Math.floor(servo_bracket_angle);

	event.preventDefault();
}

function  send_to_Arduino(cmd, data)
{
	if(ws.readyState == 1)
	{
		ws.send(cmd  + ":" + data + "\
\
");
	}
}

window.onload = init;
</script>
</head>

<body>

<p>
<h1>Arduino  - Web Pattern Unlock</h1>
</p>
<div id="unlock_area" style="display:block;">
	<canvas  id="unlock"></canvas>
</div>
<div id="control_area" style="display:none;">
	<canvas  id="servo"></canvas>
	<p>Angle : <span id="debug">0</span></p>
</div>
<h2>
<p>WebSocket  : <span id="ws_state">null</span></p>
<button id="bt_connect" type="button"  onclick="connect_onclick();">Connect</button>
</h2>

</body>
</html>

unlock.php

php

This is Web user interface

1<!DOCTYPE html>
2<html>
3<head>
4<title>Arduino - PHPoC Shield</title>
5<meta
6  name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
7<meta
8  charset="utf-8">
9<style>
10body { text-align: center; font-size: width/2pt;
11  }
12h1 { font-weight: bold; font-size: width/2pt; }
13h2 { font-weight: bold;
14  font-size: width/2pt; }
15button { font-weight: bold; font-size: width/2pt; }
16</style>
17<script>
18
19var
20  CMD_AUTH = 0;
21var CMD_CTRL = 1;
22var ws;
23var authorized = false;
24
25/*
26  unlock variable */
27var unlock_width = 400, unlock_height = 400;
28var unlock_inner_radius
29  = 14;
30var unlock_middle_radius = 22;
31var unlock_outer_radius  = 34;
32var
33  unlock_gap = 140;
34var unlock_touch_state = 0;
35var unlock_touch_x = 0, unlock_touch_y
36  = 0;
37var unlock_touch_list = new Array();
38var unlock_ratio = 1;
39
40/*
41  control variable: change as you want, as your application */
42var servo_width
43  = 401, servo_height = 466;
44var servo_pivot_x = 200, servo_pivot_y = 200;
45var
46  servo_bracket_radius = 160, servo_bracket_angle = 0;
47var servo_bracket_img =
48  new Image();
49var servo_click_state = 0;
50var servo_last_angle = 0;
51var servo_mouse_xyra
52  = {x:0, y:0, r:0.0, a:0.0};
53
54servo_bracket_img.src = "servo_bracket.png";
55
56function
57  init()
58{
59	/* init unlock part */
60	
61	var unlock = document.getElementById("unlock");
62	unlock.width
63  = unlock_width;
64	unlock.height = unlock_height;
65 
66	unlock.addEventListener("touchstart",
67  unlock_mouse_down);
68	unlock.addEventListener("touchend", unlock_mouse_up);
69	unlock.addEventListener("touchmove",
70  unlock_mouse_move);
71	unlock.addEventListener("mousedown", unlock_mouse_down);
72	unlock.addEventListener("mouseup",
73  unlock_mouse_up);
74	unlock.addEventListener("mousemove", unlock_mouse_move);
75	
76	var
77  ctx = unlock.getContext("2d");
78	ctx.translate(unlock_width/2, unlock_height/2);
79	ctx.shadowBlur
80  = 20;
81	ctx.shadowColor = "LightGray";
82	ctx.lineCap="round";
83	ctx.lineJoin="round";
84	
85	/*
86  init control part */
87	var servo = document.getElementById("servo");
88
89	servo.width
90  = servo_width;
91	servo.height = servo_height;
92	servo.style.backgroundImage
93  = "url('/servo_body.png')";
94
95	servo.addEventListener("touchstart", servo_mouse_down);
96	servo.addEventListener("touchend",
97  servo_mouse_up);
98	servo.addEventListener("touchmove", servo_mouse_move);
99	servo.addEventListener("mousedown",
100  servo_mouse_down);
101	servo.addEventListener("mouseup", servo_mouse_up);
102	servo.addEventListener("mousemove",
103  servo_mouse_move);
104
105	ctx = servo.getContext("2d");
106	ctx.translate(servo_pivot_x,
107  servo_pivot_y);
108	
109	update_view();
110}
111function connect_onclick()
112{
113	if(ws
114  == null)
115	{
116		var ws_host_addr = "<?echo _SERVER("HTTP_HOST")?>";
117		if((navigator.platform.indexOf("Win")
118  != -1) && (ws_host_addr.charAt(0) == "["))
119		{
120			// network resource
121  identifier to UNC path name conversion
122			ws_host_addr = ws_host_addr.replace(/[\\[\\]]/g,
123  '');
124			ws_host_addr = ws_host_addr.replace(/:/g, "-");
125			ws_host_addr
126  += ".ipv6-literal.net";
127		}
128		
129		ws = new WebSocket("ws://" +
130  ws_host_addr + "/web_pattern", "text.phpoc");
131		document.getElementById("ws_state").innerHTML
132  = "CONNECTING";
133		ws.onopen = ws_onopen;
134		ws.onclose = ws_onclose;
135		ws.onmessage
136  = ws_onmessage;
137	}
138	else
139		ws.close();
140}
141function ws_onopen()
142{
143	document.getElementById("ws_state").innerHTML
144  = "<font color='blue'>CONNECTED</font>";
145	document.getElementById("bt_connect").innerHTML
146  = "Disconnect";
147	update_view();
148}
149function ws_onclose()
150{
151	document.getElementById("ws_state").innerHTML
152  = "<font color='gray'>CLOSED</font>";
153	document.getElementById("bt_connect").innerHTML
154  = "Connect";
155	ws.onopen = null;
156	ws.onclose = null;
157	ws.onmessage
158  = null;
159	ws = null;
160	authorized = false;
161	update_view();
162}
163function
164  ws_onmessage(e_msg)
165{
166	e_msg = e_msg || window.event; // MessageEvent
167	
168	var
169  resp = parseInt(e_msg.data);
170	
171	if(resp == 202)
172		authorized = true;
173	else
174  if(resp == 401)
175		authorized = false;
176	else
177		console.log("unknown:"
178  + resp);
179	
180	update_view();
181}
182function update_view()
183{
184	if(!authorized)
185		unlock_update_view();
186	else
187		servo_update_view();
188}
189
190function
191  unlock_update_view()
192{
193	document.body.style.backgroundColor = "black";
194	document.body.style.color
195  = "white";
196	
197	var unlock_area = document.getElementById('unlock_area');
198	var
199  control_area = document.getElementById('control_area');
200	
201	unlock_area.style.display
202  = 'block';
203	control_area.style.display = 'none';
204	
205	var unlock = document.getElementById("unlock");
206	var
207  ctx = unlock.getContext("2d");
208	
209	ctx.clearRect(-unlock_width/2, -unlock_height/2,
210  unlock_width, unlock_height);
211	
212	// draw touched point and line
213	ctx.lineWidth
214  = 10;
215	ctx.strokeStyle="white";
216	ctx.globalAlpha=1;
217	ctx.beginPath();
218	for
219  (var i = 0; i < unlock_touch_list.length; i++) 
220	{
221		var temp = unlock_touch_list[i]
222  - 1;
223		var x =  temp % 3 - 1;
224		var y = Math.floor(temp / 3) - 1;
225		
226		ctx.lineTo(x*unlock_gap,
227  y*unlock_gap);
228	}
229	
230	if(unlock_touch_state)
231		ctx.lineTo(unlock_touch_x,
232  unlock_touch_y);
233	
234	ctx.stroke();
235	
236	for (var i = 0; i < unlock_touch_list.length;
237  i++) 
238	{
239		var temp = unlock_touch_list[i] - 1;
240		var x =  temp %
241  3 - 1;
242		var y = Math.floor(temp / 3) - 1;
243		
244		ctx.globalAlpha=0.2;
245		ctx.fillStyle
246  = "white";
247		ctx.beginPath();
248		ctx.arc(x*unlock_gap, y*unlock_gap,
249  unlock_outer_radius, 0, 2 * Math.PI);
250		ctx.fill();
251	}
252	
253	// draw
254  base
255	for(var y = -1; y <= 1; y++)
256	{
257		for(var x = -1; x <= 1; x++)
258		{
259			ctx.globalAlpha=0.5;
260			ctx.fillStyle
261  = "white";
262			ctx.beginPath();
263			ctx.arc(x*unlock_gap, y*unlock_gap,
264  unlock_middle_radius, 0, 2 * Math.PI);
265			ctx.fill();
266			
267			ctx.globalAlpha=1;
268			ctx.fillStyle
269  = "Cyan";
270			ctx.beginPath();
271			ctx.arc(x*unlock_gap, y*unlock_gap,
272  unlock_inner_radius, 0, 2 * Math.PI);
273			ctx.fill();
274		}
275	}
276}
277function
278  unlock_process_event(event)
279{
280	if(event.offsetX)
281	{
282		unlock_touch_x
283  = event.offsetX - unlock_width/2;
284		unlock_touch_y = event.offsetY - unlock_height/2;
285	}
286	else
287  if(event.layerX)
288	{
289		unlock_touch_x = event.layerX - unlock_width/2;
290		unlock_touch_y
291  = event.layerY - unlock_height/2;
292	}
293	else
294	{
295		unlock_touch_x
296  = (Math.round(event.touches[0].pageX - event.touches[0].target.offsetLeft)) - unlock_width/2;
297		unlock_touch_y
298  = (Math.round(event.touches[0].pageY - event.touches[0].target.offsetTop)) - unlock_height/2;
299	}
300	
301	for(var
302  i = 1; i <= 9; i++)
303	{
304		if(i == unlock_touch_list[unlock_touch_list.length
305  - 1])
306			continue;
307		
308		var idx_x = (i-1)%3 - 1;
309		var idx_y
310  = Math.floor((i-1)/3) - 1;
311		
312		var center_x = idx_x*unlock_gap;
313		var
314  center_y = idx_y*unlock_gap;
315		
316		var dist = Math.sqrt( (unlock_touch_x
317  - center_x)*(unlock_touch_x - center_x) + (unlock_touch_y - center_y)*(unlock_touch_y
318  - center_y) );
319		
320		if(dist < unlock_outer_radius)
321		{
322			unlock_touch_list.push(i);
323			unlock_touch_state
324  = 1;
325			break;
326		}
327	}
328
329	update_view();
330}
331function unlock_mouse_down()
332{
333	if(ws
334  == null || authorized)
335		return;
336	
337	event.preventDefault();
338	unlock_process_event(event);
339}
340function
341  unlock_mouse_up()
342{
343	if(ws == null || authorized)
344		return;
345	
346	event.preventDefault();
347	
348	if(ws
349  != null && authorized == false)
350		send_to_Arduino(CMD_AUTH, unlock_touch_list.toString());
351	
352	unlock_touch_state
353  = 0;
354	unlock_touch_list.splice(0, unlock_touch_list.length); 
355	update_view();
356}
357function
358  unlock_mouse_move()
359{
360	if(ws == null || authorized)
361		return;
362	
363	event.preventDefault();
364	
365	if(authorized)
366		return;
367	
368	unlock_process_event(event);
369}
370
371function
372  servo_update_view()
373{
374	document.body.style.backgroundColor = "white";
375	document.body.style.color
376  = "black";
377	
378	var unlock_area = document.getElementById('unlock_area');
379	var
380  control_area = document.getElementById('control_area');
381	
382	unlock_area.style.display
383  = 'none';
384	control_area.style.display = 'block';
385	
386	/* modify our control
387  area here */
388	var servo = document.getElementById("servo");
389	var ctx =
390  servo.getContext("2d");
391
392	ctx.clearRect(-servo_pivot_x, -servo_pivot_y,
393  servo_width, servo_height);
394	ctx.rotate(servo_bracket_angle / 180 * Math.PI);
395
396	ctx.drawImage(servo_bracket_img,
397  -servo_pivot_x, -servo_pivot_y);
398
399	ctx.rotate(-servo_bracket_angle / 180
400  * Math.PI);
401}
402function check_range_xyra(event, servo_mouse_xyra)
403{
404	var
405  x, y, r, a, rc_x, rc_y, radian;
406	var min_r, max_r, width;
407
408	if(event.touches)
409	{
410		var
411  touches = event.touches;
412
413		x = (touches[0].pageX - touches[0].target.offsetLeft)
414  - servo_pivot_x;
415		y = servo_pivot_y - (touches[0].pageY - touches[0].target.offsetTop);
416		min_r
417  = 60;
418		max_r = servo_pivot_x;
419		width = 40;
420	}
421	else
422	{
423		x
424  = event.offsetX - servo_pivot_x;
425		y = servo_pivot_y - event.offsetY;
426		min_r
427  = 60;
428		max_r = servo_bracket_radius;
429		width = 20;
430	}
431
432	/*
433  cartesian to polar coordinate conversion */
434	r = Math.sqrt(x * x + y * y);
435	a
436  = Math.atan2(y, x);
437
438	servo_mouse_xyra.x = x;
439	servo_mouse_xyra.y = y;
440	servo_mouse_xyra.r
441  = r;
442	servo_mouse_xyra.a = a;
443
444	radian = servo_bracket_angle / 180 *
445  Math.PI;
446
447	/* rotate coordinate */
448	rc_x = x * Math.cos(radian) - y *
449  Math.sin(radian);
450	rc_y = x * Math.sin(radian) + y * Math.cos(radian);
451
452	if((r
453  < min_r) || (r > max_r))
454		return false;
455
456	if((rc_y < -width) || (rc_y
457  > width))
458		return false;
459
460	return true;
461}
462function servo_mouse_down()
463{
464	if(event.touches
465  && (event.touches.length > 1))
466		servo_click_state = event.touches.length;
467
468	if(servo_click_state
469  > 1)
470		return;
471
472	if(check_range_xyra(event, servo_mouse_xyra))
473	{
474		servo_click_state
475  = 1;
476		servo_last_angle = servo_mouse_xyra.a / Math.PI * 180.0;
477	}
478}
479function
480  servo_mouse_up()
481{
482	servo_click_state = 0;
483}
484function servo_mouse_move()
485{
486	var
487  angle;
488
489	if(event.touches && (event.touches.length > 1))
490		servo_click_state
491  = event.touches.length;
492
493	if(servo_click_state > 1)
494		return;
495
496	if(!servo_click_state)
497		return;
498
499	if(!check_range_xyra(event,
500  servo_mouse_xyra))
501	{
502		servo_click_state = 0;
503		return;
504	}
505
506	angle
507  = servo_mouse_xyra.a / Math.PI * 180.0;
508
509	if((Math.abs(angle) > 90) && (angle
510  * servo_last_angle < 0))
511	{
512		if(servo_last_angle > 0)
513			servo_last_angle
514  = -180;
515		else
516			servo_last_angle = 180;
517	}
518
519	servo_bracket_angle
520  += (servo_last_angle - angle);
521	servo_last_angle = angle;
522
523	if(servo_bracket_angle
524  > 90)
525		servo_bracket_angle = 90;
526
527	if(servo_bracket_angle < -90)
528		servo_bracket_angle
529  = -90;
530
531	servo_update_view();
532	
533	send_to_Arduino(CMD_CTRL, Math.floor(servo_bracket_angle))
534
535	debug
536  = document.getElementById("debug");
537	debug.innerHTML = Math.floor(servo_bracket_angle);
538
539	event.preventDefault();
540}
541
542function
543  send_to_Arduino(cmd, data)
544{
545	if(ws.readyState == 1)
546	{
547		ws.send(cmd
548  + ":" + data + "\
\
549");
550	}
551}
552
553window.onload = init;
554</script>
555</head>
556
557<body>
558
559<p>
560<h1>Arduino
561  - Web Pattern Unlock</h1>
562</p>
563<div id="unlock_area" style="display:block;">
564	<canvas
565  id="unlock"></canvas>
566</div>
567<div id="control_area" style="display:none;">
568	<canvas
569  id="servo"></canvas>
570	<p>Angle : <span id="debug">0</span></p>
571</div>
572<h2>
573<p>WebSocket
574  : <span id="ws_state">null</span></p>
575<button id="bt_connect" type="button"
576  onclick="connect_onclick();">Connect</button>
577</h2>
578
579</body>
580</html>

<!DOCTYPE html>
<html>
<head>
<title>Arduino - PHPoC Shield</title>
<meta
  name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<meta
  charset="utf-8">
<style>
body { text-align: center; font-size: width/2pt;
  }
h1 { font-weight: bold; font-size: width/2pt; }
h2 { font-weight: bold;
  font-size: width/2pt; }
button { font-weight: bold; font-size: width/2pt; }
</style>
<script>

var
  CMD_AUTH = 0;
var CMD_CTRL = 1;
var ws;
var authorized = false;

/*
  unlock variable */
var unlock_width = 400, unlock_height = 400;
var unlock_inner_radius
  = 14;
var unlock_middle_radius = 22;
var unlock_outer_radius  = 34;
var
  unlock_gap = 140;
var unlock_touch_state = 0;
var unlock_touch_x = 0, unlock_touch_y
  = 0;
var unlock_touch_list = new Array();
var unlock_ratio = 1;

/*
  control variable: change as you want, as your application */
var servo_width
  = 401, servo_height = 466;
var servo_pivot_x = 200, servo_pivot_y = 200;
var
  servo_bracket_radius = 160, servo_bracket_angle = 0;
var servo_bracket_img =
  new Image();
var servo_click_state = 0;
var servo_last_angle = 0;
var servo_mouse_xyra
  = {x:0, y:0, r:0.0, a:0.0};

servo_bracket_img.src = "servo_bracket.png";

function
  init()
{
	/* init unlock part */
	
	var unlock = document.getElementById("unlock");
	unlock.width
  = unlock_width;
	unlock.height = unlock_height;
 
	unlock.addEventListener("touchstart",
  unlock_mouse_down);
	unlock.addEventListener("touchend", unlock_mouse_up);
	unlock.addEventListener("touchmove",
  unlock_mouse_move);
	unlock.addEventListener("mousedown", unlock_mouse_down);
	unlock.addEventListener("mouseup",
  unlock_mouse_up);
	unlock.addEventListener("mousemove", unlock_mouse_move);
	
	var
  ctx = unlock.getContext("2d");
	ctx.translate(unlock_width/2, unlock_height/2);
	ctx.shadowBlur
  = 20;
	ctx.shadowColor = "LightGray";
	ctx.lineCap="round";
	ctx.lineJoin="round";
	
	/*
  init control part */
	var servo = document.getElementById("servo");

	servo.width
  = servo_width;
	servo.height = servo_height;
	servo.style.backgroundImage
  = "url('/servo_body.png')";

	servo.addEventListener("touchstart", servo_mouse_down);
	servo.addEventListener("touchend",
  servo_mouse_up);
	servo.addEventListener("touchmove", servo_mouse_move);
	servo.addEventListener("mousedown",
  servo_mouse_down);
	servo.addEventListener("mouseup", servo_mouse_up);
	servo.addEventListener("mousemove",
  servo_mouse_move);

	ctx = servo.getContext("2d");
	ctx.translate(servo_pivot_x,
  servo_pivot_y);
	
	update_view();
}
function connect_onclick()
{
	if(ws
  == null)
	{
		var ws_host_addr = "<?echo _SERVER("HTTP_HOST")?>";
		if((navigator.platform.indexOf("Win")
  != -1) && (ws_host_addr.charAt(0) == "["))
		{
			// network resource
  identifier to UNC path name conversion
			ws_host_addr = ws_host_addr.replace(/[\\[\\]]/g,
  '');
			ws_host_addr = ws_host_addr.replace(/:/g, "-");
			ws_host_addr
  += ".ipv6-literal.net";
		}
		
		ws = new WebSocket("ws://" +
  ws_host_addr + "/web_pattern", "text.phpoc");
		document.getElementById("ws_state").innerHTML
  = "CONNECTING";
		ws.onopen = ws_onopen;
		ws.onclose = ws_onclose;
		ws.onmessage
  = ws_onmessage;
	}
	else
		ws.close();
}
function ws_onopen()
{
	document.getElementById("ws_state").innerHTML
  = "<font color='blue'>CONNECTED</font>";
	document.getElementById("bt_connect").innerHTML
  = "Disconnect";
	update_view();
}
function ws_onclose()
{
	document.getElementById("ws_state").innerHTML
  = "<font color='gray'>CLOSED</font>";
	document.getElementById("bt_connect").innerHTML
  = "Connect";
	ws.onopen = null;
	ws.onclose = null;
	ws.onmessage
  = null;
	ws = null;
	authorized = false;
	update_view();
}
function
  ws_onmessage(e_msg)
{
	e_msg = e_msg || window.event; // MessageEvent
	
	var
  resp = parseInt(e_msg.data);
	
	if(resp == 202)
		authorized = true;
	else
  if(resp == 401)
		authorized = false;
	else
		console.log("unknown:"
  + resp);
	
	update_view();
}
function update_view()
{
	if(!authorized)
		unlock_update_view();
	else
		servo_update_view();
}

function
  unlock_update_view()
{
	document.body.style.backgroundColor = "black";
	document.body.style.color
  = "white";
	
	var unlock_area = document.getElementById('unlock_area');
	var
  control_area = document.getElementById('control_area');
	
	unlock_area.style.display
  = 'block';
	control_area.style.display = 'none';
	
	var unlock = document.getElementById("unlock");
	var
  ctx = unlock.getContext("2d");
	
	ctx.clearRect(-unlock_width/2, -unlock_height/2,
  unlock_width, unlock_height);
	
	// draw touched point and line
	ctx.lineWidth
  = 10;
	ctx.strokeStyle="white";
	ctx.globalAlpha=1;
	ctx.beginPath();
	for
  (var i = 0; i < unlock_touch_list.length; i++) 
	{
		var temp = unlock_touch_list[i]
  - 1;
		var x =  temp % 3 - 1;
		var y = Math.floor(temp / 3) - 1;
		
		ctx.lineTo(x*unlock_gap,
  y*unlock_gap);
	}
	
	if(unlock_touch_state)
		ctx.lineTo(unlock_touch_x,
  unlock_touch_y);
	
	ctx.stroke();
	
	for (var i = 0; i < unlock_touch_list.length;
  i++) 
	{
		var temp = unlock_touch_list[i] - 1;
		var x =  temp %
  3 - 1;
		var y = Math.floor(temp / 3) - 1;
		
		ctx.globalAlpha=0.2;
		ctx.fillStyle
  = "white";
		ctx.beginPath();
		ctx.arc(x*unlock_gap, y*unlock_gap,
  unlock_outer_radius, 0, 2 * Math.PI);
		ctx.fill();
	}
	
	// draw
  base
	for(var y = -1; y <= 1; y++)
	{
		for(var x = -1; x <= 1; x++)
		{
			ctx.globalAlpha=0.5;
			ctx.fillStyle
  = "white";
			ctx.beginPath();
			ctx.arc(x*unlock_gap, y*unlock_gap,
  unlock_middle_radius, 0, 2 * Math.PI);
			ctx.fill();
			
			ctx.globalAlpha=1;
			ctx.fillStyle
  = "Cyan";
			ctx.beginPath();
			ctx.arc(x*unlock_gap, y*unlock_gap,
  unlock_inner_radius, 0, 2 * Math.PI);
			ctx.fill();
		}
	}
}
function
  unlock_process_event(event)
{
	if(event.offsetX)
	{
		unlock_touch_x
  = event.offsetX - unlock_width/2;
		unlock_touch_y = event.offsetY - unlock_height/2;
	}
	else
  if(event.layerX)
	{
		unlock_touch_x = event.layerX - unlock_width/2;
		unlock_touch_y
  = event.layerY - unlock_height/2;
	}
	else
	{
		unlock_touch_x
  = (Math.round(event.touches[0].pageX - event.touches[0].target.offsetLeft)) - unlock_width/2;
		unlock_touch_y
  = (Math.round(event.touches[0].pageY - event.touches[0].target.offsetTop)) - unlock_height/2;
	}
	
	for(var
  i = 1; i <= 9; i++)
	{
		if(i == unlock_touch_list[unlock_touch_list.length
  - 1])
			continue;
		
		var idx_x = (i-1)%3 - 1;
		var idx_y
  = Math.floor((i-1)/3) - 1;
		
		var center_x = idx_x*unlock_gap;
		var
  center_y = idx_y*unlock_gap;
		
		var dist = Math.sqrt( (unlock_touch_x
  - center_x)*(unlock_touch_x - center_x) + (unlock_touch_y - center_y)*(unlock_touch_y
  - center_y) );
		
		if(dist < unlock_outer_radius)
		{
			unlock_touch_list.push(i);
			unlock_touch_state
  = 1;
			break;
		}
	}

	update_view();
}
function unlock_mouse_down()
{
	if(ws
  == null || authorized)
		return;
	
	event.preventDefault();
	unlock_process_event(event);
}
function
  unlock_mouse_up()
{
	if(ws == null || authorized)
		return;
	
	event.preventDefault();
	
	if(ws
  != null && authorized == false)
		send_to_Arduino(CMD_AUTH, unlock_touch_list.toString());
	
	unlock_touch_state
  = 0;
	unlock_touch_list.splice(0, unlock_touch_list.length); 
	update_view();
}
function
  unlock_mouse_move()
{
	if(ws == null || authorized)
		return;
	
	event.preventDefault();
	
	if(authorized)
		return;
	
	unlock_process_event(event);
}

function
  servo_update_view()
{
	document.body.style.backgroundColor = "white";
	document.body.style.color
  = "black";
	
	var unlock_area = document.getElementById('unlock_area');
	var
  control_area = document.getElementById('control_area');
	
	unlock_area.style.display
  = 'none';
	control_area.style.display = 'block';
	
	/* modify our control
  area here */
	var servo = document.getElementById("servo");
	var ctx =
  servo.getContext("2d");

	ctx.clearRect(-servo_pivot_x, -servo_pivot_y,
  servo_width, servo_height);
	ctx.rotate(servo_bracket_angle / 180 * Math.PI);

	ctx.drawImage(servo_bracket_img,
  -servo_pivot_x, -servo_pivot_y);

	ctx.rotate(-servo_bracket_angle / 180
  * Math.PI);
}
function check_range_xyra(event, servo_mouse_xyra)
{
	var
  x, y, r, a, rc_x, rc_y, radian;
	var min_r, max_r, width;

	if(event.touches)
	{
		var
  touches = event.touches;

		x = (touches[0].pageX - touches[0].target.offsetLeft)
  - servo_pivot_x;
		y = servo_pivot_y - (touches[0].pageY - touches[0].target.offsetTop);
		min_r
  = 60;
		max_r = servo_pivot_x;
		width = 40;
	}
	else
	{
		x
  = event.offsetX - servo_pivot_x;
		y = servo_pivot_y - event.offsetY;
		min_r
  = 60;
		max_r = servo_bracket_radius;
		width = 20;
	}

	/*
  cartesian to polar coordinate conversion */
	r = Math.sqrt(x * x + y * y);
	a
  = Math.atan2(y, x);

	servo_mouse_xyra.x = x;
	servo_mouse_xyra.y = y;
	servo_mouse_xyra.r
  = r;
	servo_mouse_xyra.a = a;

	radian = servo_bracket_angle / 180 *
  Math.PI;

	/* rotate coordinate */
	rc_x = x * Math.cos(radian) - y *
  Math.sin(radian);
	rc_y = x * Math.sin(radian) + y * Math.cos(radian);

	if((r
  < min_r) || (r > max_r))
		return false;

	if((rc_y < -width) || (rc_y
  > width))
		return false;

	return true;
}
function servo_mouse_down()
{
	if(event.touches
  && (event.touches.length > 1))
		servo_click_state = event.touches.length;

	if(servo_click_state
  > 1)
		return;

	if(check_range_xyra(event, servo_mouse_xyra))
	{
		servo_click_state
  = 1;
		servo_last_angle = servo_mouse_xyra.a / Math.PI * 180.0;
	}
}
function
  servo_mouse_up()
{
	servo_click_state = 0;
}
function servo_mouse_move()
{
	var
  angle;

	if(event.touches && (event.touches.length > 1))
		servo_click_state
  = event.touches.length;

	if(servo_click_state > 1)
		return;

	if(!servo_click_state)
		return;

	if(!check_range_xyra(event,
  servo_mouse_xyra))
	{
		servo_click_state = 0;
		return;
	}

	angle
  = servo_mouse_xyra.a / Math.PI * 180.0;

	if((Math.abs(angle) > 90) && (angle
  * servo_last_angle < 0))
	{
		if(servo_last_angle > 0)
			servo_last_angle
  = -180;
		else
			servo_last_angle = 180;
	}

	servo_bracket_angle
  += (servo_last_angle - angle);
	servo_last_angle = angle;

	if(servo_bracket_angle
  > 90)
		servo_bracket_angle = 90;

	if(servo_bracket_angle < -90)
		servo_bracket_angle
  = -90;

	servo_update_view();
	
	send_to_Arduino(CMD_CTRL, Math.floor(servo_bracket_angle))

	debug
  = document.getElementById("debug");
	debug.innerHTML = Math.floor(servo_bracket_angle);

	event.preventDefault();
}

function
  send_to_Arduino(cmd, data)
{
	if(ws.readyState == 1)
	{
		ws.send(cmd
  + ":" + data + "\
\
");
	}
}

window.onload = init;
</script>
</head>

<body>

<p>
<h1>Arduino
  - Web Pattern Unlock</h1>
</p>
<div id="unlock_area" style="display:block;">
	<canvas
  id="unlock"></canvas>
</div>
<div id="control_area" style="display:none;">
	<canvas
  id="servo"></canvas>
	<p>Angle : <span id="debug">0</span></p>
</div>
<h2>
<p>WebSocket
  : <span id="ws_state">null</span></p>
<button id="bt_connect" type="button"
  onclick="connect_onclick();">Connect</button>
</h2>

</body>
</html>

ArduinoUnlockExample

arduino

1/* arduino web server - pattern unlock */
2
3#include "SPI.h"
4#include  "Phpoc.h"
5#include <Servo.h>
6
7#define CMD_AUTH    0
8#define CMD_CTRL    1
9#define ACCEPTED        "202"
10#define UNAUTHORIZED    "401"
11
12PhpocServer  server(80);
13Servo servo;
14String pattern;
15bool authenticated;
16unsigned  long timeout;
17unsigned long lastActiveTime;
18
19void setup() {
20    Serial.begin(9600);
21    while(!Serial)
22        ;
23
24    Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
25    //Phpoc.begin();
26
27    server.beginWebSocket("web_pattern");
28
29    Serial.print("WebSocket server address : ");
30    Serial.println(Phpoc.localIP());  
31    
32    servo.attach(8);  // attaches the servo on pin 8 to the servo  object
33    servo.write(90); 
34
35    pattern = String("1,4,8,6,3");
36    authenticated = false;
37    timeout = 10000; // 10000 milllisecond
38    lastActiveTime  = 0;
39}
40
41void loop() {
42    // wait for a new client:
43    PhpocClient  client = server.available();
44    
45    if (client) {
46        String data  = client.readLine();
47      
48        if(data) {
49            int pos = data.indexOf(':');
50            int cmd = data.substring(0, pos).toInt();
51			
52            if(cmd  == CMD_AUTH) {
53                String reqPattern = data.substring(pos+1);
54
55                reqPattern.remove(reqPattern.indexOf(13));
56                reqPattern.remove(reqPattern.indexOf(10));
57                
58                if(pattern.equals(reqPattern)) {
59                    authenticated  = true;
60                    sendResponse(ACCEPTED, 3);
61					lastActiveTime  = millis();
62                }
63                else {
64                    //Serial.print(reqPattern);
65                    authenticated = false;
66                    sendResponse(UNAUTHORIZED,  3);
67                }
68            }
69            else
70            if(cmd  == CMD_CTRL) {
71                if(authenticated) {
72                    int  angle = data.substring(pos+1).toInt();
73                    
74					//angle  = map(angle, -90, 90, 0, 180);
75					angle = map(angle, 90, -90, 0, 180);
76					
77                    servo.write(angle);
78					lastActiveTime = millis();
79					
80					Serial.println(angle);
81                }
82                else {
83                    sendResponse(UNAUTHORIZED,  3);
84                }
85            }    
86        }
87    }
88	
89	if  (authenticated && ((millis() - lastActiveTime) > timeout)){
90		authenticated  = false;
91		sendResponse(UNAUTHORIZED, 3);
92	}
93}
94
95void sendResponse(char  *data, int len) {
96    server.write(data, len); 
97}

/* arduino web server - pattern unlock */

#include "SPI.h"
#include  "Phpoc.h"
#include <Servo.h>

#define CMD_AUTH    0
#define CMD_CTRL    1
#define ACCEPTED        "202"
#define UNAUTHORIZED    "401"

PhpocServer  server(80);
Servo servo;
String pattern;
bool authenticated;
unsigned  long timeout;
unsigned long lastActiveTime;

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

    Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
    //Phpoc.begin();

    server.beginWebSocket("web_pattern");

    Serial.print("WebSocket server address : ");
    Serial.println(Phpoc.localIP());  
    
    servo.attach(8);  // attaches the servo on pin 8 to the servo  object
    servo.write(90); 

    pattern = String("1,4,8,6,3");
    authenticated = false;
    timeout = 10000; // 10000 milllisecond
    lastActiveTime  = 0;
}

void loop() {
    // wait for a new client:
    PhpocClient  client = server.available();
    
    if (client) {
        String data  = client.readLine();
      
        if(data) {
            int pos = data.indexOf(':');
            int cmd = data.substring(0, pos).toInt();
			
            if(cmd  == CMD_AUTH) {
                String reqPattern = data.substring(pos+1);

                reqPattern.remove(reqPattern.indexOf(13));
                reqPattern.remove(reqPattern.indexOf(10));
                
                if(pattern.equals(reqPattern)) {
                    authenticated  = true;
                    sendResponse(ACCEPTED, 3);
					lastActiveTime  = millis();
                }
                else {
                    //Serial.print(reqPattern);
                    authenticated = false;
                    sendResponse(UNAUTHORIZED,  3);
                }
            }
            else
            if(cmd  == CMD_CTRL) {
                if(authenticated) {
                    int  angle = data.substring(pos+1).toInt();
                    
					//angle  = map(angle, -90, 90, 0, 180);
					angle = map(angle, 90, -90, 0, 180);
					
                    servo.write(angle);
					lastActiveTime = millis();
					
					Serial.println(angle);
                }
                else {
                    sendResponse(UNAUTHORIZED,  3);
                }
            }    
        }
    }
	
	if  (authenticated && ((millis() - lastActiveTime) > timeout)){
		authenticated  = false;
		sendResponse(UNAUTHORIZED, 3);
	}
}

void sendResponse(char  *data, int len) {
    server.write(data, len); 
}

Downloadable files

things_nuSqPThpdl.JPG

Comments

Only logged in users can leave comments

phpoc_man

0 Followers

•

0 Projects

Intro