Skip to content

Commit dbfd204

Browse files
oxxostudiooxxostudio
committed
edit tracking block
1 parent 595d4fd commit dbfd204

6 files changed

Lines changed: 145 additions & 107 deletions

File tree

‎blocks/msg/en.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -54,14 +54,15 @@ Blockly.Msg.DEMO_RANGE_SHOW = "Show value:";
5454
Blockly.Msg.DEMO_RANGE_VALUE = "value:";
5555
Blockly.Msg.DEMO_YOUTUBE_CHANGEID = "Change";
5656
Blockly.Msg.DEMO_YOUTUBE_CHANGEID_ID = "video's id：";
57-
Blockly.Msg.DEMO_TRACKING_SET = "Set Tracking";
58-
Blockly.Msg.DEMO_TRACKING_COLOR = "color";
57+
Blockly.Msg.DEMO_TRACKING_SET = "Set tracking";
58+
Blockly.Msg.DEMO_TRACKING = "track";
5959
Blockly.Msg.DEMO_TRACKING_FACE = "face";
60-
Blockly.Msg.DEMO_TRACKING_MODULE = "module";
61-
Blockly.Msg.DEMO_TRACKING_START = "Start tracking";
62-
Blockly.Msg.DEMO_TRACKING_DO = "do ( choose )";
63-
Blockly.Msg.DEMO_TRACKING_RUN = "Continued Tracking";
64-
Blockly.Msg.DEMO_TRACKING_STOP = "Stop Tracking";
60+
Blockly.Msg.DEMO_TRACKING_COLOR = "color";
61+
Blockly.Msg.DEMO_TRACKING_DO = "Tracking success, will do";
62+
Blockly.Msg.DEMO_TRACKING_RUN = "start";
63+
Blockly.Msg.DEMO_TRACKING_STOP = "stop";
64+
Blockly.Msg.DEMO_TRACKING_TRACK = "tracking";
65+
Blockly.Msg.DEMO_TRACKING_FACESETTING = "Face tracking setting (optional)";
6566
Blockly.Msg.DEMO_TRACKING_VAL = "Tracking value";
6667
Blockly.Msg.DEMO_TRACKING_VALTOTAL = "total ( face )";
6768
Blockly.Msg.DEMO_TRACKING_VALCOLOR = "color ( color )";

‎blocks/msg/zh-hant.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -60,14 +60,15 @@ Blockly.Msg.DEMO_RANGE_SHOW = "數值顯示";
6060
Blockly.Msg.DEMO_RANGE_VALUE = "拉霸的數值";
6161
Blockly.Msg.DEMO_YOUTUBE_CHANGEID = "更換";
6262
Blockly.Msg.DEMO_YOUTUBE_CHANGEID_ID = "影片，要更換的 id：";
63-
Blockly.Msg.DEMO_TRACKING_SET = "載入追蹤";
63+
Blockly.Msg.DEMO_TRACKING_SET = "設定影像追蹤";
64+
Blockly.Msg.DEMO_TRACKING = "追蹤";
65+
Blockly.Msg.DEMO_TRACKING_FACE = "人臉";
6466
Blockly.Msg.DEMO_TRACKING_COLOR = "顏色";
65-
Blockly.Msg.DEMO_TRACKING_FACE = "臉";
66-
Blockly.Msg.DEMO_TRACKING_MODULE = "模組";
67-
Blockly.Msg.DEMO_TRACKING_START = "開始追蹤";
68-
Blockly.Msg.DEMO_TRACKING_DO = "執行 ( 可不填 )";
69-
Blockly.Msg.DEMO_TRACKING_RUN = "繼續追蹤";
70-
Blockly.Msg.DEMO_TRACKING_STOP = "停止追蹤";
67+
Blockly.Msg.DEMO_TRACKING_DO = "追蹤成功時，將會執行";
68+
Blockly.Msg.DEMO_TRACKING_RUN = "開始";
69+
Blockly.Msg.DEMO_TRACKING_STOP = "停止";
70+
Blockly.Msg.DEMO_TRACKING_TRACK = "追蹤";
71+
Blockly.Msg.DEMO_TRACKING_FACESETTING = "人臉 追蹤設定 ( 非必要 )";
7172
Blockly.Msg.DEMO_TRACKING_VAL = "追蹤數值";
7273
Blockly.Msg.DEMO_TRACKING_VALTOTAL = "total ( 臉 )";
7374
Blockly.Msg.DEMO_TRACKING_VALCOLOR = "color ( 顏色 )";

‎blocks/webduino.js‎

Lines changed: 52 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -389,9 +389,9 @@ Blockly.Blocks['demo_youtube_status'] = {
389389
Blockly.Blocks['demo_youtube_id'] = {
390390
init: function () {
391391
this.appendValueInput("id_")
392-
.appendField(Blockly.Msg.DEMO_YOUTUBE_CHANGEID,"更換")
392+
.appendField(Blockly.Msg.DEMO_YOUTUBE_CHANGEID, "更換")
393393
.appendField(new Blockly.FieldVariable("youtube"), "name_")
394-
.appendField(Blockly.Msg.DEMO_YOUTUBE_CHANGEID_ID,"影片，要更換的 id：");
394+
.appendField(Blockly.Msg.DEMO_YOUTUBE_CHANGEID_ID, "影片，要更換的 id：");
395395
this.setPreviousStatement(true);
396396
this.setNextStatement(true);
397397
this.setTooltip('');
@@ -400,29 +400,19 @@ Blockly.Blocks['demo_youtube_id'] = {
400400
}
401401
};
402402

403+
//https://blockly-demo.appspot.com/static/demos/blockfactory/index.html#85c65d
403404
Blockly.Blocks['demo_tracking'] = {
404405
init: function () {
406+
this.appendValueInput("var_")
407+
.appendField(Blockly.Msg.DEMO_TRACKING_SET, "設定影像追蹤");
405408
this.appendDummyInput()
406-
.appendField(Blockly.Msg.DEMO_TRACKING_SET,"載入辨識")
409+
.appendField(Blockly.Msg.DEMO_TRACKING, "追蹤")
407410
.appendField(new Blockly.FieldDropdown([
408-
[Blockly.Msg.DEMO_TRACKING_COLOR, "color"],
409-
[Blockly.Msg.DEMO_TRACKING_FACE, "face"]
410-
]), "type_")
411-
.appendField(Blockly.Msg.DEMO_TRACKING_MODULE,"模組");
412-
this.setPreviousStatement(true);
413-
this.setNextStatement(true);
414-
this.setTooltip('');
415-
this.setColour(Blockly.Blocks.colour.HUE);
416-
this.setHelpUrl('http://www.example.com/');
417-
}
418-
};
419-
420-
Blockly.Blocks['demo_tracking_on'] = {
421-
init: function () {
422-
this.appendDummyInput()
423-
.appendField(Blockly.Msg.DEMO_TRACKING_START,"開始辨識");
411+
[Blockly.Msg.DEMO_TRACKING_FACE, "face"],
412+
[Blockly.Msg.DEMO_TRACKING_COLOR, "color"]
413+
]), "type_");
424414
this.appendStatementInput("do_")
425-
.appendField(Blockly.Msg.DEMO_TRACKING_DO,"執行 ( 可不填 )");
415+
.appendField(Blockly.Msg.DEMO_TRACKING_DO, "追蹤成功時，將會執行");
426416
this.setPreviousStatement(true);
427417
this.setNextStatement(true);
428418
this.setTooltip('');
@@ -431,10 +421,15 @@ Blockly.Blocks['demo_tracking_on'] = {
431421
}
432422
};
433423

434-
Blockly.Blocks['demo_tracking_run'] = {
424+
Blockly.Blocks['demo_tracking_action'] = {
435425
init: function () {
436426
this.appendDummyInput()
437-
.appendField(Blockly.Msg.DEMO_TRACKING_RUN,"繼續辨識");
427+
.appendField(new Blockly.FieldVariable("track"), "name_")
428+
.appendField(new Blockly.FieldDropdown([
429+
[Blockly.Msg.DEMO_TRACKING_RUN, "run"],
430+
[Blockly.Msg.DEMO_TRACKING_STOP, "stop"]
431+
]), "action_")
432+
.appendField(Blockly.Msg.DEMO_TRACKING_TRACK, "追蹤");
438433
this.setPreviousStatement(true);
439434
this.setNextStatement(true);
440435
this.setTooltip('');
@@ -443,29 +438,59 @@ Blockly.Blocks['demo_tracking_run'] = {
443438
}
444439
};
445440

446-
Blockly.Blocks['demo_tracking_stop'] = {
441+
Blockly.Blocks['demo_tracking_face'] = {
447442
init: function () {
448443
this.appendDummyInput()
449-
.appendField(Blockly.Msg.DEMO_TRACKING_STOP,"停止辨識");
444+
.appendField(new Blockly.FieldVariable("track"), "name_")
445+
.appendField(Blockly.Msg.DEMO_TRACKING_FACESETTING, "人臉 追蹤設定 ( 非必要 )");
446+
this.appendDummyInput()
447+
.appendField("EdgesDensity")
448+
.appendField(new Blockly.FieldDropdown([
449+
["0.1", "0.1"],
450+
["0.2", "0.2"],
451+
["0.3", "0.3"],
452+
["0.4", "0.4"],
453+
["0.5", "0.5"]
454+
]), "ed_")
455+
.appendField(" StepSize")
456+
.appendField(new Blockly.FieldDropdown([
457+
["0.5", "0.5"],
458+
["1", "1"],
459+
["1.5", "1.5"],
460+
["2", "2"],
461+
["3", "3"],
462+
["4", "4"],
463+
["5", "5"]
464+
]), "ss_")
465+
.appendField(" InitialScale")
466+
.appendField(new Blockly.FieldDropdown([
467+
["1", "1"],
468+
["2", "2"],
469+
["3", "3"],
470+
["4", "4"],
471+
["5", "5"],
472+
["6", "6"],
473+
["7", "7"]
474+
]), "is_");
475+
this.setColour(Blockly.Blocks.colour.HUE);
450476
this.setPreviousStatement(true);
451477
this.setNextStatement(true);
452478
this.setTooltip('');
453-
this.setColour(Blockly.Blocks.colour.HUE);
454479
this.setHelpUrl('http://www.example.com/');
455480
}
456481
};
457482

458483
Blockly.Blocks['demo_tracking_val'] = {
459484
init: function () {
460485
this.appendDummyInput()
461-
.appendField(Blockly.Msg.DEMO_TRACKING_VAL,"辨識數值")
486+
.appendField(Blockly.Msg.DEMO_TRACKING_VAL, "追蹤數值")
462487
.appendField(new Blockly.FieldDropdown([
463488
["x", "x"],
464489
["y", "y"],
465490
["width", "width"],
466491
["height", "height"],
467492
[Blockly.Msg.DEMO_TRACKING_VALTOTAL, "total"],
468-
[Blockly.Msg.DEMO_TRACKING_VALCOLOR, "color"]
493+
[Blockly.Msg.DEMO_TRACKING_VALCOLOR, "color"]
469494
]), "val_");
470495
this.setOutput(true);
471496
this.setTooltip('');

‎code.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -389,6 +389,8 @@ Code.loadDemoArea = function (demo) {
389389
demo.content(6);
390390
} else if (localStorage.demoAreaSelect == 7) {
391391
demo.content(7);
392+
} else if (localStorage.demoAreaSelect == 8) {
393+
demo.content(8);
392394
}
393395
}
394396
}

‎generators/webduino.js‎

Lines changed: 64 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,9 @@ Blockly.JavaScript['demo_youtube_status'] = function (block) {
273273
Blockly.JavaScript['demo_youtube_id'] = function (block) {
274274
var variable_name_ = Blockly.JavaScript.variableDB_.getName(block.getFieldValue('name_'), Blockly.Variables.NAME_TYPE);
275275
var value_id_ = Blockly.JavaScript.valueToCode(block, 'id_', Blockly.JavaScript.ORDER_ATOMIC);
276-
var code = variable_name_ + '.loadVideoById(' + value_id_ + ');\n';
276+
var code;
277+
278+
variable_name_ + '.loadVideoById(' + value_id_ + ');\n';
277279
return code;
278280
};
279281

@@ -312,94 +314,96 @@ Blockly.JavaScript['math_value_conversion'] = function (block) {
312314
};
313315

314316
Blockly.JavaScript['demo_tracking'] = function (block) {
317+
var value_var_ = Blockly.JavaScript.valueToCode(block, 'var_', Blockly.JavaScript.ORDER_ATOMIC);
315318
var dropdown_type_ = block.getFieldValue('type_');
319+
var statements_do_ = Blockly.JavaScript.statementToCode(block, 'do_');
320+
var share = value_var_ + '.myTracker.on("track", function(event) {\n' +
321+
' if (event.data.length === 0) {\n' +
322+
' ' + value_var_ + '.context.clearRect(0, 0, ' + value_var_ + '.canvas.width, ' + value_var_ + '.canvas.height);\n' +
323+
' } else {\n' +
324+
' ' + value_var_ + '.context.clearRect(0, 0, ' + value_var_ + '.canvas.width, ' + value_var_ + '.canvas.height);\n' +
325+
' event.data.forEach(function(data) {\n' +
326+
' ' + statements_do_ +
327+
' if(data.color){\n' +
328+
' ' + value_var_ + '.context.strokeStyle = ' + value_var_ + '.storkColor[data.color];\n' +
329+
' }else{\n' +
330+
' ' + value_var_ + '.context.strokeStyle = "#f00";\n' +
331+
' }\n' +
332+
' ' + value_var_ + '.context.lineWidth = 5;\n' +
333+
' ' + value_var_ + '.context.strokeRect(data.x, data.y, data.width, data.height-30);\n' +
334+
' ' + value_var_ + '.context.font = "11px Helvetica";\n' +
335+
' ' + value_var_ + '.context.fillStyle = "#fff";\n' +
336+
' });\n' +
337+
' }\n' +
338+
'});\n' +
339+
value_var_ + '.trackerTask = tracking.track("#demo-area-08-video", ' + value_var_ + '.myTracker, {\n' +
340+
' camera: true\n' +
341+
'});\n\n';
316342
var code;
317343
if (dropdown_type_ == 'color') {
318-
code = 'var canvas = document.getElementById("demo-area-08-canvas");\n' +
319-
'var context = canvas.getContext("2d");\n' +
344+
code = value_var_ + ' = {};\n' +
345+
value_var_ + '.canvas = document.getElementById("demo-area-08-canvas");\n' +
346+
value_var_ + '.context = ' + value_var_ + '.canvas.getContext("2d");\n' +
320347
'tracking.ColorTracker.registerColor("red", function(r, g, b) {\n' +
321-
' if (r > 150 && g < 50 && b < 50) {\n' +
348+
' if (r > 160 && g < 80 && b < 80) {\n' +
322349
' return true;\n' +
323350
' }\n' +
324351
' return false;\n' +
325352
'});\n' +
326-
'tracking.ColorTracker.registerColor("black", function(r, g, b) {\n' +
327-
' if (r < 50 && g < 50 && b < 50) {\n' +
328-
' return true;\n' +
329-
' }\n' +
330-
' return false;\n' +
331-
'});\n' +
332-
'tracking.ColorTracker.registerColor("white", function(r, g, b) {\n' +
333-
' if (r > 200 && g > 200 && b > 200) {\n' +
353+
'tracking.ColorTracker.registerColor("green", function(r, g, b) {\n' +
354+
' if (r < 80 && g > 160 && b < 80) {\n' +
334355
' return true;\n' +
335356
' }\n' +
336357
' return false;\n' +
337-
'});\n' +
338-
'tracking.ColorTracker.registerColor("green", function(r, g, b) {\n' +
339-
' if (r < 50 && g > 150 && b < 50) {\n' +
358+
'});\n\n' +
359+
'tracking.ColorTracker.registerColor("blue", function(r, g, b) {\n' +
360+
' if (r < 80 && g < 80 && b > 160) {\n' +
340361
' return true;\n' +
341362
' }\n' +
342363
' return false;\n' +
343364
'});\n\n' +
344-
'var myTracker = new tracking.ColorTracker(["magenta", "cyan", "yellow", "red", "black", "white", "green"]);\n' +
345-
'var storkColor = {\n' +
346-
' magenta: "#f09",\n' +
365+
value_var_ + '.myTracker = new tracking.ColorTracker(["magenta", "cyan", "yellow", "red", "green", "blue"]);\n' +
366+
value_var_ + '.storkColor = {\n' +
367+
' magenta: "#f0a",\n' +
347368
' red: "#f00",\n' +
348369
' cyan: "#0ff",\n' +
349370
' yellow: "#ff0",\n' +
350-
' black: "#000",\n' +
351-
' white: "#fff",\n' +
352-
' green: "#0c0"\n' +
353-
'};\n\n';
371+
' green: "#0c0",\n' +
372+
' blue: "#00f"\n' +
373+
'};\n\n' +
374+
share;
354375
} else if (dropdown_type_ == 'face') {
355-
code = 'var canvas = document.getElementById("demo-area-08-canvas");\n' +
356-
'var context = canvas.getContext("2d");\n\n' +
357-
'var myTracker = new tracking.ObjectTracker("face");\n' +
358-
'myTracker.setInitialScale(3);\n' +
359-
'myTracker.setStepSize(1.5);\n' +
360-
'myTracker.setEdgesDensity(0.1);\n\n';
376+
code = value_var_ + ' = {};\n' +
377+
value_var_ + '.canvas = document.getElementById("demo-area-08-canvas");\n' +
378+
value_var_ + '.context = ' + value_var_ + '.canvas.getContext("2d");\n' +
379+
value_var_ + '.myTracker = new tracking.ObjectTracker("face");\n' +
380+
value_var_ + '.myTracker.setInitialScale(4);\n' +
381+
value_var_ + '.myTracker.setStepSize(0.5);\n' +
382+
value_var_ + '.myTracker.setEdgesDensity(0.1);\n\n' +
383+
share;
361384
}
362385
return code;
363386
};
364387

365-
Blockly.JavaScript['demo_tracking_on'] = function (block) {
366-
var statements_do_ = Blockly.JavaScript.statementToCode(block, 'do_');
367-
var code = 'myTracker.on("track", function(event) {\n' +
368-
' if (event.data.length === 0) {\n' +
369-
' context.clearRect(0, 0, canvas.width, canvas.height);\n' +
370-
' } else {\n' +
371-
' context.clearRect(0, 0, canvas.width, canvas.height);\n' +
372-
' event.data.forEach(function(data) {\n' +
373-
' '+statements_do_+
374-
' if(data.color){\n' +
375-
' context.strokeStyle = storkColor[data.color];\n' +
376-
' }else{\n' +
377-
' context.strokeStyle = "#f00";\n' +
378-
' }\n' +
379-
' context.lineWidth = 5;\n' +
380-
' context.strokeRect(data.x, data.y, data.width, data.height-30);\n' +
381-
' context.font = "11px Helvetica";\n' +
382-
' context.fillStyle = "#fff";\n' +
383-
' });\n' +
384-
' }\n' +
385-
'});\n' +
386-
'var trackerTask = tracking.track("#demo-area-08-video", myTracker, {\n' +
387-
' camera: true\n' +
388-
'});\n\n' +
389-
'trackerTask.run();\n';
388+
Blockly.JavaScript['demo_tracking_face'] = function (block) {
389+
var variable_name_ = Blockly.JavaScript.variableDB_.getName(block.getFieldValue('name_'), Blockly.Variables.NAME_TYPE);
390+
var dropdown_ed_ = block.getFieldValue('ed_');
391+
var dropdown_ss_ = block.getFieldValue('ss_');
392+
var dropdown_is_ = block.getFieldValue('is_');
393+
var code = variable_name_ + '.myTracker.setInitialScale('+dropdown_is_+');\n' +
394+
variable_name_ + '.myTracker.setStepSize('+dropdown_ss_+');\n' +
395+
variable_name_ + '.myTracker.setEdgesDensity('+dropdown_ed_+');\n\n';
390396
return code;
391397
};
392398

393-
Blockly.JavaScript['demo_tracking_run'] = function (block) {
394-
var code = 'trackerTask.run();\n';
399+
Blockly.JavaScript['demo_tracking_action'] = function (block) {
400+
var variable_name_ = Blockly.JavaScript.variableDB_.getName(block.getFieldValue('name_'), Blockly.Variables.NAME_TYPE);
401+
var dropdown_action_ = block.getFieldValue('action_');
402+
var code = variable_name_ + '.context.clearRect(0, 0, ' + variable_name_ + '.canvas.width, ' + variable_name_ + '.canvas.height);\n' +
403+
variable_name_ + '.trackerTask.' + dropdown_action_ + '();\n';
395404
return code;
396405
};
397406

398-
Blockly.JavaScript['demo_tracking_stop'] = function (block) {
399-
var code = 'context.clearRect(0, 0, canvas.width, canvas.height);\n' +
400-
'trackerTask.stop();\n';
401-
return code;
402-
};
403407

404408
Blockly.JavaScript['demo_tracking_val'] = function (block) {
405409
var dropdown_val_ = block.getFieldValue('val_');

‎views/index.handlebars‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -177,9 +177,9 @@
177177
<video id="demo-area-08-video" preload autoplay loop muted controls></video>
178178
<canvas id="demo-area-08-canvas" ></canvas>
179179
</div>
180-
<span style="font-size:12px;"><strong>tracking-min.js</strong></span>
180+
<span style="font-size:12px;"><a href="http://blockly.webduino.io/lib/tracking-min.js" target="_blank">tracking-min.js</a></span>
181181
<br/>
182-
<span style="font-size:12px;"><strong>face-min.js</strong></span>
182+
<span style="font-size:12px;"><a href="http://blockly.webduino.io/lib/face-min.js" target="_blank">face-min.js</a></span>
183183
<br/><br/>
184184
<h5>HTML:</h5>
185185
<pre class="demo-pre">&lt;div id=&quot;demo-area-08-content&quot;&gt;
@@ -1081,11 +1081,16 @@
10811081
<block type="demo_youtube_speed"></block>
10821082
</category>
10831083
<category id="catTracking">
1084-
<block type="demo_tracking"></block>
1085-
<block type="demo_tracking_on"></block>
1086-
<block type="demo_tracking_run"></block>
1087-
<block type="demo_tracking_stop"></block>
1084+
<block type="demo_tracking">
1085+
<value name="var_">
1086+
<block type="variables_get">
1087+
<field name="VAR">track</field>
1088+
</block>
1089+
</value>
1090+
</block>
1091+
<block type="demo_tracking_action"></block>
10881092
<block type="demo_tracking_val"></block>
1093+
<block type="demo_tracking_face"></block>
10891094
</category>
10901095
</category>
10911096
</xml>

0 commit comments

Comments
 (0)