You are here

Control Arduino Yun with HTML5 and jquery

In this article, we see how to develop two pages (html5 and jquery based) to take full control of arduino yun.

In fact, with HTML5 and jquery it’s possibile to develop page and javascript based services to achieve above goals.

Below the first page that take the following  features on Arduino yun:

  • Set the data direction of the digital pins
  • Set digital output values to High or Low
  • Read digital input values
  • Read analog input values

1

Each features is embedded in a single page with a specific html5 tag data-role=”page”. Below the code of the html page.

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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
<html>
<head>
    <title>Arduino Yun Trigger</title>
 
    <link rel="stylesheet" href="jquery.mobile-1.4.2.min.css" />
    <script src="jquery-1.9.1.min.js"></script>
    <script src="jquery.mobile-1.4.2.min.js"></script>
    <script src="localStore_v1.js"></script> 
 
 
 
    <STYLE type="text/css">
        .boxouter {
            position:relative;
            margin-bottom:16px;
            padding:10px;
            width:214px;
            background-color:#CAD6EB;
            border-radius:5px;
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
        }
 
        .colleft {
            position: absolute; 
            left: 25%;
            top: 60px;
        }
 
 
        .boxstate {
            position:absolute;	
            top:3px;
            width:110px;
            color:#ff6d08;
            margin-top:3px;
            margin-bottom:3px;
            text-align:center;
            padding:4px;
            margin-left:100px;
            background-color:#48b;
            border-radius:5px;
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
        }
 
 
 
 
        .all_load {
            width:200px;
            height:auto;
            top:50%;
            left:50%;
            padding:60px;
            position:absolute;
            margin-left:-160px; 
            margin-top:-60px;	
            text-align:center;
            background-color:#bbb;
            border-radius:5px;	
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
            filter: alpha(opacity=85);
            opacity:0.85;
            -webkit-opacity:0.85;
            -moz-opacity:0.85;
            z-index:999;
            visibility:hidden	
        }
 
    </STYLE>
 
 
 
    <script language="JavaScript" type="text/JavaScript"> 
 
        //Begin
        $(document).ready(function(e) {
 
        //var def_url = $('#ml_yunserver').val();
        var def_url =window.localStorage.getItem("devicehostname");
        //alert (def_url);
        //$.ajaxSetup({ cache: false }); 
        $.ajaxSetup({ cache: false , scriptCharset: "utf-8" , contentType: "application/json; charset=utf-8"});
        $('#smartembeddedyun').hide();
 
        var isAutoRefreshP4 = false;
        var timerP4;
 
        var isAutoRefreshP5 = false;
        var timerP5;
        populate_page2();
        initpage2();        
        function populate_page2()
        {
        $('#setdigital_io').empty();    
 
 
        for (var i=2;i<=13;i++)
        {
        var labStr = "D"+i.toString();
 
        $('#setdigital_io').append('<div id="radiogroup'+i+'" data-role="fieldcontain"><fieldset data-role="controlgroup" data-type="horizontal" data-mini="false"><legend>'+labStr+'</legend><input type="radio" name="radio-choice-d'+i+'" id="radio-choice-d'+i+'1" value="choice-'+i+'1" checked="checked"/><label for="radio-choice-d'+i+'1">Output</label><input type="radio" name="radio-choice-d'+i+'" id="radio-choice-d'+i+'2" value="choice-'+i+'2"/><label for="radio-choice-d'+i+'2">Input</label><input type="radio" name="radio-choice-d'+i+'" id="radio-choice-d'+i+'3" value="choice-'+i+'3"/><label for="radio-choice-d'+i+'3">Input (PU)</label></fieldset></div>'   );
        }
 
        $('#setdigital_io').trigger('create');  
 
        blankpage2();   
 
        }
        $('#callinitp2').click(function() {initpage2();});
 
        function initpage2()
        {
        $('#smartembeddedyun').html('...Loading');
        $('#smartembeddedyun').show();
 
        $.getJSON(def_url+"/arduino/in/",function(data){       
        //alert(data);
        var j=2;
        $.each(data.Datadir,            
        function (key,value)
        { 	
        //alert (key+""+value);
        if (value.datadir==0) {$('#radio-choice-d'+j+'1').prop("checked",true).checkboxradio( "refresh" );}else{$('#radio-choice-d'+j+'1').prop("checked",false).checkboxradio( "refresh" );}
        if (value.datadir==1) {$('#radio-choice-d'+j+'2').prop("checked",true).checkboxradio( "refresh" );}else{$('#radio-choice-d'+j+'2').prop("checked",false).checkboxradio( "refresh" );}
        if (value.datadir==2) {$('#radio-choice-d'+j+'3').prop("checked",true).checkboxradio( "refresh" );}else{$('#radio-choice-d'+j+'3').prop("checked",false).checkboxradio( "refresh" );}
        j++;
        });
        $('#smartembeddedyun').hide();
        }); 
        }
        function blankpage2()
        {
        for (var j=2;j<=13;j++)
        {
        $('#radio-choice-d'+j+'1').prop("checked",false).checkboxradio( "refresh" );
        $('#radio-choice-d'+j+'2').prop("checked",false).checkboxradio( "refresh" );
        $('#radio-choice-d'+j+'3').prop("checked",false).checkboxradio( "refresh" );
        }
        }
 
        $('#save_io').click(function() {
 
        var urlStr=def_url+"/arduino"+doSaveStateDir();
        //alert(urlStr);
 
        $('#smartembeddedyun').html('...Saving');
        $('#smartembeddedyun').show();
 
        $.getJSON(urlStr,function(data){
        //alert(data);
        $('#smartembeddedyun').hide();
        });
        });
 
 
 
        function doSaveStateDir(){
 
        var RVal="/io/";
        for (var j=2;j<=13;j++)
        {
        RVal+=getRadioStateDDir('#radio-choice-d'+j);
        }
        RVal+="/";
 
        return RVal;
        }           
        function getRadioStateDDir(RGSelection)
        {
        var k=0;
        k=1*Number($(RGSelection+'1').prop("checked"));
        k+=2*Number($(RGSelection+'2').prop("checked"));
        k+=3*Number($(RGSelection+'3').prop("checked"));
        return (k-1).toString();    
        }       
        $('#callinitp3').click(function() {initpage3();});
        function initpage3()
        {
        $('#smartembeddedyun').html('...Loading');
        $('#smartembeddedyun').show();
        $.getJSON(def_url+"/arduino/in/",function(data){
        //alert(data);
        $('#setdigital_vals').empty();  
        var j=2;
        $.each(data.Digital,
        function (key,value)    
        {
        //alert (key+""+value);
        var labStr = "D"+j.toString();
 
        if (value.dataval==0 || value.dataval==1)   
        {
        $('#setdigital_vals').append('<div id="radiogroup'+j+'" data-role="fieldcontain"><fieldset data-role="controlgroup" data-type="horizontal" data-mini="false"><legend>'+labStr+'</legend><input type="radio" name="radio-val-d'+j+'" id="radio-val-d'+j+'1" value="val-'+j+'1" checked="checked"/><label for="radio-val-d'+j+'1">High</label><input type="radio" name="radio-val-d'+j+'" id="radio-val-d'+j+'2" value="val-'+j+'2"/><label for="radio-val-d'+j+'2">Low</label></fieldset></div>' );
 
        $('#setdigital_vals').trigger('create');
 
        if (value.dataval==1) {$('#radio-val-d'+j+'1').prop("checked",true).checkboxradio( "refresh" );}else{$('#radio-val-d'+j+'1').prop("checked",false).checkboxradio( "refresh" );}
        if (value.dataval==0) {$('#radio-val-d'+j+'2').prop("checked",true).checkboxradio( "refresh" );}else{$('#radio-val-d'+j+'2').prop("checked",false).checkboxradio( "refresh" );}
 
        }
 
        j++;
        });
 
        $('#smartembeddedyun').hide();
 
        }); 
        $('#setdigital_vals').trigger('create');    
 
 
 
        }
        $('#change_io').click(function() {
 
        var urlStr=def_url+"/arduino"+doSaveStateOut();
 
        $('#smartembeddedyun').html('...Saving');
        $('#smartembeddedyun').show();
        $.getJSON(urlStr,function(data){
        //alert(data);
        $('#smartembeddedyun').hide();
        });
        });
 
 
 
        function doSaveStateOut(){
 
        var RVal="/do/";
 
        for (var j=2;j<=13;j++)
        {
        if ($('#radio-val-d'+j+'1').length>0)
        {
        RVal+=getRadioStateDVal('#radio-val-d'+j);
        }
        else
        {
        RVal+="-";
        }
        }   
        RVal+="/";
 
        return RVal;
        }
 
 
 
        function getRadioStateDVal(RGSelection)
        {
        var k=0;
        k=1*Number($(RGSelection+'2').prop("checked"));
        k+=2*Number($(RGSelection+'1').prop("checked"));
        return (k-1).toString();    
        }
        $('#callinitp4').click(function() {initpage4(0);});
 
        function initpage4(option)
        {
        $('#smartembeddedyun').html('...Loading');
        if (option==0)  $('#smartembeddedyun').show();
 
 
        $.getJSON(def_url+"/arduino/in/",function(data){
        $('#readdigital_vals').empty(); 
        //alert(data);
        var j=2;
        $.each(data.Digital,
        function (key,value)    
        {
        //alert (key+""+value);
        var labStr = "D"+j.toString();
 
        if (value.dataval==10 || value.dataval==11) 
        {
        if (value.dataval==10)  
{$('#readdigital_vals').append(
'<div class="boxouter">'+labStr+':<div class="boxstate">Low</div></div>');}
        else                    
{$('#readdigital_vals').append(
'<div class="boxouter">'+labStr+':<div class="boxstate">High</div></div>');}
 
        }
 
        j++;
        });
 
        $('#readdigital_vals').append('<br><br>');
        $('#smartembeddedyun').hide();
        }); 
 
        }
 
 
        $('#refresh_dinp4').click(function() {initpage4(0); });
 
        $('#backfromp4').click(function() {
        if (isAutoRefreshP4)
        {
        isAutoRefreshP4=false;
        $('#autorefresh_dinp4').html("Auto-refresh is OFF");
        $('#refresh_dinp4').show();
        clearInterval(timerP4);
        }
        });
 
        $('#autorefresh_dinp4').click(function() {
        if (!isAutoRefreshP4)
        {
        isAutoRefreshP4=true;
        $('#autorefresh_dinp4').html("Auto-refresh is ON");
        $('#refresh_dinp4').hide();
        timerP4=setInterval(function(){
        initpage4(1);
        },8000);
        }
        else
        {
        isAutoRefreshP4=false;
        $('#autorefresh_dinp4').html("Auto-refresh is OFF");
        $('#refresh_dinp4').show();
        clearInterval(timerP4);
        }
        });
 
        $('#callinitp5').click(function() {initpage5(0);});
 
 
        function initpage5(option)
        {
 
        $('#smartembeddedyun').html('...Loading');
        if (option==0)  $('#smartembeddedyun').show();
 
 
        $.getJSON(def_url+"/arduino/in/",function(data){
        //alert(data);
        $('#readanalogue_vals').empty();    
        var j=0;
        $.each(data.Analog,
        function (key,value)   
        {
        //alert (key+""+value);
        var labStr = "A"+j.toString();
        {$('#readanalogue_vals').append('<div class="boxouter">'+labStr+':<div class="boxstate">'+value.dataval+'</div></div>');}
 
        j++;
        });
        $('#readanalogue_vals').append('<br><br>');
        $('#smartembeddedyun').hide();
        }); 
 
        }
 
 
        $('#refresh_dinp5').click(function() {initpage5(0); });
 
 
 
        $('#backfromp5').click(function() {
        if (isAutoRefreshP5)
        {
        isAutoRefreshP5=false;
        $('#autorefresh_dinp5').html("Auto-refresh is OFF");
        $('#refresh_dinp5').show();
        clearInterval(timerP5);
        }
        });
 
 
        $('#autorefresh_dinp5').click(function() {
        if (!isAutoRefreshP5)
        {
        isAutoRefreshP5=true;
        $('#autorefresh_dinp5').html("Auto-refresh is ON");
        $('#refresh_dinp5').hide();
        timerP5=setInterval(function(){
        initpage5(1);
        },8000);
        }
        else
        {
        isAutoRefreshP5=false;
        $('#autorefresh_dinp5').html("Auto-refresh is OFF");
        $('#refresh_dinp5').show();
        clearInterval(timerP5);
        }
        });
 
 
        });
 
 
 
        //End
 
 
 
    </script>
 
    </head>
    <body oncontextmenu="return false;">
 
 
    <div class="all_load" id="smartembeddedyun" >
        ...Loading/Saving
    </div>
 
    <div data-role="page" id="page">
        <div data-role="header">
            <h1> Arduino Yun DashBoard Controller</h1>
        </div>
 
        <div data-role="content">
            This is your dashboard of Yun controller.<p>
            To work, you must first upload the sketch code below.<p>
            Then you choose following options: 
            <ul>
                <li>1-Set the data direction of the digital pins</li>
                <li>2-Set digital output values to High or Low</li>
                <li>3-Read digital input values</li>
                <li>4-Read analog input values</li>
            </ul>
        </div>
 
        <div data-role="content">
            <ul data-role="listview" data-inset="true">
                <li><a href="#page2" id="callinitp2">Digital pin in/out settings</a></li>
                <li><a href="#page3" id="callinitp3">Set digital pin output values</a></li>
                <li><a href="#page4" id="callinitp4">Read digital pin input values</a></li>
                <li><a href="#page5" id="callinitp5">Read analogue pin input values</a></li>
            </ul>		
        </div>
 
        <div data-role="content">
            <br>
 
            Data is real time compatibly to small amount of time to update the data due to 
transfer and set values on board.
            Upload following sketch on your board to work with dashboard.
 
         <br>
         <a href="sketch_dashboard.ino.txt" data-role="button" data-inline="true" target="_blank">
Get Sketch Code to Upload on Board </a>
 
        </div>
 
        <div data-role="footer" data-position="fixed">
            <h4>Arduino Yun DashBoard</h4>
        </div>
    </div>
 
    <div data-role="page" id="page2">
        <div data-role="header"  data-position="fixed">
            <a href="#page" data-icon="delete" data-rel="back">Cancel</a>
            <h1>Digital pin settings</h1>
            <a href="#page" id="save_io" data-icon="check">Save</a>
        </div>
        <div data-role="content">	
            <div id="setdigital_io">
            </div>	
 
        </div>
 
    </div>
 
    <div data-role="page" id="page3">
        <div data-role="header" data-position="fixed">
            <a href="#page" data-icon="delete" data-rel="back">Back</a>
            <h1>Set digital pin outputs</h1>
            <a href="#" id="change_io" data-icon="check">Update</a>
        </div>
        <div data-role="content">	
            <div id="setdigital_vals">
            </div>		
 
 
        </div>
 
 
 
    </div>
 
    <div data-role="page" id="page4">
        <div data-role="header" data-position="fixed">
            <a href="#page" id="backfromp4" data-icon="back" data-rel="back">Back</a>
            <h1>Digital input pin values</h1>
            <a href='#' id="refresh_dinp4" data-icon="refresh">Refresh</a>
        </div>
        <div data-role="content">	
 
            <div class="colleft" id="readdigital_vals">
                <div class="boxouter">D2:<div class="boxstate">High</div></div>
                <div class="boxouter">D3:<div class="boxstate">Low</div></div>
                <div class="boxouter">D4:<div class="boxstate">High</div></div>
                <div class="boxouter">D5:<div class="boxstate">Low</div></div>
                <div class="boxouter">D6:<div class="boxstate">High</div></div>
                <div class="boxouter">D7:<div class="boxstate">Low</div></div>
                <div class="boxouter">D8:<div class="boxstate">High</div></div>
                <div class="boxouter">D9:<div class="boxstate">Low</div></div>
                <div class="boxouter">D10:<div class="boxstate">High</div></div>
                <div class="boxouter">D11:<div class="boxstate">Low</div></div>
                <div class="boxouter">D12:<div class="boxstate">High</div></div>
                <div class="boxouter">D13:<div class="boxstate">Low</div></div>
 
            </div>
 
 
        </div>
        <div data-role="footer" data-position="fixed" 
style="margin:0 auto; margin-left:auto; margin-right:auto; align:center;text-align:center;">
            <a href='#' id="autorefresh_dinp4" data-icon="gear" >Auto-refresh is OFF</a>
        </div>
 
 
 
    </div>
 
 
    <div data-role="page" id="page5">
        <div data-role="header" data-position="fixed">
            <a href="#page" id="backfromp5" data-icon="back" data-rel="back">Back</a>
            <h1>Analogue pin input values</h1>
            <a href='#' id="refresh_dinp5" data-icon="refresh">Refresh</a>
        </div>
        <div data-role="content">	
 
            <div class="colleft" id="readanalogue_vals">
                <div class="boxouter">A0:<div class="boxstate">1024</div></div>
                <div class="boxouter">A1:<div class="boxstate">835</div></div>
                <div class="boxouter">A2:<div class="boxstate">546</div></div>
                <div class="boxouter">A3:<div class="boxstate">621</div></div>
                <div class="boxouter">A4:<div class="boxstate">101</div></div>
                <div class="boxouter">A5:<div class="boxstate">23</div></div>
 
            </div>
 
 
        </div>
        <div data-role="footer" data-position="fixed" 
style="margin:0 auto; margin-left:auto; margin-right:auto; align:center;text-align:center;">
            <a href='#' id="autorefresh_dinp5" data-icon="gear" >Auto-refresh is OFF</a>
        </div>
    </div>
</div>
 
</body>
</html>

 

 

Below the sketch to upload and to obtain the correct work of all features:

 

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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
#include <Bridge.h>;
#include <YunServer.h>
#include <YunClient.h>
 
 
YunServer server;
int i;
byte pinDirs[]={1,1,1,1,1,1,1,1,1,1,1,0};
byte pinVals[]={0,0,0,0,0,0,0,0,0,0,0,0};
int  anVals[]={0,0,0,0,0,0};
char* content_type="Content-type: application/json; charset=utf-8";
char* allow_type="Access-Control-Allow-Origin: *";
 
void setup() {
 
 
	pinMode(13,OUTPUT);
	digitalWrite(13, LOW);
	Bridge.begin();
	digitalWrite(13, HIGH);
	server.listenOnLocalhost();
	server.begin();
	setPinDirs();
	setPinVals();
}
 
 
 
void loop() {
 
	YunClient client = server.accept();
 
 
	if (client)
	{
 
		String command;
		command = client.readStringUntil('/');
		command.trim();        
 
                Serial.println("command:"+command);
 
		if (command=="io")
		{
 
			command=client.readStringUntil('/');
			command.trim();
 
			for (i=0;i<command.length();i++)
			{
				pinDirs[i]=byte(command.charAt(i)-48);
			}
 
			client.println("Status: 200");
			client.println(content_type);
                        client.println(allow_type);
			client.println();
			client.print("{\"ret\":\"ok\"}");
			setPinDirs();
		}
 
		if (command=="do")
		{
 
			command=client.readStringUntil('/');
			command.trim();
 
			for (i=0;i<command.length();i++)
			{
				if (command.charAt(i)!='-')
				{
					pinVals[i]=byte(command.charAt(i)-48);
				}
				else
				{
					pinVals[i]=255;
				}
			}
 
 
			client.println("Status: 200");
			client.println(content_type);
                        client.println(allow_type);
			client.println();
			client.print("{\"ret\":\"ok\"}");
			setPinVals();
		}    
 
 
		if (command=="in")
		{
 
			setPinVals();
			client.println("Status: 200");
			client.println(content_type);
                        client.println(allow_type);
			client.println();
 
			client.print("{\"Datadir\" : [");
			for (i=0;i<12;i++)
			{
				client.print("{\"datadir\" : "+String(pinDirs[i])+"}");
                                Serial.println(pinDirs[i]);
				if (i<11) client.print(",");
			}
 
			client.print("],\"Digital\" : [");
			for (i=0;i<12;i++)
			{
				if(pinDirs[i]==0)
				{
					client.print("{\"dataval\" : "+String(pinVals[i])+"}");
				}
				else
				{
					client.print("{\"dataval\" : "+String(10+pinVals[i])+"}");
				}
				if (i<11) client.print(",");
                                Serial.println(pinVals[i]);
			}  
 
			client.print("],\"Analog\" : [");
			for (i=0;i<6;i++)
			{
				client.print("{\"dataval\" : "+String(anVals[i])+"}");
				if (i<5) client.print(",");
                                Serial.println(anVals[i]);
			}
			client.print("]}");
		}    
 
 
 
		client.stop();
	}
 
	delay(50); 
}
 
 
void setPinDirs()
{
	for(i=0;i<12;i++)
	{
		if (pinDirs[i]==0)  pinMode(2+i, OUTPUT);
		if (pinDirs[i]==1)  pinMode(2+i, INPUT);
		if (pinDirs[i]==2)  pinMode(2+i, INPUT_PULLUP);
	}  
}
 
 
void setPinVals()
{
	for(i=0;i<12;i++)
	{
		if (pinDirs[i]==0 && pinVals[i]==0) digitalWrite(2+i,LOW);
		if (pinDirs[i]==0 && pinVals[i]==1) digitalWrite(2+i,HIGH);    
		if (pinDirs[i]==1 || pinDirs[i]==2)
		{
			if (digitalRead(2+i)==LOW)  pinVals[i]=0;
			if (digitalRead(2+i)==HIGH)  pinVals[i]=1;
		}
	}  
 
 
	for (i=0;i<6;i++)
	{
		anVals[i]=analogRead(i);  
		delay(20);	
		anVals[i]=analogRead(i);  
	}
}

 

The second page instead, is a different dashboard that allows to send the contents of an e-mail when the condition of a pin is verified  (an arduino “yun trigger”). To send an email we assume that the data are sended with an http post to a remote service (for example a servlet) that decode the post parameter and put in queues the mails into a mail server.

 

1

 

 

Below the code of the html page.

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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
<html>
<head>
    <title>Arduino Yun Trigger</title>
 
    <link rel="stylesheet" href="jquery.mobile-1.4.2.min.css" />
    <script src="jquery-1.9.1.min.js"></script>
    <script src="jquery.mobile-1.4.2.min.js"></script>
    <script src="jquery.validate.js"></script>
    <script src="localStore_v1.js"></script> 
 
 
    <STYLE type="text/css">
 
        .boxouter {
            position:relative;
            margin-bottom:16px;
            padding:10px;
            width:214px;
            background-color:#CAD6EB;
            border-radius:5px;                                                                            
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
        }
 
        .colleft {
            position: absolute; 
            left: 25%;
            top: 60px;
        }
        label.error {
            display: block;
            color: red;
            font-style: italic;
            font-weight: normal;
        }
 
        input.error {
            border: 2px solid red;
        }
        td.field input.error, td.field select.error, tr.errorRow td.field input,tr.errorRow td.field select {
            border: 2px solid red;
            background-color: #FFFFD5;
            margin: 0px;
            color: red;
        }
        tr td.field div.formError {
            display: none;
            color: #FF0000;
        }
 
        tr.errorRow td.field div.formError {
            display: block;
            font-weight: normal;
        }
 
        div.error {
            color: red;
        }
 
        div.error a {
            color: #336699;
            font-size: 12px;
            text-decoration: underline
        }
        .boxstate {
            position:absolute;	
            top:3px;
            width:110px;
            color:#ff6d08;
            margin-top:3px;
            margin-bottom:3px;
            text-align:center;
            padding:4px;
            margin-left:100px;
            background-color:#48b;
            border-radius:5px;
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
        }
 
 
 
 
        .all_load {
            width:200px;
            height:auto;
            top:50%;
            left:50%;
            padding:60px;
            position:absolute;
            margin-left:-160px; 
            margin-top:-60px;	
            text-align:center;
            background-color:#bbb;
            border-radius:5px;	
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
            filter: alpha(opacity=85);
            opacity:0.85;
            -webkit-opacity:0.85;
            -moz-opacity:0.85;
            z-index:999;
            visibility:hidden	
        }
 
    </STYLE>
 
 
    <script language="JavaScript" type="text/JavaScript"> 
 
        $(document).ready(function(e) { 
 
 
        $.urlParam = function(name){
        	var results = new RegExp('[\\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
        	return results[1] || 0;
        }
 
 
        var def_url =window.localStorage.getItem("devicehostname");
 
        $('#userName').val(window.localStorage.getItem("userName"));
 
        $('#psw').val(window.localStorage.getItem("psw"));
 
 
        //alert( $('#psw').val());
        //alert( $('#userName').val());
 
 
 
        $("div.error span").html('Current device '+def_url);
        $("div.error").show();
 
        var mail_url = $('#ml_mailAddressAction').val();
        $("#valueRead").prop('disabled', true);
        $.ajaxSetup({ cache: false , scriptCharset: "utf-8"});
 
        $('#smartembeddedyun').hide();
 
        var isAutoRefreshP5 = false;
        var timerP5;      
 
        $('#refreshtrigger').click(function() {
        if (!isAutoRefreshP5)
        {
        isAutoRefreshP5=true;
        $('#refreshtrigger').html("Trigger is ON");
 
        timerP5=setInterval(function(){            
 
        var validator = $("#yunform").validate({
 
        invalidHandler: function(e, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
        var message = errors == 1
        ? 'You missed 1 field. It has been highlighted below'
        : 'You missed ' + errors + ' fields.  They have been highlighted below';
        $("div.error span").html(message);
        $("div.error").show();
        } else {
        $("div.error").hide();
        }
        },
        onkeyup: false,
        submitHandler: function() {
        $("div.error").hide();
 
        }
 
        });
 
 
 
        if (validator.form())  triggeryun(1);
 
        },8500);
        }
        else
        {
        isAutoRefreshP5=false;
        $('#refreshtrigger').html("Trigger is OFF");            
        clearInterval(timerP5);
        }
        });
 
 
        var selValCond="";    
 
        $( "#digitalOrAnalogicalcondition" ).change(function() {
 
        selValCond = "";
 
        $( "select option:selected" ).each(function() {
        selValCond += $( this ).val();
 
        });
 
 
        if (selValCond =='high' || selValCond=='low')
        $("#triggervalue").prop('disabled', true)
        else $("#triggervalue").prop('disabled', false);
 
        });
 
        $('input:radio[name=radio-choice-da]').click(
        function(){
 
        keyStr=$( this ).val().substring($( this ).val().lastIndexOf("-")+1);
        if (keyStr.charAt(0)=='d')
        {
        $("#triggervalue").prop('disabled', true);
        $("#digitalOrAnalogicalcondition option[value='E']").prop("disabled",true); 
        $("#digitalOrAnalogicalcondition option[value='NE']").prop("disabled",true); 
        $("#digitalOrAnalogicalcondition option[value='G']").prop("disabled",true); 
        $("#digitalOrAnalogicalcondition option[value='GE']").prop("disabled",true); 
        $("#digitalOrAnalogicalcondition option[value='L']").prop("disabled",true); 
        $("#digitalOrAnalogicalcondition option[value='LE']").prop("disabled",true); 
 
        }
        else 
        {
        $("#triggervalue").prop('disabled', false);
        $("#digitalOrAnalogicalcondition option[value='E']").prop("disabled",false); 
        $("#digitalOrAnalogicalcondition option[value='NE']").prop("disabled",false); 
        $("#digitalOrAnalogicalcondition option[value='G']").prop("disabled",false); 
        $("#digitalOrAnalogicalcondition option[value='GE']").prop("disabled",false); 
        $("#digitalOrAnalogicalcondition option[value='L']").prop("disabled",false); 
        $("#digitalOrAnalogicalcondition option[value='LE']").prop("disabled",false); 
        }
 
        }
        );  
 
        function triggeryun(option)
        {           
 
 
        var anaDigSel;
 
        var keyStr;
        var dA='';
 
        anaDigSel=$('input:radio[name=radio-choice-da]:checked').val();
 
        var n=anaDigSel.lastIndexOf("-");
        keyStr=anaDigSel.substring(n+1);
        if (keyStr.charAt(0)=='d') dA='digital'
        else if (keyStr.charAt(0)=='a') dA='analog';
        var pin2read=keyStr.substring(1);
 
        var url_build=def_url+"/arduino/"+dA+"/"+pin2read;
 
        $.getJSON(url_build, function(data) {       
 
        $("#valueRead").val(data.ret+'');
 
        });   
 
 
 
        var valueRead=$("#valueRead").val();     
 
 
 
        var valCheck=$('#triggervalue').val();        
 
        var verifyCond=false;         
 
        if (valueRead != null && valueRead !='')
        {
        switch (selValCond) 
        {
        case ('low'):                      
        //strCond+='==0);';
        verifyCond =( valueRead == 0)?true:false;
        break;
        case ('high'):
        //strCond+='==1);';
        verifyCond =( valueRead == 1)?true:false;
        break;
        case ('E'):
        //strCond+='=='+valCheck+');';
        verifyCond = (valueRead-valCheck)==0?true:false;
        break;
        case ('NE'):
        //strCond+='!=='+valCheck+');';
        verifyCond = ( valueRead != valCheck)?true:false;
        break;
        case ('L'):
        //strCond+='<'+valCheck+');';
        verifyCond=(valueRead-valCheck)<0?true:false;
 
        //alert("1*"+verifyCond);  
        break;
        case ('G'):
        //strCond+='>'+valCheck+');';
        verifyCond = (valueRead-valCheck)>0?true:false;
        break;
        case ('LE'):
        //strCond+='<='+valCheck+');';
        verifyCond = (valueRead-valCheck)<=0?true:false;
        break;
        case ('GE'):
        //strCond+='>='+valCheck+');';
        verifyCond = (valueRead-valCheck)>=0?true:false;
        break;                                            
        default:
        //strCond='verifyCond =false;';
        verifyCond =false;
        }
        }
 
 
 
 
        if (verifyCond)
        {
 
 
        //BEGIN
 
        $.post(mail_url, $("#yunform" ).serialize(), {
	    ajax: "true"}).always(function(data){
	     var currentTime = new Date();
             $( "#feedbackmsg" ).empty().append( 'Condition reached: Mail queued on '+ currentTime);
	});
 
        //END
 
 
        }
        // End Verify to send Mail
 
        }
 
        });
 
 
 
    </script>
 
   </head>
   <body oncontextmenu="return false;">
 
 
    <input type="hidden" value="*** URL OF POST SERVICE TO SEND MAILS ***" name="ml_mailAddressAction" id="ml_mailAddressAction"/>
 
    <div class="all_load" id="smartembeddedyun" >
        ...Loading/Saving
    </div>
 
    <div data-role="page" id="page">
        <div data-role="header">
            <h1> Arduino Yun DashBoard Trigger</h1>
        </div>
 
        <div data-role="content">
            This is your dashboard of Yun Trigger.<p>
                Dashboard allows to send the contents of an e-mail when the condition of a pin is verified. <p>
                To work, you must first upload the sketch code below.<p>
                Steps to complete:
            <ul>
                <li>Set pin number to trigger </li>
                <li>Set pin value to trigger </li>
                <li>Set condition to trigger ('if in value is ... then ...')</li>
                <li>Set email address to send trigger info</li>
                <li>Set email content to send</li>
            </ul>
        </div>
        <div data-role="content">	
 
            <form id="yunform" name="yunform">
 
            	 <input type="hidden" name="userName" id="userName" />
 
            	 <input type="hidden" name="psw" id="psw" />
 
 
                <div class="error" style="display:none;" data-role="fieldcontain" id="error">    
 
                    <span></span>.<br clear="all"/>
 
                </div>
 
                <div id="radiogroupda" data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                        <legend>Select Pin Number</legend>
                        <label for="radio-choice-d2">D2</label><input type="radio" name="radio-choice-da" id="radio-choice-d2" value="choice-d2" required/>
                        <label for="radio-choice-d3">D3</label><input type="radio" name="radio-choice-da" id="radio-choice-d3" value="choice-d3" required/>
                        <label for="radio-choice-d4">D4</label><input type="radio" name="radio-choice-da" id="radio-choice-d4" value="choice-d4" required/>
                        <label for="radio-choice-d5">D5</label><input type="radio" name="radio-choice-da" id="radio-choice-d5" value="choice-d5" required/>
                        <label for="radio-choice-d6">D6</label><input type="radio" name="radio-choice-da" id="radio-choice-d6" value="choice-d6" required/>
                        <label for="radio-choice-d7">D7</label><input type="radio" name="radio-choice-da" id="radio-choice-d7" value="choice-d7" required/>
                        <label for="radio-choice-d8">D8</label><input type="radio" name="radio-choice-da" id="radio-choice-d8" value="choice-d8" required/>
                        <label for="radio-choice-d9">D9</label><input type="radio" name="radio-choice-da" id="radio-choice-d9" value="choice-d9" required/>
                        <label for="radio-choice-d10">D10</label><input type="radio" name="radio-choice-da" id="radio-choice-d10" value="choice-d10" required/>
                        <label for="radio-choice-d11">D11</label><input type="radio" name="radio-choice-da" id="radio-choice-d11" value="choice-d11" required/>
                        <label for="radio-choice-d12">D12</label><input type="radio" name="radio-choice-da" id="radio-choice-d12" value="choice-d12" required/>
                        <label for="radio-choice-d13">D13</label><input type="radio" name="radio-choice-da" id="radio-choice-d13" value="choice-d13" required/>             	
 
                        <label for="radio-choice-a0">A0</label><input type="radio" name="radio-choice-da" id="radio-choice-a0" value="choice-a0" required/>
                        <label for="radio-choice-a1">A1</label><input type="radio" name="radio-choice-da" id="radio-choice-a1" value="choice-a1" required/>
                        <label for="radio-choice-a2">A2</label><input type="radio" name="radio-choice-da" id="radio-choice-a2" value="choice-a2" required/>
                        <label for="radio-choice-a3">A3</label><input type="radio" name="radio-choice-da" id="radio-choice-a3" value="choice-a3" required/>
                        <label for="radio-choice-a4">A4</label><input type="radio" name="radio-choice-da" id="radio-choice-a4" value="choice-a4" required/>
                        <label for="radio-choice-a5">A5</label><input type="radio" name="radio-choice-da" id="radio-choice-a5" value="choice-a5" required/>
 
 
                    </fieldset>
 
                    <div id="valuegroupda" data-role="fieldcontain">
 
                        <fieldset data-role="controlgroup" data-type="vertical" data-mini="true">
                            <legend>Value to Trigger (only analogical)</legend>
                            <input type="number" name="triggervalue" id="triggervalue" value=""  required/>
                        </fieldset>
 
                    </div>
 
                    <div id="conditiongroupda" data-role="fieldcontain">
                        <fieldset data-role="controlgroup">
 
                            <legend>Trigger Condition</legend>
 
                            <label for="digitalOrAnalogicalcondition">Digital or Analogical Condition</label>
                            <select name="digitalOrAnalogicalcondition" id="digitalOrAnalogicalcondition"  required>
                                <option value="">Digital or Analogical Condition</option>
                                <option value="high">Digital Condition: is high</option>
                                <option value="low">Digital Condition: is low</option>
                                <option value="">Analogical Condition</option>
                                <option value="E">Analogical Condition: Equal (=)</option>
                                <option value="NE">Analogical Condition: Not Equal (&lt; &gt;)</option>
                                <option value="L">Analogical Condition: Less (&lt;)</option>
                                <option value="G">Analogical Condition: Greater (&gt;) </option>
                                <option value="LE">Analogical Condition: Less Equal (&lt;=)</option>
                                <option value="GE">Analogical Condition: Greater Equal (&gt;=) </option>
                            </select>
 
                        </fieldset>
                    </div>
                    <div id="emailtoda" data-role="fieldcontain">
 
                        <fieldset data-role="controlgroup" data-type="vertical" data-mini="true">
                            <legend>Email to</legend>
                            <input type="email" name="emailto" id="emailto" value="" size="10" required/>
                        </fieldset>
 
                    </div>
                    <div id="subjecttoda" data-role="fieldcontain">
 
                        <fieldset data-role="controlgroup" data-type="vertical" data-mini="true">
                            <legend>Subject</legend>
                            <input type="text" name="subjectto" id="subjectto" value="" required/>
                        </fieldset>
 
                    </div>
                    <div id="emailbodyda" data-role="fieldcontain">
 
                        <label for="emailbody">Email Body</label>
                        <textarea name="emailbody" id="emailbody"  required></textarea>
                    </div>
                    <div id="valueReadda" data-role="fieldcontain">           
                        <input type="text" name="valueRead" id="valueRead" value="" disabled placeholder="Value Read" class="ui-overlay-shadow"/>
                    </div>
 
 
                </div>
 
            </form>
 
        </div>	
 
        <div id="feedbackmsg" data-role="content" style="text-align:center">           
            No mail sended.
        </div>
 
        <div data-role="content">   
            <br>
            Data is real time compatibly to small amount of time to update the data due to transfer and set values on board.
        </div>
 
        <div data-role="content" style="text-align:center"> 
 
         <br>
         <a href="sketch_trigger.ino.txt" data-role="button" data-inline="true" target="_blank">Get Sketch Code to Upload on Board </a>
 
 
         </div>
        <div data-role="footer" data-position="fixed" style="text-align:center">
            <a href='#' id="refreshtrigger" data-icon="gear" >Trigger is OFF</a>
            <h4>Arduino Yun DashBoard Trigger </h4>
        </div>
    </div>
 
 
 
</div>
</body>
</html>

Below the sketch to upload and to obtain the correct work of the trigger:

 

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
#include <Bridge.h>
#include <YunServer.h>
#include <YunClient.h>
 
YunServer server;
char* content_type="Content-type: application/json; charset=utf-8";
char* allow_type="Access-Control-Allow-Origin: *";
String key="ret";
int pin, value;
 
 
void setup() {
  Serial.begin(9600);
  //pinMode(13,OUTPUT);
  //digitalWrite(13, LOW);
  Bridge.begin();
  //digitalWrite(13, HIGH);
 
  server.listenOnLocalhost();
  server.begin();
}
 
void loop() {
  YunClient client = server.accept();
 
  if (client) {
    process(client);
    client.stop();
  }
 
  delay(50); 
}
 
void process(YunClient client) {
  String command = client.readStringUntil('/');
 
  if (command == "digital") {
   pin = client.parseInt();
   value = digitalRead(pin);
   doResponse(client);
  }
  if (command == "analog") {
   pin = client.parseInt();
   value = analogRead(pin);
   doResponse(client);
  }
 
}
 
void doResponse(YunClient client) {  
 
  client.println("Status: 200");
  client.println(content_type);
  client.println(allow_type);
  client.println();
  client.print("{\""+key+"\":\""+value+"\"}");
 
 
}
lombamarc
I have over ten years experience in project management and software architect in complex and innovative projects for multinational ICT. I have a electronic engineer extraction with automatic specialization. For years I deal with innovation also as an active contributor to several open hardware community as Rfduino, Arduino Yun, etc ... I think that in every company there is a need to co-create ideas and innovation from every person with tools and working groups motivated and sharing and dissemination of culture at all levels. Technology and research are not enough, if there is no interaction and sharing there can be no innovation.

Leave a Reply

Top