PubliHub :: Source Code Viewer

_{Opgelet: Bij PHP-pagina's of serverpagina's wordt enkel de gerenderde html getoond.}

Broncode van https://cdn.publihub.media/demos/sensormap

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CrowlKit Sensors</title>

    <!-- COPYRIGHT KRIS MERCKX - 17/10/2024 -->

    <!-- APP STYLING -->
    <link rel="stylesheet" href="https://cdn.publihub.media/css/app.css?v4.6">

    <!-- APP FUNCTIES :: CDN-connecties -->
    <script src="https://cdn.publihub.media/lib/app.js?v97"></script>

    <!-- GEWENSTE LIBRARIES -->
    <script src="https://cdn.publihub.media/lib/crowl.appsensors.js?v97"></script>
    <script src="https://cdn.publihub.media/lib/crowl.datastorage.js"></script>

    <!-- LEAFLET -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css">
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

</head>
<body data-theme="ocean-breeze">

    <app-part id="locatie">
        <div id="map" style="width:100%; height:300px;"></div>
    </app-part>

    <app-screen>
        <app-part id="sensordata"></app-part>

        <app-sensor type="geolocation" id="geolocation" refreshrate="15000"></app-sensor>
        <app-sensor type="accelerometer" id="accelerometer" refreshrate="15000"></app-sensor>
        <app-sensor type="battery" id="battery" refreshrate="1000"></app-sensor>
        <app-sensor type="gyroscope" id="gyroscope" refreshrate="15000"></app-sensor>
        <app-sensor type="magnetometer" id="magnetometer" refreshrate="15000"></app-sensor>
    </app-screen>

    <script>
    app.ready(function() {

        // --- LEAFLET KAART INITIALISEREN ---
        let map = L.map('map').setView([50.85, 4.35], 13); // startpositie tijdelijk
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19
        }).addTo(map);

        let marker = L.marker([50.85, 4.35]).addTo(map);

        // --- DATASTRUCTUUR ---
        var verzendgegevens = { 
            latitude: 0,
            longitude: 0,
            battery: 0,
            accelerometerx: 0,
            accelerometery: 0,
            accelerometerz: 0,
            gyroscopex: 0,
            gyroscopey: 0,
            gyroscopez: 0,
            magnetometerx: 0,
            magnetometery: 0,
            magnetometerz: 0
        };

        // --- LISTENERS ---
        id("battery").after("change").do(function(data){
            verzendgegevens.battery = data.detail.level;
        });

        id("magnetometer").after("change").do(function(data){
            verzendgegevens.magnetometerx = data.detail.x;
            verzendgegevens.magnetometery = data.detail.y;
            verzendgegevens.magnetometerz = data.detail.z;
        });

        id("accelerometer").after("change").do(function(data){
            verzendgegevens.accelerometerx = data.detail.x;
            verzendgegevens.accelerometery = data.detail.y;
            verzendgegevens.accelerometerz = data.detail.z;
        });

        id("gyroscope").after("change").do(function(data){
            verzendgegevens.gyroscopex = data.detail.x;
            verzendgegevens.gyroscopey = data.detail.y;
            verzendgegevens.gyroscopez = data.detail.z;
        });

        // --- GEOLOCATION: UPDATE KAART ---
        id("geolocation").after("change").do(function(data){
            verzendgegevens.latitude = data.detail.latitude;
            verzendgegevens.longitude = data.detail.longitude;

            // Kaart centreren & marker plaatsen
            map.setView([verzendgegevens.latitude, verzendgegevens.longitude], 15);
            marker.setLatLng([verzendgegevens.latitude, verzendgegevens.longitude]);
        });

    });
    </script>

</body>
</html>