ui.qml.in

// Copyright 2022 Benjamin Vedder <benjamin@vedder.se>
// Copyright 2024 Lukas Hrazky
//
// This file is part of the Stig VESC package.
//
// Stig VESC package is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by the
// Free Software Foundation, either version 3 of the License, or (at your
// option) any later version.
//
// Stig VESC package is distributed in the hope that it will be useful, but
// WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
// or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
// more details.
//
// You should have received a copy of the GNU General Public License along with
// this program. If not, see <http://www.gnu.org/licenses/>.

import Qt.labs.settings 1.0
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Dialogs 1.3 as Dl
import QtGraphicalEffects 1.15

import Vedder.vesc.vescinterface 1.0
import Vedder.vesc.commands 1.0
import Vedder.vesc.configparams 1.0
import Vedder.vesc.utility 1.0
import QtQuick.Controls.Material 2.2

Item {
    id: mainItem

    property Commands vescCommands: VescIf.commands()

    // Used to fix the float negative zero problem where applicable
    function toFixed1Zero(num) {
        return num.toFixed(1).replace("-0.0", "0.0");
    }

    function clamp(val, min, max) {
        if (val > max) {
            return max;
        }
        if (val < min) {
            return min;
        }
        return val;
    }

    // 5s timeout for connection to package
    Timer {
        id: packageConnectionWatchdog
        interval: 5000
        running: true

        onTriggered: {
            state.pkgState = state.s_Disconnected;
        }
    }

    // 10hz for realtime data
    Timer {
        running: true
        repeat: true
        interval: 100
        onTriggered: {
            vescCommands.getValuesSetup();

            if (!commands.infoReceived) {
                commands.sendGetInfo();
            } else {
                commands.sendGetRtData();
            }

            if (moveSlider.value != 0) {
                commands.sendRcMove(moveSlider.value);
            }

            if (tiltEnabled.checked) {
                vescCommands.lispSendReplCmd("(set-remote-state " + tiltSlider.value + " 0 0 0 0)");
            }
        }
    }

    // 4Hz timer to poll for lights status if enabled
    Timer {
        running: lights.enabled
        repeat: true
        interval: 250
        triggeredOnStart: true
        onTriggered: {
            commands.sendLightsControl();
        }
    }

    // 100hz for for UI updates
    Timer {
        running: true
        repeat: true
        interval: 10
        onTriggered: {
            if (!moveSlider.pressed) {
                var stepSize = 0.05;
                if (moveSlider.value > 0) {
                    if (moveSlider.value < stepSize) {
                        moveSlider.value = 0;
                    } else {
                        moveSlider.value -= stepSize;
                    }
                } else if (moveSlider.value < 0) {
                    if (moveSlider.value > -stepSize) {
                        moveSlider.value = 0;
                    } else {
                        moveSlider.value += stepSize;
                    }
                }
            }

            if (!tiltSlider.pressed) {
                var stepSize = 0.05;
                if (tiltSlider.value > 0) {
                    if (tiltSlider.value < stepSize) {
                        tiltSlider.value = 0;
                    } else {
                        tiltSlider.value -= stepSize;
                    }
                } else if (tiltSlider.value < 0) {
                    if (tiltSlider.value > -stepSize) {
                        tiltSlider.value = 0;
                    } else {
                        tiltSlider.value += stepSize;
                    }
                }
            }
        }
    }

    Connections {
        id: vescConfig
        target: VescIf

        property bool useImperial: VescIf.useImperialUnits()
        property string distanceUnit: useImperial ? "mi" : "km"
        property string speedUnit: useImperial ? "mph" : "km/h"
        property real imperialFactor: useImperial ? 0.621371192 : 1.0;

        function onUseImperialUnitsChanged(useImperialUnits) {
            useImperial = useImperialUnits;
        }
    }

    Connections {
        id: motorConfig
        property ConfigParams mcConfig: VescIf.mcConfig()
        target: mcConfig

        property int batteryCells: mcConfig.getParamInt("si_battery_cells")
        property real tempMotorStart: mcConfig.getParamDouble("l_temp_motor_start")
        property real tempFetStart: mcConfig.getParamDouble("l_temp_fet_start")
        property real currentMin: mcConfig.getParamDouble("l_current_min")
        property real currentMax: mcConfig.getParamDouble("l_current_max")
        property real inCurrentMin: mcConfig.getParamDouble("l_in_current_min")
        property real inCurrentMax: mcConfig.getParamDouble("l_in_current_max")

        function onParamChangedDouble(src, name, newParam) {
            if (name === "l_temp_motor_start") {
                tempMotorStart = newParam;
            } else if (name === "l_temp_fet_start") {
                tempFetStart = newParam;
            } else if (name === "l_current_min") {
                currentMin = newParam;
            } else if (name === "l_current_max") {
                currentMax = newParam;
            } else if (name === "l_in_current_min") {
                inCurrentMin = newParam;
            } else if (name === "l_in_current_max") {
                inCurrentMax = newParam;
            }
        }

        function onParamChangedInt(src, name, newParam) {
            if (name === "si_battery_cells") {
                batteryCells = newParam;
            }
        }
    }

    Connections {
        id: packageConfig
        target: VescIf

        property ConfigParams pkgConfig: VescIf.customConfig(0);

       function onCustomConfigLoadDone() {
           pkgConfig = VescIf.customConfig(0);
        }

        function checkConfig() {
            state.configLoadingError = !pkgConfig;
            return !!pkgConfig;
        }

        function setDisabled(disabled) {
            if (!checkConfig()) return;

            pkgConfig.updateParamBool("disabled", disabled);
            vescCommands.customConfigSet(0, pkgConfig);
        }

        function fetchConfig(tuneOnly) {
            if (!checkConfig()) return;

            var tuneBlacklist = [
                "disabled",
                "hardware.mass",
                "hardware.remote.type",
                "hardware.remote.deadband",
                "hardware.esc.frequency",
                "hardware.motor.torque_constant",
                "hardware.motor.rolling_resistance",
                "hardware.motor.acceleration_resistance",
                "rider.mass",
                "rider.drag_coefficient",
                "warnings.battery_cells",
                "warnings.hv_threshold",
                "warnings.lv_threshold",
                "faults.adc1_threshold",
                "faults.adc2_threshold",
            ];

            var settings = [];
            for (let subGroup of pkgConfig.getParamSubgroups("General")) {
                for (let param of pkgConfig.getParamsFromSubgroup("General", subGroup)) {
                    if (tuneOnly && tuneBlacklist.includes(param)) {
                        continue;
                    }

                    var item = {"name": param};

                    if (pkgConfig.isParamDouble(param)) {
                        item.type = "Double";
                        item.value = pkgConfig.getParamDouble(param);
                    } else if (pkgConfig.isParamInt(param)) {
                        item.type = "Int";
                        item.value = pkgConfig.getParamInt(param);
                    } else if (pkgConfig.isParamEnum(param)) {
                        item.type = "Enum";
                        item.value = pkgConfig.getParamEnum(param);
                    } else if (pkgConfig.isParamBool(param)) {
                        item.type = "Bool";
                        item.value = pkgConfig.getParamBool(param);
                    } else if (pkgConfig.isParamQString(param)) {
                        item.type = "String";
                        item.value = pkgConfig.getParamQString(param);
                    } else if (pkgConfig.isParamBitfield(param)) {
                        item.type = "Bitfield";
                        item.value = pkgConfig.getParamInt(param);
                    } else {
                        // e.g. a separator
                        continue;
                    }

                    settings.push(item);
                }
            }

            return settings;
        }

        function applyConfig(config) {
            if (!checkConfig()) return;

            if (config.version !== "1.0") {
                VescIf.emitStatusMessage("Error: Unexpected version: %1".arg(config.version), false);
                return;
            }

            for (let item of config.settings) {
                if (item.type === "Double") {
                    pkgConfig.updateParamDouble(item.name, item.value);
                } else if (item.type === "Int") {
                    pkgConfig.updateParamInt(item.name, item.value);
                } else if (item.type === "Bool") {
                    pkgConfig.updateParamBool(item.name, item.value);
                } else if (item.type === "Enum") {
                    pkgConfig.updateParamEnum(item.name, item.value);
                } else if (item.type === "String") {
                    pkgConfig.updateParamString(item.name, item.value);
                } else if (item.type === "Bitfield") {
                    pkgConfig.updateParamInt(item.name, item.value);
                }
            }

            vescCommands.customConfigSet(0, pkgConfig);
        }

        // TODO don't do this...
        function setInputTiltRemoteType(type) {
            if (!checkConfig()) return;

            if (pkgConfig.getParamEnum("hardware.remote.type", 0) != 1) {
                pkgConfig.updateParamEnum("hardware.remote.type", 1);
                vescCommands.customConfigSet(0, pkgConfig);
            }
        }
    }

    Connections {
        id: commands
        target: vescCommands

        readonly property int c_GET_INFO: 0
        readonly property int c_RC_MOVE: 7
        readonly property int c_HANDTEST: 13
        readonly property int c_GET_RT_DATA_2: 201
        readonly property int c_LIGHTS_CONTROL: 202

        property bool infoReceived: false

        function createData(size, command) {
            var data = new DataView(new ArrayBuffer(size));
            var ind = 0;
            data.setUint8(ind++, 101);
            data.setUint8(ind++, command);
            return data;
        }

        function sendGetInfo() {
            vescCommands.sendCustomAppData(createData(2, c_GET_INFO).buffer);
        }

        function sendGetRtData() {
            vescCommands.sendCustomAppData(createData(2, c_GET_RT_DATA_2).buffer);
        }

        function sendLightsControl(on, headlightsOn) {
            var data = createData(4, c_LIGHTS_CONTROL);

            var mask = 0;
            var value = 0;

            if (on !== undefined) {
                mask |= 0b01;
                if (on) {
                    value |= 0b01;
                }
            }

            if (headlightsOn !== undefined) {
                mask |= 0b10;
                if (headlightsOn) {
                    value |= 0b10;
                }
            }
            data.setUint8(2, mask);
            data.setUint8(3, value);

            vescCommands.sendCustomAppData(data.buffer);
        }

        function sendRcMove(value) {
            var data = createData(6, c_RC_MOVE);

            var current = Math.abs(Math.round(value * 70)) + 10;

            data.setUint8(2, value > 0 ? 1 : 0); // direction
            data.setUint8(3, current); // current
            data.setUint8(4, 1); // time
            data.setUint8(5, current + 1); // sum = time + current

            vescCommands.sendCustomAppData(data.buffer);
        }

        function sendHandtest(on) {
            var data = createData(3, c_HANDTEST);
            data.setUint8(2, on); // on (1) / off (0)
            vescCommands.sendCustomAppData(data.buffer);
        }

        function onValuesSetupReceived(values, mask) {
            var fault = values.fault_str;
            fault = fault.replace("FAULT_CODE_", "");
            state.vescFault = fault != "NONE" ? fault : "";

            batteryBar.voltage = values.v_in;
            batteryBar.value = values.battery_level * 100;

            var speed = Math.abs(values.speed * 3.6 * vescConfig.imperialFactor);
            speedDial.value = speed;
            speedDial.erpm = Math.abs(values.rpm);

            currentDial.value = values.current_motor;
            dutyDial.value = Math.abs(values.duty_now * 100);
            batteryCurrent.value = values.current_in;

            motorTemp.value = values.temp_motor;
            controllerTemp.value = values.temp_mos;
            odometer.value = Math.round(values.odometer * 0.001 * vescConfig.imperialFactor);
            tachometer.value = values.tachometer_abs * 0.001 * vescConfig.imperialFactor;

            consumption.add(Math.max(Math.min(values.current_in * values.v_in / Math.max(speed, 1e-6), 60) , -60));
        }

        function onCustomAppDataReceived(data) {
            var dv = new DataView(data, 0);
            var ind = 0;

            var packageId = dv.getUint8(ind++);
            if (packageId !== 101) {
                return;
            }

            var msgtype = dv.getUint8(ind++);

            if (msgtype == c_GET_INFO) {
                ind += 2;
                var led_type = dv.getUint8(ind++);
                if (led_type > 0) {
                    lights.enabled = true;
                    if (led_type == 3) {
                        lights.lcm = true;
                    }
                }
                commands.infoReceived = true;
            } else if (msgtype == c_LIGHTS_CONTROL) {
                var values = dv.getUint8(ind++);
                lights.on = values & 0b01;
                lights.headlightsOn = values & 0b10;
            } else if (msgtype === c_GET_RT_DATA_2) {
                var mask = dv.getUint8(ind++);
                var hasRuntime = !!(mask & 0x1);
                var hasCharging = !!(mask & 0x2);

                var modeAndState = dv.getUint8(ind++);
                state.pkgMode = modeAndState >> 4;
                state.pkgState = modeAndState & 0xF;

                var sensorAndFlags = dv.getUint8(ind++);
                state.fsState = sensorAndFlags >> 6;
                state.wheelslip = sensorAndFlags & 0b00000001;
                state.charging = sensorAndFlags & 0b00100000;

                var setpointAndStop = dv.getUint8(ind++);
                state.setpointAdjustmentType = setpointAndStop >> 4;
                state.stopCondition = setpointAndStop & 0xF;

                state.beepReason = dv.getUint8(ind++);

                pitch.pitchValue = dv.getFloat32(ind); ind += 4;
                pitch.balancePitchValue = dv.getFloat32(ind); ind += 4;
                roll.value = dv.getFloat32(ind); ind += 4;

                state.adc1Voltage = dv.getFloat32(ind); ind += 4;
                state.adc2Voltage = dv.getFloat32(ind); ind += 4;

                debugTest.rValue = dv.getFloat32(ind); ind += 4;

                if (hasRuntime) {
                    pitch.setpointValue = dv.getFloat32(ind); ind += 4;

                    debugModifiersTarget.rValue = dv.getFloat32(ind); ind += 4;
                    debugModifiersValue.rValue = dv.getFloat32(ind); ind += 4;
                    debugModifiersSpeed.rValue = dv.getFloat32(ind); ind += 4;

                    debugPidProportional.rValue = dv.getFloat32(ind); ind += 4;
                    debugPidIntegral.rValue = dv.getFloat32(ind); ind += 4;
                    debugPidDerivative.rValue = dv.getFloat32(ind); ind += 4;
                    debugPidFeedForward.rValue = dv.getFloat32(ind); ind += 4;

                    debugTractionConfidence.rValue = dv.getFloat32(ind); ind += 4;
                    debugTractionMultiplier.rValue = dv.getFloat32(ind); ind += 4;
                    debugAtrSlope.rValue = dv.getFloat32(ind); ind += 4;

                    debugWheelSpeed.rValue = dv.getFloat32(ind); ind += 4;
                    debugBoardSpeed.rValue = dv.getFloat32(ind); ind += 4;
                    debugWheelAccel.rValue = dv.getFloat32(ind); ind += 4;
                    debugBoardAccel.rValue = dv.getFloat32(ind); ind += 4;
                }

                if (hasCharging) {
                    chargingInfo.current = dv.getFloat32(ind); ind += 4;
                    chargingInfo.voltage = dv.getFloat32(ind); ind += 4;
                }
            }

            packageConnectionWatchdog.restart();
        }
    }

    // Old Float package settings, used to retrieve quicksaves
    Settings {
        id: floatSettings
    }

    Settings {
        id: preferences
        category: "preferences"

        property int speedDialMax: vescConfig.useImperial ? 30 : 40
        property alias swapAdcs: prefSwapAdcs.checked
        property alias showBattVoltage: prefShowBattVoltage.checked
        property alias showBattVoltagePerCell: prefShowBattVoltagePerCell.checked
        property alias battCurrentLog: prefBattCurrentLog.checked
        property int tempWarningOffset: 10
        property alias tuneSlotCount: prefTuneSlotCount.value
        property alias showWelcomeDialog: prefShowWelcomeDialog.checked
    }

    QtObject {
        id: tuneManager

        readonly property string formatVersion: "1.0"
        readonly property string packageName: "Stig"
        readonly property string packageVersion: "{{VERSION}}"
        readonly property int maxTunes: 6

        // Storage for tunes as well as full package configs
        property var tuneStorage: Settings {
            id: tuneStorage
            category: "configs"

            property var tuneArchive
            property var tuneArchiveDownloadDate

            // An array storing Float tune names that have been converted for
            // each slot. Prevents converting tunes over and over again, until
            // the name changes for the Float tune.
            property var floatTunesConverted: Array(6)

            property var fullBackup
        }

        property var tuneNames: {
            var names = {}
            for (var slot = 1; slot <= maxTunes; slot++) {
                var tune = loadTune(slot);
                if (tune) {
                    names[slot] = tune.name;
                }
            }

            return names;
        }

        property alias fullBackup: tuneStorage.fullBackup

        function tuneId(slot) {
            return "tune_slot_" + slot;
        }

        function createTune(name, description, settings) {
            var tune = {
                "version": formatVersion,
                "name": name,
                "date": new Date(),
                "package": {
                    "name": packageName,
                    "version": packageVersion
                },
                "settings": settings
            };

            if (description) {
                tune.description = description;
            }

            return tune;
        }

        function updateTune(tune, name, description, settings) {
            tune.name = name;
            if (description) {
                tune.description = description;
            }
            if (settings) {
                tune.settings = settings;
                tune.date = new Date();
            }
        }

        function createBackup() {
            return createTune("Full Backup", "", packageConfig.fetchConfig(false));
        }

        function saveTune(slot, tune) {
            var id = tuneId(slot);

            tuneStorage.setValue(id, JSON.stringify(tune));

            tuneNames[slot] = tune.name;
            // workaround needed so that the change is written through to the storage
            tuneNames = tuneNames;
        }

        function loadTune(slot) {
            var tuneJson = tuneStorage.value(tuneId(slot), "");
            if (tuneJson) {
                return JSON.parse(tuneJson);
            }
            return null;
        }

        function eraseTune(slot) {
            tuneStorage.setValue(tuneId(slot), "");
            tuneNames[slot] = null;
            // workaround needed so that the change is written through to the storage
            tuneNames = tuneNames;
        }

        function slotEmpty(slot) {
            return !tuneStorage.value(tuneId(slot), null);
        }

        function saveTuneArchive(tuneArchive) {
            tuneStorage.tuneArchive = JSON.stringify(tuneArchive);
            tuneStorage.tuneArchiveDownloadDate = new Date();
        }

        function loadTuneArchive() {
            if (tuneStorage.tuneArchive) {
                return JSON.parse(tuneStorage.tuneArchive);
            }
            return null;
        }

        function getTuneArchiveDate() {
            return Qt.formatDateTime(tuneStorage.tuneArchiveDownloadDate);
        }

        function convertFloatQuicksaves() {
            var namesJson = floatSettings.value("quicksave_names", null);
            if (namesJson) {
                var names = JSON.parse(namesJson);
                for (var slotName in names) {
                    if (!slotName.startsWith("Float Quicksave ")) {
                        continue;
                    }

                    var tuneSettingsJson = floatSettings.value(slotName, null);
                    if (!tuneSettingsJson) {
                        continue;
                    }

                    var slot = Number(slotName.replace("Float Quicksave ", ""));
                    // skipping if the tune has been converted before
                    if (tuneStorage.floatTunesConverted[slot - 1] === names[slotName]) {
                        continue;
                    }

                    // at this stage mark slot as converted, if target slot is not empty,
                    // we don't want it converted at the moment it gets emptied
                    tuneStorage.floatTunesConverted[slot - 1] = names[slotName];
                    // workaround needed so that the change is written through to the storage
                    tuneStorage.floatTunesConverted = tuneStorage.floatTunesConverted;

                    if (slotEmpty(slot)) {
                        var tuneSettings = JSON.parse(tuneSettingsJson);
                        tuneManager.saveTune(slot, tuneManager.createTune(names[slotName], "", tuneSettings));
                    }
                }
            }
        }

        function parseCsv(csv) {
            var lines = csv.split("\r\n");
            var tuneCount = lines[0].split(",").length - 1;

            var result = [];
            for (var i = 0; i < tuneCount; i++) {
                // set the version to the current one to always pass the version check
                result.push({"version": formatVersion, "settings": []});
            }

            for (var i in lines) {
                var currentLine = lines[i].split(",");

                for (var j = 0; j < tuneCount; j++) {
                    var value = currentLine[j + 1];
                    if (value) {
                        var key = currentLine[0];
                        var name;
                        var type;

                        if (key === "_name") {
                            result[j].name = value;
                            continue;
                        } else if (key.startsWith("double_")) {
                            name = key.substring(7);
                            type = "Double";
                        } else if (key.startsWith("int_")) {
                            name = key.substring(4);
                            type = "Int";
                        } else if (key.startsWith("bool_")) {
                            name = key.substring(5);
                            type = "Bool";
                        } else if (key.startsWith("enum_")) {
                            name = key.substring(5);
                            type = "Enum";
                        }

                        result[j].settings.push({
                            "name": name,
                            "type": type,
                            "value": value
                        });
                    }
                }
            }

            return result;
        }

        Component.onCompleted: {
            convertFloatQuicksaves();
        }
    }

    QtObject {
        id: state

        // package state
        readonly property int s_Disabled: 0
        readonly property int s_Startup: 1
        readonly property int s_Ready: 2
        readonly property int s_Running: 3
        readonly property int s_Connecting: 254
        readonly property int s_Disconnected: 255

        readonly property var pkgStateToString: new Map([
            [s_Disabled, "DISABLED"],
            [s_Startup, "STARTUP"],
            [s_Ready, "READY"],
            [s_Running, "RUNNING"],
            [s_Connecting, "CONNECTING"],
            [s_Disconnected, "DISCONNECTED"],
        ])

        property int pkgState: s_Connecting
        property string pkgStateString: pkgStateToString.get(pkgState) ?? "UNKNOWN (%1)".arg(pkgState)

        onPkgStateChanged: {
            updateErrorStrings();
        }

        // package mode
        readonly property int m_Normal: 0
        readonly property int m_Handtest: 1

        property int pkgMode: m_Normal

        property string pkgModeString: {
            if (pkgState != s_Disconnected) {
                if (pkgMode == m_Handtest) {
                    return "HANDTEST";
                }
            }

            return "";
        }

        // footpad sensor state
        readonly property int fs_None: 0
        readonly property int fs_Left: 1
        readonly property int fs_Right: 2
        readonly property int fs_Both: 3

        property int fsState: fs_None
        property real adc1Voltage: 0
        property real adc2Voltage: 0

        onFsStateChanged: {
            leftSensor.on = false;
            rightSensor.on = false;

            if (fsState & fs_Left) {
                leftSensor.on = true;
            }

            if (fsState & fs_Right) {
                rightSensor.on = true;
            }

            if (preferences.swapAdcs && leftSensor.on !== rightSensor.on) {
                leftSensor.on = !leftSensor.on;
                rightSensor.on = !rightSensor.on;
            }
        }

        // setpoint adjustment type
        readonly property int sat_None: 0
        readonly property int sat_Centering: 1
        readonly property int sat_ReverseStop: 2

        // setpoint adjustment class
        readonly property int sac_Normal: 0
        readonly property int sac_Warning: 1
        readonly property int sac_Error: 2

        readonly property var setpointAdjustmentTypeToString: new Map([
            [sat_None, ""],
            [sat_Centering, "centering"],
            [sat_ReverseStop, "reverse stop"],
        ])

        property int setpointAdjustmentType: sat_None
        property string setpointAdjustmentTypeString
        property int setpointAdjustmentClass
        onSetpointAdjustmentTypeChanged: {
            // do these in one function to keep them consistent, order is important to display and fade correctly in pitchPushbackText
            // setpointAdjustmentClass = setpointAdjustmentType >= sat_HighVoltage ? sac_Error : setpointAdjustmentType >= sat_Duty ? sac_Warning : sac_Normal;
            setpointAdjustmentClass = sac_Normal;
            setpointAdjustmentTypeString = setpointAdjustmentTypeToString.get(setpointAdjustmentType) ?? "unknown (%1)".arg(setpointAdjustmentType);
        }

        // stop condition
        readonly property int sc_None: 0
        readonly property int sc_Pitch: 1
        readonly property int sc_Roll: 2
        readonly property int sc_Sensor: 3
        readonly property int sc_Ghost: 4
        readonly property int sc_ReverseStop: 5
        readonly property int sc_Quickstop: 6

        readonly property var stopConditionToString: new Map([
            [sc_None, ""],
            [sc_Pitch, "Pitch"],
            [sc_Roll, "Roll"],
            [sc_Sensor, "Sensor"],
            [sc_Ghost, "Ghost"],
            [sc_ReverseStop, "Reverse Stop"],
            [sc_Quickstop, "Quickstop"],
        ])

        property int stopCondition: sc_None
        property string stopConditionString: stopConditionToString.get(stopCondition) ?? "unknown (%1)".arg(stopCondition)

        property bool wheelslip: false
        property bool charging: false

        // readonly property int wt_None: 0
        // readonly property int wt_LowVoltage: 1

        readonly property var beepReasonToString: new Map([
            [0, ""],
            [1, "Low Voltage"],
            [2, "High Voltage"],
            [3, "Controller Temp"],
            [4, "Motor Temp"],
            [5, "Overcurrent"],
            [6, "Duty Cycle"],
            [7, "Foot Sensors"],
            [8, "Low Battery"],
            [9, "Board Idle"],
            [10, "Debug"],
            [11, "Other"],
            [12, "Ghost"],
        ])

        property int beepReason: 0
        property string beepReasonString: beepReasonToString.get(beepReason) ?? "unknown (%1)".arg(beepReason)

        property bool pkgStateIsError: ![s_Startup, s_Ready, s_Running, s_Connecting].includes(pkgState)
        property string vescFault: ""
        property bool configLoadingError: false

        property bool isError: pkgStateIsError || !!vescFault || configLoadingError

        onVescFaultChanged: updateErrorStrings()
        onConfigLoadingErrorChanged: updateErrorStrings()

        property string errorText: ""
        property string errorDescription: ""

        function updateErrorStrings() {
            if (!!vescFault) {
                errorText = "VESC fault: %1".arg(vescFault);
                errorDescription = "VESC reported a fault. Be very careful. You should not continue riding before you fix the root cause."
            } else if (configLoadingError) {
                errorText = "Error: Stig Cfg failed to load.";
                errorDescription = "Reconnecting to the board usually fixes this. If problem persists, try reinstalling the package.";
            } else if (pkgState == s_Disconnected) {
                errorText = "";
                errorDescription = "Package is not responding. May occur temporarily with spotty connection. If board doesn't engage, the package is dead. Restart the board, if problem persists, try reinstalling the package.";
            } else if (pkgState == s_Disabled) {
                errorText = "";
                errorDescription = "Stig package is disabled. After you're done with board setup, You can re-enable it in Settings > Setup."
            } else if (![s_Startup, s_Ready, s_Running, s_Connecting].includes(pkgState)) {
                errorText = "";
                errorDescription = "Your Stig package state is unknown. This should never happen.";
            } else {
                errorText = "";
                errorDescription = "";
            }
        }
    }

    QtObject {
        id: lights

        property bool enabled: false
        property bool lcm: false

        property bool on: false
        property bool headlightsOn: false
    }

    // A distance unit used for most dimensions throughout the layouts.
    // Basing on width ensures uniform scaling of the whole UI, height is a
    // factor of width and we rely on vertical aspect ratio to have some space
    // at the bottom for a StackLayout of Tunes / Control / ...
    property real unit: width * 0.1

    property real fontSizeBig: 0.4 * unit
    property real fontSizeNormal: 0.35 * unit
    property real fontSizeSmall: 0.3 * unit
    property real fontSizeSuperSmall: 0.25 * unit

    anchors.fill: parent

    component NText : Text {
        color: Utility.getAppHexColor("normalText")
    }

    component LText : Text {
        color: Utility.getAppHexColor("lightText")
    }

    component DText : Text {
        color: Utility.getAppHexColor("disabledText")
    }

    component FloatingToolButton : RoundButton {
        id: button
        anchors.margins: 4
        width: unit
        height: unit
        padding: 0
        leftInset: 0
        rightInset: 0
        topInset: 0
        bottomInset: 0

        property Path iconPath
        property real iconSize: width * 0.7
        property color strokeColor: Utility.getAppHexColor("normalText")
        property color bgColor: Utility.getAppHexColor("darkBackground")

        contentItem: Item {
            Canvas {
                id: downloadTuneArchiveCanvas
                anchors.centerIn: parent
                implicitWidth: iconSize
                implicitHeight: iconSize
                contextType: "2d"

                onPaint: {
                    var context = getContext("2d");
                    context.reset();
                    context.strokeStyle = button.strokeColor
                    context.lineCap = "round";
                    iconPath.scale = Qt.size(iconSize / 50, iconSize / 50)
                    context.path = iconPath
                    context.lineWidth = 2
                    context.stroke()
                }
            }
        }

        background: Rectangle {
            id: buttonBg
            radius: parent.width / 2
            opacity: 0.9

            color: button.bgColor

            states: [
                State {
                    name: "change"
                    when: button.pressed
                    PropertyChanges {target: buttonBg; color: Utility.getAppHexColor("lightestBackground");}
                }
            ]

            transitions: Transition {
                ColorAnimation {property: "color"; duration: 200; easing.type: Easing.InOutCirc;}
            }
        }
    }

    component ToolButton : FloatingToolButton {
        anchors.margins: 0
        bgColor: Utility.getAppHexColor("normalBackground")
    }

    component Dial : Item {
        id: dial

        property real lineWidth: width * 0.075
        property real maxValue
        property real minValue
        property real value
        property real topValue
        property real warnThresholdAbs: 0
        property bool allowNegative: false
        property string valueUnit: ""
        property real valueFontSize: fontSizeNormal

        property real valueAngle: value > 0 ? Math.min(360 * value / maxValue, 360) : Math.max(360 * value / -minValue, -360)
        property real topAngle: Math.min(360 * topValue / maxValue, 360)

        property real topAngleRads: topAngle * Math.PI / 180

        property real dialRadius: width * 0.3

        Behavior on value {
            NumberAnimation {
                easing.type: Easing.OutCirc
                duration: 100
            }
        }

        Behavior on topValue {
            NumberAnimation {
                easing.type: Easing.OutCirc
                duration: 100
            }
        }

        onValueAngleChanged: canvas.requestPaint();
        onTopAngleChanged: canvas.requestPaint();

        Canvas {
            id: canvas
            anchors.fill: parent

            contextType: "2d"

            Path {
                id: dialBackground

                PathAngleArc {
                    centerX: width * 0.5
                    centerY: centerX
                    radiusX: dialRadius + lineWidth * 0.5
                    radiusY: radiusX
                    startAngle: -270
                    sweepAngle: 360
                }
            }

            Path {
                id: topFill

                PathAngleArc {
                    centerX: width * 0.5
                    centerY: centerX
                    radiusX: dialRadius + lineWidth * 0.5
                    radiusY: radiusX
                    startAngle: -270
                    sweepAngle: topAngle
                }
            }

            Path {
                id: valueFill

                PathAngleArc {
                    centerX: width * 0.5
                    centerY: centerX
                    radiusX: dialRadius + lineWidth * 0.5
                    radiusY: radiusX
                    startAngle: -270
                    sweepAngle: valueAngle
                }
            }

            onPaint: {
                var context = getContext("2d");
                context.reset();
                context.lineWidth = lineWidth;
                context.strokeStyle = Utility.getAppHexColor("lightBackground");
                context.path = dialBackground;
                context.stroke();

                if (!allowNegative) {
                    context.strokeStyle = Utility.getAppHexColor("lightestBackground");
                    context.path = topFill;
                    context.stroke();
                }

                if (warnThresholdAbs > 0 && Math.abs(value) > warnThresholdAbs) {
                    context.strokeStyle = Utility.getAppHexColor("orange");
                } else {
                    if (valueAngle > 0) {
                        context.strokeStyle = Utility.getAppHexColor("lightAccent");
                    } else {
                        context.strokeStyle = Utility.getAppHexColor("green");
                    }
                }

                context.path = valueFill;
                context.stroke();
            }
        }

        Rectangle {
            id: zeroMarker
            width: 1
            height: 1.3 * lineWidth
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.verticalCenter
            anchors.topMargin: dialRadius
            z: 1
            color: Utility.getAppHexColor("lightText")
        }

        Rectangle {
            id: topMarker
            width: 1
            height: 1.3 * lineWidth
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.verticalCenter
            anchors.topMargin: dialRadius
            visible: !allowNegative && topAngle > 0
            z: 3
            color: Utility.getAppHexColor("lightText")
            transform: Rotation {origin.x: 0; origin.y: -dialRadius; angle: topAngle}
            antialiasing: true
        }

        LText {
            id: valueText
            anchors.centerIn: parent

            font.pixelSize: valueFontSize
            horizontalAlignment: Text.AlignHCenter
            text: Math.round(parent.value)
        }

        DText {
            id: valueUnit
            anchors.left: valueText.right
            anchors.baseline: valueText.baseline
            anchors.leftMargin: font.pixelSize * 0.1

            font.pixelSize: fontSizeSmall
            text: parent.valueUnit
        }

        LText {
            id: topValueLabel
            anchors.centerIn: parent
            anchors.horizontalCenterOffset: -Math.sin(topAngleRads) * (dialRadius + lineWidth + font.pixelSize * 1.7)
            anchors.verticalCenterOffset: Math.cos(topAngleRads) * (dialRadius + lineWidth + font.pixelSize * 1.1)
            visible: !allowNegative && topAngle > 0
            z: 4
            font.pixelSize: fontSizeSmall
            text: topValue.toFixed(1)
        }
    }

    component BaseDialog : Dialog {
        x: 10
        y: (parent.height / 2 - implicitHeight / 2) / (placeAtTop ? 2 : 1)
        implicitWidth: parent.width - 20

        property real fullHeight: parent.height - 20
        // place dialog at the top part of the screen, so that the phone
        // keyboard doesn't just exactly cover the buttons
        property bool placeAtTop: false

        Material.background: Utility.getAppHexColor("normalBackground")

        modal: true
        focus: true
        closePolicy: Popup.CloseOnEscape
        parent: ApplicationWindow.overlay

        Overlay.modal: Rectangle {
            color: "#AA000000"
        }
    }

    Component.onCompleted: {
        if (preferences.showWelcomeDialog) {
            welcomeDialog.show();
        }
    }

    Dl.FileDialog {
        id: jsonSaveDialog
        title: "Choose a file to save"
        nameFilters: ["JSON (*.json)"]
        selectExisting: false

        property string jsonData

        function show(data) {
            if (!Utility.requestFilePermission()) {
                VescIf.emitMessageDialog(
                            "File Permissions",
                            "Unable to request file system permission.",
                            false, false);
                return;
            }

            jsonData = JSON.stringify(data, null, 4);
            open();
        }

        onAccepted: {
            var fUrl = fileUrl.toString();
            if (!fUrl.toLowerCase().endsWith(".json")) {
                fUrl += ".json";
            }

            var request = new XMLHttpRequest();
            request.open("PUT", fUrl, false);
            request.send(jsonData);

            if (request.status === 0) {
                VescIf.emitStatusMessage("File saved", true);
            } else {
                VescIf.emitStatusMessage("Save failed: %1".arg(request.status), false);
            }
        }
    }

    Dl.FileDialog {
        id: jsonLoadDialog
        title: "Choose a file to load"
        nameFilters: ["JSON (*.json)"]
        selectExisting: true

        function show() {
            if (!Utility.requestFilePermission()) {
                VescIf.emitMessageDialog(
                            "File Permissions",
                            "Unable to request file system permission.",
                            false, false);
                return;
            }

            applyConfigDialog.open();
            open();
        }

        onAccepted: {
            var fUrl = fileUrl.toString();

            var request = new XMLHttpRequest();
            request.open("GET", fUrl, false);
            request.send(null);

            if (request.status === 200) {
                applyConfigDialog.set(JSON.parse(request.responseText));
            } else {
                VescIf.emitStatusMessage("Opening file failed: %1".arg(request.status), false);
            }
        }

        onRejected: {
            applyConfigDialog.close();
        }
    }

    BaseDialog {
        id: settingsDialog
        implicitHeight: fullHeight

        title: "Settings"
        standardButtons: Dialog.Close

        function show(tab) {
            settingsTabBar.currentIndex = tab || 0;
            open();
        }

        component RightSwitch : RowLayout {
            Layout.fillWidth: true

            property string label
            property alias checked: swtch.checked

            LText {
                Layout.fillWidth: true
                text: parent.label
            }

            Switch {
                id: swtch
            }
        }

        component IntTextField : RowLayout {
            Layout.fillWidth: true

            property string label
            property string valueUnit: ""
            property int value: Number(textField.text)
            property int sourceValue

            LText {
                Layout.fillWidth: true
                text: parent.label
            }

            TextField {
                id: textField
                implicitWidth: 50

                maximumLength: 2
                horizontalAlignment: TextInput.AlignRight
                inputMethodHints: Qt.ImhDigitsOnly
                text: parent.sourceValue
                validator: IntValidator {bottom: 0; top: 99;}
            }

            LText {
                text: parent.valueUnit
            }
        }

        component Heading : LText {
            Layout.fillWidth: true
            Layout.topMargin: 10
            horizontalAlignment: TextInput.AlignHCenter
            font.pointSize: 15
        }

        component OptionDescription : LText {
            Layout.fillWidth: true
            Layout.leftMargin: 20
            Layout.rightMargin: 20
            Layout.topMargin: -7
            font.pointSize: 10
            wrapMode: Text.WordWrap
        }

        component SetupDescription : LText {
            Layout.fillWidth: true
            font.pointSize: 10
            wrapMode: Text.WordWrap
        }

        ColumnLayout {
            width: settingsDialog.availableWidth
            height: parent.height

            TabBar {
                id: settingsTabBar
                Layout.fillWidth: true
                clip: true

                Repeater {
                    model: ["Preferences", "Setup"]

                    TabButton {
                        text: modelData
                    }
                }

                background: Rectangle {
                    opacity: 1
                    color: Utility.getAppHexColor("lightBackground");
                }

                onCurrentIndexChanged: {
                    settingsStackLayout.currentIndex = currentIndex;
                }
            }

            StackLayout {
                id: settingsStackLayout
                Layout.fillWidth: true
                Layout.fillHeight: true
                clip: true

                ScrollView {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    contentWidth: availableWidth
                    clip: true

                    ColumnLayout {
                        anchors.fill: parent

                        IntTextField {
                            label: "Speed dial max"
                            valueUnit: vescConfig.speedUnit
                            sourceValue: preferences.speedDialMax
                            onValueChanged: {
                                preferences.speedDialMax = value
                            }
                        }

                        RightSwitch {
                            id: prefSwapAdcs
                            label: "Swap Footpad Sensor ADCs"
                        }

                        OptionDescription {
                            visible: prefSwapAdcs.checked
                            text: "Note: This swaps only the sensor visualization. You should swap your ADC1/2 physical connection."
                        }

                        RightSwitch {
                            id: prefShowBattVoltage
                            checked: true
                            label: "Show battery voltage"
                        }

                        RightSwitch {
                            id: prefShowBattVoltagePerCell
                            label: "Show battery voltage per cell"
                        }

                        RightSwitch {
                            id: prefBattCurrentLog
                            checked: true
                            label: "Use logarithmic scale for battery current bar"
                        }

                        IntTextField {
                            label: "Temperature warning offset"
                            valueUnit: "°C"
                            sourceValue: preferences.tempWarningOffset
                            onValueChanged: {
                                preferences.tempWarningOffset = value
                            }
                        }

                        OptionDescription {
                            text: "Motor/Controller temperatures will be highlighted red if above TEMP - OFFSET, where TEMP is your Motor/MOSFET Temp Cutoff Start in Motor config. The package beeps when temperatures cross the TEMP - 3°C threshold and pushback triggers at TEMP - 2°C."
                        }

                        RowLayout {
                            Layout.fillWidth: true
                            Layout.rightMargin: 20

                            LText {
                                text: "Number of tune slots"
                            }

                            Slider {
                                id: prefTuneSlotCount
                                Layout.fillWidth: true

                                from: 2
                                to: tuneManager.maxTunes
                                value: 4
                                stepSize: 1
                            }

                            LText {
                                text: prefTuneSlotCount.value
                                font.pointSize: 16
                            }
                        }

                        RightSwitch {
                            id: prefShowWelcomeDialog
                            checked: true
                            label: "Show Welcome dialog"
                        }
                    }
                }

                ScrollView {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    contentWidth: availableWidth
                    clip: true

                    ColumnLayout {
                        anchors.fill: parent

                        Heading {
                            text: "Disable Package"
                        }

                        SetupDescription {
                            text: "If you've installed Stig before running the motor wizard, you need to disable the package to prevent it from conflicting with the wizard (this is equivalent to setting Disable Package to True in Stig Cfg > Spec). After configuring your motor (and IMU, though it's not necessary to disable Stig for IMU configuration), re-enable the package."
                        }

                        Button {
                            Layout.alignment: Qt.AlignHCenter

                            text: state.pkgState === state.s_Disabled ? "Enable Stig" : "Disable Stig"

                            onClicked: {
                                packageConfig.setDisabled(state.pkgState !== state.s_Disabled);
                            }
                        }

                        Heading {
                            text: "Handtest"
                        }

                        SetupDescription {
                            text: "After finishing setup, you can turn on the Handtest mode and engage your board by hand to verify that it balances in the correct direction. Motor currents will be limited to a safe level."
                        }

                        Button {
                            Layout.alignment: Qt.AlignHCenter

                            // Only allow if no other mode is active
                            enabled: [state.m_Normal, state.m_Handtest].includes(state.pkgMode)
                            text: state.pkgMode === state.m_Handtest ? "Turn Handtest Off" : "Turn Handtest On"

                            onClicked: {
                                commands.sendHandtest(state.pkgMode === state.m_Normal);
                            }
                        }

                        SetupDescription {
                            visible: state.pkgMode === state.m_Handtest
                            text: "If your board balances in reverse (shoots off), your Imu Rotation Yaw is off by 180°. If it moves erratically, your Imu Rotation Yaw is likely off by 90°.\nNote: When Handtest is on, any configuration writing is disabled."
                        }

                        Heading {
                            text: "Backup / Restore"
                        }

                        property string backupDate: tuneManager.fullBackup ? Qt.formatDateTime(tuneManager.fullBackup.date) : ""
                        property string backupPackage: tuneManager.fullBackup ? "%1-%2".arg(tuneManager.fullBackup.package.name).arg(tuneManager.fullBackup.package.version) : ""

                        NText {
                            font.pointSize: 11
                            visible: !!tuneManager.fullBackup
                            text: "Backup date: %1".arg(parent.backupDate);
                        }

                        NText {
                            font.pointSize: 11
                            visible: !!tuneManager.fullBackup
                            text: "Saved by: %1".arg(parent.backupPackage);
                        }

                        RowLayout {
                            Layout.fillWidth: true
                            Layout.alignment: Qt.AlignHCenter

                            Button {
                                Layout.alignment: Qt.AlignHCenter

                                text: "Backup"

                                onClicked: {
                                    tuneManager.fullBackup = tuneManager.createBackup();
                                }
                            }

                            Button {
                                Layout.alignment: Qt.AlignHCenter

                                text: "Restore"

                                onClicked: {
                                    applyConfigDialog.show(tuneManager.fullBackup);
                                }
                            }
                        }

                        SetupDescription {
                            text: "Backup is stored in VESC Tool's internal storage."
                        }

                        // Doesn't work on Android :(
                        //LText {
                        //    text: "JSON file:"
                        //}

                        //RowLayout {
                        //    Layout.fillWidth: true
                        //    Layout.alignment: Qt.AlignHCenter

                        //    Button {
                        //        Layout.alignment: Qt.AlignHCenter

                        //        text: "Backup to file"

                        //        onClicked: {
                        //            jsonSaveDialog.show(tuneManager.createBackup());
                        //        }
                        //    }

                        //    Button {
                        //        Layout.alignment: Qt.AlignHCenter

                        //        text: "Load from file"

                        //        onClicked: {
                        //            jsonLoadDialog.show();
                        //        }
                        //    }
                        //}
                    }
                }
            }
        }
    }

    BaseDialog {
        id: editBoardNameDialog

        title: "Set Board Name"
        standardButtons: Dialog.Save | Dialog.Cancel

        onAccepted: {
            VescIf.storeBleName(VescIf.getLastBleAddr(), boardNameInput.text);
            VescIf.storeSettings();
            boardNameText.load();
        }

        TextField {
            id: boardNameInput
            width: editBoardNameDialog.availableWidth

            maximumLength: 30
            text: boardNameText.bleName
        }
    }

    BaseDialog {
        id: editTuneDialog

        title: "Edit Tune"
        standardButtons: Dialog.Save | Dialog.Discard | Dialog.Cancel
        placeAtTop: true

        property var tuneSlot
        property var tune: null

        function show(slot) {
            tuneSlot = slot;
            tune = tuneManager.loadTune(slot);
            open();
        }

        function tuneAttr(key) {
            return tune ? tune[key] : "";
        }

        onAccepted: {
            if (saveTuneNameInput.text) {
                if (!tune) {
                    tune = tuneManager.createTune(saveTuneNameInput.text, saveTuneDescInput.text, packageConfig.fetchConfig(true));
                } else {
                    tuneManager.updateTune(tune, saveTuneNameInput.text, saveTuneDescInput.text, saveTuneOverwrite.checked ? packageConfig.fetchConfig(true) : null);
                }
                tuneManager.saveTune(tuneSlot, tune);
                VescIf.emitStatusMessage(saveTuneNameInput.text + " saved", true);
            }
        }

        onDiscarded: {
            tuneManager.eraseTune(tuneSlot);
            VescIf.emitStatusMessage(tune.name + " erased", true);
            close();
        }

        onOpened: {
            standardButton(Dialog.Save).enabled = !!tune;
            standardButton(Dialog.Discard).enabled = !!tune;
        }

        Component.onCompleted: {
            standardButton(Dialog.Discard).text = "Erase"
        }

        ColumnLayout {
            width: editTuneDialog.availableWidth

            NText {
                Layout.fillWidth: true

                visible: editTuneDialog.tune
                text: "Tune date: %1".arg(Qt.formatDateTime(new Date(editTuneDialog.tuneAttr("date"))));
            }

            LText {
                Layout.fillWidth: true
                text: "Name:"
            }

            TextField {
                id: saveTuneNameInput
                Layout.fillWidth: true

                maximumLength: 30
                text: editTuneDialog.tuneAttr("name")

                onTextEdited: {
                    editTuneDialog.standardButton(Dialog.Save).enabled = !!text;
                }
            }

            LText {
                Layout.fillWidth: true
                text: "Description:"
            }

            TextArea {
                id: saveTuneDescInput
                Layout.fillWidth: true
                implicitHeight: 80

                wrapMode: TextEdit.WordWrap
                text: editTuneDialog.tuneAttr("description") || ""
            }

            CheckBox {
                id: saveTuneOverwrite

                checked: !editTuneDialog.tune
                visible: editTuneDialog.tune
                text: "Overwrite with current tune"
            }
        }
    }

    BaseDialog {
        id: tuneArchiveDialog
        implicitHeight: fullHeight
        clip: true

        title: "Tune Archive"
        standardButtons: Dialog.Reset | Dialog.Close

        function download() {
            tuneArchiveDownloadStatus.text = "Downloading tunes...";
            var http = new XMLHttpRequest();
            var url = "http://us-central1-mimetic-union-377520.cloudfunctions.net/float_package_tunes_via_http";
            http.open("GET", url, true);
            http.onreadystatechange = function() {
                if (http.readyState === XMLHttpRequest.DONE) {
                    if (http.status === 200) {
                        tuneArchiveDownloadStatus.text = "Download succesful.";

                        var tunes = tuneManager.parseCsv(http.responseText);
                        tuneManager.saveTuneArchive(tunes);
                        downloadedTunesModel.setTunes(tunes);
                    } else if (http.status === 0) {
                        tuneArchiveDownloadStatus.text = "Download failed: Connection error";
                    } else {
                        tuneArchiveDownloadStatus.text = "Download failed: %1 - %2".arg(http.status).arg(http.statusText);
                    }
                }

            };

            http.send();
        }

        function show() {
            open();

            var tuneArchive = tuneManager.loadTuneArchive();
            if (tuneArchive) {
                downloadedTunesModel.setTunes(tuneArchive);
                tuneArchiveDownloadStatus.text = "Tunes downloaded on %1".arg(tuneManager.getTuneArchiveDate());
            } else {
                download();
            }
        }

        onReset: {
            download();
        }

        Component.onCompleted: {
            standardButton(Dialog.Reset).text = "Refresh"
        }

        ColumnLayout {
            anchors.centerIn: parent
            width: parent.width * 0.95
            height: parent.height
            spacing: 15
            clip: true

            LText {
                id: tuneArchiveDownloadStatus
                Layout.fillWidth: true
                Layout.alignment: Qt.AlignHCenter

                font.pointSize: 11
                horizontalAlignment: Text.AlignHCenter
                wrapMode: Text.WordWrap
            }

            ListView {
                id: tuneArchiveTunesList
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.alignment: Qt.AlignHCenter
                spacing: 10
                clip: true

                model: ListModel {
                    id: downloadedTunesModel

                    function setTunes(tunes) {
                        clear();
                        for (var i in tunes) {
                            append({"tune": tunes[i]});
                        }
                    }
                }

                delegate: Button {
                    width: tuneArchiveTunesList.width
                    text: tune.name
                    onClicked: {
                        applyConfigDialog.show(tune);
                    }
                }
            }
        }
    }

    BaseDialog {
        id: applyConfigDialog

        title: "Apply Config"
        standardButtons: Dialog.Apply | Dialog.Cancel

        property var config

        property var name: config ? config.name : ""
        property var date: config && config.date ? Qt.formatDateTime(new Date(config.date)) : ""
        property var pkg: config && config.package ? "%1-%2".arg(config.package.name).arg(config.package.version) : ""
        property var description: config && config.description ? config.description : ""

        function show(cfg) {
            config = cfg;
            open();
        }

        function set(cfg) {
            config = cfg;
        }

        onApplied: {
            packageConfig.applyConfig(config);
            close();
            tuneArchiveDialog.close();
        }

        ColumnLayout {
            width: editTuneDialog.availableWidth

            LText {
                Layout.fillWidth: true
                text: "Name: %1".arg(applyConfigDialog.name);
            }

            NText {
                Layout.fillWidth: true
                font.pointSize: 11
                visible: !!applyConfigDialog.date
                text: "Backup date: %1".arg(applyConfigDialog.date)
            }

            NText {
                Layout.fillWidth: true
                font.pointSize: 11
                visible: !!applyConfigDialog.pkg
                text: "Saved by: %1".arg(applyConfigDialog.pkg)
            }

            LText {
                Layout.fillWidth: true
                visible: !!applyConfigDialog.description
                text: "Description:"
            }

            LText {
                Layout.fillWidth: true
                font.pointSize: 11
                visible: !!applyConfigDialog.description
                text: applyConfigDialog.description
            }

            LText {
                Layout.fillWidth: true
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                wrapMode: Text.WordWrap
                text: "Applying this config will OVERWRITE your current one. Would you like to apply it?"
            }
        }
    }

    Rectangle {
        id: welcomeDialog
        anchors.fill: parent
        z: 100
        visible: false

        color: "#AA000000"

        function show() {
            visible = true;
        }

        Page {
            title: "Welcome to Stig"
            anchors.centerIn: parent
            width: parent.width - 20
            padding: 10

            Material.background: Utility.getAppHexColor("normalBackground")

            header: Label {
                text: parent.title
                visible: parent.title
                font.bold: true
                padding: 12
            }

            footer: DialogButtonBox {
                standardButtons: Dialog.Yes | Dialog.No

                onAccepted: {
                    welcomeDialog.visible = false;
                    settingsDialog.show(1);
                }

                onRejected: {
                    welcomeDialog.visible = false;
                }
            }

            ColumnLayout {
                id: welcomeDialogContent
                anchors.fill: parent

                LText {
                    id: welcomeMessage
                    Layout.fillWidth: true
                    wrapMode: Text.WordWrap
                    text: "If you haven't configured your board yet, make sure to configure your motor and IMU before you try to ride the board.\n\nTo run the motor wizard, you need to disable the Stig package first. You can do so in Stig Settings > Setup, which you can access using the cog button in the top right corner of the main Stig screen.\n\nAfter the setup, you can safely verify your board balances correctly using the Handtest mode.\n\nTo configure Stig, you need to set the High and Low Voltage Thresholds in Stig Cfg > Specs according to your battery voltage. The rest of the configuration options has defaults that should provide you with a well-behaving, rideable board.\n\nHappy shredding!\n\nGo to Settings > Setup now?"
                }

                CheckBox {
                    id: welcomeShowAgain

                    checked: !preferences.showWelcomeDialog
                    text: "Don't show again"

                    onCheckedChanged: {
                        preferences.showWelcomeDialog = !checked
                    }
                }
            }
        }
    }

    ColumnLayout {
        id: root
        anchors.fill: parent
        anchors.margins: 6

        ColumnLayout {
            Layout.fillWidth: true
            spacing: 0

            property real centralMargin: 0.08 * unit

            Rectangle {
                id: batteryBar
                Layout.fillWidth: true
                Layout.preferredHeight: 0.8 * unit
                radius: 0.15 * unit

                color: Utility.getAppHexColor("lightBackground")
                // color: "transparent"
                // border.width: 2
                // border.color: Utility.getAppHexColor("lightBackground")

                property real voltage: 0
                property int value: 0

                Behavior on voltage {
                    NumberAnimation {
                        easing.type: Easing.OutExpo
                        duration: 200
                    }
                }

                // LText {
                //     id: batteryBarValue
                //     anchors.centerIn: parent
                //     z: 2

                //     font.pixelSize: parent.height * 0.7
                //     text: Math.round(parent.value) + "%"
                // }

                Rectangle {
                    id: batteryBarFill
                    width: clamp(parent.width * parent.value / 100, 2 * parent.radius, parent.width)
                    height: parent.height
                    radius: parent.radius
                    z: 1

                    color: state.charging ? "#4C7" : (parent.value < 25 ? "#C59" : Utility.getAppHexColor("lightAccent"))
                }

                LText {
                    id: batteryBarVoltageValue
                    property var below25: parent.value < 25

                    anchors.left: below25 ? undefined : parent.left
                    anchors.horizontalCenter: below25 ? parent.horizontalCenter : undefined
                    anchors.leftMargin: 0.3 * unit
                    anchors.verticalCenter: parent.verticalCenter
                    z: 2

                    // color: Utility.getAppHexColor("darkBackground")
                    color: below25 ? Utility.getAppHexColor("lightText") : Utility.getAppHexColor("darkBackground")
                    font.pixelSize: fontSizeBig
                    font.weight: Font.Medium
                    
                    text: {
                        var voltageString = "";
                        if (preferences.showBattVoltage) {
                            if (preferences.showBattVoltagePerCell) {
                                voltageString = (parent.voltage / motorConfig.batteryCells).toFixed(2);
                            } else {
                                voltageString = parent.voltage.toFixed(1);
                            }
                            voltageString += " V";
                        }
                        return voltageString;
                    }
                }

                Item {
                    id: chargingInfo
                    property var above75: parent.value > 75

                    anchors.right: above75 ? undefined : parent.right
                    anchors.horizontalCenter: above75 ? parent.horizontalCenter : undefined
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.rightMargin: 0.35 * unit
                    
                    // anchors.centerIn: parent
                    // anchors.horizontalCenterOffset: parent.width / 4
                    height: chargingInfoText.implicitHeight
                    width: chargingInfoText.implicitWidth
                    z: 2

                    property real current: 0
                    property real voltage: 0
                    visible: state.charging

                    property var textColor: above75 ? Utility.getAppHexColor("darkBackground") : Utility.getAppHexColor("lightText")

                    LText {
                        id: chargingInfoText
                        //anchors.bottom: parent.bottom
                        //anchors.horizontalCenter: parent.horizontalCenter
                        //anchors.verticalCenter: parent.verticalCenter
                        //width: parent.width / 2
                        //horizontalAlignment: Text.AlignHCenter
                        //verticalAlignment: Text.AlignVCenter
                        font.pixelSize: fontSizeSmall
                        text: toFixed1Zero(parent.current) + "A  |  " + toFixed1Zero(parent.voltage) + "V"
                        color: parent.textColor
                    }
                }
            }

            RowLayout {
                id: boardNameRow
                Layout.fillWidth: true
                Layout.leftMargin: 0.25 * unit
                Layout.rightMargin: 0.1 * unit
                Layout.topMargin: 0.06 * unit
                Layout.bottomMargin: 0.06 * unit

                Text {
                    id: boardNameText
                    Layout.fillWidth: true
                    Layout.alignment: Qt.AlignVCenter

                    property string bleName
                    property string name

                    color: bleName ? Utility.getAppHexColor("lightText") : Utility.getAppHexColor("normalText")
                    font.pixelSize: 0.45 * unit
                    clip: true
                    text: name

                    function load() {
                        bleName = VescIf.getBleName(VescIf.getLastBleAddr());
                        name = bleName ? bleName : VescIf.getLastBleAddr();
                    }

                    Component.onCompleted: load();
                }

                ToolButton {
                    id: editBoardNameButton
                    Layout.alignment: Qt.AlignVCenter
                    Layout.preferredWidth: 0.8 * unit
                    Layout.preferredHeight: 0.8 * unit
                    height: 0.8 * unit

                    iconPath: Path {
                        PathSvg {path: "M 10.59 24 L 17.63 32.42 L 6 35 L 10.59 24 M 10.59 24 L 34.39 4 L 41.49 12.42 L 17.69 32.42 M 4 42 L 46 42"}
                    }

                    onClicked: {
                        editBoardNameDialog.open();
                    }
                }

                ToolButton {
                    id: settingsButton
                    Layout.alignment: Qt.AlignVCenter
                    Layout.preferredWidth: 0.8 * unit
                    Layout.preferredHeight: 0.8 * unit
                    height: 0.8 * unit

                    iconPath: Path {
                        PathSvg {path: "M 14.25 37.81 L 10.59 39.42 A 3 3 0 0 1 6.98 38.47 22.5 22.5 0 0 1 4.32 33.87 A 3 3 0 0 1 5.30 30.27 L 8.53 27.9 A 3.6 3.6 0 0 0 8.53 22.1 L 5.30 19.73 A 3 3 0 0 1 4.32 16.13 A 22.5 22.5 0 0 1 6.98 11.53 A 3 3 0 0 1 10.59 10.58 L 14.25 12.19 A 3.6 3.6 0 0 0 19.28 9.29 L 19.79 5.31 A 3 3 0 0 1 22.35 2.66 A 22.5 22.5 0 0 1 27.65 2.66 A 3 3 0 0 1 30.28 5.31 L 30.72 9.29 A 3.6 3.6 0 0 0 35.75 12.19 L 39.41 10.58 A 3 3 0 0 1 43.02 11.53 A 22.5 22.5 0 0 1 45.67 16.13 A 3 3 0 0 1 44.7 19.73 L 41.47 22.1 A 3.6 3.6 0 0 0 41.47 27.9 L 44.7 30.27 A 3 3 0 0 1 45.68 33.87 A 22.5 22.5 0 0 1 43.02 38.47 A 3 3 0 0 1 39.41 39.42 L 35.75 37.81 A 3.6 3.6 0 0 0 30.72 40.71 L 30.28 44.69 A 3 3 0 0 1 27.65 47.34 A 22.5 22.5 0 0 1 22.35 47.34 A 3 3 0 0 1 19.72 44.69 L 19.28 40.71 A 3.6 3.6 0 0 0 14.25 37.81"}
                        PathAngleArc {centerX: 25; centerY: 25; radiusX: 6.5; radiusY: 6.5; sweepAngle: 360;}
                    }

                    onClicked: {
                        settingsDialog.show();
                    }
                }
            }

            Item {
                id: hud
                Layout.fillWidth: true
                Layout.preferredHeight: hudRight.height
                Layout.bottomMargin: parent.centralMargin

                Item {
                    id: hudLeft

                    property var barThicknessSmall: 0.14 * unit
                    property var fontSizeBars: fontSizeNormal

                    width: parent.width  / 2
                    height: parent.height

                    Item {
                        id: speedDialFrame
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.top: parent.top
                        anchors.topMargin: -width * 0.09
                        width: parent.width * 0.9
                        height: width

                        Dial {
                            id: speedDial
                            anchors.fill: parent

                            maxValue: preferences.speedDialMax
                            valueUnit: vescConfig.speedUnit
                            valueFontSize: width * 0.18
                            lineWidth: 0.25 * unit

                            property int erpm

                            Behavior on erpm {
                                NumberAnimation {
                                    easing.type: Easing.OutCirc
                                    duration: 100
                                }
                            }

                            NText {
                                id: speedDialValueErpm
                                anchors.top: parent.verticalCenter
                                anchors.horizontalCenter: parent.horizontalCenter
                                anchors.topMargin: font.pixelSize * 1.25

                                font.pixelSize: fontSizeNormal
                                text: parent.erpm
                            }

                            DText {
                                id: speedDialValueErpmLabel
                                anchors.top: speedDialValueErpm.bottom
                                anchors.horizontalCenter: parent.horizontalCenter
                                anchors.topMargin: -font.pixelSize * 0.25

                                font.pixelSize: fontSizeSmall
                                text: "erpm"
                            }

                            Text {
                                id: speedDialWheelslip
                                anchors.bottom: parent.verticalCenter
                                anchors.horizontalCenter: parent.horizontalCenter
                                anchors.bottomMargin: 0.5 * unit

                                color: Utility.getAppHexColor("red")
                                font.family: "Exan"
                                font.pixelSize: fontSizeSmall
                                opacity: 0
                                text: "WHEELSLIP"

                                states: State {
                                    name: "shown";
                                    when: state.wheelslip
                                    PropertyChanges {target: speedDialWheelslip; opacity: 1;}
                                }

                                transitions: [
                                    Transition {
                                        to: "shown"
                                        PropertyAnimation {target: speedDialWheelslip; property: "opacity"; duration: 200; easing.type: Easing.OutExpo;}
                                    },
                                    Transition {
                                        from: "shown"
                                        PropertyAnimation {target: speedDialWheelslip; property: "opacity"; duration: 1000; easing.type: Easing.OutExpo;}
                                    }
                                ]
                            }

                            Glow {
                                anchors.fill: speedDialWheelslip
                                radius: Math.round(0.09 * unit)
                                samples: 2 * radius + 1
                                opacity: 0.6 * speedDialWheelslip.opacity
                                color: Utility.getAppHexColor("red")
                                visible: state.wheelslip
                                source: speedDialWheelslip
                            }
                        }
                    }

                    Item {
                        anchors.top: speedDialFrame.bottom
                        anchors.topMargin: -speedDialFrame.width * 0.125
                        width: parent.width
                        height: 1.8 * unit

                        NText {
                            id: currentDialLabel
                            anchors.bottom: parent.bottom
                            width: parent.height

                            font.pixelSize: fontSizeSmall
                            horizontalAlignment: Text.AlignHCenter
                            text: "current"
                        }

                        Dial {
                            id: currentDial
                            anchors.bottom: currentDialLabel.top
                            anchors.bottomMargin: -0.15 * unit
                            width: parent.height
                            height: width

                            allowNegative: true
                            minValue: motorConfig.currentMin;
                            maxValue: motorConfig.currentMax;
                            valueUnit: "A"
                        }

                        NText {
                            id: dutyDialLabel
                            anchors.bottom: parent.bottom
                            anchors.right: parent.right
                            width: parent.height

                            font.pixelSize: fontSizeSmall
                            horizontalAlignment: Text.AlignHCenter
                            text: "duty"
                        }

                        Dial {
                            id: dutyDial
                            anchors.bottom: currentDialLabel.top
                            anchors.bottomMargin: -0.15 * unit
                            anchors.right: parent.right
                            width: parent.height
                            height: width

                            maxValue: 100
                            warnThresholdAbs: 80
                            valueUnit: "%"
                        }

                        Item {
                            id: consumption
                            anchors.centerIn: parent
                            width: unit
                            height: 0.8 * unit

                            readonly property real alpha: 0.05;
                            property real value: 0;

                            LText {
                                width: parent.width

                                font.pixelSize: hudLeft.fontSizeBars
                                horizontalAlignment: Text.AlignHCenter
                                text: (toFixed1Zero(parent.value))
                            }

                            DText {
                                width: parent.width
                                anchors.bottom: parent.bottom

                                font.pixelSize: fontSizeSmall
                                horizontalAlignment: Text.AlignHCenter
                                text: "Wh/%1".arg(vescConfig.distanceUnit)
                            }

                            function add(v) {
                                value = (1.0 - alpha) * value + alpha * v;
                            }
                        }
                    }

                    Item {
                        id: batteryCurrent

                        property var value: 0
                        property var minValue: preferences.battCurrentLog ? -Math.log(-motorConfig.inCurrentMin + 1) : motorConfig.inCurrentMin
                        property var maxValue: preferences.battCurrentLog ? Math.log(motorConfig.inCurrentMax + 1) : motorConfig.inCurrentMax

                        property var positiveWidth: value > 0 ? (preferences.battCurrentLog ? Math.log(value + 1) : value) / maxValue : 0
                        property var negativeWidth: value < 0 ? (preferences.battCurrentLog ? -Math.log(-value + 1) : value) / minValue : 0

                        Behavior on value {
                            NumberAnimation {
                                easing.type: Easing.OutCirc
                                duration: 100
                            }
                        }

                        anchors.bottom: parent.bottom
                        width: parent.width

                        NText {
                            id: batteryCurrentLabel
                            anchors.bottom: parent.bottom
                            anchors.horizontalCenter: parent.horizontalCenter

                            font.pixelSize: fontSizeSmall
                            text: "battery current"
                        }

                        Rectangle {
                            id: batteryCurrentBar
                            anchors.bottom: batteryCurrentLabel.top
                            anchors.bottomMargin: 0.06 * unit
                            anchors.horizontalCenter: parent.horizontalCenter
                            width: sideWidth * 2
                            height: hudLeft.barThicknessSmall

                            property var sideWidth: 1.5 * unit

                            color: Utility.getAppHexColor("lightBackground")

                            Rectangle {
                                anchors.bottom: parent.bottom
                                anchors.horizontalCenter: parent.horizontalCenter
                                width: 1
                                height: hudLeft.barThicknessSmall * 1.2
                                z: 2

                                color: Utility.getAppHexColor("lightText")
                            }

                            Rectangle {
                                anchors.left: parent.horizontalCenter
                                width: batteryCurrent.positiveWidth * parent.sideWidth
                                height: hudLeft.barThicknessSmall
                                z: 1

                                color: Utility.getAppHexColor("lightAccent")
                            }

                            Rectangle {
                                anchors.right: parent.horizontalCenter
                                width: batteryCurrent.negativeWidth * parent.sideWidth
                                height: hudLeft.barThicknessSmall
                                z: 1

                                color: Utility.getAppHexColor("green")
                            }
                        }

                        LText {
                            id: batteryCurrentValue
                            anchors.bottom: batteryCurrentBar.top
                            anchors.bottomMargin: 0.06 * unit
                            anchors.horizontalCenter: parent.horizontalCenter

                            font.pixelSize: hudLeft.fontSizeBars
                            text: toFixed1Zero(parent.value)
                        }

                        DText {
                            id: batteryCurrentValueUnit
                            anchors.left: batteryCurrentValue.right
                            anchors.baseline: batteryCurrentValue.baseline
                            anchors.leftMargin: font.pixelSize * 0.1

                            font.pixelSize: fontSizeSmall
                            text: "A"
                        }
                    }
                }

                Item {
                    id: hudRight

                    anchors.right: parent.right
                    width: parent.width / 2
                    height: hudRightTop.height + pitch.height + pitch.anchors.topMargin

                    Item {
                        id: hudRightTop
                        width: parent.width
                        height: width * 0.4

                        property real sidePadding: (width - 2 * height) / 4

                        Item {
                            id: footpad
                            anchors.left: parent.left
                            anchors.leftMargin: parent.sidePadding
                            width: parent.height
                            height: width

                            property real leftVoltage: preferences.swapAdcs ? state.adc2Voltage : state.adc1Voltage
                            property real rightVoltage: preferences.swapAdcs ? state.adc1Voltage : state.adc2Voltage

                            property real canvasWidth: width * 0.85
                            property real scale: canvasWidth / footpadPath.width

                            Path {
                                id: footpadPath

                                property int width: 100
                                property int height: 80
                                property real aspect: height / width
                                scale: Qt.size(footpad.scale, footpad.scale)

                                PathSvg {path: "M 62 2 L 38 2 A 36 15 180 0 0 2 17 L 2 78 L 98 78 L 98 17 A 36 15 0 0 0 62 2 M 50 11 L 50 69"}
                            }

                            Path {
                                id: footpadLeftSensorPath
                                scale: Qt.size(footpad.scale, footpad.scale)
                                PathSvg {path: "M 44 8 L 44 72 L 8 72 L 8 18.4 A 30 10.4 180 0 1 38 8 L 44 8"}
                            }

                            Path {
                                id: footpadRightSensorPath
                                scale: Qt.size(footpad.scale, footpad.scale)
                                PathSvg {path: "M 56 72 L 92 72 L 92 18.4 A 30 10.4 0 0 0 62 8L 56 8 L 56 72"}
                            }

                            component FpCanvas : Canvas {
                                anchors.horizontalCenter: parent.horizontalCenter
                                anchors.bottom: footpadLeftAdc.top
                                anchors.bottomMargin: footpadLeftAdc.font.pixelSize * 0.32
                                width: parent.canvasWidth
                                height: width * footpadPath.aspect
                                contextType: "2d"
                            }

                            component SensorCanvas : FpCanvas {
                                property Path path
                                property bool on: false
                                opacity: on ? 1 : 0

                                onOnChanged: requestPaint();

                                Behavior on opacity {
                                    NumberAnimation {
                                        easing.type: Easing.OutCubic
                                        duration: 60
                                    }
                                }

                                onPaint: {
                                    var context = getContext("2d");
                                    context.reset();
                                    context.fillStyle = Utility.getAppHexColor("lightAccent")
                                    context.path = path
                                    context.fill()
                                }
                            }

                            FpCanvas {
                                id: footpadCanvas
                                onPaint: {
                                    var context = getContext("2d");
                                    context.reset();
                                    context.strokeStyle = Utility.getAppHexColor("lightText")
                                    context.lineWidth = 2
                                    context.path = footpadPath
                                    context.stroke()
                                }
                            }

                            SensorCanvas {
                                id: leftSensor
                                path: footpadLeftSensorPath
                            }

                            Glow {
                                anchors.fill: leftSensor
                                radius: Math.round(0.08 * unit)
                                samples: radius * 2 + 1
                                spread: 0.6
                                opacity: leftSensor.opacity * 0.4
                                color: Utility.getAppHexColor("lightAccent")
                                source: leftSensor
                            }

                            SensorCanvas {
                                id: rightSensor
                                path: footpadRightSensorPath
                            }

                            Glow {
                                anchors.fill: rightSensor
                                radius: Math.round(0.08 * unit)
                                samples: radius * 2 + 1
                                spread: 0.6
                                opacity: rightSensor.opacity * 0.4
                                color: Utility.getAppHexColor("lightAccent")
                                source: rightSensor
                            }

                            NText {
                                id: footpadLeftAdc
                                anchors.bottom: parent.bottom
                                anchors.horizontalCenter: footpadCanvas.horizontalCenter
                                anchors.horizontalCenterOffset: -footpadCanvas.width / 4

                                font.pixelSize: fontSizeSmall
                                text: "%1V".arg(parent.leftVoltage.toFixed(1))
                            }

                            NText {
                                id: footpadRightAdc
                                anchors.bottom: parent.bottom
                                anchors.horizontalCenter: footpadCanvas.horizontalCenter
                                anchors.horizontalCenterOffset: footpadCanvas.width / 4

                                font.pixelSize: fontSizeSmall
                                text: "%1V".arg(parent.rightVoltage.toFixed(1))
                            }
                        }

                        Item {
                            id: roll
                            anchors.right: parent.right
                            anchors.rightMargin: parent.sidePadding
                            width: parent.height
                            height: width

                            property real value
                            onValueChanged: rollCanvas.requestPaint();

                            Behavior on value {
                                NumberAnimation {
                                    easing.type: Easing.OutCirc
                                    duration: 100
                                }
                            }

                            Canvas {
                                id: rollCanvas
                                anchors.horizontalCenter: parent.horizontalCenter
                                width: height
                                height: parent.width - rollText.font.pixelSize * 1.1
                                contextType: "2d"

                                property real scale: width * 0.95 / rollPath.width

                                Path {
                                    id: rollPath

                                    property int width: 100
                                    property int height: 88
                                    scale: Qt.size(rollCanvas.scale, rollCanvas.scale)

                                    PathSvg {path: "M 45.01 -9 L -45.01 -9 A 3 3 0 0 0 -48 -5.75 L -47 6.25 A 3 3 0 0 0 -44.01 9 L 44.01 9 A 3 3 0 0 0 47 6.25 L 48 -5.75 A 3 3 0 0 0 45.01 -9 M -33.54 9 L -33.01 15 A 38.15 15.07 95.62 0 0 -23.54 37.5 A 35 17.39 0 0 0 23.54 37.5 A 38.15 15.07 -95.62 0 0 33.01 15 L 33.54 9 M 33.54 -9 L 33.01 -15 A 38.15 15.07 95.62 0 0 23.54 -37.5 A 35 17.39 0 0 0 -23.54 -37.5 A 38.15 15.07 84.38 0 0 -33.01 -15 L -33.54 -9 M -36 -3 L 36 -3"}
                                }

                                onPaint: {
                                    var context = getContext("2d");
                                    context.reset();
                                    context.translate(width / 2, height / 2);
                                    context.rotate(Math.PI / 180 * parent.value);
                                    context.path = rollPath;
                                    context.lineWidth = 2;
                                    context.strokeStyle = Utility.getAppHexColor("lightText")
                                    context.stroke();
                                }
                            }

                            NText {
                                id: rollText
                                anchors.bottom: parent.bottom
                                anchors.horizontalCenter: parent.horizontalCenter

                                font.pixelSize: fontSizeSmall
                                text: "roll: %1°".arg(toFixed1Zero(parent.value))
                            }
                        }
                    }

                    Item {
                        id: pitch
                        anchors.top: hudRightTop.bottom
                        anchors.topMargin: 0.15 * unit
                        width: parent.width
                        height: width * 0.83

                        property real textWidth: 1.4 * unit

                        property real pitchValue
                        property real balancePitchValue
                        property real setpointValue

                        property real runtimeOpacity: 0

                        states: State {
                            name: "running";
                            when: state.pkgState === state.s_Running
                            PropertyChanges {target: pitch; runtimeOpacity: 1;}
                        }

                        transitions: [
                            Transition {
                                to: "running"
                                PropertyAnimation {target: pitch; property: "runtimeOpacity"; duration: 200; easing.type: Easing.OutExpo;}
                            },
                            Transition {
                                from: "running"
                                PropertyAnimation {target: pitch; property: "runtimeOpacity"; duration: 2000; easing.type: Easing.OutExpo;}
                            }
                        ]

                        Behavior on pitchValue {
                            NumberAnimation {
                                easing.type: Easing.OutCirc
                                duration: 100
                            }
                        }

                        Behavior on balancePitchValue {
                            NumberAnimation {
                                easing.type: Easing.OutCirc
                                duration: 100
                            }
                        }

                        Behavior on setpointValue {
                            NumberAnimation {
                                easing.type: Easing.OutCirc
                                duration: 100
                            }
                        }

                        onPitchValueChanged: pitchCanvas.requestPaint()
                        onBalancePitchValueChanged: pitchCanvas.requestPaint()
                        onSetpointValueChanged: pitchCanvas.requestPaint()

                        Canvas {
                            id: pitchCanvas
                            anchors.centerIn: parent
                            width: height
                            height: parent.height
                            contextType: "2d"

                            property real scale: width * 0.88 / pitchBoardPath.width

                            Path {
                                id: pitchBoardPath

                                property int width: 200
                                property int height: 80
                                scale: Qt.size(pitchCanvas.scale, pitchCanvas.scale)

                                PathSvg {path: "M -97.36 -3.15 L -91.65 4.16 A 10 10 0 0 0 -83.77 8 L 83.77 8 A 10 10 0 0 0 91.65 4.16 L 97.36 -3.15 A 3 3 0 0 0 95 -8 L -95 -8 A 3 3 0 0 0 -97.36 -3.15"}
                            }

                            Path {
                                id: pitchWheelPath
                                scale: Qt.size(pitchCanvas.scale, pitchCanvas.scale)

                                PathSvg {path: "M 35.1 8 A 36 36 0 0 1 -35.1 8 M -35.1 -8 A 36 36 0 0 1 35.1 -8 M 18.33 8 A 20 20 0 0 1 -18.33 8 M -18.33 -8 A 20 20 0 0 1 18.33 -8"}
                            }

                            Path {
                                id: pitchSetpointPath
                                scale: Qt.size(pitchCanvas.scale, pitchCanvas.scale)
                                PathSvg {path: "M -86 0 L -43 0 M 43 0 L 86 0"}
                            }

                            function paintPath(context, paths, rotation, color) {
                                context.save();
                                context.translate(width / 2, height / 2);
                                context.rotate(Math.PI / 180 * rotation);
                                context.lineWidth = 2;
                                context.strokeStyle = Utility.getAppHexColor(color);
                                for (let path of paths) {
                                    context.path = path;
                                    context.stroke();
                                }
                                context.restore();
                            }

                            onPaint: {
                                var context = getContext("2d");
                                context.reset()
                                paintPath(context, [pitchBoardPath], parent.balancePitchValue, "lightAccent");
                                paintPath(context, [pitchBoardPath, pitchWheelPath], parent.pitchValue, "lightText");
                                context.globalAlpha = parent.runtimeOpacity;
                                paintPath(context, [pitchSetpointPath], parent.setpointValue, "orange");
                            }
                        }

                        Text {
                            id: pitchPushbackText
                            anchors.top: parent.top
                            anchors.left: parent.left
                            anchors.leftMargin: 0.17 * unit

                            property string satText: state.setpointAdjustmentTypeString

                            onSatTextChanged: {
                                if (satText) {
                                    text = satText;
                                    if (state.setpointAdjustmentClass == state.sac_Error) {
                                        color = Utility.getAppHexColor("red");
                                    } else if (state.setpointAdjustmentClass == state.sac_Warning) {
                                        color = Utility.getAppHexColor("orange");
                                    } else {
                                        color = Utility.getAppHexColor("normalText");
                                    }
                                }
                            }

                            font.pixelSize: fontSizeSmall
                            opacity: 0

                            states: State {
                                name: "shown";
                                when: pitchPushbackText.satText != "" && state.pkgState === state.s_Running
                                PropertyChanges {target: pitchPushbackText; opacity: 1;}
                            }

                            transitions: [
                                Transition {
                                    to: "shown"
                                    PropertyAnimation {target: pitchPushbackText; property: "opacity"; duration: 200; easing.type: Easing.OutExpo;}
                                },
                                Transition {
                                    from: "shown"
                                    PropertyAnimation {target: pitchPushbackText; property: "opacity"; duration: 2000; easing.type: Easing.OutExpo;}
                                }
                            ]
                        }

                        NText {
                            id: pitchPitchLabel
                            anchors.bottom: parent.bottom
                            anchors.left: parent.left
                            width: parent.textWidth

                            font.pixelSize: fontSizeSmall
                            horizontalAlignment: Text.AlignHCenter
                            text: "pitch"
                        }

                        LText {
                            id: pitchPitchValue
                            anchors.bottom: pitchPitchLabel.top
                            width: parent.textWidth

                            font.pixelSize: fontSizeNormal
                            horizontalAlignment: Text.AlignHCenter
                            text: "%1°".arg(toFixed1Zero(parent.pitchValue))
                        }

                        NText {
                            id: pitchBalancePitchLabel
                            anchors.bottom: parent.bottom
                            anchors.right: parent.right
                            width: parent.textWidth

                            font.pixelSize: fontSizeSmall
                            horizontalAlignment: Text.AlignHCenter
                            text: "balance"
                        }

                        Text {
                            id: pitchBalancePitchValue
                            anchors.bottom: pitchBalancePitchLabel.top
                            anchors.right: parent.right
                            width: parent.textWidth

                            color: Utility.getAppHexColor("lightAccent")
                            font.pixelSize: fontSizeNormal
                            horizontalAlignment: Text.AlignHCenter
                            text: "%1°".arg(toFixed1Zero(parent.balancePitchValue))
                        }

                        NText {
                            id: pitchSetpointLabel
                            anchors.top: parent.top
                            anchors.right: parent.right
                            width: parent.textWidth

                            font.pixelSize: fontSizeSmall
                            horizontalAlignment: Text.AlignHCenter
                            opacity: parent.runtimeOpacity
                            text: "setpoint"
                        }

                        Text {
                            id: pitchSetpointValue
                            anchors.top: pitchSetpointLabel.bottom
                            anchors.right: parent.right
                            width: parent.textWidth

                            color: Utility.getAppHexColor("orange")
                            font.pixelSize: fontSizeNormal
                            horizontalAlignment: Text.AlignHCenter
                            opacity: parent.runtimeOpacity
                            text: "%1°".arg(toFixed1Zero(parent.setpointValue))
                        }
                    }
                }
            }

            Item {
                id: middleRow

                property var verticalValueItemWidth: 1.7 * unit
                property var verticalValueItemHeight: 0.8 * unit

                Layout.fillWidth: true
                Layout.preferredHeight: 1.2 * unit
                Layout.topMargin: parent.centralMargin

                component VerticalValue : Item {
                    height: parent.verticalValueItemHeight
                    width: parent.verticalValueItemWidth
                    anchors.verticalCenter: parent.verticalCenter

                    property string labelText
                    property string unit: ""
                    property int decimals: 1
                    property real value
                    property real warningThreshold: 0

                    property string format: "%1" + unit

                    NText {
                        anchors.bottom: parent.bottom
                        width: parent.width
                        font.pixelSize: fontSizeSmall
                        horizontalAlignment: Text.AlignHCenter
                        text: labelText
                    }

                    Text {
                        width: parent.width
                        color: !!warningThreshold && value > warningThreshold ? Utility.getAppHexColor("red") : Utility.getAppHexColor("lightText")
                        font.pixelSize: fontSizeNormal
                        horizontalAlignment: Text.AlignHCenter
                        text: format.arg(value.toFixed(decimals))
                    }
                }

                VerticalValue {
                    id: motorTemp
                    labelText: "motor"
                    unit: "°C"
                    warningThreshold: motorConfig.tempMotorStart - preferences.tempWarningOffset
                }

                VerticalValue {
                    id: controllerTemp
                    anchors.left: motorTemp.right
                    labelText: "controller"
                    unit: "°C"
                    warningThreshold: motorConfig.tempFetStart - preferences.tempWarningOffset
                }

                Item {
                    id: statusText
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: parent.width - 4 * parent.verticalValueItemWidth
                    height: parent.height * 0.83

                    property bool red: state.pkgStateIsError
                    property bool blue: state.pkgState == state.s_Running

                    states: [
                        State {
                            name: "specialMode"
                            when: state.pkgMode != state.m_Normal
                            AnchorChanges {target: statusTextState; anchors.top: parent.top; anchors.verticalCenter: undefined;}
                        }
                    ]

                    // LText {
                    //     id: statusTextState
                    //     anchors.verticalCenter: parent.verticalCenter
                    //     width: parent.width
                    //     font.pixelSize: (state.pkgStateString.length >= 10 ? 0.42 : 0.55) * unit
                    //     font.family: "Exan"
                    //     horizontalAlignment: Text.AlignHCenter
                    //     verticalAlignment: Text.AlignVCenter
                    //     text: state.pkgStateString
                    // }

                    Text {
                        id: statusTextState
                        anchors.verticalCenter: parent.verticalCenter
                        width: parent.width
                        font.pixelSize: 0.4 * unit
                        font.family: "Fira Code"
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        text: state.pkgStateString
                        font.bold: true
                        color: {
                            if (parent.red) {
                                return "#C59";
                            } else if (parent.blue) {
                                return Utility.getAppHexColor("lightAccent");
                            } else {
                                return Utility.getAppHexColor("lightText");
                            }
                        }
                    }

                    // Glow {
                    //     anchors.fill: statusTextState
                    //     radius: Math.round(0.12 * unit)
                    //     samples: radius * 2 + 1
                    //     spread: parent.red ? 0.6 : 0.5
                    //     opacity: parent.red || parent.blue ? 0.8 : 0.3
                    //     color: {
                    //         if (parent.red) {
                    //             return Utility.getAppHexColor("red");
                    //         } else if (parent.blue) {
                    //             return Utility.getAppHexColor("lightAccent");
                    //         } else {
                    //             return Utility.getAppHexColor("lightText");
                    //         }
                    //     }
                    //     source: statusTextState
                    // }

                    Text {
                        id: statusTextMode
                        anchors.bottom: parent.bottom
                        width: parent.width
                        color: Utility.getAppHexColor("lightText")
                        font.pixelSize: fontSizeSmall
                        font.family: "Exan"
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        visible: state.pkgMode != state.m_Normal
                        text: state.pkgModeString

                    }

                    Glow {
                        anchors.fill: statusTextMode
                        radius: Math.round(0.12 * unit)
                        samples: radius * 2 + 1
                        opacity: 0.3
                        color: statusTextMode.color
                        visible: state.pkgMode != state.m_Normal
                        source: statusTextMode
                    }
                }

                VerticalValue {
                    id: odometer
                    anchors.right: parent.right
                    labelText: "life"
                    decimals: 0
                    unit: vescConfig.distanceUnit
                }

                VerticalValue {
                    id: tachometer
                    anchors.right: odometer.left
                    labelText: "trip"
                    unit: vescConfig.distanceUnit
                }
            }

            Text {
                Layout.fillWidth: true
                property string fault

                color: Utility.getAppHexColor("red")
                font.pixelSize: fontSizeNormal
                horizontalAlignment: Text.AlignHCenter
                visible: state.isError && !state.pkgStateIsError
                text: state.errorText
            }
        }

        TabBar {
            Layout.fillWidth: true
            clip: true
            currentIndex: 2

            TabButton {text: "Tunes"}

            TabButton {text: "Control"}

            TabButton {
                id: tabBarDebugButton
                text: "Data"

                property bool isError: state.isError
                property bool glowVisible: false

                onIsErrorChanged: {
                    glowVisible = isError && !checked
                }

                onToggled: {
                    glowVisible = false
                }

                Glow {
                    anchors.fill: tabBarDebugButton.contentItem
                    radius: Math.round(0.12 * unit)
                    samples: radius * 2 + 1
                    spread: 0.8
                    opacity: 0.8
                    visible: parent.glowVisible
                    color: Utility.getAppHexColor("red")
                    source: tabBarDebugButton.contentItem
                }
            }

            background: Rectangle {
                color: Utility.getAppHexColor("lightBackground");
            }

            onCurrentIndexChanged: {
                bottomStackLayout.currentIndex = currentIndex;
            }
        }

        StackLayout {
            id: bottomStackLayout
            Layout.fillWidth: true
            Layout.fillHeight: true
            clip: true
            currentIndex: 2

            Item {
                id: tunesPage
                Layout.fillWidth: true
                Layout.fillHeight: true

                GridLayout {
                    property int spacing: 0.6 * unit
                    anchors.fill: parent
                    anchors.topMargin: spacing
                    anchors.leftMargin: spacing
                    anchors.rightMargin: spacing
                    anchors.bottomMargin: spacing - bottomLine.height - root.spacing
                    rowSpacing: spacing
                    columnSpacing: spacing
                    columns: (preferences.tuneSlotCount === 2 && height > width * 0.6) ? 1 : 2

                    Repeater {
                        model: preferences.tuneSlotCount

                        Button {
                            id: button
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            Layout.minimumHeight: buttonItemHeight + 2 * buttonItemMargin
                            Layout.columnSpan: (slot === preferences.tuneSlotCount && (slot % 2) === 1) ? 2 : 1

                            property int slot: index + 1

                            property var tuneName: tuneManager.tuneNames[slot]

                            property real buttonItemHeight: unit
                            property real buttonItemMargin: 0.15 * unit

                            padding: 0
                            leftInset: 0
                            rightInset: 0
                            topInset: 0
                            bottomInset: 0

                            onPressAndHold: {
                                editTuneDialog.show(slot, tuneName);
                            }

                            onClicked: {
                                if (tuneName) {
                                    packageConfig.applyConfig(tuneManager.loadTune(slot));
                                }
                            }

                            contentItem: Item {
                                anchors.fill: parent
                                anchors.margins: parent.buttonItemMargin
                                clip: true

                                Item {
                                    anchors.centerIn: parent
                                    width: parent.width
                                    height: button.buttonItemHeight

                                    Text {
                                        id: tuneButtonText
                                        width: parent.width
                                        anchors.centerIn: tuneName ? parent : undefined
                                        anchors.top: tuneName ? undefined : parent.top

                                        color: tuneName ? Utility.getAppHexColor("lightText") : Utility.getAppHexColor("disabledText")
                                        font.pixelSize: 0.5 * unit
                                        horizontalAlignment: Text.AlignHCenter
                                        wrapMode: Text.WordWrap
                                        text: tuneName || "empty slot"
                                    }

                                    DText {
                                        id: tuneButtonHelpText
                                        width: parent.width
                                        anchors.bottom: parent.bottom

                                        font.pixelSize: fontSizeSuperSmall
                                        visible: !tuneName
                                        horizontalAlignment: Text.AlignHCenter
                                        text: "press and hold to set"
                                    }
                                }
                            }

                            background: Rectangle {
                                id: buttonBg

                                border.color: tuneName ? Utility.getAppHexColor("lightText") : Utility.getAppHexColor("disabledText")
                                border.width: 2
                                radius: 3

                                color: Utility.getAppHexColor("normalBackground")

                                states: [
                                    State {
                                        name: "change"
                                        when: button.pressed
                                        PropertyChanges {target: buttonBg; color: Utility.getAppHexColor("lightestBackground");}
                                    }
                                ]

                                transitions: Transition {
                                    ColorAnimation {property: "color"; duration: 200; easing.type: Easing.InOutCirc;}
                                }
                            }
                        }
                    }
                }

                FloatingToolButton {
                    id: downloadTunesButton
                    anchors.right: parent.right
                    anchors.top: parent.top

                    iconPath: Path {
                        PathSvg {path: "M 43 39 L 16 39 M 38.5 32 L 11.5 32 M 34 25 L 7 25 M 25 2 L 25 18 L 33 11 M 25 18 L 17 11"}
                    }

                    onClicked: {
                        tuneArchiveDialog.show();
                    }
                }
            }

            ScrollView {
                Layout.fillHeight: true
                Layout.fillWidth: true
                contentWidth: availableWidth
                clip: true

                Column {
                    anchors.fill: parent
                    anchors.leftMargin: 0.15 * unit
                    anchors.rightMargin: 0.15 * unit
                    spacing: 0.05 * unit

                    Item {
                        width: parent.width
                        height: 0.1 * unit
                    }

                    LText {
                        anchors.horizontalCenter: parent.horizontalCenter
                        visible: lights.enabled

                        font.pixelSize: fontSizeBig
                        text: "Lights"
                    }

                    RowLayout {
                        width: parent.width
                        visible: lights.enabled

                        Button {
                            Layout.preferredWidth: 3 * unit
                            Layout.alignment: Qt.AlignHCenter
                            text: lights.on ? "Lights Off" : "Lights On"
                            onClicked: {
                                commands.sendLightsControl(!lights.on);
                            }
                        }

                        Button {
                            id : headlightsButton
                            Layout.minimumWidth: 3 * unit
                            Layout.alignment: Qt.AlignHCenter
                            text: lights.headlightsOn ? "Headlights Off" : "Headlights On"
                            onClicked: {
                                commands.sendLightsControl(undefined, !lights.headlightsOn);
                            }
                        }
                    }

                    LText {
                        id: movementControlsHeader
                        anchors.horizontalCenter: parent.horizontalCenter

                        font.pixelSize: fontSizeBig
                        text: "Move"
                    }

                    Slider {
                        id: moveSlider
                        width: parent.width * 0.9
                        anchors.horizontalCenter: parent.horizontalCenter

                        from: -1
                        to: 1
                        value: 0
                    }

                    Item {
                        width: parent.width
                        implicitHeight: tiltEnabled.implicitHeight
                        anchors.horizontalCenter: parent.horizontalCenter

                        LText {
                            id: tiltControlsHeader
                            anchors.centerIn: parent

                            font.pixelSize: fontSizeBig
                            text: "Tilt"
                        }

                        CheckBox {
                            id: tiltEnabled
                            anchors.left: tiltControlsHeader.right
                            anchors.leftMargin: 0.2 * unit

                            checked: false
                            font.pixelSize: fontSizeNormal
                            text: "enable"

                            onClicked: {
                                if (checked) {
                                    packageConfig.setInputTiltRemoteType(1);
                                }
                            }
                        }
                    }

                    Slider {
                        id: tiltSlider
                        width: parent.width * 0.9
                        anchors.horizontalCenter: parent.horizontalCenter

                        enabled: tiltEnabled.checked
                        from: -1
                        to: 1
                        value: 0
                    }

                    Item {
                        width: parent.width
                        height: 0.1 * unit
                    }
                }
            }

            ScrollView {
                Layout.fillWidth: true
                Layout.fillHeight: true
                contentWidth: availableWidth
                clip: true

                Column {
                    id: debugColumn
                    anchors.fill: parent
                    anchors.leftMargin: 0.15 * unit
                    anchors.rightMargin: 0.15 * unit
                    spacing: 5

                    property real itemWidth: width * 0.5
                    property real labelWidth: itemWidth * 0.7

                    component Value : Item {
                        implicitHeight: label.implicitHeight
                        implicitWidth: debugColumn.itemWidth

                        property string label
                        property string value
                        property string unit: ""

                        LText {
                            id: label
                            width: debugColumn.labelWidth
                            anchors.left: parent.left
                            anchors.top: parent.top
                            font.pixelSize: fontSizeNormal
                            text: "%1:".arg(parent.label)
                        }

                        LText {
                            anchors.left: label.right
                            anchors.top: parent.top
                            font.pixelSize: fontSizeNormal
                            text: parent.value + parent.unit
                        }
                    }

                    component RealValue : Value {
                        property real rValue
                        property int precision: 2

                        value: rValue.toFixed(precision)

                        onRValueChanged: {
                            value = rValue.toFixed(precision);
                        }
                    }

                    Item {
                        width: parent.width
                        height: 0.1 * unit
                    }

                    LText {
                        width: parent.width

                        font.pixelSize: fontSizeBig
                        horizontalAlignment: Text.AlignHCenter
                        visible: state.isError
                        text: "Error"
                    }

                    LText {
                        width: parent.width

                        font.pixelSize: fontSizeNormal
                        horizontalAlignment: Text.AlignHCenter
                        visible: state.isError
                        wrapMode: Text.WordWrap
                        text: state.errorDescription
                    }

                    // Rectangle {
                    //     width: parent.width
                    //     height: 2.5 * unit
                    //     //color: "#C59"
                    //     color: "transparent"
                    //     border.width: 2
                    //     border.color: "#C59"
                    //     radius: 0.15 * unit
                    //     Rectangle {
                    //         anchors.fill: errorRect
                    //         anchors.margins: -0.1 * unit
                    //         color: Utility.getAppHexColor("normalBackground")
                    //     }
                    //     Text {
                    //         id: errorRect
                    //         //horizontalAlignment: Text.AlignHCenter
                    //         anchors.verticalCenter: parent.top
                    //         //anchors.left: parent.left
                    //         anchors.horizontalCenter: parent.horizontalCenter
                    //         anchors.leftMargin: 0.4 * unit
                    //         text: "Error"
                    //         color: "#C59"
                    //         //width: parent.width
                    //         //height: parent.height
                    //         font.pixelSize: fontSizeBig
                    //         font.bold: true
                    //     }
                        
                    //     LText {
                    //         //width: parent.width
                    //         anchors.fill: parent
                    //         anchors.margins: 0.4 * unit

                    //         font.pixelSize: fontSizeNormal
                    //         //horizontalAlignment: Text.AlignHCenter
                    //         //visible: state.isError
                    //         wrapMode: Text.WordWrap
                    //         text: state.errorDescription
                    //     }
                    // }

                    Value {id: debugStopReason; label: "Stop Condition"; value: state.stopConditionString}
                    Value {id: debugLastBeepReason; label: "Last Beep Reason"; value: state.beepReasonString}

                    Item {
                        width: parent.width
                        height: 0.1 * unit
                    }

                    component TextMono: Text {
                        property bool enabled: true
                        
                        font.pixelSize: unit * 0.3
                        // font.family: "Fira Code"
                        font.family: "DejaVu Sans Mono"
                        font.weight: Font.Medium
                        color: enabled ? Utility.getAppHexColor("lightText") : Utility.getAppHexColor("disabledText")
                    }

                    component Spacer: Item {
                        implicitHeight: unit * 0.42 * 0.5
                        implicitWidth: parent.width
                    }

                    component TextDebug: Item {
                        property string label
                        property real value
                        property string unitString

                        implicitHeight: unit * 0.3
                        implicitWidth: parent.width

                        TextMono {
                            id: textDebugLabel
                            anchors.top: parent.top
                            anchors.left: parent.left
                            text: parent.label
                        }
                        TextMono {
                            id: textDebugColumn
                            anchors.top: parent.top
                            anchors.left: textDebugLabel.right
                            text: ":"
                            enabled: false
                        }
                        TextMono {
                            id: textDebugValue
                            anchors.top: parent.top
                            anchors.right: textDebugUnit.left
                            text: value
                        }
                        TextMono {
                            id: textDebugUnit
                            anchors.top: parent.top
                            anchors.right: parent.right
                            text: unitString
                            enabled: false
                        }
                    }

                    component FactorBar: Item {
                        property string label
                        property real rValue

                        implicitHeight: factorBarText.implicitHeight + bar.height + 0.1 * unit
                        implicitWidth: parent.width

                        TextDebug {
                            id: factorBarText
                            anchors.top: parent.top
                            anchors.left: parent.left

                            label: parent.label
                            value: Math.round(100 * parent.rValue)
                            unitString: " %"
                        }

                        Rectangle {
                            id: bar
                            width: parent.implicitWidth
                            height: 0.12 * unit
                            anchors.top: factorBarText.bottom
                            anchors.topMargin: 0.1 * unit
                            color: Utility.getAppHexColor("lightBackground")

                            Rectangle {
                                anchors.left: parent.left
                                width: parent.width * parent.parent.rValue
                                height: parent.height
                                z: 1
                                color: Utility.getAppHexColor("lightAccent")
                            }

                            Rectangle {
                                anchors.bottom: parent.bottom
                                anchors.left: parent.left
                                width: 2
                                height: parent.height
                                z: 2
                                color: Utility.getAppHexColor("lightText")
                            }
                        }
                    }

                    component ValueBar: Item {
                        property string label
                        property real rValue
                        property real softLimit: 4
                        property string unitString

                        implicitHeight: valueBarText.implicitHeight + bar.height + 0.1 * unit
                        implicitWidth: parent.width

                        TextDebug {
                            id: valueBarText
                            anchors.top: parent.top
                            anchors.left: parent.left

                            label: parent.label
                            // value: toFixed1Zero(parent.rValue)
                            value: parent.rValue.toFixed(2)
                            unitString: parent.unitString
                        }
                        
                        Rectangle {
                            id: bar
                            width: parent.implicitWidth
                            height: 0.12 * unit
                            anchors.top: valueBarText.bottom
                            anchors.topMargin: 0.1 * unit
                            color: Utility.getAppHexColor("lightBackground")

                            property var valueRemapped: Math.tanh(Math.abs(parent.rValue) / parent.softLimit)
                            property var positiveValue: parent.rValue > 0 ? valueRemapped : 0
                            property var negativeValue: parent.rValue < 0 ? valueRemapped : 0

                            Rectangle {
                                anchors.left: parent.horizontalCenter
                                width: parent.width * 0.5 * parent.positiveValue
                                height: parent.height
                                z: 1
                                color: Utility.getAppHexColor("lightAccent")
                            }

                            Rectangle {
                                anchors.right: parent.horizontalCenter
                                width: parent.width * 0.5 * parent.negativeValue
                                height: parent.height
                                z: 1
                                color: "#C59"
                            }
                            
                            Rectangle {
                                anchors.bottom: parent.bottom
                                anchors.horizontalCenter: parent.horizontalCenter
                                width: 2
                                height: parent.height
                                z: 2
                                color: Utility.getAppHexColor("lightText")
                            }
                        }
                    }

                    Row {
                        width: parent.width
                        spacing: unit * 0.4

                        Column {
                            width: (parent.width - parent.spacing) / 2
                            spacing: unit * 0.18
                            clip: true

                            ValueBar {id: debugPidProportional; label: "P Term"; unitString: " Nm"; softLimit: 20}
                            ValueBar {id: debugPidIntegral; label: "I Term"; unitString: " Nm"; softLimit: 20}
                            ValueBar {id: debugPidDerivative; label: "D Term"; unitString: " Nm"; softLimit: 20}
                            ValueBar {id: debugPidFeedForward; label: "F Term"; unitString: " Nm"; softLimit: 20}

                            Spacer {}
                            FactorBar {id: debugTractionMultiplier; label: "Traction Mult.";}
                            FactorBar {id: debugTractionConfidence; label: "Traction Conf."}
                            ValueBar {id: debugWheelSpeed; label: "Wheel Speed"; unitString: " m/s"; softLimit: 0.4}
                            ValueBar {id: debugBoardSpeed; label: "Board Speed"; unitString: " m/s"; softLimit: 0.4}
                        }

                        Column {
                            width: (parent.width - parent.spacing) / 2
                            spacing: unit * 0.18
                            clip: true

                            ValueBar {id: debugModifiersTarget; label: "Target"; unitString: "°"; softLimit: 3}
                            ValueBar {id: debugModifiersValue; label: "Filtered"; unitString: "°"; softLimit: 3}
                            ValueBar {id: debugModifiersSpeed; label: "Speed"; unitString: "°/s"; softLimit: 15}

                            Spacer {}
                            ValueBar {id: debugAtrSlope; label: "Road Slope"; unitString: "°"}
                            FactorBar {id: debugTest; label: "Test";}
                            ValueBar {id: debugWheelAccel; label: "Wheel Acc."; unitString: " g"; softLimit: 0.5}
                            ValueBar {id: debugBoardAccel; label: "Board Acc."; unitString: " g"; softLimit: 0.5}

                        }
                    }

                    Item {
                        width: parent.width
                        height: 0.1 * unit
                    }
                }
            }
        }

        NText {
            id: bottomLine
            Layout.fillWidth: true
            font.pixelSize: 0.2 * unit
            horizontalAlignment: Text.AlignHCenter
            text: "Stig v{{VERSION}}"
        }
    }
}