Vue篇：把网页挂在墙上？ESP32 & Vue.js液晶屏实战

前端

2023-12-24 22:51:05

前言

液晶屏在我们的生活中很常见，它是一种电子显示器件，可以显示文字、图形、图像等信息。在嵌入式系统中，液晶屏通常用于显示系统状态、操作信息、数据等。

Vue.js是一个渐进式的JavaScript框架，可以轻松构建用户界面。Vue.js具有简单易学、灵活性高、社区活跃等优点，被广泛用于Web开发中。

树莓派是一个小型单板计算机，具有强大的硬件性能和丰富的接口，可以轻松实现各种功能。树莓派常被用作物联网开发板，来构建智能家居、工业控制等项目。

硬件准备

ESP32开发板
SSD1306液晶屏（0.96寸，128x64分辨率）
杜邦线若干
面包板（可选）

软件准备

Vue.js框架
ESP32开发环境
Arduino IDE

电路连接

将ESP32开发板的3.3V引脚与液晶屏的VCC引脚相连。
将ESP32开发板的GND引脚与液晶屏的GND引脚相连。
将ESP32开发板的GPIO21引脚与液晶屏的SDA引脚相连。
将ESP32开发板的GPIO22引脚与液晶屏的SCL引脚相连。

代码编写

Vue.js代码

在Vue.js项目中，需要安装一个名为vue-ssd1306的库，该库可以帮助我们轻松控制液晶屏。

npm install vue-ssd1306 --save

在main.js文件中，导入vue-ssd1306库并创建一个Vue实例。

import Vue from 'vue'
import VueSsd1306 from 'vue-ssd1306'

Vue.use(VueSsd1306)

new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  template: `<div>{{ message }}</div>`
})

ESP32代码

在ESP32开发环境中，我们需要编写一个程序来控制液晶屏。

#include <Arduino.h>
#include <Wire.h>
#include <SSD1306.h>

#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64

SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, 21, 22);

void setup() {
  Serial.begin(115200);
  display.init();
  display.flipScreenVertically();
  display.setFont(ArialMT_Plain_10);
}

void loop() {
  display.clear();
  display.drawString(0, 0, "Hello, world!");
  display.display();
}