設計師的小玩具:DIVOOM PIXOO 64「產品限制與資源」

這是我送給老公的聖誕節禮物。
對!我提早了快一個月送。(擺明送禮物是藉口,明明是自己想玩。)

DIVOOM PIXOO 64 ,LED 像素顯示器。
這玩具超有趣的好不好!我等不到月底聖誕節了嘛!

為疫情的關係呀,我和老公兩個人在家裡面工作。也因為長時間沒有出門,整天窩在家裡,兩個人越來越懶惰,越來越懶惰…後來想想這樣不行,我們得找個方法讓自己振作一點。

會偷懶的原因之一,就是覺得時間還有剩嘛,就安心地繼續看小說漫畫打電動耍廢, 然後一天就這樣過去了。

我找了很多種電子看板,不是太貴,就是只能像電子相框一樣靜態圖片顯示。如果想要顯示行事曆的行程和時間,必須能夠串 API,辦得到的產品都很貴呀!

退而求其次,如果不要求螢幕畫質,只要求看得懂、價格低一點就好的話呢?

DIVOOM PIXOO 64 ,不到 3000 元,64px,可以透過 WIFI 控制,也能串智慧家居,好像是個工程師會喜歡的玩具。

然後就變成我送給老公的聖誕禮物了(藉口)。

他摸索了一下,就直接把我扯下水。說:「一起來寫個小玩具吧!」我被拉去設計行事曆的介面和簡單的小動畫。

還以為很簡單呢…不!我們吵架吵到爆!

畢竟這個螢幕很多資料都沒有,一切靠自己摸索。設計師跑去看 PIXEL ART 教學,工程師跑去翻看看有沒有前人留下來的文件。產品的限制很多,如果他沒有搞清楚限制,我這邊也無法配合。

先直接來看最後成果,再跟你們說,我們夫妻倆吵了多少架吧。

目前成果

可以看到我們串了 Google Calendar 的API,能夠顯示行程名稱、行程的起迄時間。也有今天日期、時間、星期。

當然還有最重要的,現在這個行程剩下多少時間的「倒數計時」。就是不知道剩下的時間有多少,才會摸魚的你說對不對!

我設計一個簡單的動態效果,隨著倒數計時,時間慢慢減少,鐵窗會慢慢關上,背景是銀河星雲。

產品限制

想要自己串資料嗎?你會直接撞上一個最大的問題,DIVOOM PIXOO 64 不支援字體渲染

也就是說呢,它沒有字體、沒有字級一切靠自己想辦法,講白話一點就是你打字了,螢幕也不會顯示,因為螢幕沒有任何和字體有關設定。

從 App store 官方自己的 App 可以打字顯示跑馬燈,中英文皆可。但如果要自己做的話一切都是從零開始,官方沒有提供 API。

當然嘍,CSS、HTML 通通沒有,別想什麼 Style 了,NO!官方的 API 只支援讓你傳圖片上去,其它都沒有。

Google Calendar API 怎麼串、文字怎麼顯示,自己想辦法!官方 API 沒有。

困難

對設計師最麻煩的一件事,應該就是要處理 64px 吧!這個尺寸很小,要放字放圖什麼的,都要掂量一下,數個格子。在自己螢幕上看到的 Photoshop 畫面,跟實際上傳到 DIVOOM PIXOO 64 顯示出來的,幾乎不是同個圖檔,落差非常大。

螢幕的色偏非常嚴重,可以靠手機裡官方 App 調整螢幕白平衡,勉強撈回來一些。加上這是一個像素 LED 燈螢幕,Px 顆粒極粗,懷舊感非常重。

如果是純靜態圖片或不串資料的動畫還好,用官方 app 內建功能綽綽有餘。但想要串資料做動畫就需要工程師幫忙,反覆上傳圖檔測試。

工程師那邊,因為有好心大大分享的 Library,所以麻煩事少很多。據老公說法是「製作上不困難,但細節要注意」。所有的資料、動畫、文字全部都要轉成靜態的圖片,用「逐格動畫」的方式一幀一幀去兜出來。

資源

實際製作之後發現,工程師應該會很喜歡這個玩具吧!自己能大展身手的地方太多了。 設計師應該也會喜歡吧,動畫效果很有趣。

但只有設計師的話,想串資料實在太困難了,如果沒有老公寫程式串資料的話。我也只能把它當成一個美美的畫框,擺在桌上當居家裝飾了。

對設計師來說,美美的就夠了!真的,就算沒有工程師串資料,DIVOOM PIXOO 64 對我而言仍然是個很棒的顯示器!光是各種動態效果我就玩得不亦樂乎了。

內建錶盤功能可以看股票、匯率、社群網站的訂閱人數,或是顯示天氣、現在時間等。

官方產品網站 https://divoom.com/products/pixoo-64

官方文件

明明可以拿這看板做很多事,結果官方只開放一小角功能的陽春文件檔(被我家 RD 嫌棄)。

Library

前人造了輪胎,某 RD 就想站在巨人肩膀上偷懶了,感謝這位大大的無私分享。

字體

Google Calendar API

DIVOOM PIXOO 64 DIY 系列

這是個系列文章,我分成幾個部份來說。都不是什麼很難、但自己摸索會覺得麻煩的事。

  1. 產品限制與資源
  2. 圖片設計與座標尺寸
  3. 字體渲染處理方法
  4. 資料生成、設計師和工程師如何配合
  5. 動畫特效

(之後會慢慢補完內容,先把產品限制和資源、參考資料放出來,不想等我寫文的可以馬上自己動手玩看看唷!)

Study With Akane

這是我開的另一個頻道,逼自己念書用的,一次一個小時(下班後還要擠一小時出來讀書不容易啊)。
如果你覺得一個人讀書學習有點無聊,可以開這個影片出來喔!我也是一個人在讀書學習,有人陪就不孤單寂寞啦。

影片右下角,桌上那個小螢幕是 DIVOOM 另一個產品「DITOO PLUS 像素藍牙喇叭」。
音質不怎樣,但好玩!擺在桌上也好看,我非常喜歡。如果你對電子看板沒興趣,可以看看這款。

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close