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

描述

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

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

?

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

?

?

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

?

?

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

使其工作的步驟

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

Arduino代碼解釋

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

處理代碼解釋

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

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

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

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

免責(zé)聲明

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

在汽車的 UI 設(shè)計(jì)中，駕駛員需要能夠?qū)Ｗ⒂诘缆罚皇怯醚劬λ阉靼粹o。對我來說，汽車正在從按鈕、開關(guān)和表盤轉(zhuǎn)向全觸摸屏顯示器，這對我來說似乎很可怕。因?yàn)槟枰獙⒆⒁饬性诘缆飞?，并且您不必查看手指?zhǔn)確觸摸屏幕的位置。

?

?