Skip to content

Commit a89c78a

Browse files
oxxostudiooxxostudio
committed
add button tutorial 5 ( control youtube )
1 parent 4fd4c7f commit a89c78a

9 files changed

Lines changed: 223 additions & 36 deletions

File tree

‎blocks/msg/en.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ Blockly.Msg.WEBDUINO_ULTRASONIC_GET_DISTANCE = "get distance over every";
5151
Blockly.Msg.WEBDUINO_ULTRASONIC_GET_TIME = "ms ( 1/1000 sec )";
5252
Blockly.Msg.WEBDUINO_ULTRASONIC_GET_DO = "do";
5353
Blockly.Msg.WEBDUINO_ULTRASONIC_DISTANCE = "'s distance ( cm )";
54+
5455
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE = "Set Youtube：";
5556
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_SET = "Set";
5657
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_VOLUME = "Volume:";
@@ -60,6 +61,14 @@ Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_NORMAL = "Normal";
6061
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_FAST = "Fast";
6162
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_VERYFAST = "Very Fast";
6263
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_SUPERFAST = "Super Fast";
64+
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_STATUS = " status:";
65+
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_SETPLAY = "Play";
66+
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_SETPAUSE = "Pause";
67+
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_SETSTOP = "Stop";
68+
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_STATUSPLAY = "Playing";
69+
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_STATUSPAUSE = "Paused";
70+
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_STATUSSTOP = "Stopped";
71+
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_STATUSSTART = "Ready";
6372

6473
Blockly.Msg.WEBDUINO_DHT_NEW = "DHT , pin:";
6574
Blockly.Msg.WEBDUINO_DHT_GET = "detect temperature and humidity over every";

‎blocks/msg/zh-hant.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ Blockly.Msg.WEBDUINO_ULTRASONIC_GET_DISTANCE = "擷取距離，每";
7878
Blockly.Msg.WEBDUINO_ULTRASONIC_GET_TIME = "豪秒 ( 1/1000 秒 ) 擷取一次";
7979
Blockly.Msg.WEBDUINO_ULTRASONIC_GET_DO = "執行：";
8080
Blockly.Msg.WEBDUINO_ULTRASONIC_DISTANCE = "所截取的距離 ( 公分 )";
81+
8182
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE = "設定 Youtube：";
8283
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_SET = "設定";
8384
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_VOLUME = "音量：";
@@ -87,6 +88,14 @@ Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_NORMAL = "正常";
8788
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_FAST = "快";
8889
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_VERYFAST = "很快";
8990
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_SUPERFAST = "超級快";
91+
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_STATUS = " 的狀態為：";
92+
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_SETPLAY = "播放";
93+
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_SETPAUSE = "暫停";
94+
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_SETSTOP = "停止";
95+
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_STATUSPLAY = "正在播放";
96+
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_STATUSPAUSE = "暫停";
97+
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_STATUSSTOP = "已經停止";
98+
Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_STATUSSTART = "尚未開始";
9099

91100
Blockly.Msg.WEBDUINO_DHT_NEW = "溫濕度傳感器，腳位：";
92101
Blockly.Msg.WEBDUINO_DHT_GET = "偵測溫濕度，每";

‎blocks/tutorials.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -385,6 +385,16 @@ Blockly.Blocks['tutorial_youtube'] = {
385385
}
386386
};
387387

388+
/*
389+
oooooo oooo . .o8
390+
`888. .8' .o8 "888
391+
`888. .8' .ooooo. oooo oooo .o888oo oooo oooo 888oooo. .ooooo.
392+
`888.8' d88' `88b `888 `888 888 `888 `888 d88' `88b d88' `88b
393+
`888' 888 888 888 888 888 888 888 888 888 888ooo888
394+
888 888 888 888 888 888 . 888 888 888 888 888 .o
395+
o888o `Y8bod8P' `V88V"V8P' "888" `V88V"V8P' `Y8bod8P' `Y8bod8P'
396+
*/
397+
388398
// https://blockly-demo.appspot.com/static/demos/blockfactory/index.html#kqjbv8
389399
Blockly.Blocks['tutorial_youtube_volume'] = {
390400
init: function () {
@@ -422,6 +432,45 @@ Blockly.Blocks['tutorial_youtube_speed'] = {
422432
}
423433
};
424434

435+
// https://blockly-demo.appspot.com/static/demos/blockfactory/index.html#tcfvai
436+
Blockly.Blocks['tutorial_youtube_control'] = {
437+
init: function () {
438+
this.appendDummyInput()
439+
.appendField(Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_SET, "設定")
440+
.appendField(new Blockly.FieldVariable("youtube"), "name_")
441+
.appendField(Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_STATUS, " 的狀態為：")
442+
.appendField(new Blockly.FieldDropdown([
443+
[Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_SETPLAY, "1"],
444+
[Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_SETPAUSE, "2"],
445+
[Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_SETSTOP, "0"]
446+
]), "status_");
447+
this.setPreviousStatement(true);
448+
this.setNextStatement(true);
449+
this.setTooltip('');
450+
this.setColour(Blockly.Blocks.colour.HUE);
451+
this.setHelpUrl('http://www.example.com/');
452+
}
453+
};
454+
455+
// https://blockly-demo.appspot.com/static/demos/blockfactory/index.html#metxhc
456+
Blockly.Blocks['tutorial_youtube_status'] = {
457+
init: function () {
458+
this.appendDummyInput()
459+
.appendField(new Blockly.FieldVariable("youtube"), "name_")
460+
.appendField(Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_STATUS, " 的狀態為：")
461+
.appendField(new Blockly.FieldDropdown([
462+
[Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_STATUSPLAY, "1"],
463+
[Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_STATUSPAUSE, "2"],
464+
[Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_STATUSSTOP, "0"],
465+
[Blockly.Msg.WEBDUINO_ULTRASONIC_YOUTUBE_STATUSSTART, "-1"]
466+
]), "status_");
467+
this.setOutput(true);
468+
this.setTooltip('');
469+
this.setColour(Blockly.Blocks.colour.HUE);
470+
this.setHelpUrl('http://www.example.com/');
471+
}
472+
};
473+
425474
/*
426475
oooooooooo. ooooo ooo ooooooooooooo ooooooooooooo .oooooo. ooooo ooo
427476
`888' `Y8b `888' `8' 8' 888 `8 8' 888 `8 d8P' `Y8b `888b. `8'

‎code.js‎

Lines changed: 0 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -389,42 +389,6 @@ Code.init = function () {
389389
// Lazy-load the syntax-highlighting.
390390
window.setTimeout(Code.importPrettify, 1);
391391

392-
/* checkLoad();
393-
function checkLoad() {
394-
var cb = document.getElementById('content_blocks');
395-
var bz = document.querySelector('.blocklyZoom');
396-
var bt = document.querySelector('.blocklyTrash');
397-
if (cb&&bz&&bt) {
398-
blocklyTool(cb,bz,bt);
399-
} else {
400-
setTimeout(checkLoad,1000);
401-
}
402-
}
403-
404-
function blocklyTool(cb,bz,bt) {
405-
console.log('go');
406-
var bzClip = document.querySelectorAll('.blocklyZoom clippath rect');
407-
var bzImage = document.querySelectorAll('.blocklyZoom image');
408-
bzClip[0].setAttribute('style', '-webkit-transform:translateY(75px); cursor:pointer;');
409-
bzImage[0].setAttribute('y', '-17');
410-
bzImage[0].setAttribute('xlink:href', 'media/sprites.png');
411-
bzClip[1].setAttribute('style', '-webkit-transform:translateY(-45px); cursor:pointer;');
412-
bzImage[1].setAttribute('y', '-94');
413-
bzImage[1].setAttribute('xlink:href', 'media/sprites.png');
414-
bzClip[2].setAttribute('style', '-webkit-transform:translateY(-40px); cursor:pointer;');
415-
bzImage[2].setAttribute('y', '-55');
416-
bzImage[2].setAttribute('xlink:href', 'media/sprites.png');
417-
418-
zoomPosition();
419-
420-
function zoomPosition() {
421-
var contentWidth = cb.offsetWidth;
422-
var contentHeight = cb.offsetHeight;
423-
bz.setAttribute('style', '-webkit-transform-origin:center center; -webkit-transform:translateY(20px) translateX(' + (contentWidth - 50) + 'px) scale(.9);');
424-
bt.setAttribute('style', '-webkit-transform-origin:center center; -webkit-transform:translateY(' + (contentHeight - 90) + 'px) translateX(' + (contentWidth - 80) + 'px) scale(.8); opacity:0.4;');
425-
}
426-
window.addEventListener('resize', zoomPosition);
427-
}*/
428392
};
429393

430394
Code.renderPage = function (callback) {

‎generators/tutorials.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -265,6 +265,16 @@ Blockly.JavaScript['ultrasonic_change_add_music'] = function (block) {
265265
return code;
266266
};
267267

268+
/*
269+
oooooo oooo . .o8
270+
`888. .8' .o8 "888
271+
`888. .8' .ooooo. oooo oooo .o888oo oooo oooo 888oooo. .ooooo.
272+
`888.8' d88' `88b `888 `888 888 `888 `888 d88' `88b d88' `88b
273+
`888' 888 888 888 888 888 888 888 888 888 888ooo888
274+
888 888 888 888 888 888 . 888 888 888 888 888 .o
275+
o888o `Y8bod8P' `V88V"V8P' "888" `V88V"V8P' `Y8bod8P' `Y8bod8P'
276+
*/
277+
268278
Blockly.JavaScript['tutorial_youtube'] = function (block) {
269279
var value_name_ = Blockly.JavaScript.valueToCode(block, 'name_', Blockly.JavaScript.ORDER_ATOMIC);
270280
var text_id_ = block.getFieldValue('id_');
@@ -324,6 +334,35 @@ Blockly.JavaScript['tutorial_youtube_speed'] = function (block) {
324334
' }\n';
325335
return code;
326336
};
337+
338+
Blockly.JavaScript['tutorial_youtube_control'] = function (block) {
339+
var variable_name_ = Blockly.JavaScript.variableDB_.getName(block.getFieldValue('name_'), Blockly.Variables.NAME_TYPE);
340+
var dropdown_status_ = block.getFieldValue('status_');
341+
var code;
342+
if(dropdown_status_=='1'){
343+
code = ' if(checkYoutubeLoad==1){\n' +
344+
' ' + variable_name_ + '.playVideo();\n' +
345+
' }\n';
346+
}else if(dropdown_status_=='2'){
347+
code = ' if(checkYoutubeLoad==1){\n' +
348+
' ' + variable_name_ + '.pauseVideo();\n' +
349+
' }\n';
350+
}else if(dropdown_status_=='0'){
351+
code = ' if(checkYoutubeLoad==1){\n' +
352+
' ' + variable_name_ + '.stopVideo();\n' +
353+
' ' + variable_name_ + '.seekTo(0);\n' +
354+
' }\n';
355+
}
356+
return code;
357+
};
358+
359+
Blockly.JavaScript['tutorial_youtube_status'] = function (block) {
360+
var variable_name_ = Blockly.JavaScript.variableDB_.getName(block.getFieldValue('name_'), Blockly.Variables.NAME_TYPE);
361+
var dropdown_status_ = block.getFieldValue('status_');
362+
var code = variable_name_ + '.getPlayerState()==' + dropdown_status_;
363+
return [code, Blockly.JavaScript.ORDER_NONE];
364+
};
365+
327366
/*
328367
oooooooooo. ooooo ooo ooooooooooooo ooooooooooooo .oooooo. ooooo ooo
329368
`888' `Y8b `888' `8' 8' 888 `8 8' 888 `8 d8P' `Y8b `888b. `8'

‎index-tutorials.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,10 @@ <h4><a href="./?lang=zh-hant&page=tutorials/button-3" target="_blank">點擊按
111111
<h4><a href="./?lang=zh-hant&page=tutorials/button-4" target="_blank">點擊按鈕開關玩賽跑小遊戲</a></h4>
112112
<div>( <a href="https://youtu.be/UmMJG2zInWU" target="_blank">影片教學</a> | <a href="./?lang=zh-hant&page=tutorials/button-4#-JvY90I0qUoJR2yi34lj" target="_blank">解答</a> )</div>
113113
</li>
114+
<li>
115+
<h4><a href="./?lang=zh-hant&page=tutorials/button-5" target="_blank">點擊按鈕開關控制 Youtube 播放、暫停與停止</a><i>new</i></h4>
116+
<div>( <!-- <a href="#" target="_blank">影片教學</a> | --><a href="./?lang=zh-hant&page=tutorials/button-5#-JxJpqetsCxULbi4Iier" target="_blank">解答</a> )</div>
117+
</li>
114118
</ul>
115119
<br/>
116120
<h3>溫濕度傳感器</h3>

‎msg/tutorials/button-5/en.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
MSG.title = "Webduino Blockly Chapter 4-5 : Click button to control youtube";
2+
MSG.subTitle = "Chapter 4-5 : Click button to control youtube";
3+
MSG.demoDescription = "Click button to control youtube play, stop and pause.";

‎msg/tutorials/button-5/zh-hant.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
MSG.title = "Webduino Blockly 課程 4-5：點擊按鈕開關控制 Youtube";
2+
MSG.subTitle = "課程 4-5：點擊按鈕開關控制 Youtube";
3+
MSG.demoDescription = "點擊按鈕開關控制 Youtube 的播放、暫停和停止";

‎views/tutorials/button-5.handlebars‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<script src="copyCode.js"></script>
2+
3+
<link rel="stylesheet" href="tutorials.css">
4+
5+
<style>
6+
#show{
7+
font-size:60px;
8+
}
9+
</style>
10+
11+
<header>
12+
<a href="index.html" title="Webduino Blockly"><img class="logo" src="media/logo.png"></a>
13+
<h1>Webduino Blockly {{subTitle}}</h1>
14+
<span>( <a href="index-tutorials.html" target="_blank">{{backIndex}}</a> )</span>
15+
<div id="update">{{update}}</div>
16+
<select id="languageMenu"></select>
17+
</header>
18+
<div id="demoArea">
19+
<a href="https://webduino.io/" id="cuteman01" target="_blank"></a>
20+
<div id="demoTitle">{{demoTitle}}</div>
21+
<a href="http://bin.webduino.io/zina/edit?html,css,js,output" id="linkToBin" target="_blank"><img src="media/dave.min.svg">{{linkToBin}}</a>
22+
<div id="demoDescription">{{demoDescription}}</div>
23+
<div id="show">text</div>
24+
<div id="player"></div>
25+
</div>
26+
<table id="tutorials-table" class="nav">
27+
<tr>
28+
<td colspan=2>
29+
<table width="100%">
30+
<tr id="tabRow" height="1em">
31+
<td id="tab_blocks" class="tabon">{{blocks}}</td>
32+
<td class="tabmin">&nbsp;</td>
33+
<td id="tab_javascript" class="taboff">JavaScript</td>
34+
<td id="copyCode" class="jsClick" style="display:none;" data-clipboard-target="content_javascript" data-tooltip="Copy to clipboard"><div><img src="media/copy.png"></div></td>
35+
<td class="tabmin">&nbsp;</td>
36+
<td id="tab_xml" class="taboff" style="display:none;">XML</td>
37+
<td class="tabmax">
38+
<button id="trashButton" class="notext" title="{{trashTooltip}}">
39+
<img src='media/1x1.gif' class="trash icon21">
40+
</button>
41+
<button id="linkButton" class="notext" title="{{linkTooltip}}">
42+
<img src='media/1x1.gif' class="link icon21">
43+
</button>
44+
<button id="runButton" class="notext primary" title="{{runTooltip}}">
45+
<img src='media/1x1.gif' class="run icon21">
46+
</button>
47+
</td>
48+
</tr>
49+
</table>
50+
</td>
51+
</tr>
52+
<tr>
53+
<td height="99%" colspan=2 id="content_area">
54+
</td>
55+
</tr>
56+
</table>
57+
58+
<div id="content_blocks" class="content"></div>
59+
<pre id="content_javascript" class="content"></pre>
60+
<textarea id="content_xml" class="content" wrap="off"></textarea>
61+
62+
<xml id="toolbox" style="display: none">
63+
<category id="catVariables" custom="VARIABLE"></category>
64+
<sep></sep>
65+
<sep></sep>
66+
<category id="catText">
67+
<block type="text"></block>
68+
</category>
69+
<category id="catLogic">
70+
<block type="controls_if"></block>
71+
</category>
72+
<sep></sep>
73+
<sep></sep>
74+
<category id="catBoard">
75+
<block type="board_ready">
76+
<value name="device_">
77+
<block type="text"></block>
78+
</value>
79+
</block>
80+
</category>
81+
<category id="catButton">
82+
<block type="variables_set">
83+
<field name="VAR">button</field>
84+
<value name="VALUE">
85+
<block type="button_new">
86+
<field name="pin_">10</field>
87+
</block>
88+
</value>
89+
</block>
90+
<block type="button_event"></block>
91+
</category>
92+
<sep></sep>
93+
<sep></sep>
94+
<category id="catTutorials">
95+
<block type="show_text"></block>
96+
<block type="tutorial_youtube">
97+
<value name="name_">
98+
<block type="variables_get">
99+
<field name="VAR">youtube</field>
100+
</block>
101+
</value>
102+
</block>
103+
<block type="tutorial_youtube_control"></block>
104+
<block type="tutorial_youtube_status"></block>
105+
</category>
106+
<sep></sep>
107+
</xml>

0 commit comments

Comments
 (0)