2016年10月27日

雲端硬碟上傳檔案及表單記錄

有個機會,要利用雲端硬碟收檔案,還要把表單記錄下來,找了一些文件,許多只是做到上傳檔案。
參考網址:https://medium.com/@jimmy0816/%E5%A6%82%E4%BD%95%E5%BB%BA%E7%AB%8B%E5%8F%AF%E4%BB%A5%E4%B8%8A%E5%82%B3%E6%AA%94%E6%A1%88%E7%9A%84google%E8%A1%A8%E5%96%AE-how-create-a-file-upload-form-with-google-script-72f019539073#.nrnze43jh

1.首先你要啟用google script

 2.建一個新專案google script,並改名成:上傳檔案表單(請自取名字)
3.gs程式
剛開始是:


清空並,貼上下列程式碼 (程式來源:https://medium.com/@jimmy0816/%E5%A6%82%E4%BD%95%E5%BB%BA%E7%AB%8B%E5%8F%AF%E4%BB%A5%E4%B8%8A%E5%82%B3%E6%AA%94%E6%A1%88%E7%9A%84google%E8%A1%A8%E5%96%AE-how-create-a-file-upload-form-with-google-script-72f019539073#.nrnze43jh)


function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html');
}
function uploadFiles(form) {
  try {
    
    var folderName = "上傳區";   //上傳的資料夾名稱
    var sheetName = "上傳表單";  //上傳的表單名稱
    var folder;
    var folders = DriveApp.getFoldersByName(folderName);
    
    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      //如果資料夾不存在,自動建立
      folder = DriveApp.createFolder(folderName);
    }
    //handling uploading file
    var blob = form.myFile;    
    var file = folder.createFile(blob);    
    file.setDescription("Uploaded by "+ form.myName+" - " + form.myEmail  + "("+ form.myTel +")" );    
    
    var fileUrl = file.getUrl();
    
    //尋找雲端硬碟是否有這個檔案
    var FileIterator = DriveApp.getFilesByName(sheetName);
    var sheetApp = "";
    while (FileIterator.hasNext())
    {
      var sheetFile = FileIterator.next();
      if (sheetFile.getName() == sheetName)
      {
        // 如果有這個資料表就把它打開
        sheetApp = SpreadsheetApp.open(sheetFile);
      }    
    }
//如果沒有就建立一個新的
    if(sheetApp == "")
    {
      sheetApp = SpreadsheetApp.create(sheetName);
    }
    // 讀取第一個sheets找到最後一行
    var sheet = sheetApp.getSheets()[0];
    var lastRow = sheet.getLastRow();
    // 寫入新的資料
    var targetRange = sheet.getRange(lastRow+1, 1, 1, 4).setValues([[form.myName,form.myEmail,form.myTel,fileUrl]]);
    
    return "檔案上傳成功!"
    
  } catch (error) {
    
    return "檔案上傳失敗! 原因:"+error.toString();
  }
  
}

注意你要修改的是:
第二行有一個form.html,這是等一下表單檔名,如果不喜歡,請改名。
var folderName = "上傳區";   //上傳的資料夾名稱
var sheetName = "上傳表單";  //上傳的表單名稱
這一行要特別注意:
var targetRange = sheet.getRange(lastRow+1, 1, 1, 4).setValues([[form.myName,form.myEmail,form.myTel,fileUrl]]); 

sheet.getRange(lastRow+1, 1, 1, 4)是說
method getRange(row, column, optNumRows, optNumColumns) 
如果等一下網頁中的欄位數不同要改4這個數字(看你要記錄幾欄), 改了數字,相對後面的值要跟著改
[[form.myName,form.myEmail,form.myTel,fileUrl]]
它的表示法是在[[]]中加入欄位名以form.欄位名稱,分隔(半形逗號)。
 
4.建一個新的html檔案,檔名要和gs檔中第二行
return HtmlService.createHtmlOutputFromFile('form.html'); 
中的文字相同,這裡是form.html


5.把下列程式碼取代原來的程式碼
原來是這樣:清除全部
貼上程式碼:(程式碼來源:
https://medium.com/@jimmy0816/%E5%A6%82%E4%BD%95%E5%BB%BA%E7%AB%8B%E5%8F%AF%E4%BB%A5%E4%B8%8A%E5%82%B3%E6%AA%94%E6%A1%88%E7%9A%84google%E8%A1%A8%E5%96%AE-how-create-a-file-upload-form-with-google-script-72f019539073#.nrnze43jh

<!DOCTYPE html>
<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<script src="//cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<script>
    function fileUploaded(status) {
       $('form').hide();
       $('#output').html(status);
    }
</script>
<body>
<div class='container'>
 <h1>作業上傳表單</h1>
 <form>
  <fieldset class="form-group">
    <label for="myName">姓名</label>
    <input type="text" name="myName" class="form-control" id="myName" placeholder="請輸入姓名">
  </fieldset>
  <fieldset class="form-group">
    <label for="myEmail">Email</label>
    <input type="email" name="myEmail" class="form-control" id="myEmail" placeholder="請輸入Email">
  </fieldset>
  <fieldset class="form-group">
    <label for="myTel">電話</label>
    <input type="tel" name="myTel" class="form-control" id="myTel" placeholder="請輸入電話">
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleInputFile">File input</label>
    <input name="myFile" type="file" class="form-control-file" id="exampleInputFile">
    <small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
  </fieldset><button type="submit" class="btn btn-primary" onclick="$('#output').html('上傳中...');
                    google.script.run.withSuccessHandler(fileUploaded)
                    .uploadFiles(this.parentNode);
                    return false;">確定送出</button>
 </form>
 <div id="output"></div>
</div>
</body>
</html>
 
注意這裡注意紅字的三個name就是gs檔中的form.名字,這幾個欄位你不一定適用,改變時記得html檔和gs檔都要一起改變。
如果要增加欄位,可以複製程式碼
<fieldset class="form-group">
    <label for="myTel">電話</label>
    <input type="tel" name="myTel" class="form-control" id="myTel" placeholder="請輸入電話">
  </fieldset>
 加以修改(藍色的部分都要修改),至於input形態(文字、數字、下拉選單、radio、...)請多看html5相關文件
個人示範改一個radio的範例
 <fieldset class="form-group">
    <input id="identity1" type="radio" name="identity" value="教師" class="form-control"  aria-required="false">教師
    <input  id="identity2" type="radio" name="identity" value="義工" class="form-control"  aria-required="false">義工
 </fieldset> 
 
6.取得程式權限(記得要存檔),點選程式碼.gs,執行/doGet,這時要同意權限。

 
 
7.發佈程式,發佈/佈署為網路應用程式。

 
 
8.這個script專案有版本號,管理在:


 9.使用者填完表單,就會在雲端硬碟中出現。



2016年10月24日

有木國小到校培訓

今天騎上機車,一直給它騎,就到了有木國小。

大維主任很客氣,今天處理了。
1.電腦教室網段改成10.231.xx.xx,請大同把L3處理了一下,這樣學校IP就不會有不足或相衝突了,小校真實IP只有半個C。
2.把一台學生機重新把drbl server處理起來(找不到了),並重新建置教室環境。
3.還原最新的edu2016系統,請大維主任調成學校的環境,並說明將來如何異動、回收、還原到學生端。調校老師機、安裝italc-master....

其中發現,教師機是行政電腦過來的(硬碟不一樣),我還是用drbl還原回去了,使用進階模式/忽略硬碟大小。drbl 強,我們的系統也強。
 4.老師機說要做視訊連線,把webcam接上,免調校,使用vlc cheese均能正常使用。edu2016強。
 一個上午處理完成。中午讓大維老師招待讓他破費了,萬分感謝,地方特色真的美味,閒聊間,才知大維和我都是客家人,和楊梅也都有關係,師專也是同門,真是有緣。





2016年10月17日

我的運算思維與創客


現在的教學讓學生懂得很多,做的卻很少。可能沒時間吧!但他們乎略了知易行難的道理,很多重大的發明並沒有用到艱深的知識。
我個人認為運算思維和創客不是要培養發明家,或是讓學生學程式,應該是習慣和態度的養成,偏偏這個很難教。以前師專老師教我要"做中學",老師教學生要"舉一反三",這和運算思維創客的精神是相通的。

家庭即工廠
這是多久以前的詞了,可見一把年紀了。工作環境的改變,我的工作環境換成家裡。

今天想了一想,把想法變成做法。老婆大人應會該很滿意吧。

老婆大人老是說你很喜歡看購物頻道!我想了一下我本來就是斑馬(台語叫黑白馬), 但我不是購物狂。在購物頻道買了二件物品(撥水劑和清潔劑),因為車子要用,加上他們的一些用法,讓我有了一些點子。

當然買來有發揮一些功用,但那不是我要的。分享一下我的用法:
1.撥水劑拿來用在廁所(廁所是我的實驗室),把馬桶清乾淨,再噴上撥水劑,結果,有比較好用些,污物不易附著,隨著時間長,還是會上去,可以持續約一個月(效果遞減),還是要定期清理廁所。

2. 我是君子,所以禮記:君子遠疱廚。今天廚房變成我的工廠了。把清潔劑拿來清排油煙機,上面的油垢是令人....。老婆每次都買新的油網和盛杯(懶得洗)。我也曾在大掃除中適了不少清潔用品,效果都不好。今天試了一下,新的物品,結果,除污效果有比較好,但是不像電視中的容易,盛杯要用報紙先把大部分油污先移除。
泡了一小時,還是要用力清除。效果沒那麼好。可能買新的會比較好些。
排油煙機頂部就恐怖了
連廠牌都看不到了。使用過後,無法回復原貌,但好多了。我用名片遮掉廠牌。
再來還是要維護才能保持好。又想到用撥水劑來延長維護時間。使用撥水劑時找不到噴嘴(一個已放在車上),於是拿舊的清潔劑噴嘴來解決問題。於是廚房變成這樣了。


去做了才知老婆大人平時的辛苦。去做了才知道問題點在哪裡。
到五金賣場找濾網,結果發現金鐘罩,XDD。



A+B可能會出現不同的組合,答案不一定只有C

運算思維和創客要培養解決問題的能力(這不是之前的能力指標嗎),我想文科的人一定心中怪怪的,為何只有3D印表機、arduino、....得到賞識,花了不少錢在購置,自己努力讓學生學文學,做文學創客,卻.....。我想說的是,這些都是運算思維,都是創客,如果能互相結合,那效果會加倍(這不是以前的融入教學、合科課程嗎?)事實上教育並沒有太大的改變,也是不斷的再發現問題和解決問題。

真的期待107課網別讓學生又是在課堂上學更多知識,我們的學生會"贏在起跑點",輸在成功的終點

2016年10月12日

自製Hologram影片

基本關念:
一個透明或昰伴透明的四角錐
一段Hologram的影片
做法:
一.系統:edu2016
二.程式:kdenlive
三.做法:
1.使用透明片製作一個梯形角錐體。可以下載svg檔,使用inkscape來開、修,印出並裁剪(中間的正方形使用假刀,割一條痕方便折合,邊緣剪裁下來),每個梯形邊緣使用透明膠帶黏貼。
手機使用上底 1 cm ,下底 6 cm ,高 3.5 cm梯形圖
平板使用:上底 1.5 cm ,下底 9 cm ,高 5.25 cm圖
2.影片製作:
2-1準備素材:底圖二張(1920x1080)、動畫4個(可以到cc素材搜尋)、主角圖一張、背景音樂。
youtube素材搜尋請尊重智財權
新北市E學園開放圖庫音樂
底圖可以使用inkscape匯入圖檔後縮放

 


2-2使用影片剪輯軟體kdenlive
(1)開啟一個1902x1080的影片專案(預設)
(2)插入二個影片軌,預設是3個,我們需要5個影片軌。


 (3)修改軌道名稱,方便識別。
(4)把準備好的素材讀入kdenlive中並放入適當軌道中,為也速起見,背景特效使用相同的影片。

(5)使用影片功能旋轉縮放各圖片和影片至適當大小並使用轉場功能讓影片。
(6)輸出影片
(7)影片上傳手機或是yputube

影片製作教學錄影


   

2016年10月3日

bpi-m2+安裝flash player

BPI-m2+的flash player不好裝記錄一下

1.先安裝browser-plugin-freshplayer-pepperflash套件
sudo apt-get install browser-plugin-freshplayer-pepperflash

2.下載.so檔
 wget http://dl.free.fr/qVkzvqSiB

3.解壓縮,並把.so放入正確位置
tar Jxvf pepper-flash-v20.0.0.228-r1.tar.xz
cd pepper-flash
sudo mkdir /usr/lib/PepperFlash
sudo cp * /usr/lib/PepperFlash

4.修改chromium啟動程式
sudo vim /etc/chromium-browser/default
把CHROMIUM_FLAGS=改成下列
CHROMIUM_FLAGS="--ppapi-flash-path=/usr/lib/PepperFlash/libpepflashplayer.so --ppapi-flash-version=20.0.0.228-r1"
 參考網址:https://ubuntu-mate.community/t/tutorial-flash-player-for-chromium-and-firefox/3598

mac os有感


週六到松山工農蘇老師開的研習,進入電腦教室,眼睛一亮,mac pc!接下來三分鐘研究如何開機,前面旁邊找遍了沒有開關,連語音輸入都試了,原來開關在螢幕背後(好奇怪的設計)

開機後有兩個選項ios和win10,我看了一下幾乎都選ios,研習也用ios。

進入系統後開始適應系統操作,想看一下裡面裝了哪些程式,花了一點時間找到了。

開啟終端機,下了ls指令,可以通,sudo 指令也通,可惜沒管理者密碼,看了一下根目錄,和linux相差無幾bin sbin都在,想擷圖回去,按下PrtScrn,沒反應,鍵盤上原來習慣的按鈕不通了,問了一下毛小孩,原來是用super+shift 3和4。
X按鈕也在左上角,但是發現縮到最小在最大化時不能用,只能在視窗模式中可以用,所以要把某一視窗縮到工具列時,要兩次滑鼠按鍵。

一些不合理設計為何多數人接受了?

我在推edu作業系統時,也有一些聲音,個人的立場:
1.老師要把對的觀念給我的學生:
  • 自由軟體對教學和學習有益,所以不求回報做了
  • 人類視覺由左而右,由上而下,所以"X"我選擇放在左上角,即使可以調和某商業軟體體一樣,我也不做,那對學生健康無益,工作列也是相同
  • big5亂碼問題也相同,可以把系統調回big5,問題在那是即將被丢棄的産物(不適合全球化),只能讓使用者不好用,減少用它。
所以一些地方需要使用者來配合系統,而不是系統去配合使用者習慣,初期會不適應,但這是有價值的。
2.edu作業系統不是落伍的系統,所以時代産物盡可能去符合,現在創客的3D繪圖列印、雷切、arduino我們都把它調校的適合學習環境,Arduino系統我們也試著調成適合教學模式。

最後期待大家在教學上的需求可以的話盡可能回報給我們,我們會基於自由軟體(商業軟體做出來也無法回饋給大家),䀆力滿足大家。