Main Content

Control Color of LED Matrix on Raspberry Pi Sense HAT over WebSockets

This example shows how to use the Simulink® Support Package for Raspberry Pi™ Hardware to control the color of an 8x8 LED matrix on Raspberry Pi Sense HAT from a webpage over WebSockets.

This example provides a ready-to-use webpage that is designed to send pixel values to the Simulink model used in this example. When you load the webpage in the browser, you will see three horizontal scroll bars to control the color of the Sense HAT LED matrix. The JavaScript code running in the browser establishes a WebSocket connection between the webpage and the Raspberry Pi. When you drag the thumb on the scroll bar, the client application running on the browser sends the RGB (Red, green, and blue) pixel values to the server application running on the Raspberry Pi. The Raspberry Pi hardware then processes the instructions to set the RGB value of the LED matrix on the Sense HAT.

Required Hardware

  • Raspberry Pi hardware

  • Raspberry Pi Sense HAT

  • Micro USB cable

Prerequisite

Configure the Raspberry Pi network using the Hardware Setup screen.

Step 1: Connect Raspberry Pi Hardware to Sense HAT and Computer

Tip: Before you start this example, we recommend you complete the Getting Started with Simulink Support Package for Raspberry Pi Hardware and Publish data from Raspberry Pi Sense HAT to a WebSocket Server examples.

1. Plug the Sense HAT module into the GPIO pins of the Raspberry Pi hardware.

2. Connect the micro end of the USB cable to the Raspberry Pi and the regular USB end of the USB cable to the computer. Wait until the PWR LED on the hardware starts blinking.

Step 2: Open and Configure WebSocket Subscribe Simulink Model

Open the Raspberry Pi Dashboard Monitor and Tune model.

open_system('raspberrypi_dashboard_monitorandtune');

The model is divided into two areas based on the functionality of the blocks in each area.

  • Publish Data to WebSocket Client: This model shows how to publish data from the Raspberry Pi to a webpage over WebSockets. When you load the webpage in the browser, you will see three dashboards on the page – IMU Sensor, Temperature, Pressure and Humidity, and Joystick Response. The JavaScript code running in the browser establishes a WebSocket connection between the webpage and the Raspberry Pi. When you deploy this model, the server application running on the Raspberry Pi publishes the Sense HAT sensor data and the state of the joystick to the client application running on the browser. Change the orientation of the Sense HAT sensor or press the joystick in different directions to see the new values reflected on the webpage immediately. For more information about the model, see Publish data from Raspberry Pi Sense HAT to a WebSocket Server.

  • Subscribe Data to Websocket Client: This model shows how to subscribe to the data from a webpage over WebSockets. In this model, the WebSocket Subscribe block is configured to receive RGB values from the web browser. The output of the Websocket Subscribe block is connected to a subsystem. On receiving a valid input, the subsystem converts the RGB values to an 8x8 matrix and then provides the values to the Color Display block.

Step 3: Configure and Run Model

1. Modify the Server IP address and Server Port parameters of the WebSocket Publish and WebSocket Subscribe blocks.

  • Server IP address: The address of your Raspberry Pi hardware. The IP address specified in this example is a private IP address so that you can access the server in a private network.

  • Server Port: The port number of the server application running on your Raspberry Pi hardware. The client publishes or subscribes to data from this port on the server.

2. On the Hardware tab, under the Deploy section, click the Build, Deploy & Start button.

The deployed model starts receiving pixel values from the client application running on your browser.

Step 4: Control Pixel Values from WebSocket Client

This example provides a ready-to-use, JavaScript-based, web browser dashboard, Raspberry Pi Sense HAT Dashboard. This webpage is designed to send pixel values to the Simulink model. When you load your browser, this dashboard establishes a WebSocket connection between the webpage and Raspberry Pi.

To open the dashboard in your default web browser, enter this command at the MATLAB® Command Window:

web('Raspi_SenseHATDashControl.html', '-browser')

Tip: The web browser dashboard is best viewed in a Google Chrome® or Firefox® browser.

The dashboard is preconfigured using JavaScript to send JSON data to the server application running on the Raspberry Pi hardware identified using the IP address 192.168.0.100 and the port 9000 (configured as the WebSocket server IP address and port in Step 3). You can modify the JavaScript code to specify the IP address and the port number of your Raspberry Pi hardware. Press F12 to view the source code of the HTML page, which explains how the dashboard has been built using JavaScript.

While the model is running on the hardware, drag the thumb of the scroll bar on the page. When you drag the scroll bar, the pixel values are communicated to the server application running on the hardware, which in turn changes the color of the LED matrix on the Raspberry Pi Sense HAT.

See Also

Publish data from Raspberry Pi Sense HAT to a WebSocket Server