• proteus仿真大赛-----pyqt5制作上位机安防页面

    本项目是基于pyqt5进行上位机的开发，主要是向下位机发送控制指令以及向服务器发送信息

    主页面如图所示：

     1.主页面是继承QMainWindow，使用QPushButton设置四个按钮，分别使用信号与槽机制连接不同的方法，然后使用setStyleSheet对按钮进行美化，分了两种类型，鼠标点击和鼠标划过

    1. text_btn = QPushButton("注册", self)
    2.         text_btn.setGeometry(100, 30, 200, 100)
    3.         text_btn.clicked.connect(self.register_dialog)
    4.         text_btn.setStyleSheet(''' 
    5.                              QPushButton
    6.                              {text-align : center;        #文本框内容居中显示
    7.                              background-color : white;    #背景颜色：白色
    8.                              font: bold;                  #将字体加粗
    9.                              border-color: red;           #设置按钮边框颜色：红色
    10.                              border-width: 2px;           #边框宽度设置为2像素。
    11.                              border-radius: 20px;         #按钮的圆角半径设置为20像素，使其变成圆形或椭圆形
    12.                              padding: 6px;                #按钮的内部填充设置为6像素，以增加按钮与其内容之间的间距
    13.                              height : 14px;               #按钮的高度设置为14像素
    14.                              border-style: outset;
    15.                              font : 25px;}
    16.                              QPushButton:pressed
    17.                              {text-align : center;
    18.                              background-color : light gray;
    19.                              font: bold;
    20.                              border-color: gray;
    21.                              border-width: 2px;
    22.                              border-radius: 10px;
    23.                              padding: 6px;
    24.                              height : 14px;
    25.                              border-style: outset;
    26.                              font : 25px;}
    27.                              ''')
    28.  
    29.         self.switch_btn1 = QPushButton("关闭安防", self)
    30.         self.switch_btn1.setFont(QFont('Arial', 15))
    31.         self.switch_btn1.setGeometry(450, 200, 200, 100)
    32.         # switch_btn1.clicked.connect(self.switch1)
    33.         self.switch_btn1.setStyleSheet(''' 
    34.                              QPushButton
    35.                              {text-align : center;
    36.                              background-color : white;
    37.                              font: bold;
    38.                              border-color: red;
    39.                              border-width: 2px;
    40.                              border-radius: 20px;
    41.                              padding: 6px;
    42.                              height : 14px;
    43.                              border-style: outset;
    44.                              font : 25px;}
    45.                              QPushButton:pressed
    46.                              {text-align : center;
    47.                              background-color : light gray;
    48.                              font: bold;
    49.                              border-color: gray;
    50.                              border-width: 2px;
    51.                              border-radius: 10px;
    52.                              padding: 6px;
    53.                              height : 14px;
    54.                              border-style: outset;
    55.                              font : 25px;}
    56.                              ''')
    57.  
    58.         self.switch_btn2 = QPushButton("打开安防", self)
    59.         self.switch_btn2.setFont(QFont('Arial', 15))
    60.         self.switch_btn2.setGeometry(450, 30, 200, 100)
    61.         # switch_btn2.clicked.connect(self.switch2)
    62.         self.switch_btn2.setStyleSheet(''' 
    63.                              QPushButton
    64.                              {text-align : center;
    65.                              background-color : white;
    66.                              font: bold;
    67.                              border-color: red;
    68.                              border-width: 2px;
    69.                              border-radius: 20px;
    70.                              padding: 6px;
    71.                              height : 14px;
    72.                              border-style: outset;
    73.                              font : 25px;}
    74.                              QPushButton:pressed
    75.                              {text-align : center;
    76.                              background-color : light gray;
    77.                              font: bold;
    78.                              border-color: gray;
    79.                              border-width: 2px;
    80.                              border-radius: 10px;
    81.                              padding: 6px;
    82.                              height : 14px;
    83.                              border-style: outset;
    84.                              font : 25px;}
    85.                              ''')
    86.  
    87.         self.switch_btn3 = QPushButton("房屋数据", self)
    88.         self.switch_btn3.setFont(QFont('Arial', 15))
    89.         self.switch_btn3.setGeometry(100, 200, 200, 100)
    90.         # switch_btn3.clicked.connect(self.tempurate_dialog)
    91.         self.switch_btn3.setStyleSheet(''' 
    92.                              QPushButton
    93.                              {text-align : center;
    94.                              background-color : white;
    95.                              font: bold;
    96.                              border-color: red;
    97.                              border-width: 2px;
    98.                              border-radius: 20px;
    99.                              padding: 6px;
    100.                              height : 14px;
    101.                              border-style: outset;
    102.                              font : 25px;}
    103.                              QPushButton:pressed
    104.                              {text-align : center;
    105.                              background-color : light gray;
    106.                              font: bold;
    107.                              border-color: gray;
    108.                              border-width: 2px;
    109.                              border-radius: 10px;
    110.                              padding: 6px;
    111.                              height : 14px;
    112.                              border-style: outset;
    113.                              font : 25px;}
    114.                              ''')

    2.注册页面主要打开一个继承QDialog，使用标签和文本框，进行有效信息的输入，然后点击确定按钮，进入到槽函数，槽函数中分别读取三个文本框的内容，然后转换为统一格式发送给下位机，同时将信息发送给服务器

    1. #注册窗口代码
    2.  self.setWindowTitle("注册页面")
    3.         self.resize(500, 400)
    4.         self.setWindowModality(Qt.ApplicationModal)
    5.         self.formlayout = QFormLayout()
    6.         font = QFont()
    7.         font.setPointSize(12)
    8.         self.label1 = QLabel("设备ID：")
    9.         self.lineEdit1 = QLineEdit()
    10.         self.label2 = QLabel("用户姓名：")
    11.         self.lineEdit2 = QLineEdit()
    12.         self.label3 = QLabel("手机号：")
    13.         self.lineEdit3 = QLineEdit()
    14.         self.label1.setFont(font)
    15.         self.label2.setFont(font)
    16.         self.label3.setFont(font)
    17.         self.label1.setFixedSize(100, 50)
    18.         self.label2.setFixedSize(100, 50)
    19.         self.label3.setFixedSize(100, 50)
    20.         self.lineEdit1.setFixedSize(400, 50)
    21.         self.lineEdit2.setFixedSize(400, 50)
    22.         self.lineEdit3.setFixedSize(400, 50)
    23.         self.lineEdit1.setFont(font)
    24.         self.lineEdit2.setFont(font)
    25.         self.lineEdit3.setFont(font)
    26.         self.lineEdit1.setStyleSheet("""
    27.                     QLineEdit {
    28.                         border: 2px solid blue;               
    29.                         border-radius: 5px;
    30.                         padding: 5px;
    31.                         background-color: #ffffff;
    32.                         color: #333333;
    33.                     }
    34.         
    35.                     QLineEdit:focus {
    36.                         border-color: #00aaff;
    37.                         outline: none;
    38.                     }
    39.         """)
    40.         self.lineEdit2.setStyleSheet("""
    41.                     QLineEdit {
    42.                         border: 2px solid green;
    43.                         border-radius: 5px;
    44.                         padding: 5px;
    45.                         background-color: #ffffff;
    46.                         color: #333333;
    47.                     }
    49.                     QLineEdit:focus {
    50.                         border-color: #00aaff;
    51.                         outline: none;
    52.                     }
    53.                 """)
    54.         self.lineEdit3.setStyleSheet("""
    55.                     QLineEdit {
    56.                         border: 2px solid Purple;
    57.                         border-radius: 5px;
    58.                         padding: 5px;
    59.                         background-color: #ffffff;
    60.                         color: #333333;
    61.                     }
    63.                     QLineEdit:focus {
    64.                         border-color: #00aaff;
    65.                         outline: none;
    66.                     }
    67.                 """)
    68.         self.formlayout.addRow(self.label1, self.lineEdit1)
    69.         self.formlayout.addRow(self.label2, self.lineEdit2)
    70.         self.formlayout.addRow(self.label3, self.lineEdit3)
    71.         self.setLayout(self.formlayout)
    72.         self.signIn = QPushButton('确认')
    73.         self.signIn.setStyleSheet(''' 
    74.                                      QPushButton
    75.                                      {text-align : center;
    76.                                      background-color : white;
    77.                                      font: bold;
    78.                                      border-color: green;
    79.                                      border-width: 2px;
    80.                                      border-radius: 20px;
    81.                                      padding: 6px;
    82.                                      height : 14px;
    83.                                      border-style: outset;
    84.                                      font : 25px;}
    85.                                      QPushButton:pressed
    86.                                      {text-align : center;
    87.                                      background-color : light gray;
    88.                                      font: bold;
    89.                                      border-color: gray;
    90.                                      border-width: 2px;
    91.                                      border-radius: 10px;
    92.                                      padding: 6px;
    93.                                      height : 14px;
    94.                                      border-style: outset;
    95.                                      font : 25px;}
    96.                                      ''')
    97.         self.signIn.setFixedSize(500,50)
    98.         self.signIn.setFont(font)
    99.         self.formlayout.addRow(self.signIn)
    100.         self.signIn.clicked.connect(self.sendRegisterRequest)
    101.         self.exec_()

    再打开一个子线程用于串口信息的发送【在之前也尝试过在槽函数中直接进行发送信息，但程序会直接卡死】，同时我在注册页面还加入了一个信号，必须是完成注册后于，其他三个功能才可以使用

    1. #槽函数代码        
    2.         self.signal.emit("yes")                  #发送信息给主窗口，点击了确认按钮
    3.         user_id = self.lineEdit1.text()
    4.         user_name = self.lineEdit2.text()
    5.         user_number = self.lineEdit3.text()
    6.         user_final_number = '+86' + user_number
    7.         data = {'ID': user_id, "name": str(user_name), 'phone': user_final_number}
    8.         message = json.dumps(data) + '\r\n'
    9.         requests.post('http://47.109.149.102:5050/register', data=data)
    10.         # 创建子线程
    11.         self.serial_thread = SerialThread(message)
    12.         self.serial_thread.data_signal.connect(self.handle_data)
    13.         # 启动子线程
    14.         self.serial_thread.start()

     

    3.然后就是打开安防和关闭安防，两者作用就是给串口发送标志信息，让下位机进行对应的处理，关闭安防，可以设置关闭来设置安防的时间

    4.房屋数据：主要使用来实时显示当前房屋内温度和烟雾浓度的实时信息，进行实时更迭，设定一个类，继承QMainWindow，大致的流程就是，在类内设定两个方法分别去处理从串口读取的温度和烟雾浓度的数据，然后进行绘图，因为读取串口的信息类似于键值对的形式，所以需要进行处理

    1.  data = data.strip().replace(' ', '').replace('\r', '').split('\n')
    2.                 print(data)
    3.                 self.data_label.setText('Time:' + str(datetime.datetime.now()) + ', ' +
    4.                                         data[0] + ', ' + data[1])
    5.                 self.t.append(time.time())
    6.                 self.temp.append(float(data[0].split(':')[1].strip()))
    7.                 self.pot.append(float(data[1].split(':')[1].strip()))

     然后将数据放入到signal中，通过信号传递给主线程【房屋数据窗口】

    1.             signal = (self.t, (self.temp, self.pot))
    2.             self.newdata.emit(signal)

    图片：

    11.3解决的bug：在之前的代码中，我发现当我点击完注册页面按钮后，按照代码逻辑，应该会直接关闭窗口，可是却还是会弹窗一次，将代码"self.exec_()"改为"self.accept()"就完美解决了这个问题【self.exec_()是一个阻塞函数，会将控制权交给Qt循环事件，同时当窗口打开的同时会一直处于阻塞态，相反，accept()是一个非阻塞函数，它会讲对话框设置为"已接受"状态，并关闭对话框】

    视频地址：

    proteus仿真大赛----安防系统

  • 相关阅读:
    备忘 | 常用工具
    Linux openvino源码编译笔记
    MySQL学习笔记14
    Linux C语言实现通过socket发送数据，C语言测试socket以太网网速。recv函数的一些不足。
    Gradle中的buildScript代码块
    Maixll-Dock 摄像头使用
    教育、卫生和社会服务-省级面板数据数据（1994-2019年）
    CTF-sql注入(X-Forwarded-For)【简单易懂】
    后端Long型数据传到前端js后精度丢失的问题
    Java学习之封装
  • 原文地址：https://blog.csdn.net/weixin_63032791/article/details/133711466