1. 開啟 vscode, 搜尋並安裝好插件 debugger for Chrome
2. 開啟專案的目錄
3. 設定好執行 debug 的環境, 準備讓 chrome 開啟 index.html 檔案, 只要點選 vscode 的選單 Debug -> Open Configurations, 在開啟 launch.json 後, 填入以下文字, 主要是填入讓 chrome 開啟 url 檔案所在位置, 並設定好工作的根目錄:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "執行 Chrome 開啟 index.html 檔",
"url": "file:///${workspaceFolder}/index.html",
"webRoot": "${workspaceFolder}"
}
]
}
4. 設定好將 dart2js 的環境, 準備將 dart 語法轉換為 javascript, 只要點選 vscode 的選單 Terminal -> Configure Tasks, 在開啟 tasks.json 後, 填入以下文字, 主要是將 dart2js 執行檔的絕對路徑填入 "command" 所指示的位置, 並設定好一些必要參數 args:
{
"version": "2.0.0",
"tasks": [
{
"label": "dart2js",
"type": "shell",
"command": "/home/mint/Downloads/flutter/bin/cache/dart-sdk/bin/dart2js",
"args": [
"${file}",
"-o",
"${fileBasenameNoExtension}.js"
],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
5. 撰寫 index.html 要讓 Chrome開啟 url 後, 自動執行經 dart2js 轉換後的 main.js:
<html><head><meta charset='utf-8'></head><body>
<script type='application/javascript' src='main.js'></script>
</body></html>
6. 用 dart 語言在 html 的 canvas 上繪製 sin(2πft) 函數圖, 範例主程式 main.dart:
// main.dart
class CanvasSin {
final DivElement div = document.createElement('div');
final CanvasElement canvas = document.createElement('canvas');
final int width, height;
get fullYscale => height~/2;
CanvasRenderingContext2D get ctx => canvas.getContext("2d");
void penline(int x1, int y1, int x2, int y2) => ctx .. strokeStyle="red" ..
beginPath( ) .. moveTo(x1, y1) .. lineTo(x2, y2) .. stroke( );
void get penOrigin => ctx .. save( ) .. translate(0, fullYscale) .. scale(1, -1) ..
beginPath( ) .. moveTo(0, 0);
void get penFinish => ctx .. strokeStyle="green" .. stroke( ) .. restore( );
void penTo(int x, double y) => ctx.lineTo(x, y);
CanvasSin(this.width, this.height) {
document.body.append(div);
div.append(canvas);
canvas.style.border = "1px solid";//外框 1 點
canvas.width = width;
canvas.height = height;
penline(0, 0, 0, height);// y-axis
penline(0, fullYscale, width, fullYscale);// x-axis
int freq = 2;
double f(int t) => fullYscale * sin(2.0*3.14159*freq*t/width);// sin(2πft)
penOrigin;
for(int t = 0; t < width; t ++) penTo(t, f(t));
penFinish;
}
}
void main( ) => CanvasSin(800, 600);
7.目前 dart2js 僅能編譯整個內含 main( ) 主程序的 dart 原始碼, 無法針對個別單一程式碼去編譯, 經上述步驟 4 設定好後, 要將目前用 dart 語言編輯的主程式轉換為相對應的 javascript 程式碼, 只要按下快捷鍵 ctrl-shift-B, 或是用選單 Terminal -> Run Task 選取 dart2js 直接編譯
8. 經上述步驟 1~6 後, 按下快捷鍵 F5, 或是用選單 Debug -> Start Debugging 就能讓 Chrome 直接開啟 url 執行所轉換後的 javascript
-
市面上便宜的時鐘, 內部機芯大多使用晶體振盪器產生固定頻率的脈沖去驅動 Lavet-type 步進馬達, 它只要一個 1.5V 電池就足以推動, 而馬達扭力主要是靠線圈內的電流產生磁力所致, 因此電流才是動力來源. 電壓太高會造成線圈電流飽和導致發熱,可能影響震盪頻率甚至燒毀... -
參考資料: https://developer.android.com/training/connect-devices-wirelessly/nsd linux mint 上針對區域網路的名稱服務協定可以使用 avahi, 透過 avahi-browse -a -r 就能...
沒有留言:
張貼留言