Dashboard

Creating a Dashboard

In this example we will demonstrate how to make a MATRIX Dashboard that can read and send data from your MATRIX device. The final result will your MATRIX device flickering its LEDs green and sending a random number to the dashboard, once the user presses a button.

You should have familiarity with Data Types, Cross Talk, Dashboard, and the Getting Started section before exploring further.

Setting Up Your Application

Create Your App

With the, MATRIX CLI tool installed, go to the terminal on your personal computer and insert the following command.

matrix create exampleDashboard

Config.yaml

We will be setting up the app's config.yaml page in order to define the layout of our dashboard, dataTypes, and events.

  • datatypes - Will define the variable that will save the random number we create.

  • screens - Determines the placement of widgets.

  • widgets - Our two dashboard components to visualize the random number we generate and command our MATRIX device to make that number.

  • Events - Events doesn't have to be specified here because we are not sending one from our app, but receiving it from the startButton widget we made. View Cross Talk to learn more.

configVersion: 2

description: 'Example dashboard to learn from.'
keywords: dashboard example
name: exampleDashboard
shortName: exampleDashboard
displayName: Example Dashboard

dataTypes:
  #Holds the value shown on the dashboard
  randomNumber:
    number: integer

screens:
#This will show both widgets in the same Row
- - numberGenerator
  - startButton

widgets:
  #Displays a randomly generated number
  numberGenerator:
    display: digit
    type: randomNumber
    key: number
    label: Random Number
  #Calls number generator
  startButton:
    control: button
    event: generateNumber
    value: Get Random Number
    label: Start Number Generator


Writing Your Application

The following code below goes into your application's app.js file. The code can be split into two parts. The first is a simple function to turn on and off your MATRIX device's LEDs. The second part waits for the dashboard generateNumber event from the startButton widget. Once the event goes off, the previous function is called and a random number is created and sent to the dashboard's numberGenerator widget.

// - Turn LEDs on and then off
function flickerLights(color){
    matrix.led(color).render();// Turn LEDs green
    // Wait 1 second
    setTimeout(function(){
        matrix.led('black').render();// Turn LEDs off
    },500);
}

// - On Dashboard Button Press
matrix.on('generateNumber', function(){
    flickerLights('green');// Flicker MATRIX Device LEDs

    var randomNumber = Math.floor(Math.random()*100);// Generate a random number between 0 and 99
    // Send Number To Dashboard
    matrix.type('randomNumber').send({
        'number': randomNumber
    });
});


Deploying Your Application

You application should now be ready to deploy. Use the following command, with the location of your app folder, to send the app to your MATRIX device.

matrix deploy PATH_TO_YOUR_APP_HERE

After it's deployed, you can start the app with the final command below.

matrix start exampleDashboard

Final Result

Visit the MATRIX Dashboard to see the example you've deployed. Use the "Get Random Number Button" to test the number generator and LEDs flashing.

Alternatively, you can use the following command if you want to test sending a Cross Talk command through the MATRIX CLI tool.

matrix trigger generateNumber