Published June 1, 2019 © MIT

Slack IoT Marquee

Use Slack to fire off custom messages to a Photon scrolling marquee.

IntermediateFull instructions provided1 hour1,256

Things used in this project

Hardware components

Particle Photon

Breadboard (generic)

Adafruit MAX7219 Dot Matrix Module

Buzzer, Piezo

Software apps and online services

Slack

Now — Global Serverless Deployments

Story

Looking for something IoT and humorous that I could incorporate into the workspace, I thought about how I could combine our team's Slack app with a Photon-powered scrolling marquee. The device firmware will loop any message twice. An existing message will be overwritten by a new message.

This project requires you to host a NodeJS api somewhere of your choosing (I chose now.sh), with specific endpoints for firing off custom events off to your device. The api uses credentials populated from an .env file.

You'll want to create a Slack app, and configure the apps integrations to allow slash commands. These slash commands would then point to your api endpoints.

This example uses the following slash commands.:

Command: /hr
URL: path_to_your_server/api/hr
Token: // Take note of this value and store it in your .env file
  
Command: /display
URL: path_to_your_server/api/display
Token: // Take note of this value and store it in your .env file

Once created, you should be able to use these slash commands like so:

/hr {name} = Go to HR {name}

/display {text} = {text}

You do not have to use Slack.
You can get away with using cURL, You will just need to make sure the body contains text and the correct slash command token.

curl -d '{ "text": "Pete", "token": "your_slash_command_token" }' -H "Content-Type: application/json" -X POST https://path_to_your_server/api/hr

Further explanations of using the attached code can be found here: https://github.com/chrisbuttery/slack-iot-marquee

Slack IOT Scrolling Marquee Demo

This project was originally inspired by 'Smart LED Matrix for Particle Photon:' https://www.hackster.io/oz1051/smart-led-matrix-for-particle-photon-144b27

Code

// This #include statement was automatically added by the Particle IDE.
#include <ledmatrix-max7219-max7221.h>

LEDMatrix *led;

String message = "";
int speakerPin = D3;
int bitmapWidth = 32;
int webcount = 60001;
int iterationCount = 2;
int textX = bitmapWidth;
int fontWidth = 5, space = 1;

/*
 * drawText
 * Draw each char to LED
 */
void drawText(String s, int x)
{
    int y = 0;
    for(int i = 0; i < s.length(); i++) {
        Serial.println(s[i]);  
        led->drawChar(x + i*(fontWidth+space), y, s[i], true, false, 1);
    }
}

/*
 * createDisplay
 * Create the LED
 */
void createDisplay() {
    led = new LEDMatrix(4, 1, D0, D1, D2);
    led->addMatrix(3, 0, 0, false, false);
    led->addMatrix(2, 0, 0, false, false);
    led->addMatrix(1, 0, 0, false, false);
    led->addMatrix(0, 0, 0, false, false);
    textX = bitmapWidth;
}

/*
 * killDisplay
 * Tear down the LED
 */
void killDisplay() {
    led->shutdown(true);
    delete led;
    led = NULL;
    iterationCount = 2;
}

/*
 * displayMessage
 * take a String param, kill any existing display, sound peizo and reset iterationCount
 */
int displayMessage(String command) {
    killDisplay();
    createDisplay();
    tone(speakerPin, 301, 1000);
    message = command;
    iterationCount = 0;
}

/*
 * setup
 * enable serial logging + create LED
 * Listen for 'matrix_display_message' and fire off to displayMessage
 */
void setup() {
    Serial.begin(9600);
    createDisplay();
    // on 'matrix_display_message' call display_message
    Particle.function("matrix_display_message", displayMessage);
}

void loop() {
    if(iterationCount < 2 && message != "") {
        drawText(message, textX--);
        
        int length = message.length();
        if(textX < length*(fontWidth+space)*(-1) ) {
            textX = bitmapWidth;
            led->flush();
            delay(333);
            led->fillScreen(false);
            iterationCount++;
        }
    
        led->flush();
        delay(50);
    } else {
        iterationCount = 2;
        message = "";
    }
}

require("dotenv").config()

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const path = require('path')
const app = express()
const particle = require('particle-api-js')

const Particle = new particle()
const portNumber = 8000
let auth = null

// credentials
const deviceId = process.env.PDEVICE
const username = process.env.PUSER
const password = process.env.PPASS
const hrKey = process.env.HRKEY
const displayKey = process.env.DISPLAYKEY

// middleware
app.use(cors())
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))

// routes
app.post('/api/display', async (req, res, next) => {
  const { token, text } = req.body  
  
  if (!auth) {
    await Particle.login({username, password})
      .then(data => {
        auth = data.body.access_token
      })
      .catch(({ status, message }) => 
        res.status(status).send({ error: message })
      )
  }

  if (!token || token !== displayKey) {
    return res.status(401).send({ error: '401 Unauthorized' })
  }

  await Particle.callFunction({
    deviceId,
    name: 'matrix_display_message',
    argument: text,
    auth
  })
  .then((data) => res.send(`Now displaying: ${data.body}`))
  .catch((err) => console.error(err))

  next()
})

app.post('/api/hr', async (req, res, next) => {
  const { token, text } = req.body  
  if (!auth) {
    await Particle.login({username, password})
      .then(data => {
        auth = data.body.access_token
      })
      .catch(({ status, message }) => 
        res.status(status).send({ error: message })
      )
  }

  if (!token || token !== hrKey) {
    return res.status(401).send({ error: '401 Unauthorized' })
  }

  await Particle.callFunction({
    deviceId,
    name: 'matrix_display_message',
    argument: `Go to HR ${text}`,
    auth
  })
  .then((data) => res.send(`${text} is required by HR.`))
  .catch((err) => console.error(err))

  next()
})

// error handling
app.use((err, req, res, next) => 
  res.status(422).send({ error: err.message })
)
// Go!
app.listen(portNumber, () => console.log(`Listening on port ${portNumber}`))

{
  "version": 2,
  "name": "slack-iot-marquee",
  "builds": [{
    "src": "./index.js",
    "use": "@now/node-server"
  }],
  "routes": [
    {
      "src": "/api/display",
      "methods": ["POST"],
      "dest": "index.js"
    },
    {
      "src": "/api/hr",
      "methods": ["POST"],
      "dest": "index.js"
    }
  ],
  "env": {
    "PDEVICE": "@slack-display-device",
    "PUSER": "@slack-display-user",
    "PPASS": "@slack-display-pass",
    "HRKEY": "@slack-display-hrkey",
    "DISPLAYKEY": "@slack-display-displaykey"
  }
}

Credits

Chris Buttery

2 projects • 0 followers

Full Stack Software Developer. JavaScript, nodeJS, elm, CSS and IoT.