Drawing and Gaming on the Sense HAT with DSA


We just did two projects for our Raspberry Pi running DSA. First, we created a quick browser application that lets you draw pictures on the Sense HAT’s LED matrix by pointing and clicking. Second, we made some logic that moves a pixel on the Sense HAT using the joystick—this tutorial lays the groundwork for developing 2-D LED games and more. We did both these projects in the drag-and-drop visual programming environment of DGLux5, so you don’t need to know any code to follow along.

Distributed Services Architecture (DSA) is is an open-source platform that facilitates communication among devices, logic, and applications in the IoT. You can download it here.

DGLux5 is a drag-and-drop, rapid development platform especially for data-driven applications and the Internet of Things. DGLux5 licenses are free for students and educators.


If you want to follow along with these videos, you will need:

  • A Raspberry Pi connected to the Internet, with DSA and DGLux installed—you can use these steps to install.
  • A Sense HAT board connected to the Raspberry Pi.
  • The Raspberry Pi’s IP address—you can get it using these steps.
  • A computer and web browser on the same network as the Raspberry Pi. Google Chrome is recommended.


"Video #1: Pixel Setter" shows:

  • How to install the Sense HAT DSLink for DSA.
  • How to create a simple browser application for drawing on the LED matrix of a Sense HAT.

"Video #2: Joystick Pixel Mover" shows:

  • How to program logic that causes an LED dot on the Sense HAT to move according to joystick input.

Video #1: Pixel Setter

Video #2: Joystick Pixel Mover

Commands and scripts

Copy and paste these commands and scripts as you follow along with the video.

Commands to install the Sense HAT package:

ssh pi@x.x.x.x
sudo apt-get update
sudo apt-get install virtualenv python-dev python-pip libjpeg-dev sense-hat
sudo pip install pillow

Link to install the Sense HAT DSLink from ZIP:


Script for the Pixel Setter symbol:

return Number(@.color.replace("#","0x"));

String for the Set All button:


Script for the Set All button:

function fromHex($val) {
var b = ($val) & 0xFF;
var g = ($val >> 8) & 0xFF;
var r = ($val >> 16) & 0xFF;
 return "" + r + "," + g + "," + b;
return fromHex(Number(@.color.replace("#","0x")));

Help and resources

If you are new to DGLux5, some of the terms in the videos, like symbol and dataflow, might be unfamiliar. Beginners should be able to follow along, but if you want to gain more understanding of the DGLux5 concepts in these videos, try the links below:

Join the conversation

Did you successfully complete the tutorial? Do you have questions or ideas for DSA or the SenseHAT DSLink? Share your thoughts in the Google Plus community and on Slack.

More videos

Find more DGLux5 tutorials at this link:

See More Video Tutorials