Crestron Components Lib - Showcase App

ch5-button: iconClass, iconPosition, receiveStateIconClass

The iconClass attribute with Font Awesome icons and Material Icons

You can declare more than one css class in the iconClass attribute

In this example Font Awesome and Material Icons were used, but other css classes can be added also.

Since on the ch5-button we can only control the classes that are added to the icon section, For Material icons, in order to be able to also add text inside the tags (<i class="material-icons">account_box</i>) We need to add css rules for the icons that we will be using. With the help of :before and content we are able to also use Material icons.

With Font Awesome:




With Material Icons:

<div>
    <p> With Font Awesome:</p>
    <div>
        <ch5-button type="success" shape="rectangle" label="Btn1" iconClass="fas fa-address-book"></ch5-button>
        <ch5-button type="success" shape="rectangle" label="Btn2" iconClass="fas fa-anchor"></ch5-button>
        <ch5-button type="success" shape="rectangle" label="Btn3" iconClass="fas fa-battery-full"></ch5-button>
        <ch5-button type="success" shape="rectangle" label="Btn4" iconClass="fab fa-bluetooth-b"></ch5-button>
        <ch5-button type="success" shape="rectangle" label="Btn5" iconClass="fab fa-twitter"></ch5-button>
    </div>
</div>
<br><br><br>
<div>
    <p> With Material Icons:</p>
    <div>
        <ch5-button type="success" shape="rectangle" label="Btn1" iconClass="material-icons alarm_on"></ch5-button>
        <ch5-button type="success" shape="rectangle" label="Btn2" iconClass="material-icons bookmark"></ch5-button>
        <ch5-button type="success" shape="rectangle" label="Btn3" iconClass="material-icons announcement"></ch5-button>
        <ch5-button type="success" shape="rectangle" label="Btn4" iconClass="material-icons account_box"></ch5-button>
        <ch5-button type="success" shape="rectangle" label="Btn5" iconClass="material-icons aspect_ratio"></ch5-button>
    </div>
</div>

The iconPosition attribute

You can declare more than one css class in the iconClass attribute

In this example Font Awesome icons were used, but other css classes can be added also.

<ch5-button type="success" shape="rectangle" label="Icon First" iconClass="fas fa-arrow-alt-circle-left" iconPosition="first"></ch5-button>
<ch5-button type="success" shape="rectangle" label="Icon Last" iconClass="fas fa-arrow-right" iconPosition="last"></ch5-button>
<ch5-button type="success" shape="rectangle" label="Icon Top" iconClass="fas fa-battery-full" iconPosition="top"></ch5-button>
<ch5-button type="success" shape="rectangle" label="Icon Bottom" iconClass="fas fa-chevron-down" iconPosition="bottom"></ch5-button>
Emulator Scenario (click to expand)
{
  "cues": [
    {
      "type": "boolean",
      "event": "trigger_icon_change_address",
      "trigger": true,
      "actions": [
        {
          "type": "string",
          "state": "current_icon",
          "logic": "set",
          "value": "fas fa-address-book"
        }
      ]
    },
    {
      "type": "boolean",
      "event": "trigger_icon_change_anchor",
      "trigger": "&change",
      "actions": [
        {
          "state": "current_icon",
          "type": "s",
          "logic": "set",
          "value": "fas fa-anchor"
        }
      ]
    }
  ],
  "onStart": [
    {
      "state": "current_icon",
      "type": "s",
      "logic": "set",
      "value": "fas fa-search"
    }
  ]
}

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": [
      ]
    }
    

Use receiveStateIconClass attributes in order to change the icon through signal

The icon for the bellow button will be changed


Click on the button bellow in order to change the icon
<div>
  <h3>The icon for the bellow button will be changed</h3>
  <ch5-button type="success" shape="rectangle" label="Font Icon" receivestateiconclass="current_icon"></ch5-button>
</div>
<br />
<div>
  <h5>Click on the button bellow in order to change the icon</h5>
  <ch5-button type="success" shape="rectangle" label="Address Book" iconClass="fas fa-address-book" sendeventonclick="trigger_icon_change_address"></ch5-button>
  <ch5-button type="success" shape="rectangle" label="Anchor" iconClass="fas fa-anchor" sendeventonclick="trigger_icon_change_anchor"></ch5-button>
</div>