3. Field Activity 03

Together with a colleague at my school, I developed and conducted a series of lessons on computer programming. We developed various programming tasks using the example of a self-built WiFi lamp.

Here you will find a short video that describes the features of the lamp and the possibilities in the classroom.

Structure and function of the WiFi lamp

The lamp consists of a 3D-printed, three-part housing. I use an LED strip with 12 RGB LEDs as the light source. The lamp is powered by a rechargeable battery. I use an ESP8266 as the processor, whose Wi-Fi module is used to control the lamp’s functions. The lamp can be controlled via any smartphone connected to the lamp’s Wi-Fi hotspot. The user interface consists of buttons in HTML code.

To build the lamp in class, my colleague and I created six tutorial videos and various worksheets. The students develop the program code for the lamp themselves, step by step. A wide variety of design options are available.

What you need:

• ESP8266
• Switch
• USB-C-charger module
• recharchable battery
• wire
• battery-holder
• 3d-printed housing incl. screws

The individual parts cost approximately 12 EUR together, although discounts for bulk orders are not taken into account.

Technical procedures:

• 3D design of the lampshade with onshape
• 3D printing of the housing
• Programming the source code with the Arduino IDE
• Soldering the electronic components

The main learning content is computer programming, particularly the use and integration of libraries, the application of loops, and an introduction to the structure of an HTML page.

Lesson plan

I developed a lessonplan. It is accesible here.

There are shown all learning objectives.

Assessment

Main Learning Objectives:

• Understanding the Structure: Students will be able to identify and describe the main components of the programmcode for the WiFi lamp.
• Explaining Functionality: Students will explain how the components of the programmcode work together to control the lamp.
• Application of Knowledge: Students will demonstrate understanding by designing a programmcode for a WiFi lamp.
• Collaboration and Communication: Students will work effectively in teams and communicate their ideas clearly.

Criteria	Excellent (4)	Good (3)	Satisfactory (2)	Needs Improvement (1)
Understanding the Structure	Clearly identifies all components of the code; detailed descriptions.	Identifies most components; some detail.	Identifies some components; lacks detail.	Does not identify components.
Explaining Functionality the programmcode	Thorough explanation of how components of the code interact.	Good explanation; minor omissions.	Basic explanation; lacks depth.	No explanation provided.
Application of Knowledge	Designs a functional code with all components.	Designs a mostly functional code; minor issues.	Design is incomplete or has several issues.	No design presented.
Collaboration and Communication	Works seamlessly in a team; communicates ideas clearly.	Works well with some minor conflicts; communicates effectively.	Participates but struggles with teamwork; communication unclear.	Does not participate or communicate effectively.

Assessment Process

Self-Assessment: At the end of the lesson, students will fill out the rubric, reflecting on their own performance in each criterion.

Peer Assessment: Students will assess at least one peer using the same rubric focusing on collaboration and communication during group work and project development.

Teacher Assessment: The teacher will assess each student or group using the rubric based on their presentations, projects, and participation. Feedback:

After receiving assessments, students will have a reflective session where they can discuss with peers and the teacher about their strengths, weaknesses, and areas for improvement.

Testing the Lesson plan

The lamp was built by eleventh-grade students. While programming the lamp, we realized it would be helpful for the students to have some kind of test board available to practice programming. This is important because the lamp is assembled at the very end, and connecting the ESP8266 to the computer within the housing is somewhat cumbersome. Therefore, we created 3D-printed test boards for the students to work with. These can later be used for other projects involving the ESP8266. It turned out that the ESP8266 easily overheats if it is glued the wrong way round.

The learning videos were designed so that students have to develop large portions of the program code themselves. Only when they understand the individual program components can they successfully create the program code. The students coped well with the explanatory videos and worksheets, and they were able to work largely independently.

The biggest difficulties arose not during programming, but during soldering. If the ESP8266 is overheated, a layer of lacquer dissolves and spreads across the pins. This makes it impossible to create good solder connections. Since it became clear during preliminary testing of the circuit that soldering the LED strips would be very difficult, we purchased special clips that allow the strips to be wired using a plug-in connection. This reduced the problems associated with soldering the circuit together.

The students grasped the program code surprisingly quickly. Difficulties often arose where required characters (brackets, semicolons) were forgotten or incorrectly placed. The students often had to repeatedly search for such errors in the program code. Soldering the components took more time than expected. This was partly due to worn soldering tips.

Since it was agreed with my colleague that the focus should be on developing program code as a competency in computer science, we didn’t change the predefined 3D design significantly for now. However, the series could also be implemented with a focus on 3D construction. However, this would require significantly more time than four double lessons, or parts of the program code would have to be specified.

Reflection Questions.

1. Collaboration: Reflect on how you worked with colleagues or FLA participants during the Field Activity. At what stages of development and testing did the collaborator contribute? Please be detailed in your description. How did your collaborator’s perspective change the way you developed the lesson?

There are different professional perspectives that need to be considered. The computer science teacher focuses on program development and understanding individual program components. Therefore, it was important to simplify the program enough so that students can understand it. As a technology teacher, I would have preferred a more professional design for the interface between the smartphone and the lamp. There are pre-built apps where the components are simply clicked together. But that wouldn’t have met the requirements of generating a solution that students could understand. My colleague, on the other hand, focused on keeping the circuit design as simple as possible. He would have preferred a finished circuit board with few solder joints. However, it was important to me that the students could do it without a circuit board. What struck both of us was the project’s potential focus on optics. The lamp project has a lot of potential here, which we could only touch on briefly at this point. This includes aspects of light diffusion, the maximum utilization of luminous intensity through a suitable lampshade design, or clever LED positioning. We also explored color mixing models, for example, the additive model used here compared to other models.

2. Instructional Challenges: What challenges did you encounter while teaching this lesson? How did you address or plan to address them? How are diverse learners’ needs being met in the lesson plan facilitation?

Planning the series of lessons was extremely complex. The model was revised several times, and capping the costs was a particular challenge. The goal of limiting the lamp’s cost to €10 couldn’t be met. While it would be possible with bulk orders and discount promotions, if we order the components in small quantities, we’d have to budget for approximately €12. After testing several lamp variants, we began producing the instructional videos. A colleague of mine spent a tremendous amount of time producing a total of seven videos. Existing YouTube videos weren’t an option for us, as we wanted to design the self-learning videos according to didactic criteria. They weren’t meant to be mere instructions, but rather a guide to independent solution finding and development. The idea for the practice boards came about during the course of the project, as we realized it would be good for the students to have a practice model. Simulating programming with Tinkercad is simply too limited, as it only allows you to test the control of the lights, not the WiFi connection or the HTML code.

3. Integrating Disciplines: Where does your lesson plan fall on the continuum and why? How might you move the lesson plan along the continuum to the next level?

Multidisciplinary The lamp can initially be examined from the perspectives of digital fabrication, computer programming, design, electrical engineering, and physical optics. Emphasis can be placed on all of these disciplines.

Interdisciplinary and Transdisciplinary Currently, interdisciplinary aspects such as self-directed work, problem-orientation, or product development can be demonstrated using the Wi-Fi lamp as an example. It is also well-suited to implementation at varying levels of difficulty. In this respect, it is ideal for use in inclusive education. However, the project also has potential applications that could cover entirely different areas. During development, the idea of ​​using the lamp as a “digital memorial” arose. By adapting the programming accordingly, it would be possible to automatically have the lamp glow in a specific color on certain anniversaries. A QR code could be used to retrieve the anniversaries the lamp commemorates.

4. AI Usage: If you used AI, describe how it was used and in which steps of the Field Activity.

AI was used for the worksheet used. The results were satisfactory, and the worksheet only required minor adjustments. Further worksheets are planned, and these can also be developed with AI support. A particular advantage is that the level of difficulty of the worksheets can be easily adapted to different student grades, inclusive learning groups, or groups with students who are not yet comfortable with the language of instruction.

5. Reflect on the course in general: How has your teaching changed as a result of this course? What are some concepts that you would like to learn more about? How can you support other teachers in your practice to use digital fabrication with their students?

For me, there are three key aspects of the FLA course. First, there is the content we learned. As a technology teacher, the aspects of operating machines or using programs were not new to me, so I was able to draw on my experience here. If I had still needed to learn a lot in this area, I wouldn’t have been able to complete the course due to time constraints. I found the many links to programs and project ideas very helpful, and I was able to use many of them. In terms of content, I was particularly impressed by the many educational concepts I was able to learn about. It was interesting to learn about approaches from other countries. Aspects like social background or inclusion, for example, I wouldn’t have immediately identified as a particular opportunity for digital fabrication. I also appreciate the structured overviews that were used repeatedly in many of the presentations. They demonstrate key aspects of the FabLab concept and digital fabrication at a glance.

The second important aspect was the methodological preparation of the FLA course. We had structured tools at our disposal for learning documentation and reflection. This means that the course implements what we also need to implement for our students. I learned a great deal and had to empathize with my students at times, as they were asked to try something new or solve tasks within a predefined structure. I was particularly impressed by the high degree of consideration given to feedback, which I consider one of the most important learning factors. I will implement much of this in my school Fablab.

The third key aspect of the FLA Academy was the contact with the many FabLabs around the world. It was great fun getting to know the numerous colleagues and experiencing the diverse and varied conditions under which the FabLab idea can be implemented. The exchange among colleagues showed me how important it is to cooperate, listen to one another, and learn from one another. It’s nice not to be alone in facing the enormous task of using digital fabrication to show our children a way to learn in the 21st century.

Code example

Here comes the code for the Wifi-Lamp with two functions / buttons (yellow and magenta)

#include <Adafruit_NeoPixel.h>
#ifdef __AVR__
#include <avr/power.h> // Required for 16 MHz Adafruit Trinket
#endif
#define PIN        12 // Which pin on the Arduino is connected to the NeoPixels?
#define NUMPIXELS 12 // How many NeoPixels are attached to the Arduino?
Adafruit_NeoPixel pixels(NUMPIXELS, PIN, NEO_GRB + NEO_KHZ800);
#define DELAYVAL 500 // Time (in milliseconds) to pause between pixels
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
  // ##### WIFI-Hotspot
#ifndef APSSID
#define APSSID "My-Wifi-Lamp"  // SSID (choose)
#define APPSK  "123456789"     // Passwort (choose)
#endif
const char *ssid = APSSID;
const char *password = APPSK;
const int ap_channel = 6;
const boolean ap_hidden = false;
IPAddress local_ip(192,168,4,100); //IP AP (choose)
IPAddress gateway(192,168,4,254);  //IP Gateway
IPAddress netmask(255,255,255,0);
ESP8266WebServer server(80);
  // ###### Setup
void setup() {
  pixels.begin();
  verbindungHerstellen();
  Serial.begin(115200);
  Serial.println();
  Serial.println("Setting IP Address");
  WiFi.softAPConfig(local_ip, gateway, netmask);
  Serial.print("IP Address: ");
  Serial.println(WiFi.softAPIP());
  Serial.println("Starting Access Point");
  boolean result = WiFi.softAP(ssid, password, ap_channel, ap_hidden);
  if (result == true) {
    Serial.println("Access Point Ready");
    Serial.print("SSID: ");
    Serial.println(ssid);
    Serial.print("Channel: ");
    Serial.println(ap_channel);
    server.on("/lampeMagenta", lampeMagenta);
    server.on("/lampeYellow", lampeYellow);
    server.on("/", indexHTML);
    server.onNotFound(onNotFound);
    server.begin();
    Serial.println("Web Server Started");
    verbindungErfolgreich();
  } 
}
void loop() {
  server.handleClient();
}
  // ##### Functions of the WIFI-Lamp
void lampeMagentq() {
  indexHTML();
  for (int i=0; i<NUMPIXELS; i++){
    pixels.setPixelColor(i, pixels.Color(150,0,150));
    pixels.show();
    delay(DELAYVAL);
  }
}
void lampe'Yellow() {
  indexHTML();
  for (int i=0; i<NUMPIXELS; i++){
    pixels.setPixelColor(i, pixels.Color(150,150,0));
    pixels.show();
    delay(DELAYVAL);
  }
}
  // ##### Display while connecting
void verbindungHerstellen(){ 
Serial.println("Lampe pulsierend rot");
 for (int m=0; m<5; m++){
  for (int i=0; i<NUMPIXELS; i++){
    pixels.setPixelColor(i, pixels.Color(150,0,0));
    pixels.show();
    delay(50);
  }
  for (int i=0; i<NUMPIXELS; i++){
    pixels.setPixelColor(i, pixels.Color(20,0,0));
    pixels.show();
    delay(50);
  }
 }
}
void verbindungErfolgreich(){
  Serial.println("Lampe pulsierend grün");
 for (int m=0; m<3; m++){
  for (int i=0; i<NUMPIXELS; i++){
    pixels.setPixelColor(i, pixels.Color(0,150,0));
    pixels.show();
    delay(50);
  }
  for (int i=0; i<NUMPIXELS; i++){
    pixels.setPixelColor(i, pixels.Color(0,20,0));
    pixels.show();
    delay(50);
  }
 }
}  
void onNotFound(){
 server.send(404, "text/plain", "404 Not found");
}
  // ##### HTML-Code
void indexHTML(){
server.send(200, "text/html", 
"<!DOCTYPE html>\
<html lang=\"en\">\
<head>\
<meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\
<title>WiFi Lampe</title>\
<style> button{ padding: 0.6em 2em; background-color:burlywood; color: black; font-size: 20pt; border: none; border-radius: 1000px; }\
</style>\
</head>\
<header><h1>EBGS WiFi-Lampe</h1></header>\
<body>\
<p></p>\
<a href= \"http://192.168.4.100/lampeMagenta\"><button>Magenta</button></a>\
<p></p>\
<a href= \"http://192.168.4.100/lampeYellow\"><button>Yellow</button></a>\
<p></p>\
</body>\
</html>");
}

Example: Meducation-Video Part4 - Initializing the webserver

Meducation-Video #4