Tag Archives: 積木

[BlocklyDuino] 自製Blockly積木教學,以Linux、 windows10系統製作積木

本文說明Blocklyduino 的檔案架構以及範例:如何自製一個弧度轉角度的數學指令。

※此例為使用Windows 10 操作

 

作者/攝影 翁偉傑
時間  1小時
成本
難度  *  *  *  *
材料表
  • Linux or Windows10作業環境
  • 7697BlocklyDuino環境

環境需求:

  • win執行需運行Ubuntu Linux 的Bash Shell
  • mac可直接在terminal執行
  • 需安裝Python且須使用7以前的版本,需要import lxml 函式庫(Python) 在shell輸入pip install lxml,此函式庫可處理xml & html格式資料 。
  • blockly/apps/blocklyduino/index.html & offline-editor/main.html

切勿手動修改,會被覆蓋可能引發錯誤

 

BlocklyDuino檔案架構:

1.   首先請用 git 下載 MediaTek-Labs的Github。下載完成後,解壓縮到任何你知道的位置。

2.   解壓縮之後有許多資料夾,簡述如下:

  • blockly:是我們主要新增使用到的資料夾
  • example:範例程式,每個資料夾都會有一個同名的 .ino 與 .xml 檔。Blocklyduino 可匯入這個 .xml檔來開啟範例。

  • offline-editor:是將blocklyduino作為Chrome的擴充套件
  • html:會連結至blockly/apps/blocklyduino/index.html,可離線執行網頁版blocklyduino
  • sh:重新編譯時要用到本指令

  1. 進入blockly/blocks資料夾中,在此有對應設定Blocks外觀之程式碼,可以定義版型、顏色、積木連結位置、輸入… (與arduino程式無關,但在此須設定參數以及其類型 )

例如開啟 dht.js 即可看到 dht溫濕度感測器相關指令

常用的函數指令:

  • setHelpUrl:說明文件網址,在IDE中對某指令點選右鍵->說明(HELP)即可進入。
  • setColour:Block的色調
  • setPreviousStatement & this.setNextStatement:決定本指令的上與下是否能再接受其他Block
  • appendDummyInput():告訴程式此處要塞字串
    • appendField 則是引導程式到字串的地方
      • 延伸用法:appendField(new Blockly.FieldDropdown(OPERATORS), ‘OP’);
      • 可以插入圖片 如下: .appendField(new Blockly.FieldImage(Blockly.Blocks.servo.image, 64, 64))
      • 可以輸入值 如下:.appendField(new Blockly.FieldTextInput(“255″),”TOHIGH”);
    • setCheck:確認資料型別
    • setAlign:確認邊界
    • setTooltip:是將blocky\msg資料夾中相關的說明訊息映射至Block中供使用者可以在IDE中參閱。將滑鼠放置某個block上即會顯示,如下圖。

  • FieldDropdown:建立下拉式選單
    • 以appendField(new Blockly.FieldDropdown(OPERATORS), ‘OP’)為例,OPERATORS是變數名稱。在Logic裡面的範例中,OPERATOR會引導到在同一個Block的Tooltip變數中,再轉換成字串

例如數學中的 + 實際上是六個指令的集合,可以透過下拉式選單來切換

  • setOutput:變成Data Block,從右邊插入其他Block
  • setPreviousStatement上方可接其他Block
  • setNextStatement下方可接其他Block

  • appendValueInput:允許該block右側產生輸入欄位你讓Data Block從右邊插入
    • appendValueInput(“VariableName”):VariableName 可在寫轉換Arduino code時使用
    • .setcheck:則是決定輸入的資料型態。 Number, string …

可以允許多個setcheck,不允許的資料型態將無法放入該輸入欄位中。

 

  • appendDummyInput:沒有讓Data Block從右邊插入的功能,但是可以讓你繼續增加Block內部的文字字串,不需要在appendDummyinput()裡面宣告特定的文字,也可以塞一些選項
    • 可加入上述 appendField()之各種用法

 

4.      blockly/generators/arduino資料夾:此資料夾下皆是負責將blocks轉換為Arduino code,Generator 會生成對應 Blocks 的 Arduino code,因此在 BlocklyDuino\blockly\Blocks 資料夾下的檔案或 function,在 Generator 端都要有一個同樣函數名稱的對應。

  • 注意:Blocks[‘function name’] 務必要注意兩邊function name的名稱要相同
  • 最後要 return,以顯示在 IDE 之 Arduino 頁面
  • 還有要注意的是,在同一個Block中,function name 的部分要避免使用相同的名字,否則在轉為Arduino Code中的時候將會產生後宣告的function覆蓋掉前面的同名Function的情形。
  • 關於Arduino.ORDER_ATOMIC,則是會告訴 Blockyduino 現在即將要進到下一個 Block 而不是進到子Block運行。

 

Example:

  • 當item=1000 賦值完畢後,function將會return Blockly.Arduino.ORDER_ATOMIC,並開始執行下一個Block的指令。

5.     blockly/msg資料夾:msg目錄下的js檔案,此功能為將blocks資料下的變數名稱對映到實際的block上,在js資料夾下還有en.js & zh-hant.js需一併更改,功能為將變數名稱改為不同語系。

※在blockly/blocks與blockly/generators中的js檔創建block時,選擇哪個js檔或自行創建js檔案並不會影響在實際使用blocklyduino時的位置,block位置皆是由category.xml設定之。

 

自製一個弧度轉角度的數學指令

1.   更新 Windows 10

Build 14316  微軟從 Windows 10 開始加入原生的 Ubuntu Linux 環境,Linux 的開發者現在可以在 Windows 10 系統中直接使用 bash shell

2.      安裝 bash

點選Wins 10開始 → 更新與安全性 → 開發人員專用 → 選擇開發人員模式

回到設定首頁 → App → 應用程式與功能 → 程式與功能 → 左側點選開啟或關閉

Windows功能 → 將”適用於Linux的Windows的子系統(搶鮮版(Beta))”勾選 → Windows 點選重新開機

重新開機後 → 開啟cmd → 在cmd輸入”bash” → 依照指示步驟安裝Ubuntu

 

3.      設定block外觀:

於/blockly/blocks 新增該 block 的外觀定義,以本指令來說要加在 math.js 中的最底部,(※注意不要放在任何括號中),如下:

Blockly.Blocks['math_radian_to_degree'] = {
 init: function() {
   this.setHelpUrl(Blockly.Msg.MATH_RADIAN_TO_DEGREE_HELPURL);
   this.setColour(Blockly.Blocks.math.HUE);
   this.appendValueInput("RADIAN")
     .setCheck("Number")
     .appendField(Blockly.Msg.MATH_RADIAN_TO_DEGREE_TITLE);
   this.appendDummyInput()
     .appendField(Blockly.Msg.MATH_RADIAN_TO_DEGREE_APPEND);
   this.setInputsInline(true);
   this.setOutput(true, "Number");
   this.setTooltip(Blockly.Msg.MATH_RADIAN_TO_DEGREE_TOOLTIP);
 }
};

4.      設定block之Arduino轉換碼:

於/blockly/generator/arduino資料夾中,新增該 block的邏輯。以本指令來說要加在 math.js 中的最底部(※注意非3. 的math.js,且不要貼於任何括號中) ,如下:

Blockly.Arduino['math_radian_to_degree'] = function(block) {
 Blockly.Arduino.definitions_['const_pi'] = 'const float __MPI = ' + Math.PI + ';';

 var code_radiansFromDegree = '\n' +
'float __radiansFromDegree(float radians) {\n'+
'  return radians * 360 / 2 / __MPI;\n' +
'}\n';
 Blockly.Arduino.definitions_['radiansFromDegree'] = code_radiansFromDegree;

 var argument0 = Blockly.Arduino.valueToCode(block, 'RADIAN',
                                             Blockly.Arduino.ORDER_NONE) || 0;
 console.log(Math.PI);
 var code = '__radiansFromDegree(' + argument0 + ')';
 return [code, Blockly.Arduino.ORDER_NONE];
};

 

5.      更改block上顯示語言:

更改在msg目錄下的js檔案,此功能為將blocks資料下的變數名稱對映到實際的block上,在js資料夾下還有en.js & zh-hant.js需一併更改,功能為將變數名稱改為不同語系。

先依第1步驟搜尋MATH_DEGREE,接著在第2步的位置放入程式碼,英文版亦同。

Blockly.Msg.MATH_RADIAN_TO_DEGREE_HELPURL = "https://en.wikipedia.org/wiki/Radian";
Blockly.Msg.MATH_RADIAN_TO_DEGREE_TITLE = "Radian";
Blockly.Msg.MATH_RADIAN_TO_DEGREE_APPEND = "turn into degree";
Blockly.Msg.MATH_RADIAN_TO_DEGREE_TOOLTIP = "";
Blockly.Msg.MATH_RADIAN_TO_DEGREE_HELPURL = "https://en.wikipedia.org/wiki/Radian";
Blockly.Msg.MATH_RADIAN_TO_DEGREE_TITLE = "弧度";
Blockly.Msg.MATH_RADIAN_TO_DEGREE_APPEND = "轉換為角度";
Blockly.Msg.MATH_RADIAN_TO_DEGREE_TOOLTIP = "";

6.      加入製作的block至目錄:

將新增的Block加入blockly/apps/blocklyduino/category.xml,這裡的順序、category位置就是實際顯示順序。type名稱需與定義block版型之名稱相同。請注意我們在<category math>標籤中加入了一個新的 block:

 <block type = “math_radian_to_degree”></block>

 

7.      build檔案 :

最後請開啟cmd

輸入bash

輸入cd BlocklyDuino-for-LinkIt-master    進入資料夾

輸入ls    確定資料夾內有make.sh

輸入sh make.sh     去建立檔案

 

make.sh 要沒有 error 才會正確產生所有檔案

目前Github最新版本的資料

為 @x43x61x69 修改後之版本

修改過 make.sh 和其他 script

會檢查所需的 command 是否存在

之前的版本沒有檢查

bash
cd BlocklyDuino-for-LinkIt-master 
ls
sh make.sh

成功建立之畫面

 

Blocklyduino畫面

 

Blocklyduino轉Arduino code畫面

常見問題:

  1. 找不到新增的block:可能在xml新增的位置有問題。

或是如果再terminal看到ERROR訊息寫”NameError: name ‘lxml’ is not defined” or “ImportError: No module named lxml.html”,則需要將lxml安裝後,在重新輸入sh make.sh。

  1. block全部重疊在一起:如下圖,可能有更動到html檔,以至於覆蓋掉原本的code導致出錯,請使用sh make.sh重新建立一次。

 

相關文章:

 

[ 起步學習電子實作新選擇 ] 模組化電子積木BOSON開箱

 

作者/攝影 李政憲
時間  1-2小時
成本 尚未開賣
難度  *
材料表
  • Boson 套件包

一款由DFROBORT打造的人性化BOSON套件問世,這真是令我們感到興奮。

下列影片為Dfrobot針對Boson的官方影片,看起來非常容易上手呢!

 

每當新的科技推出,我們不免要花上些許時間摸索、適應。而這一款以小朋友為主的學習電子積木方塊,其實它不僅僅只侷限於小朋友,平常忙碌的大人們也可以在零碎的時間玩上一會,也不用擔心困難重重,就讓我們一窺這一箱BOSON套件帶給我們的驚奇吧!

這是我們BOSON套件箱子的模樣,包裝視覺真是非常的可愛。

打開箱子後裡面有三張範例紙、一張材料紙、各式各樣功能的電子積木、特別設計過的連接線、固定用的螺絲和魔鬼氈、扇葉以及LED燈。如此多種的套件,真是讓人迫不急待地想要拿起來玩呢!

Boson套件最厲害的地方,就是它把各個測試元件和電路全部統一在這一個電子積木裡、無編碼的簡易,還有他特別的設計接口。這可是大大減少我們拿麵包板插上測試元件,然後接上電路之後,所要花的檢查時間。

再來的是Boson套件把四種功能分別用顏色做出區分,每個功能都有屬於自己的顏色,這對於被電子積木化後,是一個非常好的區別方式

輸入:藍色 輸出:綠色 功能:黃色 功率:粉紅色

(此圖片來自DFROBOT官網)

 

電子積木此次還有一個別出心裁的設計,讓他可以不受限制,能在各種地方裝置,那就是在他的後方利用了3種方式作按制裝置。我們可以把它放在樂高積木上、魔鬼氈黏著還有用螺絲固定,每種方式都用磁鐵做相連接。這可是大大的增加它廣泛的使用性。

當我們讓它垂直的時候,還真的是屹立不搖呢

再來就是動手做的時間啦!Boson套件內含三張範例紙,就讓我們來實際的玩一玩它帶給我們的簡單操作和方便性吧。

 

範例一、使用旋轉鈕調節燈的亮滅

上述的解說我們可以知道,藍色方塊是輸入、紛紅色方塊是供電、綠色方塊是輸出。

輸入是旋轉鈕,當我們去轉動它,藉由中間的粉紅色供電使這整組運作,讓輸出顯示出LED燈亮滅。

 

範例二、學習運用NOT邏輯方塊

NOT邏輯方塊是執行相反的動作。

使用按鈕控制兩個LED燈的亮滅來觀察,其中一個前面我們放一個NOT邏輯方塊。當我們還沒按下按鈕的時候,紅色LED燈是不亮的,藍色因為前方有一個NOT邏輯方塊,因此它會亮。按下按鈕後,紅色LED燈發亮,藍色LED燈反而不亮了,顯示出NOT邏輯方塊的確是在做相反的動作。

 

範例三、學習運用OR邏輯方塊

OR邏輯方塊是完成其中一樣條件來達成我要的目標。

我們用兩個按鈕和一個藍色LED燈來表示。我們選擇其中一個按鈕按下,便可以使藍色LED燈亮,因為只要完成其中一樣就可以達成目標。但是也可以兩個同時按下,藍色LED燈也會發亮。

範例四、結合ANDOR邏輯方塊

AND邏輯方塊是必須完成所有條件來達成我要的目標。

這是我個人玩的一點小遊戲,我用AND邏輯方塊和OR邏輯方塊,來控制LED燈的亮和電風扇轉動。同上一個範例,我按下黃色按鈕或者是同時按下藍色按鈕加觸控感應器,第二個條件有點小複雜是我必須要兩個同時達成才算達成目標,再來才會到OR的邏輯方塊,因此成功讓LED燈亮以及風扇轉動。大家是不是覺得這樣接一接,就可以有那多變化,是不是很好玩呢

當然BOSON套件雖說主打無編碼的優勢,但是他仍可以使用簡易的編碼做結合,像是我們大家耳熟能詳的Scratch,不過在未來DFROBOT還可以讓ARDUINO、MICRO:BIT、INTEL來寫入程式。因此其實這一款的BOSON套件可是前途無量,不僅僅是簡易的操作,還有運用的範圍很全面,相信他能帶給我們未來更多的便利性。

(此圖片來自DFROBOT)

 

 

 

[阿倫與小公主遊展覽 ] 小積木大冒險特展-希兒與劍聖

樂高積木是很多小朋友的夢想,當然也曾經是我的夢想,但小時候由於樂高積木高單價讓我很少有機會玩到它。無論如何每當有機會去百貨公司時總是在樂高陳列櫃前駐足多時。等到長大了也偶有機會買幾個玩玩,自己過過癮。這次忽然有機會聽聞這樣一個樂高展覽,能不心動嗎?

作者/攝影  陳煜倫 
展覽時間
  • 105年12月23日(五)至106年4月4日(二)
  • 周一至周日 10:00-18:00 (17:30 停止售票及入場)
票價  單人票:280元   購票資訊
展覽地點 中正紀念堂─中正藝廊 (臺北市中正區中山南路21號)

出發前有稍微看一下售票資訊$240,有點忍不住想我真的要花一頓大餐的錢來看展覽嗎?可是想想好不容易有這樣一個展覽,就這樣錯過好像很可惜,也就想不如全家一起去,就當是去遊樂園玩一天好了。何況去遊樂園玩也不會有自己玩的機會,這展覽自己也可以玩到,何樂而不為呢?我家有兩隻皮蛋,就讓她們消耗一下精力好了。

我家小公主一到現場就開始擺pose拍完她妹妹小阿毛也說要拍。

樂高積木展覽裡的樂高小人差不多都與小阿毛的高度相同(在這裡也能夠看出策展單單位的用心呢)。

還記得以前喜歡玩角色扮演遊戲,總是喜歡看裡面的故事劇情,每每也都有發人深省或感人催淚的故事,我想希兒的故事也不會讓我失望吧!?

進入展覽的起頭,當然還是要先來介紹一下起源及設計團隊介紹。

在地圖上有些積木製的小房子,對照了一下就會發現這些就是前方地圖上各個王國(城邦),或許故意要讓人有縮小的感覺,與一旁的壯麗山川搭配起來完全沒有違和感。

這是希兒的房間,簡單的擺設沒有華麗的布置,RPG的故事主角總是要有一開始的平凡,慢慢走向之後的輝煌。可是這裡就可以看得出設計者使用簡單的配色,營造出勇者鬥惡龍一般西方冒險故事的民居樸實的場景,讓人感受出女主角希兒平靜生活的恬靜與溫馨。

別看這場景不大,看到旁邊標示的牌子才知道,這樣居然花了1200個樂高積木!!!!

小公主:別看我年紀小,我也拿得動聖斧呢!

這聖斧是故事中動亂的來源,因聖斧的出現獸人也因此產生了動亂與瘋狂,開始入侵人類世界。

這張是繪本裡面的圖片,因男女主角受到迫害而逃出,遇上了帥氣(?)的騎士。

接著看到了-拉雅村,感覺起來就很有田園風味,感覺就很想唱….我家前面有小河、後面有山坡。而且展示櫃的高度應該有特別安排讓小朋友們能夠不費力氣的觀看,小阿毛很輕易地看到展品,不需要人幫忙呢!

小村莊看起來很平靜,可是仔細一看,每一朵小花都要細細組裝,看起來真的很花時間呢。

這是米提絲之樹,是由慈悲的女神眼淚所化,用了很多透明的積木,營造出水的感覺,間間的高塔我本來認為是不是用黏的,結果仔細觀察居然有轉軸,我想這類的特殊積木應該不容易取得吧!

對月亮崇拜,因此有很多高塔金黃的色調,營造出魔法科技的輝煌感覺。

我特別喜歡這裡的魔法飛船,真的很有精靈那出塵的感覺,可是都沒有車庫啊?難道跟馬一樣拴住就好?

希兒終於又出現了,這下居然變成公主的身分了@@,那這把是我們小公主的信物嗎?

希兒進王城,我仿照繪本的角度也拍一張,不過禁止閃光燈,也無法打光,在氣勢上似乎就矮了一截,不過至少我這張有遠處照明感覺有室內挑高很高的感覺。

獅吼堡,這就是希兒所進入的王城,感覺得出這次的展覽很注重色彩,用顏色區分營造不同的感覺,在市集當中也能發現凍結中的交易形式,讓畫面很有自己的故事。

在野外的小角落也都有自己的小故事,或許這就是大家都能夠駐足觀賞許久的原因吧!

萊恩格德堡,故事中這是個軍事化的堡壘,除了險峻的地勢,認真巡邏的士兵,軍事的嚴肅緊張感表現得十分到位。

嚴肅中該有的故事還是都有表現出來,在展品旁依然可以看到故事說明及介紹,提供給更想詳細了解的人閱讀。

單獨的高塔總是讓人感覺神秘,有種難以親近又崇高的感覺,這個高塔藏著希兒的身世之謎,藉由不規則的外觀讓人有石砌的錯覺,我想這高塔應該沒有應該怎麼搭才對的說明書,我光是想像都覺得好佩服。

藏書塔小小一個實在看不出來,沒關係,這裡有放大版,是不是清楚多了。

希兒思考著自己應該如何做,或許深夜中孤單一人一直是思考的好時機,可是不需要座窗台吧!危險動作不要模仿喔!

這是一個水路繁華的城市,戰爭逐漸迫近,所有人都很緊張,在街道上也看得到不少人有武裝,創作者不忘KUSO一下放了兩個不知死活的海綿寶寶與派大星。

希兒為了結束戰爭出發尋找聖劍,而冒險總是會有意外,好好的冒險船都被拆了。

遇難後好不容易回到岸邊,收集船難的廢料做個馬車吧!

坐個馬車都能遇到飛龍騎士幫助,果真是強大的勇者主角阿。或許是受到帥氣飛龍照片影響,兩皮蛋居然搶著跟牠合照。龍果然士氣場強大的生物阿。

對綠龍的結構好奇,看了半天似乎是使用特殊零件,不然光兩個翅膀就不知道怎麼完成了。

聖劍遺跡居然在空中,還是隻鯨魚!?

都當上勇者了總是要尋寶一下嘛!再次用樂高產生不一樣的氛圍。用力觀察咬人寶箱,果然被我發現沒有裝上的地方,也對這牙齒的位置也太難了。

石頭人?石中劍?好像比小阿毛還小餒?

拿到了聖劍,希兒當然是馬不停蹄地回到戰亂中的家園。

家園已處於備戰狀態!可是我居然看見熊熊法師擊敗巨龍!果然可愛力量強大阿。

作品中很多都能看到用樂高勉強做出的圓形結構,其中最讓作者麼感到棘手的居然不是浩大的場景、高聳的建築,而是上圖白橘相間的飛船!聽說失敗了不少次才做出圓形的感覺呢!

策展單位設計的高度真是剛好啊。看小公主跟小阿毛看得目不轉睛,感受著激流堡的雄偉。

險峻的地勢,緊張的衛兵,這麼長時間的備戰,總該來戰一場了吧!

不是啦!是讓我們自己來場積木大戰啦!一直不能動手現在總可以過過癮了吧!

看兩個人都有得意作品呢!(這是菜嗎?能吃嗎?小阿毛我覺得妳比較好吃說!?)

策展單位有給每個小朋友任務小卡,這就是其中的一個小任務喔!

戰爭似乎就在聖劍出現後一路高歌凱旋,但是我們總是要看看打的過程吧!

獸人的部落風格建築,是不是跟人類世界有很大的不同呢?

海陸同時開打,獸人果然還是有兩把刷子的,連身海大章魚都有。

浩大的場面不是只有高聳的建築,看強大的『徵兵』來了。

故事總要有個結果,是小公主贏得最後的勝利?不是!是希兒打敗了獸人,讓獸人擺脫了聖斧的控制,與獸人和平共處並登基為女王。

故事結束展覽就結束了嗎?不!沒有。

看!超大的積木!感覺起來是木頭製作的。

這裡有些沒有列入希兒故事中的作品,但依然還是有積木可以玩,增加了不少互動性。

大人小孩似乎都玩得很高興,不過我在現場居然發現傳說中的官方版行星齒輪。

地獄火!!!

策展單位實在很大氣,這種限量版的東西都可以隨便玩,要不是玩到肚子餓了還真有點不想出去了。

大積木小積木輪著玩,澆菜採收,看起來真的很高興呢!^_^

小公主與小阿毛的小積木冒險終於結束了,可是展覽還沒有結束呢!這次的展覽一直到四月四日。我想這是大朋友小朋友玩樂與消耗體力的好地方!我想只要是喜愛樂高的人,大家應該都可以在這個展覽中發現自己感興趣的東西。

看策展單位介紹中似乎小積木特展還有後續,也許之後還會有其他主題的展出,我想小公主與小阿毛應該也會期待著吧!

非常推薦大家能夠利用假期來看看這樣子的展覽,在忙碌的生活中放鬆心靈、療癒身心,展現自己無瑕又久違的笑容吧!