cesium_mouse_handling.js

const highlighted = {
    feature: undefined,
    originalColor: new Cesium.Color(),
};

// HTML overlay for showing feature name on mouseover
const nameOverlay = document.createElement("div");
viewer.container.appendChild(nameOverlay);
nameOverlay.className = "backdrop";
nameOverlay.style.display = "none";
nameOverlay.style.position = "absolute";
nameOverlay.style.bottom = "0";
nameOverlay.style.left = "0";
nameOverlay.style["pointer-events"] = "none";
nameOverlay.style.padding = "4px";
nameOverlay.style.backgroundColor = "#f0f6fb";
// nameOverlay.style.Color = "white!important";

// Information about the currently selected feature
const selected = {
    feature: undefined,
    originalColor: new Cesium.Color(),
};

// An entity object which will hold info about the currently selected feature for infobox display
const selectedEntity = new Cesium.Entity();

// Get default left click handler for when a feature is not picked on left click
const clickHandler = viewer.screenSpaceEventHandler.getInputAction(
    Cesium.ScreenSpaceEventType.LEFT_CLICK
);

// Color a feature yellow on hover.
// viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(
//         movement
//     ) {
//         // If a feature was previously highlighted, undo the highlight
//         if (Cesium.defined(highlighted.feature)) {
//             highlighted.feature.color = highlighted.originalColor;
//             highlighted.feature = undefined;
//         }
//         // Pick a new feature
//         const pickedFeature = viewer.scene.pick(movement.endPosition);
//         if (!Cesium.defined(pickedFeature)) {
//             nameOverlay.style.display = "none";
//             return;
//         }
//         // A feature was picked, so show it's overlay content
//         nameOverlay.style.display = "block";
//         nameOverlay.style.bottom = `${viewer.canvas.clientHeight - movement.endPosition.y}px`;
//         nameOverlay.style.left = `${movement.endPosition.x}px`;
//         let building_gml_id = pickedFeature.getProperty("gml_id");
//         let building_gml_parent_id = pickedFeature.getProperty("gml_parent_id");
//         nameOverlay.innerHTML = `
//             <b>3D Building Model</b> <br>
//             GML ID: ${building_gml_id} <br>
//             GML Parent ID: ${building_gml_parent_id}
//         `;
//         // Highlight the feature if it's not already selected.
//         if (pickedFeature !== selected.feature) {
//             highlighted.feature = pickedFeature;
//             Cesium.Color.clone(
//                 pickedFeature.color,
//                 highlighted.originalColor
//             );
//             pickedFeature.color = Cesium.Color.YELLOW;
//         }
//     },
//     Cesium.ScreenSpaceEventType.MOUSE_MOVE);

// Color a feature on selection and show metadata in the InfoBox.
polygon_lorawan = []
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(
        movement
    ) {
        // If a feature was previously selected, undo the highlight
        if (Cesium.defined(selected.feature)) {
            selected.feature.color = selected.originalColor;
            selected.feature = undefined;
            $("#attribute-table-area").html("") // refresh the attribute table area
            $("#chart_intro").hide() // hide chart title
            $("#chart_area").hide() // hide chart title
            $("#sensor-hint").show()
        }
        // Pick a new feature
        
        const pickedFeature = viewer.scene.pick(movement.position);
        earthPosition = viewer.scene.pickPosition(movement.position);
        if (!Cesium.defined(pickedFeature)) {
            clickHandler(movement);
            return;
        }
        // Select the feature if it's not already selected
        if (selected.feature === pickedFeature) {
            return;
        }
        selected.feature = pickedFeature;
        last_picked_3DTiles = pickedFeature;
        last_position = movement.position
        //check if it is [3D Tile building] else [Pipe]. 
        if (!pickedFeature.id) {
            var all_selected_property_names = last_picked_3DTiles.getPropertyNames();

            // Save the selected feature's original color
            if (pickedFeature === highlighted.feature) {
                Cesium.Color.clone(
                    highlighted.originalColor,
                    selected.originalColor
                );
                highlighted.feature = undefined;
            } else {
                Cesium.Color.clone(pickedFeature.color, selected.originalColor);
            }
            // Highlight newly selected feature
            pickedFeature.color = Cesium.Color.LIME;
            // Set feature infobox description
            const featureName = pickedFeature.getProperty("name");
            last_picked_3DTiles_id = pickedFeature.getProperty("gml_id");
            last_picked_3DTiles_function = pickedFeature.getProperty("Function_DE");

            selectedEntity.name = featureName;
            attribute_text = ``
            for (let index = 0; index < all_selected_property_names.length; index++) {
                const property_name = all_selected_property_names[index];
                if (pickedFeature.getProperty(property_name) !== null) {
                    attribute_text += `<tr><th>${property_name}</th><td>${pickedFeature.getProperty(property_name)}</td></tr>`
                }
            }
            table_attribute_html = `
                <h5> <i class="bi bi-card-list"></i> Attribute Table</h5> 
                <table class="table">
                    <tbody>  
                    ${attribute_text}  
                    </tbody>
                </table>
            `
            $("#attribute-table-area").html(table_attribute_html)
            $(".lorawan_on_click").removeAttr('disabled');
        } else {
            $(".lorawan_on_click").prop("disabled", true);
            // This case, if users click on the PIPE station


            // console.log("This is PIPE")
            // This case is true when the click feature is PIPE!
            var pipe_id = pickedFeature.id.name
            console.log(`pipe_id: ${pipe_id}`)
            // var current_pipe_STA_URL = `http://193.196.138.56/iqg4icity_sensor/v1.1/MultiDatastreams(${pipe_sta_map[pipe_id]})/Observations?$orderby=phenomenonTime%20desc`
            var current_pipe_STA_URL = `https://covidsta.hft-stuttgart.de/iqg4icity_sensor/v1.1/MultiDatastreams(${pipe_sta_map[pipe_id]})/Observations?$orderby=phenomenonTime%20desc`

            $("#attribute-table-area").html(`
                <b>PIPE</b>: ${pipe_id} <br>
                <b>STA Multistream ID</b>: ${pipe_sta_map[pipe_id]} <br>
                <b>STA URL</b>: ${current_pipe_STA_URL}
            `)
            get_STA_Observation_Value(current_pipe_STA_URL, function (sta_result) {
                if (sta_result) {
                    console.log("STA result return successfully...")
                    console.log("Drawing Chart...")
                    var sta_result_time_iso = []
                    var sta_result_observation_total_energy = []
                    var sta_result_observation_power = []
                    var sta_result_observation_vorlauf = []
                    var sta_result_observation_ruecklauf = []
                    for (let index = 0; index < sta_result.length; index++) {
                        // example
                        // [
                        //     {
                        //       "@iot.id": 451441,
                        //       "phenomenonTime": "2022-07-21T14:30:00.000Z",
                        //       "result": [
                        //         129347, Total energy kWh
                        //         4.6,    Power kW
                        //         73.3,   Vorlauf - degree Celsius
                        //         68.4    Ruecklauf - degree Celsius
                        //       ],
                        //       "resultTime": null,
                        //       "@iot.selfLink": "http://193.196.138.56/iqg4icity_sensor/v1.1/Observations(451441)",
                        //       "FeatureOfInterest@iot.navigationLink": "http://193.196.138.56/iqg4icity_sensor/v1.1/Observations(451441)/FeatureOfInterest",
                        //       "MultiDatastream@iot.navigationLink": "http://193.196.138.56/iqg4icity_sensor/v1.1/Observations(451441)/MultiDatastream",
                        //       "Datastream@iot.navigationLink": "http://193.196.138.56/iqg4icity_sensor/v1.1/Observations(451441)/Datastream"
                        //     },
                        //     ...
                        // ]
                        try {
                            const sta_result_value = sta_result[sta_result.length - index];
                            if (sta_result_value) {
                                // only continue if the *sta_result_value* is defined.
                                sta_result_time_iso.push(sta_result_value["phenomenonTime"])
                                sta_result_observation_total_energy.push(sta_result_value["result"][0])
                                sta_result_observation_power.push(sta_result_value["result"][1])
                                sta_result_observation_vorlauf.push(sta_result_value["result"][2])
                                sta_result_observation_ruecklauf.push(sta_result_value["result"][3])
                                // cleaning data to draw chart...
                                if (index == sta_result.length - 1) {
                                    // last loop
    
                                    inputx = sta_result_time_iso
                                    inputy_vor_vs_rueck = [{
                                            name: "Vorlauf [degree Celsius]",
                                            data: sta_result_observation_vorlauf
                                        },
                                        {
                                            name: "Ruecklauf [degree Celsius]",
                                            data: sta_result_observation_ruecklauf
                                        }
                                    ]
                                    $("#chart_intro").show()
                                    $("#chart_area").show()
                                    $("#sensor-hint").hide()
                                    drawChart(inputx, inputy_vor_vs_rueck, "line", "#chart_area","","Temperature")
    
                                }
                            }
                            
                        } catch (error) {
                            console.log(`this loop has STA result: ${sta_result[sta_result.length - index]}`)
                            console.error(error)
                        }

                    }



                } else {
                    console.log("No STA result...")
                }
            });

        }
    },
    Cesium.ScreenSpaceEventType.LEFT_CLICK);

    $(".lorawan_on_click").click(function () {
        drawPolygon = true
        $(".lorawan_on_click").prop("disabled", true);
        if (drawPolygon) {
            var distance = parseInt($("#distanceStepRange").val())
            polygon_lorawan[last_picked_3DTiles_id] = viewer.entities.add({
                position: earthPosition,
                name: "Green circle at height with outline",
                ellipse: {
                  semiMinorAxis: distance, // e.g. 250
                  semiMajorAxis: distance, // e.g. 250
                  clampToGround: true,
                  material: new Cesium.ColorMaterialProperty(
                        // Cesium.Color.RED.withAlpha(0.7)
                        Cesium.Color.fromCssColorString(`${$("#lorawanColor").val()}80`)
                      )
                },
                label : {
                    text : last_picked_3DTiles_id,
                    font : '14pt monospace',
                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                    outlineWidth : 2,
                    verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                    pixelOffset : new Cesium.Cartesian2(0, -9)
                }
              });

            $("#lorawan_list").append(`
                
                <div class="row my-2" id="${last_picked_3DTiles_id}"> 
                    <div class="col">
                        ID: <b>${last_picked_3DTiles_id}</b>
                    </div>
                    <div class="col">
                        Function: <b>${last_picked_3DTiles_function}</b>
                    </div>
                    <div class="col">
                        Coverage: <b>${distance}</b> m.
                    </div>
                    <div class="col">
                        <button type="button" class="btn icon btn-danger removeLorawn" id="rm_${last_picked_3DTiles_id}" style="margin-top: -10px;">
                            <i class="bi bi-trash-fill"></i>
                        </button>
                    </div>
                    <hr>
                </div>
                
                
            `)

            $(".removeLorawn").click(function () {
                var this_id = this.id
                var tile_id = this_id.replace("rm_", "")
                console.log(`removing ${tile_id}`)
                viewer.entities.remove(polygon_lorawan[tile_id]);
                $(`#${tile_id}`).remove();
            });
        }
    })

    // $("#distanceStepRange").change(function () {
    //     $("#distanceStep").html($(this).val())
    // })

    $('#distanceStepRange').on('input', function() {
        $("#distanceStep").html($(this).val())
      });