Skip to content

Commit a21c5a3

Browse files
oxxostudiooxxostudio
committed
add range and color selector
1 parent 3824fa0 commit a21c5a3

6 files changed

Lines changed: 210 additions & 42 deletions

File tree

‎blocks/webduino.js‎

Lines changed: 72 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -137,9 +137,9 @@ Blockly.Blocks['demo_image_position'] = {
137137
[Blockly.Msg.DEMO_IMAGE_X, "x"],
138138
[Blockly.Msg.DEMO_IMAGE_Y, "y"]
139139
]), "direction_")
140-
.appendField(Blockly.Msg.DEMO_IMAGE_MOVE,"移動：");
140+
.appendField(Blockly.Msg.DEMO_IMAGE_MOVE, "移動：");
141141
this.appendDummyInput()
142-
.appendField(Blockly.Msg.DEMO_IMAGE_PIXEL,"像素");
142+
.appendField(Blockly.Msg.DEMO_IMAGE_PIXEL, "像素");
143143
this.setPreviousStatement(true);
144144
this.setNextStatement(true);
145145
this.setTooltip('');
@@ -148,10 +148,68 @@ Blockly.Blocks['demo_image_position'] = {
148148
}
149149
};
150150

151+
Blockly.Blocks['demo_area_input'] = {
152+
init: function () {
153+
this.appendStatementInput("do_")
154+
.appendField("選擇顏色，執行：");
155+
this.setPreviousStatement(true);
156+
this.setNextStatement(true);
157+
this.setTooltip('');
158+
this.setColour(Blockly.Blocks.colour.HUE);
159+
this.setHelpUrl('http://www.example.com/');
160+
}
161+
};
162+
163+
Blockly.Blocks['demo_area_input_color'] = {
164+
init: function () {
165+
this.appendDummyInput()
166+
.appendField("選擇的顏色");
167+
this.setOutput(true);
168+
this.setTooltip('');
169+
this.setColour(Blockly.Blocks.colour.HUE);
170+
this.setHelpUrl('http://www.example.com/');
171+
}
172+
};
173+
151174
Blockly.Blocks['demo_area_color'] = {
152175
init: function () {
153176
this.appendValueInput("color_")
154-
.appendField(Blockly.Msg.DEMO_AREA_COLOR,"設定區域顏色：");
177+
.appendField(Blockly.Msg.DEMO_AREA_COLOR, "設定區域顏色：");
178+
this.setPreviousStatement(true);
179+
this.setNextStatement(true);
180+
this.setTooltip('');
181+
this.setColour(Blockly.Blocks.colour.HUE);
182+
this.setHelpUrl('http://www.example.com/');
183+
}
184+
};
185+
186+
Blockly.Blocks['demo_range_set'] = {
187+
init: function () {
188+
this.appendValueInput("min_")
189+
.appendField("拉霸設定，最小值");
190+
this.appendDummyInput();
191+
this.appendValueInput("max_")
192+
.appendField("最大值");
193+
this.appendDummyInput();
194+
this.appendValueInput("step_")
195+
.appendField("間距");
196+
this.appendDummyInput();
197+
this.appendValueInput("value_")
198+
.appendField("預設值");
199+
this.appendStatementInput("do_")
200+
.appendField("調整拉霸，執行：");
201+
this.setPreviousStatement(true);
202+
this.setNextStatement(true);
203+
this.setTooltip('');
204+
this.setColour(Blockly.Blocks.colour.HUE);
205+
this.setHelpUrl('http://www.example.com/');
206+
}
207+
};
208+
209+
Blockly.Blocks['demo_range_show'] = {
210+
init: function () {
211+
this.appendValueInput("show_")
212+
.appendField("數值顯示：");
155213
this.setPreviousStatement(true);
156214
this.setNextStatement(true);
157215
this.setTooltip('');
@@ -160,6 +218,17 @@ Blockly.Blocks['demo_area_color'] = {
160218
}
161219
};
162220

221+
Blockly.Blocks['demo_range_input_value'] = {
222+
init: function () {
223+
this.appendDummyInput()
224+
.appendField("拉霸的數值");
225+
this.setOutput(true);
226+
this.setTooltip('');
227+
this.setColour(Blockly.Blocks.colour.HUE);
228+
this.setHelpUrl('http://www.example.com/');
229+
}
230+
};
231+
163232
// https://blockly-demo.appspot.com/static/demos/blockfactory/index.html#wbe3vd
164233
Blockly.Blocks['demo_youtube'] = {
165234
init: function () {

‎code.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -276,6 +276,8 @@ Code.loadDemoArea = function(demo){
276276
demo.content(5);
277277
}else if(localStorage.demoAreaSelect==6){
278278
demo.content(6);
279+
}else if(localStorage.demoAreaSelect==7){
280+
demo.content(7);
279281
}
280282
}
281283

‎generators/webduino.js‎

Lines changed: 84 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ d88' `888 d88' `88b `888P"Y88bP"Y88b d88' `88b
1313
`Y8bod88P" `Y8bod8P' o888o o888o o888o `Y8bod8P'
1414
*/
1515

16-
Blockly.JavaScript['demo_show_text'] = function(block) {
16+
Blockly.JavaScript['demo_show_text'] = function (block) {
1717
var value_show_ = Blockly.JavaScript.valueToCode(block, 'show_', Blockly.JavaScript.ORDER_ATOMIC);
18-
var code = 'document.getElementById("demo-area-01-show").innerHTML = '+value_show_+';\n';
18+
var code = 'document.getElementById("demo-area-01-show").innerHTML = ' + value_show_ + ';\n';
1919
return code;
2020
};
2121

@@ -28,69 +28,120 @@ Blockly.JavaScript['demo_image_url'] = function (block) {
2828
return code;
2929
};
3030

31-
Blockly.JavaScript['demo_light_click'] = function(block) {
31+
Blockly.JavaScript['demo_light_click'] = function (block) {
3232
var statements_do_ = Blockly.JavaScript.statementToCode(block, 'do_');
33-
var code = 'document.getElementById("demo-area-02-light").addEventListener("click",function(){\n'+
34-
statements_do_+
35-
'});\n';
33+
var code = 'document.getElementById("demo-area-02-light").addEventListener("click",function(){\n' +
34+
statements_do_ +
35+
'});\n';
3636
return code;
3737
};
3838

39-
Blockly.JavaScript['demo_light_state'] = function(block) {
39+
Blockly.JavaScript['demo_light_state'] = function (block) {
4040
var dropdown_state_ = block.getFieldValue('state_');
41-
var code = 'document.getElementById("demo-area-02-light").className = "'+dropdown_state_+'";\n';
41+
var code = 'document.getElementById("demo-area-02-light").className = "' + dropdown_state_ + '";\n';
4242
return code;
4343
};
4444

45-
Blockly.JavaScript['demo_light_ifelse'] = function(block) {
45+
Blockly.JavaScript['demo_light_ifelse'] = function (block) {
4646
var dropdown_state_ = block.getFieldValue('state_');
47-
var code = 'document.getElementById("demo-area-02-light").className == "'+dropdown_state_+'"';
47+
var code = 'document.getElementById("demo-area-02-light").className == "' + dropdown_state_ + '"';
4848
return [code, Blockly.JavaScript.ORDER_ATOMIC];
4949
};
5050

51-
Blockly.JavaScript['demo_image_size'] = function(block) {
51+
Blockly.JavaScript['demo_image_size'] = function (block) {
5252
var value_size_ = Blockly.JavaScript.valueToCode(block, 'size_', Blockly.JavaScript.ORDER_ATOMIC);
53-
var code = 'document.getElementById("demo-area-03-image").style.width = '+value_size_+'+"px";\n'+
54-
'document.getElementById("demo-area-03-image").style.height = '+value_size_+'+"px";\n';
53+
var code = 'document.getElementById("demo-area-03-image").style.width = ' + value_size_ + '+"px";\n' +
54+
'document.getElementById("demo-area-03-image").style.height = ' + value_size_ + '+"px";\n';
5555
return code;
5656
};
5757

58-
Blockly.JavaScript['demo_image_rotate'] = function(block) {
58+
Blockly.JavaScript['demo_image_rotate'] = function (block) {
5959
var value_deg_ = Blockly.JavaScript.valueToCode(block, 'deg_', Blockly.JavaScript.ORDER_ATOMIC);
6060
var deg = Blockly.JavaScript.variableDB_.getDistinctName(
61-
'deg', Blockly.Variables.NAME_TYPE);
62-
var code = 'var '+deg+' = '+value_deg_+';\n'+
63-
'document.getElementById("demo-area-03-image").style.transform = "rotate("+'+deg+'+"deg)";\n';
61+
'deg', Blockly.Variables.NAME_TYPE);
62+
var code = 'var ' + deg + ' = ' + value_deg_ + ';\n' +
63+
'document.getElementById("demo-area-03-image").style.transform = "rotate("+' + deg + '+"deg)";\n';
6464
return code;
6565
};
6666

67-
Blockly.JavaScript['demo_image_position'] = function(block) {
67+
Blockly.JavaScript['demo_image_position'] = function (block) {
6868
var dropdown_direction_ = block.getFieldValue('direction_');
6969
var value_position_ = Blockly.JavaScript.valueToCode(block, 'position_', Blockly.JavaScript.ORDER_ATOMIC);
7070
var code;
71-
if(dropdown_direction_=='x'){
72-
code = 'document.getElementById("demo-area-03-image").style.left = '+value_position_+'+"px";\n';
73-
}else{
74-
code = 'document.getElementById("demo-area-03-image").style.top = '+value_position_+'+"px";\n';
71+
if (dropdown_direction_ == 'x') {
72+
code = 'document.getElementById("demo-area-03-image").style.left = ' + value_position_ + '+"px";\n';
73+
} else {
74+
code = 'document.getElementById("demo-area-03-image").style.top = ' + value_position_ + '+"px";\n';
7575
}
7676
return code;
7777
};
7878

79-
Blockly.JavaScript['demo_button_click'] = function(block) {
79+
Blockly.JavaScript['demo_button_click'] = function (block) {
8080
var dropdown_name_ = block.getFieldValue('name_');
8181
var statements_do_ = Blockly.JavaScript.statementToCode(block, 'do_');
82-
var code = 'document.getElementById("demo-area-05-btn'+dropdown_name_+'").addEventListener("click",function(){\n'+
83-
statements_do_+
84-
'});\n';
82+
var code = 'document.getElementById("demo-area-05-btn' + dropdown_name_ + '").addEventListener("click",function(){\n' +
83+
statements_do_ +
84+
'});\n';
85+
return code;
86+
};
87+
88+
Blockly.JavaScript['demo_area_input'] = function (block) {
89+
var statements_do_ = Blockly.JavaScript.statementToCode(block, 'do_');
90+
var code = 'document.getElementById("demo-area-04-color").oninput = function(_color){\n' +
91+
'_color = this.value;\n' +
92+
statements_do_ +
93+
'};\n';
8594
return code;
8695
};
8796

88-
Blockly.JavaScript['demo_area_color'] = function(block) {
97+
Blockly.JavaScript['demo_area_input_color'] = function(block) {
98+
var code = '_color';
99+
return [code, Blockly.JavaScript.ORDER_ATOMIC];
100+
};
101+
102+
Blockly.JavaScript['demo_area_color'] = function (block) {
89103
var value_color_ = Blockly.JavaScript.valueToCode(block, 'color_', Blockly.JavaScript.ORDER_ATOMIC);
90-
var code = 'document.getElementById("demo-area-04-area").style.background = '+value_color_+';\n';
104+
var code = 'document.getElementById("demo-area-04-area").style.background = ' + value_color_ + ';\n';
105+
return code;
106+
};
107+
108+
Blockly.JavaScript['demo_range_set'] = function(block) {
109+
var value_min_ = Blockly.JavaScript.valueToCode(block, 'min_', Blockly.JavaScript.ORDER_ATOMIC);
110+
var value_max_ = Blockly.JavaScript.valueToCode(block, 'max_', Blockly.JavaScript.ORDER_ATOMIC);
111+
var value_step_ = Blockly.JavaScript.valueToCode(block, 'step_', Blockly.JavaScript.ORDER_ATOMIC);
112+
var value_value_ = Blockly.JavaScript.valueToCode(block, 'value_', Blockly.JavaScript.ORDER_ATOMIC);
113+
var statements_do_ = Blockly.JavaScript.statementToCode(block, 'do_');
114+
var code = 'document.getElementById("demo-area-06-input").setAttribute("min",'+value_min_+');\n'+
115+
'document.getElementById("demo-area-06-input").setAttribute("max",'+value_max_+');\n'+
116+
'document.getElementById("demo-area-06-input").setAttribute("step",'+value_step_+');\n'+
117+
'document.getElementById("demo-area-06-input").setAttribute("value",'+value_value_+');\n'+
118+
'document.getElementById("demo-area-06-input").oninput = function(_value){\n' +
119+
' _value = this.value;\n' +
120+
statements_do_ +
121+
'};\n';
91122
return code;
92123
};
93124

125+
Blockly.JavaScript['demo_range_show'] = function (block) {
126+
var value_show_ = Blockly.JavaScript.valueToCode(block, 'show_', Blockly.JavaScript.ORDER_ATOMIC);
127+
var code = 'document.getElementById("demo-area-06-input-value").innerHTML = ' + value_show_ + ';\n';
128+
return code;
129+
};
130+
131+
Blockly.JavaScript['demo_range_input'] = function(block) {
132+
var statements_do_ = Blockly.JavaScript.statementToCode(block, 'do_');
133+
var code = 'document.getElementById("demo-area-06-input").oninput = function(_value){\n' +
134+
'_value = this.value;\n' +
135+
statements_do_ +
136+
'};\n';
137+
return code;
138+
};
139+
140+
Blockly.JavaScript['demo_range_input_value'] = function(block) {
141+
var code = '_value';
142+
return [code, Blockly.JavaScript.ORDER_ATOMIC];
143+
};
144+
94145
Blockly.JavaScript['demo_youtube'] = function (block) {
95146
var value_name_ = Blockly.JavaScript.valueToCode(block, 'name_', Blockly.JavaScript.ORDER_ATOMIC);
96147
var text_id_ = block.getFieldValue('id_');
@@ -155,15 +206,15 @@ Blockly.JavaScript['demo_youtube_control'] = function (block) {
155206
var variable_name_ = Blockly.JavaScript.variableDB_.getName(block.getFieldValue('name_'), Blockly.Variables.NAME_TYPE);
156207
var dropdown_status_ = block.getFieldValue('status_');
157208
var code;
158-
if(dropdown_status_=='1'){
209+
if (dropdown_status_ == '1') {
159210
code = ' if(checkYoutubeLoad==1){\n' +
160211
' ' + variable_name_ + '.playVideo();\n' +
161212
' }\n';
162-
}else if(dropdown_status_=='2'){
213+
} else if (dropdown_status_ == '2') {
163214
code = ' if(checkYoutubeLoad==1){\n' +
164215
' ' + variable_name_ + '.pauseVideo();\n' +
165216
' }\n';
166-
}else if(dropdown_status_=='0'){
217+
} else if (dropdown_status_ == '0') {
167218
code = ' if(checkYoutubeLoad==1){\n' +
168219
' ' + variable_name_ + '.stopVideo();\n' +
169220
' ' + variable_name_ + '.seekTo(0);\n' +
@@ -179,10 +230,10 @@ Blockly.JavaScript['demo_youtube_status'] = function (block) {
179230
return [code, Blockly.JavaScript.ORDER_NONE];
180231
};
181232

182-
Blockly.JavaScript['demo_youtube_id'] = function(block) {
233+
Blockly.JavaScript['demo_youtube_id'] = function (block) {
183234
var variable_name_ = Blockly.JavaScript.variableDB_.getName(block.getFieldValue('name_'), Blockly.Variables.NAME_TYPE);
184235
var value_id_ = Blockly.JavaScript.valueToCode(block, 'id_', Blockly.JavaScript.ORDER_ATOMIC);
185-
var code = variable_name_+'.loadVideoById('+value_id_+');\n';
236+
var code = variable_name_ + '.loadVideoById(' + value_id_ + ');\n';
186237
return code;
187238
};
188239

‎msg/en.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,8 @@ var MSG = {
7575
demoAreaSelect3: "Control Image",
7676
demoAreaSelect4: "Area color",
7777
demoAreaSelect5: "Button",
78-
demoAreaSelect6: "Youtube",
78+
demoAreaSelect6: "Range",
79+
demoAreaSelect7: "Youtube",
7980
demoAreaBtn1: "Button 1",
8081
demoAreaBtn2: "Button 2",
8182
demoAreaBtn3: "Button 3",

‎msg/zh-hant.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -67,17 +67,19 @@ var MSG = {
6767
catDemoText: "顯示文字",
6868
catDemoLight: "點擊燈泡",
6969
catDemoImage: "圖片控制",
70-
catDemoArea: "區域顏色",
71-
catDemoButton: "多顆按鈕",
70+
catDemoArea: "顏色調整",
71+
catDemoButton: "按鈕行為",
72+
catDemoRange: "拉霸操作",
7273
catDemoYoutube: "YouTube",
7374
demoAreaTitle: "網頁互動測試",
7475
demoAreaChoose: "請選擇一種互動方式：",
7576
demoAreaSelect1: "顯示文字",
7677
demoAreaSelect2: "點擊燈泡",
7778
demoAreaSelect3: "控制圖片",
78-
demoAreaSelect4: "區域顏色",
79-
demoAreaSelect5: "多顆按鈕",
80-
demoAreaSelect6: "Youtube",
79+
demoAreaSelect4: "顏色調整",
80+
demoAreaSelect5: "按鈕行為",
81+
demoAreaSelect6: "拉霸操作",
82+
demoAreaSelect7: "Youtube",
8183
demoAreaBtn1: "按鈕 1",
8284
demoAreaBtn2: "按鈕 2",
8385
demoAreaBtn3: "按鈕 3",

0 commit comments

Comments
 (0)