Added UI skeleton for BMS settings screen

qml/Controls/AlternativeButton.qml

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

qml/Controls/Button.qml

@@ -1,5 +1,28 @@
-import QtQuick 2.0
+import QtQuick 2.12
+import QtQuick.Controls 2.12
 
-Item {
+import Utils 1.0
 
+Button {
+    id: control
+
+    contentItem: Text {
+        text: control.text
+        font.pixelSize: 16
+        font.weight: Font.ExtraBold
+        opacity: enabled ? 1.0 : 0.3
+        color: Palette.alternativeTextColor
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 52
+        opacity: enabled ? 1 : 0.3
+        color: control.pressed ? Palette.pressedButtonColor :
+                                 control.hovered ? Palette.hoveredButtonColor : Palette.buttonColor
+        radius: 5
+    }
 }

qml/Controls/CheckBox.qml

@@ -0,0 +1,37 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+import Utils 1.0
+
+CheckBox {
+    id: control
+    implicitHeight: 25
+    spacing: 15
+
+    indicator: Rectangle {
+        implicitWidth: control.implicitHeight
+        implicitHeight: control.implicitHeight
+        x: control.leftPadding
+        y: parent.height / 2 - height / 2
+        radius: 5
+        border.color: Palette.borderColor
+        border.width: 1
+        color: control.checked ? Palette.alternativeBackgroundColor : Palette.backgroundColor
+
+        Image {
+            source: "qrc:/Icons/check-indicator.svg"
+            anchors.centerIn: parent
+            visible: control.checked
+        }
+    }
+
+    contentItem: Text {
+        text: control.text
+        font.pixelSize: 18
+        font.weight: Font.ExtraBold
+        color: Palette.textColor
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+        leftPadding: control.indicator.width + control.spacing
+    }
+}

qml/Controls/DotSeparator.qml

@@ -17,18 +17,3 @@ Shape {
         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/LabelWithBackground.qml

@@ -0,0 +1,18 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+import Utils 1.0
+
+Label {
+    color: Palette.textColor
+    font.pixelSize: 18
+    font.weight: Font.ExtraBold
+    elide: Text.ElideRight
+    horizontalAlignment: Text.AlignHCenter
+    verticalAlignment: Text.AlignVCenter
+
+    background: Rectangle {
+        color: Palette.hoveredBackgroundColor
+        radius: 8
+    }
+}

qml/Controls/LineSeparator.qml

@@ -0,0 +1,17 @@
+import QtQuick 2.12
+import QtQuick.Shapes 1.12
+
+import Utils 1.0
+
+Shape {
+    id: shape
+    implicitHeight: 1
+
+    ShapePath {
+        strokeColor: Palette.borderColor
+        strokeStyle: ShapePath.SolidLine
+        startX: 0
+        startY: 0
+        PathLine { x: shape.width; y: 0 }
+    }
+}

qml/Controls/LinkLabel.qml

@@ -0,0 +1,22 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+import Utils 1.0
+
+Label {
+    id: control
+    color: Palette.selectedTextColor
+    font.pixelSize: 18
+    font.weight: Font.Medium
+    font.underline : true
+    elide: Text.ElideRight
+
+    signal clicked()
+
+    MouseArea{
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onClicked: control.clicked()
+    }
+}

qml/Controls/OutlineButton.qml

@@ -0,0 +1,31 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+import Utils 1.0
+
+Button {
+    id: control
+
+    contentItem: Text {
+        text: control.text
+        font.pixelSize: 16
+        font.weight: Font.ExtraBold
+        opacity: enabled ? 1.0 : 0.3
+        color: control.hovered ? Palette.alternativeTextColor : Palette.textColor
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    background: Rectangle {
+        implicitWidth: 200
+        implicitHeight: 52
+        opacity: enabled ? 1 : 0.3
+        color: control.pressed ? Palette.pressedButtonColor :
+                                 control.hovered ? Palette.hoveredButtonColor : Palette.outlineButtonColor
+        border.color: control.pressed ? Palette.pressedButtonColor :
+                                        control.hovered ? Palette.hoveredButtonColor : Palette.buttonColor
+        border.width: 1
+        radius: 5
+    }
+}

qml/Controls/ScrollBar.qml

@@ -1,6 +1,26 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 
-ScrollBar {
+import Utils 1.0
 
+ScrollBar {
+    id: control
+    size: 0.3
+    position: 0.2
+    active: true
+    orientation: Qt.Vertical
+
+    contentItem: Rectangle {
+        implicitWidth: 12
+        implicitHeight: 100
+        radius: width / 2
+        color: Palette.alternativeBackgroundColor
+        // Hide the ScrollBar when it's not needed.
+        opacity: control.policy === ScrollBar.AlwaysOn || (control.active && control.size < 1.0) ? 0.75 : 0
+
+        // Animate the changes in opacity (default duration is 250 ms).
+        Behavior on opacity {
+            NumberAnimation {}
+        }
+    }
 }

qml/Controls/qmldir

@@ -4,7 +4,7 @@ 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
+OutlineButton 1.0 OutlineButton.qml
 TextField 1.0 TextField.qml
 Frame 1.0 Frame.qml
 TitleLabel 1.0 TitleLabel.qml
@@ -12,3 +12,7 @@ SubtitleLabel 1.0 SubtitleLabel.qml
 ContentLabel 1.0 ContentLabel.qml
 DotSeparator 1.0 DotSeparator.qml
 AvailabilityIndicator 1.0 AvailabilityIndicator.qml
+LabelWithBackground 1.0 LabelWithBackground.qml
+CheckBox 1.0 CheckBox.qml
+LineSeparator 1.0 LineSeparator.qml
+LinkLabel 1.0 LinkLabel.qml

qml/Icons/check-indicator.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.7203 7.19847C20.0643 7.48676 20.0953 7.98339 19.7895 8.30772L10.9006 17.7363C10.7425 17.904 10.5158 18 10.2778 18C10.0397 18 9.81308 17.904 9.65494 17.7363L5.2105 13.022C4.90474 12.6977 4.93572 12.201 5.27971 11.9128C5.62369 11.6245 6.15042 11.6537 6.45618 11.978L10.2778 16.0316L18.5438 7.26372C18.8496 6.93939 19.3763 6.91018 19.7203 7.19847Z" fill="white"/>
+</svg>

qml/MainWindow.qml

@@ -37,7 +37,6 @@ ApplicationWindow {
                     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
                 }
 
@@ -59,7 +58,6 @@ ApplicationWindow {
 
                         Image {
                             source: "qrc:/Icons/hide-menu.svg"
-                            fillMode: Image.PreserveAspectFit
                             mirror: pane.minimized
                             Layout.alignment: Qt.AlignCenter
                         }
@@ -130,7 +128,6 @@ ApplicationWindow {
 
                             Image {
                                 source: modelData.icon
-                                fillMode: Image.PreserveAspectFit
                                 Layout.alignment: Qt.AlignCenter
                             }
 
@@ -147,7 +144,7 @@ ApplicationWindow {
                         }
 
                         background: Rectangle {
-                            color: menuDelegate.highlighted ? Palette.pressedButtonColor : Palette.alternativeButtonColor
+                            color: menuDelegate.highlighted ? Palette.pressedButtonColor : Palette.buttonColor
                         }
                     }
 
@@ -173,8 +170,9 @@ ApplicationWindow {
                 id: topBar
 
                 property var labels: [
-                    qsTr("AKB Monitor"),
+                    qsTr("AKB monitor"),
-                    qsTr("Cell Monitor"),
+                    qsTr("Cell monitor"),
+                    qsTr("BMS settings"),
                 ]
 
                 Label {
@@ -206,6 +204,9 @@ ApplicationWindow {
 
                 Screens.CellMonitorScreen {
                 }
+
+                Screens.BmsSettingsScreen {
+                }
             }
         }
     }

qml/Screens/AkbMonitorScreen.qml

@@ -25,7 +25,7 @@ Item {
                 }
 
                 Controls.TextField {
-                    id: serialField
+                    id: serialNumberField
                     enabled: false
                     Layout.fillWidth: true
                     Layout.maximumWidth: (parent.width - parent.spacing) / 2
@@ -314,7 +314,7 @@ Item {
     Connections {
         target: BmsInterface.bmsConfig()
         onUpdated: {
-            serialField.text = BmsInterface.bmsConfig().getParamDouble("notUsedCurrentThreshold") // TODO
+            serialNumberField.text = BmsInterface.bmsConfig().getParamDouble("notUsedCurrentThreshold") // TODO
 
             numberOfModulesLabel.text = BmsInterface.bmsConfig().getParamInt("cellMonitorICCount")
             numberOfCellsLabel.text = BmsInterface.bmsConfig().getParamInt("noOfCellsSeries")

qml/Screens/BmsSettingsScreen.qml

@@ -0,0 +1,612 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+
+import Controls 1.0 as Controls
+import Cubo 1.0
+
+RowLayout {
+    property real contentPadding: 35
+    property real contentRowSpacing: 20
+    property real contentColumnSpacing: 35
+
+    spacing: contentColumnSpacing
+
+    Flickable {
+        id: settingsFlickable
+        clip: true
+        contentHeight: configLayout.height
+
+        ColumnLayout {
+            id: configLayout
+            width: parent.width
+            spacing: 15
+
+            Controls.Frame {
+                id: serialNumberSettingsFrame
+                padding: contentPadding
+                implicitWidth: parent.width
+                Layout.fillWidth: true
+
+                RowLayout {
+                    spacing: contentColumnSpacing
+                    anchors.fill: parent
+
+                    Controls.TitleLabel {
+                        text: qsTr("Serial number")
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.spacing) / 2
+                    }
+
+                    Controls.TextField {
+                        id: serialNumberField
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.spacing) / 2
+                    }
+                }
+            }
+
+            Controls.Frame {
+                id: configurationSettingsFrame
+                padding: contentPadding
+                implicitWidth: parent.width
+                Layout.fillWidth: true
+
+                GridLayout {
+                    columns: 2
+                    rowSpacing: contentRowSpacing
+                    columnSpacing: contentColumnSpacing
+                    anchors.fill: parent
+
+                    Controls.TitleLabel {
+                        text: qsTr("Configuration")
+                        Layout.fillWidth: true
+                        Layout.columnSpan: 2
+                    }
+
+                    Controls.SubtitleLabel {
+                        text: qsTr("Number of boards")
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    Controls.SubtitleLabel {
+                        text: qsTr("Number of cells")
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    Controls.TextField {
+                        id: numberOfBoardsField
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    Controls.TextField {
+                        id: numberOfCellsField
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+                }
+            }
+
+            Controls.Frame {
+                id: socSettingsFrame
+                padding: contentPadding
+                implicitWidth: parent.width
+                Layout.fillWidth: true
+
+                GridLayout {
+                    columns: 2
+                    rowSpacing: contentRowSpacing
+                    columnSpacing: contentColumnSpacing
+                    anchors.fill: parent
+
+                    Controls.TitleLabel {
+                        text: qsTr("SOC")
+                        Layout.fillWidth: true
+                        Layout.columnSpan: 2
+                    }
+
+                    Controls.SubtitleLabel {
+                        text: qsTr("Number of cells connected in parallel")
+                        maximumLineCount: 2
+                        wrapMode: Text.WordWrap
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    Controls.SubtitleLabel {
+                        text: qsTr("Battery capacity")
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    Controls.TextField {
+                        id: numberOfParallelCellsField
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    Controls.TextField {
+                        id: batteryCapacityField
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+                }
+            }
+
+            Controls.Frame {
+                id: limitSettingsFrame
+                padding: contentPadding
+                implicitWidth: parent.width
+                Layout.fillWidth: true
+
+                GridLayout {
+                    columns: 2
+                    rowSpacing: contentRowSpacing
+                    columnSpacing: contentColumnSpacing
+                    anchors.fill: parent
+
+                    Controls.TitleLabel {
+                        text: qsTr("Limits")
+                        Layout.fillWidth: true
+                        Layout.columnSpan: 2
+                    }
+
+                    Controls.SubtitleLabel {
+                        text: qsTr("Maximum charge current, A")
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    Controls.SubtitleLabel {
+                        text: qsTr("Maximum load current, A")
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    Controls.TextField {
+                        id: maximumChargeCurrentField
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    Controls.TextField {
+                        id: maximumLoadCurrentField
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    Controls.SubtitleLabel {
+                        text: qsTr("Maximum temperature, °C")
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                        Layout.columnSpan: 2
+                    }
+
+                    Controls.TextField {
+                        id: maximumTemperatureField
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                        Layout.columnSpan: 2
+                    }
+                }
+            }
+
+            Controls.Frame {
+                id: cellSettingsFrame
+                padding: contentPadding
+                implicitWidth: parent.width
+                Layout.fillWidth: true
+
+                GridLayout {
+                    columns: 2
+                    rowSpacing: contentRowSpacing
+                    columnSpacing: contentColumnSpacing
+                    anchors.fill: parent
+
+                    Controls.TitleLabel {
+                        text: qsTr("Cell configuration")
+                        Layout.fillWidth: true
+                        Layout.columnSpan: 2
+                    }
+
+                    Controls.SubtitleLabel {
+                        text: qsTr("Lower shutdown threshold, V")
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    Controls.SubtitleLabel {
+                        text: qsTr("Upper shutdown threshold, V")
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    Controls.TextField {
+                        id: lowerShutdownThresholdField
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    Controls.TextField {
+                        id: upperShutdownThresholdField
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    // TODO
+//                    Controls.SubtitleLabel {
+//                        text: qsTr("Lower shutdown threshold, V")
+//                        Layout.fillWidth: true
+//                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+//                    }
+
+//                    Controls.SubtitleLabel {
+//                        text: qsTr("Upper shutdown threshold, V")
+//                        Layout.fillWidth: true
+//                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+//                    }
+
+//                    Controls.TextField {
+//                        id: lowerShutdownThresholdField
+//                        Layout.fillWidth: true
+//                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+//                    }
+
+//                    Controls.TextField {
+//                        id: upperShutdownThresholdField
+//                        Layout.fillWidth: true
+//                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+//                    }
+                }
+            }
+
+            Controls.Frame {
+                id: balancingSettingsFrame
+                padding: contentPadding
+                implicitWidth: parent.width
+                Layout.fillWidth: true
+
+                GridLayout {
+                    columns: 2
+                    rowSpacing: contentRowSpacing
+                    columnSpacing: contentColumnSpacing
+                    anchors.fill: parent
+
+                    Controls.TitleLabel {
+                        text: qsTr("Balancing configuration")
+                        Layout.fillWidth: true
+                        Layout.columnSpan: 2
+                    }
+
+                    Controls.SubtitleLabel {
+                        text: qsTr("Balancing start voltage, V")
+                        maximumLineCount: 2
+                        wrapMode: Text.WordWrap
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    Controls.SubtitleLabel {
+                        text: qsTr("Cell voltage delta to start balancing, V")
+                        maximumLineCount: 2
+                        wrapMode: Text.WordWrap
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    Controls.TextField {
+                        id: balancingStartVoltageField
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    Controls.TextField {
+                        id: balancingStartDeltaVoltageField
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+                }
+            }
+
+            Controls.Frame {
+                id: outputSettingsFrame
+                padding: contentPadding
+                implicitWidth: parent.width
+                Layout.fillWidth: true
+
+                property real outputNumberSize: 60
+
+                GridLayout {
+                    columns: 2
+                    rowSpacing: contentRowSpacing
+                    columnSpacing: contentColumnSpacing
+                    anchors.fill: parent
+
+                    Controls.TitleLabel {
+                        text: qsTr("Output settings")
+                        Layout.fillWidth: true
+                        Layout.columnSpan: 2
+                    }
+
+                    RowLayout {
+                        spacing: 20
+
+                        Controls.LabelWithBackground {
+                            text: qsTr("№ 1")
+                            Layout.preferredWidth: outputSettingsFrame.outputNumberSize
+                            Layout.preferredHeight: outputSettingsFrame.outputNumberSize
+                        }
+
+                        Controls.CheckBox {
+                            text: qsTr("Use for management")
+                            Layout.fillWidth: true
+                            Layout.preferredHeight: outputSettingsFrame.outputNumberSize
+                        }
+
+                        Layout.fillWidth: true
+                        Layout.columnSpan: 2
+                    }
+
+                    Controls.LineSeparator {
+                        Layout.fillWidth: true
+                        Layout.columnSpan: 2
+                    }
+
+                    RowLayout {
+                        spacing: 20
+
+                        Controls.LabelWithBackground {
+                            text: qsTr("№ 2")
+                            Layout.preferredWidth: outputSettingsFrame.outputNumberSize
+                            Layout.preferredHeight: outputSettingsFrame.outputNumberSize
+                        }
+
+                        Controls.CheckBox {
+                            text: qsTr("Normally closed")
+                            Layout.fillWidth: true
+                            Layout.preferredHeight: outputSettingsFrame.outputNumberSize
+                        }
+
+                        Layout.fillWidth: true
+                        Layout.columnSpan: 2
+                    }
+
+                    Controls.SubtitleLabel {
+                        text: qsTr("Change in value during SOC")
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                        Layout.columnSpan: 2
+                    }
+
+                    Controls.TextField {
+                        id: changeValueSocField
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                        Layout.columnSpan: 2
+                    }
+
+                    Controls.LineSeparator {
+                        Layout.fillWidth: true
+                        Layout.columnSpan: 2
+                    }
+
+                    RowLayout {
+                        spacing: 20
+
+                        Controls.LabelWithBackground {
+                            text: qsTr("№ 3")
+                            Layout.preferredWidth: outputSettingsFrame.outputNumberSize
+                            Layout.preferredHeight: outputSettingsFrame.outputNumberSize
+                        }
+
+                        Controls.CheckBox {
+                            Layout.fillWidth: true
+                            Layout.preferredHeight: outputSettingsFrame.outputNumberSize
+                        }
+
+                        Layout.fillWidth: true
+                        Layout.columnSpan: 2
+                    }
+
+                    Controls.SubtitleLabel {
+                        text: qsTr("Closes at t<, °C")
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    Controls.SubtitleLabel {
+                        text: qsTr("Opens at t>, °C")
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    Controls.TextField {
+                        id: closesBelowTemperatureThirdField
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    Controls.TextField {
+                        id: opensGreaterTemperatureThirdField
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    Controls.LineSeparator {
+                        Layout.fillWidth: true
+                        Layout.columnSpan: 2
+                    }
+
+                    RowLayout {
+                        spacing: 20
+
+                        Controls.LabelWithBackground {
+                            text: qsTr("№ 4")
+                            Layout.preferredWidth: outputSettingsFrame.outputNumberSize
+                            Layout.preferredHeight: outputSettingsFrame.outputNumberSize
+                        }
+
+                        Controls.CheckBox {
+                            Layout.fillWidth: true
+                            Layout.preferredHeight: outputSettingsFrame.outputNumberSize
+                        }
+
+                        Layout.fillWidth: true
+                        Layout.columnSpan: 2
+                    }
+
+                    Controls.SubtitleLabel {
+                        text: qsTr("Closes at t<, °C")
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    Controls.SubtitleLabel {
+                        text: qsTr("Opens at t>, °C")
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    Controls.TextField {
+                        id: closesBelowTemperatureFourthField
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    Controls.TextField {
+                        id: opensGreaterTemperatureFourthField
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                    }
+
+                    Controls.LineSeparator {
+                        Layout.fillWidth: true
+                        Layout.columnSpan: 2
+                    }
+                }
+            }
+
+            Controls.Frame {
+                id: zeroSensorSettingsFrame
+                padding: contentPadding
+                implicitWidth: parent.width
+                Layout.fillWidth: true
+
+                GridLayout {
+                    columns: 2
+                    rowSpacing: contentRowSpacing
+                    columnSpacing: contentColumnSpacing
+                    anchors.fill: parent
+
+                    Controls.SubtitleLabel {
+                        text: qsTr("Current sensor value «0»")
+                        Layout.fillWidth: true
+                        Layout.columnSpan: 2
+                    }
+
+                    Controls.TextField {
+                        id: zeroSensorValueField
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                        Layout.columnSpan: 2
+                    }
+
+                    Controls.Button {
+                        id: zeroSensorValueCalibrationButton
+                        text: qsTr("Calibrate «0»")
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: (parent.width - parent.columnSpacing) / 2
+                        Layout.columnSpan: 2
+                    }
+                }
+            }
+        }
+
+        ScrollBar.vertical: Controls.ScrollBar {
+//            policy: ScrollBar.AlwaysOn
+        }
+
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+    }
+
+    ColumnLayout {
+        spacing: contentRowSpacing
+
+        Controls.LinkLabel {
+            text: qsTr("Serial number")
+            onClicked: settingsFlickable.contentY = serialNumberSettingsFrame.mapToItem(settingsFlickable.contentItem, 0, 0).y
+        }
+
+        Controls.LinkLabel {
+            text: qsTr("Configuration")
+            onClicked: settingsFlickable.contentY = configurationSettingsFrame.mapToItem(settingsFlickable.contentItem, 0, 0).y
+        }
+
+        Controls.LinkLabel {
+            text: qsTr("SOC")
+            onClicked: settingsFlickable.contentY = socSettingsFrame.mapToItem(settingsFlickable.contentItem, 0, 0).y
+        }
+
+        Controls.LinkLabel {
+            text: qsTr("Limits")
+            onClicked: settingsFlickable.contentY = limitSettingsFrame.mapToItem(settingsFlickable.contentItem, 0, 0).y
+        }
+
+        Controls.LinkLabel {
+            text: qsTr("Cell configuration")
+            onClicked: settingsFlickable.contentY = cellSettingsFrame.mapToItem(settingsFlickable.contentItem, 0, 0).y
+        }
+
+        Controls.LinkLabel {
+            text: qsTr("Balancing configuration")
+            onClicked: settingsFlickable.contentY = balancingSettingsFrame.mapToItem(settingsFlickable.contentItem, 0, 0).y
+        }
+
+        Controls.LinkLabel {
+            text: qsTr("Output settings")
+            onClicked: settingsFlickable.contentY = outputSettingsFrame.mapToItem(settingsFlickable.contentItem, 0, 0).y
+        }
+
+        Controls.LinkLabel {
+            text: qsTr("Current sensor value «0»")
+            onClicked: settingsFlickable.contentY = zeroSensorSettingsFrame.mapToItem(settingsFlickable.contentItem, 0, 0).y
+        }
+
+        Item {
+            Layout.fillHeight: true
+        }
+
+        ColumnLayout {
+            spacing: 15
+
+            Controls.OutlineButton {
+                text: qsTr("Read settings from file")
+                Layout.fillWidth: true
+            }
+
+            Controls.OutlineButton {
+                text: qsTr("Read current settings from BMS")
+                Layout.fillWidth: true
+            }
+
+            Controls.OutlineButton {
+                text: qsTr("Write to non-volatile memory of BMS")
+                Layout.fillWidth: true
+            }
+
+            Controls.Button {
+                text: qsTr("Write current values to BMS")
+                Layout.fillWidth: true
+            }
+
+            Layout.fillWidth: true
+        }
+
+        Layout.maximumWidth: 320
+        Layout.fillHeight: true
+    }
+}

qml/Screens/CellMonitorScreen.qml

@@ -63,7 +63,7 @@ Item {
         RowLayout {
             spacing: 10
             width: ListView.view.width
-            height: 36
+            height: 38
 
             Item {
                 Layout.preferredWidth: parent.width / 6 - 20
@@ -112,7 +112,7 @@ Item {
                 anchors.fill: parent
                 clip: true
                 model: []
-                spacing: 2
+                spacing: 0
 
                 header: cellListHeader
                 delegate: cellListDelegate
@@ -131,7 +131,7 @@ Item {
                 anchors.fill: parent
                 clip: true
                 model: []
-                spacing: 2
+                spacing: 0
 
                 header: cellListHeader
                 delegate: cellListDelegate

qml/Screens/ConnectionScreen.qml

@@ -34,7 +34,7 @@ Dialog {
                 Layout.alignment: Qt.AlignCenter
             }
 
-            Controls.AlternativeButton {
+            Controls.Button {
                 text: qsTr("Connect")
                 Layout.fillWidth: true
                 Layout.alignment: Qt.AlignHCenter | Qt.AlignTop

qml/Screens/qmldir

@@ -2,3 +2,4 @@ module Screens
 ConnectionScreen 1.0 ConnectionScreen.qml
 AkbMonitorScreen 1.0 AkbMonitorScreen.qml
 CellMonitorScreen 1.0 CellMonitorScreen.qml
+BmsSettingsScreen 1.0 BmsSettingsScreen.qml

qml/Utils/Palette.qml

@@ -17,8 +17,8 @@ QtObject {
 
     property color borderColor: "#DFE0EB"
 
-    property color buttonColor: "#F7F8FC"
+    property color buttonColor: "#009352"
-    property color alternativeButtonColor: "#009352"
+    property color outlineButtonColor: "#F7F8FC"
     property color hoveredButtonColor: "#03AC61"
     property color pressedButtonColor: "#057845"
 }

qml/qml_icons.qrc

@@ -9,5 +9,6 @@
         <file>Icons/hide-menu.svg</file>
         <file>Icons/history.svg</file>
         <file>Icons/visualization.svg</file>
+        <file>Icons/check-indicator.svg</file>
     </qresource>
 </RCC>

qml/qml_items.qrc

@@ -12,8 +12,8 @@
         <file>Screens/qmldir</file>
         <file>Utils/qmldir</file>
         <file>Controls/ScrollBar.qml</file>
+        <file>Controls/OutlineButton.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>
@@ -21,5 +21,10 @@
         <file>Controls/ContentLabel.qml</file>
         <file>Controls/DotSeparator.qml</file>
         <file>Controls/AvailabilityIndicator.qml</file>
+        <file>Screens/BmsSettingsScreen.qml</file>
+        <file>Controls/LabelWithBackground.qml</file>
+        <file>Controls/CheckBox.qml</file>
+        <file>Controls/LineSeparator.qml</file>
+        <file>Controls/LinkLabel.qml</file>
     </qresource>
 </RCC>