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

This example uses:

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 web page over WebSockets.

This example provides a ready-to-use web page that is designed to send pixel values to the Simulink model used in this example. When you load the web page 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 web page 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 Get Started with Simulink Support Package for Raspberry Pi Hardware and Publish Data from Raspberry Pi Sense HAT to 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 raspberrypi_dashboard_monitorandtune Simulink model.

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 web page over WebSockets. When you load the web page 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 web page 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 web page immediately. For more information about the model, see Publish Data from Raspberry Pi Sense HAT to WebSocket Server.

Subscribe Data to Websocket Client: This model shows how to subscribe to the data from a web page 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 Simulink 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 of the Simulink model, in the Mode section, select Run on board and then click Build, Deploy & Start.

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 web page is designed to send pixel values to the Simulink model. When you load your browser, this dashboard establishes a WebSocket connection between the web page and Raspberry Pi.

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

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.