Publish Events and Send Joins to a Control System

The following sections describe how to publish events and send joins to a control system for advance programming purposes.

Publish Events to a Control System

In HTML, events are generated by the HTML as a user interacts with its elements. CH5 components listen for those HTML events and send joins to the control system to allow the control system program to act on those events.

To allow advanced CH5 developers to create custom components that send joins to the control system, the CH5 Component library exposes a JavaScript function. This function is named CrComLib.publishEvent because it sends the event to the control system.

The CrComLib.publishEvent(type, signalName, value) function requires three parameters:

  • type is a string parameter that is expected to be one of the following values:
    • 'b' or 'boolean': Indicates the value will be either true or false (like a Digital Join)
    • 'n', 'numeric', or 'number': Indicates the value will be a 16-bit integer number between the values of 0 to 65,535 or -32,768 to 32,767 (like an Analog Join)
    • 's' or 'string': Indicates the value will be a string (like a Serial Join)
    • 'o' or 'object' – indicates the value will be an object. Reserved for future use.
  • signalName is a string parameter that is either a string representation of a join number or Contract Editor signal name. For more information on signal names, refer to Contract Editor.
  • value is a type as described by the type parameter.

Send a Digital Pulse to a Control System

Digital pulses allow joins to be sent to the control system when certain events occur within HTML elements.

For example, consider an HTML <div> element that is an overlay, and, when tapped or clicked, sends join 33 to the control system.

Copy
<div id="my-overlay"></div>


Using the CrComLib.publishEvent to send a digital pulse would have the following elements:

Copy
    const eventSignalName = '33';   
    // NOTE: second parameter to CrComLib.publishEvent() is always a string 
    const id = "my-overlay"
    const myElement = document.getElementById(id); 
    functiononClick(ev) { 
        // when clicked send a join pulse 
        console.log(`toggle(${id}) clicked`); 
        CrComLib.publishEvent('b', eventSignalName, true); 
        CrComLib.publishEvent('b', eventSignalName, false);         
    }
    myElement.addEventListener('click', onClick); 

Send a Repeat Digital for Press and Hold Buttons

Consider the use case where touch screen loses connectivity to the control system while a user is pressing an element on the touch screen. When the user removes his or her finger, since there is no connectivity, the control system cannot receive a message that the press has ended.

Crestron touch screens and control systems are able to handle this scenario. The touch screen reports that the press is occurring until the user removes his or her finger. The control system will lower the join if the assertion is not received.

For CH5, to indicate that a press has been initiated for a press and hold operation, the component must publish a JavaScript object {repeatDigital : true} and reassert the same object every 250 milliseconds until the finger is removed. When the finger is removed, the JavaScript object {repeatDigital: false} should be sent.

For example, consider an HTML <div> element with a press and hold function. When the element is pressed and held, digital join 20 should be repeatedly asserted true, and, when released, digital join 20 should be set to false.

Copy
<div id="my-press-hold"class="presshold"></div>


Using the CrComLib.publishEvent to repeatedly send {repeatDigital: true} JavaScript objects while a press is occuring would contain the following elements.

Copy
    const eventSignalName = '20';   
    // NOTE: second parameter to CrComLib.publishEvent() is always a string 
    const id = "my-press-hold"
    const pressholdElement = document.getElementById(id); 

    let interval = null;   

    const onFingerDown = (ev) => { 
        console.log(`presshold(${id}) fingerDown`); 
        if (interval !== null)  
            return
        CrComLib.publishEvent('o', eventSignalName, {repeatdigital : true}); 
        interval = setInterval(() => { 
            console.log(`presshold(${id}) interval`); 
            CrComLib.publishEvent('o', eventSignalName, {repeatdigital : true}); 
        }, 250);  // 250 mseconds repeat 
    }
    const onFingerUp = (ev) => { 
        console.log(`presshold(${id}) fingerUp`); 
        if (interval !== null) { 
            clearInterval(interval); 
            interval = null
        } 
        CrComLib.publishEvent('o', eventSignalName, {repeatdigital : false}); 
    } 
    pressholdElement.addEventListener('mousedown', onFingerDown); 
    pressholdElement.addEventListener('mouseup', onFingerUp); 
    pressholdElement.addEventListener('touchstart', onFingerDown); 
    pressholdElement.addEventListener('touchend', onFingerUp);