WaterLevelSensor/WaterTank.qml

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

Item {
    id: root
    property color base_color: "#000F0F0F"
    property color tank_lid_color: "#F0121212"
    property color tank_base_color: "#00FFFFFF"
    property color water_level_color: "#F00F7FAF"
    property color water_color_above_alert: "#F00FAF0F"
    property color tank_base_border_color: "#F0121212"
    property color text_color: "#F05FAF5F"
    property double height_max: tank_base.height - 10
    property int font_normal_text_size: 0
    property int font_enlarged_text_size: 0
    property double current_level: 0
    property double percentage_filled: 0
    property int distance: 0
    property double min_thres_input: 0
    property double max_thres_input: 0
    property double rate_of_fill: 0
    property double expected_to_fill: 0
    property double alert_threshold: 0
    property bool enable_current_reading: true
    property bool enable_percentage_reading: true
    property bool enable_filling_status: true
    property bool enable_rate_of_fill: true
    property bool enable_expected_to_fill: true

    Rectangle {
        id: base
        color: root.base_color
        anchors.fill: parent
        Rectangle {
            id: tank_lid
            color: root.tank_lid_color
            anchors {
                top: parent.top
                horizontalCenter: tank_base.horizontalCenter
                bottomMargin: -5
            }
            radius: 10
            width: tank_base.width / 3
            height: tank_base.height / 15
        }

        Rectangle {
            id: tank_base
            color: root.tank_base_color
            anchors {
                top: tank_lid.bottom
                horizontalCenter: parent.horizontalCenter
            }
            width: parent.width
            height: parent.height * 0.55
            border.color: root.tank_base_border_color
            border.width: 5
            radius: 4
        }

        Rectangle {
            id: water_level
            color: root.water_level_color
            height: root.current_level
            width: tank_base.width - 10
            anchors {
                bottom: tank_base.bottom
                horizontalCenter: tank_base.horizontalCenter
                bottomMargin: 5
            }
            Behavior on color {
                ColorAnimation {
                    duration: 200
                }
            }
            Behavior on height {
                NumberAnimation {
                    duration: 200
                }
            }
        }

        ScrollView {
            id: rect_base_scroll_view
            anchors {
                margins: 5
                top: tank_base.bottom
                bottom: parent.bottom
                horizontalCenter: parent.horizontalCenter
            }
            width: parent.width

            contentWidth: parent.width
            contentHeight: settings_column.implicitHeight
            Column {
                id: settings_column
                spacing: 10
                width: rect_base_scroll_view.width
                Text {
                    id: water_level_reading
                    text: "Current Reading: " + (root.distance / 10)+ " cm"
                    font.pointSize: root.font_normal_text_size
                    color: root.text_color
                    visible: enable_current_reading
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                    }
                    horizontalAlignment: Text.AlignHCenter
                }

                Text {
                    id: water_level_percentage
                    text: "Percentage: " + root.percentage_filled.toFixed(2) + " %"
                    font.pointSize: root.font_normal_text_size
                    visible: enable_percentage_reading
                    color: root.text_color
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                    }
                    horizontalAlignment: Text.AlignHCenter
                }

                Text {
                    id: fill_status
                    text: "Filling status: " + (( root.rate_of_fill > 0)? "Filling" : "Discharging")
                    font.pointSize: root.font_normal_text_size
                    color: root.text_color
                    visible: enable_filling_status
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                    }
                    horizontalAlignment: Text.AlignHCenter
                }
                Text {
                    id: rate_of_fill_label
                    text: "Rate of fill: " + root.rate_of_fill + " cm/s"
                    font.pointSize: root.font_normal_text_size
                    color: root.text_color
                    visible: enable_rate_of_fill
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                    }
                    horizontalAlignment: Text.AlignHCenter
                }
                Text {
                    id: expected_to_fill_label
                    text: "Expected to fill in: " + root.expected_to_fill + " s"
                    font.pointSize: root.font_normal_text_size
                    color: root.text_color
                    visible: (root.rate_of_fill > 0 && enable_expected_to_fill === true) ? true : false
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                    }
                    horizontalAlignment: Text.AlignHCenter
                }
            }
        }

    }
    function setConfig(config: var) {
        min_thres_input = config.min;
        max_thres_input = config.max;
        alert_threshold = config.alert;
        enable_current_reading = config.current_reading_enable;
        enable_percentage_reading = config.percentage_enable;
        enable_filling_status = config.filling_status_enable;
        enable_rate_of_fill = config.rate_of_fill_enable;
        enable_expected_to_fill = config.expected_to_fill_enable;

    }

    function setDistance(distance) {
        root.distance = distance;
        let distance_f = distance / 10;
        console.log("Distance changed to: ", distance_f);
        let current_min_reading = Math.max(0, min_thres_input);
        let effective_max_reading = Math.max(0, max_thres_input) - current_min_reading;
        let current_reading = Math.max(0, distance_f - current_min_reading);
        console.log("Current reading is: " + current_reading)
        console.log("Current min reading is: " + current_min_reading)
        console.log("Effective max reading is: " + effective_max_reading)

        let height_max_possible = root.height_max;
        let percentage_filled = Math.max(0, ((effective_max_reading - current_reading) / effective_max_reading * 100))
        let normalized_height = percentage_filled * height_max_possible / 100;
        console.log("Current reading is: " + current_reading)
        console.log("Normalized height is: " + normalized_height)
        console.log("Percentage filled is: " + percentage_filled)
        console.log("Alert threshold is: " + root.alert_threshold)
        console.log("Is level above alert threshold: " + (distance_f <= root.alert_threshold))
        root.current_level = normalized_height;
        root.percentage_filled = percentage_filled;

        if(distance_f <= root.alert_threshold) {
            water_level.color = water_color_above_alert
        }
        else {
            water_level.color = water_level_color
        }
    }
}