Skip to main content

First trigger

By default there is already a great example!

Setup#

Launch EvntBoard and you should see

evntboard-launch.png

Go to http://localhost:5000 and click on Sound and Board.

⚠️ Do not close the sound window during the whole the example ! ⚠️

evntboard-home-page.png

Due to browser security this action is required:

  • Go to the Board tab and click on the "Click me" button
  • Go to the Sound tab ( You should hear a sound ... )
  • Return to the Board tab and click as much as you want on the button !

How it works ?#

To see what is going on we will first look at the fartTrigger.js file

const type = "CLASSIC" //  CLASSIC / THROTTLE / QUEUE / QUEUE_LOCK / THROTTLE_LOCK
const locker = null // Only required for QUEUE_LOCK & THROTTLE_LOCK types
const conditions = {    "evntboard-click": ({payload}) => payload.slug === 'fart-btn'};
async function reaction(eventData) {    console.log('Fart button clicked !')    const volume = 0.2    await module['media'].play('https://www.myinstants.com/media/sounds/perfect-fart.mp3', volume)    console.log('The Answer to the Ultimate Question of Life, the Universe, and Everything is', ANSWER_TO_THE_ULTIMATE_QUESTION_OF_LIFE)}

Now we will look at the button box!

evntboard-edit.png

Right click on the box then click edit

img_6.png

Now you can see why we are listening on this event :)

img_7.png

Change the button behavior ?#

We will create a random number and display its value in a box, in another box we will display over and change the color to green if the value of the generated number is greater than 0.5 otherwise the text will be less and it will be in red.

For this we will start by creating 2 boxes of type text

Go to Board tab, and click on edit

evntboard-edit.png

Then click anywhere on the grid to add a button, change slug field to going-to-change !

img_2.png

Add another button to the grid with slug value

img_3.png

You should see

img_4.png

Save all

img_1.png

Now we will create a trigger that will update our boxes !

Create a new file randomTrigger.js in the trigger folder

const type = "CLASSIC" //  CLASSIC / THROTTLE / QUEUE / QUEUE_LOCK / THROTTLE_LOCK
const locker = null // Only required for QUEUE_LOCK & THROTTLE_LOCK types
const conditions = {    "evntboard-click": ({payload}) => payload.slug === 'fart-btn'};
async function reaction(eventData) {    const random = Math.random() // create a random number
    let message;    let color;
    if (random > 0.5) {        message = "over"        color = "rgba(0, 255, 0, 1)"    } else {        message = "less"        color = "rgba(255, 0, 0, 1)"    }
    // We generate an event that will tell our software to update the data of the going-to-change & value box    await newEvent('evntboard-tmp', {        slug: 'going-to-change',        text: message,        color: color,    })    await newEvent('evntboard-tmp', {        slug: 'value',        text: random,    })  }

Now if you click on the "Click me" button, you should see a modification of the boxes !

And always hear the little sound ...

img_5.png