Event with buttons

The different ways to emit an event

{
    'title' 'My Dashboard With events'
    'options' { 'eventHandler' 'type=.*,tag=popup' }
    'vars' {
      'myVar' 42
    }
    'tiles' [
      {
        'type' 'display'
        'title' 'Event style and data receiver'
         'w' 4 'h' 1 'x' 4 'y' 0
         'data' ''
         'options' { 'eventHandler' 'type=(style|data),tag=random' }
       }
       {
         'type' 'button'
         'title' 'Event emitter'
         'options' {
           'button' { 'label' 'Green' }
           'customStyles' {
              '*'
              <'
                --warp-view-button-border-color: #77BE69;
                --warp-view-button-bg-color: #77BE69;
                --warp-view-button-label-color: #fff;'
                --warp-view-font-color: #77BE69;
              '>
              '.discovery-tile' 'background-color: #77BE6955 !important;'
              '.discovery-tile h2' 'color: #77BE69 !important;'
           }
         }
         'w' 2 'h' 1 'x' 0 'y' 0
         'macro' <% { 'data' <%
            '#77BE6955' 'color' STORE
            '#77BE69' 'color2' STORE
            RAND 100 * ROUND 'v' STORE
            { 'data' ''
             'events' [
                { 'tags' [ 'random' ] 'type' 'style'
                  'value' {
                    '.discovery-tile' 'background-color: ' $color + ' !important;' +
                    '.value' 'color: ' $color2 + ';' +
                  }
                }
                { 'tags' [ 'random' ] 'type' 'data' 'value' { 'data' $v  'params' [ { 'maxValue' 100 } ]  } }
               ]
             }
          %> } %>
       }
       {
         'type' 'button'
         'title' 'Event emitter'
         'options' {
          'button' { 'label' 'Red' }

           'customStyles' {
              '*'
              <'
                --warp-view-button-border-color: #F24865;
                --warp-view-button-bg-color: #F24865;
                --warp-view-button-label-color: #fff;'
                --warp-view-font-color: #F24865;
              '>
              '.discovery-tile' 'background-color: #F2486555 !important;'
              '.discovery-tile h2' 'color: #F24865 !important;'
           }
         }
         'w' 2 'h' 1 'x' 2 'y' 0
         'macro' <% { 'data' <%
            '#F2486555' 'color' STORE
            '#F24865' 'color2' STORE
            RAND 100 * ROUND 'v' STORE
            { 'data' ''
             'events' [
                { 'tags' [ 'random' ] 'type' 'style'
                  'value' {
                    '.discovery-tile' 'background-color: ' $color + ' !important;' +
                    '.value' 'color: ' $color2 + ';' +
                  }
                }
                { 'tags' [ 'random' ] 'type' 'data' 'value' { 'data' $v  'params' [ { 'maxValue' 100 } ]  } }
               ]
             }
          %> } %>
       }
       {
         'type' 'button'
         'title' 'Popup emitter'
         'options' {
          'button' { 'label' 'Data' }
         }
         'w' 2 'h' 1 'x' 0 'y' 1
         'macro' <% { 'data' <%
            { 'data' ''
             'events' [
                { 'tags' [ 'popup' ] 'type' 'popup'
                  'value' {
                     'type' 'area'
                     'w' 3 'h' 1 'x' 0 'y' 0
                     'data' [
                       NEWGTS 'data' RENAME
                       0.0 'v' STORE
                       1 500
                       <% 1 s * NOW SWAP - NaN NaN NaN $v RAND 0.5 - + DUP 'v' STORE ADDVALUE %>
                       FOR
                     ]
                   }
                }
               ]
             }
          %> } %>
       }
       {
         'type' 'button'
         'title' 'Popup emitter'
         'options' {
          'button' { 'label' 'Macro' }
         }
         'w' 2 'h' 1 'x' 2 'y' 1
         'macro' <% { 'data' <%
            { 'data' ''
             'events' [
                { 'tags' [ 'popup' ] 'type' 'popup'
                  'value' {
                     'type' 'area'
                     'w' 3 'h' 1 'x' 0 'y' 0
                     'macro' <% [
                       NEWGTS 'data' RENAME
                       0.0 'v' STORE
                       1 500
                       <% 1 s * NOW SWAP - NaN NaN NaN $v RAND 0.5 - + DUP 'v' STORE ADDVALUE %>
                       FOR
                     ] %>
                   }
                }
               ]
             }
          %> } %>
       }

       {
         'type' 'button'
         'title' 'Popup emitter'
         'options' {
          'button' { 'label' 'Dashboard' }
         }
         'w' 2 'h' 1 'x' 4 'y' 1
         'macro' <% { 'data' <%
            { 'data' ''
             'events' [
                { 'tags' [ 'popup' ] 'type' 'popup'
                  'value'
                  { 'title' 'My Dashboard' 'tiles' [
                  {
                     'type' 'area'
                     'w' 3 'h' 1 'x' 0 'y' 0
                     'macro' <% [
                       NEWGTS 'data' RENAME
                       0.0 'v' STORE
                       1 500
                       <% 1 s * NOW SWAP - NaN NaN NaN $v RAND 0.5 - + DUP 'v' STORE ADDVALUE %>
                       FOR
                     ] %>
                   }
                ] }
                }
               ]
             }
          %> } %>
       }

       {
         'type' 'button'
         'title' 'Popup emitter'
         'options' {
          'button' { 'label' 'Scada' }
         }
         'w' 2 'h' 1 'x' 6 'y' 1
         'macro' <% { 'data' <%
            { 'data' ''
             'events' [
                { 'tags' [ 'popup' ] 'type' 'popup'
                  'value'
                  { 'title' 'My Scada' 'type' 'scada' 'tiles' [
                  {
                     'type' 'area'
                     'w' 500 'h' 250 'x' 200 'y' 200 'z' 1
                     'macro' <% [
                       NEWGTS 'data' RENAME
                       0.0 'v' STORE
                       1 500
                       <% 1 s * NOW SWAP - NaN NaN NaN $v RAND 0.5 - + DUP 'v' STORE ADDVALUE %>
                       FOR
                     ] %>
                   }
                ] }
                }
               ]
             }
          %> } %>
       }

       {
         'type' 'input:text'
         'title' 'Input emitter'
         'options' {
          'button' { 'label' 'Send' }
         }
         'w' 2 'h' 1 'x' 8 'y' 0
         'macro' <% { 'data' $myVar 'events' [ { 'tags' [ 'random' ] 'type' 'variable' 'selector' 'myVar' } ] } %>
       }
        {
        'type' 'display'
        'title' 'Event var receiver'
         'w' 2 'h' 1 'x' 8 'y' 1
         'macro' <% $myVar %>
         'options' { 'eventHandler' 'type=(variable),tag=random' }
       }
     ]
  }