WaterLevelSensor/Main.qml

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

Window {
    width: 960
    height: 1400
    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 water_color_above_alert: "#F00FAF0F"
    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 connection_text_string: "Reading WiFi Status..."
    property string alarm_status_text: ""
    property double water_tank_height_factor: 1.3
    property double water_tank_width_factor:  2
    property var root_config: ({})
    property var base_config: {
        "max": 0,
        "min": 0,
        "alert": 0,
        "interval": 0,
        "url": "none",
        "water_tank_width": 2,
        "water_tank_height": 1.3,
        "rate_of_fill_enable": true,
        "current_reading_enable": true,
        "percentage_enable": true,
        "filling_status_enable": true,
        "expected_to_fill_enable": true,
        "accent_color": "F05FAF5F",
        "dark_accent_color": "FF5F7F5F",
        "danger_color": "F0AF2F1F",
        "water_color": "F00F7FAF",
        "water_color_above_alert": "F00FAF0F",
        "background_color": "1F1F1F",
        "font_normal_text_size": 16,
        "font_enlarged_text_size": 20
    }

    Rectangle {
        anchors.fill: parent
        color: root.background_color
        id: root_rect
        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 {
                id: settings_icon
                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()
                }
            }

            SettingsBarIcon {
                height: top_bar.height - 20
                width: height
                anchors {
                    top: parent.top
                    left: parent.left
                    bottomMargin: 5
                    topMargin: 10
                    leftMargin: 5
                }
                text: "🖹"
                color: "#0A0F0F0F"
                radius: 100
                accent_color: root.accent_color
                onOpen: {
                    request_response_popup.open()
                }
            }
        }

        RequestResponsePopup {
            id: request_response_popup
            accent_color: root.accent_color
            font_enlarged_text_size: 20

        }

        SettingsPopup {
            id: settings_popup
            accent_color: root.accent_color
            background_color: root.background_color
            font_enlarged_text_size: root.font_enlarged_text_size
            font_normal_text_size: root.font_normal_text_size
            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);
            }
            onDeleteConfig: () => {
                config_interface.deleteConfig();
            }
        }

        Text {
            id: connection_text
            anchors {
                top: top_bar.bottom
                topMargin: 20
                horizontalCenter: parent.horizontalCenter
            }
            text: root.connection_text_string
            color: root.accent_color
            font.pointSize: root.font_normal_text_size
        }

        WaterTank {
            id: tank
            anchors {
                top: connection_text.bottom
                horizontalCenter: parent.horizontalCenter
                topMargin: 40
            }
            height: (root_rect.height) / root.water_tank_height_factor
            width: root_rect.width / root.water_tank_width_factor
            base_color: root.background_color
            distance: 0
            tank_lid_color: "#F0121212"
            tank_base_color: "#0FFFFFFF"
            water_level_color: root.water_color
            tank_base_border_color: "#F0121212"
            water_color_above_alert: root.water_color_above_alert
            min_thres_input: 0
            max_thres_input: 0
            text_color: root.accent_color
            font_normal_text_size: root.font_normal_text_size
            font_enlarged_text_size: root.font_enlarged_text_size
        }


        Text {
            id: alarm_status
            text: root.alarm_status_text
            visible: (root.alarm_status_text.length > 0 ) ? true : false
            anchors {
                bottom: status.top
                bottomMargin: 10
                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: 30
            }
            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, data) => {
            tank.setDistance(water_level);
            tank.rate_of_fill = fill_rate;
            tank.expected_to_fill = expected;
            status.color = root.accent_color;
            request_response_popup.request_response_string = data;
        }
        onRequestFailed: (data) => {
            status.color = root.danger_color;
            request_response_popup.request_response_string = data;
        }

        onConnectionText: (text, error) => {
        root.connection_text_string = text
        if(!error) {
                connection_text.color = root.accent_color
            }
            else {
                connection_text.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.";
            }
        }
        onConfigDeleted: () => {
             let config = base_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;
            if(config.water_tank_height === undefined) {
                config.water_tank_height = 2
            }
            if(config.water_tank_width === undefined) {
                config.water_tank_width = 2.2
            }
            if(config.rate_of_fill_enable === undefined) {
                config.rate_of_fill_enable = true
            }
            if(config.current_reading_enable === undefined) {
                config.current_reading_enable = true
            }
            if(config.percentage_enable === undefined) {
                config.percentage_enable = true
            }
            if(config.filling_status_enable === undefined) {
                config.filling_status_enable = true
            }
            if(config.expected_to_fill_enable === undefined) {
                config.expected_to_fill_enable = true
            }
            if(config.font_enlarged_text_size === undefined) {
                config.font_enlarged_text_size = 20
            }
            if(config.font_normal_text_size === undefined) {
                config.font_normal_text_size = 16
            }
            if(config.accent_color === undefined) {
                config.accent_color = "F05FAF5F"
            }
            if(config.danger_color === undefined) {
                config.danger_color = "F0AF2F1F"
            }
            if(config.dark_accent_color === undefined) {
                config.dark_accent_color = "FF5F7F5F"
            }
            if(config.water_color === undefined) {
                config.water_color = "F00F7FAF"
            }
            if(config.water_color_above_alert === undefined) {
                config.water_color_above_alert = "F00FAF0F"
            }
            if(config.background_color === undefined) {
                config.background_color = "1F1F1F"
            }
            root.water_tank_height_factor = config.water_tank_height
            root.water_tank_width_factor = config.water_tank_width
            root.accent_color = "#" + config.accent_color
            root.danger_color = "#" + config.danger_color
            root.dark_accent_color = "#" + config.dark_accent_color
            root.water_color = "#" + config.water_color
            root.water_color_above_alert = "#" + config.water_color_above_alert
            root.background_color = "#" + config.background_color
            root.font_enlarged_text_size = config.font_enlarged_text_size
            root.font_normal_text_size = config.font_normal_text_size

        }
    }
    onClosing: {
        requester.stopAlarm();
    }
}