最近完成了終身大事,也終於有點時間記錄一下了,身為一個宅宅工程師,我堅持自己的婚禮也要充斥一點宅味,當然也要感謝我的老婆容忍我的任性(疑~)。
其實很久以前就想過婚禮時可以做哪些系統了,有鑑於大家都說到時候不會有時間做這些事情,於是我提早開始準備我要做的系統。
互動式婚紗照片
我一直覺得婚紗本又重又難收藏,所以我很早就想把婚紗照直接用螢幕輸出,但只做播放太無聊了,所以我想要加入一些互動的元素,很直覺就想到用「motion detect」來做翻頁。
gest.js
gest.js這套 Library 可以用 camera 來辨識揮手的動作,辨識上下左右。試了一下辨識度還不錯。
jssor slider
要找適合的 slider library 反而找比較久,因為我希望可以支援上下左右的滑動效果,自動播放時也有一些客製化的特效,但大部分的 slide show 都只有左右滑動,最後找到這個客製化程度蠻高的 library jssor slider ,實際使用時其實他也沒辦法直接用上下滑動,所以我有修改了他的原始碼,讓他可以支援動態改變左右滑動與上下滑動。
最後就生出來這個版本了:DEMO,有興趣玩的人只要把 /image/photos/ 底下的照片換掉即可。有空我再寫 README。
現場是用 iMac 顯示,然後在桌上弄點布置這樣,真是頗具巧思(自己說)。不過事實證明,沒有人介紹的話其實鮮少有人會發現可以用手控制,然後應該是小孩比較有興趣而已XD。
婚禮留言板
這個是我一直想做的東西,每次參加婚禮在開場前賓客都會不知道要幹嘛,早到的朋友會有點無聊,為了增加一點互動性,應該安排一些小活動給大家玩,類似的東西就是實體的留言箱,大家發一張小卡,然後上面些一些祝福的話,最後新人抽獎出來之類,不過因為沒有辦法看到大家的留言,少了一點即時的參與感。於是我又打算 web 化(沒辦法,我只會這個XD),讓賓客用手機留言,然後即時顯示在投影布幕上。
桌卡
桌卡的範本來自於 mybigday (個人覺得不好用),不過我用了他的桌卡範本改成我要的格式,放了 QR code 和連結上去。
手機留言
留言板
抽獎活動
留言當然要用點誘因來讓大家留言囉,於是我做了一個透過手機抽獎,可以讓主持人邀請重要嘉賓抽獎的部分。
最後的重頭戲就是抽獎了,由於前陣子很愛玩 ranger ,而且他的抽獎動畫實在是太可愛了,所以我就把裡面的動畫擷取出來做抽獎,效果不錯(自己說)。
小插曲
千古不變的定律, live demo 一定會出狀況,當天果然也是,原因是我以為 facebookid 都會拿到一串數字,結果我自己白痴塞了一些預設的 string id 進去,本來是拿數字 id 來取 mod 所以就出狀況了。好在我有堅強的 HTC FE 團隊協助我當場的 debug(hug)。
總結
- QR code 很不普及。
- 桌卡做的太假掰,有人以為是餐廳的根本不想理。
- 非常非常需要 promote,下次有機會(疑?)應該要請工作人員一桌一桌介紹或施加壓力(?)留言,要讓大家更有參與感一點,最後的抽獎才會 high。
- 其實只是搞死自己而已,其實我程式早在兩個月前就準備好了,不過婚禮前幾個禮拜測試發現 firebase 的 auth 部分改版了,結果為了要測 auth 的部分又花了一些時間修改程式。中間一度想要放棄這個活動。下次有機會(疑?)就乖乖的走完流成就好了。
- 我老婆好票釀。
- 謝謝大家的參與,大家下次見(疑?)
- 我愛我老婆。
最後順便打個廣告,如果有人對這個留言系統和抽獎程式有興趣的話請來信聯絡,保證以友情價情義相挺。