Problem with a script

[ivanpesenti]

<div class="container">
    <div class="circle" data-degree="20" data-color="#ff2972">
        <h2 class="number"><span>%</span></h2>
       
    </div>

    <script>
    document.addEventListener("DOMContentLoaded", function(event) {
    let circle = document.querySelectorAll('.circle');
    
    // Itera su tutti gli elementi con classe 'circle'
    circle.forEach(function(progress) {
    let degree = 0;
    var targetDegree = parseInt(progress.getAttribute('data-degree'));
    let color = progress.getAttribute('data-color');
    let number = progress.querySelector('.number');
    
    var interval = setInterval(function() {
    degree += 1;
    if (degree > targetDegree) {
    clearInterval(interval);
    return;
    }
    let maxAngle = 100; // 50% rappresenta un semicerchio
    let actualAngle = (degree / 50) * maxAngle; // Calcola l'angolo corretto
    
    progress.style.background = `conic-gradient(${color} ${actualAngle}%, #222 ${actualAngle}%)`;
    number.innerHTML = degree + '<span>C°</span>';
    
    // Aggiungi console.log per il debug
    console.log("Degree:", degree);
    console.log("Target Degree:", targetDegree);
    console.log("Actual Angle:", actualAngle);
    }, 100);
    });
    });
    </script>
    <style>
        .container {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 40px;

        }

        .container .circle {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 130px;
            height: 130px;
            border-radius: 50%;
        }

        .container .circle::before {
            content: '';
            position: absolute;
            inset: 5px;
            border-radius: 50%;
            background: #222;
            opacity: 0.8;
        }

        .container .circle::after {
            content: '';
            position: absolute;
            width: 70px;
            height: 70px;
            background: #333;
            border: 12px solid #4d4c51;
            border-radius: 50%;
            box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.25),
                0 10px 10px rgba(0, 0, 0, 0.75),
                0 -2px 2px rgba(255, 255, 255, 0.5),
                inset 0 4px 2px rgba(0, 0, 0, 0.25),
                inset 0 -2px 2px rgba(255, 255, 255, 0.5);
        }

        .container .circle .number {
            position: relative;
            color: #fff;
            z-index: 10;
            line-height: 1em;
            font-size: 1.5em;
            font-weight: 400;
        }
        
    </style>

have a problem: the script on visual code all works fine on template node the script doesnt work someone can help me why this happen tx a lot

[TotallyInformation]

We probably need some clues here.

I assume you are using http-in/-out nodes?

Have you checked the browser console for errors?

Is it some part of the script not working - e.g. the setInterval or all of it?

The code is hard to follow as you've lost all the indentation, have you put a console.log outside the event listener to make sure the script block is being called at all?

[ivanpesenti]

in node red non funziona in studiovisualcode si se cambi datadegree il cerchio si illumina fino al numero inserito in node red non fa nulla prova il codice e capisci

[TotallyInformation]

Please answer the other questions as well. It looks like you are using Dashboard? Please let us know if you are and if so whether it is the old one or the new.

[ivanpesenti]

<div class="container">
    <div class="circle" id="circle" data-degree="30" data-color="#ff2972">
        <h2 class="number" id="number"><span>%</span></h2>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // Funzione per creare la barra di avanzamento circolare
    function createCircularProgressBar() {
        let degree = 0;
        const targetDegree = parseInt($('#circle').data('degree'));
        const color = $('#circle').data('color');
        const number = $('#number');
        const maxAngle = 100; // 50% rappresenta un semicerchio
        const interval = setInterval(() => {
            degree += 1;
            if (degree > targetDegree) {
                clearInterval(interval);
                return;
            }
            const actualAngle = (degree / 50) * maxAngle; // Calcola l'angolo corretto
            $('#circle').css('background', `conic-gradient(${color} ${actualAngle}%, #222 ${actualAngle}%)`);
            number.html(degree + '<span>C°</span>');
          
        }, 50);
    }

    // Esegui la funzione quando il documento è pronto
    $(document).ready(createCircularProgressBar);
</script>

<style>
    .container {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 40px;
    }

    .circle {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 130px;
        height: 130px;
        border-radius: 50%;
    }

    .circle::before {
        content: '';
        position: absolute;
        inset: 5px;
        border-radius: 50%;
        background: #222;
        opacity: 0.8;
    }

    .circle::after {
        content: '';
        position: absolute;
        width: 70px;
        height: 70px;
        background: #333;
        border: 12px solid #4d4c51;
        border-radius: 50%;
        box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.25),
            0 10px 10px rgba(0, 0, 0, 0.75),
            0 -2px 2px rgba(255, 255, 255, 0.5),
            inset 0 4px 2px rgba(0, 0, 0, 0.25),
            inset 0 -2px 2px rgba(255, 255, 255, 0.5);
    }

    .number {
        position: relative;
        color: #fff;
        z-index: 10;
        line-height: 1em;
        font-size: 1.5em;
        font-weight: 400;
    }
</style>