Blackbing Playground

Wedding Party Hackday

16.jpg
最近完成了終身大事,也終於有點時間記錄一下了,身為一個宅宅工程師,我堅持自己的婚禮也要充斥一點宅味,當然也要感謝我的老婆容忍我的任性(疑~)。

其實很久以前就想過婚禮時可以做哪些系統了,有鑑於大家都說到時候不會有時間做這些事情,於是我提早開始準備我要做的系統。

互動式婚紗照片

我一直覺得婚紗本又重又難收藏,所以我很早就想把婚紗照直接用螢幕輸出,但只做播放太無聊了,所以我想要加入一些互動的元素,很直覺就想到用「motion detect」來做翻頁。

gest.js

gest.js這套 Library 可以用 camera 來辨識揮手的動作,辨識上下左右。試了一下辨識度還不錯。

jssor slider

要找適合的 slider library 反而找比較久,因為我希望可以支援上下左右的滑動效果,自動播放時也有一些客製化的特效,但大部分的 slide show 都只有左右滑動,最後找到這個客製化程度蠻高的 library jssor slider ,實際使用時其實他也沒辦法直接用上下滑動,所以我有修改了他的原始碼,讓他可以支援動態改變左右滑動與上下滑動。

最後就生出來這個版本了:DEMO,有興趣玩的人只要把 /image/photos/ 底下的照片換掉即可。有空我再寫 README。

10850072_10152841915926539_3126894732238031620_n.jpg

現場是用 iMac 顯示,然後在桌上弄點布置這樣,真是頗具巧思(自己說)。不過事實證明,沒有人介紹的話其實鮮少有人會發現可以用手控制,然後應該是小孩比較有興趣而已XD。

婚禮留言板

這個是我一直想做的東西,每次參加婚禮在開場前賓客都會不知道要幹嘛,早到的朋友會有點無聊,為了增加一點互動性,應該安排一些小活動給大家玩,類似的東西就是實體的留言箱,大家發一張小卡,然後上面些一些祝福的話,最後新人抽獎出來之類,不過因為沒有辦法看到大家的留言,少了一點即時的參與感。於是我又打算 web 化(沒辦法,我只會這個XD),讓賓客用手機留言,然後即時顯示在投影布幕上。

桌卡

桌卡的範本來自於 mybigday (個人覺得不好用),不過我用了他的桌卡範本改成我要的格式,放了 QR code 和連結上去。
桌卡

手機留言

c21c5f114d9bbcba443f0d334b36f5ed (1).jpg

留言板

螢幕快照 2014-12-25 13.20.21.png

抽獎活動

留言當然要用點誘因來讓大家留言囉,於是我做了一個透過手機抽獎,可以讓主持人邀請重要嘉賓抽獎的部分。
c21c5f114d9bbcba443f0d334b36f5ed.jpg

最後的重頭戲就是抽獎了,由於前陣子很愛玩 ranger ,而且他的抽獎動畫實在是太可愛了,所以我就把裡面的動畫擷取出來做抽獎,效果不錯(自己說)。
螢幕快照 2014-12-25 13.19.11.png

小插曲

千古不變的定律, live demo 一定會出狀況,當天果然也是,原因是我以為 facebookid 都會拿到一串數字,結果我自己白痴塞了一些預設的 string id 進去,本來是拿數字 id 來取 mod 所以就出狀況了。好在我有堅強的 HTC FE 團隊協助我當場的 debug(hug)。
1619141_10201994217896298_4293646646054564328_n.jpg

10806202_10201994262017401_6262181042209528548_n.jpg

總結

  1. QR code 很不普及。
  2. 桌卡做的太假掰,有人以為是餐廳的根本不想理。
  3. 非常非常需要 promote,下次有機會(疑?)應該要請工作人員一桌一桌介紹或施加壓力(?)留言,要讓大家更有參與感一點,最後的抽獎才會 high。
  4. 其實只是搞死自己而已,其實我程式早在兩個月前就準備好了,不過婚禮前幾個禮拜測試發現 firebase 的 auth 部分改版了,結果為了要測 auth 的部分又花了一些時間修改程式。中間一度想要放棄這個活動。下次有機會(疑?)就乖乖的走完流成就好了。
  5. 我老婆好票釀。
  6. 謝謝大家的參與,大家下次見(疑?)
  7. 我愛我老婆。

62.jpg

最後順便打個廣告,如果有人對這個留言系統和抽獎程式有興趣的話請來信聯絡,保證以友情價情義相挺。