WaterLevelSensor/Main.qml

import QtQuick
import WaterLevelRewrite
import QtQuick.Effects
import QtQuick.Controls
import QtQuick.Controls.Material

Window {
    width: 640
    height: 1080
    visible: true
    title: qsTr("Water Level Rewrite")
    id: root
    property color accent_color: "#F05FAF5F"
    property color dark_accent_color: "#FF5F7F5F"
    property color danger_color: "#F0AF2F1F"
    property color water_color: "#F00F7FAF"
    property color background_color: "#1F1F1F"
    Material.accent: root.accent_color
    property int font_enlarged_text_size: 20
    property int font_normal_text_size: 16
    property int distance_count_thres: 3
    property string mode: "http"
    property string status: "Initializing"
    property string alarm_status_text: ""
    property var root_config: ({})

    Rectangle {
        anchors.fill: parent
        color: root.background_color

        Rectangle {
            id: top_bar
            height: Math.min(root.height / 12, 100)
            width: root.width
            anchors {
                top: parent.top
                horizontalCenter: parent.horizontalCenter
                topMargin: 25
            }
            color: "#0A0F0F0F"
            SettingsBarIcon {
                height: top_bar.height - 20
                width: height
                anchors {
                    top: parent.top
                    right: parent.right
                    bottomMargin: 5
                    topMargin: 5
                    leftMargin: 5
                }
                color: "#0A0F0F0F"
                radius: 100
                accent_color: root.accent_color
                onOpen: {
                    settings_popup.open()
                }
            }
        }

        SettingsPopup {
            id: settings_popup
            accent_color: root.accent_color
            font_enlarged_text_size: 20
            function setConfig(new_config: var) {
                settings_popup.config.max = new_config.max
                settings_popup.config.min = new_config.min
                settings_popup.config.alert = new_config.alert
                settings_popup.config.url = new_config.url
            }
            onSaveConfig: (config) => {
                console.log("Saving config: ", config)
                config_interface.saveConfig(config);
            }
        }

        WaterTank {
            id: tank
            anchors {
                top: top_bar.bottom
                horizontalCenter: parent.horizontalCenter
                topMargin: 100
            }
            height: (parent.height - top_bar.height) / 2
            width: parent.width / 2.2
            base_color: root.background_color
            distance: 0
            tank_lid_color: "#F0121212"
            tank_base_color: "#0FFFFFFF"
            water_level_color: "#F00F7FAF"
            tank_base_border_color: "#F0121212"
            min_thres_input: 0
            max_thres_input: 0
        }


        Text {
            id: alarm_status
            text: root.alarm_status_text
            visible: (root.alarm_status_text.length > 0 ) ? true : false
            anchors {
                bottom: status.top
                bottomMargin: 20
                horizontalCenter: parent.horizontalCenter
            }
            horizontalAlignment: Text.AlignHCenter
            color: root.accent_color
            font.pointSize: root.font_normal_text_size
        }

        Text {
            id: status
            text: root.status
            anchors {
                bottom: button_base.top
                bottomMargin: 20
                horizontalCenter: parent.horizontalCenter
            }
            horizontalAlignment: Text.AlignHCenter
            color: root.accent_color
            font.pointSize: root.font_normal_text_size
        }

        Rectangle {
            id: button_base
            color: "#00000000"
            width: parent.width / 1.5
            height: parent.height / 20
            anchors {
                horizontalCenter: parent.horizontalCenter
                bottom: parent.bottom
                bottomMargin: 50
            }
            ConnectButton {
                id: connect_button
                width: parent.width / 2.1
                height: parent.height
                font_color: root.accent_color
                font_enlarged_text_size: root.font_enlarged_text_size
                font_normal_text_size: root.font_normal_text_size
                color: root.background_color
                accent_color: root.accent_color
                anchors {
                    left: parent.left
                    leftMargin: 5
                    bottom: parent.bottom
                    bottomMargin: 5
                }
                onConnect: {
                    if(connect_button.mode === 0)
                    {
                        requester.start();
                        root.status = "Waiting to Send.";
                    }
                    else {
                        root.status = "Stopped.";
                        requester.stop();
                    }
                }
            }

            ConnectButton {
                id: start_alarm
                width: parent.width / 2.1
                height: parent.height
                font_color: root.accent_color
                font_enlarged_text_size: root.font_enlarged_text_size
                font_normal_text_size: root.font_normal_text_size
                color: root.background_color
                accent_color: root.accent_color
                text: "Start Alarm"
                text2: "Stop Alarm"
                anchors {
                    left: connect_button.right
                    leftMargin: 10
                    bottom: parent.bottom
                    bottomMargin: 5
                }
                onConnect: {
                    if(start_alarm.mode === 0)
                    {
                        requester.startAlarm();
                        root.alarm_status_text = "Started Alarm; Waiting for Trigger: " + root.root_config.alert + "%"
                    }
                    else {
                        requester.stopAlarm();
                        root.alarm_status_text = "";
                    }
                }
            }

        }


    }

    RequestWorker {
        id: requester
        onStatusChanged: () => {
            root.status = requester.status;
        }
        onNetworkReply: (water_level, fill_rate, expected) => {
            tank.setDistance(water_level);
            tank.rate_of_fill = fill_rate;
            tank.expected_to_fill = expected;
            status.color = root.accent_color;
        }
        onRequestFailed: () => {
            status.color = root.danger_color;
        }
    }

    ConfigInterface {
        id: config_interface
        fileName: "config.json"
        onConfig: (config) => {
            settings_popup.config = config
            console.log("Loading initial config");
            setConfig(config);
            if(root.status === "Initializing") {
                root.status = "Press Connect.";
            }
        }
        function setConfig(config) {
            tank.setConfig(config);
            requester.setConfig(config);
            root.root_config = config;
        }
    }
    onClosing: {
        requester.stopAlarm();
    }
}