2012年11月9日 星期五

HTML5 : NumberSelector 抽號碼機

還記得我用 Flash 寫的第一支應用在課堂上的程式是個簡易的抽號碼機,它很陽春,就是按個按鈕,然後依照設定去抽出號碼。比較可以拿來誇口的是,號碼抽出後,會以語音報數字,聲音來自當時還小不隆咚的兒子,他只錄了 1~10,外加一個「號」字,我再以演算法組合成其它數字,最多可以報到九十九號。之後有了第二代,語音檔改成由外部的 MP3 檔案載入,因此,使用者可以自己錄製想要的語音換掉。最近在研究 HTML5 ,這兩天利用 LimeJS 改寫成 HTML5 版的 「NumberSelector 抽號碼機」,並製作成了離線版,可以在 iPad 上操作。
由於 iPad 上對於聲音有一些限制,最大的困擾是無法離線播放聲音檔,所以,目前暫時沒有加上音效,等日後再加強。

使用方法
  • 先將 html5_NumberSelector.zip 下載回去,並儲存在磁碟上。
  • 將 .zip 檔解壓縮以後,以類似「記事本」的文字編輯器修改名稱為「 NumberSelector_set.js」的設定檔。各參數的用法請參考後面的說明。
  • 如果想要在抽完號碼出現照片,將照片以兩位數的號碼來命名(小於十的要在前面補一個零),例如:01.jpg , 02.jpg , 03.jpg ......。將照片通通儲存到「photo」資料夾中。
  • 修改「cache.manifest」:用類似「記事本」的文字編輯器修改這個 iPad 用來判斷哪些檔案要先下載到「快取」空間的清單。如果在 photo 資料夾中加了 10.jpg 這張照片,我們就必須在 cache.manifest 中加入一行 photo/10.jpg ,如法泡製,把所有用到的圖片路徑,通通加入 cache.manifest 的清單中,這樣,下次有連網路時,就會自動將檔案儲存在 iPad 中,供下一次離線使用。
    另外,有一點很重要,每次修改「cache.manifest」,記得修改類似「# Updated on: 2012-11-04 23:00:31」這行的時間戳記,這樣,iPad 才知道內容有異動而重新下載更新檔案。
  • 前述步驟都完成後,就可以將 html5_NumberSelector 資料夾的檔案上載到類似 Dropbox 的空間,中並用 iPad 中的瀏覽器 Safari 來連線瀏覽。
  • 進入到「抽號碼機」的頁面以後,我們可以按一下網址右側的按鈕,出現帶有「加入主畫面螢幕」的選單後,按一下「加入主畫面螢幕」。
  • 出現「加入主畫面螢幕」的畫面後按「新增」。



以後就不需打開 Safari ,直接點選新增的圖示即可開啟號碼機,而且它還是全螢幕的。


修改設定檔 

HTML5 版的抽號碼機,設定檔的檔名是「NumberSelector_set.js」,它是一個純文字檔,因此,我們可以用類似記事本的文字編輯器來開啟。檔案裡面可以讓我們設定以下的參數:
  • boymin:男生的號碼最小由多少開始。
  • boymax:男生的號碼最大到多少。
  • girlmin:女生的號碼最小由多少開始。
  • girlmax:女生的號碼最大到多少。
  • exclude:要跳過的號碼清單,每一個數字間用一個半形逗號隔開。例如: '5,27,36' 的意思是要跳過 5號, 27號和36號。
  • photoNameExtension:可以用來指定照片檔的附檔名為何,例如:「photoNameExtension = '.jpg';」的意思是,照片附檔名為「.jpg」,所以 1號、 2 號、3 號的照片檔名就必須是 01.jpg , 02.jpg , 03.jpg ...... 以此類推。

修改過 NumberSelector_set.js 的話,記得順便修改一下「cache.manifest」中的「# Updated on: 」後的時間,這樣,下次有連網路的狀況下開啟程式,它會自動更新設定檔。


檔案下載
相關檔案

更新記錄
  • 2012.11.08 完成第一版,測試離線功能。
  • 2012.11.07 起草。


5 則留言:

  1. 老師你好!
    我有下載你之前的作品-numberselector
    但是那個照片卻顯示不出來?

    不知道是不是因為作業系統為win7,所以無法顯現!

    我的用途也是要用在上課,在此也希望能尋求你的同意讓我使用。

    回覆刪除
  2. ZenLi's pen 您好:

    照片出不來,跟 Windows 是哪個版本無關,如果確定照片的檔名無誤,與您將所有檔案放哪裡或是 Flash Player 用哪個版本有關。
    我的 .zip 檔中有 .exe 和 .swf 兩種版本,如果您開的是 .exe 的,因為它是用 Flash 8 包裝的,對中文的資料或檔名敏感,如果檔案存放在帶有中文的路徑中,就會有照片出不來的情形。建議您下載較新的 Flash Player 來開啟 .swf 的檔案即可不受此限制。

    http://www.adobe.com/support/flashplayer/downloads.html

    回覆刪除
  3. 謝謝老師的告知!我試過真的是路徑的問題。也已經下載Flash Player來使用,真是謝謝妳的分享。

    回覆刪除
  4. 請問影像大於 150x150 該如何讓影像在選號後以 100% 的比例呈現?(覆蓋畫面也沒關係)

    回覆刪除
    回覆
    1. 您好:
      除非修改程式及版面設計,不然,依目前的程式,它只會顯示小張的圖示在左上角。

      刪除

 
© 2009. Design by Pocket