Added a button to update the list of ports. Changed the colors of the lines on the charts. Added translations for qt libraries

qml/Controls/ComboBox.qml

@@ -9,6 +9,7 @@ ComboBox {
 
     leftPadding: 16
     rightPadding: 16
+    font.pixelSize: 16
 
     delegate: ItemDelegate {
         width: control.width

qml/Controls/MenuItemDelegate.qml

@@ -10,12 +10,14 @@ ItemDelegate {
     implicitHeight: 52
     padding: 0
     leftPadding: control.minimized ? 0 : 40
+    font.pixelSize: 18
     font.weight: Font.Bold
     icon.color: "transparent"
     icon.width: 24
     icon.height: 24
 
     property bool minimized: false
+    property bool mirroredIcon: false
 
     contentItem: RowLayout {
         spacing: control.minimized ? 0 : 25
@@ -29,6 +31,7 @@ ItemDelegate {
             source: control.icon.source
             sourceSize.width: control.icon.width
             sourceSize.height: control.icon.height
+            mirror: control.mirroredIcon
             Layout.alignment: Qt.AlignCenter
 
             ColorOverlay {

qml/Controls/OutlineButton.qml

@@ -10,7 +10,7 @@ Button {
         text: control.text
         font.pixelSize: 16
         font.weight: Font.Bold
-        opacity: enabled ? 1.0 : 0.3
+        opacity: enabled ? 1.0 : 0.7
         color: control.hovered ? Palette.alternativeTextColor : Palette.textColor
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
@@ -22,7 +22,7 @@ Button {
     background: Rectangle {
         implicitWidth: 200
         implicitHeight: 52
-        opacity: enabled ? 1 : 0.3
+        opacity: enabled ? 1 : 0.7
         color: control.pressed ? Palette.pressedButtonColor :
                                  control.hovered ? Palette.hoveredButtonColor : Palette.outlineButtonColor
         border.color: control.pressed ? Palette.pressedButtonColor :

qml/Controls/OutlineImageButton.qml

@@ -0,0 +1,38 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtGraphicalEffects 1.0
+
+import Utils 1.0
+
+Button {
+    id: control
+
+    icon.width: 24
+    icon.height: 24
+
+    contentItem: Image {
+        source: control.icon.source
+        sourceSize.width: control.icon.width
+        sourceSize.height: control.icon.height
+        fillMode: Image.PreserveAspectFit
+
+        ColorOverlay {
+            anchors.fill: parent
+            source: parent
+            color: "#FFFFFF"
+            visible: control.hovered
+        }
+    }
+
+    background: Rectangle {
+        implicitWidth: 44
+        implicitHeight: 44
+        color: control.enabled ? (control.pressed ? Palette.pressedButtonColor :
+                                                    control.hovered ? Palette.hoveredButtonColor : Palette.backgroundColor) :
+                                 Palette.hoveredBackgroundColor
+        border.color: control.pressed ? Palette.pressedButtonColor :
+                                        control.hovered ? Palette.hoveredButtonColor : Palette.borderColor
+        border.width: 1
+        radius: 5
+    }
+}

qml/Controls/TextField.qml

@@ -5,6 +5,7 @@ import Utils 1.0
 
 TextField {
     implicitHeight: 58
+    font.pixelSize: 16
     color: Palette.textColor
     selectByMouse: true
     selectionColor: Palette.selectedTextBackgroundColor

qml/Controls/qmldir

@@ -23,3 +23,4 @@ DialogBackground 1.0 DialogBackground.qml
 BusyIndicator 1.0 BusyIndicator.qml
 MenuItemDelegate 1.0 MenuItemDelegate.qml
 ScrollIndicator 1.0 ScrollIndicator.qml
+OutlineImageButton 1.0 OutlineImageButton.qml

qml/Icons/refresh.svg

@@ -0,0 +1,3 @@
+<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.8316 19.7618L15.3483 18.8863L15.8316 19.7618ZM6.16651 2.25214L5.68325 1.37666L6.16651 2.25214ZM1.39134 8.23348L0.430573 7.95614H0.430573L1.39134 8.23348ZM2.24424 15.8395L1.36876 16.3227H1.36876L2.24424 15.8395ZM20.2444 6.95135L20.0588 7.93397C20.3246 7.98418 20.5994 7.92457 20.8205 7.76874C21.0416 7.61291 21.1901 7.37416 21.2322 7.10695L20.2444 6.95135ZM7.94823 21.5754C10.7512 22.3845 13.7607 22.0471 16.3148 20.6372L15.3483 18.8863C13.2586 20.0398 10.7962 20.3159 8.50293 19.6539L7.94823 21.5754ZM16.3148 20.6372C18.8689 19.2274 20.7584 16.8607 21.5675 14.0578L19.646 13.5031C18.984 15.7964 17.4381 17.7328 15.3483 18.8863L16.3148 20.6372ZM20.6293 5.69116C19.2195 3.13705 16.8528 1.2476 14.0499 0.438477L13.4952 2.36002C15.7885 3.02203 17.7249 4.56794 18.8784 6.65767L20.6293 5.69116ZM14.0499 0.438477C11.2469 -0.370648 8.23736 -0.0331718 5.68325 1.37666L6.64976 3.12762C8.73949 1.97412 11.2018 1.69801 13.4952 2.36002L14.0499 0.438477ZM5.68325 1.37666C3.12914 2.7865 1.2397 5.1532 0.430573 7.95614L2.35211 8.51083C3.01412 6.21752 4.56003 4.28113 6.64976 3.12762L5.68325 1.37666ZM0.430573 7.95614C-0.378552 10.7591 -0.0410769 13.7686 1.36876 16.3227L3.11972 15.3562C1.96622 13.2665 1.6901 10.8041 2.35211 8.51083L0.430573 7.95614ZM1.36876 16.3227C2.77859 18.8769 5.1453 20.7663 7.94823 21.5754L8.50293 19.6539C6.20962 18.9919 4.27322 17.446 3.11972 15.3562L1.36876 16.3227ZM14.6458 6.9115L20.0588 7.93397L20.43 5.96872L15.017 4.94625L14.6458 6.9115ZM21.2322 7.10695L22.0398 1.98023L20.0642 1.66902L19.2566 6.79574L21.2322 7.10695Z" fill="black"/>
+</svg>

qml/MainWindow.qml

@@ -49,6 +49,7 @@ ApplicationWindow {
                     font.weight: Font.Normal
                     icon.source: "qrc:/Icons/hide-menu.svg"
                     minimized: pane.minimized
+                    mirroredIcon: pane.minimized
 
                     onClicked: if (pane.implicitWidth === 300) {
                                    animation.from = 300

qml/Screens/ConnectionDialog.qml

@@ -32,16 +32,32 @@ Dialog {
                 Layout.fillHeight: true
             }
 
-            Label {
+            Controls.SubtitleLabel {
                 text: qsTr("Select serial port")
+                maximumLineCount: 2
+                wrapMode: Text.Wrap
                 Layout.fillWidth: true
                 Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
             }
 
+            RowLayout {
+                spacing: 15
+
                 Controls.ComboBox {
                     id: serialBox
                     model: BmsInterface.serialPortNames()
                     Layout.fillWidth: true
+                }
+
+                Controls.OutlineImageButton {
+                    id: refreshButton
+                    icon.source: "qrc:/Icons/refresh.svg"
+                    icon.width: 30
+                    icon.height: 30
+                    onClicked: serialBox.model = BmsInterface.serialPortNames()
+                }
+
+                Layout.fillWidth: true
                 Layout.alignment: Qt.AlignCenter
             }
 
@@ -81,6 +97,7 @@ Dialog {
         onPortConnectedChanged: {
             connectButton.text = Qt.binding(function() { return BmsInterface.isPortConnected() ? qsTr("Disconnect") : qsTr("Connect") })
             serialBox.enabled = !BmsInterface.isPortConnected()
+            refreshButton.enabled = !BmsInterface.isPortConnected()
         }
     }
 }

qml/Screens/VisualizationScreen.qml

@@ -19,6 +19,14 @@ ColumnLayout {
     property var cellVoltageData: []
     property var cellListData: []
 
+    // https://htmlcolorcodes.com/color-chart/
+    property var chartColors: [
+        "#c62828", "#6a1b9a", "#283593", "#0277bd", "#00695c", "#558b2f", "#f9a825", "#ef6c00",
+        "#4e342e", "#37474f", "#ad1457", "#4527a0", "#1565c0", "#00838f", "#2e7d32", "#9e9d24",
+        "#ff8f00", "#d84315", "#424242", "#ef5350", "#ab47bc", "#5c6bc0", "#29b6f6", "#26a69a",
+        "#9ccc65", "#ffee58", "#ffa726", "#8d6e63", "#78909c", "#ec407a", "#7e57c2", "#42a5f5",
+    ]
+
     Controls.Frame {
         padding: 20
         leftPadding: 1
@@ -86,9 +94,9 @@ ColumnLayout {
 
                             onCheckedChanged: {
                                 if (checked) {
-                                    chartItem.series(modelData).color = seriesColor
+                                    chartItem.series(modelData).opacity = 1
                                 } else {
-                                    chartItem.series(modelData).color = "transparent"
+                                    chartItem.series(modelData).opacity = 0
                                 }
                             }
                             Layout.fillWidth: !horizontal
@@ -400,6 +408,9 @@ ColumnLayout {
             for (var i = cellListLoader.item.chart.count; i < cellCount; ++i) {
                 cellListLoader.item.chart.createSeries(ChartView.SeriesTypeLine, qsTr("Cell #") + (i + 1).toString(),
                                                        cellListLoader.item.chart.xAxis, cellListLoader.item.chart.yAxis)
+                if (i < chartColors.length) {
+                    cellListLoader.item.chart.series(i).color = chartColors[i]
+                }
                 cellListLoader.item.chart.axes[0].max = 10
                 cellListLoader.item.seriesCount = cellListLoader.item.chart.count
             }
@@ -476,6 +487,7 @@ ColumnLayout {
         voltageLoader.item.chart.createSeries(ChartView.SeriesTypeLine, qsTr("Voltage indicator"),
                                               voltageLoader.item.chart.xAxis, voltageLoader.item.chart.yAxis)
         voltageLoader.item.chart.series(0).name = Qt.binding(function(){ return qsTr("Voltage indicator") })
+        voltageLoader.item.chart.series(0).color = "#fbc02d"
         voltageLoader.item.chart.axes[0].max = 10
         voltageLoader.item.seriesCount = voltageLoader.item.chart.count
 
@@ -483,6 +495,7 @@ ColumnLayout {
         currentLoader.item.chart.createSeries(ChartView.SeriesTypeLine, qsTr("Current indicator"),
                                               currentLoader.item.chart.xAxis, currentLoader.item.chart.yAxis)
         currentLoader.item.chart.series(0).name = Qt.binding(function(){ return qsTr("Current indicator") })
+        currentLoader.item.chart.series(0).color = "#e64a19"
         currentLoader.item.chart.axes[0].max = 10
         currentLoader.item.seriesCount = currentLoader.item.chart.count
 
@@ -493,9 +506,14 @@ ColumnLayout {
                                                          batteryTemperatureLoader.item.chart.xAxis, batteryTemperatureLoader.item.chart.yAxis)
         batteryTemperatureLoader.item.chart.createSeries(ChartView.SeriesTypeLine, qsTr("Minimum temperature"),
                                                          batteryTemperatureLoader.item.chart.xAxis, batteryTemperatureLoader.item.chart.yAxis)
+
         batteryTemperatureLoader.item.chart.series(0).name = Qt.binding(function(){ return qsTr("Maximum temperature") })
         batteryTemperatureLoader.item.chart.series(1).name = Qt.binding(function(){ return qsTr("Average temperature") })
         batteryTemperatureLoader.item.chart.series(2).name = Qt.binding(function(){ return qsTr("Minimum temperature") })
+        batteryTemperatureLoader.item.chart.series(0).color = "#e64a19"
+        batteryTemperatureLoader.item.chart.series(1).color = "#fbc02d"
+        batteryTemperatureLoader.item.chart.series(2).color = "#388e3c"
+
         batteryTemperatureLoader.item.chart.axes[0].max = 10
         batteryTemperatureLoader.item.seriesCount = batteryTemperatureLoader.item.chart.count
 
@@ -506,9 +524,14 @@ ColumnLayout {
                                                      bmsTemperatureLoader.item.chart.xAxis, bmsTemperatureLoader.item.chart.yAxis)
         bmsTemperatureLoader.item.chart.createSeries(ChartView.SeriesTypeLine, qsTr("Minimum temperature"),
                                                      bmsTemperatureLoader.item.chart.xAxis, bmsTemperatureLoader.item.chart.yAxis)
+
         bmsTemperatureLoader.item.chart.series(0).name = Qt.binding(function(){ return qsTr("Maximum temperature") })
         bmsTemperatureLoader.item.chart.series(1).name = Qt.binding(function(){ return qsTr("Average temperature") })
         bmsTemperatureLoader.item.chart.series(2).name = Qt.binding(function(){ return qsTr("Minimum temperature") })
+        bmsTemperatureLoader.item.chart.series(0).color = "#e64a19"
+        bmsTemperatureLoader.item.chart.series(1).color = "#fbc02d"
+        bmsTemperatureLoader.item.chart.series(2).color = "#388e3c"
+
         bmsTemperatureLoader.item.chart.axes[0].max = 10
         bmsTemperatureLoader.item.seriesCount = bmsTemperatureLoader.item.chart.count
 
@@ -519,9 +542,14 @@ ColumnLayout {
                                                   cellVoltageLoader.item.chart.xAxis, cellVoltageLoader.item.chart.yAxis)
         cellVoltageLoader.item.chart.createSeries(ChartView.SeriesTypeLine, qsTr("Minimum voltage"),
                                                   cellVoltageLoader.item.chart.xAxis, cellVoltageLoader.item.chart.yAxis)
+        cellVoltageLoader.item.chart.series(0).color = "#e64a19"
+        cellVoltageLoader.item.chart.series(1).color = "#fbc02d"
+        cellVoltageLoader.item.chart.series(2).color = "#388e3c"
+
         cellVoltageLoader.item.chart.series(0).name = Qt.binding(function(){ return qsTr("Maximum voltage") })
         cellVoltageLoader.item.chart.series(1).name = Qt.binding(function(){ return qsTr("Average voltage") })
         cellVoltageLoader.item.chart.series(2).name = Qt.binding(function(){ return qsTr("Minimum voltage") })
+
         cellVoltageLoader.item.chart.axes[0].max = 10
         cellVoltageLoader.item.seriesCount = cellVoltageLoader.item.chart.count
     }

qml/qml_icons.qrc

@@ -17,5 +17,6 @@
         <file>Icons/english-flag.svg</file>
         <file>Icons/italian-flag.svg</file>
         <file>Icons/russian-flag.svg</file>
+        <file>Icons/refresh.svg</file>
     </qresource>
 </RCC>

qml/qml_items.qrc

@@ -39,5 +39,6 @@
         <file>Controls/BusyIndicator.qml</file>
         <file>Controls/MenuItemDelegate.qml</file>
         <file>Controls/ScrollIndicator.qml</file>
+        <file>Controls/OutlineImageButton.qml</file>
     </qresource>
 </RCC>

translations/qtbase_en.qm

@@ -0,0 +1 @@
+<ｸdﾊ<>箆!ｿ`｡ｽﾝ

translations/qtserialport_en.qm

@@ -0,0 +1 @@
+<ｸdﾊ<>箆!ｿ`｡ｽﾝ

translations/translations.qrc

@@ -3,5 +3,13 @@
         <file>cubo_en.qm</file>
         <file>cubo_it.qm</file>
         <file>cubo_ru.qm</file>
+        <file>qt_en.qm</file>
+        <file>qt_it.qm</file>
+        <file>qt_ru.qm</file>
+        <file>qtbase_en.qm</file>
+        <file>qtbase_it.qm</file>
+        <file>qtbase_ru.qm</file>
+        <file>qtserialport_en.qm</file>
+        <file>qtserialport_ru.qm</file>
     </qresource>
 </RCC>

translator.cpp

@@ -16,7 +16,10 @@ namespace
 Translator::Translator(QQmlEngine *engine, QObject *parent) :
     QObject(parent),
     mQmlEngine(engine),
-    mCurrentTranslator(new QTranslator(this))
+    mCurrentTranslator(new QTranslator(this)),
+    mCurrentQtTranslator(new QTranslator(this)),
+    mCurrentQtBaseTranslator(new QTranslator(this)),
+    mCurrentQtSerialTranslator(new QTranslator(this))
 {
     mNamesMap =
     {
@@ -39,7 +42,31 @@ Translator::Translator(QQmlEngine *engine, QObject *parent) :
         {Language::Italian, ":/cubo_it.qm"}
     };
 
+    mQtTranslationsMap =
+    {
+        {Language::English, ":/qt_en.qm"},
+        {Language::Russian, ":/qt_ru.qm"},
+        {Language::Italian, ":/qt_it.qm"}
+    };
+
+    mQtBaseTranslationsMap =
+    {
+        {Language::English, ":/qtbase_en.qm"},
+        {Language::Russian, ":/qtbase_ru.qm"},
+        {Language::Italian, ":/qtbase_it.qm"}
+    };
+
+    mQtSerialTranslationsMap =
+    {
+        {Language::English, ":/qtserialport_en.qm"},
+        {Language::Russian, ":/qtserialport_ru.qm"},
+        {Language::Italian, ":/qtserialport_en.qm"}
+    };
+
     QCoreApplication::installTranslator(mCurrentTranslator);
+    QCoreApplication::installTranslator(mCurrentQtTranslator);
+    QCoreApplication::installTranslator(mCurrentQtBaseTranslator);
+    QCoreApplication::installTranslator(mCurrentQtSerialTranslator);
 
     QSettings settings;
 
@@ -81,10 +108,12 @@ Translator::Language Translator::currentLanguage() const
 
 void Translator::setCurrentLanguage(Language language)
 {
-    if (mCurrentTranslator->load(mTranslationsMap.value(language)))
+    mCurrentTranslator->load(mTranslationsMap.value(language));
-    {
+    mCurrentQtTranslator->load(mQtTranslationsMap.value(language));
+    mCurrentQtBaseTranslator->load(mQtBaseTranslationsMap.value(language));
+    mCurrentQtSerialTranslator->load(mQtSerialTranslationsMap.value(language));
+
     QTimer::singleShot(0, this, [this]{ mQmlEngine->retranslate();} );
-    }
 
     mCurrentLanguage = language;
     emit currentLanguageChanged();

translator.h

@@ -43,11 +43,19 @@ signals:
 
 private:
     Language mCurrentLanguage = Language::English;
+
     QQmlEngine* mQmlEngine = nullptr;
     QTranslator* mCurrentTranslator = nullptr;
+    QTranslator* mCurrentQtTranslator = nullptr;
+    QTranslator* mCurrentQtBaseTranslator = nullptr;
+    QTranslator* mCurrentQtSerialTranslator = nullptr;
+
     QMap<Language, QString> mNamesMap;
     QMap<Language, QString> mIconsMap;
     QMap<Language, QString> mTranslationsMap;
+    QMap<Language, QString> mQtTranslationsMap;
+    QMap<Language, QString> mQtBaseTranslationsMap;
+    QMap<Language, QString> mQtSerialTranslationsMap;
 };
 
 #endif // TRANSLATOR_H