認識fChart流程圖與程式碼編輯器(Node.js版) ============================================================================== fChart是一個流程圖直譯器,可以自行繪製流程圖,和執行繪製的流程圖. 在4.5版新增源至Min C# Lab的程式碼編輯器,fChart已經轉變成為整合開發環境, 不只可以編輯 C、Java、C#和Visual Basic程式碼,更可以直接編譯和執行 C、 Java(需自行安裝JDK)、 C#和Visual Basic語言的程式,Blockly 版進一步支援 Python 和 JavaScript 語言,HTML+JavaScript是啟動預設瀏覽器來預覽執行結果。 HTML+JS版本來是為了教學所需建立的特別版本(沒有公開),內建 Blcokly 積木程式編輯器 可以幫助初學者建立出完整JavaScript程式碼,Windows 作業系統需要安裝 Google Chrome 瀏覽器來啟動 Blockly。JavaScript程式碼可以使用功能表命令插入常用程式碼片段, 也可以按[Blockly]鈕啟動 Blockly 使用積木來拚出程式,在自動轉換成 JavaScript 程式碼後,我們可以複製回fChart程式碼編輯器進行測試執行,或進一步修改JavaScript程式碼。 因為 Blockly 支援 Python 語言,所以 fChart 再整合成 Blockly 版,除了 JavaScript 新增支援使用 Blockly 建立 Python 程式,然後複製回fChart程式碼編輯器測試執行 Python程式,內建支援 Python直譯器(WinPython),換句話說,fChart程式碼編輯器 也支援 Python 程式碼的編輯和直譯執行,當然也提供程式碼片段的功能表命令來 快速輸入程式碼。 Blockly 版是使用全新程式設計教學方式來幫助初學者寫出完整的程式碼,寫程式的步驟為: 首先使用fChart可執行流程圖來了解演算法和執行流程後,啟動fChart程式碼編輯器, 依據流程圖符號從功能表命令插入程式片段來寫出完整的程式碼,如果仍然有困難, 按下方[Blockly]鈕啟動 Blockly 改用積木建立程式來轉換成 JavaScript 和 Python 程式, 再回到fChart程式碼編輯器進一步編輯修改程式碼,並且測試執行 JavaScript 和 Python 程式。 因為fChart程式碼編輯器已經支援 C, Python和JavaScript語言的Blockly積木程式,所以 版本名稱改為主要支援語言,Blockly版分成支援Python的Python版,和Node.js的Node.js版。 原fChart程式碼編輯器Blockly版可以使用SupportType參數切換成支援Python或Node.js編輯器, 不過,Python版沒有內建Node.js編譯器和Node-RED; Node.js版沒有內建 Python直譯器。 <setting name="SupportType" serializeAs="String"> <value>Python</value> </setting> * v4 版升級至 .NET Framework 4,除了支援新版 C# 和 VB 語法,主要原因是Windows 10新版 預設已經不支援.NET Framework 3.5之前版本,需自行安裝.NET Framework 3.5來支援.NET 2.0。 請注意! v4 版需Windows作業系統安裝 .NET Framework 4 以上版本才能執行。 此版的功能更新如下: # 當使用功能表插入程式碼會自動重設游標位置,從選取文字的開頭插入,而不是選取文字的最後位置。 # 源於部分Windows 7作業系統在執行時有不穩定情況,此版本fChartCodeEditor.exe更新ICSharpCode.TextEditor.dll至3.2.1.6466版。 # 取消工具列的字型按鈕,改提供位在上下兩個視窗右上角上下箭頭的數字調整介面,可以馬上更改程式碼和輸出視窗的字型尺寸,和儲存目前的字型尺寸設定。 # 新增Cake Blockly for C語言,可以使用Blockly積木程式來建立C程式。 # Python語言可以指定Python安裝路徑,而不使用內建Python直譯器。 * 離線版Blockly程式積木編輯器是使用修改源於"雲林SONG"的精簡版本,只保留Code部分 * 謝謝 Ping-Lun Liao的授權使用。 * Blockly程式積木編輯器修正積木產生的Python程式碼, 目前只支援Python 3, 不再支援Python 2 1. 輸入積木支援三種型態, 字串, 整數和浮點數, 只產生input()函數. 2. for迴圈新增核取方法, 可勾選是否是遞增迴圈, 能夠產生遞增或遞減range()函數的程式碼, 不再自動產生範圍判斷函數. 同時修正產生的JavaScript程式碼. * v4.1版: 微調介面元件的位置與尺寸, Node版已經將Node-RED升級至0.19.4版 1. Node-RED節點預設安裝Dashboard, MySQL和Arduino 2. Node.js除了安裝Johnny-Five模組, 而且新增MQTT模組處理MQTT通訊協定. * v4.2版: 因為內建的可攜式版Node.js升級至8.9.3版, npm升級至5.8.0版, 目錄結構有變更, 同時修正Node.js的node.exe搜尋路徑是 NodeJS\App\ , 舊版是NodeJS\NodeJS\App\. 使用fChart流程圖直譯器 ============================================================================== 1. 啟動fChart:我們有兩種方式來啟動fChart流程圖直譯器,如下所示: 方法一:請開啟fChart所在的資料夾,按二下執行[RunfChart.exe]後,按【是】鈕。 方法二:請開啟fChart所在資料夾,因為檔案權限問題, 請在【FlowProgramming_Edit.exe】上,執行滑鼠【右】鍵 快顯功能表的【以系統管理員身份執行】命令來執行fChart後,按【是】鈕。 說明: 指定FlowProgramming_Edit.exe永遠使用【以系統管理員身份執行】執行, 請在執行檔上,執行[右]鍵快顯功能表的[內容]命令,選[相容性]標籤, 在下方勾選[以系統管理員的身份執行此程式]後,按[確定]鈕完成設定。 * Windows XP需安裝.NET Framework 2.0以上版本,如果使用方法一,不需按【是】鈕。 方法二,只需按二下【FlowProgramming_Edit.exe】執行檔,就可以啟動fChart。 2. 離開fChart:請執行「檔案>結束」命令,或按視窗右上角【X】鈕。 3. 新增流程圖符號:在左邊工具列點選欲新增的流程圖符號,移動 符號圖示至編輯區域的欲插入位置,點選一下,可以開啟編輯符號 的對話方塊來編輯符號內容。 4. 連接2個流程圖符號:請在欲連接的2個符號各點選一下(順序是 先點選開始符號,然後結束符號)後,在沒有符號區域,執行 滑鼠【右】鍵快顯功能表的【連接區塊】命令來建立連接箭頭線。 5. 刪除連接箭頭線:請分別點選一下連接線兩端的流程圖符號(順序沒有關係 ),在沒有符號區域,執行滑鼠【右】鍵快顯功能表的【刪除連接線】 命令來刪除連接線。 6. 刪除流程圖符號:沒有任何連接線時,才能刪除流程圖符號, 請點選一下欲刪除符號後,在沒有符號區域,執行滑鼠【右】鍵快顯功能表 的【刪除區塊】命令。 7. 執行流程圖:在上方執行工具列,按【執行】鈕執行流程圖。 8. 逐步執行流程圖:當將延遲時間的捲動軸調整至最大時,就是切換至逐步 執行模式,此時按【執行】鈕執行流程圖,就是一次一步來逐步執行流程圖, 請重複按【逐步執行】鈕來執行流程圖的下一步。 9. 顯示變數視窗:按【變數】鈕顯示「變數」視窗,其內容是執行過程的變數值。 10. 顯示堆疊視窗:按【堆疊】鈕顯示「堆疊」視窗,如果是函數呼叫, 就在此視窗顯示保留的區域變數值。 使用fChart程式碼編輯器 ============================================================================== 1. 啟動fChart程式碼編輯器:在fChart按上方【程式碼編輯器】鈕啟動fChart程式碼 編輯器,或直接執行【fChartCodeEditor.exe】程式來執行fChart程式碼編輯器。 2. 離開fChart程式碼編輯器:請執行「檔案>結束」命令,或按視窗右上角【X】鈕。 3. 在編輯區域的右下方切換使用的程式語言;左下方按鈕編譯和執行程式。 4. 執行上方功能表命令可以依據流程圖符號來插入指定程式語言的程式片段。 5. 執行「檔案>設為預設程式語言」命令指定預設的程式語言。 6. Java語言需自行安裝JDK,然後執行「檔案>設定JDK目錄」命令,指定JDK安裝目錄。 7. 編輯HTML+JavaScript程式碼可以執行「HTML標籤」功能表命令快速插入常用HTML標籤。 8. Python和JavaScript語言可以按下方[Blockly]鈕啟動 Blockly,使用積木來建立程式碼。