Crestron Components Lib - Showcase App

ch5-image: refreshRate

refreshRate attribute

The number of seconds between each refresh. If 0, refresh will not occur.

If the show attribute is false, then no refreshes/requests will be done until it changes to true

The requests can be seen in the browser console. The debug attribute allows additional info to be shown in the console

When the status of the show attribute changes from false to true, the URL is requested again, which ensures that the image is not outdated.

Clicking this button will change the show attribute

<p>Clicking this button will change the <b>show</b> attribute  <button class="button is-info" id="btn1">Change the show attribute</button></p>

<ch5-image
    id="ex1-img"
    debug
    refreshRate="5"
    url="https://picsum.photos/200/300/?random">
</ch5-image>

refreshRate attribute

The number of seconds between each refresh. If 0, refresh will not occur.

Refresh calls will also stop if one of the ancestors of the ch5-image element is no longer being displayed by the browser. (For an ancestor, display:none or removal from DOM is considered as hidden, while visibility:hidden is considered not hidden.)

The following buttons hide/show two of the ancestors of the ch5-image element by adding/removing a css class defining display:none

If the ancestor becomes visible again before the refresh interval has passed the ch5-image will display briefly the last image before refreshing a new one

If at least a refresh interval passed while the ancestor becomes is hidden the ch5-image will override its source with an empty value and display nothing until the next refresh

<p> The following buttons hide/show two of the ancestors of the ch5-image element by adding/removing a css class defining display:none</p>
<p>If the ancestor becomes visible again before the refresh interval has passed the ch5-image will display briefly the last image before refreshing a new one </p>
<p>If at least a refresh interval passed while the ancestor becomes is hidden the ch5-image will override its source with an empty value and display nothing
until the next refresh</p>
<ch5-button id="ex2-btn1" label="hide/show grandparent"></ch5-button>
<ch5-button id="ex2-btn2" label="hide/show parent"></ch5-button>

<div id="grand-parent">
    <div id="parent">
        <ch5-image
                id="ex2-img"
                debug
                refreshRate="5"
                url="https://picsum.photos/200/300/?random">
        </ch5-image>
    </div>
</div>