TEF6686收音机-(2)Web控制

LoveVirus

上次我搭建了一款用TEF-GTK控制的TEF6686收音机，由于TEF-GTK是一个windowns客户端，使用时需要打开电脑使用，总是不太方便，如果能有一款手机控制的客户端就好了，考虑到制作客户端的难易度，我这次计划制作一款web控制的TEF6686控制客户端，这对我是一个”大工程“，因为我对自己是否能完全理解tef6686的执行逻辑完全没有把握，但是我还是想挑战一下自我。

我没有看TEF-GTK部分的源码，但是通过Arduino部分的代码可以看出单片机部分封装了TEF6686收音机的基本功能逻辑，TEF-GTK部分仅负责UI展示，然后通过通过串口发送控制字符和单片机部分进行功能交互。

由于本人长期从事JavaScript开发，对C语言并不太擅长，本着扬长避短的原则，我把大部分逻辑放到了Web部分，单片机部分只负责基本的I2C协议的转发任务。这样还有一个好处，由于单片机部分功能比较简单，功能不需要经常变化，因此在后期功能开发中不需要频繁修改上传固件。

Web控制需要联网通讯，因此我选择了具有WIFI功能的ESP8266单片机。
******************************************************************************

这是我设计的整体功能框图，最左侧是TEF6686模块，中间部分是基于ESP8266的TEF6686-Server，右侧是基于浏览器的TEF6686-Web，其中ESP8266和TEF6686部分通过I2C协议通讯，ESP8266和浏览器通过HTTP协议通讯。

TEF6686-Server部分功能比较基础，主要有WIFI、WebServer和I2C等模块，其中I2C只有最基础的write和read两个功能，我们可以把TEF6686-Server看作是一个I2C的web代理。

TEF6686-Web部分是我要重点介绍的部分，此部分差不多是TEF-GTK和原单片机功能的整合。由于此部分功能我是在一个开源项目(https://github.com/makserge/tef6686_radio)基础上进行的移植，因此大部分功能划分我和原项目保持一致。

主要包含：
Config 初始化相关的指令
Patch 补丁数据
Interface 与TEF6686-Server交互相关
Driver tef6686操作指令封装
Radio Radio操作命令

架构设计完了，下面开始软件构件部分
我大致讲下服务端的代码

*************************************************************************************
这是服务器端工程依赖

IDE：VSCode 前端开发利器
Plugin：PlatformIO 一个支持开发各种单片机的VSCode插件，头像是一个外星人头像logo，我很喜欢这个工具，和vscode搭配自动提示功能秒杀arduino官方ide
Board：ESP8266-12E 最主要看重自带wifi功能，物联网开发必备
Framework：还是arduino，也就是arduino类库在这里都支持
******************************************************************************
这是客户端工程依赖

IDE：还是VSCode
Plugin：LiveServer 一个可以在vscode里面启动web服务的插件
Framework：vue3 当前web前端开发三剑客之一，简单易用
***************************************************************************************
这是服务端项目工程结构

最核心的就是main.cpp文件
secrets.h我放置的wifi账号信息，因过于隐私不便展示

上面是主要的依赖库
ESP8266WiFi.h：是连接wifi的核心库
ESP8266WebServer.h：我们的webserver服务是以这个为基础来进行搭建的
Wire.h:是I2C协议库，我们通过这个库来和tef6686进行通讯

0x64U是I2C硬件地址
server(80)，我们的web服务监听默认端口80

Write/Read：是I2C通讯基础功能的封装，成功返回0，失败返回非0
DelimCount：分隔符统计函数，因为要根据分隔符数量来确定数组长度
Split：字符拆分函数，由于http协议是文本协议，I2C通讯用的是char类型，http中是传递的是用逗号分隔的数字字符，在服务端需要拆分进行解析
WriteString：是用来解析浏览器post过来的字符指令的主要函数

setup：主要进行I2C开启，连接wifi,启动webserver，注册web请求监听函数
loop：循环监听客户请求
***************************************************************************************
服务器端代码讲完了，下面我们看下客户端部分
为了让tef6686能正常运行，首先要解决的是初始化流程，对于这部分，官方文档有较为详细的说明

从文档的这部分可以看出，status有5个值，tef6686有3个状态
打开电源后
status=0、启动状态、 可以写入补丁程序
status=1、待机状态、可以设置晶振时钟

status=2/3/4 同为活动状态、
status=2 可以初始化FM、AM、Audio，Application  
status=3/4 FM/AM状态
***************************************************************************************
对于各状态切换所需的最小时长文档中也有说明

打开电源=>启动状态 : 5 ms.
启动状态=>待机状态 : 50 ms.
待机状态=>活动状态 : 100 ms
***************************************************************************************

这里是文档对于各状态切换需要的具体操作说明
***************************************************************************************

这里是关于tef6686控制参数i2c协议的说明，tef6686控制参数是16位的也就是双字节，i2c协议数据则是单字节的，因此在传输过程中需要做转换处理，这一点很重要，后面的好几个操作都是因为这个才做的相应转换。
******************************************************************************

关于补丁程序有一些关键性的注意事项，这里说的大致意思是每一个补丁指令参数都是12个字长，并且每个指令都是以1B开头，这里列的指令参数是双字节的
******************************************************************************

由于I2C协议传输的是单字节数据，这里把上面的双字节拆分成了高8位和低8位的两个字，因此补丁数据需要拆分成每24个一组，最后不足一组的单独划分为一组。
*************************************************************************************
有了上面的理论依据，我们下面看下程序中的具体实现
这里是前端工程结构

lib下面的vue.global.js是vue库文件，项目初期，我尽量简化项目结构，用的非编译打包模式

patch-v102-p224.js 补丁数据文件，这里我放置了多个版本，在index.html文件里面可以方便切换，以比较不同版本的差异
*************************************************************************************

config.js 初始化相关的指令，开始为了简化操作，我只保留了初始化必须的部分，对于音频和应用相关的设置我尽量利用默认值，配置信息后期再根据需要进行补充，由于是用js脚本来实现，我充分发挥脚本动态执行的特性，在这里我采用表驱动方式，简洁直观，容易修改维护
******************************************************************************

interface.js 是和服务器相关的功能函数
Tuner_WriteBuffer I2C写操作函数
Tuner_ReadBuffer I2C读操作函数
Tuner_WaitMs 延时函数我是在客户端实现的，实际http请求本身就有100多ms的延迟，但是为了和官方文档说明保持一致我还是加上了这部分
chunk 数组拆分函数，就是前面说的patch数据需要分割成每24个一组用的，每当看到自己可以用这么简洁的代码来实现拆分就暗自洋洋得意一番
Tuner_Patch_Load patch数据加载函数，这里可以看到被拆分后的patch数据都在前面加上了0x1b，这是前面文档提到功能的实现
Tuner_Table_Write config里面配置数据的加载函数
由于这些tef6686很多操作都是由顺序的，因此每个函数操作都是返回promise来实现http请求的串行执行
*************************************************************************************

driver.js tef6686操作指令封装
devTEF668x_Set_Cmd 是tef6686写入指令函数，这里面有个操作是把指令参数由单字节扩展到双字节的步骤，这一点前面文档里也有说明
devTEF668x_Get_Cmd 是tef6686读取指令函数
convert8bto16b 是把8位数据转16位数据的函数
devTEF668x_APPL_Get_Operation_Status 是获取tef6686状态的函数，在初始化中需要循环调用此函数进行查询状态
devTEF668x_APPL_Set_OperationMode 是设置tef6686开启和关闭的函数
devTEF668x_Radio_Tune_To 是频率切换函数
devTEF668x_Audio_Set_Mute 是设置是否静音函数，这个是必须的，因为初始化完成后tef6686默认是静音状态，不调用这个函数是无法输出声音的
devTEF668x_Audio_Set_Volume 是音量增益设置函数
*************************************************************************************

radio.js是对interface.js和driver.js的封装，每个函数可以完成一个相对完整的收音机功能
init 是初始化函数，这里是对前面文档提到的初始化流程的完整实现
powerOn 开启电源
powerOff 关闭电源
setFrequency 切换频率
setMute 静音
setUnMute 取消静音
setVolume 设置音量
*************************************************************************************

index.js是用vue来实现的和页面进行交互显示的逻辑，由于扫描功能我未进行实现，因此我这里先预置了部分频率
*************************************************************************************

inde.html是tef6686-web的入口文件，初期为了做功能验证只做了一些很基本的功能
程序部分介绍完了，我们来试试听一下，见证一下这个伟大的时刻吧

*************************************************************************************

项目地址：
https://gitee.com/zhuxianguo/tef6686-server
https://gitee.com/zhuxianguo/tef6686-web

视频地址：
【TEF6686收音机-(2)Web控制】 https://www.bilibili.com/video/B ... cdb8115a021533cc042

qpqp

虽然我看不懂。但是感觉到了技术的高大上！赞一个！！

刘振元

看不懂，但愿能发挥芯片的性能。

LoveVirus

代码现在正常了，我把原来的图片都删除后就不再显示了

LoveVirus

向版主求解，这个帖子我无法修改图片，本来已经删除图片了但是还在，

--------------------------------------------------------------------------------------
现在终于正常了，但是帖子我添加了太多代码，提示超出限制了

radio988931

感谢楼主分享！学习收藏 Web控制牛

七度玄狐

web 网页远程控制6686。。留个脚印。。。

七度玄狐

看明白了，小白只要接好线，修改 WIFI 名字密码就可以 网页控制了。但小白是 啥都不懂，只会照猫画虎。。。

AIGOD

为什么不将Arduino控制板（IIC控制TEF6686模块）增加蓝牙串口模块，开发手机端的APP？或者用手机蓝牙串口调试助手连接Arduino控制板