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

2512803 2022-11-07 | zip | 0.43 MB | 次下載 | 2積分

資料介紹

描述

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

短視頻展示了一部手機，并在其上方貼了一個已繪制和剪切 UI 元素的剪紙。可以用紙或紙板制成的原型，以查看需要什么尺寸的顯示器并在轉向“真實”硬件之前探索 UX 流程。

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

處理應用程序中顯示的像素

實際硬件上顯示的像素

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

使其工作的步驟

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

Arduino代碼解釋

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

處理代碼解釋

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

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

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

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

免責聲明

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