Implemented QML skeleton for the application

ENNOID-BMS-Tool.pro

@@ -13,8 +13,7 @@ DEFINES += DT_VERSION=$$DT_VERSION
     DEFINES += HAS_SERIALPORT
 }
 
-CONFIG += c++11
-QMAKE_CXXFLAGS += -Wno-deprecated-copy
+CONFIG += c++14
 
 # Options
 #Build mobile GUI
@@ -158,9 +157,13 @@ include(pages/pages.pri)
 include(widgets/widgets.pri)
 include(mobile/mobile.pri)
 
-RESOURCES += res.qrc
-
+RESOURCES += res.qrc \
+    qml/qml_icons.qrc \
+    qml/qml_items.qrc
 
+# Additional import path used to resolve QML modules in Qt Creator's code model
+QML_IMPORT_PATH *= $$PWD/qml
+QML2_IMPORT_PATH *= $$PWD/qml
 
 DISTFILES += \
     android/AndroidManifest.xml \

bmsinterface.cpp

@@ -517,6 +517,16 @@ QList<VSerialInfo_t> BMSInterface::listSerialPorts()
     return res;
 }
 
+QStringList BMSInterface::serialPortNames()
+{
+    QStringList names;
+    for (const auto& info: listSerialPorts())
+    {
+        names.append(info.systemPath);
+    }
+    return names;
+}
+
 void BMSInterface::connectTcp(QString server, int port)
 {
     mLastTcpServer = server;

bmsinterface.h

@@ -106,8 +106,9 @@ public:
     Q_INVOKABLE bool reconnectLastPort();
     Q_INVOKABLE bool autoconnect();
     Q_INVOKABLE QString getConnectedPortName();
-    bool connectSerial(QString port, int baudrate = 115200);
+    Q_INVOKABLE bool connectSerial(QString port, int baudrate = 115200);
     QList<VSerialInfo_t> listSerialPorts();
+    Q_INVOKABLE QStringList serialPortNames();
     Q_INVOKABLE void connectTcp(QString server, int port);
     Q_INVOKABLE void connectBle(QString address);
     Q_INVOKABLE bool isAutoconnectOngoing() const;

main.cpp

@@ -18,129 +18,55 @@
     along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-#include "mainwindow.h"
-#include "mainwindownew.h"
-#include "connectandenterpage.h"
+#include "bmsinterface.h"
+#include "utility.h"
+#include "mobile/fwhelper.h"
 
-#include <QApplication>
-#include <QStyleFactory>
-#include <QSettings>
-#include <QDesktopWidget>
+#include <QGuiApplication>
 #include <QFontDatabase>
+#include <QQmlApplicationEngine>
 
-#include "mobile/qmlui.h"
+QObject *bmsInterfaceSingletontypeProvider(QQmlEngine */*engine*/, QJSEngine */*scriptEngine*/)
+{
+    auto *interface = new BMSInterface();
+    interface->bmsConfig()->loadParamsXml("://res/config.xml");
+    interface->infoConfig()->loadParamsXml("://res/info.xml");
+    return interface;
+}
 
-#define NEW_GUI 1
+QObject *utilitySingletontypeProvider(QQmlEngine */*engine*/, QJSEngine */*scriptEngine*/)
+{
+    auto *utility = new Utility();
+    return utility;
+}
 
 int main(int argc, char *argv[])
 {
-    constexpr char const *APP_NAME = "ENNOID-BMS Tool";
-    // Settings
-    QCoreApplication::setOrganizationName("DieBie");
-    QCoreApplication::setOrganizationDomain("diebie.nl");
-    QCoreApplication::setApplicationName(APP_NAME);
+    Q_INIT_RESOURCE(res);
+    Q_INIT_RESOURCE(qml_icons);
+    Q_INIT_RESOURCE(qml_items);
 
-    // DPI settings
-    // TODO: http://www.qcustomplot.com/index.php/support/forum/1344
-
-    QCoreApplication::setAttribute(Qt::AA_UseHighDpiPixmaps);
-
-#ifdef USE_MOBILE
     QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
-#else
-    QCoreApplication::setAttribute(Qt::AA_Use96Dpi);
+    QCoreApplication::setOrganizationName("Cubo");
+    QCoreApplication::setOrganizationDomain("Cubo.rus");
+    QCoreApplication::setApplicationName("Cubo Verde BMS Tool");
 
-    QSettings set;
-    bool      scaleAuto = true;
-    double    scale     = 1.0;
+    QGuiApplication app(argc, argv);
 
-    if (set.contains("app_scale_auto")) {
-        scaleAuto = set.value("app_scale_auto").toBool();
-    } else {
-        set.setValue("app_scale_auto", scaleAuto);
-    }
-
-    if (scaleAuto) {
-        QApplication tmp(argc, argv);
-        QRect        rec    = tmp.desktop()->screenGeometry();
-        int          height = rec.height();
-        int          width  = rec.width();
-        double       ptFont = tmp.font().pointSizeF();
-        if (ptFont < 0.0) {
-            ptFont = tmp.font().pixelSize();
-        }
-
-        if (width > 3000 && height > 1700) {
-            scale = 1.5;
-        } else {
-            if (ptFont > 11.0) {
-                scale = ptFont / 11.0;
-            }
-        }
-
-        set.setValue("app_scale_factor", scale);
-    } else if (set.contains("app_scale_factor")) {
-        scale = set.value("app_scale_factor").toDouble();
-    }
-
-    set.setValue("app_scale_factor", scale);
-
-#ifdef Q_OS_ANDROID
-    scale = 1.0;
-#endif
-
-    if (scale > 1.01) {
-        qputenv("QT_SCALE_FACTOR", QString::number(scale).toLocal8Bit());
-    }
-#endif
-
-    QApplication a(argc, argv);
-
-#if NEW_GUI
-    // Fonts
     QFontDatabase::addApplicationFont("://res/fonts/Artifakt-Element.ttf");
+    app.setFont(QFont("Artifakt Element", 16, QFont::Medium));
 
-    qApp->setFont(QFont("Artifakt Element", 12));
+    QQmlApplicationEngine engine;
 
-#else
-    // Fonts
-    QFontDatabase::addApplicationFont("://res/fonts/DejaVuSans.ttf");
-    QFontDatabase::addApplicationFont("://res/fonts/DejaVuSans-Bold.ttf");
-    QFontDatabase::addApplicationFont("://res/fonts/DejaVuSans-BoldOblique.ttf");
-    QFontDatabase::addApplicationFont("://res/fonts/DejaVuSans-Oblique.ttf");
-    QFontDatabase::addApplicationFont("://res/fonts/DejaVuSansMono.ttf");
-    QFontDatabase::addApplicationFont("://res/fonts/DejaVuSansMono-Bold.ttf");
-    QFontDatabase::addApplicationFont("://res/fonts/DejaVuSansMono-BoldOblique.ttf");
-    QFontDatabase::addApplicationFont("://res/fonts/DejaVuSansMono-Oblique.ttf");
+    qmlRegisterSingletonType<BMSInterface>("Cubo", 1, 0, "BmsInterface", bmsInterfaceSingletontypeProvider);
+    qmlRegisterSingletonType<Utility>("Cubo", 1, 0, "Utility", utilitySingletontypeProvider);
+    qmlRegisterType<BleUart>("Cubo", 1, 0, "BleUart");
+    qmlRegisterType<Commands>("Cubo", 1, 0, "Commands");
+    qmlRegisterType<ConfigParams>("Cubo", 1, 0, "ConfigParams");
+    qmlRegisterType<FwHelper>("Cubo", 1, 0, "FwHelper");
 
-    qApp->setFont(QFont("DejaVu Sans", 11));
+    engine.addImportPath(QStringLiteral("qrc:/"));
+    engine.load(QUrl(QStringLiteral("qrc:/MainWindow.qml")));
 
-    // Style
-    a.setStyleSheet("");
-    a.setStyle(QStyleFactory::create("Fusion"));
-#endif
-
-#ifdef USE_MOBILE
-    QmlUi q;
-    q.startQmlUi();
-#else
-
-#if NEW_GUI
-
-    MainWindowNew w;
-    w.setWindowTitle(APP_NAME);
-    w.show();
-
-    //} else {
-    //    a.closeAllWindows();
-    //    return 0;
-    //}
-#else
-    MainWindow w;
-    w.show();
-#endif
-
-#endif
-
-    return a.exec();
+    return app.exec();
 }

mobile/qml.qrc

@@ -1,7 +1,5 @@
 <RCC>
-    <qresource prefix="/">
-        <file>qtquickcontrols2.conf</file>
-    </qresource>
+    <qresource prefix="/"/>
     <qresource prefix="/mobile">
         <file>main.qml</file>
         <file>ConnectBle.qml</file>

qml/Controls/AlternativeButton.qml

@@ -0,0 +1,6 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+Button {
+
+}

qml/Controls/Button.qml

@@ -0,0 +1,5 @@
+import QtQuick 2.0
+
+Item {
+
+}

qml/Controls/ComboBox.qml

@@ -0,0 +1,108 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+import Controls 1.0 as Controls
+import Utils 1.0
+
+ComboBox {
+    id: control
+
+    leftPadding: 16
+    rightPadding: 16
+
+    delegate: ItemDelegate {
+        width: control.width
+        leftPadding: control.leftPadding
+        clip: true
+
+        contentItem: Text {
+            text: modelData
+            color: pressed ? Palette.selectedTextColor : Palette.textColor
+            font: control.font
+            elide: Text.ElideRight
+            verticalAlignment: Text.AlignVCenter
+        }
+
+        background: Rectangle {
+            color: control.currentIndex === index ?
+                       Palette.selectedBackgroundColor :
+                       (highlighted ? Palette.hoveredBackgroundColor : Palette.backgroundColor)
+        }
+
+        highlighted: control.highlightedIndex === index
+    }
+
+    indicator: Canvas {
+        id: canvas
+        x: control.width - width - control.rightPadding
+        y: control.topPadding + (control.availableHeight - height) / 2
+        width: 8
+        height: 5
+        contextType: "2d"
+
+        Connections {
+            target: control
+            onDownChanged: canvas.requestPaint()
+        }
+
+        onPaint: {
+            context.reset();
+
+            if (control.down) {
+                context.moveTo(0, height);
+                context.lineTo(width, height);
+                context.lineTo(width / 2, 0);
+            } else {
+                context.moveTo(0, 0);
+                context.lineTo(width, 0);
+                context.lineTo(width / 2, height);
+            }
+
+            context.closePath();
+            context.fillStyle = control.down ? Palette.selectedTextColor : Palette.textColor;
+            context.fill();
+        }
+    }
+
+    contentItem: Text {
+        rightPadding: control.indicator.width + 8
+
+        text: control.displayText
+        font: control.font
+        color: control.down ? Palette.selectedTextColor : Palette.textColor
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    background: Rectangle {
+        implicitWidth: 120
+        implicitHeight: 46
+        color: control.down ? Palette.selectedBackgroundColor : Palette.backgroundColor
+        border.color: Palette.borderColor
+        border.width: 1
+        radius: 5
+    }
+
+    popup: Popup {
+        y: control.height + 2
+        width: control.width
+        implicitHeight: contentItem.implicitHeight
+        padding: 1
+
+        contentItem: ListView {
+            clip: true
+            implicitHeight: contentHeight
+            model: control.popup.visible ? control.delegateModel : null
+            currentIndex: control.highlightedIndex
+
+            ScrollBar.vertical: Controls.ScrollBar {}
+        }
+
+        background: Rectangle {
+            color: Palette.backgroundColor
+            border.color: Palette.borderColor
+            border.width: 1
+            radius: 5
+        }
+    }
+}

qml/Controls/ContentLabel.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+import Utils 1.0
+
+Label {
+    color: Palette.contentTextColor
+    font.pixelSize: 18
+    font.weight: Font.Medium
+}

qml/Controls/DotSeparator.qml

@@ -0,0 +1,34 @@
+import QtQuick 2.12
+import QtQuick.Shapes 1.12
+
+import Utils 1.0
+
+Shape {
+    id: shape
+    implicitHeight: 1
+
+    ShapePath {
+        strokeColor: Palette.contentTextColor
+        strokeWidth: 1
+        strokeStyle: ShapePath.DashLine
+        dashPattern: [1, 3]
+        startX: 0
+        startY: 0
+        PathLine { x: shape.width; y: 0 }
+    }
+}
+
+//Canvas {
+//    id: canvas
+//    contextType: "2d"
+//    implicitHeight: 1
+
+//    onPaint: {
+//        var ctx = getContext("2d");
+//        ctx.setLineDash([2, 2]);
+//        ctx.beginPath();
+//        ctx.moveTo(0, 0);
+//        ctx.lineTo(width, 0);
+//        ctx.stroke();
+//     }
+//}

qml/Controls/Frame.qml

@@ -0,0 +1,13 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+import Utils 1.0
+
+Frame {
+    background: Rectangle {
+        color: Palette.backgroundColor
+        border.color: Palette.borderColor
+        border.width: 1
+        radius: 8
+    }
+}

qml/Controls/Label.qml

@@ -0,0 +1,5 @@
+import QtQuick 2.0
+
+Item {
+
+}

qml/Controls/PaneItem.qml

@@ -0,0 +1,5 @@
+import QtQuick 2.0
+
+Item {
+
+}

qml/Controls/ScrollBar.qml

@@ -0,0 +1,6 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+ScrollBar {
+
+}

qml/Controls/SubtitleLabel.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+import Utils 1.0
+
+Label {
+    color: Palette.contentTextColor
+    font.pixelSize: 18
+    font.weight: Font.ExtraBold
+}

qml/Controls/TextField.qml

@@ -0,0 +1,6 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+TextField {
+    selectByMouse: true
+}

qml/Controls/TitleLabel.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+import Utils 1.0
+
+Label {
+    color: Palette.selectedTextColor
+    font.pixelSize: 28
+    font.weight: Font.ExtraBold
+}

qml/Controls/qmldir

@@ -0,0 +1,13 @@
+module Controls
+Label 1.0 Label.qml
+ComboBox 1.0 ComboBox.qml
+PaneItem 1.0 PaneItem.qml
+ScrollBar 1.0 ScrollBar.qml
+Button 1.0 Button.qml
+AlternativeButton 1.0 AlternativeButton.qml
+TextField 1.0 TextField.qml
+Frame 1.0 Frame.qml
+TitleLabel 1.0 TitleLabel.qml
+SubtitleLabel 1.0 SubtitleLabel.qml
+ContentLabel 1.0 ContentLabel.qml
+DotSeparator 1.0 DotSeparator.qml

qml/Icons/akb-monitor.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 11.6154V16.9231H2V3H7.71429V1H1.71429C1.25963 1 0.823594 1.1864 0.502103 1.5182C0.180612 1.84999 0 2.3 0 2.76923V17.2308C0 17.7 0.180612 18.15 0.502103 18.4818C0.823594 18.8136 1.25963 19 1.71429 19H8.57143V22.2308H5.14286V24H18.8571V22.2308H15.4286V19H22.2857C22.7404 19 23.1764 18.8136 23.4979 18.4818C23.8194 18.15 24 17.7 24 17.2308V11.6154H22ZM13.7143 22.2308H10.2857V19H13.7143V22.2308Z" fill="white"/>
+<path d="M13.2632 15H13.2542C13.0614 14.9977 12.8744 14.926 12.7211 14.7953C12.5678 14.6647 12.4563 14.4822 12.4033 14.275L10.7991 8.00005H7V6.00007H11.4737C11.6682 5.99995 11.8574 6.07065 12.0127 6.20146C12.168 6.33228 12.2809 6.51609 12.3344 6.72506L13.2954 10.485L15.9876 0.705106C16.0457 0.502156 16.1595 0.324815 16.3129 0.198262C16.4663 0.0717101 16.6515 0.00237827 16.8421 0.000110855C17.0306 -0.00305764 17.215 0.0617711 17.368 0.184981C17.5209 0.308191 17.6343 0.48322 17.6912 0.684106L19.2758 6.00007H24V8.00005H18.6316C18.4437 8.0001 18.2606 7.93406 18.1082 7.8113C17.9558 7.68853 17.8418 7.51526 17.7825 7.31606L16.8761 4.27608L14.1185 14.294C14.0623 14.4985 13.9488 14.6774 13.7949 14.8044C13.6409 14.9315 13.4545 15 13.2632 15Z" fill="white"/>
+</svg>

qml/Icons/bms-configuration.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 10V4.22222C20 2.99492 18.9767 2 17.7143 2H6.28571C5.02335 2 4 2.99492 4 4.22222V19.7778C4 21.0051 5.02335 22 6.28571 22H9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 14H13.3333M8 7H16H8ZM8 10.5H16H8Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.1046 13.0108C21.2559 13.0039 21.4068 13.03 21.547 13.0872C21.6871 13.1444 21.813 13.2314 21.9159 13.3421L22.6921 14.1259C22.8895 14.3271 23 14.5973 23 14.8787C23 15.16 22.8895 15.4302 22.6921 15.6315L21.2452 17.0725L18.9464 14.7723L20.3933 13.3313C20.5823 13.1388 20.835 13.0211 21.1046 13V13.0108ZM18.9464 14.7723L21.2452 17.0617L17.2724 21.0291L16.1067 22.1954C16.0513 22.2593 15.9806 22.3083 15.9012 22.3381L13.4672 22.9872C13.4043 23.0042 13.338 23.0043 13.275 22.9875C13.212 22.9708 13.1546 22.9378 13.1085 22.8919C13.0624 22.846 13.0293 22.7888 13.0125 22.7261C12.9957 22.6634 12.9958 22.5974 13.0128 22.5347L13.6619 20.1106C13.693 20.0301 13.7442 19.9587 13.8106 19.9032L14.2569 19.4588L18.9464 14.7723Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

qml/Icons/bms-service.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9998 1C12.5514 1 13.0951 1.04086 13.6246 1.11943L14.4229 3.53782C15.1222 3.73739 15.7869 4.02181 16.4028 4.38009L18.6971 3.27382C19.5095 3.89767 20.2323 4.63308 20.842 5.4565L19.6949 7.73032C20.0422 8.3526 20.3156 9.02201 20.5026 9.726L22.9068 10.5636C23.0393 11.5803 23.0303 12.6104 22.8801 13.6247L20.4617 14.4229C20.2635 15.1151 19.9806 15.7801 19.6195 16.4029L20.7257 18.6971C20.101 19.5098 19.3665 20.2317 18.5431 20.8421L16.2693 19.695C15.647 20.0423 14.9776 20.3157 14.2736 20.5027L13.4361 22.9069C12.4194 23.0394 11.3892 23.0304 10.375 22.8802L9.57675 20.4618C8.88462 20.2636 8.21961 19.9807 7.5968 19.6196L5.30258 20.7258C4.48995 20.1011 3.76806 19.3666 3.15763 18.5431L4.30475 16.2693C3.95434 15.6399 3.68306 14.9696 3.49705 14.2736L1.09283 13.4345C0.960511 12.4183 0.9695 11.3887 1.11955 10.375L3.53791 9.57672C3.73747 8.87745 4.0219 8.21274 4.38017 7.59675L3.27392 5.3025C3.8986 4.48986 4.63318 3.76797 5.45657 3.15754L7.73037 4.30466C8.35264 3.95738 9.02205 3.68396 9.72603 3.49696L10.5651 1.09271C11.035 1.03143 11.5143 1 11.9998 1Z" stroke="white" stroke-width="2" stroke-linecap="round"/>
+<path d="M11.9999 16C14.209 16 15.9999 14.2091 15.9999 12C15.9999 9.79086 14.209 8 11.9999 8C9.79074 8 7.99988 9.79086 7.99988 12C7.99988 14.2091 9.79074 16 11.9999 16Z" stroke="white" stroke-width="2" stroke-linecap="round"/>
+</svg>

qml/Icons/cell-monitor.svg

@@ -0,0 +1,18 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_973_566" fill="white">
+<rect x="1.5" y="1" width="10" height="14" rx="1"/>
+</mask>
+<rect x="1.5" y="1" width="10" height="14" rx="1" stroke="white" stroke-width="4" mask="url(#path-1-inside-1_973_566)"/>
+<mask id="path-2-inside-2_973_566" fill="white">
+<rect x="12.5" y="1" width="10" height="7" rx="1"/>
+</mask>
+<rect x="12.5" y="1" width="10" height="7" rx="1" stroke="white" stroke-width="4" mask="url(#path-2-inside-2_973_566)"/>
+<mask id="path-3-inside-3_973_566" fill="white">
+<rect x="12.5" y="9" width="10" height="14" rx="1"/>
+</mask>
+<rect x="12.5" y="9" width="10" height="14" rx="1" stroke="white" stroke-width="4" mask="url(#path-3-inside-3_973_566)"/>
+<mask id="path-4-inside-4_973_566" fill="white">
+<rect x="1.5" y="16" width="10" height="7" rx="1"/>
+</mask>
+<rect x="1.5" y="16" width="10" height="7" rx="1" stroke="white" stroke-width="4" mask="url(#path-4-inside-4_973_566)"/>
+</svg>

qml/Icons/cubo-logo.svg

@@ -0,0 +1,15 @@
+<svg width="115" height="115" viewBox="0 0 115 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M91.0183 45.5542C91.0183 51.3591 86.0875 56.038 80.0087 56.038C73.9189 56.038 68.999 51.3591 68.999 45.5542C68.999 39.782 73.9189 35.0977 80.0087 35.0977C86.0875 35.1031 91.0183 39.782 91.0183 45.5542ZM86.0328 45.5542C86.0328 42.3456 83.3323 39.7493 80.0087 39.7493C76.6741 39.7493 73.9845 42.3456 73.9845 45.5542C73.9845 48.7955 76.6741 51.3919 80.0087 51.3919C83.3323 51.3919 86.0328 48.7955 86.0328 45.5542Z" fill="white"/>
+<path d="M64.2045 44.6847C65.839 45.8817 66.8121 47.6965 66.8121 49.7298C66.8121 53.3101 63.8 56.1634 59.5361 56.1634H50.9263V42.0282C50.9263 37.8958 54.2171 35.0098 58.3225 35.0098C62.3295 35.0098 65.44 37.956 65.44 41.5581C65.4291 42.8043 64.9808 43.8757 64.2045 44.6847ZM61.4166 49.7298C61.4166 48.3852 60.2632 47.5379 58.6943 47.5379H55.9992V51.9272H58.6943C60.2577 51.9326 61.4166 51.0854 61.4166 49.7298ZM58.5303 43.2744C59.5962 43.2744 60.378 42.3671 60.378 41.3066C60.378 40.0768 59.4705 39.2678 58.2187 39.2678C56.9067 39.2678 55.9938 40.0768 55.9938 41.4269V43.2744H58.5303Z" fill="white"/>
+<path d="M46.9142 35.3159V47.4396C46.9142 51.9163 44.5144 56.3875 38.3973 56.3875C32.1709 56.3875 29.9187 52.2497 29.6945 47.8441C29.6891 47.7074 29.6836 47.5762 29.6836 47.4396V35.3159H34.7566V47.6965C34.7566 49.5659 35.3633 51.8179 38.3699 51.8179C41.2071 51.8179 41.8357 49.5331 41.8357 47.6965V35.3159H46.9142Z" fill="white"/>
+<path d="M26.7753 40.4541L23.4626 42.1541L22.4841 42.657C22.331 42.4001 22.1014 42.0885 21.921 41.8644C21.5055 41.3615 20.9808 40.9242 20.4505 40.5853C20.0077 40.3394 19.472 40.0825 18.9691 39.9567C18.5263 39.8365 17.9906 39.7764 17.4876 39.7764C16.9956 39.7764 16.4599 39.8419 16.0171 39.9567C15.5142 40.0825 14.9785 40.3394 14.5357 40.5853C14 40.8969 13.4752 41.367 13.0652 41.8371C12.2561 42.9357 11.8133 44.3077 11.786 45.6851C11.7532 47.1828 12.3709 48.4838 13.1198 49.7136C13.5353 50.1837 14.071 50.621 14.6013 50.9325C15.0441 51.1785 15.5798 51.4026 16.0827 51.5338C16.5255 51.6541 17.0503 51.7142 17.5587 51.7142C18.0616 51.7142 18.5973 51.6158 19.0401 51.501C19.5431 51.3753 20.0788 51.1293 20.5216 50.8724C21.0464 50.5281 21.5821 50.058 21.9921 49.5606C22.1725 49.3365 22.3474 49.0905 22.495 48.8336L23.4735 49.3365L26.7862 51.0364C25.9608 52.4794 24.78 53.7311 23.4134 54.6713C22.9706 54.9829 22.4349 55.2999 21.9319 55.5131C21.4891 55.7372 20.9644 55.9176 20.4614 56.0815C19.5103 56.3275 18.5317 56.486 17.4931 56.486C16.4927 56.486 15.4541 56.3549 14.5357 56.0815C14.0328 55.923 13.5572 55.77 13.1144 55.5459C12.6224 55.3218 12.0265 54.9501 11.5783 54.6713C8.70287 52.7582 6.84424 49.4676 6.84424 45.7398C6.84424 42.012 8.70287 38.7542 11.5783 36.8411C13.262 35.7534 15.3338 35.0264 17.4931 35.0264C19.6852 35.0264 21.7953 35.7206 23.479 36.8739C24.8292 37.7976 25.9499 39.0166 26.7753 40.4541Z" fill="white"/>
+<path d="M11.3816 76.7814L6.78418 58.8473H9.74705C11.0645 58.8473 12.2125 59.7437 12.535 61.0173L15.968 74.6988C16.0609 75.0431 16.3725 75.2345 16.7825 75.2345C17.1925 75.2345 17.4713 75.0431 17.5642 74.6988L21.5767 58.8418H26.7808L22.4896 75.8576C21.2104 80.378 21.4783 80.0009 17.0886 79.9681C12.1906 79.9407 12.3109 80.4545 11.3816 76.7814Z" fill="white"/>
+<path d="M34.8547 64.6359V67.3907H44.7984V71.6215H34.8547V74.5021C34.8547 75.2509 35.385 75.7538 36.1721 75.7538H46.903V79.9845H36.1721C32.4768 79.9845 29.7817 80.2906 29.7817 73.9063V65.2262C29.7817 61.717 32.4768 59.1479 36.1721 59.1479H46.903V63.3787H36.1721C35.3904 63.3841 34.8547 63.887 34.8547 64.6359Z" fill="white"/>
+<path d="M50.7682 67.019C50.7682 62.4767 54.6221 58.8418 59.3889 58.8418C64.1503 58.8418 67.9714 62.4767 67.9714 67.019C67.9714 69.5552 66.7797 71.6269 64.5548 72.9387L68.3158 79.9899H62.9914L59.3124 72.6927C58.9953 72.0641 59.2413 71.2825 59.8754 70.9764C61.9582 69.9761 62.893 68.7025 62.893 67.019C62.893 65.1059 61.3569 63.5754 59.3835 63.5754C57.41 63.5754 55.8411 65.1113 55.8411 67.019V79.9899H50.7627V67.019H50.7682Z" fill="white"/>
+<path d="M78.4942 59.1533H71.6665V79.9898H78.4942C84.5731 79.9898 89.4602 75.3219 89.4602 69.5552C89.4602 63.8268 84.5731 59.1533 78.4942 59.1533ZM78.4942 75.7646H76.7395V63.3895H78.4942C81.7523 63.3895 84.3872 66.1444 84.3872 69.5607C84.3817 73.0043 81.7523 75.7646 78.4942 75.7646Z" fill="white"/>
+<path d="M107.243 42.3945C106.505 42.3945 105.925 42.8263 105.794 43.4659L105.472 45.062L105.149 43.4659C105.018 42.8263 104.439 42.3945 103.701 42.3945C102.902 42.3945 102.279 42.9193 102.279 43.5861V48.1339H103.493V43.6736C103.493 43.608 103.602 43.5643 103.706 43.5643C103.744 43.5643 103.93 43.5697 103.958 43.7173L104.925 48.1394H106.007L106.981 43.7119C107.008 43.5697 107.194 43.5643 107.232 43.5643C107.336 43.5643 107.445 43.608 107.445 43.6736V48.1339H108.659V43.5861C108.659 42.9193 108.036 42.3945 107.243 42.3945Z" fill="white"/>
+<path d="M97.6382 43.5535H99.0978V48.134H100.311V43.5535H101.771V42.4712H97.6382V43.5535Z" fill="white"/>
+<path d="M96.5667 64.6031V67.358H106.51V71.5887H96.5667V74.4693C96.5667 75.2182 97.097 75.7211 97.8842 75.7211H108.615V79.9518H97.8842C94.1888 79.9518 91.4883 80.2633 91.4883 73.8735V65.1935C91.4883 61.6843 94.1833 59.1152 97.8842 59.1152H108.615V63.3459H97.8842C97.097 63.3459 96.5667 63.8488 96.5667 64.6031Z" fill="white"/>
+<path d="M2.93554 0C1.31744 0 0 1.31185 0 2.93526V5.07795V17.3H5.07843V5.07795H17.3017V0H2.93554Z" fill="white"/>
+<path d="M109.921 97.7056V109.928H97.6982V115H112.064C113.682 115 115 113.688 115 112.065V109.922V97.7056H109.921Z" fill="white"/>
+</svg>

qml/Icons/exit.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.4001 3.60017C20.7183 3.60017 21.0235 3.72659 21.2485 3.95165C21.4736 4.17669 21.6001 4.48191 21.6001 4.80017V19.2002C21.6001 19.5184 21.4736 19.8237 21.2485 20.0487C21.0235 20.2737 20.7183 20.4002 20.4001 20.4002C20.0817 20.4002 19.7766 20.2737 19.5515 20.0487C19.3265 19.8237 19.2001 19.5184 19.2001 19.2002V4.80017C19.2001 4.48191 19.3265 4.17669 19.5515 3.95165C19.7766 3.72659 20.0817 3.60017 20.4001 3.60017ZM8.04841 14.7518C8.267 14.9781 8.38795 15.2812 8.38522 15.5959C8.38248 15.9105 8.25629 16.2115 8.0338 16.4339C7.81131 16.6564 7.51033 16.7827 7.19569 16.7853C6.88106 16.7881 6.57793 16.6671 6.35161 16.4486L2.75161 12.8486C2.52665 12.6236 2.40027 12.3183 2.40027 12.0002C2.40027 11.682 2.52665 11.3768 2.75161 11.1518L6.35161 7.55177C6.46231 7.43716 6.59472 7.34574 6.74113 7.28284C6.88753 7.21996 7.045 7.18685 7.20433 7.18547C7.36367 7.18409 7.52168 7.21445 7.66916 7.27479C7.81663 7.33512 7.95061 7.42422 8.06328 7.53689C8.17595 7.64957 8.26506 7.78355 8.3254 7.93103C8.38573 8.07851 8.4161 8.23652 8.41471 8.39585C8.41333 8.55519 8.38023 8.71269 8.31733 8.85909C8.25444 9.00549 8.16303 9.13792 8.04841 9.24857L6.49681 10.8002H15.6001C15.9183 10.8002 16.2235 10.9266 16.4485 11.1516C16.6736 11.3767 16.8001 11.6819 16.8001 12.0002C16.8001 12.3184 16.6736 12.6237 16.4485 12.8487C16.2235 13.0737 15.9183 13.2002 15.6001 13.2002H6.49681L8.04841 14.7518Z" fill="white"/>
+</svg>
+

qml/Icons/hide-menu.svg

@@ -0,0 +1,4 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 19L11 10L20 1" stroke="white" stroke-width="2"/>
+<path d="M11 19L2 10L11 1" stroke="white" stroke-width="2"/>
+</svg>

qml/Icons/history.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 4.66667V11.2792C12 11.7097 12.2754 12.0918 12.6838 12.2279L17.5 13.8333M12 23C14.9174 23 17.7153 21.8411 19.7782 19.7782C21.8411 17.7153 23 14.9174 23 12C23 9.08262 21.8411 6.28473 19.7782 4.22183C17.7153 2.15893 14.9174 1 12 1C9.08262 1 6.28473 2.15893 4.22183 4.22183C2.15893 6.28473 1 9.08262 1 12C1 14.9174 2.15893 17.7153 4.22183 19.7782C6.28473 21.8411 9.08262 23 12 23Z" stroke="white" stroke-width="2"/>
+</svg>

qml/Icons/visualization.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 2V21H23" stroke="white" stroke-width="2"/>
+<path d="M21 8L16.4181 11.7419C16.1572 11.955 15.8065 12.0224 15.4851 11.9211L11.0391 10.5206C10.6751 10.406 10.2776 10.5085 10.0145 10.7848L6 15" stroke="white" stroke-width="2"/>
+</svg>

qml/MainWindow.qml

@@ -0,0 +1,220 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+
+import Controls 1.0 as Controls
+import Screens 1.0 as Screens
+import Utils 1.0
+
+ApplicationWindow {
+    id: window
+    title: qsTr("Cubo Verde BMS Tool")
+    width: 1366
+    height: 768
+    visible: true
+
+    RowLayout {
+        anchors.fill: parent
+        spacing: 0
+
+        Rectangle {
+            id: pane
+            color: Palette.alternativeBackgroundColor
+            implicitWidth: 300
+
+            property bool minimized: false
+
+            ColumnLayout {
+                anchors.fill: parent
+                spacing: 0
+
+                Item {
+                    Layout.preferredHeight: 40
+                }
+
+                Image {
+                    source: "qrc:/Icons/cubo-logo.svg"
+                    sourceSize.width: pane.minimized ? 80 : 115
+                    sourceSize.height: pane.minimized ? 80 : 115
+                    fillMode: Image.PreserveAspectFit
+                    Layout.alignment: Qt.AlignCenter
+                }
+
+                Item {
+                    Layout.preferredHeight: pane.minimized ? 75 : 40
+                }
+
+                ItemDelegate {
+                    leftPadding: pane.minimized ? 0 : 40
+
+                    contentItem: RowLayout {
+                        height: 50
+                        spacing: 25
+
+                        Item {
+                            visible: pane.minimized
+                            Layout.fillWidth: true
+                        }
+
+                        Image {
+                            source: "qrc:/Icons/hide-menu.svg"
+                            fillMode: Image.PreserveAspectFit
+                            mirror: pane.minimized
+                            Layout.alignment: Qt.AlignCenter
+                        }
+
+                        Label {
+                            text: qsTr("Hide menu")
+                            color: Palette.alternativeTextColor
+                            visible: !pane.minimized
+                        }
+
+                        Item {
+                            Layout.fillWidth: true
+                        }
+                    }
+
+                    background: Rectangle {
+                        color: "transparent"
+                    }
+
+                    onClicked: if (pane.implicitWidth === 300) {
+                                   animation.from = 300
+                                   animation.to = 100
+                                   animation.running = true
+                                   pane.minimized = true
+                               } else {
+                                   animation.from = 100
+                                   animation.to = 300
+                                   animation.running = true
+                                   pane.minimized = false
+                               }
+
+                    Layout.preferredHeight: 52
+                    Layout.fillWidth: true
+                }
+
+                Item {
+                    Layout.preferredHeight: 70
+                }
+
+                ListView {
+                    id: menuView
+                    model: [
+                        {"text": qsTr("AKB monitor"), "icon": "qrc:/Icons/akb-monitor.svg"},
+                        {"text": qsTr("Cell monitor"), "icon": "qrc:/Icons/cell-monitor.svg"},
+                        {"text": qsTr("Configuration"), "icon": "qrc:/Icons/bms-configuration.svg"},
+                        {"text": qsTr("Visualization"), "icon": "qrc:/Icons/visualization.svg"},
+                        {"text": qsTr("History"), "icon": "qrc:/Icons/history.svg"},
+                        {"text": qsTr("BMS service"), "icon": "qrc:/Icons/bms-service.svg"},
+                        {"text": qsTr("Exit"), "icon": "qrc:/Icons/exit.svg"},
+                    ]
+
+                    delegate: ItemDelegate {
+                        id: menuDelegate
+                        width: ListView.view.width
+                        height: 52
+                        leftPadding: pane.minimized ? 0 : 40
+                        highlighted: ListView.isCurrentItem
+                        onClicked: menuView.currentIndex = index
+
+                        contentItem: RowLayout {
+                            spacing: pane.minimized ? 0 : 25
+                            height: 50
+
+                            Item {
+                                visible: pane.minimized
+                                Layout.fillWidth: true
+                            }
+
+                            Image {
+                                source: modelData.icon
+                                fillMode: Image.PreserveAspectFit
+                                Layout.alignment: Qt.AlignCenter
+                            }
+
+                            Label {
+                                text: modelData.text
+                                font.weight: Font.ExtraBold
+                                color: Palette.alternativeTextColor
+                                visible: !pane.minimized
+                            }
+
+                            Item {
+                                Layout.fillWidth: true
+                            }
+                        }
+
+                        background: Rectangle {
+                            color: menuDelegate.highlighted ? Palette.pressedButtonColor : Palette.alternativeButtonColor
+                        }
+                    }
+
+                    Layout.fillHeight: true
+                    Layout.fillWidth: true
+                }
+            }
+
+            PropertyAnimation {
+                id: animation
+                target: pane
+                property: "implicitWidth"
+                duration: 200
+                easing.type: Easing.InQuad
+            }
+
+            Layout.preferredWidth: implicitWidth
+            Layout.fillHeight: true
+        }
+
+        ColumnLayout {
+            RowLayout {
+                id: topBar
+
+                property var labels: [
+                    qsTr("AKB Monitor"),
+                    qsTr("Cell Monitor"),
+                ]
+
+                Label {
+                    text: topBar.labels[stack.currentIndex]
+                    font.pixelSize: 38
+                    font.weight: Font.ExtraBold
+                }
+
+                Item {
+                    Layout.fillWidth: true
+                }
+
+                Layout.leftMargin: 45
+                Layout.rightMargin: 45
+            }
+
+            StackLayout {
+                id: stack
+                currentIndex: menuView.currentIndex
+
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                Layout.leftMargin: 45
+                Layout.rightMargin: 45
+
+                Screens.AkbMonitorScreen {
+                }
+
+                Screens.CellMonitorScreen {
+                }
+            }
+        }
+    }
+
+    Screens.ConnectionScreen {
+        id: connectionScreen
+    }
+
+    background: Rectangle {
+        color: Palette.screenBackgroundColor
+    }
+
+    Component.onCompleted: connectionScreen.open()
+}

qml/Screens/AkbMonitorScreen.qml

@@ -0,0 +1,105 @@
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+
+import Controls 1.0 as Controls
+
+Item {
+    ColumnLayout {
+        anchors.fill: parent
+
+        Controls.Frame {
+            Layout.fillWidth: true
+
+            RowLayout {
+                anchors.fill: parent
+
+                Controls.TitleLabel {
+                    text: qsTr("Serial number")
+                    Layout.fillWidth: true
+                }
+
+                Controls.TextField {
+                    text: "AABBCCDD"
+                    Layout.fillWidth: true
+                }
+            }
+        }
+
+        Controls.Frame {
+            Layout.fillWidth: true
+
+            GridLayout {
+                columns: 2
+                anchors.fill: parent
+
+                RowLayout {
+                    Controls.ContentLabel {
+                        text: qsTr("Battery charge level, V")
+                    }
+
+                    Controls.DotSeparator {
+                        Layout.fillWidth: true
+                    }
+
+                    Controls.SubtitleLabel {
+                        text: "-"
+                    }
+
+                    Layout.fillWidth: true
+                }
+
+                RowLayout {
+                    Controls.ContentLabel {
+                        text: qsTr("Number of modules")
+                    }
+
+                    Controls.DotSeparator {
+                        Layout.fillWidth: true
+                    }
+
+                    Controls.SubtitleLabel {
+                        text: "-"
+                    }
+
+                    Layout.fillWidth: true
+                }
+
+                RowLayout {
+                    Controls.ContentLabel {
+                        text: qsTr("Battery voltage, V")
+                    }
+
+                    Controls.DotSeparator {
+                        Layout.fillWidth: true
+                    }
+
+                    Controls.SubtitleLabel {
+                        text: "-"
+                    }
+
+                    Layout.fillWidth: true
+                }
+
+                RowLayout {
+                    Controls.ContentLabel {
+                        text: qsTr("Number of cells")
+                    }
+
+                    Controls.DotSeparator {
+                        Layout.fillWidth: true
+                    }
+
+                    Controls.SubtitleLabel {
+                        text: "-"
+                    }
+
+                    Layout.fillWidth: true
+                }
+            }
+        }
+
+        Item {
+            Layout.fillHeight: true
+        }
+    }
+}

qml/Screens/CellMonitorScreen.qml

@@ -0,0 +1,5 @@
+import QtQuick 2.0
+
+Item {
+
+}

qml/Screens/ConnectionScreen.qml

@@ -0,0 +1,49 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Dialogs 1.2
+import QtQuick.Layouts 1.12
+
+import Controls 1.0 as Controls
+import Cubo 1.0
+import Utils 1.0
+
+Dialog {
+    id: root
+    title: qsTr("Connection Screen")
+    width: 300
+    height: 300
+    standardButtons: Dialog.NoButton
+
+    contentItem: Rectangle {
+        color: Palette.screenBackgroundColor
+
+        ColumnLayout {
+            anchors.fill: parent
+            anchors.margins: 45
+
+            Label {
+                text: qsTr("Select serial port")
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+            }
+
+            Controls.ComboBox {
+                id: serialBox
+                model: BmsInterface.serialPortNames()
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignCenter
+            }
+
+            Controls.AlternativeButton {
+                text: qsTr("Connect")
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+                onClicked: {
+                    var currentPort = BmsInterface.serialPortNames()[serialBox.currentIndex]
+                    if (BmsInterface.connectSerial(currentPort))
+                        root.close()
+                }
+            }
+        }
+    }
+}

qml/Screens/qmldir

@@ -0,0 +1,4 @@
+module Screens
+ConnectionScreen 1.0 ConnectionScreen.qml
+AkbMonitorScreen 1.0 AkbMonitorScreen.qml
+CellMonitorScreen 1.0 CellMonitorScreen.qml

qml/Utils/Palette.qml

@@ -0,0 +1,22 @@
+pragma Singleton
+import QtQuick 2.12
+
+QtObject {
+    property color textColor: "#000000"
+    property color selectedTextColor: "#009352"
+    property color contentTextColor: "#869098"
+    property color alternativeTextColor: "#FFFFFF"
+
+    property color backgroundColor: "#FFFFFF"
+    property color hoveredBackgroundColor: "#F0F1F4"
+    property color selectedBackgroundColor: "#CCE9DC"
+    property color alternativeBackgroundColor: "#009352"
+    property color screenBackgroundColor: "#F7F8FC"
+
+    property color borderColor: "#DFE0EB"
+
+    property color buttonColor: "#F7F8FC"
+    property color alternativeButtonColor: "#009352"
+    property color hoveredButtonColor: "#03AC61"
+    property color pressedButtonColor: "#057845"
+}

qml/Utils/qmldir

@@ -0,0 +1,2 @@
+module utils
+singleton Palette 1.0 Palette.qml

qml/qml_icons.qrc

@@ -0,0 +1,13 @@
+<RCC>
+    <qresource prefix="/">
+        <file>Icons/akb-monitor.svg</file>
+        <file>Icons/bms-configuration.svg</file>
+        <file>Icons/bms-service.svg</file>
+        <file>Icons/cell-monitor.svg</file>
+        <file>Icons/cubo-logo.svg</file>
+        <file>Icons/exit.svg</file>
+        <file>Icons/hide-menu.svg</file>
+        <file>Icons/history.svg</file>
+        <file>Icons/visualization.svg</file>
+    </qresource>
+</RCC>

qml/qml_items.qrc

@@ -0,0 +1,24 @@
+<RCC>
+    <qresource prefix="/">
+        <file>MainWindow.qml</file>
+        <file>Screens/ConnectionScreen.qml</file>
+        <file>Screens/AkbMonitorScreen.qml</file>
+        <file>Screens/CellMonitorScreen.qml</file>
+        <file>Controls/ComboBox.qml</file>
+        <file>Controls/PaneItem.qml</file>
+        <file>Controls/Label.qml</file>
+        <file>Utils/Palette.qml</file>
+        <file>Controls/qmldir</file>
+        <file>Screens/qmldir</file>
+        <file>Utils/qmldir</file>
+        <file>Controls/ScrollBar.qml</file>
+        <file>Controls/Button.qml</file>
+        <file>Controls/AlternativeButton.qml</file>
+        <file>Controls/TextField.qml</file>
+        <file>Controls/Frame.qml</file>
+        <file>Controls/TitleLabel.qml</file>
+        <file>Controls/SubtitleLabel.qml</file>
+        <file>Controls/ContentLabel.qml</file>
+        <file>Controls/DotSeparator.qml</file>
+    </qresource>
+</RCC>