# Webduino 補充課程 ## Webduino Light Sensor ### HTML ```htmlembedded= <body> <h1>Webduino Light Sensor</h1> 這是量測到的值：<span id='lightvalue'>Value</span> <br> <canvas id="canvas" width="800" height="500" style="border:1px solid #000000;"></canvas> </body> ``` ### CSS ```css= h1 { background: black; color: white; padding: 12px; text-align: center; } #canvas { margin-top: 14px; background: #DDDDDD; } ``` ### JavaScript ```javascript= var photocell; var updateData = function (val) { //console.log(val); var c = document.getElementById("canvas"); var ctx = c.getContext("2d"); ctx.clearRect(0, 0, 800, 100); // Create gradient var grd = ctx.createLinearGradient(0, 0, 800, 0); grd.addColorStop(0, "yellow"); grd.addColorStop(1, "red"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10, 10, 10 + 800 * val, 80); } boardReady({board: 'Smart', device: 'EjVbk', transport: 'mqtt', multi: true}, function (board) { board.samplingInterval = 50; photocell = getPhotocell(board, 0); photocell.measure(function (val) { photocell.detectedVal = val; document.getElementById('lightvalue').innerHTML = (Math.round((photocell.detectedVal)*100))/100; updateData(val); }); }); ``` ## Canvas https://www.w3schools.com/graphics/canvas_intro.asp ## Webduino 基本功 - [Webduino Blockly 特殊功能](https://tutorials.webduino.io/zh-tw/docs/basic/blockly/blockly-tutorial-02.html) - [連動多塊開發板](https://tutorials.webduino.io/zh-tw/docs/basic/blockly/multi-board.html) - [手機陀螺儀](https://tutorials.webduino.io/zh-tw/docs/socket/useful/mobile.html) ## Webduino 資料庫 - Google 試算表 - [Google 試算表 ( 設定 )](https://tutorials.webduino.io/zh-tw/docs/cloud/database/google-spreadsheet.html) - [Google 試算表 ( 儲存 )](https://tutorials.webduino.io/zh-tw/docs/cloud/database/google-spreadsheet-write.html) - [Google 試算表 ( 讀取 )](https://tutorials.webduino.io/zh-tw/docs/cloud/database/google-spreadsheet-read.html) - [範例一](https://blocklypro.webduino.io/live-preview.html#-LaiytdzU4IXovjg1CAC) ## HTML/JavaScript Game https://www.w3schools.com/graphics/game_intro.asp ## 延伸閱讀 https://www.w3schools.com/graphics/svg_intro.asp