Skip to content

Commit 5cd1220

Browse files
oxxostudiooxxostudio
committed
add dh tutorial 2
1 parent 2c07157 commit 5cd1220

10 files changed

Lines changed: 397 additions & 5 deletions

File tree

‎blocks/msg/en.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,3 +202,16 @@ Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL_4 = "Hard";
202202
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL_3 = "Normal";
203203
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL_2 = "Easy";
204204
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL_1 = "Very easy";
205+
206+
Blockly.Msg.WEBDUINO_DHT_SHOW = "Show";
207+
Blockly.Msg.WEBDUINO_DHT_SHOW_IS = "=";
208+
Blockly.Msg.WEBDUINO_DHT_SHOW_T = "temperature( C )";
209+
Blockly.Msg.WEBDUINO_DHT_SHOW_H = "humidity ( % )";
210+
Blockly.Msg.WEBDUINO_DHT_ADD_AREACHART = "Add Area Chart";
211+
Blockly.Msg.WEBDUINO_DHT_ADD_TCOLOR = "temperature color:";
212+
Blockly.Msg.WEBDUINO_DHT_ADD_HCOLOR = "humidity color:";
213+
Blockly.Msg.WEBDUINO_DHT_ADD_GUAGE = "Add Guage";
214+
Blockly.Msg.WEBDUINO_DHT_USE = "Use";
215+
Blockly.Msg.WEBDUINO_DHT_DRAW = "draw";
216+
Blockly.Msg.WEBDUINO_DHT_DRAW_T = "temperature:";
217+
Blockly.Msg.WEBDUINO_DHT_DRAW_H = "humidity:";

‎blocks/msg/zh-hant.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,3 +201,16 @@ Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL_4 = "小威";
201201
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL_3 = "普通";
202202
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL_2 = "小弱";
203203
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL_1 = "超弱";
204+
205+
Blockly.Msg.WEBDUINO_DHT_SHOW = "顯示";
206+
Blockly.Msg.WEBDUINO_DHT_SHOW_IS = "為";
207+
Blockly.Msg.WEBDUINO_DHT_SHOW_T = "溫度 (攝氏)";
208+
Blockly.Msg.WEBDUINO_DHT_SHOW_H = "濕度 (%)";
209+
Blockly.Msg.WEBDUINO_DHT_ADD_AREACHART = "加入「區域折線圖」模組：";
210+
Blockly.Msg.WEBDUINO_DHT_ADD_TCOLOR = "溫度顏色：";
211+
Blockly.Msg.WEBDUINO_DHT_ADD_HCOLOR = "濕度顏色：";
212+
Blockly.Msg.WEBDUINO_DHT_ADD_GUAGE = "加入「指針」模組：";
213+
Blockly.Msg.WEBDUINO_DHT_USE = "使用";
214+
Blockly.Msg.WEBDUINO_DHT_DRAW = "開始繪製";
215+
Blockly.Msg.WEBDUINO_DHT_DRAW_T = "溫度：";
216+
Blockly.Msg.WEBDUINO_DHT_DRAW_H = "濕度：";

‎blocks/tutorials.js‎

Lines changed: 56 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -553,9 +553,62 @@ o888bood8P' o888o o888o o888o
553553
Blockly.Blocks['tutorial_dht_show'] = {
554554
init: function() {
555555
this.appendValueInput("show")
556-
.appendField("顯示")
557-
.appendField(new Blockly.FieldDropdown([["溫度", "t"], ["濕度", "h"]]), "dht_")
558-
.appendField("為");
556+
.appendField(Blockly.Msg.WEBDUINO_DHT_SHOW, "顯示")
557+
.appendField(new Blockly.FieldDropdown([[Blockly.Msg.WEBDUINO_DHT_SHOW_T, "t"], [Blockly.Msg.WEBDUINO_DHT_SHOW_H, "h"]]), "dht_")
558+
.appendField(Blockly.Msg.WEBDUINO_DHT_SHOW_IS, "為");
559+
this.setPreviousStatement(true);
560+
this.setNextStatement(true);
561+
this.setTooltip('');
562+
this.setColour(Blockly.Blocks.colour.HUE);
563+
this.setHelpUrl('http://www.example.com/');
564+
}
565+
};
566+
567+
// https://blockly-demo.appspot.com/static/demos/blockfactory/index.html#2vu2xz
568+
Blockly.Blocks['tutorial_dht_areachart'] = {
569+
init: function() {
570+
this.appendValueInput("name_")
571+
.appendField(Blockly.Msg.WEBDUINO_DHT_ADD_AREACHART, "加入「區域折線圖」模組：");
572+
this.appendValueInput("color_t_")
573+
.setAlign(Blockly.ALIGN_RIGHT)
574+
.appendField(Blockly.Msg.WEBDUINO_DHT_ADD_TCOLOR, "溫度顏色：");
575+
this.appendValueInput("color_h_")
576+
.setAlign(Blockly.ALIGN_RIGHT)
577+
.appendField(Blockly.Msg.WEBDUINO_DHT_ADD_HCOLOR, "濕度顏色：");
578+
this.setPreviousStatement(true);
579+
this.setNextStatement(true);
580+
this.setTooltip('');
581+
this.setColour(Blockly.Blocks.colour.HUE);
582+
this.setHelpUrl('http://www.example.com/');
583+
}
584+
};
585+
586+
// https://blockly-demo.appspot.com/static/demos/blockfactory/index.html#2vu2xz
587+
Blockly.Blocks['tutorial_dht_gauge'] = {
588+
init: function() {
589+
this.appendValueInput("name_")
590+
.appendField(Blockly.Msg.WEBDUINO_DHT_ADD_GUAGE, "加入「指針」模組：");
591+
this.setPreviousStatement(true);
592+
this.setNextStatement(true);
593+
this.setTooltip('');
594+
this.setColour(Blockly.Blocks.colour.HUE);
595+
this.setHelpUrl('http://www.example.com/');
596+
}
597+
};
598+
599+
// https://blockly-demo.appspot.com/static/demos/blockfactory/index.html#6k6o8o
600+
Blockly.Blocks['tutorial_dht_draw'] = {
601+
init: function() {
602+
this.appendDummyInput()
603+
.appendField(Blockly.Msg.WEBDUINO_DHT_USE, "使用")
604+
.appendField(new Blockly.FieldVariable("areachart"), "chart_")
605+
.appendField(Blockly.Msg.WEBDUINO_DHT_DRAW, "開始繪製");
606+
this.appendValueInput("t_")
607+
.setAlign(Blockly.ALIGN_RIGHT)
608+
.appendField(Blockly.Msg.WEBDUINO_DHT_DRAW_T, "溫度：");
609+
this.appendValueInput("h_")
610+
.setAlign(Blockly.ALIGN_RIGHT)
611+
.appendField(Blockly.Msg.WEBDUINO_DHT_DRAW_H,"濕度：");
559612
this.setPreviousStatement(true);
560613
this.setNextStatement(true);
561614
this.setTooltip('');

‎generators/tutorials.js‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -460,3 +460,110 @@ Blockly.JavaScript['tutorial_dht_show'] = function (block) {
460460
}
461461
return code;
462462
};
463+
464+
Blockly.JavaScript['tutorial_dht_areachart'] = function (block) {
465+
var value_name_ = Blockly.JavaScript.valueToCode(block, 'name_', Blockly.JavaScript.ORDER_ATOMIC);
466+
var value_color_t_ = Blockly.JavaScript.valueToCode(block, 'color_t_', Blockly.JavaScript.ORDER_ATOMIC);
467+
var value_color_h_ = Blockly.JavaScript.valueToCode(block, 'color_h_', Blockly.JavaScript.ORDER_ATOMIC);
468+
var code = 'var '+value_name_+' = {};\n' +
469+
value_name_+'.areachart = false;\n' +
470+
value_name_+'.origin = [\n' +
471+
' ["Time", "temperature", "humidity"]\n' +
472+
'];\n' +
473+
'google.load("visualization", "1", {\n' +
474+
' packages: ["corechart"],\n' +
475+
' callback: function() {\n' +
476+
' '+value_name_+'.areachart = true;\n' +
477+
' }\n' +
478+
'});\n' +
479+
'document.getElementById("chart_div1").style.display="none";\n'+
480+
'document.getElementById("chart_div2").style.display="none";\n'+
481+
'function drawAreaChart(d) {\n' +
482+
' if (!Array.isArray(d)) {\n' +
483+
' return;\n' +
484+
' }\n' +
485+
' var data = google.visualization.arrayToDataTable(d);\n' +
486+
' var options = {\n' +
487+
' title: "",\n' +
488+
' hAxis: {title: "",titleTextStyle: {color: "#333"}},\n' +
489+
' vAxis: {minValue: 0},\n' +
490+
' chartArea: {top: 50,left: 50,width: "70%",height: "70%"},\n' +
491+
' colors: [' + value_color_t_ + ', ' + value_color_h_ + ']\n' +
492+
' };\n' +
493+
' var code = new google.visualization.AreaChart(document.getElementById("chart_div"));\n' +
494+
' return code.draw(data, options);\n' +
495+
'}\n';
496+
return code;
497+
};
498+
499+
Blockly.JavaScript['tutorial_dht_gauge'] = function (block) {
500+
var value_name_ = Blockly.JavaScript.valueToCode(block, 'name_', Blockly.JavaScript.ORDER_ATOMIC);
501+
var code = 'var '+value_name_+' = {};\n' +
502+
value_name_+'.guage = false;\n' +
503+
value_name_+'.origin1 = [\n' +
504+
' ["Label", "Value"],["humidity", 55]\n' +
505+
'];\n' +
506+
value_name_+'.origin2 = [\n' +
507+
' ["Label", "Value"],["temperature", 30]\n' +
508+
'];\n' +
509+
'google.load("visualization", "1", {\n' +
510+
' packages: ["gauge"],\n' +
511+
' callback: function() {\n' +
512+
' '+value_name_+'.gauge = true;\n' +
513+
' }\n' +
514+
'});\n' +
515+
'document.getElementById("chart_div").style.display="none";\n'+
516+
'function drawGuage(d1,d2) {\n' +
517+
' if (!Array.isArray(d1)||!Array.isArray(d2)) {\n' +
518+
' return;\n' +
519+
' }\n' +
520+
' var data1 = google.visualization.arrayToDataTable(d1);\n' +
521+
' var data2 = google.visualization.arrayToDataTable(d2);\n' +
522+
' var options1 = {\n' +
523+
' width: 400, height: 120,\n' +
524+
' redFrom: 90, redTo: 100,\n' +
525+
' yellowFrom:75, yellowTo: 90,\n' +
526+
' minorTicks: 5,\n' +
527+
' redColor:"#00f", yellowColor:"#9cf",\n' +
528+
' animation:{easing:"in"}\n'+
529+
' };\n' +
530+
' var options2 = {\n' +
531+
' width: 400, height: 120,\n' +
532+
' redFrom: 90, redTo: 100,\n' +
533+
' yellowFrom:75, yellowTo: 90,\n' +
534+
' minorTicks: 5,\n' +
535+
' animation:{easing:"in"}\n'+
536+
' };\n' +
537+
'var chart1 = new google.visualization.Gauge(document.getElementById("chart_div1"));\n' +
538+
'chart1.draw(data1, options1);\n' +
539+
'var chart2 = new google.visualization.Gauge(document.getElementById("chart_div2"));\n' +
540+
'chart2.draw(data2, options2);\n' +
541+
'}\n';
542+
return code;
543+
};
544+
545+
Blockly.JavaScript['tutorial_dht_draw'] = function(block) {
546+
var variable_chart_ = Blockly.JavaScript.variableDB_.getName(block.getFieldValue('chart_'), Blockly.Variables.NAME_TYPE);
547+
var value_t_ = Blockly.JavaScript.valueToCode(block, 't_', Blockly.JavaScript.ORDER_ATOMIC);
548+
var value_h_ = Blockly.JavaScript.valueToCode(block, 'h_', Blockly.JavaScript.ORDER_ATOMIC);
549+
var code = 'document.getElementById("temperature").innerHTML = ' + value_t_ + ';\n' +
550+
'document.getElementById("humidity").innerHTML = ' + value_h_ + ';\n' +
551+
'var time = new Date();\n' +
552+
'var ts = time.getSeconds();\n' +
553+
'var tm = time.getMinutes();\n' +
554+
'var th = time.getHours();\n' +
555+
'var a = [];\n' +
556+
'if ('+variable_chart_+'.areachart) {\n' +
557+
' a[0] = th + ":" + tm + ":" + ts;\n' +
558+
' a[1] = ' + value_t_ + ';\n' +
559+
' a[2] = ' + value_h_ + ';\n' +
560+
' '+variable_chart_+'.origin.push(a);\n' +
561+
' drawAreaChart('+variable_chart_+'.origin);\n' +
562+
'}\n'+
563+
'if ('+variable_chart_+'.gauge) {\n' +
564+
' '+variable_chart_+'.origin1 = [["Label", "Value"],["humidity", '+value_h_+']];\n' +
565+
' '+variable_chart_+'.origin2 = [["Label", "Value"],["temperature", '+value_t_+']];\n' +
566+
' drawGuage('+variable_chart_+'.origin1,'+variable_chart_+'.origin2);\n' +
567+
'}\n';
568+
return code;
569+
};

‎index-tutorials.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,10 @@ <h3>溫濕度傳感器</h3>
171171
<h4><a href="./?lang=zh-hant&page=tutorials/dht-1" target="_blank">偵測溫濕度</a></h4>
172172
( <a href="./?lang=zh-hant&page=tutorials/dht-1#-JvrZOa-PvI2vYJZdGrG" target="_blank">解答</a> )
173173
</li>
174+
<li>
175+
<h4><a href="./?lang=zh-hant&page=tutorials/dht-2" target="_blank">偵測溫濕度並繪製圖表</a></h4>
176+
( <a href="./?lang=zh-hant&page=tutorials/dht-2#-Jvwiwd_Lr9F5j5Oz4-N" target="_blank">解答</a> )
177+
</li>
174178
</ul>
175179
<br/>
176180
<script>

‎msg/tutorials/dht-2/en.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
MSG.backIndex = "Webduino Blockly Tutorials";
2+
MSG.demoTitle = "Blockly Demo Area";
3+
MSG.catTutorials = "Tutorials";
4+
MSG.timerVariable = "timer";
5+
6+
MSG.subTitle = "Chapter 5-2: Draw Area Chart";
7+
MSG.demoDescription = "Use DHT sensor, and draw area chart";
8+
MSG.temperature = "temperature: ";
9+
MSG.humidity = "humidity: ";

‎msg/tutorials/dht-2/zh-hant.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
MSG.backIndex = "Webduino 積木教學";
2+
MSG.demoTitle = "Blockly 範例測試區";
3+
MSG.catTutorials = "教學積木";
4+
MSG.timerVariable = "計時器";
5+
6+
MSG.subTitle = "課程 5-2：繪製溫濕度圖表";
7+
MSG.demoDescription = "使用溫濕度傳感器，利用溫度與濕度繪製視覺化圖表";
8+
MSG.temperature = "溫度：";
9+
MSG.humidity = "濕度：";

‎views/tutorials/dht-1.handlebars‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<style>
44
#show{
55
font-size:40px;
6-
line-height: 50px;
76
}
87
#show b{
98
display:inline-block;

‎views/tutorials/dht-2.handlebars‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<link rel="stylesheet" href="tutorials.css">
2+
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
3+
4+
<style>
5+
#show{
6+
font-size:30px;
7+
line-height: 40px;
8+
}
9+
#show b{
10+
display:inline-block;
11+
font-size:14px;
12+
vertical-align: top;
13+
margin-top:-10px;
14+
15+
}
16+
</style>
17+
18+
<div id="demoArea">
19+
<div id="demoTitle">{{demoTitle}}</div>
20+
<div id="demoDescription">{{demoDescription}}</div>
21+
<div id="show">
22+
{{temperature}}<span id="temperature">0</span> <b>o</b>C<br/>
23+
{{humidity}}<span id="humidity">0</span> %<br/>
24+
<br/>
25+
<div id="chart_div1" style=" height: 120px; display:inline-block;"></div>
26+
<div id="chart_div2" style=" height: 120px;display:inline-block;"></div>
27+
<div id="chart_div" style="width: 100%; height: 400px;"></div>
28+
</div>
29+
</div>
30+
<table width="60%" height="100%">
31+
<tr>
32+
<td>
33+
<h1>
34+
<a href="index-tutorials.html"><span id="backIndex">{{backIndex}}</span></a> >
35+
<span id="title">...</span><span id="subTitle">{{subTitle}}</span>
36+
</h1>
37+
</td>
38+
<td class="farSide">
39+
<select id="languageMenu"></select>
40+
</td>
41+
</tr>
42+
<tr>
43+
<td colspan=2>
44+
<table width="100%">
45+
<tr id="tabRow" height="1em">
46+
<td id="tab_blocks" class="tabon">{{blocks}}</td>
47+
<td class="tabmin">&nbsp;</td>
48+
<td id="tab_javascript" class="taboff">JavaScript</td>
49+
<td class="tabmin">&nbsp;</td>
50+
<td id="tab_xml" class="taboff" style="display:none;">XML</td>
51+
<td class="tabmax">
52+
<button id="trashButton" class="notext" title="{{trashTooltip}}">
53+
<img src='media/1x1.gif' class="trash icon21">
54+
</button>
55+
<button id="linkButton" class="notext" title="{{linkTooltip}}">
56+
<img src='media/1x1.gif' class="link icon21">
57+
</button>
58+
<button id="runButton" class="notext primary" title="{{runTooltip}}">
59+
<img src='media/1x1.gif' class="run icon21">
60+
</button>
61+
</td>
62+
</tr>
63+
</table>
64+
</td>
65+
</tr>
66+
<tr>
67+
<td height="99%" colspan=2 id="content_area">
68+
</td>
69+
</tr>
70+
</table>
71+
72+
<div id="content_blocks" class="content"></div>
73+
<pre id="content_javascript" class="content"></pre>
74+
<textarea id="content_xml" class="content" wrap="off"></textarea>
75+
76+
<xml id="toolbox" style="display: none">
77+
<category id="catVariables" custom="VARIABLE"></category>
78+
<category id="catColour">
79+
<block type="colour_picker"></block>
80+
</category>
81+
<sep></sep>
82+
<sep></sep>
83+
<category id="catBoard">
84+
<block type="board_ready">
85+
<value name="device_">
86+
<block type="text"></block>
87+
</value>
88+
</block>
89+
</category>
90+
<category id="catDht">
91+
<block type="variables_set">
92+
<field name="VAR">dht</field>
93+
<value name="VALUE">
94+
<block type="dht_new">
95+
<field name="pin_">11</field>
96+
</block>
97+
</value>
98+
</block>
99+
<block type="dht_get">
100+
<value name="time">
101+
<block type="math_number">
102+
<field name="NUM">1000</field>
103+
</block>
104+
</value>
105+
</block>
106+
<block type="dht_get_number"></block>
107+
</category>
108+
<category id="catTutorials">
109+
<block type="tutorial_dht_show"></block>
110+
<block type="tutorial_dht_gauge">
111+
<value name="name_">
112+
<block type="variables_get">
113+
<field name="VAR">gauge</field>
114+
</block>
115+
</value>
116+
</block>
117+
<block type="tutorial_dht_areachart">
118+
<value name="name_">
119+
<block type="variables_get">
120+
<field name="VAR">areachart</field>
121+
</block>
122+
</value>
123+
<value name="color_t_">
124+
<block type="colour_picker">
125+
<field name="COLOUR">#ff0000</field>
126+
</block>
127+
</value>
128+
<value name="color_h_">
129+
<block type="colour_picker">
130+
<field name="COLOUR">#0000ff</field>
131+
</block>
132+
</value>
133+
</block>
134+
<block type="tutorial_dht_draw"></block>
135+
</category>
136+
<sep></sep>
137+
</xml>

0 commit comments

Comments
 (0)