Scrolling text widget attempt

Community Projects
1

Hi team,

So I was trying to create a simple scrolling text widget for notifications on the dashboard, can’t seem to get it to fully work. Probably something simple in the code:

<tile>
    <layout>
        <div id="scrollingText" style="overflow: hidden; white-space: nowrap;">
            <span id="textContent" style="display: inline-block; padding-left: 100%; animation: scroll 10s linear infinite;"></span>
        </div>
    </layout>
    <style>
        @keyframes scroll {
            0% { transform: translate(100%, 0); }
            100% { transform: translate(-100%, 0); }
        }
        #scrollingText {
            width: 100%;
            height: 100%;
            font-size: 20px;
            line-height: 50px;
        }
    </style>
    <script src="https://cdn.sharptools.io/js/custom-tiles/0.2.1/stio.js"></script>
    <script>
        // Initialize SharpTools.io Custom Tile library
        const stio = new STIO();

        // Function to set the text content from the notificationText attribute
        function setScrollingText() {
            var thingId = 'lP4Gf14eZidldCMXijb0'; // Replace with your actual Thing ID
            var attribute = 'notificationText';

            // Use SharpTools.io API to get the attribute value
            stio.getAttribute(thingId, attribute)
                .then(data => {
                    document.getElementById('textContent').innerText = data.value;
                })
                .catch(error => console.error('Error fetching attribute:', error));
        }

        // Call the function to set the initial text
        setScrollingText();

        // Optionally, you can add a listener for attribute updates
        // This assumes you have a way to detect attribute changes in your environment
        window.addEventListener('attributeUpdate', function(event) {
            if(event.detail.thingId === 'lP4Gf14eZidldCMXijb0' && event.detail.attribute === 'notificationText') {
                setScrollingText();
            }
        });
    </script>
</tile>
1 Like
2

Hi @GMAU - can you please make sure to format code in your replies properly or it can get stripped out or otherwise become unreadable. I’ve edited your original post so it uses code formatting.

How was this code generated? Was it done by ChatGPT or similar AI as the syntax used seems to be made up.

You can find the documentation for developing Custom Tiles here:

And there are some examples in the Community Projects category of the community. The announcement thread for Custom Tiles: Access to Things and Variables also has more details on how you can access Things within a Custom Tile.

3

Yep GPT4. I’ll take a look at the links