描述

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

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

?

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

?

?

實際硬件上顯示的像素

?

?

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

使其工作的步驟

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

Arduino代碼解釋

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

處理代碼解釋

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

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

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

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

免責聲明

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

在汽車的 UI 設(shè)計中，駕駛員需要能夠?qū)Ｗ⒂诘缆罚皇怯醚劬λ阉靼粹o。對我來說，汽車正在從按鈕、開關(guān)和表盤轉(zhuǎn)向全觸摸屏顯示器，這對我來說似乎很可怕。因為您需要將注意力集中在道路上，并且您不必查看手指準確觸摸屏幕的位置。

?

?