基于 QML的 串口调试助手
Qt版本 5.10.0
一，界面如下
二，main.qml
import QtQuick 2.9
import QtQuick.Controls 2.3
import QtQuick.Controls.Material 2.3
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.3
import "./UI"
ApplicationWindow {
id:root
visible: true
width: 640
height: 480
title: qsTr("串口调试助手")
font.pointSize: 9
Material.theme: Material.Light
Material.accent: Material.Red
Material.foreground: Material.Dark
header:ToolBar {//工具栏
RowLayout {
}
}
Rectangle{
id:rootRectangle
anchors.fill: parent
anchors.margins: 5
//设置
LeftArea{
id:leftArea
anchors.left: rootRectangle.left
anchors.top: rootRectangle.top
width: 180
height: parent.height
}
//发送 与接收显示
CenterArea{
id:centerArea
anchors.left: leftArea.right
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: parent.bottom
showSend: leftArea.showSend
repeatSend: leftArea.repeatSend
}
}
} 三，左侧 设置
import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3
Rectangle{
border.color: "#d7cfcf"
property bool showSend: false
property bool repeatSend: false
Column{
id:leftColumn
anchors.fill: parent
anchors.margins: 5
spacing: 0
//串口设置
Label{
text: qsTr("串口设置")
color: "#000000"
}
GridLayout {
id: grid
columns: 2
rowSpacing: 0
Label {
text: qsTr("串 口")
}
ComboBox {
id:serialName
model: serial.querySerialInfo()// [ "Banana", "Apple", "Coconut" ]
onActivated: {
serial.setPortName(currentText)
}
}
Label {
text: qsTr("波特率")
}
ComboBox {
id:baud
model: [ "9600", "19200", "38400", "57600","115200"]
onActivated: {
serial.setBaud(currentText)
}
}
}
Label{
text: qsTr("接收设置")
color: "#000000"
}
RowLayout{
RadioButton { text: qsTr("ASCII"); checked: true }
RadioButton {
text: qsTr("Hex")
onCheckedChanged: {
if(checked)
serial.setReceiveHex(true)
else
serial.setReceiveHex(false)
}
}
}
CheckBox {
checked: false
text: qsTr("显示发送")
onCheckedChanged: {
showSend=checked
}
}
Label{
text: qsTr("发送设置")
color: "#000000"
}
RowLayout{
RadioButton { text: qsTr("ASCII"); checked: true }
RadioButton {
text: qsTr("Hex")
onCheckedChanged: {
if(checked)
serial.setSedHex(true)
else
serial.setSedHex(false)
}
}
}
CheckBox {
id:repeatSend
checked: false
text: qsTr("重复发送(ms)")
onCheckedChanged: {
showSend=checked
}
}
SpinBox {
id: spinbox
width: 150
from: 0
to:100000
value: 1000
editable: true
visible: repeatSend.checked
}
}
Component.onCompleted: {
serial.setPortName(serialName.currentText)
serial.setBaud(baud.currentText)
}
}
四，右侧 数据显示
import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3
import QtQuick.Controls.Material 2.3
Rectangle {
id:root
property bool showSend: false
property bool repeatSend: false
ColumnLayout{
anchors.fill: parent
Rectangle {
id: receiveData
anchors.top: parent.top
anchors.left: parent.left
border.color: "#d7cfcf"
height: parent.height/1.5
width: parent.width
Flickable {
id: flickReceive
anchors.fill: parent
clip: true
anchors.margins: 5
function ensureVisible(r)
{
if (contentX >= r.x)
contentX = r.x;
else if (contentX+width <= r.x+r.width)
contentX = r.x+r.width-width;
if (contentY >= r.y)
contentY = r.y;
else if (contentY+height <= r.y+r.height)
contentY = r.y+r.height-height;
}
TextEdit {
id: editReceive
width: flickReceive.width
focus: false
wrapMode: TextEdit.Wrap
onCursorRectangleChanged: flickReceive.ensureVisible(cursorRectangle)
}
}
}
Rectangle {
id: sendData
width: parent.width
height: parent.height-receiveData.height-buttons.height
border.color: "#d7cfcf"
anchors.top: receiveData.bottom
Flickable {
id: flickSend
anchors.fill: parent
clip: true
anchors.margins: 5
function ensureVisible(r)
{
if (contentX >= r.x)
contentX = r.x;
else if (contentX+width <= r.x+r.width)
contentX = r.x+r.width-width;
if (contentY >= r.y)
contentY = r.y;
else if (contentY+height <= r.y+r.height)
contentY = r.y+r.height-height;
}
TextEdit {
id: editSend
width: flickSend.width
focus: true
wrapMode: TextEdit.Wrap
onCursorRectangleChanged: flickSend.ensureVisible(cursorRectangle)
}
}
}
}
RowLayout{
id:buttons
anchors.bottom: root.bottom
anchors.right: root.right
Button{
text: "打开"
onClicked: {
serial.connect()
}
}
Button{
text: "关闭"
onClicked: {
serial.disConnect()
}
}
Button{
text: "发送"
onClicked: {
serial.sendString(editSend.text)
console.log("send"+showSend)
if(showSend)
editReceive.append(editSend.text)
}
}
}
Connections{
target: serial
onStringReceived:{
editReceive.append(receiveString)
console.log("receive:"+receiveString)
}
}
} 五，main.cpp
#include
#include
#include
#include "./Control/serialPort.h"
int main(int argc, char *argv[])
{
#if defined(Q_OS_WIN)
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
SerialThread serial;
engine.rootContext()->setContextProperty("serial",&serial);
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
if (engine.rootObjects().isEmpty())
return -1;
return app.exec();
}