石從剛，宋劍英

(青島職業(yè)技術(shù)學(xué)院 海爾學(xué)院，山東 青島 266555)

基于流程圖的可視化編程技術(shù)的關(guān)鍵要素是掌握構(gòu)成流程圖的各種圖框的功能、編輯和使用，以及基于SETUP結(jié)構(gòu)、LOOP結(jié)構(gòu)和用戶編寫的其他結(jié)構(gòu)構(gòu)成的應(yīng)用系統(tǒng)流程圖的整體邏輯功能、執(zhí)行過程、各種結(jié)構(gòu)外在的邏輯關(guān)系。仿真平臺(tái)同時(shí)提供了豐富的外部硬件模塊，比如開關(guān)模塊、按鍵模塊、顯示器模塊、電機(jī)模塊和傳感器模塊，用戶可在沒有硬件設(shè)備的情況下像搭積木一樣構(gòu)造系統(tǒng)硬件電路，在流程圖的可視化設(shè)計(jì)中通過模塊自帶的圖框?qū)崿F(xiàn)相關(guān)操作。[1]基于圖框的流程圖設(shè)計(jì)不需C語言或匯編語言的基礎(chǔ)，掌握起來相對(duì)簡單，并且從邏輯結(jié)構(gòu)上看更直觀。流程圖和用C語言編寫的源代碼都涉及數(shù)據(jù)處理和硬件操作，在流程圖的設(shè)計(jì)中也需要設(shè)定相關(guān)變量，變量在程序中用于保存數(shù)據(jù)處理的結(jié)果，對(duì)數(shù)據(jù)要進(jìn)行加、減、乘、除、求余等運(yùn)算。在流程圖設(shè)計(jì)中，圖框編輯可能涉及變量的定義和操作，需要掌握基于變量的各種運(yùn)算表達(dá)式。圖框是構(gòu)成流程圖的基本元素，本文以案例的形式研究各種圖框的功能和使用，幫助學(xué)生掌握基于流程圖的可視化編程技術(shù)。

一、基于流程圖的可視化編程技術(shù)的基礎(chǔ)

(一)可視化編程中的圖框功能

1.I/O操作圖框。I/O操作圖框能夠?qū)崿F(xiàn)CPU的數(shù)字IO引腳的模式(pinMode)設(shè)置(輸出模式OUTPUT或輸入模式INPUT)、數(shù)字IO引腳的高電平(TRUE)輸出(digitalWrite)和低電平(FALSE)輸出、數(shù)字IO引腳的輸入(digitalRead)、模擬量引腳的輸入(analogRead)和PWM引腳的輸出(analogWrite)等功能。I/O操作圖框設(shè)置結(jié)果如圖1所示。

圖1 I/O操作圖框設(shè)置結(jié)果

2.分配圖框。分配圖框完成對(duì)變量的賦值運(yùn)算操作，變量必須在圖框中定義，定義變量時(shí)指定變量的名字和類型，常用的類型有整型(INTEGER)、浮點(diǎn)型(FLOAT)和布爾(BOOLEAN)?？梢詫⒊?shù)、加法計(jì)算的結(jié)果、減法計(jì)算的結(jié)果、乘法計(jì)算的結(jié)果、除法計(jì)算的結(jié)果和求余的結(jié)果賦值給已有變量。賦值運(yùn)算操作如圖2所示(a變量為整型)。

圖2 賦值運(yùn)算操作

3.延時(shí)圖框。延時(shí)圖框?qū)崿F(xiàn)延時(shí)毫秒、微秒和秒時(shí)間，用于數(shù)碼管顯示、發(fā)光二極管閃爍顯示、IO引腳輸出時(shí)鐘脈沖等需要延時(shí)的場合。毫秒、微秒和秒延時(shí)時(shí)間圖框如圖3所示。

圖3 延時(shí)時(shí)間圖框

4.決策圖框。決策圖框根據(jù)決策條件是否滿足(決策條件成立值為TRUE，決策條件不成立值為FALSE)決定執(zhí)行YES分支或NO分支，決策的條件一般是一個(gè)關(guān)系表達(dá)式，包括大于、小于、等于、大于等于、小于等于和不等于。基于關(guān)系表達(dá)式的決策圖框如圖4所示。

圖4 基于關(guān)系表達(dá)式的決策圖框

決策的條件也可以是一個(gè)布爾變量的值，直接根據(jù)布爾變量的值為TRUE或FALSE決定執(zhí)行YES分支或NO分支?；诓紶栕兞康臎Q策圖框如圖5所示。

圖5 基于布爾變量的決策圖框

5.結(jié)構(gòu)定義圖框。結(jié)構(gòu)定義圖框用于在流程圖的編程中定義一個(gè)新的結(jié)構(gòu)流程圖(工程自帶有SETUP結(jié)構(gòu)和LOOP結(jié)構(gòu))，該結(jié)構(gòu)圖是專門為完成某一操作而編寫的，在該工程的其他結(jié)構(gòu)圖中可以反復(fù)被調(diào)用，目的是簡化整個(gè)工程的流程圖。在圖紙中定義一個(gè)display結(jié)構(gòu)，該結(jié)構(gòu)內(nèi)的圖框可以暫時(shí)不編寫，定義的display結(jié)構(gòu)圖框如圖6所示。

圖6 定義display結(jié)構(gòu)圖框

6.結(jié)構(gòu)調(diào)用圖框。結(jié)構(gòu)調(diào)用圖框是在流程圖的編程中調(diào)用用戶自己編寫的完成某一特定邏輯功能的結(jié)構(gòu)流程圖，被調(diào)用的結(jié)構(gòu)圖必須已經(jīng)定義好才能利用結(jié)構(gòu)調(diào)用圖框完成調(diào)用。display結(jié)構(gòu)調(diào)用圖框如圖7所示。

圖7 display結(jié)構(gòu)調(diào)用圖框

7.循環(huán)構(gòu)建圖框。在流程圖的編程中，通過循環(huán)構(gòu)建圖框?qū)崿F(xiàn)對(duì)某一操作的固定次數(shù)的操作和有條件的重復(fù)操作，對(duì)應(yīng)C語言程序中的for計(jì)數(shù)循環(huán)、while和do～while循環(huán)。利用循環(huán)構(gòu)建圖框?qū)崿F(xiàn)的for循環(huán)、while循環(huán)和repeat循環(huán)如圖8所示，實(shí)現(xiàn)的循環(huán)次數(shù)在a變量初始值為0時(shí)都是7次。

圖8 循環(huán)構(gòu)建圖框

8.互聯(lián)圖框。當(dāng)流程圖縱向或橫向放不下時(shí)，需要將流程圖斷開并用互聯(lián)圖框連接起來，凡是互聯(lián)號(hào)相同的線表示是連在一起的?；ヂ?lián)圖框如圖9所示，將display結(jié)構(gòu)斷開并用互聯(lián)號(hào)2連接起來。[2]

圖9 互聯(lián)圖框

以上完成的圖框都是通過雙擊對(duì)應(yīng)圖框并在彈出的編輯框中進(jìn)行選擇或輸入完成的。

(二)可視化編程中變量的定義及功能

在操作圖框中定義變量時(shí)要確定變量名和變量的數(shù)據(jù)類型。

1.整型變量的定義和功能。變量名的取名規(guī)則和C語言規(guī)定一樣，以字母或下劃線開頭后面跟字母、下劃線和數(shù)字，一般不超過8個(gè)字符，如a、a1、_a1、value。變量的類型名為INTEGER，為帶符號(hào)的整數(shù)，整型變量只能存放整型數(shù)據(jù)，數(shù)據(jù)范圍在-32768和32767之間。

2.浮點(diǎn)變量的定義和功能。變量的類型名為FLOAT，為帶符號(hào)的實(shí)數(shù)，浮點(diǎn)變量存放的是帶小數(shù)點(diǎn)的數(shù)據(jù)。

3.布爾變量的定義和功能。變量的類型名為BOOLEAN，布爾變量只能存放TRUE或FALSE。

(三)可視化編程中運(yùn)算符及表達(dá)式

可視化的流程圖只支持算術(shù)運(yùn)算和關(guān)系運(yùn)算，相對(duì)C語言的數(shù)據(jù)類型和運(yùn)算符要少很多。

1.算術(shù)運(yùn)算符和表達(dá)式。通過算術(shù)運(yùn)算計(jì)算結(jié)果，算術(shù)運(yùn)算符包含加、減、乘、除、求余，分別為“+”“-”“×”“/”和“%”。算術(shù)表達(dá)式一般在分配框中，完成數(shù)據(jù)的計(jì)算，如“a+5”“a-5”“a×5”“a/5”和“a%”。分配框的功能是將表達(dá)式的結(jié)果賦值給左邊的變量，要求兩邊的數(shù)據(jù)類型必須一致。

2.關(guān)系運(yùn)算符和表達(dá)式。關(guān)系運(yùn)算是將兩個(gè)數(shù)進(jìn)行比較，關(guān)系運(yùn)算符有“>”“>=”“<”“<=”“=”和“！=”。關(guān)系表達(dá)式一般在決策圖框中，值為TRUE或FALSE，表示關(guān)系是否成立，如“5>a”“a<=6”“a!=3”等。

二、系統(tǒng)硬件電路的搭建方法

仿真平臺(tái)提供了豐富的外部硬件模塊，比如開關(guān)模塊、按鍵模塊、顯示器模塊、電機(jī)模塊和傳感器模塊，用戶可在沒有硬件設(shè)備的情況下添加對(duì)應(yīng)的硬件模塊，像搭積木一樣構(gòu)造系統(tǒng)硬件電路。硬件模塊分為Adafruit、Breakout Periphe-rals、Grove、Internet of Things、Motor Control等類型。繪制硬件電路時(shí)，打開添加硬件模塊對(duì)話框，選擇對(duì)應(yīng)的硬件模塊類型并找到對(duì)應(yīng)的硬件模塊，單擊“添加”按鈕，添加成功。

以添加一個(gè)Arduino LED(Red)模塊完成8個(gè)發(fā)光二極管的顯示電路為例，在可視化設(shè)計(jì)界面左側(cè)的工程管理面板的Peripherals右擊，在彈出的快捷菜單上單擊“增加外圍設(shè)備”命令，彈出“選擇工程剪輯”對(duì)話框。

在“選擇工程剪輯”對(duì)話框類別下拉列表框中選擇“Breakout Peripherals”，在列出的硬件模塊中選擇“Arduino LED(Red)” 模塊，單擊“添加”按鈕。在原理圖設(shè)計(jì)界面，出現(xiàn)“Arduino LED(Red)” 模塊，如圖10所示。

圖10 “Arduino LED(Red)” 模塊

通過復(fù)制和修改IO端口號(hào)的方法放置另外7個(gè)發(fā)光二極管電路，完成系統(tǒng)8個(gè)發(fā)光二極管的顯示電路，分別通過IO1～I(xiàn)O8端口控制。

用同樣的方法添加Arduino Button Breakout Board(按鍵)模塊，如圖11所示。

圖11 Arduino Button Breakout Board(按鍵)模塊

三、系統(tǒng)自帶硬件模塊的圖框功能

以上文添加的LED模塊為例研究其自帶圖框的功能。

on圖框和off圖框功能。on圖框使二極管亮，off圖框使二極管熄滅，操作如圖12所示。

圖12 on圖框和off圖框

set圖框功能。set圖框使二極管亮(設(shè)置的狀態(tài)為TRUE)和熄滅(設(shè)置的狀態(tài)為FALSE)，操作如圖13所示。

圖13 set圖框操作

dim圖框功能。dim圖框設(shè)置二極管的亮度，亮度值為0～255。實(shí)現(xiàn)的原理是用一個(gè)PWM信號(hào)的脈寬來控制亮度，用dim圖框設(shè)置二極管的亮度值分別為128和255，操作如圖14所示。

圖14 dim圖框操作

toggle圖框功能。toggle圖框用于二極管燈的亮和熄滅之間切換，操作如圖15所示。

圖15 toggle圖框操作

通過硬件模塊自帶的圖框?qū)τ布K進(jìn)行相關(guān)操作，而不需對(duì)控制器的IO端口直接操作，是圖框功能的最大體現(xiàn)。

四、應(yīng)用系統(tǒng)可視化流程圖的組成

一個(gè)項(xiàng)目的可視化流程圖至少包含SETUP結(jié)構(gòu)和LOOP結(jié)構(gòu)，復(fù)雜的項(xiàng)目還可包含用戶自定義的其他結(jié)構(gòu)，一個(gè)項(xiàng)目可由多張圖紙組成。下面以一個(gè)二極管的顯示亮度可調(diào)的可視化流程圖和4位數(shù)碼管模塊組成的分秒計(jì)數(shù)器的可視化流程圖為例分析可視化流程圖的組成。

(一)一個(gè)二極管的顯示亮度可調(diào)的可視化流程圖組成

該可視化流程圖只包含SETUP結(jié)構(gòu)和LOOP結(jié)構(gòu)。由于未涉及變量的初始化、IO引腳的模式設(shè)置和輸出初始狀態(tài)，所以SETUP結(jié)構(gòu)中沒有任何圖框操作。LOOP結(jié)構(gòu)是系統(tǒng)自帶的一個(gè)死循環(huán)結(jié)構(gòu)，CPU上電復(fù)位后首先執(zhí)行一次SETUP結(jié)構(gòu)流程圖，然后進(jìn)入到LOOP結(jié)構(gòu)。該結(jié)構(gòu)流程圖由兩個(gè)for循環(huán)結(jié)構(gòu)組成，單片機(jī)通過變量i實(shí)現(xiàn)二極管顯示模塊的控制引腳高電平的占空比的變化，從而實(shí)現(xiàn)對(duì)二極管顯示亮度的控制。二極管顯示亮度可調(diào)的可視化流程圖如圖16所示。

圖16 二極管顯示亮度可調(diào)的可視化流程圖

(二)4位數(shù)碼管模塊組成的分秒計(jì)數(shù)器的可視化流程圖組成

該可視化流程圖由兩張圖紙組成，通過菜單“項(xiàng)目”“新建圖紙”命令新建圖紙，圖紙的名稱采用默認(rèn)名稱；在兩張圖紙上分別編寫SETUP結(jié)構(gòu)流程圖、LOOP結(jié)構(gòu)流程圖、OnTimerISR結(jié)構(gòu)流程圖、TimeUpdate結(jié)構(gòu)流程圖和TimeDisplay結(jié)構(gòu)流程圖。[3]每個(gè)結(jié)構(gòu)流程圖功能分析如下：

1.SETUP結(jié)構(gòu)流程圖功能。SETUP結(jié)構(gòu)流程圖主要完成變量的定義和初始值設(shè)置、LEDM1模塊的初始化(init)和顯示亮度(setBrightness)設(shè)置、timer1(定時(shí)器)初始化(定時(shí)1秒)等操作。其中，TimeDisp0、TimeDisp1、TimeDisp2和TimeDisp3都為整型變量，分別存儲(chǔ)分鐘和秒的十位和個(gè)位數(shù)字；second和minute為整型變量，存儲(chǔ)秒和分鐘值；DP變量為布爾變量，存儲(chǔ)值為TRUE和FALSE，控制“：”二極管的顯示和熄滅；Update為布爾變量，控制CPU是否刷新數(shù)碼管顯示內(nèi)容。SETUP結(jié)構(gòu)流程圖如圖17所示。

圖17 SETUP結(jié)構(gòu)流程圖

2.LOOP結(jié)構(gòu)流程圖功能。LOOP結(jié)構(gòu)流程圖根據(jù)Update變量的值是否為1判斷1s時(shí)間的到來，如果1s時(shí)間到，調(diào)用TimeUpdate結(jié)構(gòu)流程圖和TimeDisplay結(jié)構(gòu)流程圖，完成數(shù)碼管的顯示值刷新；否則，數(shù)碼管的顯示值不變。LOOP流程圖如圖18所示。

圖18 LOOP結(jié)構(gòu)流程圖

3.TimeUpdate和TimeDisplay結(jié)構(gòu)流程圖功能。TimeUpdate結(jié)構(gòu)流程圖完成TimeDisp0-TimeDisp3變量值的修改，同時(shí)Update設(shè)置為FALSE，并根據(jù)DP變量的值確定“LEDM1”硬件模塊中的“：”二極管亮或暗。TimeUpdate結(jié)構(gòu)流程圖如圖19所示。

圖19 TimeUpdate結(jié)構(gòu)流程圖

TimeDisplay結(jié)構(gòu)流程圖中，數(shù)碼管從左往右依次顯示變量TimeDisp0-TimeDisp3的值。TimeDisplay結(jié)構(gòu)流程圖如圖20所示。

圖20 TimeDisplay結(jié)構(gòu)流程圖

4.OnTimerISR結(jié)構(gòu)流程圖功能。利用單片機(jī)內(nèi)的定時(shí)器完成1s的定時(shí)，1s時(shí)間到，單片機(jī)自動(dòng)執(zhí)行定時(shí)器中斷結(jié)構(gòu)流程圖。OnTimerISR中斷結(jié)構(gòu)流程圖(即定時(shí)器中斷結(jié)構(gòu)流程圖)中，首先置變量Update為1(TRUE)，然后對(duì)秒和分計(jì)數(shù)變量進(jìn)行修改，DP變量取反。OnTimerISR中斷結(jié)構(gòu)流程圖如圖21所示。

圖21 OnTimeISR中斷結(jié)構(gòu)流程圖

五、可視化編程技術(shù)的應(yīng)用推廣

在電氣自動(dòng)化技術(shù)、應(yīng)用電子技術(shù)、工業(yè)機(jī)器人技術(shù)等高職專業(yè)的人才培養(yǎng)方案中，單片機(jī)應(yīng)用技術(shù)課程作為專業(yè)核心課程，支撐培養(yǎng)學(xué)生的智能電子產(chǎn)品設(shè)計(jì)和維護(hù)、物聯(lián)網(wǎng)系統(tǒng)的設(shè)計(jì)和維護(hù)、各種機(jī)器人和無人機(jī)控制等的技術(shù)能力?；趩纹瑱C(jī)的源代碼編程和底層的硬件設(shè)計(jì)要求學(xué)生具有較高的專業(yè)基礎(chǔ)和能力，只有在這些領(lǐng)域具有一定的興趣和學(xué)習(xí)動(dòng)力的學(xué)生才能掌握這些技術(shù)。通過基于流程圖的可視化編程和硬件模塊搭積木式的構(gòu)建使軟件和硬件的設(shè)計(jì)變得簡單，能夠激發(fā)學(xué)生參與到相關(guān)技能大賽、科技創(chuàng)新等活動(dòng)中來，提高學(xué)生學(xué)習(xí)和研究技術(shù)的興趣，進(jìn)一步提升專業(yè)人才培養(yǎng)質(zhì)量。