新北市教育局程式應用研發社群工作坊(1060419)

日期:106年4月19日下午

地點:新北市教研中心

公文與計畫:

士立:Gitbook 技術分享

GitBook寫書當作家 | 林慶哲

不專業網管筆記 | 林士立老師

GitBook 安裝 plugins

第一種方法找不到選項,所以用第二種方法,在 Files 下按右鍵新增 book.json,如下圖新增 ace plugin,為程式碼新增行號與語法高亮。線上編輯器會自動安裝,稍等片刻即可使用。

ace 語法要在 markdown 模式下使用喔,另外可以參考上文調整 css

學習資源:

格式小抄

新北市教育局程式應用研發社群工作坊(1060412)

日期:106年4月12日下午

地點:新北市教研中心

公文與計畫:

技術分享:

保太:Git 程式碼版控

保太:PHP Composer

練習作業:

學習資源:

新北市教育局程式應用研發社群工作坊(1060405)

日期:106年4月5日下午

地點:新北市教研中心

公文與計畫:

技術分享:

保太:校務系統匯出的學生XML檔案新增至資料庫 (使用 PHP)

學生XML檔案範例:


<?xml version="1.0" encoding="UTF-8"?>
<SCHOOL:report xmlns:SCHOOL="http://163.20.240.13">
  <SCHOOL:table table_name="table0">
    <SCHOOL:row roe_name="row0">
      <SCHOOL:col col_name="col0">學號</SCHOOL:col>
      <SCHOOL:col col_name="col1">姓名</SCHOOL:col>
      <SCHOOL:col col_name="col2">年級</SCHOOL:col>
      <SCHOOL:col col_name="col3">性別</SCHOOL:col>
      <SCHOOL:col col_name="col4">生日</SCHOOL:col>
      <SCHOOL:col col_name="col5">班級</SCHOOL:col>
      <SCHOOL:col col_name="col6">座號</SCHOOL:col>
    </SCHOOL:row>
    <SCHOOL:row roe_name="row1">
      <SCHOOL:col col_name="col0">102001</SCHOOL:col>
      <SCHOOL:col col_name="col1">蔡承堯</SCHOOL:col>
      <SCHOOL:col col_name="col2">1</SCHOOL:col>
      <SCHOOL:col col_name="col3">男</SCHOOL:col>
      <SCHOOL:col col_name="col4">20060910</SCHOOL:col>
      <SCHOOL:col col_name="col5">01</SCHOOL:col>
      <SCHOOL:col col_name="col6">01</SCHOOL:col>
    </SCHOOL:row>
  </SCHOOL:table>
</SCHOOL:report>

PHP 程式碼:


<?php
 
$dom = new DOMDocument('1.0', 'UTF-8');
$dom->load('students_esa.xml');
 
$students = $dom->getElementsByTagNameNS("http://163.20.240.13", "row");
 
foreach($students as $row){
 $student = $row->getElementsByTagNameNS("http://163.20.240.13", "col");
 
 if( $student->item(0)->nodeValue == '學號'){
 continue;
 }
 $schoolno = $student->item(0)->nodeValue;
 
 $studentName = $student->item(1)->nodeValue;
 $classname = $student->item(2)->nodeValue . $student->item(5)->nodeValue;
 $gender = $student->item(3)->nodeValue;
 
 $birth = $student->item(4)->nodeValue;
 if( strlen($birth) == 8 ){ // 生日為西元年
 $birth = substr($birth,0,4) . "-" . substr($birth, 4,2) . "-" . substr($birth,6,2);
 }else{ // 生日>非西元年
 if( strlen($birth) == 6 ){
 $birth = (substr($birth,0,2)+1911) . "-" . substr($birth, 2,2) . "-" . substr($birth,4,2);
 }elseif( strlen($birth) == 7){
 $birth = (substr($birth,0,3) +1911) . "-" . substr($birth, 3,2) . "-" . substr($birth,5,2);
 }
 }
 
 $classno = $student->item(6)->nodeValue;
 
 $sql_insert =<<<SQLSTRING
 INSERT INTO user(
 username,
 cname,
 classname,
 classno
 )
 VALUES
 (
 '%s',
 '%s',
 '%s',
 '%s'
 )
SQLSTRING;
 
 $conn = mysql_connect('192.168.11.100', 'bob', '!23456');
 mysql_query('SET NAMES "UTF8" ');
 mysql_selectdb('mydb', $conn);
 if( mysql_query($sql_insert, $conn) ){
 echo $studentName . ' 資料已新增!!<br />';
 }else{
 echo $studentName . ' 資料新增失敗!!<br />';
 };
}

博文:匯入 XML 學生資料檔 (使用 Visual Studio)

程式碼: 1060405範例程式碼

伺服端程式:imageToBuffer

/// <summary>
/// 將 Byte 陣列轉換為 Image。
/// </summary>
/// <param name="Buffer">Byte 陣列。</param> 
public static Image BufferToImage(byte[] Buffer)
{
  if (Buffer == null || Buffer.Length == 0) { return null; }
  byte[] data = null;
  Image oImage = null;
  Bitmap oBitmap = null;
  //建立副本
  data = (byte[])Buffer.Clone();
  try
  {
    MemoryStream oMemoryStream = new MemoryStream(Buffer);
   //設定資料流位置
   oMemoryStream.Position = 0;
   oImage = System.Drawing.Image.FromStream(oMemoryStream);
   //建立副本
   oBitmap = new Bitmap(oImage);
  }
  catch
  {
    throw;
  }
  //return oImage;
  return oBitmap;
}

/// <summary>
/// 將 Image 轉換為 Byte 陣列。
/// </summary>
/// <param name="Image">Image 。</param>
/// <param name="imageFormat">指定影像格式。</param> 
public static byte[] ImageToBuffer(Image Image, System.Drawing.Imaging.ImageFormat imageFormat)
{
  if (Image == null) { return null; }
  byte[] data = null;
  using (MemoryStream oMemoryStream = new MemoryStream())
  {
    //建立副本
    using (Bitmap oBitmap = new Bitmap(Image))
    {
      //儲存圖片到 MemoryStream 物件,並且指定儲存影像之格式
      oBitmap.Save(oMemoryStream, imageFormat);
      //設定資料流位置
      oMemoryStream.Position = 0;
      //設定 buffer 長度
      data = new byte[oMemoryStream.Length];
      //將資料寫入 buffer
      oMemoryStream.Read(data, 0, Convert.ToInt32(oMemoryStream.Length));
      //將所有緩衝區的資料寫入資料流
      oMemoryStream.Flush();
    }
  }
  return data;
}

客戶端程式: kendoUI_fileupload

//載入Picupload元件
$("#xml_file").kendoUpload({
 template: kendo.template($('#fileTemplate').html()),
 multiple: false,
 async: {
 saveUrl: "./ASHX/FileUpload.ashx",
 removeUrl: "./ASHX/removeFile.ashx",
 autoUpload: false
 },
 upload: PonUpload,
 remove: PonRemove,
 success: PonSuccess,
 complete: PonComplete,
 enabled: true,
 validation: {
 allowedExtensions: [".xml"]
 }
});

function PonUpload(e) {
 e.data = {
 fcontrol_name: "uploadfile"
 };
 return e;
}

function PonRemove(e) {
 e.data = {
 fcontrol_name: "uploadfile"
 };
 return e;
}

function PonSuccess(e) {

}

function PonComplete(e) {
 var grid = $("#st_grid").data("kendoGrid");
 grid.dataSource.read();
}

//自動轉換儲存單位
function formatBytes(bytes, decimals) {
 if (bytes == 0) return '0 Byte';
 var k = 1000;
 var dm = decimals + 1 || 3;
 var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
 var i = Math.floor(Math.log(bytes) / Math.log(k));
 return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}

<script id="fileTemplate" type="text/x-kendo-template">
 <div>
 <table style="width:100%">
 <tr>
 <td>Name: #=name#</td>
 <td>Size: #=formatBytes(size)#</td>
 <%--<td>Extension: #=files[0].extension#</td>--%>
 <td><button type='button' class='k-upload-action' style='position: absolute; top: 0; right: 0;'>上傳XML檔案</button></td>
 </tr>
 </table> 
 </div>
</script>

保太:Git 程式碼版控

學習資源:

Kendo UI 網路資源:

新北市程式開發社群工作坊-Scratch擴充積木設計(1060308、0315、0322)

日期:106年3月8日、3月15日、3月22日

地點:新北市教研中心

講師:蔡佳倫老師

三周的課程如下:
—————————————————————-
3/8 第一節課會先講語言的轉換
3/15 第二節講講mblock的積木撰寫
3/22 第三節會講python跟scratch
—————————————————————-

設備使用 Arduino模擬器 和 S2A,不用準備硬體!

課程內容:

Scratch 擴充積木設計:

教學範例:

base_helper.s2e


{

“extensionName": " 自訂積木 “,
“extensionPort": 50000,
“blockSpecs": [
[“r", “資料", “hello"],
[“r", “資料1″, “hello1″],
]

}


用Python擴充我的Scratch2 — 原理與Hello World篇

base_helper_py3.py


def do_GET(self):

  try:

 """
 process HTTP GET requests
 """
# skip over the first / . example: /poll -> poll 
 cmd = self.path[1:]
 # create a command list . 
 cmd_list = cmd.split('/')
 
 s = "不回傳資料"
 ###### 處理Scratch送出的命令
 ###### 若需回應Scratch的Poll命令,再把文字存在變數s ##
 ##############################################################
 
 crlf = "\r\n"
 if cmd_list[0] == "poll":
 s="hello " + "hello" + crlf
 s+="hello1 " + "hello1" + crlf
 
 #############################################################

except:

s = “不回傳資料"

finally:

self.send_resp(s)


Creating Scratch 2.0 Extensions 摘要說明:

Block description

Each block is described by an array with the following fields:

  • block type
  • block format
  • operation or remote variable name
  • (optional) zero or more default parameter values

The block type is one of these strings:

  • " " – command block
  • “w" – command block that waits
  • “r" – number reporter block (round ends) ==> 前面有帶一個 checkbox
  • “b" – boolean reporter block (pointy ends)
  • “R" – Reporters that wait (round ends)

The block format is a string that describes the labels and parameter slots that appear on the block. Parameter slots are indicated by a word starting with “%" and can be one of:

  • %n – number parameter (round ends)
  • %s – string parameter (square ends)
  • %b – boolean parameter (pointy ends)

Menu parameters

Both command and reporter blocks can include menu parameters:

  • %m.menuName – menu parameter (not editable)
  • %d.menuName – editable number parameter with menu
{ 
  "extensionName": "Kinect",
  "extensionPort": 12345,
  "blockSpecs": [ 
    ["r", "get %m.coordinate position of %m.bodyPart", "position"],
  ], 
  "menus": { 
    "coordinate": ["x", "y", "z"],
    "bodyPart": ["head", "shoulder", "elbow", "hand"],
  },
}

position/y/hand 247 => 回傳值為 247 (鍵、值用空格分隔)

Polling (每秒 30 次)

Scratch to retrieves sensor values and status information from the helper app by sending a poll command:

request: /poll

Here’s an example poll response:

response: 鍵、值用空格分隔,每一筆資料用 crlf (\r\n) 分隔

brightness 75 + crlf (\r\n)
slider 17 + crlf (\r\n)

Commands

/beep                    (command with no parameters)
/setVolume/5   (command with a numeric parameter)

Commands that wait

turn motor on for 3 seconds

turns on the motor, waits three seconds, then turns it off again. When this block is used in a script, execution does not continue to the next block until the command completes. A command that waits is indicated by the “w" block type in the command descriptor.

When a “w" command is invoked, Scratch adds a unique command_id parameter to the request (before any other parameters). For example, for the motor command above Scratch would send:

request:     /motorOn/2437/3

The first parameter, 2437, is a unique identifier for this invocation of the command. For the three seconds that this command takes to complete, the helper app adds a busy line to the poll request:

response:  _busy 2437 …

A busy line consists of the string “_busy" followed by a list of unique identifiers separated by spaces. When Scratch gets a poll result that doesn’t include 2437 in the busy line (or doesn’t even have a busy line), it knows that the command is complete and allows the script that invoked that command to proceed.

Reporters that wait (目前已實作出來) => “R"

temperature in city_name

request:     /getTemperature/7639/Boston

response:  _result 7639 82

Reset command

Scratch extensions can control motors or music synthesizers. Users expect to be able to stop everything — turn off motors, silence music synthesizers, and reset hardware back to it’s original state — by clicking the stop button in the Scratch editor. Thus, when the stop button is clicked, Scratch sends a reset command to all active extensions:

request: /reset_all


參考資料與範例:

mBlock 擴充積木設計:

mBlock 積木程式轉Arduino 程式教學:

範例一:

Autodesk 123D circuits 繪圖

mBlock 積木程式:

Arduino 程式

#include <Arduino.h>
#include <Wire.h>
#include <SoftwareSerial.h>

double angle_rad = PI/180.0;
double angle_deg = 180.0/PI;
double switchStatus;

void setup(){
Serial.begin(9600); //改成9600,才能於123D中執行
pinMode(2,INPUT);
}

void loop(){
switchStatus = digitalRead(2);
Serial.println(switchStatus);
_loop();
}

void _delay(float seconds){
long endTime = millis() + seconds * 1000;
while(millis() < endTime)_loop();
}

範例二:

Autodesk 123D circuits 繪圖

mBlock 積木程式:

Arduino 程式

#include <Arduino.h>
#include <Wire.h>
#include <SoftwareSerial.h>

double angle_rad = PI/180.0;
double angle_deg = 180.0/PI;
double Button;
double LED;

void setup(){
    Button = 2;
    LED = 12;
    pinMode(Button,INPUT);
    pinMode(LED,OUTPUT);
}

void loop(){
    if(((digitalRead(Button))==(1))){
        digitalWrite(LED,1);
    }else{
        digitalWrite(LED,0);
    }
    _loop();
}

void _delay(float seconds){
    long endTime = millis() + seconds * 1000;
    while(millis() < endTime)_loop();
}

void _loop(){
}

參考資料:

BlocklyDesigner 安裝教學:

蔡佳倫教學影片:

活動照片: