TwinCAT HMI 教學影片【第2集】專案建立、介面操作、位置與尺寸

各位大家好 我是被俘臺灣的工程師 我們上一部影片 已經有介紹 10KHMI 的環境安裝 以及它的特點還有擴充性 我們接下來就進入 Section 1 的下一個部分 這個部分的話 會跟各位介紹我們要如何建立專案 以及我們的介面要怎麼操作 還有跟各位說明一下我們物件的位置 還有尺寸是怎麼做計算的 所以我們可以直接打開我們的 IDE 像我的話 是直接使用我們的 Visual Studio 去做 TwinKHMI 的開發 那如果說你不是用 Visual Studio 你是用 TwinKXE Shell 的話 那你也一樣可以在工具欄這邊 有一個這個 TwinK的符號 然後去打開 TwinKXE Shell 那一樣可以去建立我們 TwinKHMI 的專案 那我的話是用我們的 Visual Studio 所以打開之後 你就可以從左上角這邊的 File 然後按一下選擇 New Project 然後選到左邊的欄位找到我們的 TwinKHMI 那你會發現 TwinKHMI 下面還有兩個分支 這個分別是 Framework 跟 Server 稍微解釋一下這個差異是說 TwinKHMI 指的就是我們一般的 Creator 在做我們的畫面編輯 第二個 Framework 指的就是我們自定義的空間 它可以去使用我們一般 HTML 的物件跟語法 達到你想要的功能 然後再回到 Creator 去做使用 Server 的話就是一些擴充的 Server 功能 例如說去存取我們第三方的資料庫 一些 Backoff 沒有官方提供的功能 都可以去自己添加 那我們這個部分的話 是用最基礎的 TwinKHMI 的 Creator 就可以了 那你再回到中間你就會發現 即便我選到 TwinKHMI 還是會有兩個選項 一個是 HMI 的 Project 一個是 HMI 的 Project Generator 那 Generator 的話你使用它的話 它就會跳出一個精靈彈跳視窗 然後讓你去給你提示去做設定 例如說你要是互動式的網頁 還是你要固定的 Resolution 還是你要自適應的自動調整 Resolution 然後你的跳頁分支有哪些頁 名字叫做什麼 設定完了之後按 OK 它就會自動幫你生成那個範例專案 那我們今天的教學是要針對從無到有的建立 所以我們選擇 TwinKHMI 的 Project 然後你可以選擇到你的一個路徑 然後去對你的專案做命名 例如說我們現在是 TwinKHMI 的 Training 然後你按 OK 它就會幫你建立專案 那你就會看到 這個原本剛剛指定的專案資料夾裡面 它會在獨立建立了一個 屬於你剛自己建立的專案 然後裡面會有第一個副檔名 叫做 Solution 檔 Solution 檔 這個並不是 TwinK的副檔名 它是 Visual Studio 的既有的副檔名 它指的意思就是說在這個 Solution 情況下 你可以去載入其他不同格式的專案檔 你可以載入 TwinKHMI 你也可以載入 TwinK 你也可以載入 C++ 其他的語言 所以我們實際的 HMI 專案是在這個裡面 它會有一個檔案叫做 TwinKHMI Project File 這纔是我們真正的 HMI 專案 那我們回到編輯畫面當中 你會發現它已經幫你開好了一個 Desktop.vue 所以我們先來介紹一下.vue 檔是什麼 .vue 檔它就是我們在執行 HMI Runtime 在執行畫面的主要畫面 它就會去打開這個.vue 檔去做顯示 所以這個.vue 檔你可以不只一個 你可以去添加很多個.vue 檔 然後最後再去指定說 我的這個專案的 Property 這個地方 去指定說我的 Startup.vue 是哪一張.vue 檔 如果說你看不到 Property 這個頁嵌的話 你可以在 View 然後 Properties Window 這邊把它打開 就可以去做設定 所以第一個.vue 檔就是 我們 TwinKHMI Runtime 去顯示畫面的地方 所以裡面可以去放你的一些物件 你也可以去放一些畫面 都是可以的 你會發現在所有我們顯示畫面的檔案裡面 都會有一個地方去做調整 在這個地方 右上角會有一個畫面可以調整為 我用圖形化的編輯模式 還是說我調整為用 HTML 代碼的方式去做設計 所以我們看一下上面切到這裡是圖形化 按一下下面這個地方 會切到我們的 HTML 格式的代碼 我們就可以去看到它的 Source Code 下面這個地方有四個按鈕 第一個分別是我們的 Document Outline Document Outline 就可以看到 你這個畫面裡面有哪些物件 以及它的分層是什麼角色 然後哪些物件是隸屬於哪些物件底下 第二個有一個 C 的符號 這個叫做 Configuration 3K HMI 的 Configuration 這個地方它可以去做一些畫面以外的設定 例如說你的變數、你的多國語言 還是你的權域事件 跟你的使用者管理等等 第三個就是你的 Gallery Explorer 這個地方有提供一些我們預設的圖片讓你使用 例如說一些燈號或是一些 Logo 最後一個就是 L 你點一下你就會發現會有一個 Live View 跳出來 這個指的意思就是它的即時模擬畫面 這個即時模擬畫面是不經過編譯的 只要你有改變東西它就會馬上生效 所以例如說我可以在 Toolbox 這邊 去拉入一個正方形 那我的 Live View 這邊就會即時更新 讓你去看你所設計的畫面 它裡面的物件是怎麼樣的效果 它的動畫是怎麼樣 位置擺放如何有沒有符合預期 講到這邊我們就要再提到另外一個模擬的方式 剛剛 Live View 是不經過編譯的 所以你在我們的專案資料夾裡面 有一個 BIN 的資料夾 這個資料夾是指它的 Binary 檔案 經過編譯之後它就會產生在這個地方 目前的話我們還沒有經過編譯 所以這裡面都是沒有任何東西的 我們可以去對這個專案 然後上面用 Build Solution 你就會發現我們剛剛的 Binary 檔案 就會慢慢的產生一些東西 下面這個地方也有編譯的圖示 產生完了之後 你就可以用網頁瀏覽器的方式去做畫面模擬 開啟的方式就是在下面的工具列 然後有一個藍色的圖示 這個是 TwinKHMI 的 Service 你對它按右鍵 然後會有一個 Local Port 你選到你的 Start Page 打開 它就會打開你的瀏覽器畫面 那個就是你剛剛有 Build 產生 Compile 檔案之後的畫面 顯示在這個地方 所以我們剛剛有介紹到 點 View 檔以及兩個去做模擬畫面的方式 分別是 Live View 以及我們的 Compile Build 過之後 用網頁瀏覽器顯示的方式 所以到目前為止 我們已經知道了如何去建立專案 以及點 View 檔是什麼角色 還有如何去做模擬 接下來跟各位介紹一下 就是我們在編輯當中常用的一些區域 第一個是 Solution Explorer 它會告訴你的目前專案下面有哪些東西 第二個就是我們剛剛有講到的 TwinKHMI 的 Configuration 然後以及我們的 Property 還有 Toolbox 跟 Document Outline 那這個東西要怎麼叫出來呢 幾乎都在 View 這個地方 你可以去把你的 Toolbox 叫出來 你也可以去把你的 Property Windows 叫出來 那如果你想要叫出 Configuration 跟 Document Outline 的話 它在 TwinKHMI 這個地方 有一個 Windows 這邊有 Document Outline 跟 Configuration 這幾個都是我們比較常用到的 那也建議各位先把它叫出來 在後續的教學中 用到的時候比較不會找不到在哪邊 那接下來跟各位介紹一下 我們的畫面的位置跟尺寸是如何來計算的 我們主要跟其他的圖框編輯軟體一樣 是以 Pixel 為單位 所以第一件事情可以請各位看到 我們這邊有一個 View Pole 800x600 這個 800x600 的意思就是說 我的 Runtime 執行畫面的視野 就只有 800x600 的 Pixel 那中間這個底層這個東西畫布 這個底層 Desktop.View 檔的底層畫布 它也是一個 Control 物件 你會發現它在這個地方也是有一個 Type 它也是有一個專屬的名字 那這個地方呢 順便題外話一下 就是我們建議在所有 TwinKH MI 當中的物件 都有一個好的命名方式 因為它在我們 JavaScript 的指定物件 或者是寫事件的時候 都需要指定到我們相對應的物件名字 所以如果你的命名方式很亂的話 會很容易找不到它 所以說會有一個建議的方式 就是說你可以去把它的物件名稱 標示說它在哪一個檔案裡面 例如這個正方形 它是在 Desktop 這個檔案裡面 然後呢 它是去做顯示的功能 把它的功能打出來 然後它是 Rectangle 這個物件 所以我最後打 Rectangle 那這樣我在 Document Outline 這邊 就可以看到說很清楚的 它是 Desktop 下面的 Display 的一個 Rectangle 那一樣的我們這個 Logo 我們一樣可以去做一些調整 例如說它是 Desktop 裡面的 Bag of Logo 然後它是 Image 物件 所以我就可以對它打 它是 Image 那這樣我就可以一目瞭然的知道說 它是什麼功能 以及它在哪個位置 還有它是什麼物件 OK 所以我們回到我們剛剛的底層畫布 這個 Desktop 這個東西 它這個也是一個物件 那你會發現說 它這邊有一個模式 是 Content 模式 這個指的意思就是說 它的高度跟寬度 會依據你的物件位置而改變 我如果把物件拉到很下面 那它就會把這個畫布拉大 如果拉回原本 Viewport 以內的地方 那它就會維持 Viewport 的大小 那如果說我想要讓它固定尺寸 我也可以把它選擇到 Value 的模式 例如說我把它整個 Value 都選好 它就是 800 x 600 的那個 Pixel 的長寬跟高度 那它就會固定這個長度 你即便往下拉 它也不會幫你自動調整 那我們看一下 Viewport 的效果 你可以把它按 Live View 這邊顯示之後 然後去調整它的畫面 因為我們剛剛有說 Viewport 就是顯示畫面的那個視野 所以那個視野就只有維持在 800 x 600 如果你把它小於那個視野 它就會變成要拉動 因為它就是 800 x 600 所以再舉一個例子來說 你把底層的畫布的高度調整到 800 之後 你再回到 Live View 你就會發現它已經需要那個下拉式選單了 因為它底層畫布超過你那個視野了 所以這個是指 Viewport 的意義 那一般來說 如果我們沒有要做自適應的效果的話 我們會建議各位把 Viewport 跟底層畫布設定成一樣 這樣子你再去做編輯的時候會比較簡單 那接下來講到我們物件的那個位置跟尺寸的話 如果你用預設的話 它就是 Pixel 你會發現呢 Pixel 它的左上角是 0 0 往右是正 往下也是正 所以往左上角移動 它的數字會越來越小 往右下角移動 它的數字會越來越大 這個還蠻簡單的 只是說你會發現我們的 Pixel 另外一個選項叫做百分比 如果說你把它設定為 50 百分比 那它實際的寬度會是多少呢 我們必須看 Document Outline 這邊來看 因為這個 Rectangle 是隸屬於 Desktop 底下 所以它的百分比就會參考 Desktop 這個物件 所以 Desktop 這個物件它的長寬是 800 x 600 我的寬度設定為 50% 那意思就是 800 寬的 50% 也就是 400 如果你把它複製一個物件出來 然後你直接把它設定為 400 Pixel 那你會發現這兩個寬度是一樣的 這個就證明瞭說我們的物件 它的百分比依據是依據它隸屬於哪一個物件 所以這個是一個蠻好的設定方式 那講到這個就可以介紹另外一個東西叫做 Grid 你可以在 Toolbox 這邊搜尋 Grid 這個物件 拉到主畫面當中 這個地方就是表格 它可以幫助你有效的去排列你的物件畫面 你可以在 Column 跟 Row 這邊去做設定 那假設我們現在就只有一個 1 x 1 的表格 你把這個物件往右拉 拉到這個表格當中 你會發現有一個粉紅色的框框出現 你放開之後呢 它就會進去這個表格裡面 你回來 Document Outline 這邊看 你就會發現這個 Rectangle 已經隸屬於這個 Grid 底下了 也就是說這個時候它的那個位置 Layout 的那個 Pixel 或者是百分比 都是依據這個 Grid 為主 例如我把它設定 0 0 它是指這個 Grid 裡面的 0 0 我的 50% 也是指這個 Grid 的 50% 所以你的這個 Rectangle 如果把它設定成 100% 然後高度也是 100% 那它就會填滿這個物件 所以這個是我們 TwinKHMI 在 Layout 上面的一些設定 主要就是以 Pixel 為設定 那如果你想要有相對的一些表現 那你就可以用百分比 那它的依據就是看 Document Outline 它是隸屬於哪一個物件 它就是以那個物件為基底 來去做百分比的顯示或者是尺寸 那以上就是我們這一集的內容 我們這個部分呢 會有介紹到如何新建專案 以及我們的介面操作 還有我們的位置跟尺寸是如何做計算的 那以上就是我們這一部的內容 那下一部呢 我們之後我們後面就會介紹到 一些物件如何建立以及設定 或者是我們的動態如何設計 所以我們就可以參考我們後面的影片 那我們今天的影片就到這邊囉 我們下次再見 拜拜