ESP32 مع شاشة Oled - شريط التقدم: 6 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:41

ESP32 الذي سنتحدث عنه اليوم هو واحد يأتي بالفعل مع Display Oled المدمج. هذه الوظيفة تجعل حياتنا أسهل بكثير ، لأنه يمكن أن يكون لدينا انطباع بشأن قيمة المتغير الذي يظهر. ليس عليك حتى إلقاء نظرة على نافذة تصحيح الأخطاء. أيضًا ، يمكنك تجميع التمثيلات ورسم مخططات الأداء ، من بين أشياء أخرى. بسبب هذه الفوائد ، أعتبر هذا النموذج منتجًا رائعًا ، وسنقوم ببرمجته اليوم باستخدام Arduino IDE.

لذلك ، في هذا الفيديو ، سنبرمج شريط تقدم. من المهم أن تتذكر أنه إذا كان ESP32 الخاص بك لا يحتوي على شاشة oled ، فمن الممكن شرائه بشكل منفصل. أيضًا ، إذا لم تقم أبدًا ببرمجة ESP32 ، أقترح عليك مشاهدة هذا الفيديو: مقدمة فيديو لـ ESP32 ، التي تتعامل مع الموضوع بمزيد من التفصيل.

الخطوة 1: المكتبة

لاستخدام شاشة oled ، نحتاج إلى تكوين المكتبة في Arduino IDE. للقيام بذلك ، قم بتنزيل المكتبة من خلال الرابط.

قم بفك ضغط الملف ولصقه في مجلد مكتبات Arduino IDE.

C: / ProgramFiles (x86) / Arduino / libraries

الخطوة 2: Wemos Lolin ESP32 OLED

Wemos Lolin هو اسم هذا المرساب الكهروستاتيكي. في الصورة ، الجزء الأسود هو الشاشة ، وبجانب الجهاز ، نعرض pinout بالكامل. كما هو موضح ، هناك العديد من IOs التي تسمح لنا بتشغيل وإيقاف العناصر المختلفة. بالإضافة إلى ذلك ، يحتوي هذا الطراز على أحدث جيل من WiFi و Bluetooth.

الخطوة 3: مثال

في الفيديو ، يمكنك مشاهدة مشروعنا الجاهز ، وكيفية استخدام شاشة oled لعرض شريط تقدم يتم التحكم فيه بواسطة مقياس الجهد.

الخطوة 4: التجميع

بالنسبة إلى التجميع ، استخدمت مقياس جهد يبلغ 10 كيلو بايت ، وقمت بتشغيل GPIO25 الخاص بالمؤشر. لدينا أيضًا 3v3 و GND ، كما ترون في الشكل أدناه. ستأتي الطاقة من USB نفسه.

الخطوة 5: الكود

أولا نضيف المكتبة "SSD1306.h". مع هذا ، سوف نصل إلى شاشة oled. بعد ذلك ، نقوم بإنشاء كائن عرض من النوع SSD1306 سيكون مسؤولاً عن التحكم في المحتوى المعروض في شاشة oled.

# تضمين "SSD1306.h" // الاسم المستعار لـ # تضمين "SSD1306Wire.h" // objeto controlador do display de led / * 0x3c: é um identificador único para comunicação do display pino 5 e 4 são os de comunicação (SDA، SDC) * / شاشة SSD1306 (0x3c ، 5 ، 4) ؛ // pino que ligamos o potenciometro #define PINO_POTENCIOMETRO 25 // utilizado para fazer o contador de porcentagem int contador؛

اقامة

في وظيفة الإعداد () ، سنهيئ كائن العرض الخاص بنا حتى نتمكن من التحكم في ما سيتم عرضه. من خلال هذا الكائن ، سنقوم أيضًا بتهيئة مصدر الكتابة للنصوص التي سيتم عرضها. وأخيرًا ، قمنا بتعيين الدبوس (على وجه التحديد ، الدبوس حيث قمنا بتحويل مقياس الجهد) إلى INPUT لقراءة القيمة.

إعداد باطل () {Serial.begin (115200) ؛ Serial.println () ، Serial.println () ، // Inicializa o objeto que controlará o que será exibido na tela screen.init () ؛ // gira o display 180º (deixa de ponta cabeça) // display.flipScreenVertically () ؛ // configura a fonte de escrita "ArialMT_Plain_10" screen.setFont (ArialMT_Plain_10) ؛ // configura o pino para fazer a leitura do potenciômetro. pinMode (PINO_POTENCIOMETRO ، INPUT) ؛ }

حلقة

في الدالة loop () ، سنقرأ قيمة مقياس الجهد الحالي. يمكننا أن نلاحظ أننا نستخدم وظيفة "الخريطة" بعد وقت قصير من قراءة القيمة ، لأن قيمة القراءة عالية جدًا بحيث لا يمكن وضعها في شريط التقدم ، لذلك سنقوم بتعيين القيمة لتكون ضمن النطاق من 0 إلى 100.

حلقة باطلة () {// leitura do valor do potenciometro int valor = analogRead (PINO_POTENCIOMETRO) ؛ //Serial.println(valor) ؛ // mapeando o valor do potenciometro para o valor da barra de Progresso // potenciometro faz a leitura do valor no interalo de 0 a 4095 // a barra de progresso espera um valor entre 0 e 100 contador = map (valor، 0، 4095 ، 0 ، 100) ؛ // limpa todo o display ، apaga o contúdo da tela screen.clear () ؛ // ++ عداد ؛ // عداد> 100؟ عداد = 0: عداد = عداد ؛ // desenha شريط تقدم drawProgressBar () ؛ // exibe na tela o que foi configurado até então. الشاشة. تأخير (10) ؛ }

في الوظيفة "drawProgress ()" ، سنستخدم القيمة المقروءة من مقياس الجهد المحفوظ في المتغير "percProgress" لتعيينه في شريط التقدم. سنضع أيضًا نصًا أعلى شريط التقدم مباشرةً ، مشيرًا إلى النسبة المئوية الحالية.

// função para desenhar شريط تقدم لا يوجد displayvoid drawProgressBar () {Serial.print (">>") ؛ Serial.println (كونتادور) ؛ // desenha شريط تقدم / * * drawProgressBar (x ، y ، العرض ، الارتفاع ، القيمة) ؛ parametros (p): p1: x Coordenada X no plano cartesiano p2: y Coordenada Y no plano cartesiano p3: width comprimento da barra de progresso p4: height altura da barra de progresso p5: value valor que a barra de progresso deve ensir * / screen.drawProgressBar (10 ، 32 ، 100 ، 10 ، كونتادور) ؛ // configura o alinhamento do texto que será escrito // nesse caso alinharemos o texto ao centro screen.setTextAlignment (TEXT_ALIGN_CENTER) ؛ // escreve o texto de porcentagem / * * drawString (x ، y ، text) ؛ parametros (p): p1: x Coordenada X no plano cartesiano p2: y Coordenada Y no plano cartesiano p3: string texto que será exibido * / screen.drawString (64، 15، String (contador) + "٪")؛ // se o contador está em zero، escreve سلسلة نصية "valor mínimo" if (contador == 0) {screen.drawString (64، 45، "Valor mínimo") ؛ } // se o contador está em 100، escreve سلسلة نصية "valor máximo" وإلا إذا (contador == 100) {screen.drawString (64، 45، "Valor máximo")؛ }}

الخطوة 6: بعض الوظائف الأخرى المثيرة للاهتمام

عرض

// يضع الشاشة رأسًا على عقب

void flipScreenVertically () ؛

رسم

// يرسم بكسل واحدًا من الشاشة

setPixel باطلة (int16_t x، int16_t y) ؛

// ارسم خطا

drawLine باطل (int16_t x0، int16_t y0، int16_t x1، int16_t y1) ؛

// ارسم مستطيلاً

رسم باطل (int16_t x، int16_t y، int16_t width، int16_t height) ؛

// أرسم دائرة

رسم دائري باطل (int16_t x، int16_t y، int16_t radius) ؛

// املأ دائرة

ملء الفراغ (int16_t x، int16_t y، int16_t radius) ؛

// ارسم خطًا أفقيًا

رسم باطل أفقي (int16_t x، int16_t y، int16_t length) ؛

// ارسم خطًا رأسيًا

باطل drawVerticalLine (int16_t x، int16_t y، int16_t length) ؛

نص

// يعين محاذاة النص المراد كتابته

// TEXT_ALIGN_LEFT ، TEXT_ALIGN_CENTER ، TEXT_ALIGN_RIGHT ، TEXT_ALIGN_CENTER_BOTH

setTextAlignment باطلة (OLEDDISPLAY_TEXT_ALIGNMENT textAlignment) ؛