Nessun risultato trovato.
<svg id="svgContainer" viewBox="0 0 1100 611" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <image href="" width="1100" height="611" />

    
    <!-- Informazioni sulla pista -->
    <foreignObject x="200" y="0" width="300" height="60">
        <div xmlns="http://www.w3.org/1999/xhtml" style="font-size: 12px; color: black; text-align: center;">
            <br>
            <img src="temperatura.png" width="20" height="20"> <span id="tempAmbiente">°C</span>
            <img src="asfalto.png" width="20" height="20"> <span id="tempAsfalto">°C</span>
            <img src="flag_y.png" id="flag_y_image" width="20" height="20"> <span id="flag_y"></span>
        </div>
    </foreignObject>


</svg>

<script>
    // Definizione delle variabili all'interno dello script JavaScript
    var div = ;
    var mov_x = ;
    var mov_z = ;
    console.log(div);
    function creaBandieraGialla(data) {
        var flag_yellow = document.createElement('img');
        flag_yellow.src = 'flag_y.png';
        flag_yellow.width = 20;
        flag_yellow.height = 20;
        flag_yellow.id = 'flag_y_image';
        var flagContainer = document.getElementById('svgContainer');
        flagContainer.appendChild(flag_yellow);

        // Imposta la posizione della bandiera gialla
        flag_yellow.style.position = 'absolute';
        flag_yellow.style.left = '200px'; // Imposta la posizione x della bandiera
        flag_yellow.style.top = '0px'; // Imposta la posizione y della bandiera
    }

    function rimuoviBandieraGialla() {
        var flag_yellow_img = document.getElementById('flag_y_image');
        if (flag_yellow_img) {
            flag_yellow_img.parentNode.removeChild(flag_yellow_img);
        }
    }



    function updateMacchinePosizioni() {
        fetch('aggiorna_posizione.php')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Errore nella richiesta AJAX');
                }
                return response.json();
            })
            .then(data => {
                data.forEach(function(element) {
                    var num = element.numero_driver;
                    var x = (element.x / div) + mov_x;
                    var z = (element.z / div) + mov_z;
                    var speed = element.speed;
                    var gear = element.gear;


                    updateMacchinaPosition(num, x, z,speed,gear);
                });
                // Aggiorna le informazioni sulla temperatura
                var tempAmbiente = document.getElementById('tempAmbiente');
                var tempAsfalto = document.getElementById('tempAsfalto');
                if (tempAmbiente && tempAsfalto) {
                    tempAmbiente.textContent = data[0].temp_amb + '°C';
                    tempAsfalto.textContent = data[0].temp_pista + '°C';
                }

                // Aggiorna Info e Bandiera gialla se esiste
                var flag_yellow = document.getElementById('flag_y');
                var flag_yellow_img = document.getElementById('flag_y_image');
                console.log(data[0].flag_y ,data[0].flag_y1,data[0].flag_y2,data[0].flag_y3);
                if (data[0].flag_y == 0 && data[0].flag_y1 == 0 && data[0].flag_y2 == 0 && data[0].flag_y3 == 0) {
                    console.log("Nascondo la Bandiera");
                    flag_yellow.textContent = '';
                    flag_yellow_img.src = 'flag_invisible.png';
                } else {
                    // Imposta il testo della bandiera gialla in base ai valori dei campi
                    if (data[0].flag_y == 1) {
                        flag_yellow.textContent = '';
                    }
                    if (data[0].flag_y1 == 1) {
                        console.log("scrivo settore 1");
                        flag_yellow.textContent = 'Settore 1';
                    }
                    if (data[0].flag_y2 == 1) {
                        flag_yellow.textContent = 'Settore 2';
                    }
                    if (data[0].flag_y3 == 1) {
                        flag_yellow.textContent = 'Settore 3';
                    }
                    flag_yellow_img.src = 'flag_y.png';
                    // Mostra la bandiera gialla se non è già visibile
                    console.log("Mostro la Bandiera",flag_yellow_img.style.left);
                }

                rimuoviMacchineAssenti(data);
            })
            .catch(error => {
                console.error('Si è verificato un errore:', error);
            });
    }

    function rimuoviMacchineAssenti(data) {
        var container = document.getElementById('svgContainer');
        var circles = container.querySelectorAll('circle');
        circles.forEach(function(circle) {
            var num = circle.id.replace('macchina-', '');
            var text = container.querySelector('text[data-numero-driver="' + num + '"]');
            if (!data.find(element => element.numero_driver == num)) {
                container.removeChild(circle);
                if (text) {
                    container.removeChild(text);
                }
            }
        });
    }
    function updateMacchinaPosition(num, x, y, speed, gear) {
        var macchina = document.getElementById('macchina-' + num);
        if (macchina) {
            console.log("aggiorno posizione macchina");
            macchina.setAttribute('cx', x);
            macchina.setAttribute('cy', y);

            var text = document.querySelector('#macchina-' + num + ' + text');
            if (text) {
                text.setAttribute('x', x);
                text.setAttribute('y', y+12);

                // Imposta il testo come una stringa multilinea
                text.innerHTML = `
                    <tspan x="${x+1}" dy="-1em" font-weight="bold">${num}</tspan>
                    <tspan x="${x}" dy="1.2em">${speed} km/h</tspan>
                    <tspan x="${x}" dy="1.2em">Gear: ${gear}</tspan>
                `;
            }
        } else {
            console.log("Aggiungo la nuova macchina nel container");

            // Se la macchina non esiste, aggiungila al container
            var container = document.getElementById('svgContainer');
            var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            circle.setAttribute('id', 'macchina-' + num);
            circle.setAttribute('cx', x);
            circle.setAttribute('cy', y);
            circle.setAttribute('r', '7');
            circle.setAttribute('fill', 'grey');
            container.appendChild(circle);

            var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            text.setAttribute('x', x);
            text.setAttribute('y', y+12);
            text.setAttribute('fill', 'black');
            text.setAttribute('font-size', '10');
            text.setAttribute('text-anchor', 'middle');
            text.setAttribute('alignment-baseline', 'middle');
            text.setAttribute('data-numero-driver', num);


            // Imposta il testo come una stringa multilinea
            text.innerHTML = `
                <tspan x="${x+1}" dy="-1em" font-weight="bold">${num}</tspan>
                <tspan x="${x}" dy="1.2em">${speed} km/h</tspan>
                <tspan x="${x}" dy="1.2em">Gear: ${gear}</tspan>
            `;
            container.appendChild(text);
        }
    }
    setInterval(updateMacchinePosizioni, 500);
</script>