More Tools For Your SIGNAL Hackpack v3 Creativity

Time to read: 2 minutes

May 25, 2017
Written by
Brent Schooley
Twilion

logo

One of the major themes at SIGNAL 2017 is: “code is creative”. While that theme has been interleaved throughout the sessions, SIGNAL attendees have proven that out in more interactive ways.

Perhaps the biggest display of that on the floor of the conference so far has been the giant LED wall in the Hack Lounge powered by Particle and DeepLocal. The wall can be drawn on by attendees using their hackpack. Here’s a glimpse of some of your handiwork from Day 1 of SIGNAL:

Onward to Day 2

We wanted to make sure you were equipped to hack even harder on Day 2 so we prepared some resources for you. If you want to hack on the Particle firmware that powers your hackpack, first make sure you’ve claimed your device on the Particle site as explained here. Next, head over to the Twilio hackpack v3 firmware repo at https://github.com/twilio/hackpack-v3 to get the latest copy of the hackpack code so you can customize it.

What Now?

Once you have the firmware you might be wondering what to tweak to make the hackpack experience your own. We recommend you hack a custom animation into the animate custom command. To get you started, the team has prepared a few custom animations and a tool or two to help you on your way.

If you’d just like to try out a pre-built animation to get a feel for what you might be able to create, Jarod has you covered with a couple examples. Replace the uint32_t custom_animation_lut[][16] array in the firmware’s .ino file with the following code to create scrolling rainbows:

// Creates a scrolling rainbow
uint32_t rainbow_animation_lut[][16] = {
  { 0xff0000,0x101010,0x101010,0x101010,
    0xff0000,0x101010,0x101010,0x101010,
    0xff0000,0x101010,0x101010,0x101010,
    0xff0000,0x101010,0x101010,0x101010},   //Frame1

  { 0xffff01,0xff0000,0x101010,0x101010,
    0xffff01,0xff0000,0x101010,0x101010,
    0xffff01,0xff0000,0x101010,0x101010,
    0xffff01,0xff0000,0x101010,0x101010},   //Frame2

  { 0xffaa00,0xffff01,0xff0000,0x101010,
    0xffaa00,0xffff01,0xff0000,0x101010,
    0xffaa00,0xffff01,0xff0000,0x101010,
    0xffaa00,0xffff01,0xff0000,0x101010},   //Frame3

  { 0x00ffff,0xffaa00,0xffff01,0xff0000,
    0x00ffff,0xffaa00,0xffff01,0xff0000,
    0x00ffff,0xffaa00,0xffff01,0xff0000,
    0x00ffff,0xffaa00,0xffff01,0xff0000},   //Frame4

  { 0x0000ff,0x00ffff,0xffaa00,0xffff01,
    0x0000ff,0x00ffff,0xffaa00,0xffff01,
    0x0000ff,0x00ffff,0xffaa00,0xffff01,
    0x0000ff,0x00ffff,0xffaa00,0xffff01},   //Frame5

  { 0xb000ff,0x0000ff,0x00ffff,0xffaa00,
    0xb000ff,0x0000ff,0x00ffff,0xffaa00,
    0xb000ff,0x0000ff,0x00ffff,0xffaa00,
    0xb000ff,0x0000ff,0x00ffff,0xffaa00},   //Frame6

  { 0xf486e5,0xb000ff,0x0000ff,0x00ffff,
    0xf486e5,0xb000ff,0x0000ff,0x00ffff,
    0xf486e5,0xb000ff,0x0000ff,0x00ffff,
    0xf486e5,0xb000ff,0x0000ff,0x00ffff},
    
  { 0x86b2f4,0xf486e5,0xb000ff,0x0000ff,
    0x86b2f4,0xf486e5,0xb000ff,0x0000ff,
    0x86b2f4,0xf486e5,0xb000ff,0x0000ff,
    0x86b2f4,0xf486e5,0xb000ff,0x0000ff},

  { 0x80ff02,0x86b2f4,0xf486e5,0xb000ff,
    0x80ff02,0x86b2f4,0xf486e5,0xb000ff,
    0x80ff02,0x86b2f4,0xf486e5,0xb000ff,
    0x80ff02,0x86b2f4,0xf486e5,0xb000ff},
    
  { 0x101010,0x80ff02,0x86b2f4,0xf486e5,
    0x101010,0x80ff02,0x86b2f4,0xf486e5,
    0x101010,0x80ff02,0x86b2f4,0xf486e5,
    0x101010,0x80ff02,0x86b2f4,0xf486e5},
    
  { 0x101010,0x101010,0x80ff02,0x86b2f4,
    0x101010,0x101010,0x80ff02,0x86b2f4,
    0x101010,0x101010,0x80ff02,0x86b2f4,
    0x101010,0x101010,0x80ff02,0x86b2f4},
    
  { 0x101010,0x101010,0x101010,0x80ff02,
    0x101010,0x101010,0x101010,0x80ff02,
    0x101010,0x101010,0x101010,0x80ff02,
    0x101010,0x101010,0x101010,0x80ff02}//Frame7

};

Perhaps you’re a big NBA fan and you’d prefer a scrolling Golden State Warriors logo? Try replacing the custom_animation_lut array with this one:

// Creates a scrolling warriors logo
uint32_t warriors_animation_lut[][16] = {
  { 0x0042B0,0x0042B0,0x0042B0,0x0042B0,
    0x0042B0,0x0042B0,0x0042B0,0x0042B0,
    0x0042B0,0x0042B0,0x0042B0,0x0042B0,
    0x0042B0,0x0042B0,0x0042B0,0x0042B0},   //Frame1

  { 0x0042B0,0x0042B0,0x0042B0,0x0042B0,
    0x0042B0,0x0042B0,0x0042B0,0x0042B0,
    0x0042B0,0x0042B0,0x0042B0,0x0042B0,
    0x0042B0,0x0042B0,0x0042B0,0x0042B0},   //Frame2

  { 0xF7931E,0x0042B0,0x0042B0,0x0042B0,
    0xF7931E,0x0042B0,0x0042B0,0x0042B0,
    0xF7931E,0x0042B0,0x0042B0,0x0042B0,
    0xF7931E,0x0042B0,0x0042B0,0x0042B0},   //Frame3

  { 0xF7931E,0xF7931E,0x0042B0,0x0042B0,
    0xF7931E,0xF7931E,0x0042B0,0x0042B0,
    0xF7931E,0xF7931E,0x0042B0,0x0042B0,
    0xF7931E,0xF7931E,0x0042B0,0x0042B0},    //Frame4

  { 0xF7931E,0xF7931E,0xF7931E,0x0042B0,
    0xF7931E,0xF7931E,0xF7931E,0x0042B0,
    0xF7931E,0xF7931E,0xF7931E,0x0042B0,
    0xF7931E,0xF7931E,0xF7931E,0x0042B0},   //Frame5

  { 0xF7931E,0xF7931E,0xF7931E,0xF7931E,
    0xF7931E,0xF7931E,0xF7931E,0xF7931E,
    0xF7931E,0xF7931E,0xF7931E,0xF7931E,
    0xF7931E,0xF7931E,0xF7931E,0xF7931E},   //Frame6

  { 0xF7931E,0xF7931E,0xF7931E,0xF7931E,
    0xF7931E,0xF7931E,0xF7931E,0xF7931E,
    0xF7931E,0xF7931E,0xF7931E,0xF7931E,
    0x0042B0,0xF7931E,0xF7931E,0xF7931E},
    
 { 0xF7931E,0xF7931E,0xF7931E,0xF7931E,
    0xF7931E,0xF7931E,0xF7931E,0xF7931E,
    0x0042B0,0xF7931E,0xF7931E,0xF7931E,
    0x0042B0,0x0042B0,0xF7931E,0xF7931E},

  { 0xF7931E,0xF7931E,0xF7931E,0xF7931E,
    0x0042B0,0xF7931E,0xF7931E,0xF7931E,
    0x0042B0,0x0042B0,0xF7931E,0xF7931E,
   0x0042B0,0x0042B0,0x0042B0,0xF7931E},
    
  { 0x0042B0,0xF7931E,0xF7931E,0xF7931E,
    0x0042B0,0x0042B0,0xF7931E,0xF7931E,
    0x0042B0,0x0042B0,0x0042B0,0xF7931E,
   0x0042B0,0x0042B0,0x0042B0,0x0042B0},
    
  { 0xF7931E,0x0042B0,0xF7931E,0xF7931E,
    0xF7931E,0x0042B0,0x0042B0,0xF7931E,
    0xF7931E,0x0042B0,0x0042B0,0x0042B0,
    0xF7931E,0x0042B0,0x0042B0,0x0042B0},
    
  { 0x0042B0,0xF7931E,0x0042B0,0xF7931E,
    0x0042B0,0xF7931E,0x0042B0,0x0042B0,
    0x0042B0,0xF7931E,0x0042B0,0x0042B0,
    0x0042B0,0xF7931E,0x0042B0,0x0042B0 },
    
  { 0xF7931E,0x0042B0,0xF7931E,0x0042B0,
    0x0042B0,0x0042B0,0xF7931E,0x0042B0,
    0x0042B0,0x0042B0,0xF7931E,0x0042B0,
    0x0042B0,0x0042B0,0xF7931E,0x0042B0 },
    
  { 0xF7931E,0xF7931E,0x0042B0,0xF7931E,
    0xF7931E,0x0042B0,0x0042B0,0xF7931E,
    0x0042B0,0x0042B0,0x0042B0,0xF7931E,
    0x0042B0,0x0042B0,0x0042B0,0xF7931E},
    
  { 0xF7931E,0xF7931E,0xF7931E,0x0042B0,
    0xF7931E,0xF7931E,0x0042B0,0x0042B0,
    0xF7931E,0x0042B0,0x0042B0,0x0042B0,
    0x0042B0,0x0042B0,0x0042B0,0x0042B0},
    
  { 0xF7931E,0xF7931E,0xF7931E,0xF7931E,
    0xF7931E,0xF7931E,0xF7931E,0x0042B0,
    0xF7931E,0xF7931E,0x0042B0,0x0042B0,
    0xF7931E,0x0042B0,0x0042B0,0x0042B0},
    
  { 0xF7931E,0xF7931E,0xF7931E,0xF7931E,
    0xF7931E,0xF7931E,0xF7931E,0xF7931E,
    0xF7931E,0xF7931E,0xF7931E,0x0042B0,
    0xF7931E,0xF7931E,0x0042B0,0x0042B0},
    
  { 0xF7931E,0xF7931E,0xF7931E,0xF7931E,
    0xF7931E,0xF7931E,0xF7931E,0xF7931E,
    0xF7931E,0xF7931E,0xF7931E,0xF7931E,
    0xF7931E,0xF7931E,0xF7931E,0x0042B0}//Frame7

};

Want to quickly display text on your Hackpack? Paul has you covered with a Neopixel string generator with a couple preloaded fonts. Getting started can be as easy as:

python font_creator_hackpack.py -m “WELCOME TO SIGNAL” -o header.h

There are also a few more advanced examples including changing – or even building your own – tiny Hackpack font.

For the ambitious among you, Paul has also created an animated GIF and movie converter that will generate code that you can use to generate a set of frames to place in the custom_animation_lut array. Feed the script an animated GIF or a movie and then paste the results into the custom_animation_lut array (note: this script requires ffmpeg):

export FILENAME=loading.gif
ffmpeg -i $FILENAME pic%03d.png

# Use the script to convert to a structure ready for your Hackpackv3
python animated_gif_converter.py -o output.h

# Paste the custom_animation_lut contents over the .ino's custom_animation_lut.
# Be sure to also edit the custom_animation_framerate for desired animated speed.

Show us your animation once you’ve made it so we can share it on social media!

Make Your Mark

Whatever you do, make your own personal mark on the hackpack wall. When you do, please share it with a Twilion in the hackpack area. We’ll be easy to spot in our red Twilio track jackets.

We want to share your work – the results and the code you used to hack your hackpacks – with the rest of the Twilio community. Let’s show just how creative code can be.

We can’t wait to see what you build.

Related Posts

Related Resources

A newspaper article

Twilio Docs

From APIs to SDKs to sample apps

API reference documentation, SDKs, helper libraries, quickstarts, and tutorials for your language and platform.
An Open book

Resource Center

The latest ebooks, industry reports, and webinars

Learn from customer engagement experts to improve your own communication.
User group reactions

Ahoy

Twilio's developer community hub

Best practices, code samples, and inspiration to build communications and digital engagement experiences.