Crestron Components Lib - Showcase App

data-ch5-show, data-ch5-noshow-type

Emulator Scenario (click to expand)
{
  "cues": [
    {
      "type": "boolean",
      "event": "trigger_data_ch5_show_1",
      "trigger": true,
      "actions": [
        {
          "state": "data_ch5_show_1",
          "type": "boolean",
          "logic": "toggle"
        }
      ]
    },
    {
      "type": "boolean",
      "event": "trigger_data_ch5_show_2",
      "trigger": true,
      "actions": [
        {
          "state": "data_ch5_show_2_1",
          "type": "boolean",
          "logic": "toggle"
        },
        {
          "state": "data_ch5_show_2_2",
          "type": "boolean",
          "logic": "toggle"
        }
      ]
    },
    {
      "type": "boolean",
      "event": "trigger_data_ch5_show_2a",
      "trigger": true,
      "actions": [
        {
          "state": "data_ch5_show_2_1",
          "type": "boolean",
          "logic": "toggle"
        }
      ]
    },
    {
      "type": "boolean",
      "event": "trigger_data_ch5_show_2b",
      "trigger": true,
      "actions": [
        {
          "state": "data_ch5_show_2_2",
          "type": "boolean",
          "logic": "toggle"
        }
      ]
    },
    {
      "type": "boolean",
      "event": "trigger_data_ch5_show_3",
      "trigger": true,
      "actions": [
        {
          "state": "data_ch5_show_3",
          "type": "boolean",
          "logic": "toggle"
        }
      ]
    }
  ],
  "onStart":[
    {
      "type":"b",
      "state":"data_ch5_show_1",
      "value":true
    },
    {
      "type":"b",
      "state":"data_ch5_show_2_1",
      "value":true
    },
    {
      "type":"b",
      "state":"data_ch5_show_2_2",
      "value":true
    }

  ]
}

Press the Load button to load the scenario.

Press the Run button to run the scenario. You only need to do this if the scenario (the json) has an onStart key.

The Emulator Scenario JSON contains an array of cues and an optional array onStart A cue is defined by: type:string, signal:string, trigger:boolean|string|number, actions:array. An action is defined by: type:string, signal:string, logic:string ... plus other fields ( depending on type)

type for cue or for action can be the string:

  • b or boolean - for a boolean signal
  • n or number or numeric - for a number signal
  • s or string - for a string signal
  • o or object - for an object signal

signal for cue or for action is a string representing the name of the signal:

trigger can be either a fixed value of the same type as the signal, or the string "&change". If it is a fixed value then, when the emulator detects that the signal has changed to the value given in trigger then it also executes the actions for that signal. If the value is the string "&change", regardless of signal type, then the actions are executed on any change in the value of the signal.

logic can be:

  • link - passes the value received on the incoming join through to the outgoing join. Using this between incompatible join types will attempt to cast the value. In the event of a cast failure the value will be set to false, 0 or "" (empty string)
  • set - assigns a specific value to the join. This requires a 5th key of 'value' and the specific value to assign. ie. {"signal":"light_level", "type":"n", "logic": "set","value":5}. If the 5th key is omitted, the default value will be sent (false, 0, "" or {})
  • toggle - (boolean Only) reads the current state and changes it to the opposite state
  • pulse - (boolean Only) value goes high and then low.
  • increment - (Numeric Only) reads the current value of the analog and adds an offset. This logic accepts an optional 5th key of 'offset which determines how many to incrementby. ie. {"signal":"volume_level","type":"n", "logic":"increment","offset":5}. If this 5th key is omitted, the default offset of 1 will be applied.
  • decrement - (Numeric Only) reads the current value of the analog and subtracts an offset. This logic accepts an optional 5th key of 'offset which determines how many to decrement by. ie. {"signal":"volume_level","type":"n", "logic":"decrement","offset":5}. If this 5th key is omitted, the default offset of 1 will be applied.

RCB logic can be accomplished by defining an action containing an object signal of RCB type:
{ "rcb":{ "value": numeric_value, "time": duration_in_ms } }
Scenario example:


    {
      "cues": [
        {
          "type": "boolean",
          "signal": "trigger",
          "trigger": true,
          "actions": [
            {
              "signal": "action1",
              "type": "boolean",
              "logic": "toggle"
            },
            {
                "signal": "rcb_signal",
                "type": "object",
                "logic": "set",
                "value": {
                    "rcb":{
                        "value": 101,
                        "time": 1500
                    }
                }
            }
          ]
        }
      ],
      "onStart": [
      ]
    }
    

data-ch5-show

In the following example multiple HTML elements are given the same signal on data-ch5-show and different data-ch5-no-show-type values.

When clicking the first button (Toggle the data-ch5-show-signal) the signal named trigger_data_ch5_show_1 will change and, according to the scenario JSON, it will also toggle the data_ch5_show_1 signal which controlls the visibility of the elements

When the data-ch5-no-show-type is set to 'remove' the element is detached from DOM, but references to its parent and next sibling are kept. The element continues to listen to the signals (it is not unsubscribed) so that it can be attached again to the DOM in case the show signal changes to true

DIV

ch5-noshow-type="remove"

DIV: Testing data-ch5-show and noshow-type-visibility set to remove

ch5-noshow-type="visibility"

DIV: Testing data-ch5-show and noshow-type-visibility set to visibility

ch5-noshow-type="display"

DIV: Testing data-ch5-show and noshow-type-visibility set to display
P

ch5-noshow-type="visibility"

P: Testing data-ch5-show and noshow-type-visibility set to visibility


ch5-noshow-type="display"

P: Testing data-ch5-show and noshow-type-visibility set to display


ch5-noshow-type="remove"

P: Testing data-ch5-show and noshow-type-visibility set to remove

H#

ch5-noshow-type="remove"

H1: Testing data-ch5-show and noshow-type-visibility set to remove


ch5-noshow-type="visibility"

H2: Testing data-ch5-show and noshow-type-visibility set to visibility


ch5-noshow-type="display"

H3: Testing data-ch5-show and noshow-type-visibility set to display


ch5-noshow-type="remove"

H4: Testing data-ch5-show and noshow-type-visibility set to remove


ch5-noshow-type="remove"

H5: Testing data-ch5-show and noshow-type-visibility set to remove

ch5-noshow-type="remove"

H6: Testing data-ch5-show and noshow-type-visibility set to remove
Misc

ch5-noshow-type not defined

<ch5-button sendEventOnClick="trigger_data_ch5_show_1" label="Toggle visibility of standard html elements"
            receiveStateSelected="data_ch5_show_1"></ch5-button>

<div class="type-section">DIV</div>
<p class="case-section">ch5-noshow-type="remove"</p>
<div data-ch5-show="data_ch5_show_1" data-ch5-noshow-type="remove">
    DIV: Testing data-ch5-show and noshow-type-visibility set to remove
</div>
<hr>
<p class="case-section">ch5-noshow-type="visibility"</p>
<div data-ch5-show="data_ch5_show_1" data-ch5-noshow-type="visibility">
    DIV: Testing data-ch5-show and noshow-type-visibility set to visibility
</div>
<hr>
<p class="case-section">ch5-noshow-type="display"</p>
<div data-ch5-show="data_ch5_show_1" data-ch5-noshow-type="display">
    DIV: Testing data-ch5-show and noshow-type-visibility set to display
</div>

<div class="type-section">P</div>

<p class="case-section">ch5-noshow-type="visibility"</p>
<p data-ch5-show="data_ch5_show_1" data-ch5-noshow-type="visibility">
    P: Testing data-ch5-show and noshow-type-visibility set to visibility
</p>
<hr>

<p class="case-section">ch5-noshow-type="display"</p>
<p data-ch5-show="data_ch5_show_1" data-ch5-noshow-type="display">
    P: Testing data-ch5-show and noshow-type-visibility set to display
</p>
<hr>

<p class="case-section">ch5-noshow-type="remove"</p>
<p data-ch5-show="data_ch5_show_1" data-ch5-noshow-type="remove">
    P: Testing data-ch5-show and noshow-type-visibility set to remove
</p>

<div class="type-section">H#</div>

<p class="case-section">ch5-noshow-type="remove"</p>
<h1 data-ch5-show="data_ch5_show_1" data-ch5-noshow-type="remove">
    H1: Testing data-ch5-show and noshow-type-visibility set to remove
</h1>
<hr>

<p class="case-section">ch5-noshow-type="visibility"</p>
<h2 data-ch5-show="data_ch5_show_1" data-ch5-noshow-type="visibility">
    H2: Testing data-ch5-show and noshow-type-visibility set to visibility
</h2>
<hr>

<p class="case-section">ch5-noshow-type="display"</p>
<h3 data-ch5-show="data_ch5_show_1" data-ch5-noshow-type="display">
    H3: Testing data-ch5-show and noshow-type-visibility set to display
</h3>
<hr>

<p class="case-section">ch5-noshow-type="remove"</p>
<h4 data-ch5-show="data_ch5_show_1" data-ch5-noshow-type="remove">
    H4: Testing data-ch5-show and noshow-type-visibility set to remove
</h4>
<hr>

<p class="case-section">ch5-noshow-type="remove"</p>
<h5 data-ch5-show="data_ch5_show_1" data-ch5-noshow-type="remove">
    H5: Testing data-ch5-show and noshow-type-visibility set to remove
</h5>
<hr>

<p class="case-section">ch5-noshow-type="remove"</p>
<h6 data-ch5-show="data_ch5_show_1" data-ch5-noshow-type="remove">
    H6: Testing data-ch5-show and noshow-type-visibility set to remove
</h6>

<div class="type-section">Misc</div>

<p class="case-section">ch5-noshow-type not defined</p>
<img data-ch5-show="data_ch5_show_1" src="http://via.placeholder.com/350x150">

Direct DOM changes to elements with data-ch5-show attribute

Actions that affect the red bordered div

Clicking this will toggle the value of both data_ch5_show_2_1 and data_ch5_show_2_2. See the Scenario JSON

Clicking this will toggle the value of data_ch5_show_2_1. See the Scenario JSON

Clicking this will toggle the value of data_ch5_show_2_2. See the Scenario JSON

Clicking this will change the value of the data-ch5-show attribute ( It will change the name of the signal) to data_ch5_show_2_2

Clicking this will remove the data-ch5-show attribute

Clicking this will add/change the data-ch5-show attribute to data_ch5_show_2_1

Clicking this will remove the element from the DOM. Since the removal is not a consequence of a "show signal" change, the element will no longer listen for singal changes. In this case it unsubscribes from the signal.


data_ch5_show_2_1: DIV: Testing data-ch5-show and noshow-type-visibility set to remove
data_ch5_show_2_2: DIV: Testing data-ch5-show and noshow-type-visibility set to remove
<div class="">
    <p>Actions that affect the red bordered div</p>
    <p>
        Clicking this will toggle the value of both data_ch5_show_2_1 and data_ch5_show_2_2. See the
        Scenario JSON
        <ch5-button sendEventOnClick="trigger_data_ch5_show_2" label="Toggle data-ch5-show"></ch5-button>
    </p>
    <p>
        Clicking this will toggle the value of data_ch5_show_2_1. See the Scenario JSON
        <ch5-button sendEventOnClick="trigger_data_ch5_show_2a" label="Toggle data-ch5-show"></ch5-button>
    </p>
    <p>
        Clicking this will toggle the value of data_ch5_show_2_2. See the Scenario JSON
        <ch5-button sendEventOnClick="trigger_data_ch5_show_2b" label="Toggle data-ch5-show"></ch5-button>
    </p>

    <p> Clicking this will change the value of the data-ch5-show attribute ( It will change the name of the signal)
        to <b>data_ch5_show_2_2</b>
        <button id="change-to-ch5-show-3"
            class="button is-info"
            type="button">Button1</button>
    </p>
    <p>
        Clicking this will remove the data-ch5-show attribute
        <button id="remove-ch5-show"
            class="button is-info"
            type="button">Button2
        </button>
    </p>
    <p>Clicking this will add/change the data-ch5-show attribute to <b>data_ch5_show_2_1</b>
        <button id="add-ch5-show"
            class="button is-info"
            type="button">Button3
        </button>
    </p>
    <p>Clicking this will remove the element from the DOM. Since the removal is not a consequence of a "show signal" change,
        the element will no longer listen for singal changes. In this case it unsubscribes from the signal.
        <button id="rem-ch5-show-el"
              class="button is-info"
              type="button">Remove elems with data-ch5-show attribute
        </button>
    </p>

</div>
<hr>
<div style="border-top:2px dotted green; margin: 24px 0;"></div>

<div class="custom-dom-changes" data-ch5-show="data_ch5_show_2_1" style="border:1px solid red" data-ch5-noshow-type="remove">
    data_ch5_show_2_1: DIV: Testing data-ch5-show and noshow-type-visibility set to remove
</div>
<div class="custom-dom-changes" data-ch5-show="data_ch5_show_2_2" style="border:1px solid blue" data-ch5-noshow-type="remove">
    data_ch5_show_2_2: DIV: Testing data-ch5-show and noshow-type-visibility set to remove
</div>