ui.qml.in

// Copyright 2022 Benjamin Vedder <benjamin@vedder.se>
// Copyright 2024 Lukas Hrazky
//
// This file is part of the Refloat VESC package.
//
// Refloat 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.
//
// Refloat 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 QtQuick.Window 2.2
import QtGraphicalEffects 1.15

import Vedder.vesc.vescinterface 1.0
import Vedder.vesc.codeloader 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 string tabTitle: "Refloat" 
    property Commands vescCommands: VescIf.commands()

    function round(num) {
        if (num != num) {
            return "--";
        }
        return Math.round(num);
    }

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

    function toFixed2Zero(num) {
        if (num != num) {
            return "-.--";
        }
        return num.toFixed(2).replace("-0.00", "0.00");
    }

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

        if (val < min) {
            return min;
        }

        return val;
    }

    function arraysEqual(a, b) {
        if (a === b) return true;
        if (a == null || b == null) return false;
        if (a.length !== b.length) return false;

        for (var i = 0; i < a.length; ++i) {
            if (a[i] !== b[i]) return false;
        }
        return true;
    }

    function dist(a, b) {
        return Math.abs(a - b);
    }

    function parseVersion(ver) {
        var dotSplit = ver.split(".");
        if (dotSplit.length < 3) {
            return [0, 0, 0, ""];
        }

        var lastPart = dotSplit[2];
        var dashPos = lastPart.search("-");
        var patch = lastPart;
        var suffix = "";
        if (dashPos > 0) {
            patch = lastPart.substring(0, dashPos);
            suffix = lastPart.substring(dashPos + 1);
        }

        return [Number(dotSplit[0]), Number(dotSplit[1]), Number(patch), suffix];
    }

    function versionMajorMinor(ver) {
        var arr = ver.split(".");
        if (arr.length < 2) {
            return [0, 0];
        }

        return [Number(arr[0]), Number(arr[1])];
    }

    // Expects arrays containing 3 numbers, returns -1 if a < b, 1 if a > b and 0 if a == b
    function cmpVersion(a, b) {
        for (var i = 0; i < 3; i++) {
            if (a[i] < b[i]) {
                return -1;
            } else if (a[i] > b[i]) {
                return 1;
            }
        }
        return 0;
    }

    function getDarkThemeColor(name) {
        switch (name) {
        case "normalBackground":
            return "#303030";
            break;
        case "darkBackground":
            return "#272727";
            break;
        case "normalText":
            return "#b4b4b4";
            break;
        case "lightText":
            return "#dcdcdc";
            break;
        case "disabledText":
            return "#7f7f7f";
            break;
        }
    }

    // 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 (state.commsState === state.comms_Info) {
                commands.sendGetInfo();
            } else if (state.commsState === state.comms_RTDataIDs) {
                commands.sendGetRtDataIds();
            } 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;
                    }
                }
            }
        }
    }

    QtObject {
        id: board

        function getId() {
            return VescIf.getLastBleAddr();
        }

        function getName() {
            var name = VescIf.getBleName(VescIf.getLastBleAddr());
            if (!name) {
                return null;
            }
            return name;
        }

        function setName(name) {
            VescIf.storeBleName(VescIf.getLastBleAddr(), name);
            VescIf.storeSettings();
        }

        function getFwVersion() {
            var params = VescIf.getLastFwRxParams();
            return [params.major, params.minor];
        }
    }

    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);

        property bool updateDue: false
        signal update

        property Connections pkgConns: Connections {
            target: packageConfig.pkgConfig

            function onParamChangedDouble(src, name, newParam) {
                packageConfig.pendingUpdate();
            }

            function onParamChangedInt(src, name, newParam) {
                packageConfig.pendingUpdate();
            }

            function onParamChangedEnum(src, name, newParam) {
                packageConfig.pendingUpdate();
            }

            function onParamChangedQString(src, name, newParam) {
                packageConfig.pendingUpdate();
            }

            function onParamChangedBool(src, name, newParam) {
                packageConfig.pendingUpdate();
            }
        }

        // There is no reliable signal for when the whole config changes,
        // instead, we hook onto property changes and run a timer for a short
        // while before we fire off the actual update() signal
        property Timer updateTimer: Timer {
            id: updateTimer
            interval: 100

            onTriggered: {
                packageConfig.fireDueUpdate();
            }
        }

        property Timer dueTimer: Timer {
            id: dueTimer
            interval: 2000

            onTriggered: {
                packageConfig.fireDueUpdate();
            }
        }

        function pendingUpdate() {
            updateTimer.restart();
        }

        function armDueUpdate() {
            updateDue = true;
            dueTimer.restart();
        }

        function disarmDueUpdate() {
            updateDue = false;
            dueTimer.stop();
        }

        function fireDueUpdate() {
            if (updateDue) {
                updateDue = false;
                update();
            }
        }

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

            // Config was just loaded and...
            if (isDefault()) {
                // ... it's default, fire a delayed update based on the config values changing
                //
                // Config being the default one here doesn't necessarily mean
                // the actual package config has been reset, this sometimes
                // triggers with the config being default at this point, but
                // the config is updated later (and there is no signal sent on
                // that event).
                //
                // We delay the actual check / update until a bit later when
                // the actual data is loaded.
                armDueUpdate();
            } else {
                // ... it's not default, trigger the update signal right away
                update();
            }
        }

        // Called explicitly after the Write button in Refloat Cfg qml page is pressed
        function configWritten() {
            disarmDueUpdate();
            unsetDefault();
            update();
        }

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

        function writeConfig() {
            if (!checkConfig()) return;

            unsetDefault();
            vescCommands.customConfigSet(0, pkgConfig);
            update();
        }

        function isDefault() {
            if (!checkConfig()) return null;

            return pkgConfig.getParamBool("meta.is_default");
        }

        // We unset the is_default flag on every config write. Once we write
        // something, it's no longer default. This flag is being reset on the
        // pacakge side as well, but the config is not re-read after write, so
        // we need to reset it here too.
        function unsetDefault() {
            if (!checkConfig()) return;
            pkgConfig.updateParamBool("meta.is_default", false);
        }

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

            pkgConfig.updateParamBool("disabled", disabled);
            writeConfig();
        }

        function getParamValue(name) {
            if (pkgConfig.isParamDouble(name)) {
                return pkgConfig.getParamDouble(name);
            } else if (pkgConfig.isParamInt(name)) {
                return pkgConfig.getParamInt(name);
            } else if (pkgConfig.isParamEnum(name)) {
                return pkgConfig.getParamEnum(name);
            } else if (pkgConfig.isParamBool(name)) {
                return pkgConfig.getParamBool(name);
            } else if (pkgConfig.isParamQString(name)) {
                return pkgConfig.getParamQString(name);
            } else if (pkgConfig.isParamBitfield(name)) {
                return pkgConfig.getParamInt(name);
            }

            return null;
        }

        function getParamType(name) {
            if (pkgConfig.isParamDouble(name)) {
                return "Double";
            } else if (pkgConfig.isParamInt(name)) {
                return "Int";
            } else if (pkgConfig.isParamEnum(name)) {
                return "Enum";
            } else if (pkgConfig.isParamBool(name)) {
                return "Bool";
            } else if (pkgConfig.isParamQString(name)) {
                return "String";
            } else if (pkgConfig.isParamBitfield(name)) {
                return "Bitfield";
            }

            return null;
        }

        function getDisplayName(name) {
            return pkgConfig.getLongName(name);
        }

        function getEnumNames(name) {
            return pkgConfig.getParamEnumNames(name);
        }

        function paramIsTune(name) {
            var tuneBlacklist = [
                "tiltback_return_speed",
                "tiltback_duty",
                "tiltback_duty_angle",
                "tiltback_duty_speed",
                "is_dutybeep_enabled",
                "tiltback_hv_angle",
                "tiltback_hv_speed",
                "tiltback_lv_angle",
                "tiltback_lv_speed",
                "disabled",
                "fault_adc1",
                "fault_adc2",
                "hertz",
                "inputtilt_remote_type",
                "inputtilt_deadband",
                "is_footbeep_enabled",
                "is_beeper_enabled",
                "tiltback_hv",
                "tiltback_lv",
                "tiltback_speed",
            ];

            return !name.startsWith("haptic.") && !name.startsWith("hardware.") && !tuneBlacklist.includes(name);
        }

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

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

                    var value = getParamValue(param);
                    if (value !== null) {
                        settings[param] = getParamValue(param);
                    }
                }
            }

            return settings;
        }

        function versionCompatible(config) {
            var [major, minor] = versionMajorMinor(config.version);
            if (major !== tuneManager.formatVersionMajor || minor > tuneManager.formatVersionMinor) {
                VescIf.emitStatusMessage("Error: Incompatible version: %1".arg(config.version), false);
                return false;
            }

            return true;
        }

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

            if (!versionCompatible(config)) {
                return;
            }

            for (let [key, value] of Object.entries(config.settings)) {
                if (pkgConfig.isParamDouble(key)) {
                    pkgConfig.updateParamDouble(key, value);
                } else if (pkgConfig.isParamInt(key)) {
                    pkgConfig.updateParamInt(key, value);
                } else if (pkgConfig.isParamBool(key)) {
                    pkgConfig.updateParamBool(key, value);
                } else if (pkgConfig.isParamEnum(key)) {
                    pkgConfig.updateParamEnum(key, value);
                } else if (pkgConfig.isParamQString(key)) {
                    pkgConfig.updateParamString(key, value);
                } else if (pkgConfig.isParamBitfield(key)) {
                    pkgConfig.updateParamInt(key, value);
                }
            }

            writeConfig();
        }

        function diffConfig(other) {
            var differs = [];
            var otherMissing = [];
            var otherSettings = {};

            if (other && other.settings) {
                otherSettings = Object.assign({}, other.settings);
                if (VescIf.customConfigsLoaded()) {
                    for (let subGroup of pkgConfig.getParamSubgroups("General")) {
                        for (let paramName of pkgConfig.getParamsFromSubgroup("General", subGroup)) {
                            var value = getParamValue(paramName);
                            if (value === null) {
                                continue;
                            }

                            if (otherSettings.hasOwnProperty(paramName)) {
                                var otherValue = otherSettings[paramName];
                                if (value !== otherValue) {
                                    differs.push({
                                        "name": paramName,
                                        "value": value,
                                        "otherValue": otherValue
                                    });
                                }
                                delete otherSettings[paramName];
                            } else {
                                otherMissing.push(paramName);
                            }
                        }
                    }
                }
            }

            return {
                "differs": differs,
                "missing": Object.values(otherSettings),
                "otherMissing": otherMissing,
            }
        }

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

            if (pkgConfig.getParamEnum("inputtilt_remote_type", 0) != 1) {
                pkgConfig.updateParamEnum("inputtilt_remote_type", 1);
                writeConfig();
            }
        }
    }

    Connections {
        id: commands
        target: vescCommands

        readonly property int c_INFO: 0
        readonly property int c_RC_MOVE: 7
        readonly property int c_HANDTEST: 13
        readonly property int c_LIGHTS_CONTROL: 20
        readonly property int c_FLYWHEEL: 22
        readonly property int c_REALTIME_DATA: 31
        readonly property int c_REALTIME_DATA_IDS: 32
        readonly property int c_ALERTS_LIST: 35
        readonly property int c_ALERTS_CONTROL: 36
        readonly property int c_DATA_RECORD_REQUEST: 41
        readonly property int c_DATA_RECORD_HEADER: 42
        readonly property int c_DATA_RECORD_DATA: 43

        // IEEE-754 16-bit floating-point format (without infinity and NaNs)
        // Dynamic range: +-131008.0
        // Normal numbers closest to zero: +-6.1035156E-5
        // Subnormal numbers closes to zero: +-5.9604645E-8
        // Precision: 3.311 digits
        //
        // https://stackoverflow.com/a/60047308
        function getFloat16(dataView, ind) {
            var x = dataView.getUint16(ind);
            var e = (x&0x7C00)>>10; // exponent
            var m16 = x&0x03FF; // original float16 mantissa
            var m = m16<<13; // new float 32 mantissa
            var v = m16>0 ? 140+Math.floor(Math.log2(m16)) : 0;
            // sign | normalized | denormalized
            var r = (x&0x8000)<<16 | (e!=0)*((e+112)<<23|m) | ((e==0)&(m!=0))*((v-37)<<23|((m<<(150-v))&0x007FE000));
            return new Float32Array(new Uint32Array([r]).buffer)[0];
        }

        function getString(dataView, ind) {
            var str = "";
            var size = dataView.getUint8(ind++);
            for (var j = 0; j < size; j++) {
                str += String.fromCharCode(dataView.getUint8(ind++));
            }
            return [str, ind];
        }

        function getStrings(dataView, ind) {
            var num = dataView.getUint8(ind++);
            var strs = [];
            for (var i = 0; i < num; i++) {
                var str;
                [str, ind] = getString(dataView, ind);
                strs.push(str);
            }
            return [strs, ind];
        }

        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() {
            var data = createData(4, c_INFO);

            data.setUint8(2, 2); // version 2 of the INFO command
            vescCommands.sendCustomAppData(data.buffer);
        }

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

        function sendGetRtDataIds() {
            vescCommands.sendCustomAppData(createData(2, c_REALTIME_DATA_IDS).buffer);
        }

        function sendLightsControl(on, headlightsOn) {
            var data = createData(7, 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.setUint32(2, mask);
            data.setUint8(6, value);

            vescCommands.sendCustomAppData(data.buffer);
        }

        function sendAlertsList(startTime) {
            var data = createData(6, c_ALERTS_LIST);

            if (startTime !== undefined && startTime !== null) {
                data.setUint32(2, startTime);
            }

            vescCommands.sendCustomAppData(data.buffer);
        }

        function sendAlertsClearFatal() {
            var data = createData(3, c_ALERTS_CONTROL);

            data.setUint8(2, 0x1);  // clear the fatal error flag

            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 sendFlywheel(on) {
            var data = createData(9, c_FLYWHEEL);

            data.setUint8(2, on ? 130 : 128); // on, force calibration (130) / off (128)
            if (on) {
                data.setUint8(3, 0); // use default kp
                data.setUint8(4, 0); // use default kp2
                data.setUint8(5, 0); // use default duty angle
                data.setUint8(6, 0); // use default duty start
                data.setUint8(7, 1); // allow abort with footpads
                data.setUint8(8, 0); // use default duty speed
            }
            vescCommands.sendCustomAppData(data.buffer);
        }

        readonly property int dr_RECORD: 1
        readonly property int dr_AUTOSTART: 2
        readonly property int dr_AUTOSTOP: 3

        // @param key One of the above dr_ properties
        // @param value Value to set, true or false
        function sendDataRecordControl(key, value) {
            var data = createData(5, c_DATA_RECORD_REQUEST);
            data.setUint8(2, 1); // control
            data.setUint8(3, key);
            data.setUint8(4, value);

            vescCommands.sendCustomAppData(data.buffer);
        }

        function sendDataRecordRequest(header, offset) {
            if (header) {
                var data = createData(4, c_DATA_RECORD_REQUEST);
                data.setUint8(2, 2); // send
                data.setUint8(3, 1); // header
            } else {
                var data = createData(8, c_DATA_RECORD_REQUEST);
                data.setUint8(2, 2); // send
                data.setUint8(3, 2); // data
                data.setUint32(4, offset);
            }

            vescCommands.sendCustomAppData(data.buffer);
        }

        function onValuesSetupReceived(values, mask) {
            batteryBar.value = values.battery_level * 100;

            odometer.value = values.odometer * 0.001 * vescConfig.imperialFactor;
            tachometer.value = values.tachometer_abs * 0.001 * vescConfig.imperialFactor;

            var speed = Math.abs(values.speed * 3.6 * 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_INFO) {
                ind += 1;  // skip version, should always be the current one
                var flags = dv.getUint8(ind++);
                ind += 47;  // 20 bytes package name, 3 version numbers, 20 bytes suffix, 4 bytes git hash
                state.ticksPerSecond = dv.getUint32(ind); ind += 4;
                var capabilities = dv.getUint32(ind); ind += 4;
                state.setCapabilities(capabilities);

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

                state.commsState = state.comms_RTDataIDs;
            } else if (msgtype == c_LIGHTS_CONTROL) {
                var values = dv.getUint8(ind++);
                lights.on = values & 0b01;
                lights.headlightsOn = values & 0b10;
            } else if (msgtype === c_ALERTS_LIST) {
                alerts.receiveAlertsList(dv, ind);
            } else if (msgtype === c_REALTIME_DATA) {
                if (state.commsState !== state.comms_Initialized) {
                    // rt data came because another client app requested them,
                    // ignore until info is received
                    return;
                }

                var mask = dv.getUint8(ind++);
                var hasRuntime = !!(mask & 0x1);
                var hasCharging = !!(mask & 0x2);
                var hasAlerts = !!(mask & 0x4);

                var extraFlags = dv.getUint8(ind++);
                state.extraRecording = extraFlags & 0x1;
                state.extraRecAutostart = extraFlags & 0x2;
                state.extraRecAutostop = extraFlags & 0x4;
                state.fatalError = extraFlags & 0x8;

                var time = dv.getUint32(ind); ind += 4;
                state.setTimeReference(time);

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

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

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

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

                var rtDataIdleIts = state.rtDataIdleItems;
                var rtDataAllIts = state.rtDataAllItems;
                var newRt = Array(rtDataAllIts.length).fill(NaN);

                // if runtime values are not in the message, limit the loop to
                // read only values that are always present
                var i = 0;
                for (; i < rtDataIdleIts.length; i++) {
                    newRt[i] = getFloat16(dv, ind);
                    ind += 2;
                }
                if (hasRuntime) {
                    for (; i < rtDataAllIts.length; i++) {
                        newRt[i] = getFloat16(dv, ind);
                        ind += 2;
                    }
                }

                state.rtData = state.newRtData(newRt);

                if (hasCharging) {
                    chargingInfo.current = getFloat16(dv, ind); ind += 2;
                    chargingInfo.voltage = getFloat16(dv, ind); ind += 2;
                }

                if (hasAlerts) {
                    ind += 9; // unused here
                }

                var running = +(state.pkgState === state.s_Running);
                rtPlotData.addSample([time, running, wheelslip, sat, fpState].concat(newRt));
                rtPlotData.makeReady();
            } else if (msgtype === c_REALTIME_DATA_IDS) {
                if (state.commsState !== state.comms_RTDataIDs) {
                    return;
                }
                [state.rtDataIdleItems, ind] = getStrings(dv, ind);
                [state.rtDataRuntimeItems, ind] = getStrings(dv, ind);
                state.rtDataAllItems = state.rtDataIdleItems.concat(state.rtDataRuntimeItems);

                state.commsState = state.comms_Initialized;
            } else if (msgtype === c_DATA_RECORD_HEADER) {
                recordedPlotData.receiveHeader(dv, ind);
            } else if (msgtype === c_DATA_RECORD_DATA) {
                recordedPlotData.receiveData(dv, ind);
            }

            packageConnectionWatchdog.restart();
        }
    }

    Settings {
        id: preferences
        category: "preferences"

        property int speedDialMax: vescConfig.useImperial ? 30 : 40
        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 showTuneDiffCount: prefShowTuneDiffCount.checked
        property int plotMaxWindowMinutes: 30
        property alias showWelcomeDialog: prefShowWelcomeDialog.checked
        property alias checkForNewVersions: prefCheckForNewVersions.checked
    }

    Settings {
        id: persistentData
        category: "persistentData"

        property var lastPackageUpdateCheck
        property var packageUpdateSnooze
    }

    QtObject {
        id: updateChecker

        property CodeLoader packageLoader: CodeLoader {
            id: packageLoader

            function getPackageVersion(pkgName) {
                var pkgs = reloadPackageArchive();

                for (var pkg of pkgs) {
                    if (!pkg.isLibrary && shouldShowPackage(pkg) && pkg.name === pkgName) {
                        // HTML text
                        var li = pkg.description.match(/<li>Version: [a-zA-Z0-9._-]+<\/li>/g);
                        if (li) {
                            var version = li[0];
                            return version.substring(13, version.length - 5);
                        }

                        // markdown text
                        var md_bullet = pkg.description.match(/\n- Version: [a-zA-Z0-9._-]+\n/g);
                        if (md_bullet) {
                            var version = md_bullet[0];
                            return version.substring(11, version.length);
                        }
                    }
                }

                return null;
            }

            Component.onCompleted: {
                setVesc(VescIf)
            }
        }

        function check() {
            if (!preferences.checkForNewVersions) {
                return;
            }

            var pkgName = "{{PACKAGE_NAME}}";
            var pkgVersion = "{{VERSION}}";
            if (pkgName.includes("PACKAGE_NAME")) {
                // Don't run when loading the teplate itself for development/debugging
                return;
            }

            var now = Date.now();
            var oneDayMs = 24 * 60 * 60 * 1000;

            var lpuc = persistentData.lastPackageUpdateCheck;
            if (!lpuc || now - lpuc > oneDayMs) {
                packageLoader.downloadPackageArchive();
                persistentData.lastPackageUpdateCheck = Date.now();
            }

            var pus = persistentData.packageUpdateSnooze;
            if (pus && now - pus < 30 * oneDayMs) {
                return;
            }

            var version = packageLoader.getPackageVersion(pkgName);
            if (!version) {
                print("{{PACKAGE_NAME}}: Failed to retrieve package version");
                return;
            }

            if (cmpVersion(parseVersion(version), parseVersion(pkgVersion)) == 1) {
                newPackageVersionDialog.show(version);
            }
        }
    }

    component UIHint : Item {
        id: hint
        property var target
        property real targetX
        property real targetY
        property real targetWidth
        property real targetHeight

        property Settings settings
        property string settingName
        property bool shown

        function updateTarget() {
            if (target !== null) {
                var p = mapFromItem(target, 0, 0);
                targetX = p.x;
                targetY = p.y;
            }
        }

        onTargetChanged: {
            targetWidth = target.width;
            targetHeight = target.height;
            updateTarget();
        }

        Connections {
            target: hint.target

            function onXChanged() {
                hint.updateTarget();
            }

            function onYChanged() {
                hint.updateTarget();
            }

            function onWidthChanged() {
                hint.targetWidth = target.width;
                hint.updateTarget();
            }

            function onHeightChanged() {
                hint.targetHeight = target.height;
                hint.updateTarget();
            }
        }

        Component.onCompleted: {
            shown = settings[settingName];
        }

        onShownChanged: {
            settings[settingName] = shown;
        }

        MouseArea {
            z: 10
            anchors.fill: parent
        }
    }

    component UIHintText : NText {
        anchors.margins: 50
        width: parent.width - 50
        font.pointSize: 15
        horizontalAlignment: TextInput.AlignHCenter
        wrapMode: Text.WordWrap
    }

    component UIHintFrame : Rectangle {
        anchors.fill: parent
        anchors.margins: -5
        color: "transparent"
        border.color: Utility.getAppHexColor("lightAccent")
        border.width: 1
        radius: 8
        opacity: 0.7
    }

    component UIHintUnderline : Rectangle {
        anchors.left: parent.left
        anchors.top: parent.top
        width: unit * 0.8
        height: 3
        color: Utility.getAppHexColor("lightAccent")
        opacity: 0.7
    }

    // Workaround for `state` getting resolved to all kinds of different things in different contexts
    property var gState: state
    Component {
        id: statusTextComp

        UIHint {
            target: statusText

            StatusText {
                id: statusTextSubject
                x: parent.targetX
                y: parent.targetY
                width: parent.targetWidth
                height: parent.targetHeight
                globState: gState

                UIHintFrame {}
            }

            UIHintText {
                anchors.horizontalCenter: statusTextSubject.horizontalCenter
                anchors.bottom: statusTextSubject.top
                text: "Tap the state text to show more board state details like Stop Condition, Last Beep Reason, errors and faults."
            }
        }
    }

    Component {
        id: plotComp

        UIHint {
            target: rtPlot

            property int stage: settingName === "plotCursor" ? 0 : settingName === "drGeneral" ? 1 : settingName === "drStartStop" ? 2 : 3

            Plot {
                id: subject
                x: parent.targetX
                y: parent.targetY
                width: parent.targetWidth
                height: parent.targetHeight

                showRecordDownload: gState.capDataRecord
                dotsEnabled: false

                plotData: PlotData {
                    id: pd
                    seriesMetaData: plotSeriesMetaData
                }

                Component.onCompleted: {
                    pd.init(["motor.current"], 1);
                    subject.init(1);
                    pd.addSample([0, 0,0,0,0, 10], 0);
                    pd.addSample([2,0,0,0,0, 22], 1);
                    pd.addSample([4,0,0,0,0, 15], 2);
                    pd.addSample([9,0,0,0,0, 30], 3);
                    pd.makeReady();
                    if (stage === 0) {
                        subject.spawnCursor(4);
                    }
                }

                UIHintFrame {}

                UIHintUnderline {
                    anchors.topMargin: unit
                    anchors.leftMargin: unit
                    width: unit * 1.7
                    visible: stage === 1
                }

                UIHintUnderline {
                    anchors.topMargin: unit
                    anchors.leftMargin: 1.9 * unit
                    visible: stage === 2
                }

                UIHintUnderline {
                    anchors.topMargin: unit
                    anchors.leftMargin: unit
                    visible: stage === 3
                }
            }

            UIHintText {
                anchors.horizontalCenter: subject.horizontalCenter
                anchors.bottom: subject.top
                text: "View a plot of realtime data (log) from the package on the Data tab.\n\nLong press anywhere in the plot area to spawn a cursor.\n\nYou can dismiss the cursor by a swipe up gesture on it."
                visible: stage === 0
            }

            UIHintText {
                anchors.horizontalCenter: subject.horizontalCenter
                anchors.bottom: subject.top
                text: "Congratulations, you have the Data Record firmware installed. You are now part of the secret Data Recording society.\n\nYour board has the ability to store a short detailed data \"log\" by itself, you don't need to be connected.\n\nIt's controlled by these two buttons."
                visible: stage === 1
            }

            UIHintText {
                anchors.horizontalCenter: subject.horizontalCenter
                anchors.bottom: subject.top
                text: "This button indicates whether the board is recording. You can use it to start and stop the recording manually.\n\nThe board automatically starts recording when engaged and stops recording on disengage. You can disable the autostart and autostop functionality by long-pressing the button.\n\nIf you nosedive, check the recording before engaging again!"
                visible: stage == 2
            }

            UIHintText {
                anchors.horizontalCenter: subject.horizontalCenter
                anchors.bottom: subject.top
                text: "You can download the stored data using this button. It automatically stops recording. Do not start it while you're downloading, or you'll corrupt your data."
                visible: stage == 3
            }
        }
    }

    QtObject {
        id: uiHints

        property Settings uiHintsSettings: Settings {
            id: uiHintsSettings
            category: "uiHints"

            property bool statusText
            property bool plotCursor

            property bool drGeneral
            property bool drStartStop
            property bool drDownload
        }

        readonly property var hints: new Map([
            ["statusText", statusTextComp],
            ["plotCursor", plotComp],
        ])

        readonly property var dataRecordHints: new Map([
            ["drGeneral", plotComp],
            ["drStartStop", plotComp],
            ["drDownload", plotComp],
        ])

        function fill(container) {
            for (let [key, value] of hints) {
                if (!uiHintsSettings[key]) {
                    if (key == "plotCursor") {
                        bottomStackTabs.currentIndex = 2;
                    }
                    value.createObject(container, {settings: uiHintsSettings, settingName: key});
                }
            }
        }

        function fillDataRecord(container) {
            if (state.capDataRecord) {
                for (let [key, value] of dataRecordHints) {
                    if (!uiHintsSettings[key]) {
                        bottomStackTabs.currentIndex = 2;
                        value.createObject(container, {settings: uiHintsSettings, settingName: key});
                    }
                }
            }
        }

        function reset(container) {
            for (let key of hints.keys()) {
                uiHintsSettings[key] = false;
            }

            if (state.capDataRecord) {
                for (let key of dataRecordHints.keys()) {
                    uiHintsSettings[key] = false;
                }
            }
        }
    }

    Connections {
        id: tuneManager
        target: packageConfig

        readonly property int formatVersionMajor: 1
        readonly property int formatVersionMinor: 0
        readonly property string formatVersion: "%1.%2".arg(formatVersionMajor).arg(formatVersionMinor)
        readonly property string packageName: "{{PACKAGE_NAME}}"
        readonly property string packageVersion: "{{VERSION}}"
        readonly property int maxTunes: 6

        signal idBackupFinished(var backup)
        signal autoBackupFinished(var backup)

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

            property var tuneArchive
            property var tuneArchiveDownloadDate

            property var fullBackup
        }

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

            return tunes;
        }

        // Major package versions require a migration, minor don't.
        // Migration functions should return: [tuneObject, [newMajor, newMinor]]
        property var migrations: {
            "1.1": function(tune) {
                var [fwMajor, fwMinor] = board.getFwVersion();
                if (fwMajor > 6 || (fwMajor == 6 && fwMinor >= 5) && motorConfig.batteryCells > 0) {
                    if (tune.settings["tiltback_hv"] > 10) {
                        tune.settings["tiltback_hv"] /= motorConfig.batteryCells;
                    }
                    if (tune.settings["tiltback_lv"] > 10) {
                        tune.settings["tiltback_lv"] /= motorConfig.batteryCells;
                    }
                }

                return [tune, [1, 2]];
            },
        }

        function onUpdate() {
            triggerAutoRestore();
            // force recalculation of dependent variables
            tunes = tunes;
        }

        property alias fullBackup: tuneStorage.fullBackup

        function convertToOldFormat(tune) {
            if (Array.isArray(tune.settings)) {
                return tune;
            }

            var res = Object.assign({}, tune);
            res.settings = [];
            for (let [name, value] of Object.entries(tune.settings)) {
                res.settings.push({
                    "name": name,
                    "value": value,
                    "type": packageConfig.getParamType(name)
                });
            }
            return res;
        }

        function convertFromOldFormat(tune) {
            if (!Array.isArray(tune.settings)) {
                return tune;
            }

            var res = Object.assign({}, tune);
            res.settings = {};
            for (let item of tune.settings) {
                res.settings[item.name] = item.value;
            }
            return res;
        }

        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
                },
                "board": {
                    "id": board.getId(),
                },
                "settings": settings
            };

            var boardName = board.getName();
            if (boardName) {
                tune.board.name = boardName;
            }

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

            return tune;
        }

        function updateTune(tune, name, description, settings) {
            if (!packageConfig.versionCompatible(tune)) {
                return false;
            }

            tune.name = name;
            if (description) {
                tune.description = description;
            }
            if (settings) {
                tune.settings = settings;
                tune.date = new Date();
            }
            tune.version = formatVersion;

            return true;
        }

        function migrateTune(tune) {
            var [major, minor] = versionMajorMinor(tune.package.version);
            // Zero or NaN
            if (!major) {
                return tune;
            }

            var [pMajor, pMinor] = versionMajorMinor(packageVersion);

            while (major < pMajor || (major == pMajor && minor < pMinor)) {
                var versionKey = [major, minor].join(".");
                if (migrations.hasOwnProperty(versionKey)) {
                    [tune, [major, minor]] = migrations[versionKey](tune);
                } else {
                    minor++;
                }
            }
            return tune;
        }

        function createBackup() {
            var config = packageConfig.fetchConfig(false);
            if (!config) {
                return null;
            }
            return createTune("Full Backup", "", config);
        }

        function loadBackup(name) {
            var backup = tuneStorage.value(name);
            if (!backup) {
                return null;
            }

            return migrateTune(convertFromOldFormat(backup));
        }

        function saveBackup(name, backup) {
            tuneStorage.setValue(name, convertToOldFormat(backup));
        }

        function globalBackup() {
            var backup = createBackup();
            if (!backup) {
                return;
            }
            fullBackup = backup;
        }

        function globalRestore() {
            var backup = loadBackup("fullBackup");
            if (!backup) {
                return;
            }
            applyConfigDialog.show(backup, false, false);
        }

        function idBackup() {
            var backup = createBackup();
            if (!backup) {
                return;
            }
            saveBackup("backup_" + board.getId(), backup);
            idBackupFinished(backup);
        }

        function idRestore() {
            var backup = loadBackup("backup_" + board.getId());
            if (!backup) {
                return;
            }
            applyConfigDialog.show(backup, false, false);
        }

        function autoBackup() {
            var backup = createBackup();
            if (!backup) {
                return;
            }

            saveBackup("auto_backup_" + board.getId(), backup);
            autoBackupFinished(backup);
        }

        function autoRestore() {
            var backup = loadBackup("auto_backup_" + board.getId());
            if (!backup) {
                return;
            }
            applyConfigDialog.show(backup, false, false);
        }

        function triggerAutoRestore() {
            if (!packageConfig.checkConfig()) {
                return;
            }

            if (packageConfig.isDefault()) {
                var backup = loadBackup("auto_backup_" + board.getId());
                if (backup) {
                    print("Refloat: Automatic backup restore.");
                    applyConfigDialog.show(backup, true, false);
                } else {
                    print("Refloat: No automatic backup to restore.");
                }
            } else {
                print("Refloat: Automatic config backup.");
                autoBackup();
            }
        }

        function saveTune(slot, tune) {
            var id = tuneId(slot);
            tuneStorage.setValue(id, JSON.stringify(convertToOldFormat(tune)));

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

        function loadTune(slot) {
            var tune = tuneStorage.value(tuneId(slot));
            if (tune) {
                if (typeof tune === "string") {
                    tune = JSON.parse(tune);
                }
                return migrateTune(convertFromOldFormat(tune));
            }
            return null;
        }

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

        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) {
                if (typeof tuneStorage.tuneArchive === "string") {
                    return JSON.parse(tuneStorage.tuneArchive);
                } else {
                    return tuneStorage.tuneArchive;
                }
            }
            return null;
        }

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

        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;

                        if (key === "_name") {
                            result[j].name = value;
                            continue;
                        } else if (key.startsWith("double_")) {
                            name = key.substring(7);
                            value = parseFloat(value);
                        } else if (key.startsWith("int_")) {
                            name = key.substring(4);
                            value = parseInt(value);
                        } else if (key.startsWith("bool_")) {
                            name = key.substring(5);
                            value = !!parseInt(value);
                        } else if (key.startsWith("enum_")) {
                            name = key.substring(5);
                            value = parseInt(value);
                        }

                        if (Number.isNaN(value)) {
                            continue;
                        }

                        result[j].settings[name] = value;
                    }
                }
            }

            return result;
        }

        Component.onCompleted: {
            var idBackup = loadBackup("backup_" + board.getId());
            if (idBackup) {
                idBackupFinished(idBackup);
            }
            var autoBackup = loadBackup("auto_backup_" + board.getId());
            if (autoBackup) {
                autoBackupFinished(autoBackup);
            }
        }
    }

    property var state: QtObject {
        id: state

        readonly property int comms_Info: 1
        readonly property int comms_RTDataIDs: 2
        readonly property int comms_Initialized: 3

        property int commsState: comms_Info

        signal commsInitialized

        onCommsStateChanged: {
            if (commsState == comms_Initialized) {
                commsInitialized();
            }
        }

        property bool extraRecording: false
        property bool extraRecAutostart: false
        property bool extraRecAutostop: false

        property int ticksPerSecond

        // package capabilities
        readonly property int cap_Lights: 1
        readonly property int cap_LightsExternal: 2
        readonly property int cap_DataRecord: 2**31

        property bool capLights
        property bool capLightsExternal
        property bool capDataRecord

        function setCapabilities(caps) {
            capLights = caps & cap_Lights;
            capLightsExternal = caps & cap_LightsExternal;
            // Javascript can't work with 32bit ints, an "&" check doesn't work for 2**31 (on Android).
            // The >>> 0 hack is needed for desktop.
            capDataRecord = caps >= (cap_DataRecord >>> 0);
        }

        // 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)

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

        property int pkgMode: m_Normal

        property string pkgModeString: {
            if (pkgState != s_Disconnected) {
                if (pkgMode == m_Flywheel) {
                    return "FLYWHEEL";
                } else 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 fpState: fs_None

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

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

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

        // setpoint adjustment type
        readonly property int sat_None: 0
        readonly property int sat_Centering: 1
        readonly property int sat_ReverseStop: 2
        readonly property int sat_Speed: 5
        readonly property int sat_Duty: 6
        readonly property int sat_PushbackError: 7
        readonly property int sat_HighVoltage: 10
        readonly property int sat_LowVoltage: 11
        readonly property int sat_Temperature: 12

        // 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"],
            [sat_Speed, "pushback: speed"],
            [sat_Duty, "pushback: duty"],
            [sat_PushbackError, "pushback: error"],
            [sat_HighVoltage, "pushback: high voltage"],
            [sat_LowVoltage, "pushback: low voltage"],
            [sat_Temperature, "pushback: temperature"],
        ])

        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_Speed ? sac_Warning : 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_SensorHalf: 3
        readonly property int sc_SensorFull: 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_SensorHalf, "Sensor Half"],
            [sc_SensorFull, "Sensor Full"],
            [sc_ReverseStop, "Reverse Stop"],
            [sc_Quickstop, "Quickstop"],
        ])

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

        property bool darkride: false
        property bool wheelslip: false
        property bool charging: false

        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, "Other"],
            [11, "Speed"],
            [12, "BMS: Cell Under Temp"],
            [13, "BMS: Cell Over Temp"],
            [14, "BMS: Cell Low Voltage"],
            [15, "BMS: Cell High Voltage"],
            [16, "BMS: Cell Balance"],
            [17, "BMS: Connection Error"],
            [18, "BMS: BMS Temp"],
            [19, "Firmware Fault"],
        ])

        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 bool configLoadingError: false
        property bool fatalError: false

        property bool isError: pkgStateIsError || configLoadingError || fatalError

        property var timeReference

        function ticksToMsSinceEpoch(t) {
            if (timeReference === undefined) {
                return undefined;
            }

            return timeReference + t * 1000 / ticksPerSecond;
        }

        function setTimeReference(t) {
            var timeRef = ticksToMsSinceEpoch(t);
            var now = Date.now();

            // if time is in the past, it's either a board reboot or the ticks have overflown
            // reset the time reference either way
            if (timeRef === undefined || timeRef < now - 8000) {
                timeReference = now - t * 1000 / ticksPerSecond;
            }
        }

        property var rtDataIdleItems: []
        property var rtDataRuntimeItems: []
        property var rtDataAllItems: []

        property var rtData: newRtData();

        function newRtData(values) {
            let newData = new Proxy({}, {
                get: function(target, name) {
                    return target.hasOwnProperty(name) ? target[name] : NaN;
                }
            });

            if (!values) {
                return newData;
            }

            var names = rtDataAllItems;
            for (var i = 0; i < names.length; i++) {
                newData[names[i]] = values[i];
            }
            return newData;
        }
    }

    QtObject {
        id: alerts

        property int activeAlertsMask: 0
        property int activeAlertHighlight: 0
        property int activeAlertCount: 0
        property bool isFatalActive: false
        property var activeAlerts: []
        property int activeFwFaultCode: 0
        property string activeFwFaultName: ""
        property var alertsLog: new Map()
        property int lastAlertsLogTicks: 0

        signal alertAdded(var alert)

        property Connections connections: Connections {
            target: state

            function onTimeReferenceChanged() {
                alerts.lastAlertsLogTicks = 0;
            }
        }

        readonly property int alert_fwFault: 1

        readonly property var alertData: new Map([
            [0, {
                "name": "None",
                "severity": "WARNING",
            }],
            [alert_fwFault, {
                "name": "Fault",
                "severity": "FATAL",
            }],
        ])

        readonly property var severityColors: new Map([
            ["FATAL", Utility.getAppHexColor("red")],
            ["ERROR", Utility.getAppHexColor("orange")],
            ["WARNING", Utility.getAppHexColor("lightText")],
        ])

        property Timer alertsListPollTimer: Timer {
            running: state.commsState === state.comms_Initialized
            repeat: true
            interval: 500
            triggeredOnStart: true
            onTriggered: {
                commands.sendAlertsList(alerts.lastAlertsLogTicks ? alerts.lastAlertsLogTicks : undefined);
            }
        }

        function getActiveAlertData(alertId) {
            if (alertId == alert_fwFault) {
                var data = Object.assign({}, alertData.get(alertId));
                data.name = data.name + ": " + activeFwFaultName;
                return data;
            } else {
                return alertData.get(alertId);
            }
        }

        function getAlertLogData(alertId, data) {
            return alertData.get(alertId);
        }

        function updateActiveAlerts() {
            if (activeAlertsMask & alert_fwFault) {
                activeAlertHighlight = alert_fwFault;
                activeAlertCount = 1;
                isFatalActive = true;
                activeAlerts = [
                    alert_fwFault,
                ];
            } else {
                activeAlertHighlight = 0;
                activeAlertCount = 0;
                isFatalActive = false;
                activeAlerts = [];
            }
        }

        function receiveAlertsList(dv, ind) {
            activeAlertsMask = dv.getUint32(ind); ind += 4;
            ind += 4;  // skip unused 4 bytes
            activeFwFaultCode = dv.getUint8(ind++);
            if (activeFwFaultCode > 0) {
                [activeFwFaultName, ind] = commands.getString(dv, ind);
            } else {
                activeFwFaultName = "";
            }
            updateActiveAlerts();

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

            var ids = [];
            for (var i = 0; i < count; i++) {
                var ticks = dv.getUint32(ind); ind += 4;
                var record = {
                    "ticks": ticks,
                    "id": dv.getUint8(ind++),
                    "active": dv.getUint8(ind++) & 0x1,
                    "code": dv.getUint8(ind++),
                };

                if (record.code > 0) {
                    [record.text, ind] = commands.getString(dv, ind);
                }

                var realTime = state.ticksToMsSinceEpoch(ticks);
                if (realTime === undefined) {
                    break;
                }

                record.time = realTime;

                var key = "%1_%2_%3".arg(ticks).arg(record.id).arg(record.active);
                if (alertsLog.has(key) && Math.abs(realTime - alertsLog.get(key).time) < 5000) {
                    continue;
                }

                alertsLog.set(key, record);
                lastAlertsLogTicks = ticks;
                alertAdded(record);
            }
        }

        function clearFatalError() {
            commands.sendAlertsClearFatal();
        }
    }

    QtObject {
        id: lights

        property bool enabled: state.capLights
        property bool lcm: state.capLightsExternal

        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

    // "#e57e20",
    // "#7640d6",
    // "#63c339",
    // "#cf44cd",
    // "#51c66c",
    // "#7134a3",
    // "#b1ba38",
    // "#6e6ee0",
    // "#e3ac34",
    // "#5e88d8",
    // "#e95314",
    // "#4bc6af",
    // "#e33421",
    // "#53b3bf",
    // "#dd4044",
    // "#69c180",
    // "#df4a98",
    // "#469138",
    // "#ce77d2",
    // "#859b3b",
    // "#584f99",
    // "#b58527",
    // "#893075",
    // "#3f9469",
    // "#cd3763",
    // "#3f6620",
    // "#b29ad7",
    // "#ce542e",
    // "#69aad7",
    // "#a15622",
    // "#36738b",
    // "#e7865d",
    // "#4f5984",
    // "#ddae68",
    // "#254f3a",
    // "#e095af",
    // "#34633c",
    // "#cc686b",
    // "#88bb93",
    // "#8f2f26",
    // "#4a8772",
    // "#803a4d",
    // "#b1b277",
    // "#a2678e",
    // "#827029",
    // "#c68f7e",
    // "#525023",
    // "#c08959",
    // "#788554",
    // "#734828"
    property var plotSeriesMetaData: [
        ["motor.erpm", {"name": "ERPM", "color": "#469138", "visible": true}],
        ["motor.duty_cycle", {"name": "Duty Cycle", "color": "#e3ac34", "visible": true}],
        ["motor.current", {"name": "Motor Current", "color": "#e33421", "visible": true}],
        ["motor.dir_current", {"name": "Directional Current", "color": "#cc686b", "visible": false}],
        ["motor.filt_current", {"name": "Filtered Current", "color": "#734828", "visible": false}],

        ["imu.pitch", {"name": "Pitch", "color": "#b1b277", "visible": true}],
        ["imu.balance_pitch", {"name": "Balance Pitch", "color": "#53b3bf", "visible": true}],

        ["torque_tilt.setpoint", {"name": "Torque Tilt Setpoint", "color": "#df4a98", "visible": true}],
        ["atr.setpoint", {"name": "ATR Setpoint", "color": "#7640d6", "visible": true}],
        ["brake_tilt.setpoint", {"name": "Brake Tilt Setpoint", "color": "#b29ad7", "visible": false}],
        ["turn_tilt.setpoint", {"name": "Turn Tilt Setpoint", "color": "#e095af", "visible": false}],
        ["remote.setpoint", {"name": "Remote Setpoint", "color": "#803a4d", "visible": false}],
        ["setpoint", {"name": "Setpoint", "color": "#e57e20", "visible": true}],

        ["motor.speed", {"name": "Speed", "color": "#3f9469", "visible": false}],
        ["motor.batt_voltage", {"name": "Battery Voltage", "color": "#6e6ee0", "visible": false}],
        ["motor.batt_current", {"name": "Battery Current", "color": "#cf44cd", "visible": false}],
        ["motor.mosfet_temp", {"name": "Controller Temp", "color": "#ddae68", "visible": false}],
        ["motor.motor_temp", {"name": "Motor Temp", "color": "#88bb93", "visible": false}],
        ["imu.roll", {"name": "Roll", "color": "#c68f7e", "visible": false}],
        ["footpad.adc1", {"name": "ADC1 Voltage", "color": "#69aad7", "visible": false}],
        ["footpad.adc2", {"name": "ADC2 Voltage", "color": "#4a8772", "visible": false}],
        ["balance_current", {"name": "Balance Current", "color": "#36738b", "visible": false}],
        ["booster.current", {"name": "Booster Current", "color": "#8f2f26", "visible": false}],
        ["atr.accel_diff", {"name": "ATR Accel Diff", "color": "#4f5984", "visible": false}],
        ["atr.speed_boost", {"name": "ATR Speed Boost", "color": "#34633c", "visible": false}],
        ["remote.input", {"name": "Remote Throttle", "color": "#525023", "visible": false}],

        ["state.running", {"name": "Running", "color": "#3f6620", "visible": false}],
        ["state.wheelslip", {"name": "Wheelslip", "color": "#893075", "visible": false}],
        ["footpad.state", {"name": "Footpad State", "color": "#584f99", "visible": false}],
        ["state.sat", {"name": "Setpoint Adjustment Type", "color": "#c08959", "visible": false}],
    ]

    property var plotSeriesExtraColors: [
        "#5e88d8",
        "#b1ba38",
        "#e7865d",
        "#7134a3",
        "#51c66c",
        "#a2678e",
        "#4bc6af",
        "#a15622",
        "#254f3a",
        "#827029",
        "#e95314",
        "#69c180",
        "#ce77d2",
        "#859b3b",
        "#dd4044",
        "#b58527",
        "#ce542e",
        "#788554",
        "#cd3763",
        "#63c339",
    ]

    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 Path fillIconPath
        property real iconSize: width * 0.7
        property color strokeColor: Utility.getAppHexColor("normalText")
        property color fillColor: Utility.getAppHexColor("normalText")
        property color bgColor: Utility.getAppHexColor("darkBackground")
        property var customBgColor

        onIconPathChanged: iconCanvas.requestPaint()
        onFillIconPathChanged: iconCanvas.requestPaint()

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

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

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

            color: button.customBgColor ?? button.bgColor

            states: [
                State {
                    name: "change"
                    when: button.pressed && !button.customBgColor
                    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 ToggleFloatingToolButton : FloatingToolButton {
        property bool autonomous: true
        property bool value: false

        property Path trueIconPath
        property Path falseIconPath
        property Path trueFillIconPath
        property Path falseFillIconPath

        iconPath: value ? trueIconPath : falseIconPath
        fillIconPath: value ? trueFillIconPath : falseFillIconPath

        onClicked: {
            if (autonomous) {
                value = !value;
            }
        }
    }

    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: 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: toFixed1Zero(topValue)
        }
    }

    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: mainItem

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

    component PlotData : QtObject {
        property int sampleSize: 0
        property var seriesIds
        property var series: []
        property var seriesSorted: []
        property var data: []
        property int ticksPerSecond
        // an offset added to timestamps if timestamps older than the last one
        // arrive, to ensure time is always increasing
        property real timeOffset: 0

        property var mins: []
        property var maxs: []
        property var scales: []

        property real timeStart
        property real timeEnd
        property real timeRange
        property real positiveRatio

        property int sampleNr: 0

        property bool initialized: true
        property bool dataReady: false

        signal dataUpdate
        signal scalesUpdate

        property var seriesMetaData
        property var seriesExtraColors
        // Static flags always added to data series, not part of the dynamic data series
        property var extraFlags: [
            "state.running",
            "state.wheelslip",
            "state.sat",
            "footpad.state",
        ]

        function reset() {
            sampleNr = 0;
            data = [];
            initialized = false;
            dataReady = false;
        }

        function init(seriesIds, ticksPerSec) {
            ticksPerSecond = ticksPerSec;
            initSeries(seriesIds, false);
        }

        function initSeries(ids, allVisible) {
            var smplSize = ids.length + extraFlags.length;
            sampleSize = smplSize;
            mins = Array(smplSize).fill(0);
            maxs = Array(smplSize).fill(0);
            scales = Array(smplSize).fill(1);

            if (arraysEqual(ids, seriesIds)) {
                initialized = true;
                return;
            }

            seriesIds = ids;
            var seriesMeta = seriesMetaData;

            var tmpMd = {};
            for (var i =0; i < seriesMeta.length; i++) {
                var sm = seriesMeta[i];
                var smDataCopy = Object.assign({}, sm[1]);
                tmpMd[sm[0]] = smDataCopy;
                smDataCopy.sortOrder = i + 100;
            }

            var srs = [];
            var srsSorted = [];
            var extrasOrder = 0;

            var push_series = function(id, i, visible) {
                var seriesMd = tmpMd[id] ?? {
                    "name": id,
                    "color": seriesExtraColors[extrasOrder],
                    "sortOrder": extrasOrder++,
                    "visible": true,
                };
                if (visible) {
                    seriesMd.visible = visible;
                }
                seriesMd.dataOrder = i;
                srs.push(seriesMd);
                srsSorted.push(seriesMd);
            }

            for (var i = 0; i < extraFlags.length; i++) {
                push_series(extraFlags[i], i, false);
            }

            for (var i = 0; i < ids.length; i++) {
                push_series(ids[i], i + extraFlags.length, !!allVisible);
            }

            srsSorted.sort((a, b) => a.sortOrder - b.sortOrder);
            series = srs;
            seriesSorted = srsSorted;
            initialized = true;
        }

        function addSample(sample, offset) {
            var sampleTime = sample[0] + timeOffset;
            var lastTime = data.length > 0 ? data[data.length - 1][0] : undefined;

            // only push sample if it's the next in row, assuming messages
            // can't change order, this should guarantee consistency
            //
            // also don't push if the timestamp is the same as that of the last
            // record, this can happen if two clients are connected to the same
            // VESC (they both poll for data and the messages get sent twice)
            if ((offset !== undefined && offset !== data.length) || lastTime === sampleTime) {
                return;
            }

            if (sampleTime < lastTime) {
                if (lastTime - sampleTime > 2 ** 31) {
                    // assume ticks have overflown
                    timeOffset = timeOffset + 2 ** 32;
                } else {
                    // a temporary disconnect (as of writing this code, doesn't
                    // normally occur without the AppUI being brought down)
                    timeOffset += lastTime + 10 * ticksPerSecond;
                }
            }

            if (timeOffset > 0) {
                sample[0] += timeOffset;
            }

            data.push(sample);

            for (var i = 0; i < sampleSize; i++) {
                if (sample[i + 1] > maxs[i]) {
                    maxs[i] = sample[i + 1];
                }
                if (sample[i + 1] < mins[i]) {
                    mins[i] = sample[i + 1];
                }
            }

            sampleNr = data.length;
        }

        function makeReady() {
            calculateRanges();
            dataReady = true;
            dataUpdate();
        }

        function calculateRanges() {
            if (data.length == 0) {
                return;
            }

            var lowestRatio = 1;
            var highestRatio = 0;
            var lMins = mins;
            var lMaxs = maxs;
            var srs = series;
            for (var i = 0; i < sampleSize; i++) {
                if (!srs[i].visible) {
                    continue;
                }

                if (lMaxs[i] > 1 || lMins[i] < -1) {
                    var ratio = clamp(lMaxs[i] / (lMaxs[i] - lMins[i]), 0, 1);
                    lowestRatio = Math.min(lowestRatio, ratio);
                    highestRatio = Math.max(highestRatio, ratio);
                }
            }

            var newRatio;
            if (lowestRatio < 0.5) {
                if (highestRatio > 0.5) {
                    newRatio = 0.5;
                } else {
                    newRatio = highestRatio;
                }
            } else {
                newRatio = lowestRatio;
            }

            positiveRatio = clamp(newRatio, 0.15, 0.85);

            var setScale = function(i, s) {
                if (s != scales[i]) {
                    scalesUpdate();
                }
                scales[i] = s;
            }

            var newScale;
            for (var i = 0; i < sampleSize; i++) {
                var minRatio = (1 - positiveRatio) / lMins[i];
                var maxRatio = positiveRatio / lMaxs[i];
                if (lMaxs[i] > 0) {
                    if (lMins[i] < 0) {
                        newScale = Math.min(maxRatio, -minRatio);
                    } else {
                        newScale = isFinite(maxRatio) ? maxRatio : 1;
                    }
                } else {
                    newScale = isFinite(minRatio) ? -minRatio : 1;
                }
                var rns = Math.min(newScale, srs[i].maxScale ?? 1);
                setScale(i, rns);
            }

            timeStart = data[0][0];
            timeEnd = data[data.length - 1][0];
            timeRange = timeEnd - timeStart;
        }
    }

    component RecordedPlotData : PlotData {
        id: recPlotData

        property bool noData: false
        property bool timeout: false

        property int sampleCount: 0
        property int requestTries: 0

        property Timer receiveTimeout: Timer {
            interval: 1000

            onTriggered: {
                recPlotData.requestPlot(true);
            }
        }

        function fetch(ticksPerSec) {
            reset();
            ticksPerSecond = ticksPerSec;
            noData = false;
            timeout = false;
            requestPlot();
        }

        function requestPlot(isARetry) {
            var reqTries = requestTries;

            if (!isARetry) {
                reqTries = 1;
            } else if (reqTries > 5) {
                timeout = true;
                return;
            }

            if (!initialized) {
                commands.sendDataRecordRequest(true);
            } else {
                commands.sendDataRecordRequest(false, sampleNr);
            }

            reqTries++;
            requestTries = reqTries;

            receiveTimeout.start();
        }

        function receiveHeader(dv, ind) {
            if (initialized) {
                // prevent processing messages in more than one AppUI instance
                return;
            }

            receiveTimeout.stop();

            sampleCount = dv.getUint32(ind); ind += 4;

            var sampleSize = dv.getUint8(ind++);
            var ids = [];
            for (var i = 0; i < sampleSize; i++) {
                var id = "";
                var size = dv.getUint8(ind++);
                for (var j = 0; j < size; j++) {
                    id += String.fromCharCode(dv.getUint8(ind++));
                }
                ids.push(id);
            }
            initSeries(ids, true);

            if (sampleCount === 0) {
                noData = true;
            } else {
                requestPlot();
            }
        }

        function receiveData(dv, ind) {
            receiveTimeout.stop();

            var offset = dv.getUint32(ind); ind += 4;

            var getFloat16 = commands.getFloat16;
            while (ind < dv.byteLength) {
                var time = dv.getUint32(ind); ind += 4;
                var flags = dv.getUint8(ind++);
                var sat = flags >> 4;
                var fp_state = (flags & 0b1100) >> 2;
                var wheelslip = (flags & 0b10) >> 1;
                var running = flags & 0b1;
                var data = [time, running, wheelslip, sat, fp_state];

                var remainingSampleSize = sampleSize - extraFlags.length;
                for (var i = 0; i < remainingSampleSize; i++) {
                    data.push(getFloat16(dv, ind)); ind += 2;
                }
                addSample(data, offset++);
            }

            if (sampleNr < sampleCount) {
                requestPlot();
            } else {
                makeReady();
            }
        }
    }

    component Plot : Rectangle {
        id: plot
        color: "#0b0b0b"

        property var plotData
        property int ticksPerSecond
        property bool followEnd: false
        property real startWindow: 10

        property real toolbarOffset: 0

        property bool showRecordDownload: false
        property int maxWindowMinutes
        property bool dotsEnabled: true

        function init(ticksPerSec) {
            ticksPerSecond = ticksPerSec;
            reset();
            // solves updating the plot (series) menu when the series in plotData have changed
            plotData = plotData;
        }

        function reset() {
            plotCanvas.reset();
        }

        function spawnCursor(cursorPos) {
            plotCanvas.spawnCursor(cursorPos);
        }

        function hideCursor() {
            plotCanvas.fadeCursor();
        }

        onVisibleChanged: {
            if (!visible) {
                menu.visible = false;
            }
        }

        Row {
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.leftMargin: toolbarOffset * unit + 0.1 * unit
            anchors.topMargin: 0.1 * unit
            spacing: 0.1 * unit
            z: parent.z + 5

            FloatingToolButton {
                width: 0.8 * unit
                height: 0.8 * unit
                visible: plotData.initialized

                iconPath: Path {
                    PathSvg {path: "M 10 15 L 40 15 M 10 25 L 40 25 M 10 35 L 40 35"}
                }

                onClicked: {
                    menu.visible = !menu.visible;
                }
            }

            FloatingToolButton {
                width: 0.8 * unit
                height: 0.8 * unit
                visible: plot.showRecordDownload

                iconPath: Path {
                    PathSvg {path: "M 8 38 L 42 38 M 25 10 L 25 38 M 14 23 L 25 38 M 36 23 L 25 38"}
                }

                onClicked: {
                    recordedPlot.show();
                }
            }

            ToggleFloatingToolButton {
                width: 0.8 * unit
                height: 0.8 * unit
                visible: plot.showRecordDownload

                autonomous: false
                value: mainItem.state.extraRecording

                customBgColor: value ? Utility.getAppHexColor("red") : Utility.getAppHexColor("normalBackground")
                fillColor: value ? Utility.getAppHexColor("normalText") : Utility.getAppHexColor("red")

                trueFillIconPath: Path {
                    PathSvg {path: "M 13 13 L 13 37 L 37 37 L 37 13 L 13 13"}
                }

                falseFillIconPath: Path {
                    PathAngleArc {centerX: 25; centerY: 25; radiusX: 12; radiusY: 12; sweepAngle: 360;}
                }

                onClicked: {
                    commands.sendDataRecordControl(commands.dr_RECORD, !value);
                }

                onPressAndHold: {
                    recMenu.visible = true;
                }

                Menu {
                    id: recMenu

                    CheckBox {
                        text: "Autostart"
                        checkable: true
                        checked: mainItem.state.extraRecAutostart
                        onClicked: {
                            commands.sendDataRecordControl(commands.dr_AUTOSTART, checked);
                        }
                    }

                    CheckBox {
                        text: "Autostop"
                        checkable: true
                        checked: mainItem.state.extraRecAutostop
                        onClicked: {
                            commands.sendDataRecordControl(commands.dr_AUTOSTOP, checked);
                        }
                    }
                }
            }

//            FloatingToolButton {
//                width: 0.8 * unit
//                height: 0.8 * unit
//
//                iconPath: Path {
//                    PathAngleArc {centerX: 25; centerY: 25; radiusX: 12; radiusY: 12; startAngle: 45; sweepAngle: 270;}
//                }
//
//                onClicked: {
//                    colorPreview.show();
//                }
//            }
        }

        Rectangle {
            id: menu
            z: parent.z + 10
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.topMargin: topMargin
            anchors.leftMargin: sideMargin
            height: menuScrollView.height
            width: menuScrollView.width
            visible: false

            property real topMargin: unit
            property real sideMargin: 0.2 * unit
            property real hPadding: 8
            property real vPadding: 4

            color: getDarkThemeColor("darkBackground");

            ScrollView {
                id: menuScrollView
                anchors.top: parent.top
                anchors.left: parent.left
                height: Math.min(contentHeight, plot.height - parent.topMargin - parent.sideMargin)
                width: menuColumn.width + 2 * menu.hPadding + 4
                contentWidth: availableWidth
                contentHeight: menuColumn.height + menu.vPadding
                clip: true

                Column {
                    id: menuColumn
                    anchors.top: parent.top
                    anchors.left: parent.left
                    anchors.topMargin: menu.vPadding * 0.5
                    spacing: 0

                    Repeater {
                        model: plotData.seriesSorted

                        Item {
                            width: menuRow.width
                            height: label.height + 2 * menu.vPadding

                            MouseArea {
                                anchors.top: parent.top
                                anchors.left: parent.left
                                width: menuColumn.width
                                height: parent.height
                                onClicked: itemCheckBox.toggle()
                            }

                            Row {
                                id: menuRow
                                anchors.left: parent.left
                                anchors.verticalCenter: parent.verticalCenter
                                anchors.leftMargin: menu.hPadding
                                spacing: 4

                                CheckBox {
                                    id: itemCheckBox
                                    height: label.height
                                    width: height

                                    checked: modelData.visible

                                    onCheckedChanged: {
                                        plot.plotData.seriesSorted[index].visible = checked;
                                        plot.plotData.calculateRanges();
                                        plotCanvas.requestPaint();
                                    }

                                    indicator: Rectangle {
                                        implicitHeight: parent.height * 0.9
                                        implicitWidth: implicitHeight
                                        y: parent.height / 2 - height / 2
                                        radius: 2
                                        color: "transparent"
                                        border.color: parent.checked ? getDarkThemeColor("lightText") : getDarkThemeColor("normalText")

                                        Rectangle {
                                            height: parent.height * 0.5
                                            width: height
                                            x: parent.width / 2 - width / 2
                                            y: parent.height / 2 - height / 2
                                            radius: 1
                                            color: parent.border.color
                                            visible: parent.parent.checked
                                        }
                                    }
                                }

                                Text {
                                    id: label
                                    text: modelData.name
                                    font.pointSize: 16
                                    color: modelData.color
                                }
                            }
                        }
                    }
                }
            }
        }

        PinchArea {
            anchors.fill: parent

            property real initialPlotWindow
            property real initialX
            property real lastScale

            onPinchStarted: {
                initialPlotWindow = plotCanvas.window;
                initialX = plotMouse.x(pinch.center);
                plotMover.grab();
            }

            onPinchUpdated: {
                plotMover.move(initialX - plotMouse.x(pinch.center), pinch.scale != lastScale);
                plotMover.zoom(initialPlotWindow / pinch.scale, plotMouse.x(pinch.center));
                lastScale = pinch.scale;
            }

            onPinchFinished: {
                plotMouse.release();
            }

            MouseArea {
                id: plotMouse
                anchors.fill: parent
                preventStealing: true

                property real initialX
                property real initialY

                property bool moving: false
                property bool holdCursor: false
                property bool moveCursor: false
                property bool cancelAction: false

                property real snap: 20

                function x(obj) {
                    return obj.x - plotCanvas.padding;
                }

                function dist2d(event) {
                    var dx = initialX - x(event);
                    var dy = initialY - event.y;
                    return Math.sqrt(dx * dx + dy * dy);
                }

                function release() {
                    moving = false;
                    holdCursor = false;
                    moveCursor = false;
                    cancelAction = false;
                    plotCanvas.fadeCursor(1);
                    plotMover.flick();
                }

                onWheel: {
                    if (!plotMover.grabbed) {
                        plotMover.grab();
                    }

                    plotMover.zoomAnimated(Math.max(0.75, 1 + wheel.angleDelta.y / 120 * 0.25), x(wheel));
                }

                onPressed: {
                    menu.visible = false;

                    initialX = x(mouse);
                    initialY = mouse.y;

                    var cursorPos = plotCanvas.getCursorPosIfCan();
                    if (plotMover.rolling) {
                        moving = true;
                    } else if (cursorPos !== null && dist(initialX, cursorPos) < snap) {
                        holdCursor = true;
                        return;
                    }

                    plotMover.grab();
                }

                onPositionChanged: {
                    if (cancelAction) {
                        return;
                    }

                    var d = initialX - x(mouse);
                    if (holdCursor) {
                        if (moveCursor) {
                            plotCanvas.spawnCursorCoord(x(mouse));
                        } else {
                            var yd = initialY - mouse.y;
                            var dist = Math.sqrt(yd * yd + d * d);
                            var angle = Math.acos(yd / dist);

                            // a cone of 30 degrees (15 to each side) or further than 10 pixels
                            if (angle > 0.2618 && dist > snap) {
                                if (yd > 30) {
                                    cancelAction = true;
                                } else {
                                    moveCursor = true;
                                }
                                plotCanvas.fadeCursor(1);
                                return;
                            }

                            plotCanvas.fadeCursor(clamp(1 - (yd - snap) / 100, 0, 1));
                        }
                    } else {
                        if (Math.abs(d) > snap) {
                            moving = true;
                        }
                        plotMover.move(d);
                    }
                }

                onReleased: {
                    release();
                }

                onPressAndHold: {
                    if (cancelAction) {
                        return;
                    }

                    if (!moving && (dist2d(mouse) < snap || !holdCursor)) {
                        holdCursor = true;
                        moveCursor = true;
                        plotCanvas.spawnCursorCoord(x(mouse));
                    }
                }
            }

            Canvas {
                id: plotCanvas
                anchors.centerIn: parent
                width: parent.width
                height: parent.height
                visible: plotData.dataReady
                contextType: "2d"

                property real position: NaN
                property real window

                property int padding: 8
                property int toolbarHeight: unit
                property int bottomHeight: 20

                property real length: width
                property real xLength: width - 2 * padding
                property real yLength: height - toolbarHeight - bottomHeight

                property var cursor: null
                property real cursorOpacity: 1

                // for hysteresis (to prevent blinking)
                property bool paintDotsHyst: false
                property real hystWindow

                Connections {
                    target: plotData

                    function onDataUpdate() {
                        if (isNaN(plotCanvas.position)) {
                            if (plot.followEnd) {
                                plotCanvas.position = plotData.timeEnd - plotCanvas.window;
                                plotMover.followPosition();
                            } else {
                                plotCanvas.position = plotData.timeStart;
                                plotCanvas.window = plotData.timeRange;
                            }
                        }

                        if (plot.followEnd && plotMover.following) {
                            plotMover.positionFollower = plotData.timeEnd - plotCanvas.window;
                        }
                    }

                    function onScalesUpdate() {
                        plotCanvas.requestPaint();
                    }
                }

                onVisibleChanged: requestPaint();
                onPositionChanged: requestPaint();
                onWindowChanged: requestPaint();
                onCursorChanged: requestPaint();
                onCursorOpacityChanged: requestPaint();

                QtObject {
                    id: plotMover

                    property real bounceOffset: 0.05
                    property real minWindow: 0.001 * plot.ticksPerSecond
                    property real maxWindow: Math.max(plot.followEnd ? plot.startWindow * plot.ticksPerSecond : 0, Math.min(plot.maxWindowMinutes * 60 * plot.ticksPerSecond, plotData.timeRange))

                    property real moveReferencePos
                    property real moveUnbluntedPos
                    property real animWin

                    property real zoomCenter

                    property real lastDist
                    property real lastTime
                    property real speed
                    property real zoomDampen
                    property real positionFollower
                    property real lastZoomCenter

                    property bool grabbed
                    property bool moving
                    property bool rolling
                    property bool following

                    onAnimWinChanged: {
                        zoom(animWin, zoomCenter);
                    }

                    onPositionFollowerChanged: {
                        if (following) {
                            plotCanvas.position = positionFollower;
                        }
                    }

                    Behavior on positionFollower {
                        id: positionFollowerBehavior
                        NumberAnimation {
                            easing.type: Easing.OutExpo
                            duration: 800
                        }
                    }

                    function followPosition() {
                        positionFollowerBehavior.enabled = false;
                        positionFollower = plotCanvas.position;
                        positionFollowerBehavior.enabled = true;
                        following = true;
                    }

                    function grab() {
                        moveReferencePos = plotCanvas.position;
                        animWin = plotCanvas.window;

                        lastDist = 0;
                        lastTime = 0;
                        speed = 0;

                        grabbed = true;
                        moving = false;
                        rolling = false;
                        following = false;

                        zoomAnim.stop();
                        bounceBack.stop();
                        bounceBackZoom.stop();
                    }

                    function release() {
                        if (grabbed) {
                            snapToBounds();
                        }
                        grabbed = false;
                    }

                    function blunt(x, a) {
                        return a * Math.exp(x / a) - a;
                    }

                    function moveRelative(pos, x) {
                        moveUnbluntedPos = plotCanvas.toPlotPos(pos, x);
                        var newPos = moveUnbluntedPos;

                        var endPos = plotData.timeEnd - plotCanvas.window;
                        var startPos = plot.followEnd && plotCanvas.window > plotData.timeRange ? endPos : plotData.timeStart;

                        var startDist = newPos - startPos;
                        if (startDist < 0) {
                            newPos += -startDist + blunt(startDist / plotCanvas.window, bounceOffset) * plotCanvas.window;
                        }

                        var endDist = endPos - newPos;
                        if (endDist < 0) {
                            newPos += endDist - blunt(endDist / plotCanvas.window, bounceOffset) * plotCanvas.window;
                        }

                        var ret = plotCanvas.toCanvasPos(newPos);
                        plotCanvas.position = newPos;

                        return ret;
                    }

                    function move(dist, isZooming) {
                        moveRelative(moveReferencePos, dist);

                        var now = Date.now();
                        var dt = now - lastTime;
                        if (dt === 0) {
                            // seems to happen on desktop with mouse only
                            return;
                        }

                        var alpha = 0.9;
                        if (isZooming) {
                            zoomDampen = alpha;
                        } else {
                            alpha -= zoomDampen;
                        }
                        var s = (dist - lastDist) / dt * 1000;
                        speed += alpha * (s - speed);
                        zoomDampen = Math.max(zoomDampen * 0.98 - 0.002, 0);

                        moving = true;
                        lastDist = dist;
                        lastTime = now;
                    }

                    function zoomPosOffset(oldWindow, newWindow, center) {
                        var perc = oldWindow / newWindow - 1;
                        return (plotCanvas.toPlotPos(plotCanvas.position, center, newWindow) - plotCanvas.position) * perc;
                    }

                    function zoom(newWindow, center) {
                        bounceBackZoom.stop();
                        lastZoomCenter = center;

                        var maxWin = maxWindow;
                        var maxDist = maxWin - newWindow;
                        if (maxDist < 0) {
                            newWindow = (1 - blunt(maxDist / maxWin, bounceOffset * 2)) * maxWin;
                        }

                        var minDist = newWindow - minWindow;
                        if (minDist < 0) {
                            newWindow = (1 + blunt(minDist / minWindow, bounceOffset * 2)) * minWindow;
                        }

                        var posOffset = zoomPosOffset(plotCanvas.window, newWindow, center);
                        moveReferencePos += posOffset;
                        plotCanvas.position = plotCanvas.position + posOffset;
                        plotCanvas.window = newWindow;
                    }

                    function flick() {
                        grabbed = false;
                        rolling = true;
                    }

                    function snapToBounds() {
                        var windowTo = clamp(plotCanvas.window, minWindow, maxWindow);

                        bounceBackZoom.stop();
                        bounceBackZoom.to = windowTo;
                        bounceBackZoom.start();

                        if (plot.followEnd && (plotCanvas.window > plotData.timeRange || plotCanvas.position > plotData.timeEnd - plotCanvas.window * 1.05)) {
                            plotMover.followPosition();
                        } else {
                            bounceBack.stop();
                            var newPos = plotCanvas.position + zoomPosOffset(plotCanvas.window, windowTo, lastZoomCenter);
                            bounceBack.to = clamp(newPos, plotData.timeStart, plotData.timeEnd - windowTo);
                            bounceBack.start();
                        }
                    }

                    function zoomAnimated(by, center) {
                        zoomCenter = center;

                        if (!zoomAnim.running) {
                            zoomAnim.to = animWin / by;
                        } else {
                            zoomAnim.stop();
                            zoomAnim.to /= by;
                        }

                        zoomAnim.start();
                    }
                }

                Timer {
                    id: plotFlickTimer
                    repeat: true
                    interval: dt * 1000
                    running: plotCanvas.visible

                    property real dt: 1 / 30

                    onTriggered: {
                        var sign = plotMover.speed < 0 ? -1 : 1;
                        if (plotMover.speed * sign > 0) {
                            var d = plotMover.speed * dt;

                            if (plotMover.rolling) {
                                var realD = plotMover.moveRelative(plotMover.moveUnbluntedPos, d);

                                if (sign * realD < sign * d - 0.000001) {
                                    // we hit the edge, real speed is now much slower
                                    plotMover.speed = realD / dt;
                                    plotMover.speed -= sign * 0.1;
                                } else {
                                    // very gradual deceleration during normal rolling
                                    plotMover.speed *= 0.98;
                                    plotMover.speed -= sign * 2;
                                }
                            } else if (!plotMover.moving) {
                                // fast decay when plot is being held in place without moving (i.e. no mouse events incoming)
                                plotMover.speed *= 0.7;
                                plotMover.speed -= sign * 20;
                            }

                            plotMover.moving = false;
                        }

                        if (plotMover.speed * sign <= 0) {
                            plotMover.speed = 0;
                            if (plotMover.rolling) {
                                plotMover.snapToBounds();
                            }
                            plotMover.rolling = false;
                        }
                    }
                }

                NumberAnimation {
                    id: zoomAnim
                    target: plotMover
                    property: "animWin"
                    easing.type: Easing.OutQuad
                    duration: 200

                    onFinished: {
                        plotMover.release();
                    }
                }

                NumberAnimation {
                    id: bounceBack
                    target: plotCanvas
                    property: "position"
                    easing {
                        type: Easing.OutBack
                        amplitude: 2.0
                        period: 0.5
                    }
                    duration: 300
                }

                NumberAnimation {
                    id: bounceBackZoom
                    target: plotCanvas
                    property: "window"
                    easing {
                        type: Easing.OutBack
                        amplitude: 2.0
                        period: 0.5
                    }
                    duration: 300
                }

                function toPlotPos(oldPos, x, win) {
                    if (win === undefined) {
                        win = window;
                    }
                    return oldPos + x / xLength * win;
                }

                function toCanvasPos(pos) {
                    return (pos - position) / window * xLength;
                }

                function isCursorPosValid(pos) {
                    if (pos < plotData.timeStart || pos < position || pos > position + window || pos > plotData.timeEnd) {
                        return false;
                    }

                    return true;
                }

                function spawnCursorCoord(x) {
                    spawnCursor(toPlotPos(position, x));
                }

                function spawnCursor(cursorPos) {
                    if (!isCursorPosValid(cursorPos)) {
                        return;
                    }

                    for (var i = 0; i < plotData.data.length; i++) {
                        var time1 = plotData.data[i][0];
                        if (cursorPos < time1) {
                            if (i === 0) {
                                cursor = plotData.data[i];
                            } else {
                                var time2 = plotData.data[i - 1][0];
                                if (dist(cursorPos, time1) < dist(cursorPos, time2)) {
                                    cursor = plotData.data[i];
                                } else {
                                    cursor = plotData.data[i - 1];
                                }
                            }
                            break;
                        }
                    }
                }

                function getCursorPosIfCan() {
                    if (!cursor) {
                        return null;
                    }

                    var pos = cursor[0];
                    if (!isCursorPosValid(pos)) {
                        return null;
                    }

                    return toCanvasPos(pos);
                }

                function fadeCursor(a=0) {
                    a = a * a * a;
                    if (a <= 0.05) {
                        cursor = null;
                    } else {
                        cursorOpacity = a;
                    }
                }

                function reset() {
                    position = NaN;
                    window = plot.startWindow * plot.ticksPerSecond;
                    cursor = null;
                }

                function pointYCoord(point, n) {
                    return point[n + 1] * yLength * plotData.scales[n];
                }

                function timeFormat(s, decimals) {
                    var res = "";
                    if (s > 60) {
                        var m = Math.floor(s / 60);
                        s -= m * 60;
                        if (m > 60) {
                            var h = Math.floor(m / 60);
                            m = String(m - h * 60).padStart(2, "0");
                            res += h + ":";
                        }
                        res += m + ":";
                    }

                    if (s < 10) {
                        res += "0";
                    }

                    if (decimals !== undefined) {
                        res += s.toFixed(decimals);
                    } else {
                        res += s.toFixed(6) / 1;
                    }

                    return res;
                }

                function paintXAxis(ctx, yMax, yMin) {
                    ctx.beginPath();
                    ctx.lineWidth = 1;
                    ctx.strokeStyle = getDarkThemeColor("disabledText");

                    ctx.moveTo(-padding, 0);
                    ctx.lineTo(xLength + padding, 0);
                    ctx.stroke();

                    if (window == 0 || xLength == 0) {
                        // prevent an infinite loop
                        return;
                    }

                    var basePixelsPerTick = 60;

                    var calcTick = function(extraWidth) {
                        var mult = 1;
                        var tick = window / xLength * (basePixelsPerTick + extraWidth);

                        while (tick < 1) {
                            mult *= 0.1;
                            tick *= 10;
                        }

                        while (tick > 10) {
                            mult *= 10;
                            tick *= 0.1;
                        }

                        if (tick > 5) {
                            tick = 5;
                        } else if (tick > 2) {
                            tick = 2;
                        } else {
                            tick = 1;
                        }

                        return tick * mult;
                    }

                    // estimate label width
                    var digitSize = ctx.measureText("8").width;
                    var sepSize = ctx.measureText(":").width;
                    var sampleTime = plotData.timeEnd;
                    var decs = Math.max(-Math.log10(window / xLength * basePixelsPerTick), 0);
                    var estimatedExtraWidth = decs * digitSize + sepSize;
                    if (sampleTime >= 60) {
                        estimatedExtraWidth += digitSize + sepSize;
                    }
                    if (sampleTime >= 600) {
                        estimatedExtraWidth += digitSize;
                    }
                    if (sampleTime >= 3600) {
                        estimatedExtraWidth += digitSize + sepSize;
                    }

                    var tick = calcTick(Math.max(0, estimatedExtraWidth - 10) * 3.6);

                    ctx.beginPath();
                    ctx.textAlign = "center";
                    ctx.fillStyle = getDarkThemeColor("disabledText");
                    ctx.strokeStyle = getDarkThemeColor("darkBackground");
                    var notch = Math.floor(position / tick) * tick;
                    var maxNotch = Math.ceil((position + window) / tick) * tick;
                    var ticksPerSec = plot.ticksPerSecond;
                    while (notch <= maxNotch) {
                        var coord = toCanvasPos(notch);
                        ctx.moveTo(coord, -yMax);
                        ctx.lineTo(coord, -yMin);

                        var decimals = Math.max(Math.ceil(-Math.log10(tick / ticksPerSec)), 0);
                        ctx.fillText(timeFormat(notch / ticksPerSec, decimals), coord, -yMin + 15);
                        ctx.stroke();

                        notch += tick;
                    }

                    ctx.stroke();
                }

                function paintCursor(ctx, yMax, yMin) {
                    var time = cursor[0];
                    if (time < position || time > position + window) {
                        return;
                    }

                    var originalAlpha = ctx.globalAlpha;
                    ctx.globalAlpha = cursorOpacity;

                    ctx.beginPath();
                    ctx.lineWidth = 1;
                    ctx.strokeStyle = getDarkThemeColor("normalText");

                    var cursorCoord = toCanvasPos(cursor[0]);
                    ctx.moveTo(cursorCoord, -yMax - 3);
                    ctx.lineTo(cursorCoord, -yMin + 3);
                    ctx.stroke();

                    ctx.textAlign = "center";
                    ctx.textBaseline = "top";
                    ctx.fillStyle = getDarkThemeColor("normalText");
                    var text = timeFormat(time / plot.ticksPerSecond);
                    var rectWidth = ctx.measureText(text).width + 20;
                    var rectHalfWidth = rectWidth / 2;
                    var removePadding = padding + 5;
                    var xTextCoord = clamp(cursorCoord, rectHalfWidth - removePadding, xLength - rectHalfWidth + removePadding - 1);
                    var yTextCoord = -yMin + 5;
                    ctx.rect(xTextCoord - rectHalfWidth, yTextCoord, rectWidth, 14);

                    var pc = plot.color;
                    ctx.fillStyle = Qt.rgba(pc.r, pc.g, pc.b, 0.7);
                    ctx.fill();
                    ctx.fillStyle = getDarkThemeColor("normalText");
                    ctx.fillText(text, xTextCoord, yTextCoord);
                    ctx.textBaseline = "alphabetic";

                    var textHeight = 10;
                    var yOffset = 4;
                    var labelHeight = textHeight + yOffset;
                    var topLimit = yMax - textHeight - 1;
                    var bottomLimit = yMin + 1;
                    var pd = plotData;
                    var series = pd.series;

                    var textX = cursorCoord;
                    var textFormat;
                    if (cursorCoord > xLength / 2) {
                        textX -= 4;
                        ctx.textAlign = "right";
                        textFormat = "%2  %1";
                    } else {
                        textX += 4;
                        ctx.textAlign = "left";
                        textFormat = "%1  %2";
                    }

                    var vals = [];
                    for (var n = 0; n < pd.sampleSize; n++) {
                        if (!series[n].visible) {
                            continue;
                        }
                        var y = pointYCoord(cursor, n);
                        if (!Number.isNaN(y)) {
                            vals.push([y, series[n].sortOrder, n]);
                        }
                    }

                    vals.sort((a, b) => b[0] !== a[0] ? b[0] - a[0] : a[1] - b[1]);

                    ctx.strokeStyle = "#000000";
                    ctx.lineWidth = 3;
                    for (var i = 0; i < vals.length; i++) {
                        var p = vals[i];
                        var n = p[2];
                        ctx.fillStyle = series[n].color;
                        var str = textFormat.arg(Number(cursor[n + 1].toPrecision(4))).arg(series[n].name);
                        var textY = Math.min(p[0] + yOffset, topLimit);
                        textY = Math.max(bottomLimit + (vals.length - i - 1) * labelHeight, textY);
                        topLimit = textY - labelHeight;

                        ctx.strokeText(str, textX, -textY);
                        ctx.fillText(str, textX, -textY);
                    }

                    ctx.globalAlpha = originalAlpha;
                }

                function paintSeries(ctx, yMax, yMin) {
                    var lineWidth = 1;
                    ctx.lineWidth = lineWidth;

                    // optimization: local variables are much faster than property resolution
                    var pd = plotData;
                    var data = pd.data;
                    var scales = pd.scales;
                    var sampleSize = pd.sampleSize;
                    var yLen = yLength;
                    var pos = position;
                    var win = window;
                    var xLen = xLength;
                    var dotsEnbld = plot.dotsEnabled;

                    // calculate start and end indices according to window
                    var start = 0;
                    var end = data.length;

                    var winNotChangedFactor = Math.abs(win - hystWindow) < 0.0001 ? 2 : 1;
                    hystWindow = win;

                    var pixelsPerTimeUnit = xLen / win;
                    var prevTime = null;
                    var paintDots = true;
                    var dotsThreshold = 20 / (paintDotsHyst ? 1 : (0.8 / winNotChangedFactor));
                    var distanceSum = 0;
                    var minDistance = 1e10;
                    var windowSize = 4;
                    var lastFour = [];
                    for (var i = start; i < end; i++) {
                        var t = data[i][0];
                        if (t < pos) {
                            start = i;
                        } else {
                            if (t > pos + win) {
                                end = Math.min(i + 1, data.length);
                                break;
                            }

                            // measure point distance until we measure enough to disable painting plot dots
                            // (or never reach enough distance and paint the dots)
                            if (prevTime !== null) {
                                var distance = (t - prevTime) * pixelsPerTimeUnit;
                                distanceSum += distance;
                                lastFour.push(distance);

                                if (lastFour.length > 4) {
                                    distanceSum -= lastFour.shift();
                                }

                                if (lastFour.length === 4) {
                                    if (distanceSum / 4 < dotsThreshold) {
                                        paintDots = false;
                                    }

                                    minDistance = Math.min(minDistance, distanceSum);
                                }
                            }
                            prevTime = t;
                        }
                    }

                    if (lastFour.length < 4 && distanceSum / lastFour.length < dotsThreshold) {
                        paintDots = false;
                    }
                    minDistance = Math.min(minDistance, distanceSum);

                    var dotDistThreshold = Math.max(minDistance / lastFour.length * 3, 10);

                    paintDotsHyst = paintDots;

                    var step = 0.5 / Screen.devicePixelRatio;
                    var justOutOfMinMax = false;
                    var halfASecondPixels = 0.5 * plot.ticksPerSecond * xLen / win;

                    var srsSorted = pd.seriesSorted;
                    for (var k = srsSorted.length - 1; k >= 0; k--) {
                        var series = srsSorted[k];
                        if (!series.visible) {
                            continue;
                        }

                        ctx.beginPath();
                        var color = series.color;
                        ctx.strokeStyle = color;
                        ctx.fillStyle = color;

                        var n = series.dataOrder;
                        var nScale = scales[n];
                        var min = -1e30;
                        var max = 1e30;
                        var lastX = -0.001;
                        var lastSampleX = -0.001;
                        var lastY = 0;
                        var lastDrawnX = 0;
                        var minMaxMode = false;
                        var drawnLastDot = false;
                        for (var i = start; i < end; i++) {
                            var point = data[i];
                            var nPoint = point[n + 1];

                            // optimization: instead of toCanvasPos(point[0])
                            var x = (point[0] - pos) / win * xLen;

                            // optimization: NaN check by comparison instead of Number.isNaN()
                            if (nPoint !== nPoint) {
                                lastSampleX = x;
                                continue;
                            }

                            var y = -nPoint * yLen * nScale;
                            var origX = x;

                            // handle trimming lines at plot edges
                            if (i === start && x < 0) {
                                var nextPoint = data[i + 1];
                                var nextX = (nextPoint[0] - pos) / win * xLen;
                                var nextY = -nextPoint[n + 1] * yLen * nScale;
                                y += (nextY - y) * x / (x - nextX);
                                x = 0;
                            } else if (i === end - 1 && x > xLen) {
                                y -= (y - lastY) * (x - xLen) / (x - lastX);
                                x = xLen;
                            }

                            if (i > start && x - lastX < step) {
                                minMaxMode = true;
                            }

                            if (minMaxMode) {
                                // min-max algorithm for dynamically "downsampling" the series
                                if (x - lastDrawnX > step) {
                                    var miny = min;
                                    var maxy = max;
                                    var dist = miny - maxy;
                                    if (dist < lineWidth) {
                                        var offset = (lineWidth - dist) / 2;
                                        miny += offset;
                                        maxy -= offset;
                                    }

                                    ctx.moveTo(lastX, miny);
                                    ctx.lineTo(lastX, maxy);

                                    var tmp = min;
                                    min = max;
                                    max = tmp;

                                    lastDrawnX = x;

                                    if (x - lastX > step) {
                                        minMaxMode = false;
                                        justOutOfMinMax = true;
                                        ctx.moveTo(lastX, lastY);
                                    }
                                }

                                min = y > min ? y : min;
                                max = y < max ? y : max;
                            }

                            if (!minMaxMode) {
                                if (dotsEnbld && origX - lastX > halfASecondPixels) {
                                    ctx.moveTo(x, y);
                                } else {
                                    ctx.lineTo(x, y);
                                }

                                min = y;
                                max = y;
                                lastDrawnX = x;
                                justOutOfMinMax = false;
                            }

                            if (dotsEnbld && i > start && origX >= 0 && (paintDots || x - lastSampleX > dotDistThreshold || origX - lastSampleX > halfASecondPixels)) {
                                ctx.stroke();
                                ctx.beginPath();
                                if (!drawnLastDot && lastX >= 0) {
                                    ctx.arc(lastX, lastY, 2.5, 0, 2 * Math.PI, false);
                                }
                                if (origX <= xLen + 0.001) {
                                    ctx.arc(x, y, 2.5, 0, 2 * Math.PI, false);
                                }
                                ctx.fill();
                                ctx.beginPath();
                                if (justOutOfMinMax) {
                                    ctx.moveTo(lastX, lastY);
                                } else {
                                    ctx.moveTo(x, y);
                                }
                                drawnLastDot = true;
                            } else {
                                // move to the same point to draw a series of disconnected lines,
                                // which is much faster
                                ctx.moveTo(x, y);
                                drawnLastDot = false;
                            }

                            lastX = origX;
                            lastSampleX = origX;
                            lastY = y;
                        }
                        ctx.stroke();
                    }
                }

                onPaint: {
                    if (!visible) {
                        return;
                    }

                    var ctx = getContext("2d");
                    ctx.reset();

                    if (!plotData.dataReady) {
                        return;
                    }

                    var yMax = yLength * plotData.positiveRatio;
                    var yMin = yLength * (plotData.positiveRatio - 1);

                    ctx.translate(padding, yMax + toolbarHeight);

                    paintXAxis(ctx, yMax, yMin);

                    paintSeries(ctx, yMax, yMin);

                    if (cursor !== null) {
                        paintCursor(ctx, yMax, yMin);
                    }
                }
            }
        }
    }

    component OverlayPlot : Plot {
        anchors.centerIn: parent
        height: vertical ? parent.width : parent.height
        width: vertical ? parent.height : parent.width
        rotation: vertical ? 90 : 0
        z: 100
        visible: false

        property bool vertical: parent.height > parent.width

        showRecordDownload: parent.state.capDataRecord
        toolbarOffset: 0.9

        FloatingToolButton {
            anchors.top: parent.top
            anchors.left: parent.left
            width: 0.8 * unit
            height: 0.8 * unit

            iconPath: Path {
                PathSvg {path: "M 15 15 L 35 35 M 15 35 L 35 15"}
            }

            onClicked: {
                parent.visible = false;
            }
        }
    }

    component StatusText : Item {
        property var globState

        MouseArea {
            anchors.fill: parent
            onClicked: alertsDialog.show()
        }

        states: [
            State {
                name: "specialMode"
                when: statusTextMode.visible || statusTextAlert.visible
                AnchorChanges {target: statusTextState; anchors.top: parent.top; anchors.verticalCenter: undefined;}
            }
        ]

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

        Glow {
            property bool red: globState.isError
            property bool dark: globState.darkride
            property bool blue: globState.pkgState == globState.s_Running

            anchors.fill: statusTextState
            radius: Math.round((dark ? 0.2 : 0.12) * unit)
            samples: radius * 2 + 1
            spread: red ? 0.6 : (dark ? 0.7 : 0.5)
            opacity: red || dark || blue ? 0.8 : 0.3

            color: {
                if (red) {
                    return Utility.getAppHexColor("red");
                } else if (dark) {
                    return Utility.isDarkMode() ? Utility.getAppHexColor("black") : Utility.getAppHexColor("disabledText");
                } else if (blue) {
                    return Utility.getAppHexColor("lightAccent");
                } else {
                    return Utility.getAppHexColor("lightText");
                }
            }
            source: statusTextState
        }

        Text {
            id: statusTextMode
            anchors.top: statusTextState.bottom
            width: parent.width
            color: globState.pkgMode == globState.m_Flywheel ? Utility.getAppHexColor("lightAccent") : Utility.getAppHexColor("lightText")
            font.pixelSize: statusTextAlert.visible ? fontSizeSuperSmall : fontSizeSmall
            font.family: "Exan"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            visible: globState.pkgMode != globState.m_Normal
            text: globState.pkgModeString
        }

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

        Text {
            id: statusTextAlert

            property var alert: alerts.getActiveAlertData(alerts.activeAlertHighlight)
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: statusTextMode.visible ? statusTextMode.bottom : statusTextState.bottom
            width: parent.width * 1.2
            color: alerts.severityColors.get(alert.severity)
            font.pixelSize: fontSizeSuperSmall
            font.family: "Mono"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideMiddle
            visible: alerts.activeAlertCount > 0
            text: alert.name
        }

        Glow {
            anchors.fill: statusTextAlert
            radius: Math.round(0.12 * unit)
            samples: radius * 2 + 1
            opacity: 0.3
            color: statusTextAlert.color
            visible: statusTextAlert.visible
            source: statusTextAlert
        }
    }

    function locateButton(comp, name) {
        for (var i = 0; i < comp.children.length; i++) {
            var child = comp.children[i];
            if (child.toString().startsWith("Button_QMLTYPE") && child.text === name) {
                return child;
            }
            var res = locateButton(child, name);
            if (res) {
                return res;
            }
        }

        return null;
    }

    Timer {
        id: onStartupTimer
        interval: 10

        onTriggered: {
            updateChecker.check();
        }
    }

    property var customConfigWriteButton: null

    Component.onCompleted: {
        if (typeof confCustomLoader !== typeof undefined) {
            // There is no reliable "config updated" signal, we have to hook onto
            // the VESC Tool custom config buttons (works for QML only, not
            // for the desktop app config page).
            print("Refloat: Hooking custom config Write button...");
            customConfigWriteButton = locateButton(confCustomLoader.item, "Write");
            if (customConfigWriteButton) {
                customConfigWriteButton.clicked.connect(packageConfig.configWritten);
            } else {
                print("Refloat: Failed to locate Write button.");
            }
        }

        if (preferences.showWelcomeDialog) {
            welcomeDialog.show();
        }

        onStartupTimer.start();
    }

    Component.onDestruction: {
        if (typeof confCustomLoader !== typeof undefined) {
            print("Refloat: Unhooking custom config Write button...");
            if (customConfigWriteButton) {
                customConfigWriteButton.clicked.disconnect(packageConfig.configWritten);
            } else {
                print("Refloat: Write button was not set.");
            }
        }
    }

    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
            property int sourceValue

            property int minValue: 0
            property int maxValue: 100

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

            TextField {
                id: textField
                implicitWidth: 50

                maximumLength: 4
                horizontalAlignment: TextInput.AlignRight
                inputMethodHints: Qt.ImhDigitsOnly

                property string prevText

                onTextChanged: {
                    if (text !== "") {
                        var number = Number(text);
                        if (number > maxValue) {
                            text = prevText;
                        } else if (number < minValue) {
                            parent.value = Math.max(number, minValue);
                        } else {
                            parent.value = number;
                            prevText = text;
                        }
                    }
                }

                onActiveFocusChanged: {
                    if (!activeFocus) {
                        text = parent.value;
                    }
                }

                Component.onCompleted: {
                    text = parent.sourceValue;
                    prevText = text;
                }
            }

            LText {
                text: parent.valueUnit
            }
        }

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

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

        component OptionDescription : NText {
            Layout.fillWidth: true
            Layout.leftMargin: 20
            Layout.rightMargin: 20
            Layout.topMargin: -7
            font.pointSize: 11
            horizontalAlignment: TextInput.AlignHCenter
            wrapMode: Text.WordWrap
        }

        component SetupDescription : NText {
            Layout.fillWidth: true
            horizontalAlignment: TextInput.AlignHCenter
            wrapMode: Text.WordWrap
        }

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

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

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

                    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

                        Heading {
                            text: "Disable Package"
                        }

                        SetupDescription {
                            text: "Before running the motor wizard, you need to disable the package to prevent the two fighting over the motor. After configuring your motor, you can re-enable the package."
                        }

                        Button {
                            Layout.alignment: Qt.AlignHCenter

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

                            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"
                        }

                        SetupDescription {
                            text: "Backups are stored in VESC Tool's internal storage."
                        }

                        SubHeading {
                            text: "Automatic Board Backup"
                        }

                        SetupDescription {
                            id: setupAutoBackupDate
                            font.pointSize: 10
                            horizontalAlignment: TextInput.AlignHCenter
                            property var backup: null
                            visible: !!backup
                            text: backup ? Qt.formatDateTime(backup.date) : ""

                            Connections {
                                target: tuneManager

                                function onAutoBackupFinished(backup) {
                                    setupAutoBackupDate.backup = backup;
                                }
                            }
                        }

                        Button {
                            Layout.alignment: Qt.AlignHCenter

                            text: "View"

                            onClicked: {
                                tuneManager.autoRestore();
                            }
                        }

                        SubHeading {
                            text: "Board Backup"
                        }

                        SetupDescription {
                            id: setupIdBackupDate
                            font.pointSize: 10
                            horizontalAlignment: TextInput.AlignHCenter
                            property var backup: null
                            visible: !!backup
                            text: backup ? Qt.formatDateTime(backup.date) : ""

                            Connections {
                                target: tuneManager

                                function onIdBackupFinished(backup) {
                                    setupIdBackupDate.backup = backup;
                                }
                            }
                        }

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

                            Button {
                                Layout.alignment: Qt.AlignHCenter

                                text: "Backup"

                                onClicked: {
                                    tuneManager.idBackup();
                                }
                            }

                            Button {
                                Layout.alignment: Qt.AlignHCenter

                                text: "View"

                                onClicked: {
                                    tuneManager.idRestore();
                                }
                            }
                        }

                        SubHeading {
                            text: "Shared Backup"
                        }

                        SetupDescription {
                            font.pointSize: 10
                            horizontalAlignment: TextInput.AlignHCenter
                            visible: !!tuneManager.fullBackup
                            text: tuneManager.fullBackup ? Qt.formatDateTime(tuneManager.fullBackup.date) : ""
                        }

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

                            Button {
                                Layout.alignment: Qt.AlignHCenter

                                text: "Backup"

                                onClicked: {
                                    tuneManager.globalBackup();
                                }
                            }

                            Button {
                                Layout.alignment: Qt.AlignHCenter

                                text: "View"

                                onClicked: {
                                    tuneManager.globalRestore();
                                }
                            }
                        }

                        // 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();
                        //        }
                        //    }
                        //}
                    }
                }

                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
                            minValue: 10
                            maxValue: 200
                            onValueChanged: {
                                preferences.speedDialMax = value
                            }
                        }

                        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: prefShowTuneDiffCount
                            checked: false
                            label: "Show changed options count on tunes"
                        }

                        IntTextField {
                            label: "Realtime plot maximum window"
                            valueUnit: "minutes"
                            sourceValue: preferences.plotMaxWindowMinutes
                            minValue: 1
                            maxValue: 1000
                            onValueChanged: {
                                preferences.plotMaxWindowMinutes = value
                            }
                        }

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

                        RightSwitch {
                            id: prefCheckForNewVersions
                            checked: true
                            label: "Check for new package versions"
                        }

                        Button {
                            Layout.alignment: Qt.AlignHCenter

                            text: "Show Tips && Tricks"

                            onClicked: {
                                uiHints.reset();
                                uiHintsRect.fill(true);
                                settingsDialog.close();
                            }
                        }
                    }
                }
            }
        }
    }

    BaseDialog {
        id: newPackageVersionDialog
        parent: ApplicationWindow.overlay

        title: "New Package Version"
        standardButtons: Dialog.Ok | Dialog.Abort

        property string version

        function show(newVersion) {
            version = newVersion;
            standardButton(Dialog.Abort).text = "Snooze for one month"

            open();
        }

        onRejected: {
            persistentData.packageUpdateSnooze = Date.now();
        }

        NText {
            width: newPackageVersionDialog.availableWidth
            font.pointSize: 12
            horizontalAlignment: Text.AlignHCenter
            wrapMode: TextEdit.WordWrap
            text: "New {{PACKAGE_NAME}} package version available: %1\n\nIt's recommended you update it in the Package Store.\n\nYour package configuration will be migrated automatically, no extra steps needed unless mentioned in package description. Having a manual XML or Start Page \"Backup Configs\" backup is still recommended.".arg(newPackageVersionDialog.version)
        }
    }

    BaseDialog {
        id: editBoardNameDialog

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

        onAccepted: {
            board.setName(boardNameInput.text);
            boardNameText.load();
        }

        TextField {
            id: boardNameInput
            width: editBoardNameDialog.availableWidth

            maximumLength: 30
            text: boardNameText.name
        }
    }

    BaseDialog {
        id: editTuneDialog

        title: tune ? "Edit Tune" : "Save Tune"
        standardButtons: !!tune ? Dialog.Save | Dialog.Discard | Dialog.Close : Dialog.Save | Dialog.Close

        property var tuneSlot
        property var tune: null

        function show(slot) {
            tuneSlot = slot;
            tune = tuneManager.loadTune(slot);
            editTuneDiff.setModel(packageConfig.diffConfig(tune).differs);
            editTuneDiff.reset();

            standardButton(Dialog.Save).enabled = !!tune;
            if (!!tune) {
                standardButton(Dialog.Discard).text = "Erase"
            }

            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 {
                    var success = tuneManager.updateTune(tune, saveTuneNameInput.text, saveTuneDescInput.text, saveTuneOverwrite.checked ? packageConfig.fetchConfig(true) : null);
                    if (!success) {
                        return;
                    }
                }
                tuneManager.saveTune(tuneSlot, tune);
                VescIf.emitStatusMessage(saveTuneNameInput.text + " saved", true);
            }
        }

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

        ColumnLayout {
            width: editTuneDialog.availableWidth

            NText {
                Layout.fillWidth: true

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

            RowLayout {
                Layout.fillWidth: true

                LText {
                    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") || ""
            }

            ConfigDiff {
                id: editTuneDiff
                Layout.fillWidth: true
                dialog: editTuneDialog
                isTune: true
            }

            CheckBox {
                id: saveTuneOverwrite

                checked: true
                visible: editTuneDialog.tune && !editTuneDiff.isEmpty
                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();
            // backwards compatibility: Check for the first item settings not being an array (if it is, redownload)
            if (tuneArchive && tuneArchive.length > 0 && !Array.isArray(tuneArchive[0].settings)) {
                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, false, true);
                    }
                }
            }
        }
    }

    BaseDialog {
        id: alertsDialog

        title: "Alerts"
        standardButtons: Dialog.Close

        function show() {
            alertsDialogListModel.set(alerts.alertsLog);
            activeAlertsItem.visible = alerts.activeAlertCount > 0;
            open();
        }

        Connections {
            target: alerts

            function onAlertAdded(alert) {
                if (alertsDialog.visible) {
                    alertsDialogListModel.add(alert);
                }
            }

            function onActiveAlertCountChanged() {
                if (alerts.activeAlertCount > 0) {
                    activeAlertsItem.visible = true;
                }
            }
        }

        ScrollView {
            anchors.fill: parent
            contentWidth: alertsDialog.availableWidth
            clip: true

            ColumnLayout {
                anchors.fill: parent

                component ErrHeader : NText {
                    Layout.fillWidth: true
                    font.pixelSize: 16
                    horizontalAlignment: Text.AlignHCenter
                }

                component ErrText : NText {
                    Layout.fillWidth: true
                    font.pixelSize: 12
                    font.family: "Mono"
                    color: Utility.getAppHexColor("red")
                }

                component ErrDesc : NText {
                    Layout.fillWidth: true
                    font.pixelSize: 12
                    horizontalAlignment: Text.AlignHCenter
                    wrapMode: Text.WordWrap
                }

                ErrHeader {
                    text: "Package Disabled"
                    visible: state.pkgState === state.s_Disabled
                }

                ErrDesc {
                    text: "Refloat package is disabled. After you're done with board setup, re-enable it."
                    visible: state.pkgState === state.s_Disabled
                }

                Button {
                    Layout.alignment: Qt.AlignHCenter

                    text: "Enable Refloat"
                    visible: state.pkgState === state.s_Disabled

                    onClicked: {
                        packageConfig.setDisabled(false);
                    }
                }

                ErrHeader {
                    text: "Connection Errors"
                    visible: state.configLoadingError || state.pkgState === state.s_Disconnected
                }

                ErrText {
                    text: "Refloat Cfg failed to load"
                    visible: state.configLoadingError
                }

                ErrDesc {
                    text: "Reconnecting to the board usually fixes this. If problem persists, try reinstalling the package."
                    visible: state.configLoadingError
                }

                ErrText {
                    text: "Package disconnected"
                    visible: state.pkgState === state.s_Disconnected
                }

                ErrDesc {
                    text: "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.";
                    visible: state.pkgState === state.s_Disconnected
                }

                Item {
                    id: activeAlertsItem
                    Layout.fillWidth: true

                    Column {
                        id: activeAlertsColumn
                        width: parent.width
                        property bool resetHeight: true

                        ErrHeader {
                            width: parent.width
                            text: "Active Alerts"
                        }

                        Item {
                            width: parent.width
                            height: 5
                        }

                        Repeater {
                            model: alerts.activeAlerts

                            ErrText {
                                property var alert: alerts.getActiveAlertData(modelData)
                                text: alert.name
                                color: alerts.severityColors.get(alert.severity)
                            }
                        }

                        onHeightChanged: {
                            if (resetHeight || !activeAlertsItem.visible || activeAlertsItem.implicitHeight < height) {
                                activeAlertsItem.implicitHeight = height;
                                resetHeight = false;
                            }
                        }
                    }

                    onVisibleChanged: {
                        activeAlertsColumn.resetHeight = true;
                    }
                }

                ErrHeader {
                    text: "Fatal Error"
                    visible: state.fatalError
                }

                // Fatal Error is so far only used for FW Fault
                ErrDesc {
                    text: "VESC reported a fault. Be very careful. You should not continue riding before you fix the root cause. " + (alerts.isFatalActive ? "The Fault is still active, you need to resolve the fault and then clear the error." : "The package will stay in an error state until you clear the error.")
                    visible: state.fatalError
                }

                Button {
                    Layout.alignment: Qt.AlignHCenter

                    text: "Clear Fatal Error"
                    visible: state.fatalError
                    enabled: !alerts.isFatalActive

                    onClicked: {
                        alerts.clearFatalError();
                    }
                }

                ErrHeader {
                    text: "Alert Log"
                }

                Rectangle {
                    color: Utility.getAppHexColor("darkBackground")
                    Layout.fillWidth: true
                    Layout.minimumHeight: 200

                    ListView {
                        id: alertsDialogList
                        anchors.fill: parent
                        anchors.margins: 6
                        clip: true

                        model: ListModel {
                            id: alertsDialogListModel

                            function add(alert) {
                                var wasAtEnd = alertsDialogList.atYEnd;

                                var model = Object.assign({}, alert);
                                Object.assign(model, alerts.getAlertLogData(alert.id));
                                if (!alert.active) {
                                    model.name = model.name + " ended";
                                } else {
                                    if (alert.id === alerts.alert_fwFault) {
                                        model.name = model.name + ": %1 (%2)".arg(model.text).arg(model.code);
                                    }
                                }
                                append(model);

                                if (wasAtEnd) {
                                    alertsDialogList.positionViewAtEnd();
                                }
                            }

                            function set(alertList) {
                                clear();
                                for (var alert of alertList.values()) {
                                    add(alert);
                                }
                            }
                        }

                        delegate: NText {
                            id: alertRecordText
                            width: alertsDialogList.width

                            font.pixelSize: 12
                            font.family: "Mono"
                            wrapMode: Text.WordWrap
                            text: "%1: [<font color=\"%2\">%3</font>] <font color=\"%4\">%5</font>".arg(Qt.formatTime(new Date(time), "hh:mm:ss.zzz")).arg(alerts.severityColors.get(severity)).arg(severity).arg(active ? Utility.getAppHexColor("lightText") : Utility.getAppHexColor("disabledText")).arg(name)
                        }
                    }
                }

                ErrText {
                    text: "Stop Condition: <font color=\"%1\">%2</font>".arg(Utility.getAppHexColor("lightText")).arg(state.stopConditionString)
                    visible: state.stopConditionString
                    color: Utility.getAppHexColor("normalText")
                }

                ErrText {
                    text: "Last Beep Reason: <font color=\"%1\">%2</font>".arg(Utility.getAppHexColor("lightText")).arg(state.beepReasonString)
                    visible: state.beepReasonString
                    color: Utility.getAppHexColor("normalText")
                }
            }
        }
    }

    component ConfigDiff : ColumnLayout {
        id: configDiff

        property BaseDialog dialog
        property bool isTune: false

        property bool isEmpty: diffModel.count === 0

        property real rowHeight: 30
        property real valueColumnWidth: 60

        property real animation: 0
        property real contentHeight: Math.min(maxHeight, diffView.contentHeight + diffHeader.height + 5)
        property real autoHeight: animation * contentHeight
        property real maxHeight

        Behavior on animation {
            id: animBehavior
            NumberAnimation {
                easing.type: Easing.InOutExpo
                duration: 400
            }
        }

        function reset() {
            animBehavior.enabled = false;
            diffCheckbox.checked = false;
            animation = 0;
            animBehavior.enabled = true;
        }

        function showHideDiff(show) {
            if (show) {
                maxHeight = dialog.fullHeight - dialog.height;
            }
            animation = show ? 1 : 0;
        }

        function displayValue(item, value) {
            var type = packageConfig.getParamType(item.name);
            if (type === "Double" || type === "Int") {
                return value.toString();
            } else if (type === "Bool") {
                return value ? "On" : "Off";
            } else if (type === "Enum") {
                return packageConfig.getEnumNames(item.name)[value];
            } else if (type === "String") {
                return value;
            } else if (type === "Bitfield") {
                return "[option set]";
            }

            return "[unknown]";
        }

        function setModel(m) {
            var model = diffModel;
            model.clear();
            var empty = true;
            for (var item of m) {
                item.value = displayValue(item, item.value);
                item.otherValue = displayValue(item, item.otherValue);
                model.append(item);
                empty = false;
            }
            if (empty) {
                diffCheckbox.checked = false;
            }
        }

        CheckBox {
            id: diffCheckbox
            implicitHeight: indicator.height
            Layout.leftMargin: -4
            visible: !isEmpty

            checked: false

            onCheckedChanged: {
                configDiff.showHideDiff(checked);
            }

            contentItem: Item {
                implicitWidth: checkLabel.implicitWidth + 22
                implicitHeight: checkLabel.implicitHeight

                Label {
                    id: checkLabel
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.leftMargin: 22
                    text: "Differences (%1)".arg(diffModel.count)
                    color: Utility.getAppHexColor("lightText")
                    verticalAlignment: Text.AlignVCenter
                }
            }

            MouseArea {
                anchors.fill: parent
                onClicked: parent.checked = !parent.checked
            }

            indicator: Item {
                width: 30
                height: 30
                Item {
                    anchors.centerIn: parent
                    height: 18
                    width: height / 2
                    clip: true
                    rotation: 90 * animation

                    Rectangle {
                        height: parent.height
                        width: height
                        x: -parent.width
                        rotation: 45
                        scale: 0.707
                        color: Utility.getAppHexColor("lightText")
                    }
                }
            }
        }

        Item {
            implicitHeight: configDiff.autoHeight
            Layout.fillWidth: true
            clip: true

            Row {
                id: diffHeader
                anchors.horizontalCenter: parent.horizontalCenter

                NText {
                    width: diffView.width - 2 * valueColumnWidth - 10
                    horizontalAlignment: Text.AlignLeft
                    verticalAlignment: Text.AlignVCenter
                    text: "Option"
                }

                NText {
                    width: valueColumnWidth
                    horizontalAlignment: Text.AlignRight
                    verticalAlignment: Text.AlignVCenter
                    text: isTune ? "Tune" : "Current";
                }

                NText {
                    width: valueColumnWidth
                    horizontalAlignment: Text.AlignRight
                    verticalAlignment: Text.AlignVCenter
                    text: isTune ? "Current" : "Backup";
                }
            }

            TableView {
                id: diffView
                anchors.top: diffHeader.bottom
                anchors.topMargin: 5
                height: parent.height - diffHeader.height - 5
                width: parent.width
                clip: true

                model: ListModel {
                    id: diffModel
                }

                delegate: Rectangle {
                    color: index % 2 === 0 ? Utility.getAppHexColor("lightBackground") : Utility.getAppHexColor("normalBackground")
                    implicitWidth: diffView.width
                    implicitHeight: rowHeight

                    Row {
                        id: diffRow
                        anchors.centerIn: parent

                        NText {
                            width: diffView.width - 2 * valueColumnWidth - 10
                            height: rowHeight
                            horizontalAlignment: Text.AlignLeft
                            verticalAlignment: Text.AlignVCenter
                            wrapMode: Text.WordWrap
                            fontSizeMode: Text.Fit
                            minimumPointSize: 4
                            text: packageConfig.getDisplayName(name)
                            color: Utility.getAppHexColor("lightText")
                        }

                        NText {
                            width: valueColumnWidth
                            height: rowHeight
                            horizontalAlignment: Text.AlignRight
                            verticalAlignment: Text.AlignVCenter
                            wrapMode: Text.WordWrap
                            fontSizeMode: Text.Fit
                            minimumPointSize: 4
                            text: isTune ? otherValue : value
                        }

                        NText {
                            width: valueColumnWidth
                            height: rowHeight
                            horizontalAlignment: Text.AlignRight
                            verticalAlignment: Text.AlignVCenter
                            wrapMode: Text.WordWrap
                            fontSizeMode: Text.Fit
                            minimumPointSize: 4
                            text: isTune ? value : otherValue
                            color: Utility.getAppHexColor("lightAccent")
                        }
                    }
                }
            }
        }

        NText {
            Layout.fillWidth: true
            horizontalAlignment: Text.AlignHCenter
            visible: isEmpty
            text: "There are no differences to your current config."
        }

        Item {
            Layout.fillWidth: true
        }
    }

    BaseDialog {
        id: applyConfigDialog
        parent: ApplicationWindow.overlay

        title: isTune ? "Apply Tune" : "Restore Config"

        property var config
        property bool automatic: false
        property bool isTune: false

        property var name: config ? config.name : "(Unknown)"
        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 : ""
        property var diff: config ? packageConfig.diffConfig(config).differs : []

        onDiffChanged: {
            applyConfigDiff.setModel(diff);
        }

        function show(cfg, auto, tune) {
            config = cfg;
            automatic = !!auto;
            isTune = !!tune;
            applyConfigDiff.reset();
            applyConfigDiff.isTune = isTune;
            if (!applyConfigDiff.isEmpty && !isTune) {
                standardButton(Dialog.Apply).text = "Restore";
            }
            open();
        }

        // workaround: the buttons sometimes wouldn't appear if declared via `standardButtons` only
        footer: DialogButtonBox {
            standardButtons: applyConfigDiff.isEmpty ? Dialog.Close : Dialog.Apply | Dialog.Close
        }

        function set(cfg) {
            config = cfg;
        }

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

        ColumnLayout {
            width: applyConfigDialog.availableWidth

            LText {
                Layout.fillWidth: true
                Layout.bottomMargin: 16
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                wrapMode: Text.WordWrap
                visible: applyConfigDialog.automatic
                text: "Your package config has been reset after installing a new version. Do you want to restore a backup?"
            }

            LText {
                id: applyConfigName
                Layout.fillWidth: true
                font.pointSize: 14
                horizontalAlignment: Text.AlignHCenter
                text: applyConfigDialog.name;
            }

            NText {
                Layout.fillWidth: true
                font.pointSize: 11
                horizontalAlignment: Text.AlignHCenter
                visible: !!applyConfigDialog.date
                text: applyConfigDialog.date
            }

            NText {
                Layout.fillWidth: true
                font.pointSize: 11
                horizontalAlignment: Text.AlignHCenter
                visible: !!applyConfigDialog.pkg
                text: "Stored by: " + applyConfigDialog.pkg
            }

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

            LText {
                Layout.fillWidth: true
                font.pointSize: 11
                horizontalAlignment: Text.AlignHCenter
                wrapMode: Text.WordWrap
                visible: !!applyConfigDialog.description
                text: applyConfigDialog.description
            }

            ConfigDiff {
                id: applyConfigDiff
                Layout.fillWidth: true
                dialog: applyConfigDialog
            }

            LText {
                Layout.fillWidth: true
                Layout.topMargin: 16
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                wrapMode: Text.WordWrap
                visible: !applyConfigDiff.isEmpty && !applyConfigDialog.isTune
                text: "Restoring this backup will overwrite your current config."
            }
        }
    }

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

        color: "#AA000000"

        function show() {
            visible = true;
        }

        Page {
            title: "Welcome to Refloat"
            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 Refloat package first. You can do so in Refloat Settings > Setup, which you can access using the cog button in the top right corner of the main Refloat screen.\n\nAfter the setup, you can safely verify your board balances correctly using the Handtest mode.\n\nTo configure Refloat, you need to set the High and Low Voltage Thresholds in Refloat 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
                    }
                }
            }
        }
    }

    Rectangle {
        id: uiHintsRect
        anchors.fill: parent
        z: 90
        visible: uiHintsSwipe.count > 0

        color: "#CC000000"

        SwipeView {
            id: uiHintsSwipe
            anchors.fill: parent
            clip: true

            property bool seenAll

            onCurrentIndexChanged: {
                if (currentIndex > 0) {
                    itemAt(currentIndex - 1).shown = true;
                }

                if (currentIndex == count - 1) {
                    seenAll = true;
                }
            }

            function clear() {
                for (let i = count - 1; i >= 0; i--) {
                    takeItem(i);
                }
            }

            function markAllShown() {
                for (let i = 0; i < count; i++) {
                    itemAt(i).shown = true;
                }
            }
        }

        NText {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.margins: 20
            font.pixelSize: 24
            text: "Tips & Tricks"
        }

        PageIndicator {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: uiHintsClose.top
            anchors.bottomMargin: 10

            currentIndex: uiHintsSwipe.currentIndex
            count: uiHintsSwipe.count
        }

        Button {
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 20
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.horizontalCenterOffset: -parent.width * 0.25
            visible: !uiHintsSwipe.seenAll
            text: "Skip now"
            onClicked: {
                uiHintsSwipe.clear();
            }
        }

        Button {
            id: uiHintsClose
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 20
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.horizontalCenterOffset: uiHintsSwipe.seenAll ? 0 : parent.width * 0.25
            text: uiHintsSwipe.seenAll ? "Close" : "Don't show again"
            onClicked: {
                uiHintsSwipe.markAllShown();
                uiHintsSwipe.clear();
            }
        }

        function fill(doDataRecord=false) {
            uiHints.fill(uiHintsSwipe);
            if (doDataRecord) {
                uiHints.fillDataRecord(uiHintsSwipe);
            }

            uiHintsSwipe.seenAll = uiHintsSwipe.currentIndex == uiHintsSwipe.count - 1;
        }

        function fillDataRecord() {
            uiHints.fillDataRecord(uiHintsSwipe);
            uiHintsSwipe.seenAll = uiHintsSwipe.currentIndex == uiHintsSwipe.count - 1;
        }

        Component.onCompleted: {
            fill();
        }

        Connections {
            target: state

            function onCommsInitialized() {
                uiHintsRect.fillDataRecord();
            }
        }
    }

// Color Preview dialog with an overview of the colors. Uncomment this and the
// FloatingToolButton that shows it to enable it.
//    Rectangle {
//        id: colorPreview
//        anchors.fill: parent
//        z: 100
//        visible: false
//
//        color: "#0b0b0b"
//
//        property var cData: []
//
//        Component.onCompleted: {
//            for (var i of plotSeriesMetaData) {
//                cData.push([i[0], i[1]["color"]]);
//            }
//            for (var i of plotSeriesExtraColors) {
//                cData.push(["", i]);
//            }
//            cData = cData;
//        }
//
//        function show() {
//            visible = true;
//        }
//
//        FloatingToolButton {
//            anchors.bottom: parent.bottom
//            anchors.right: parent.right
//            width: 0.6 * unit
//            height: 0.6 * unit
//
//            iconPath: Path {
//                PathSvg {path: "M 15 15 L 35 35 M 15 35 L 35 15"}
//            }
//
//            onClicked: {
//                parent.visible = false;
//            }
//        }
//
//        Grid {
//            id: cpGrid
//            anchors.fill: parent
//            anchors.margins: 10
//            columns: 2
//            spacing: 5
//            flow: Grid.TopToBottom
//
//            Repeater {
//                model: colorPreview.cData
//
//                Item {
//                    width: (cpGrid.width - cpGrid.spacing) / 2
//                    height: (cpGrid.height - 24 * cpGrid.spacing) / 25
//
//                    Rectangle {
//                        id: colRect
//                        anchors.left: parent.left
//                        anchors.top: parent.top
//                        width: parent.height
//                        height: parent.height
//                        color: modelData[1]
//                    }
//
//                    Rectangle {
//                        anchors.left: colRect.right
//                        anchors.bottom: colRect.bottom
//                        anchors.margins: 2
//                        width: parent.width - parent.height - 2
//                        height: 1
//                        color: modelData[1]
//                    }
//
//                    NText {
//                        anchors.left: colRect.right
//                        anchors.top: colRect.top
//                        anchors.leftMargin: 4
//                        anchors.topMargin: 2
//                        text: modelData[1]
//                        font.pixelSize: fontSizeSuperSmall
//                    }
//
//                    NText {
//                        anchors.right: parent.right
//                        anchors.top: colRect.top
//                        anchors.topMargin: 2
//                        text: modelData[0]
//                        font.pixelSize: fontSizeSuperSmall
//                    }
//                }
//            }
//        }
//    }

    OverlayPlot {
        id: recordedPlot

        maxWindowMinutes: preferences.plotMaxWindowMinutes

        plotData: RecordedPlotData {
            id: recordedPlotData
            seriesMetaData: plotSeriesMetaData
            seriesExtraColors: plotSeriesExtraColors
        }

        function show() {
            init(state.ticksPerSecond);
            plotData.fetch(state.ticksPerSecond);
            visible = true;
        }

        function hide() {
            visible = false;
        }

        Text {
            anchors.centerIn: parent
            visible: !recordedPlotData.dataReady

            property bool timeout: recordedPlotData.timeout

            color: timeout ? Utility.getAppHexColor("red") : getDarkThemeColor("lightText")
            font.pixelSize: fontSizeNormal
            horizontalAlignment: Text.AlignHCenter
            text: timeout ? "timeout" : recordedPlotData.noData ? "no plot data" : recordedPlotData.initialized ? "loading: %1".arg(recordedPlotData.sampleNr) : "loading..."
        }
    }

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

        ColumnLayout {
            Layout.fillWidth: true
            spacing: 0

            property real centralMargin: 0.08 * unit

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

                color: Utility.getAppHexColor("lightBackground")

                property real voltage: state.rtData["motor.batt_voltage"]
                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: parent.width * clamp(parent.value / 100, 0, 1)
                    height: parent.height
                    z: 1

                    color: Utility.getAppHexColor("lightAccent")
                }

                LText {
                    id: batteryBarVoltageValue
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.horizontalCenterOffset: -parent.width / 4
                    anchors.baseline: batteryBarValue.baseline
                    anchors.leftMargin: 0.3 * unit
                    z: 2

                    font.pixelSize: fontSizeNormal
                    text: {
                        var voltageString = "";

                        if (preferences.showBattVoltage) {
                            voltageString = "%1V".arg(toFixed1Zero(parent.voltage));
                        }

                        if (preferences.showBattVoltagePerCell) {
                            if (preferences.showBattVoltage) {
                                voltageString += " / ";
                            }
                            voltageString += "%1V".arg(toFixed2Zero(parent.voltage / motorConfig.batteryCells));
                        }

                        return voltageString;
                    }
                }

                Item {
                    id: chargingInfo
                    anchors.centerIn: parent
                    anchors.horizontalCenterOffset: parent.width / 4
                    height: parent.height - 0.08 * unit
                    width: 2 * unit
                    z: 2

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

                    LText {
                        anchors.horizontalCenter: parent.horizontalCenter
                        font.pixelSize: fontSizeSmall
                        text: "charging"
                    }

                    LText {
                        anchors.bottom: parent.bottom
                        width: parent.width / 2
                        font.pixelSize: fontSizeSmall
                        horizontalAlignment: Text.AlignHCenter
                        text: "%1A".arg(toFixed1Zero(parent.current))
                    }

                    LText {
                        anchors.bottom: parent.bottom
                        anchors.right: parent.right
                        width: parent.width / 2
                        font.pixelSize: fontSizeSmall
                        horizontalAlignment: Text.AlignHCenter
                        text: "%1V".arg(toFixed1Zero(parent.voltage))
                    }
                }
            }

            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 name
                    property string nameOrId

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

                    function load() {
                        var boardName = board.getName();
                        name = boardName;
                        nameOrId = boardName ?? board.getId();
                    }

                    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

                            value: Math.abs(state.rtData["motor.speed"]) * vescConfig.imperialFactor
                            property int erpm: Math.abs(state.rtData["motor.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 {
                            anchors.bottom: currentDialLabel.top
                            anchors.bottomMargin: -0.15 * unit
                            width: parent.height
                            height: width

                            value: state.rtData["motor.current"]

                            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 {
                            anchors.bottom: currentDialLabel.top
                            anchors.bottomMargin: -0.15 * unit
                            anchors.right: parent.right
                            width: parent.height
                            height: width

                            value: state.rtData["motor.duty_cycle"] * 100

                            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: state.rtData["motor.batt_current"]
                        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: state.rtData["footpad.adc1"]
                            property real rightVoltage: state.rtData["footpad.adc2"]

                            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(toFixed1Zero(parent.leftVoltage))
                            }

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

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

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

                            property real newValue: state.rtData["imu.roll"]
                            property real preValue: newValue
                            onNewValueChanged: {
                                if (Math.abs(newValue - preValue) > 180) {
                                    rollEasingBehavior.enabled = false;
                                    value += newValue > 0 ? 360 : -360;
                                    rollEasingBehavior.enabled = true;
                                }
                                value = newValue;
                                preValue = newValue;
                            }
                            property real value: newValue
                            onValueChanged: rollCanvas.requestPaint();

                            Behavior on value {
                                id: rollEasingBehavior
                                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: state.rtData["imu.pitch"]
                        property real balancePitchValue: state.rtData["imu.balance_pitch"]
                        property real setpointValue: state.rtData["setpoint"]

                        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(toFixed1Zero(value))
                    }
                }

                VerticalValue {
                    id: motorTemp
                    labelText: "motor"
                    unit: "°C"
                    warningThreshold: motorConfig.tempMotorStart - preferences.tempWarningOffset
                    value: state.rtData["motor.motor_temp"]
                }

                VerticalValue {
                    anchors.left: motorTemp.right
                    labelText: "controller"
                    unit: "°C"
                    warningThreshold: motorConfig.tempFetStart - preferences.tempWarningOffset
                    value: state.rtData["motor.mosfet_temp"]
                }

                StatusText {
                    id: statusText
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: parent.width - 4 * parent.verticalValueItemWidth
                    height: parent.height * 0.83
                    globState: state
                }

                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
                }
            }
        }

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

            TabButton {text: "Tunes"}
            TabButton {text: "Control"}
            TabButton {text: "Data"}

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

            onCurrentIndexChanged: {
                bottomStackLayout.currentIndex = currentIndex;
            }
        }

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

            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.tunes[slot] ? tuneManager.tunes[slot].name : ""
                            property var tuneDiff: tuneManager.tunes[slot] ? packageConfig.diffConfig(tuneManager.tunes[slot]).differs.length : -1

                            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) {
                                    var tune = tuneManager.loadTune(slot);
                                    packageConfig.applyConfig(tune);
                                }
                            }

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

                                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"
                                    }
                                }

                                DText {
                                    id: tuneButtonDiffCount
                                    anchors.bottom: parent.bottom
                                    anchors.right: parent.right

                                    font.pixelSize: fontSizeSmall
                                    visible: preferences.showTuneDiffCount && tuneDiff > 0
                                    horizontalAlignment: Text.AlignHRight
                                    text: tuneDiff
                                }
                            }

                            background: Rectangle {
                                id: buttonBg
                                z: 1

                                border.color: tuneDiff === 0 ? Utility.getAppHexColor("lightAccent") : 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;}
                                }
                            }

                            Glow {
                                anchors.fill: buttonBg
                                radius: Math.round(0.25 * unit)
                                samples: radius * 2 + 1
                                opacity: 0.3
                                color: Utility.getAppHexColor("lightAccent")
                                visible: tuneDiff === 0
                                source: buttonBg
                            }
                        }
                    }
                }

                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
                    }

                    LText {
                        anchors.horizontalCenter: parent.horizontalCenter

                        font.pixelSize: fontSizeBig
                        text: "Magic Flywheel"
                    }

                    LText {
                        width: parent.width
                        font.pixelSize: fontSizeNormal
                        wrapMode: Text.WordWrap
                        text: "Before enabling flywheel mode make sure that your board is nose up and perfectly balanced. To turn it off, you must disengage the board first."
                    }

                    Button {
                        id: flywheelOnButton
                        anchors.horizontalCenter: parent.horizontalCenter

                        enabled: [state.m_Normal, state.m_Flywheel].includes(state.pkgMode)
                        text: state.pkgMode === state.m_Flywheel ? "Off" : "On"
                        onClicked: {
                            commands.sendFlywheel(state.pkgMode === state.m_Normal);
                        }
                    }

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

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

                ToggleFloatingToolButton {
                    id: toggleDataPlotButton
                    anchors.top: parent.top
                    anchors.right: parent.right
                    width: 0.8 * unit
                    height: 0.8 * unit
                    z: 1
                    value: true

                    trueIconPath: Path {
                        PathSvg {path: "M 6 13 L 31 13 M 6 21 L 21 21 M 6 29 L 21 29 M 6 37 L 21 37 M 29 21 L 44 21 M 29 29 L 44 29 M 29 37 L 44 37"}
                    }

                    falseIconPath: Path {
                        PathSvg {path: "M 10 12 L 10 38 L 42 38 M 10 30 L 22 22 L 32 28 L 39 18"}
                    }
                }

                ScrollView {
                    anchors.fill: parent
                    contentWidth: availableWidth
                    clip: true
                    visible: !toggleDataPlotButton.value

                    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: ""

                            NText {
                                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
                            }
                        }

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

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

                        Row {
                            width: parent.width

                            Column {
                                width: parent.width / 2
                                spacing: 5
                                clip: true

                                Value {label: "Requested current"; unit: "A"; value: toFixed2Zero(state.rtData["balance_current"]);}
                                Value {label: "Filtered current"; unit: "A"; value: toFixed2Zero(state.rtData["motor.filt_current"]);}
                                Value {label: "ATR Accel. diff."; value: toFixed2Zero(state.rtData["atr.accel_diff"]);}
                                Value {label: "ATR Speed Boost"; unit: "%"; value: round(state.rtData["atr.speed_boost"] * 100);}
                                Value {label: "Booster current"; unit: "A"; value: toFixed2Zero(state.rtData["booster.current"]);}
                                Value {label: "Remote input"; unit: "%"; value: round(state.rtData["remote.input"] * 100);}
                            }

                            Column {
                                width: parent.width / 2
                                spacing: 5
                                clip: true

                                Value {label: "ATR setpoint"; unit: "°"; value: toFixed2Zero(state.rtData["atr.setpoint"]);}
                                Value {label: "Brake Tilt setpoint"; unit: "°"; value: toFixed2Zero(state.rtData["brake_tilt.setpoint"]);}
                                Value {label: "Torque Tilt setpoint"; unit: "°"; value: toFixed2Zero(state.rtData["torque_tilt.setpoint"]);}
                                Value {label: "Turn Tilt setpoint"; unit: "°"; value: toFixed2Zero(state.rtData["turn_tilt.setpoint"]);}
                                Value {label: "Remote Tilt setpoint"; unit: "°"; value: toFixed2Zero(state.rtData["remote.setpoint"]);}
                            }
                        }

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

                Plot {
                    id: rtPlot
                    anchors.fill: parent
                    visible: toggleDataPlotButton.value

                    followEnd: true
                    maxWindowMinutes: preferences.plotMaxWindowMinutes

                    showRecordDownload: state.capDataRecord

                    plotData: PlotData {
                        id: rtPlotData
                        seriesMetaData: plotSeriesMetaData
                        seriesExtraColors: plotSeriesExtraColors
                    }

                    Connections {
                        target: state

                        function onCommsInitialized() {
                            rtPlotData.init(state.rtDataAllItems, state.ticksPerSecond);
                            rtPlot.init(state.ticksPerSecond);
                        }
                    }
                }
            }
        }

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