记录｜上位机常用的界面布局

最新推荐文章于 2024-09-20 11:00:00 发布
最新推荐文章于 2024-09-20 11:00:00 发布
阅读量2.4k 收藏 23
点赞数 25
分类专栏： winform C# PLC 文章标签： c# winform PLC
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41714549/article/details/140617219
版权
C# 同时被 3 个专栏收录
38 篇文章 1 订阅
订阅专栏
winform
17 篇文章 0 订阅
订阅专栏
PLC
11 篇文章 2 订阅
订阅专栏

目录

前言

学习完了上机位和PLC的通讯连接之后，已经会读取AI、DI、DQ这些数据后，发现自己的页面管控能力特差，看上去真的丑爆了。鉴于此，我希望能快速掌握页面布局的能力。这次的学习，希望能弄懂页面布局的基本操作，以及当前上机位开发的常见页面或者他们的审美是怎么样的！

资料来源：
004上位机常用的界面布局

一、常见页面布局

1. 大框架

在这里插入图片描述

2. 不带视觉的上位机控制界面

在这里插入图片描述
具体可以看下面：
在这里插入图片描述
在这里插入图片描述

3. 带视觉的上位机控制界面

基本布局：
在这里插入图片描述

4. 页面布局工具

  • 原生自带
  • 第三方：
    • Devexpress（界面库）
    • Sunnyui（控件美化）

二、针对不带视觉的上机位操作界面【复刻】

创建基本框架

Step1. SplitContainer容器

  • SplitContainer容器【效果如下：】
    在这里插入图片描述
    这个左右结构不是我们想要的，所以要进行水平方向的拆分：
    在这里插入图片描述

Step2. TableLayoutPanel

  • TableLayoutPanel。通过调整这个表格的构造，实现1行3列的效果。
    在这里插入图片描述
    将Dock：Center，就可以让表格贴合上。

Step3. GroupBox

  • 在每个Panel中放置GroupBox部件，对每个GroupBox的Dock属性设置为：Center即可【效果如下：】
    在这里插入图片描述
    此时，经历过Step1~3之后，这个程序运行后，可以发现整个界面是可以随意伸缩和变形的。
    在这里插入图片描述

三、针对带视觉的上机位操作界面【复刻】

创建基本框架

Step1. SplitContainer容器

步骤：

  • 先拉个SplitContainer容器进入Form1中。调整下展示方式。
  • 再拉入个SplitContianer容器即可实现这种模式。

在这里插入图片描述

Step1的效果展示

大致调整为这样的设置和间距即可。
在这里插入图片描述

Step2. TableLayoutPanel

  • 将TableLayoutPanel放入Panel2中

在这里插入图片描述

  • 之后，可以设置这个TableLayoutPanel的行和列的个数。这里默认2行2列共4个窗口。
  • 在其属性中，将Dock设置为：Center
    在这里插入图片描述

Step3. GroupBox

  • 将GroupBox都拉入Form1中的每个Panel中

在这里插入图片描述

  • 对每个GroupBox，设置其Dock=Center，让其贴合各自Panel
    在这里插入图片描述
  • 最后对每个GroupBox的Text进行命名即可

Step1~3的效果展示

在这里插入图片描述

四、杂谈

后来在视频的结尾处，了解了下什么是wpf，知道了winform是老的框架了，wpf是新的框架，能实现前后端分离，采用事件和响应的模式。属于我之前学过的Java和HTML这种的。看来后面还要学习wpf。

更新时间

  • 2024.07.22：创建
  • 2024.07.23：补充：第三章 针对带视觉的上机位操作界面【复刻】
小白鼠零号
关注
专栏目录
MFC 上位机上位机界面设计
05-06
基于VC的MFC上位机界面的设计，包含各式各样的控件，单选按钮 多选按钮 列表框等
UIDemo_UI上位机框架_上位机界面_
09-30
上位机UI界面设计及与1200PLC通信数据的读写
上位机UI界面设计项目
世界需要程序员，而我就是其中一员！
04-19 4195
本篇博客主要讲解上位机的UI界面的基本布局，思路如下： 业务逻辑： 1，有一个用户名输入框，可以输入任意字符； 2，有一个密码输入框，可以输入任意字符，但是需要以 *代替文本显示，避免密码泄露； 3，有一个登录按钮，当点击登录按钮时，到数据库检验用户名与密码的正确性，如果用户名密码验证正确，则跳转到程序主操作页面，否则提示用户检验用户名或密码是否正确。 在主控制台页面增加设备功能： 1，海康摄像头视频预览、下载功能； 2，日志解析功能； 3，设备感应器信号实时查看功能； 4，发送指令操作设备硬件的功能；
PLC的上位机，触摸屏的界面欣赏，不要太漂亮呦。
最新发布
2401_82616673的博客
09-20 849
它通常拥有更高级的处理能力和更丰富的用户界面，用于监视和控制下位机或设备的运行状态和参数设置。上位机可以通过与下位机或设备之间的通信接口，获取实时数据、发送指令、进行数据处理和显示等功能。有很多老铁的思想中，认为上位机的触摸屏界面就那个样，不用很美观。不是说他们不喜欢美观，而是没见过美观，或者不知道如何美观。上位机是指在一个控制系统中，负责与控制器进行通信和控制操作的计算机或设备。上位机在工业自动化、机器人控制、监控系统等领域中广泛应用。本期就分享一批高颜值的上位机触摸屏界面。
VB上位机界面
07-10
单片机采集到的多路电压值通过串口发送给上位机，上位机分别显示多路信号的电压值，并保存为txt格式。
嵌入式开发之上位机工业风界面实现
superxxd的专栏
07-10 2523
首先我们看到的漂亮精美的画面是一幅一幅的png图片或者gif动图，如果我们能找到方法将这些图片根据状态或采集数据和状态的需要，实时的展示渲染出来是不是就可以了呢。工业风的界面随着计算机软件计算的发展逐渐衍生出了现在风靡业界的数字孪生应用，也从二维的变成3维实时仿真的UI，大大的增强了数字化虚拟世界的表达现实世界的能力。同上，速度表盘或者压力表盘也可以照此方式实现，将图片作为背景图，然后自绘表指针，根据实时数据计算算出表针的旋转角度，即可实现一组精美的表盘控件。
HMI界面之：上位机界面设计，一文扫盲
2401_82616673的博客
03-21 6035
一、什么是上位机上位机（Supervisory Control and Data Acquisition，简称SCADA）是一种用于监控和控制工业过程的计算机系统。它通常由两个主要部分组成：上位机和下位机。上位机是SCADA系统中的主要控制中心，负责监控和控制整个工业过程。它通过与下位机通信，从下位机获取实时数据，并将其显示在操作员界面上。上位机还负责处理数据、执行控制逻辑、生成报表和提供报警功能等。
上位机界面进化史
weixin_61294345的博客
12-24 1946
大四上学期弄的第一个界面，非常的简陋啊，用的tkinter，主要功能就是读取传感的位姿数据，后台还有一些数据处理和存储的功能。 大四下学期弄的第二个界面，依然是python tkinter 功能复杂了一些，多了端口的选择和一些操作按键，看起来专业了一点。 研一上学期，弄的一个相对完整的上位机，基于pyqt框架，实现了一系列相对复杂的功能，其中使用pyvtk实现了可视化的3D模型，同步姿态角旋转（花了最长的时间，还是比较简陋），数据通信、参数调试...
java上位机开发（GUI设计）
嵌入式-老费，一个分享专业嵌入式知识的blog
07-10 5129
【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】 对于上位机来说，GUI设计是重要的一个环节。如果没有GUI，那就成了命令行工具了。对于java来说，图形库主要有swing和awk，这个可以根据个人的喜好进行选择，差别不大。另外，和大多数图形库一样，java图形库也提供了label、edit、button、dialog、menu这些常用控件。如果是不太常用的控件，那就需要自己绘制了。 这里我们选择awk进行开发。当然，选好了控
LiunxQT开发篇—上位机（二）制作上位机（串口调试助手）UI界面（17步完成）
阿——波罗的博客
02-04 3274
声明：本项目为学习B站视频北京讯为 嵌入式学习之QT学习篇所学的笔记，以下内容只用于学习 1、新建项目 2、建立一个带UI的工程 3、设置名称（路径不要出现中文） 4、基类选择QWidgt 5、完成项目创建，点开左上角项目小箭头，显示如下图 6、双击UI文件 7、UI界面介绍如下 8、设计上位机界面，需要用到几个组件 9、将这几个组件拖拽进待设计窗体，按自己想要的样式排版，拖拽完成如下： 10、左上角对对象中的名字进行更改（这个名字和组件在窗体中显示的不是同一个）对PushButton、
ls2.0.rar_Custom control_MFC 上位机_上位机_上位机 界面_测量 软件
09-21
实现一个自动化测量系统的上位机控制软件： 代码行5万行以上，包含丰富的自定义类，复杂的界面，复杂的控制功能，实现MFC打印功能
C#WPF 制作的上位机界面通过MODBUS RTU和数码管显示屏通讯
03-14
1.ModbusRTU算法 2.单次读和循环读数据 3.单次写和循环写数据 4.4位数码管通讯协议介绍 5.简易上位机界面实现RTU通讯功能，现成代码易上手，新手学习不亏
上位机软件
08-01
串口摄像头上位机通讯工具，附带源代码包，用VC6.0开发
基于c#机器人上位机界面
07-19
socket UDP接收发送视频 socket tcp 收发指令 这下位机里用的jsnano基于python进行数据的视频的发送以及水下机器人的控制，由于是c#程序，我就写了一个c#发送视频的项目，没有使用python
VB上位机界面程序温度电压
05-14
在VB（Visual Basic）上位机界面程序设计中，我们通常会涉及到温度和电压的实时监控，这在工业自动化、物联网设备控制等领域非常常见。VB作为Microsoft开发的一种面向对象的编程语言，因其易于学习和使用，被广泛...
基于QT开发CAN总线上位机
10-14
1. **QT框架**：理解QT的基本概念，如信号与槽机制、布局管理、控件库等，是构建上位机界面的基础。开发者需要掌握如何使用QWidgets或QML来设计和实现用户界面。 2. **CAN总线协议**：熟悉CAN协议的物理层、数据链...
C#上位机登录界面设计-界面跳转（二）
Silent_you的博客
03-18 1977
C#上位机登录界面设计-界面设计（一）是讲述的如何设计自己的登录界面，下一步是设计如何登入主界面，通过程序，判断用户的账号和密码是否正确，正确，则进入主界面，错误，弹出错误信息。
上机位基础知识
pengrenhui的博客
08-08 9441
上机位全方位基础知识
qt上位机操作界面源码
12-15
Qt上位机操作界面源码可以用C++语言编写，主要的界面布局可以通过Qt的图形界面设计器进行设计，也可以通过代码手动布局。Qt提供了丰富的控件库，开发者可以根据实际需求选择合适的控件来搭建界面，比如按钮、文本框、下拉框等。 操作界面源码需要与下位机进行通信，可以利用Qt提供的串口通信或者网络通信模块来实现数据的传输。比如可以通过Qt的串口类来进行串口通信，通过TcpSocket类来进行网络通信。 操作界面源码的主要功能包括与下位机进行数据通信、控制各种设备的状态、显示实时数据、记录历史数据等。开发者可以根据具体的需求编写相应的代码来实现这些功能。 另外，为了提高用户体验，界面源码还可以包括一些动画效果、图表显示、数据可视化等功能，这些都可以通过Qt的相关模块来实现。 总的来说，Qt上位机操作界面源码的编写需要综合运用Qt的控件库、通信模块以及其他相关模块，根据需求设计界面布局，并实现相应的功能逻辑。通过良好的编码习惯和模块化设计，可以使界面源码具有良好的可维护性和扩展性，满足实际应用的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值