一起快速构建图像传输与控制ESP32/ESP8266手机APP(源码)

轩哥.

已于 2025-04-11 11:36:05 修改

阅读量3k

点赞数 61

分类专栏： Android 文章标签：单片机 stm32 c语言 tcp/ip java android studio

于 2025-01-06 06:00:00 首次发布

本文链接：https://blog.csdn.net/qq_39411256/article/details/144942567

版权

一、简介

相信很多人玩了单片机后，会有这样的想法，能不能用我们最熟悉的手机来进行控制？这样该多方便呀！本章轩哥带你一起构建一款控制单片机的APP，示例ESP32-CAM图像传输与GPIO的控制, ESP32和ESP8266小模块实际上并无大差异，仅是ESP8266需要连接单片机来处理数据而已，模块只作为通讯的搭桥方式，因此本文下的ESP32/ESP8266可以选一个进行实验，他们并不是一个工程项目这里须知。

二、ESP32/ESP8266介绍

这里介绍的两个模块实际上对于我们的APP来说都是兼容的，我们可以选用一个手上有的去进行实验，ESP32-CAM可直接作为单片机来控制，而ESP8266因为封装关系一般作为一个外设模块使用，一般是ESP8266+STM32单片机方式。

2.1 ESP32-CAM单片机介绍：

这是一款基于 ESP32 芯片的摄像头模块，由安信可（AI-Thinker）公司开发。它集成了一个 Wi-Fi 和蓝牙/BLE SoC 以及一个图像传感器（通常是 OV2640 或 OV7670），大家在网上随便一搜便知，一般我们使用Arduino IDE或 Espressif-IDE开发。

2.2 ESP8266模块介绍：

此模块更是常见，这是一款正点原子的ESP8266模块大家在上学时应该比较经常用，此外还有比较多其它形式封装，但引出的引脚基本一致，我们主要通过串口与单片机连接，上电时单片机用AT指令初始化8266模块，手机app通过wifi与此模块通讯再通过串口传输给单片机命令。

三、Android Studio介绍

这是一款用于开发我们Android手机app的IDE,就类似于我们的STM32单片机所用的MDK、IAR一样；本次我们用java语言作为后台，用此IDE与大家一起构建一款控制APP。

3.1 软件安装：

软件安装可以网上搜索Android studio安装教程，包括jdk等环境配置方法，我们本章重点讲述构建控制app。安装包也可以使用博主的版本下载链接：
https://pan.baidu.com/s/1RuYhzvm3XPQpJkF3PcipNg?pwd=asdf 提取码：asdf

3.2 界面基本介绍：

1.项目组织结构区：用于展示你当前项目与展开的项目结构目录。

2.设计区：用于快速设计观察我们app的界面，也可以从旁边快速拖拉控件设计。

3.调试信息相关区域：可用于输出我们的调试信息打印信息等。

TEXT界面：用于编写我们控件的属性代码，如长宽高、id、文本等

JAVA代码编写界面：从工程结构切换到此页面，此页面就是一个主活动窗口，类似我们单片机的main.c。

3.3 工程项目结构介绍：

我们主要在布局文件包处布局手机app界面和控件，在java源文件包处写逻辑。

四、APP所用知识点介绍

要构建此app我们要学习以下相关知识点，最后我们把这些知识点组合起来就能够完成我们的控制小项目。

4.1 页面控件：

需要学习常见控件的使用，如文本、按钮、输入框等控件，如下图文本控件基本属性，我们需要知道它的基本属性便于我们配置，其它控件也有各自的特性，上网一搜基本都有。

4.2 多线程技术：

java的多线程技术很重要，它就像我们单片机的实时系统的一个个任务线程；开启多个线程是为了同时运行多部分代码，因此我们要学会java中的Thread类、Runnable接口实现。

4.3 常用类：

我们还需要学习如String类、File类、GUI图形页面的监听类。

4.4 IO流：

IO流用来处理设备之间的数据传输，里面又分为两种流，输入流与输出流，每种流又分为字节流、字符流、转换流等。

4.5 网络编程：

TCP/IP原理，Socket类，我们要弄懂，Socket使得应用层程序能够通过传输层协议（如TCP或UDP）发送和接收数据。我们本次使用的就是Socket与模块建立联系进行数据交互。

五、手机APP源码

5.1 首页xml布局源码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:background="@drawable/gg2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_weight="0"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="20sp"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <LinearLayout
            android:layout_marginTop="20dp"
            android:layout_weight="0"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/IP_getip"
                android:textColor="@color/white"
                android:textSize="20sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="0"
                android:text="IP地址:" />

            <EditText
                android:textColor="@color/white"
                android:maxLength="22"
                android:digits="1234567890."
                android:lines="1"
                android:id="@+id/edittextIP"
                android:textSize="20sp"
                android:textAlignment="center"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="0"
                android:textColorHint="@color/white"
                android:hint="请去手机复制连接wifi IP..."
                android:text="" />

        </LinearLayout>

        <LinearLayout
            android:layout_weight="0"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:textColor="@color/white"
                android:textSize="20sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="0"
                android:text="端口号:" />

            <EditText
                android:textColor="@color/white"
                android:maxLength="4"
                android:digits="1234567890"
                android:lines="1"
                android:id="@+id/edittextport"
                android:textSize="20sp"
                android:textAlignment="center"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:hint="请输入端口号"
                android:text="80" />

        </LinearLayout>

        <LinearLayout
            android:layout_weight="0"
            android:layout_marginTop="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <Button
                android:id="@+id/buttontx"
                android:background="@drawable/witch"
                android:textSize="20sp"
                android:textColor="@color/black"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="连接" />
        </LinearLayout>
        <TextView
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <TextView
            android:id="@+id/textviewabuot"
            android:textColor="@color/white"
            android:text="关于"
            android:layout_weight="0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>


    </LinearLayout>

</LinearLayout>

应用效果：