0 簡介：

程式語言有彙編，高階語言，解釋語言等，現在圖形化程式設計也越來越流行。圖形化程式設計簡單易學。8年前,微軟推出了VPL用於機器人程式設計，如Python和JavaScript都可以用圖形化框圖實現程式，有趣直觀。

當然也可以用Matlab的Simulink實現：

圖1

1 參考資料：

這裡主要介紹用於ROS的圖形化程式設計工具，首先，主要參考網址如下：

其中，1 robot_blockly實現簡潔，並且介紹詳細，這裡不過多介紹。

這裡主要介紹2 code_it。

2 一個簡單互動的例子Blinky：

圖2

2.1 安裝：

依次輸入下面命令：

[html] view plain copy print?

1. curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -  
2. sudo apt-get install -y nodejs  

從https://github.com/hcrlab/blinky，下載並編譯，使用catkin(~/catkin_ws$ catkin_make)，不贅述。 [html] view plain copy print?

1. sudo apt-get install ros-indigo-rosbridge-server  

在blinky的frontend資料夾下(~/catkin_ws/src/blinky-indigo-devel/frontend$ npm install -g gulp bower)，依次執行下面命令： [html] view plain copy print?

1. npm install -g gulp bower  
2. npm install  
3. bower install  

完成後，使用gulp，看是否報錯，如果出錯，使用npm install xxx，下載對應功能包即可。

並用nvm use 4.6.1，選擇合適的node版本。

[html] view plain copy print?

1. ~/catkin_ws/src/blinky-indigo-devel/frontend$ nvm use 4.6.1  
2. Now using node v4.6.1 (npm v2.15.9)  

gulp： [html] view plain copy print?

1. ~/catkin_ws/src/blinky-indigo-devel/frontend$ gulp  
2. [13:51:49] Using gulpfile ~/catkin_ws/src/blinky-indigo-devel/frontend/gulpfile.js  
3. [13:51:49] Starting 'clean'...  
4. [13:51:50] Finished 'clean' after 472 ms  
5. [13:51:50] Starting 'default'...  
6. [13:51:50] Starting 'copy'...  
7. [13:51:50] Starting 'styles'...  
8. [13:51:51] styles all files 98 B  
9. [13:51:51] Finished 'styles' after 1.08 s  
10. [13:51:52] copy all files 16.77 MB  
11. [13:51:52] Finished 'copy' after 2.1 s  
12. [13:51:52] Starting 'elements'...  
13. [13:51:52] Finished 'elements' after 9.34 ms  
14. [13:51:52] Starting 'lint'...  
15. [13:51:53] Starting 'images'...  
16. [13:51:53] Starting 'fonts'...  
17. [13:51:53] Starting 'html'...  
18. [13:51:54] Finished 'fonts' after 461 ms  
19. [13:51:57] Finished 'lint' after 5.48 s  
20. [13:51:57] gulp-imagemin: Minified 7 images (saved 1.45 kB - 3.2%)  
21. [13:51:57] images all files 43.69 kB  
22. [13:51:57] Finished 'images' after 4.08 s  
23. [13:51:57] html all files 83.06 kB  
24. [13:51:57] Finished 'html' after 4.01 s  
25. [13:51:57] Starting 'vulcanize'...  
26. [13:52:00] vulcanize all files 628.85 kB  
27. [13:52:00] Finished 'vulcanize' after 2.53 s  
28. [13:52:00] Finished 'default' after 10 s  

2.2 使用：

分別在不同終端輸入下面命令：

[html] view plain copy print?

1. ~$ roslaunch rosbridge_server rosbridge_websocket.launch  

[html] view plain copy print?

1. logging to /home/exbot/.ros/log/084a8eba-a18a-11e6-9113-70f1a1ca7552/roslaunch-relay-Aspire-4741-6570.log  
2. Checking log directory for disk usage. This may take awhile.  
3. Press Ctrl-C to interrupt  
4. Done checking log file disk usage. Usage is <1GB.
5. started roslaunch server http://relay-Aspire-4741:38297/  
6. SUMMARY
7. ========  
8. PARAMETERS  
9.  * /rosbridge_websocket/address:   
10.  * /rosbridge_websocket/authenticate: False  
11.  * /rosbridge_websocket/delay_between_messages: 0  
12.  * /rosbridge_websocket/fragment_timeout: 600  
13.  * /rosbridge_websocket/max_message_size: None  
14.  * /rosbridge_websocket/port: 9090  
15.  * /rosbridge_websocket/retry_startup_delay: 5  
16.  * /rosdistro: indigo  
17.  * /rosversion: 1.11.20  
18. NODES  
19.   /  
20.     rosapi (rosapi/rosapi_node)  
21.     rosbridge_websocket (rosbridge_server/rosbridge_websocket)  
22. auto-starting new master  
23. process[master]: started with pid [6582]  
24. ROS_MASTER_URI=http://localhost:11311  
25. setting /run_id to 084a8eba-a18a-11e6-9113-70f1a1ca7552  
26. process[rosout-1]: started with pid [6595]  
27. started core service [/rosout]  
28. process[rosbridge_websocket-2]: started with pid [6602]  
29. process[rosapi-3]: started with pid [6613]  
30. registered capabilities (classes):  
31.  - rosbridge_library.capabilities.call_service.CallService  
32.  - rosbridge_library.capabilities.advertise.Advertise  
33.  - rosbridge_library.capabilities.publish.Publish  
34.  - rosbridge_library.capabilities.subscribe.Subscribe  
35.  - <class 'rosbridge_library.capabilities.defragmentation.Defragment'>
36.  - rosbridge_library.capabilities.advertise_service.AdvertiseService  
37.  - rosbridge_library.capabilities.service_response.ServiceResponse  
38.  - rosbridge_library.capabilities.unadvertise_service.UnadvertiseService  
39. [INFO] [WallTime: 1478152491.544249] Rosbridge WebSocket server started on port 9090  
40. [INFO] [WallTime: 1478152523.004659] Client connected.  1 clients total.  
41. [INFO] [WallTime: 1478152524.576138] [Client 0] Subscribed to /blinky/goal  
42. [INFO] [WallTime: 1478152524.583260] [Client 0] Subscribed to /blinky/cancel  

[html] view plain copy print?

1. ~/catkin_ws/src/blinky-indigo-devel/frontend$ gulp serve  

[html] view plain copy print?

1. [13:55:03] Using gulpfile ~/catkin_ws/src/blinky-indigo-devel/frontend/gulpfile.js  
2. [13:55:03] Starting 'lint'...  
3. [13:55:05] Starting 'styles'...  
4. [13:55:06] Starting 'elements'...  
5. [13:55:06] Starting 'images'...  
6. [13:55:06] Finished 'elements' after 128 ms  
7. [13:55:06] styles all files 98 B  
8. [13:55:06] Finished 'styles' after 1.36 s  
9. [13:55:07] Finished 'lint' after 3.49 s  
10. [13:55:07] gulp-imagemin: Minified 7 images (saved 1.45 kB - 3.2%)  
11. [13:55:07] images all files 43.69 kB  
12. [13:55:07] Finished 'images' after 1.71 s  
13. [13:55:07] Starting 'serve'...  
14. [13:55:07] Finished 'serve' after 101 ms  
15. [PSK] Access URLs:  
16.  --------------------------------------  
17.        Local: http://localhost:5001  
18.     External: http://192.168.1.102:5001  
19.  --------------------------------------  
20.           UI: http://localhost:3001  
21.  UI External: http://192.168.1.102:3001  
22.  --------------------------------------  
23. [PSK] Serving files from: .tmp  
24. [PSK] Serving files from: app  

開啟瀏覽器，輸入：http://localhost:5001/，就可以看到：

圖3

輸入：http://localhost:3001/，就可以看到：

圖4

[html] view plain copy print?

1. $ rostopic list   
2. /blinky/cancel  
3. /blinky/feedback  
4. /blinky/goal  
5. /blinky/result  
6. /blinky/status  
7. /rosout  
8. /rosout_agg  

在終端直接輸入下面命令，就可以釋出一段文字： [html] view plain copy print?

1. rostopic pub -1 blinky/goal blinky/FaceActionGoal "header:  
2.   seq: 0  
3.   stamp:  
4.     secs: 0  
5.     nsecs: 0  
6.   frame_id: ''  
7. goal_id:  
8.   stamp:  
9.     secs: 0  
10.     nsecs: 0  
11.   id: ''  
12. goal:  
13.   display_type: 'displayMessage'  
14.   h1_text: 'Hi relay,this is OK'  
15.   h2_text: 'Do you happy Now?'"  

圖5

更多內容檢視原版介紹，發現更多驚喜。

3 圖形化程式設計CodeIt!

一個獨立的Blockly程式設計應用程式，並與ROS整合。 它允許您使用圖形介面生成機器人的程式碼，並執行它。 你實現機器人的“創意”，它們與JavaScript的一個子集結合形成程式。您從介面可以執行程式並在程式中停止它們。
CodeIt！ 與RWS相容。

它是如何工作的？
CodeIt！提供前端和後端。前端是一個網站，它允許您使用Blockly程式設計介面建立程式。它還具有用於新增，更新或刪除程式的簡單介面。
後端提供了一個執行JavaScript程式的ROS actionlib伺服器。程式通過沙盒直譯器執行。您必須定義直譯器將執行的機器人基元。大多數原語只做了很少的工作，只是呼叫ROS服務。後端還包括已建立的程式的資料庫。
注意CodeIt！本身並不實現任何機器人功能。相反，它呼叫ROS服務來做機器人上的實際工作，假定存在提供這些服務的一些節點。由你來實現這些服務來做你的機器人的事情。我們有一些預先實現的這些服務的PR2和Turtlebot。然而，這些仍處於發展的早期階段，沒有記錄。如果您真的有興趣使用這些，請通過提交問題與我們聯絡，我們將很樂意提供幫助。

3.1 安裝

這個專案使用Git子模組，所以使用git clone --recursive [email protected]：hcrlab / code_it.git克隆這個repo。
要安裝，您需要克隆：
blinky - 用於基於Web的機器人面的ROS包
code_it_msgs
location_server - 用於儲存和檢索要導航到的位置
code_it_turtlebot或code_it_pr2 - 這些實現ROS服務實際控制機器人，CodeIt！呼叫。您也可以自己為另一個機器人實現這些服務，請參閱code_it_msgs檢視當前定義的服務。
您還需要安裝：
MongoDB - 安裝MongoDB和pymongo
確保pymongo是版本3（例如，3.3），如果沒有，升級使用命令：sudo pip install pymongo --upgrade
Meteor - 從Meteor網站安裝，ubuntu直接在終端輸入：curl https://install.meteor.com/ | sh
Node - 強烈建議使用nvm安裝Node。 nvm允許您輕鬆地在任意版本的節點之間安裝和切換。當部署到生產環境時，Meteor需要正確地構建舊版本的節點，而gulp需要更新版本的節點。使用nvm在兩者之間進行切換。
在frontend資料夾，執行npm install -g gulp bower && npm install && bower install

3.2 執行

主要分為四步，分別在不同終端執行，步驟和解釋如下：

1 roslaunch rosbridge_server rosbridge_websocket.launch
2 rosrun code_it programs.py - 這是儲存和載入程式到MongoDB和從MongoDB的後端。
3 從後端資料夾，執行 nvm use 0.10.40; meteor - 這是執行程式的JavaScript直譯器。
4 從frontend資料夾，執行 nvm use node; gulp serve - 這是前端。 用瀏覽器localhost：5000檢視頁面。

圖6

注意：meteor和gulp必須正常載入，如果報錯需要結合情況進行除錯，出現如下結果，就OK！：

meteor:

[html] view plain copy print?

1. [email protected]:~/catkin_ws/src/code_it-indigo-devel/backend$ meteor  
2. [[[[[ ~/catkin_ws/src/code_it-indigo-devel/backend ]]]]]  
3. => Started proxy.
4. => Meteor 1.4.2 is available. Update this project with 'meteor update'.
5. => Started MongoDB.
6. => Started your app.
7. => App running at: http://localhost:3000/  
8. I20161103-14:23:00.028(8)? Error connecting to websocket server.  
9. W20161103-14:23:00.026(8)? (STDERR) DEBUG: ROSLib uses utf8 encoding by default.It would be more efficent to use ascii (if possible)  

這時沒有啟動websocket server，啟動即可。

gulp:

[html] view plain copy print?

1. [email protected]:~/catkin_ws/src/code_it-indigo-devel/frontend$ gulp  
2. [14:22:02] Using gulpfile ~/catkin_ws/src/code_it-indigo-devel/frontend/gulpfile.js  
3. [14:22:02] Starting 'clean'...  
4. [14:22:03] Finished 'clean' after 633 ms  
5. [14:22:03] Starting 'default'...  
6. [14:22:03] Starting 'copy'...  
7. [14:22:03] Starting 'styles'...  
8. [14:22:05] styles all files 115.06 kB  
9. [14:22:05] Finished 'styles' after 2.21 s  
10. [14:22:06] copy all files 25.72 MB  
11. [14:22:06] Finished 'copy' after 3.53 s  
12. [14:22:06] Starting 'elements'...  
13. [14:22:06] Finished 'elements' after 9.43 ms  
14. [14:22:06] Starting 'lint'...  
15. [14:22:08] Starting 'images'...  
16. [14:22:09] Starting 'fonts'...  
17. [14:22:09] Starting 'html'...  
18. [14:22:09] Finished 'fonts' after 797 ms  
19. [14:22:13] Finished 'lint' after 7.14 s  
20. [14:22:13] gulp-imagemin: Minified 6 images (saved 494 B - 1.4%)  
21. [14:22:13] images all files 35.41 kB  
22. [14:22:13] Finished 'images' after 5.08 s  
23. [14:22:15] html all files 747.78 kB  
24. [14:22:15] Finished 'html' after 5.94 s  
25. [14:22:15] Starting 'vulcanize'...  
26. [14:22:19] vulcanize all files 1.52 MB  
27. [14:22:19] Finished 'vulcanize' after 3.95 s  
28. [14:22:19] Finished 'default' after 16 s  

圖7

啟動後效果如下：

圖8

圖9

-End-

原文地址：http://blog.csdn.net/zhangrelay/article/details/53020569