使用OLED顯示器作為外接顯示器

描述

當(dāng)您想探索如何將小型顯示器用作產(chǎn)品、原型或項(xiàng)目的界面時(shí)，可能很難快速探索不同的選項(xiàng)。通過(guò)image2cpp等工具，您可以將繪制的圖像轉(zhuǎn)換為 Arduino 代碼并將其上傳到 Arduino。但理想情況下，您可以直接在屏幕上繪圖，就像Figma Mirror如何在手機(jī)上工作一樣，您可以在其中對(duì)設(shè)計(jì)進(jìn)行編輯并立即在手機(jī)上看到發(fā)生的變化。

制作小屏幕原型的一種快速而骯臟的方法是將手機(jī)“放入”原型中，并且只使用手機(jī)屏幕的一小部分進(jìn)行顯示，而手機(jī)的其他部分可用于“偽造”LED 或電容式按鈕（我最多可以做到 1.5 毫米，具體取決于觸摸屏）。這可以使用 Figma 之類的工具來(lái)完成，但是當(dāng) p5 或 Framer 需要更多復(fù)雜性時(shí)。如果您想讓手機(jī)上的內(nèi)容在觸摸屏之外進(jìn)行交互，您可以讓ESP32 充當(dāng)手機(jī)的鍵盤，然后可以使用它來(lái)創(chuàng)建物理旋鈕、滑塊或按鈕。但在某些時(shí)候，最好轉(zhuǎn)向真正的硬件，檢查質(zhì)量、亮度、精確的像素密度，有時(shí)你的原型可能無(wú)法達(dá)到現(xiàn)代手機(jī)的大??；）

?

處理應(yīng)用程序中顯示的像素

?

?

實(shí)際硬件上顯示的像素

?

?

此代碼包含一個(gè)處理草圖，該草圖捕獲光標(biāo)當(dāng)前位置的像素（以及光標(biāo)右下角的一個(gè)框）。這些像素被發(fā)送到 Arduino，Arduino 使用u8g2庫(kù)將其發(fā)送到顯示器。原理類似于From Pixel to Neopixel 項(xiàng)目。這樣，任何在電腦上制作圖形的工具（從 Paint 到 After Effects，從 GameMaker 到 p5，從 Sketch 到 Figma）都可以用來(lái)控制顯示器上的像素，這對(duì)于體驗(yàn)原型（你想要為人們提供產(chǎn)品體驗(yàn)，同時(shí)仍然能夠?qū)α鞒獭?nèi)容和副本進(jìn)行敏捷更改。

使其工作的步驟

• 獲取上面描述的硬件（顯示應(yīng)該是u8g2庫(kù)支持的）
• 得到一個(gè) Arduino，任何 Arduino 都可以，只要它使用串行連接連接到計(jì)算機(jī)。并下載Arduino (pro) IDE （或使用網(wǎng)絡(luò)編輯器）
• 下載Processing IDE （如果您還沒(méi)有獲得它），該代碼應(yīng)該可以在 Mac OSx 和 Windows 上運(yùn)行，因此希望它在未來(lái)可以繼續(xù)運(yùn)行。它可能被視為間諜軟件，因?yàn)樗_實(shí)會(huì)查看屏幕上發(fā)生的事情，但它不會(huì)將其發(fā)送到 Arduino 以外的任何地方。
• 通過(guò)轉(zhuǎn)到 Sketch > Include Library > Manage Libraries 并搜索u8g2并通過(guò)Oliver安裝庫(kù)來(lái)獲取庫(kù)
• 下載或復(fù)制并粘貼代碼并將代碼上傳到 Arduino。
• 運(yùn)行 Processing 草圖，您應(yīng)該準(zhǔn)備好探索顯示器上的動(dòng)畫、界面和動(dòng)態(tài)內(nèi)容
• 在處理中確保選擇了正確的端口
• 如果你想使用 Figma 創(chuàng)建屏幕，一個(gè)好的技巧是在 Chrome 或 Chromium 中打開(kāi)Figma 鏡像并打開(kāi)檢查器，切換設(shè)備工具欄并將屏幕縮小到顯示器的精確分辨率。

Arduino代碼解釋

Arduino 代碼“簡(jiǎn)單地”從處理中獲取數(shù)據(jù)并將其傳遞到顯示器上。要知道一條消息已經(jīng)開(kāi)始，它會(huì)等待一個(gè)“S”和一個(gè)“.”。這不是很科學(xué)，但是在將一個(gè)字節(jié)解釋為顯示器的亮度之后，它似乎大部分時(shí)間都起作用，之后的所有字節(jié)都保存在一個(gè)數(shù)組中然后傳遞給顯示器，這需要一些內(nèi)存來(lái)自 Arduino，所以“流式傳輸”它可能是一個(gè)更好的解決方案，但現(xiàn)在它可以工作，而不必深入到 u8g2 庫(kù)中。串行波特率是你可以玩的，我現(xiàn)在讓它在 2Mbps 上工作，但這取決于你的微控制器

處理代碼解釋

在處理過(guò)程中，它從光標(biāo)位置開(kāi)始截取當(dāng)前邊界框，根據(jù)屏幕的寬度和高度向下和向右移動(dòng)。當(dāng)然，您也可以將其更改為固定位置；如果您希望仍能使用光標(biāo)。

由于我將它與 1 位單色顯示器一起使用，因此每一位都代表一個(gè)像素。這使得從像素轉(zhuǎn)換為字節(jié)有點(diǎn)復(fù)雜，它從每個(gè)像素獲取亮度并檢查亮度是否高于 126，如果是，則將 1 添加到比特流，否則，它會(huì)添加 0。

如果您使用 fe 4 位灰度顯示器，則需要對(duì)代碼進(jìn)行一些更改以使其正常工作，類似于多色顯示器。我已經(jīng)讓它與 1.8" 彩色 TFT 顯示器一起工作，幀率為 1fps；如果您對(duì)此感興趣或有提高速度的好主意，請(qǐng)告訴我。

處理采用它可以找到的第一個(gè)串行端口；有時(shí)這是正確的，有時(shí)您需要更改它以選擇正確的串行端口。這可以通過(guò)更改 Serial.list()[0]; 類似于 Serial.list()[1]; 或 Serial.list()[2]; 在處理草圖下方的監(jiān)視器中，您可以看到操作系統(tǒng)可以找到的不同串行端口。在 Arduino 中，您可以在窗口的右下角看到當(dāng)前端口的正確名稱。

免責(zé)聲明

在小型顯示器上更容易對(duì)內(nèi)容進(jìn)行原型設(shè)計(jì)這一事實(shí)并不是將屏幕放置在所有產(chǎn)品中的任何理由。（動(dòng)態(tài)）屏幕對(duì)于有視覺(jué)障礙的人和無(wú)法將眼睛集中在屏幕上的人來(lái)說(shuō)可能是一個(gè)真正的負(fù)擔(dān)。考慮定位良好的 LED，因?yàn)樗鼈儾粫?huì)改變位置，您可以更輕松地了解位置。考慮給用戶提供觸覺(jué)再保證反饋的按鈕。考慮機(jī)械開(kāi)關(guān)（在視覺(jué)和物理上都代表狀態(tài)）。我們通過(guò)原型設(shè)計(jì)獲得的時(shí)間應(yīng)該用于探索測(cè)試和構(gòu)建各種選項(xiàng)。

在汽車的 UI 設(shè)計(jì)中，駕駛員需要能夠?qū)Ｗ⒂诘缆?，而不是用眼睛搜索按鈕。對(duì)我來(lái)說(shuō)，汽車正在從按鈕、開(kāi)關(guān)和表盤轉(zhuǎn)向全觸摸屏顯示器，這對(duì)我來(lái)說(shuō)似乎很可怕。因?yàn)槟枰獙⒆⒁饬性诘缆飞?，并且您不必查看手指?zhǔn)確觸摸屏幕的位置。

?

?