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

qml/Screens/ConnectionDialog.qml

@@ -32,15 +32,31 @@ 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
             }
 
-            Controls.ComboBox {
-                id: serialBox
-                model: BmsInterface.serialPortNames()
+            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
     }