stm32GUI滑杆图形操作界面

2024-03-17 21:20

本文主要是介绍stm32GUI滑杆图形操作界面,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

本文是关于图形滑杆操作界面的底层编写,是在stm32f4单片机上,2.4寸320*240彩色tft屏幕上实现的当然也可以移植到其他单片机和屏幕上。

首先是背景界面的编写

背景界面的编写,可以方便到时候从某个功能退出时,直接把屏幕恢复到主界面

void back_screen(void)               //显示界面函数
{Lcd_ColorBox(0,0,320,240,WHITE);   //清屏,显示为白色print_text(30,70,'c',RED,YELLOW);    //在某某坐标显示一个char类型字符print_text(30,78,'a',RED,YELLOW);    //camera即摄像头按钮print_text(30,86,'m',RED,YELLOW);print_text(30,94,'e',RED,YELLOW);print_text(30,102,'r',RED,YELLOW);print_text(30,110,'a',RED,YELLOW);print_text(30,10,'R',RED,YELLOW);        //rece 即receive 蓝牙接收数据显示print_text(30,18,'e',RED,YELLOW);print_text(30,26,'c',RED,YELLOW);print_text(30,34,'e',RED,YELLOW);wite(30,50,0,RED,YELLOW);                //这个是在屏幕上显示个冒号print_text(30,160,'G',RED,YELLOW);     //gogo发车按钮,可以根据自己的实际用途更改print_text(30,168,'O',RED,YELLOW);print_text(30,176,'G',RED,YELLOW);print_text(30,184,'O',RED,YELLOW);//操作值P的滑杆显示print_text(312,5,'P',BLUE,WHITE);           //在屏幕上显示pLcd_ColorBox(304,13,2,203,MAROON);       //画一根棕色的线wite(312,p+13,0,YELLOW,YELLOW);        //在线上根据p的值的大小显示滑块的位置print_number(312,216,p,BLACK,WHITE,3);print_text(250,5,'D',BLUE,WHITE);       //操作值D的滑杆显示Lcd_ColorBox(242,13,2,203,MAROON);wite(250,d+13,0,YELLOW,YELLOW);print_number(250,216,d,BLACK,WHITE,3);print_text(188,5,'S',BLUE,WHITE);     //  操作值S的滑杆显示 即舵机角度Lcd_ColorBox(180,13,2,203,MAROON);wite(188,servo+13,0,YELLOW,YELLOW);print_number(188,216,servo,BLACK,WHITE,3);print_text(126,5,'A',BLUE,WHITE);      //电机A的速度滑杆显示Lcd_ColorBox(120,13,2,203,MAROON);wite(128,motor1+113,0,YELLOW,YELLOW);   //判断速方向,进而显示±if(motor1>=0){print_number(128,216,motor1,BLACK,WHITE,3);wite(114,216,11,BLACK,WHITE);}else{print_number(128,216,(-motor1),BLACK,WHITE,3);wite(114,216,13,BLACK,WHITE);}print_text(64,5,'B',BLUE,WHITE);Lcd_ColorBox(58,13,2,203,MAROON);wite(66,motor2+113,0,YELLOW,YELLOW);if(motor2>=0){print_number(66,216,motor2,BLACK,WHITE,3);wite(52,216,11,BLACK,WHITE);}else{print_number(66,216,(-motor2),BLACK,WHITE,3);wite(52,216,13,BLACK,WHITE);}}

 

之后是在主界面采用轮询的方式,循环读取是否有触摸产生,并执行相应的操作

 轮询我是在main里面的while循环轮询,有某些触摸产生时,判断触摸的位置,进入相应的程序

 

while(1){flag=0;  //屏幕触摸中断标志位,一般屏幕中断不开启因为采用轮询,在进入摄像头的程序后,怕再次轮询耽误摄像头执行效率就用了触摸中断返回tx=TOUCH_X();    //读取触摸的x轴坐标ty=TOUCH_Y();//读取触摸的y轴坐标   我的屏幕上横向的是y轴print_text(270,142,'x',BLACK,WHITE);   //显示出读到的坐标,方便开发GUI时快速找准触摸位置print_number(270,158,tx,BLACK,WHITE,4);   print_text(270,190,'y',BLACK,WHITE);print_number(270,206,ty,BLACK,WHITE,4);if(tx>20&&tx<65)   //p   判断如果触摸点是在P对应的滑杆上则执行以下程序{if(ty<21)ty=21;    //限幅,if(p>200)p=200;p=ty-21;	//将触摸的位置坐标赋给p值,-21是为了补偿 Lcd_ColorBox(296,13,17,203,WHITE); //首先清空p滑杆Lcd_ColorBox(304,13,2,203,MAROON);    //画上滑杆wite(312,p+13,0,YELLOW,YELLOW);    //显示出滑杆对应的位置print_number(312,216,p,BLACK,WHITE,3);  //并在滑杆尽头显示p的数值}if(tx>73&&tx<128)   //D{if(ty<21)ty=21;d=ty-21;	if(d>200)d=200;Lcd_ColorBox(234,13,17,203,WHITE);Lcd_ColorBox(242,13,2,203,MAROON);wite(250,d+13,0,YELLOW,YELLOW);print_number(250,216,d,BLACK,WHITE,3);}if(tx>288&&tx<320&&ty>73&&ty<120)   //摄像头入口程序{cam_backround();VS_Enable(); delay_ms(1000);touch_Enable();while(flag==0);PLCK_Disable();touch_Disable();back_screen();          //摄像头结束后返回主界面} if(tx>135&&tx<186)        //舵机入口程序   {if(ty<42)ty=42;servo=ty-21;	if(servo>170)servo=170;Lcd_ColorBox(172,13,17,203,WHITE);Lcd_ColorBox(180,13,2,203,MAROON);wite(188,servo+13,0,YELLOW,YELLOW);print_number(188,216,servo,BLACK,WHITE,3);TIM_SetCompare1(TIM1,(9*servo+1750));   }if(tx<240&&tx>190)           //motor1程序,可按需求编写{motor_off(2);motor_off(1);if(ty<21)ty=21;motor1=ty-21-100;if(motor1>100)motor1=100;Lcd_ColorBox(112,13,17,203,WHITE);Lcd_ColorBox(120,13,2,203,MAROON);wite(128,motor1+113,0,YELLOW,YELLOW);if(motor1>=0){print_number(128,216,motor1,BLACK,WHITE,3);wite(114,216,11,BLACK,WHITE);}else{print_number(128,216,(-motor1),BLACK,WHITE,3);wite(114,216,13,BLACK,WHITE);}}}

 

效果演示(gif自动加速,无奈)

控制舵机演示

 

 

进入摄像头演示

 

                                                                                                          转载请注明:TECH淮

这篇关于stm32GUI滑杆图形操作界面的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/820199

相关文章

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

第六章习题11.输出以下图形

🌏个人博客:尹蓝锐的博客 希望文章能够给到初学的你一些启发~ 如果觉得文章对你有帮助的话,点赞 + 关注+ 收藏支持一下笔者吧~ 1、题目要求: 输出以下图形

一个图形引擎的画面风格是由那些因素(技术)决定的?

可能很多人第一直覺會認為shader決定了視覺風格,但我認為可以從多個方面去考慮。 1. 幾何模型 一個畫面由多個成分組成,最基本的應該是其結構,在圖形學中通常稱為幾何模型。 一些引擎,如Quake/UE,有比較強的Brush建模功能(或應稱作CSG),製作建築比較方便。而CE則有較強的大型地表、植被、水體等功能,做室外自然環境十分出色。而另一些遊戲類型專用的引擎,例

「大数据分析」图形可视化,如何选择大数据可视化图形?

​图形可视化技术,在大数据分析中,是一个非常重要的关键部分。我们前期通过数据获取,数据处理,数据分析,得出结果,这些过程都是比较抽象的。如果是非数据分析专业人员,很难清楚我们这些工作,到底做了些什么事情。即使是专业人员,在不清楚项目,不了解业务规则,不熟悉技术细节的情况下。要搞清楚我们的大数据分析,这一系列过程,也是比较困难的。 我们在数据处理和分析完成后,一般来说,都需要形成结论报告。怎样让大

OpenGL/GLUT实践:流体模拟——数值解法求解Navier-Stokes方程模拟二维流体(电子科技大学信软图形与动画Ⅱ实验)

源码见GitHub:A-UESTCer-s-Code 文章目录 1 实现效果2 实现过程2.1 流体模拟实现2.1.1 网格结构2.1.2 数据结构2.1.3 程序结构1) 更新速度场2) 更新密度值 2.1.4 实现效果 2.2 颜色设置2.2.1 颜色绘制2.2.2 颜色交互2.2.3 实现效果 2.3 障碍设置2.3.1 障碍定义2.3.2 障碍边界条件判定2.3.3 障碍实现2.3.

Android shape 图形

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <!-- "oval","rectangle", "line","ring" 形状--><!-- 圆角 --><cornersandroid

QGraphicsView、QGraphicsScene和QGraphicsItem图形视图框架(二)疑难杂症

疑难杂症1 1.问题: 设置场景的背景图片时,采用setBackgroundBrush()方法和重写drawBackground()函数得到的结果很不一样,而且通过setSceneRect设置场景原点位置之后得到的结果也有很大区别。 如下图 第一个和第三个中重写了QGraphicsScene的drawBackground()函数,区别在于第一个的场景原点在左上角,第三个的原点在中心。

图形API学习工程(0):工程目的环境配置

工程目的 我想要不借助引擎,而直接使用底层图形API(如DirectX和OpenGL等)来生成图像。 我认为这将有利于图形学算法与渲染框架相关的学习,因为: 游戏引擎往往对渲染进行了豪华的封装,而不利于看到图形学算法本质。UE4虽然开放了源代码,但是想要完全掌握渲染方面的代码也需要较高成本。 另外,我想对不止一个主流API进行封装,而是多个图形API进行封装,包括: OpenGLD3D1

图形API学习工程(12):讨论当前工程里同步CPU与GPU的方式

工程GIT地址:https://gitee.com/yaksue/yaksue-graphics 简单讨论CPU和GPU间的交互 《DX12龙书》在【4.2 CPU与GPU间的交互】章节中讨论了这个问题,简单来说: 为了最佳性能,CPU和GPU这两种处理器应该尽量同时工作,少“同步”。因为“同步”意味着一种处理器以空闲状态等待另一种处理器,即它破坏了“并行”。 但有时,又不得不进行二者的同步

图形API学习工程(11):使用纹理

工程GIT地址:https://gitee.com/yaksue/yaksue-graphics 目标 实现纹理采样。 参考教程/代码范例: OpenGL: 纹理 - LearnOpenGL CN Vulkan: Images - Vulkan Tutorial D3D11: DirectX11官方SDK范例【Tutorial 7: Texture Mapping and Constant