Thingsboard professional

Question

Thingsboard professional

63 views Asked by Nitin Pandey At 16 September 2024 at 14:10

I'm nitin pandey,

I want to know that how can I add the javaScript condition in alarm cards professional version of thingsboard. if the temperature level is high then it should be the RED background color and if temperature is normal then it should GREEN with background color. i have added the image for some idea but its a images of community version, enter image description here

thanks in advance

i want answer regarding thingsboard

Original Q&A

There are 1 answers

**Nitin Pandey** · Answer 1 · 2023-11-09 04:53:52

<!DOCTYPE html>
<html> 
<head> 
    <title>HTML with Condition Nitin Pandey</title>
</head>   
<body>
    <div id='pk' style="background-color: gray; padding: 0px;"> <h5 style="display: inline-block;">Motor_Health </h5>
        <a href="https://drive.google.com/uc?id=1tBN6pzVgymvApAspixX">
            <img src="https://drive.google.com/uc?id=1tBN6pzVgymvApAspixX" alt="Alarm_Icon" style="width: 50px; height: 50px; margin-left: 90px; margin-top: 5px;">
        </a>
        <div></div>
</div>
    <script>
    var token = localStorage.getItem("jwt_token");
    console.log(token);
        // Function to update the temperature display
        function updateTemperature(temperature) {
            var div = document.createElement("div");
            var pkElement = document.getElementById('pk');
            
            if (temperature > 50) {
                div.style.backgroundColor = "red";
                div.style.fontSize = "18px";
                div.style.color = "white";
                div.style.height = "200px";
                div.textContent = "Temperature: " + temperature + "°C (High)";
            } else if (temperature > 40) {
                div.style.backgroundColor = "green";
                div.style.fontSize = "18px";
                div.style.color = "black";
                div.style.height = "200px";
                div.textContent = "Temperature: " + temperature + "°C (Moderate)";
            } else {
                div.style.backgroundColor = "blue";
                div.style.fontSize = "18px";
                div.style.color = "white";
                div.style.height = "200px";
                div.textContent = "Temperature: " + temperature + "°C (Low)";
            }
            //it is deleting and replacing by new temperature data everytime
pkElement.removeChild(pkElement.lastElementChild);
            pkElement.appendChild(div);
        }

        // Fetch data from an API
        var apiUrl = 'http://68.178.167.12:8080/api/plugins/telemetry/DEVICE/b6b0-5dcf-11ee-a906-ebdb/values/timeseries?keys=temperature';
        var Auth = 'Bearer ' + token; 
        var headers = new Headers({
            'Content-Type': 'application/json',
            'X-Authorization': Auth
        });

        // Function to fetch and update temperature data
        function fetchAndUpdateTemperature() {
            // Clear the existing content in the pk element
            const pkElement = document.getElementById('pk');
            //pkElement.innerHTML = '';
        
            fetch(apiUrl, { method: 'GET', headers: headers })
                .then(response => {
                    if (response.status === 200) {
                        return response.json();
                    } else {
                        throw new Error('Request failed with status ' + response.status);
                    }
                })
                .then(data => {
                    console.log('API Response:', data); // Add this line for debugging
        
                    if (data.temperature && data.temperature.length > 0) {
                        const temperatureValue = data.temperature[0].value;
                        updateTemperature(temperatureValue);
                    } else {
                        console.error('No temperature data found.');
                    }
                })
                .catch(error => {
                    console.error(error);
                });
        }
        
        // Fetch and update temperature immediately
        fetchAndUpdateTemperature();
        
        // Refresh temperature data every 10 seconds
        const refreshInterval = 10000; // 10 seconds in milliseconds
        setInterval(fetchAndUpdateTemperature, refreshInterval);

    </script>
</body>
</html>



By doing this we can add the condition inside the HTML of thingsboard. it will taket he user input as a temperature from the different port. and show the what we want

TechQA.

Thingsboard professional

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in CODING-STYLE

Related Questions in THINGSBOARD

Related Questions in CARD

Related Questions in THINGSBOARD-GATEWAY

Popular Questions

Popular Tags

Trending Questions