基于 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 <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#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();
}