×

通过ESP32制作数码相册

消耗积分:2 | 格式:zip | 大小:0.00 MB | 2023-06-16

殷谷光

分享资料个

描述

上周我制作了一个电子相册,可以放在办公桌上展示一些照片。工作累了可以看看放松一下。以前我已经实现了在 LCD 上显示格式为 BMP 的图片。现在我们使用手机或相机获取的大多数图片都是JPG格式的,无法在LCD上使用。

在本教程中,我想分享如何建立一个可以显示JPG格式图片的数字相册。本教程将实现以下目标:

从 SD 卡读取并显示 JPG 格式的图片。

自动或手动切换图片。

硬件

pYYBAGN17EaAPjOBAAB8wa4evxk187.jpg

ESP32 TFT LCD with Camera 模块配备 320 x 240 LCD 显示屏,使用 ili9341 驱动库。板上装有触控芯片STMPE610,用于触控。此外,板上还集成了 SD 卡模块。

带摄像头模块的 ESP32 TFT LCD 满足我的所有需求,我无需寻找其他模块。如果您有所有这些模块来替换它,您就可以构建自己的数字相册。

Arduino IDE 设置

安装 ESP32 开发板。

安装 TFT_eSPI 库。不要忘记根据您的硬件更新库中的 UserSetup.h 文件。我将在下面列出您需要更新的代码。

 

// Only define one driver, the other ones must be commented out
#define ILI9341_DRIVER
//#define ST7735_DRIVER      // Define additional parameters below for this display
//#define ILI9163_DRIVER     // Define additional parameters below for this display

 

 

#define TFT_MISO 12//19
#define TFT_MOSI 13//23
#define TFT_SCLK 14//18
#define TFT_CS   15  // Chip select control pin
#define TFT_DC   33// 2  // Data Command control pin
//#define TFT_RST  // 4  // Reset pin (could connect to RST pin)
#define TFT_RST  -1  // Set TFT_RST to -1 if display RESET is connected to ESP32 board RST

 

安装 TJpg_Decode 库来解码 JPG。

安装 Adafruit STMPE610 库。

固件

获取 SD 卡上的 JPG 图片列表。

 

int get_pic_list(fs::FS &fs, const char *dirname, uint8_t levels, String wavlist[30])
file_num = get_pic_list(SD, "/", 0, file_list);

 

由于SPI管脚(SPI_SCLK/SPI_MISO/SPI_MOSI)是共用的,所以在使用SPI通讯时需要手动设置选择信号,以保证通讯成功。表示当 SD 模块的片选信号为 LOW 且其他片选信号为 HIGH 时,ESP32 通过 SPI 与 SD 模块通信。

 

#define SPI_ON_TFT digitalWrite(TFT_CS, LOW)
#define SPI_OFF_TFT digitalWrite(TFT_CS, HIGH)
#define SPI_ON_SD digitalWrite(SD_CS, LOW)
#define SPI_OFF_SD digitalWrite(SD_CS, HIGH)
#define STMPE_ON digitalWrite(STMPE_CS, LOW)
#define STMPE_OFF digitalWrite(STMPE_CS, HIGH)

 

TJpg_Decoder.h库提供了直接从SD卡中读取JPG图片数据并显示在屏幕上的功能。

 

TJpgDec.drawSdJpg(0, 0, file_list[file_index].c_str());

 

获取触摸时屏幕的位置值。

 

if (touch.touched())
    {
        // read x & y & z;
        int pos[2] = {0, 0};
        delay(100);      // delay for SPI receive the data
        while (!touch.bufferEmpty())
        {
            touch.readData(&x, &y, &z);
            pos[0] = x * 240 / 4096;
            pos[1] = y * 320 / 4096;            
        }

 

准备图片

 

pYYBAGN17FSAbt5cABWe7GP5qXI567.jpg

我们通常使用手机或相机拍照。照片的尺寸比LCD大得多。当您直接使用 LCD 显示这些图片时,并没有完全显示整个图片。我们需要提前使用图像处理软件,比如微软系统上的绘图工具,将图片压缩裁剪成320×240大小。

将准备好的图片复制到 SD 卡中,并将 SD 卡插入模块中。重启模块,一张数码相册就完成了。

触摸屏幕的右半部分可切换到下一张图片

轻触屏幕左半边切换到最后一张图片

如果没有触摸,十秒后画面会自动切换。

另外,我用网站把一些GIF图片转换成很多JPG图片,和数字相册一起播放。只需将ESP32设置为以非常快的速度切换图像,LCD就会播放GIF图片。虽然这种方法只能用于播放小尺寸的 GIF 图像。

 

 

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉

评论(0)
发评论

下载排行榜

全部0条评论

快来发表一下你的评论吧 !

'+ '

'+ '

'+ ''+ '
'+ ''+ ''+ '
'+ ''+ '' ); $.get('/article/vipdownload/aid/'+webid,function(data){ if(data.code ==5){ $(pop_this).attr('href',"/login/index.html"); return false } if(data.code == 2){ //跳转到VIP升级页面 window.location.href="//m.obk20.com/vip/index?aid=" + webid return false } //是会员 if (data.code > 0) { $('body').append(htmlSetNormalDownload); var getWidth=$("#poplayer").width(); $("#poplayer").css("margin-left","-"+getWidth/2+"px"); $('#tips').html(data.msg) $('.download_confirm').click(function(){ $('#dialog').remove(); }) } else { var down_url = $('#vipdownload').attr('data-url'); isBindAnalysisForm(pop_this, down_url, 1) } }); }); //是否开通VIP $.get('/article/vipdownload/aid/'+webid,function(data){ if(data.code == 2 || data.code ==5){ //跳转到VIP升级页面 $('#vipdownload>span').text("开通VIP 免费下载") return false }else{ // 待续费 if(data.code == 3) { vipExpiredInfo.ifVipExpired = true vipExpiredInfo.vipExpiredDate = data.data.endoftime } $('#vipdownload .icon-vip-tips').remove() $('#vipdownload>span').text("VIP免积分下载") } }); }).on("click",".download_cancel",function(){ $('#dialog').remove(); }) var setWeixinShare={};//定义默认的微信分享信息,页面如果要自定义分享,直接更改此变量即可 if(window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger'){ var d={ title:'通过ESP32制作数码相册',//标题 desc:$('[name=description]').attr("content"), //描述 imgUrl:'https://'+location.host+'/static/images/ele-logo.png',// 分享图标,默认是logo link:'',//链接 type:'',// 分享类型,music、video或link,不填默认为link dataUrl:'',//如果type是music或video,则要提供数据链接,默认为空 success:'', // 用户确认分享后执行的回调函数 cancel:''// 用户取消分享后执行的回调函数 } setWeixinShare=$.extend(d,setWeixinShare); $.ajax({ url:"//www.obk20.com/app/wechat/index.php?s=Home/ShareConfig/index", data:"share_url="+encodeURIComponent(location.href)+"&format=jsonp&domain=m", type:'get', dataType:'jsonp', success:function(res){ if(res.status!="successed"){ return false; } $.getScript('https://res.wx.qq.com/open/js/jweixin-1.0.0.js',function(result,status){ if(status!="success"){ return false; } var getWxCfg=res.data; wx.config({ //debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId:getWxCfg.appId, // 必填,公众号的唯一标识 timestamp:getWxCfg.timestamp, // 必填,生成签名的时间戳 nonceStr:getWxCfg.nonceStr, // 必填,生成签名的随机串 signature:getWxCfg.signature,// 必填,签名,见附录1 jsApiList:['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 }); wx.ready(function(){ //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口 wx.onMenuShareTimeline({ title: setWeixinShare.title, // 分享标题 link: setWeixinShare.link, // 分享链接 imgUrl: setWeixinShare.imgUrl, // 分享图标 success: function () { setWeixinShare.success; // 用户确认分享后执行的回调函数 }, cancel: function () { setWeixinShare.cancel; // 用户取消分享后执行的回调函数 } }); //获取“分享给朋友”按钮点击状态及自定义分享内容接口 wx.onMenuShareAppMessage({ title: setWeixinShare.title, // 分享标题 desc: setWeixinShare.desc, // 分享描述 link: setWeixinShare.link, // 分享链接 imgUrl: setWeixinShare.imgUrl, // 分享图标 type: setWeixinShare.type, // 分享类型,music、video或link,不填默认为link dataUrl: setWeixinShare.dataUrl, // 如果type是music或video,则要提供数据链接,默认为空 success: function () { setWeixinShare.success; // 用户确认分享后执行的回调函数 }, cancel: function () { setWeixinShare.cancel; // 用户取消分享后执行的回调函数 } }); //获取“分享到QQ”按钮点击状态及自定义分享内容接口 wx.onMenuShareQQ({ title: setWeixinShare.title, // 分享标题 desc: setWeixinShare.desc, // 分享描述 link: setWeixinShare.link, // 分享链接 imgUrl: setWeixinShare.imgUrl, // 分享图标 success: function () { setWeixinShare.success; // 用户确认分享后执行的回调函数 }, cancel: function () { setWeixinShare.cancel; // 用户取消分享后执行的回调函数 } }); //获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口 wx.onMenuShareWeibo({ title: setWeixinShare.title, // 分享标题 desc: setWeixinShare.desc, // 分享描述 link: setWeixinShare.link, // 分享链接 imgUrl: setWeixinShare.imgUrl, // 分享图标 success: function () { setWeixinShare.success; // 用户确认分享后执行的回调函数 }, cancel: function () { setWeixinShare.cancel; // 用户取消分享后执行的回调函数 } }); //获取“分享到QQ空间”按钮点击状态及自定义分享内容接口 wx.onMenuShareQZone({ title: setWeixinShare.title, // 分享标题 desc: setWeixinShare.desc, // 分享描述 link: setWeixinShare.link, // 分享链接 imgUrl: setWeixinShare.imgUrl, // 分享图标 success: function () { setWeixinShare.success; // 用户确认分享后执行的回调函数 }, cancel: function () { setWeixinShare.cancel; // 用户取消分享后执行的回调函数 } }); }); }); } }); } function openX_ad(posterid, htmlid, width, height) { if ($(htmlid).length > 0) { var randomnumber = Math.random(); var now_url = encodeURIComponent(window.location.href); var ga = document.createElement('iframe'); ga.src = 'https://www1.elecfans.com/www/delivery/myafr.php?target=_blank&cb=' + randomnumber + '&zoneid=' + posterid+'&prefer='+now_url; ga.width = width; ga.height = height; ga.frameBorder = 0; ga.scrolling = 'no'; var s = $(htmlid).append(ga); } } openX_ad(828, '#berry-300', 300, 250);