I. Preface

The overall framework consists of two parts, one is the UI interface framework, such as the overall layout of the primary and secondary navigation menu buttons, the other is the project framework, the previous article said the project framework, this article said the interface framework, Qt interface is very fast and efficient, especially providing a visual interface design, WYSIWYG, similar to most of the development environment For example, the first VS in the universe, the ancient VB, and the super powerful Delphi in those days all provide visual WYSIWYG interface designer, drag and drop control, then write the corresponding event code, and finally compile, package and publish.

Qt is basically a super large one-stop GUI supermarket framework. You need all kinds of controls, such as buttons, labels, text boxes, pull-down boxes, progress bars, and so on. You can customize the controls even if you don't have them. As a powerful GUI interface framework, you need to lose time if you want to learn it well. No one can accomplish it overnight. There are two key points to do the interface Generally speaking, layout and color matching are the work of artists. However, most of the companies where programmers work in China have no artists. They are pitiful. They need programmers to cover everything, from demand analysis to detailed design to code writing to interface design and after-sales maintenance.

Qt layout provides horizontal layout, vertical layout, table layout and grid layout. It's not enough to learn these layouts. Many beginners will find that they can't achieve the desired effect. In fact, they also need to cooperate with two forces, that is, the control's own stretching strategy sizePolicy plus spring spacer. The stretching strategy includes four elements , horizontal strategy, vertical strategy, horizontal extension, vertical extension. In a complete project with interface, you must use these things to make a pleasant interface.

Qt's color matching is invincible to QSS. It's said that it's a subset of CSS2. In theory, it contains all the writing methods of CSS2. At present, CSS3 is very popular. QSS doesn't support CSS3. It's estimated that we need to rewrite the QSS parser. The amount of code should be huge. Maybe the official main push is qml. It's not estimated that QSS will be updated to support CSS3. If it supports CSS3 one day, then The effect is absolutely first in the universe. I have developed 3 QSS skin styles.

Skin address: https://gitee.com/feiyangqingyun/QWidgetDemo https://github.com/feiyangqingyun/QWidgetDemo File name: styledemo

Experience address: https://gitee.com/feiyangqingyun/QWidgetExe https://github.com/feiyangqingyun/QWidgetExe
File name: bin_sams.zip

II. Functional features

1. Data collection port, supporting serial port + network port, serial port supporting free setting of serial port number + baud rate, network supporting free setting of IP address + communication port, each port supporting collection cycle, one address per second by default, supporting setting of communication timeout times, three times by default, supporting maximum reconnection time, for re reading offline devices.
2. Controller information, can add controller name, select controller address + controller model, and set the number of detectors under the controller.
3. Detector information, can add tag number, can freely choose detector model, gas type, gas symbol, high alarm value, low alarm value, buffer value, reset value, whether to enable, alarm sound, background map, storage cycle, number of decimal places for numerical conversion, alarm delay time, alarm type (HH,LL,HL), etc.
4. The controller model + detector model + gas type + gas symbol can be configured freely.
5. The map supports import and deletion, and the map positions corresponding to all detectors can be dragged and saved freely.
6. Port information + controller information + detector information, support import and export + export to excel + print.
7. Operation record + alarm record + user record, support multi condition combination query, such as time period + controller + detector, etc., all records support export to excel + print.
8. The records exported to excel support all versions of excel+wps and other table files, and do not rely on Excel and other software.
9. It can delete data within the specified time range, support automatic cleaning of early data, and set the maximum number of saved records.
10. Support alarm SMS forwarding, support multiple receiving mobile phone numbers, and set the sending interval, such as instant sending or sending all alarm messages once every six hours, the content of SMS is too long, and multiple SMS will be split automatically.
11. Support alarm mail forwarding, support multiple receiving mailboxes, and set the sending interval, such as instant sending or sending all alarm information once every six hours, and support the sending of attachments.
12. High alarm color + low alarm color + normal color + 0 value color + curve background + curve color, etc. can be freely selected.
13. The Chinese title + English title + logo path + copyright of the software can be set freely.
14. Provide switch settings for startup operation + alarm sound + automatic login + remember password, etc.
15. The alarm sound can set the playing times, and the interface provides 17 skin file options.
16. It supports cloud data synchronization and can set information of cloud database, such as database name, user name + password, etc.
17. Support network forwarding and network receiving. After network receiving is turned on, the software receives data from udp for analysis. The network forwarding supports multiple target IP S, so that the locally collected software can freely transfer the data to the client and view the detector data at any time.
18. Automatically remember the last user interface + other information, and automatically apply after restart.
19. The alarm automatically switches to the corresponding map, and the detector button flashes.
20. Double click the detector icon to control back.
21. Support user rights management, administrator + operator two categories, user login + user exit, can remember password and automatic login, more than three times error prompt and close the program.
22. Four monitoring modes are supported: equipment panel monitoring + map monitoring + table data monitoring + curve data monitoring, which can be switched freely and applied synchronously.
23. Support alarm relay linkage. A tag number can link multiple modules and relay numbers across serial ports, and support many to many.
24. Local data storage supports sqlite+mysql and remote data synchronization to cloud database. Automatic reconnection.
25. The data collected by the local device is uploaded to the cloud in real time for mobile APP or web and other methods to extract.
26. Support two kinds of data sources, one is serial port and network through the protocol to collect equipment data, the other is database collection. Database collection mode can be used as a general system.
27. Equipped with device simulation tools, support 16 device data simulation, and also with database data simulation, so as to test data when there is no device.
28. The default communication protocol is modbus protocol, and the support of Internet of things protocol such as mqtt is added later to make a general system.
29. Support all windows + linux and other operating systems.

III. renderings

IV. core code

#include "frmview.h"
#include "ui_frmview.h"
#include "quiwidget.h"
#include "dbhelper.h"
#include "iconfont.h"
#include "deviceserver.h"
#include "devicehelper.h"
#include "alarmlink.h"
#include "soundapi.h"
#include "deviceserver.h"

#include "frmviewdevice.h"
#include "frmviewmap.h"
#include "frmviewdata.h"
#include "frmviewplot.h"
#include "frmdevicecontrol.h"

frmView::frmView(QWidget *parent) : QWidget(parent), ui(new Ui::frmView)
{
    ui->setupUi(this);
    this->initForm();
    this->initControl();
    QTimer::singleShot(1000, this, SLOT(initServer()));
}

frmView::~frmView()
{
    delete ui;
}

void frmView::initForm()
{
    ui->navTitleTable->setText("Police information");
    ui->navTitleTable->setLeftIcon(0xf108);
    ui->navTitleTable->setRightIcon4(0xf1f7);
    ui->navTitleTable->setRightIcon5(0xf1f8);
    ui->navTitleTree->setText("Device list");
    ui->navTitleTree->setLeftIcon(0xf0e8);
    ui->navTitleTree->setRightIcon5(0xf021);
    ui->navTitleList->setText("Map list");
    ui->navTitleList->setLeftIcon(0xf0e8);
    ui->navTitleList->setRightIcon5(0xf021);
    ui->widgetLeft->setFixedWidth(App::LeftWidth);
    ui->widgetRight->setFixedWidth(App::RightWidth);

    connect(ui->navTitleTable, SIGNAL(mousePressed(int)), this, SLOT(mousePressed(int)));
    connect(AppEvent::Instance(), SIGNAL(doubleClicked(ButtonDefence *)), this, SLOT(doubleClicked(ButtonDefence *)));

    frmViewDevice *viewDevice = new frmViewDevice;
    ui->stackedWidget->addWidget(viewDevice);

    frmViewMap *viewMap = new frmViewMap;
    ui->stackedWidget->addWidget(viewMap);

    frmViewData *viewData = new frmViewData;
    ui->stackedWidget->addWidget(viewData);

    frmViewPlot *viewPlot = new frmViewPlot;
    ui->stackedWidget->addWidget(viewPlot);

    connect(this, SIGNAL(itemClicked(QString)), viewDevice, SLOT(itemClicked(QString)));
    connect(DeviceServer::Instance(), SIGNAL(receiveAlarm(QString, QString, quint8)), this, SLOT(receiveAlarm(QString, QString, quint8)));

    DeviceHelper::setTableData(viewData->getTable());
    DeviceHelper::setTableWidget(ui->tableWidget);
    DeviceHelper::setTreeWidget(ui->treeWidget);
    DeviceHelper::setListWidget(ui->listWidget);
    DeviceHelper::setPanelWidget(viewDevice->getPanleWidget());
    DeviceHelper::setLabel(viewMap->getLabel());
}

void frmView::initTree()
{
    DeviceHelper::initDeviceTree();
    DeviceHelper::initDeviceStyle();
}

void frmView::initControl()
{
    DeviceHelper::initDeviceData();
    DeviceHelper::initDeviceTable();
    DeviceHelper::initDeviceTree();
    DeviceHelper::initDeviceMap();
    DeviceHelper::initDevicePanel();
    DeviceHelper::initDeviceButton();

    if (ui->listWidget->count() > 0) {
        ui->listWidget->setCurrentRow(0);
        on_listWidget_pressed();
    }
}

void frmView::initServer()
{
    //Start device resolution
    DeviceServer::Instance()->init();
    DeviceServer::Instance()->start();
}

void frmView::mousePressed(int index)
{
    if (index == 5) {
        //Change the sound Icon and stop the alarm sound
        ui->navTitleTable->setRightIcon4(0xf1f7);
        SoundAPI::Instance()->stop();
        if (App::WorkMode == 0) {
            AlarmLink::Instance()->reset();
        }
    } else if (index == 6) {
        //Clear temporary message
        DeviceHelper::clearMsg();
    }
}

void frmView::doubleClicked(ButtonDefence *btn)
{
    if (App::CurrentUserType.contains("Administrators")) {
        if (btn->getButtonStatus() == ButtonDefence::ButtonStatus_Error) {
            //Double click to reconnect all devices under the current port
            QString portName = DBHelper::getPortName(btn->property("deviceName").toString());
            DeviceServer::Instance()->readValue(portName, 255, true);
        } else {
            //Pop up details
            QString positionID = btn->property("positionID").toString();
            frmDeviceControl::Instance()->setPositionID(positionID);
            frmDeviceControl::Instance()->show();
        }
    }
}

void frmView::on_listWidget_pressed()
{
    int row = ui->listWidget->currentRow();
    if (row < 0) {
        return;
    }

    DeviceHelper::initDeviceMapCurrent(DBData::MapNames.at(row));
}

void frmView::on_treeWidget_itemPressed(QTreeWidgetItem *item, int column)
{
    if (item->parent() != 0) {
        emit itemClicked(item->text(column));
    }
}

void frmView::setIndex(int index)
{
    ui->stackedWidget->setCurrentIndex(index);
    bool visible = (index == 0 || index == 2);
    ui->widgetLeft->setVisible(!(index == 3));
    ui->widgetRight->setVisible(!(index == 3));
    ui->navTitleTree->setVisible(visible);
    ui->treeWidget->setVisible(visible);
    ui->navTitleList->setVisible(!visible);
    ui->listWidget->setVisible(!visible);
}

void frmView::receiveAlarm(const QString &deviceName, const QString &positionID, quint8 alarmType)
{
    if (alarmType == 0 || alarmType == 2) {
        ui->navTitleTable->setRightIcon4(0xf0a2);
    } else {
        ui->navTitleTable->setRightIcon4(0xf1f7);
    }
}