Communicating with Light

• How can technology help us solve problems?
• How can you plan for the use of hardware in a solution to a problem?

Check to make sure SPIKE Prime hubs are charged, especially if connecting through Bluetooth.

What shapes can you create in a 5x5 grid? Could you make a rectangle? A triangle? What types of faces could you make?

Why would you create on paper before you code?

Students will investigate programming lights on the hub.

• Have students draw a 5x5 matrix in their journals.
• Ask students to cut 25 small squares of colored paper to fit inside their matrix.
• Draw a simple image or show a picture to the students that could be created on the light matrix on the hub. Examples could include a square or heart.
• Ask students to consider how to create an image on their hubs. Ask them to create an image or picture by placing their squares onto the matrix to represent what squares will be lit. They do not need to use all 25 paper squares at the same time.

Students will explore how to create images on the light matrix.

Prompt students to consider how to break this task down into steps that a computer could do. Ask students to write the steps in pseudocode in their journals. Encourage them to think about previous coding experiences to think about the steps needed. Pseudocode is the set of directions written in words that show step-by-step instructions for what should happen. Pseudocode is used to help write code.

Hint: What libraries will they need to import?

Allow students to share their ideas.

Direct students to open a new project in the Python programming canvas. Ask students to erase any code that is already in the programming area. Students should connect to their hub.

Provide students with the sample code below. Have students type in the code to the programming canvas. Ask students to run this program.

from hub import light_matrix
import runloop

async def main():
    # show a happy face
    light_matrix.show_image(light_matrix.IMAGE_HAPPY)
    await runloop.sleep_ms(5000)
    light_matrix.clear()

runloop.run(main())

Discuss with students what happens.

Ask students if the program is still running on their hub. If the smiley face is still showing on the hub, then the program is still running. Direct students to stop the program by either clicking the red circle with the white square on the lower right side of the screen or pressing the large circle button on the hub.

Review the lines of code with students. Discuss what they see happening when they run the program and what each line of code is telling the hub to do.

Create a New Image
Have students change the image that is displayed on the light matrix.

Challenge students to change the display from HAPPY to HEART which will change the display on the light matrix. Ask students to indicate what needs to be changed in the code to make it display a heart instead of a smiley face. Discuss with students.

Have students change their code and the comment in green. Run the program.

    # show a heart
    light_matrix.show_image(light_matrix.IMAGE_HEART)
    await runloop.sleep_ms(5000)
    light_matrix.clear()

Discuss the program with students. Ask students what the # signals in the program. The # signals a comment which is not a command for the computer, but is something programmers add to help them remember what a section of code is supposed to do.

Review with students how long the heart image stays lit. The image was lit for 5 seconds because the await runloop.sleep_ms(5000) show a “5000” in the parenthesis immediately after the command. The value inside the parenthesis is the number of milliseconds.

Discuss the program with students. Ask students questions like:

• Which libraries do you need to import to run these programs?
• What is the purpose of the runloop.sleep_ms piece of the code?
• Do you need to rewrite the entire code each time to change the image that is shown?
• How do you recognize if a program is still running? What are ways to stop a program?

Investigate programming a word on the hub.

Display Two Images
Have students create two images to display on the light matrix.
Challenge students to copy the lines of code under # show a heart and paste it at the end of their code. Students will now have two images to code.

Have them insert HAPPY into the second section. Discuss with students what will happen when they run their code with both sections of code. Review the lines of code as a group. The code should show a heart for 5 seconds followed by a smiley face for 5 sections.

from hub import light_matrix
import runloop

async def main():
    # show a heart
    light_matrix.show_image(light_matrix.IMAGE_HEART)
    await runloop.sleep_ms(5000)
    light_matrix.clear()

    # show a happy face
    light_matrix.show_image(light_matrix_IMAGE_HAPPY)
    await runloop.sleep_ms(5000)
    light_matrix.clear()

runloop.run(main())

Discuss the program with students.

Debugging

Investigate how to read errors.
Ask students to click the two horizontal lines in the center at the bottom of the programming canvas. This allows the console to open. The console is where information or error messages are printed.

Ask students to run the program again.

  # show a heart
    light_matrix.show_image(light_matrix.IMAGE_Heart)
    await runloop.sleep_ms(5000)
    light_matrix.clear()

# show a happy face
    light_matrix.show_image(light_matrix.IMAGE_HAPPY)
    await runloop.sleep_ms(5000)
    light_matrix.clear()

Ask students to explain what happened. This represents an error which can occur if the information is not input correctly.
Notice that the error message in the console points you to line 6. If you look at line 6, you can see the word Heart in not all in capital letters. Change Heart to HEART and run the program again.
Notice that the program works correctly but the error message in the console remains unchanged. If you make an additional error, the next message in the console will follow exactly underneath the previous one.

Additional Exploration

Allow students to explore all the options for displaying images on the hub. To access additional images that students can display on their hub light matrix, look in the Knowledge Base under Light Matrix.(). Allow students time to explore changing the images as time allows.

Have students look at the code they have been working with and consider how to change this code to write a word out on the hub rather than just showing an image.
They need to code the light matrix to write text instead of showing an image. Students might initially think that they need to show the word as an image. Prompt students to think about writing words out rather than showing words like a picture.
Challenge students to copy the lines of code under # show a heart and paste it at the end of their code. Students will now have two images to code.
Ask students to write the word hello on their hub light matrix.

from hub import light_matrix
import runloop

async def main():
    # write your code here
    await light_matrix.write("Hi!")

runloop.run(main())

Ask students to reflect on the difference in this code from the previous code used to show images. This code allows students to write text on the light matrix, one letter at a time, scrolling from right to left. This is a string, or an array of characters. For example, the word “Hello” consists of a string of characters “h – e – l – l – o.” Five characters are in this string.

Challenge students to write their names on the hub using this code. What is the only thing that students need to change in the code?

Optional: Allow students to explore writing various words and challenge them to write a word and then show an image.

For additional reference, point students to the Knowledge Base under Light Matrix Actions write().

Teacher Observation:
Discuss the program with students.

Ask students questions like:

• What is the purpose of the await runloop.sleep_ms?
• What would happen if you left off the await runloop.sleep_ms from your program?
• What troubleshooting or debugging did you run into?
• What is the function of the green words starting with the # sign in your code?
• What is the difference between coding with “show_image” and coding with “write”?

Self-Assessment:
Have students answer the following in their journals:

• What did you learn today about programming the light matrix?
• What characteristics of a good teammate did I display today?
• Ask students to rate themselves on a scale of 1-3, on their time management today.
• Ask students to rate themselves on a scale of 1-3, on their materials (parts) management today.