Abstract:

Teaching microcontroller programming is well established in engineering education. The key to success is a lab setup with real microcontrollers, a breadboard to build simple devices and the conventional development tools for microcontrollers to enable a hands-on knowledge. In an online class, however, especially if it has to be set up on very short notice, this approach is not feasible and a different approach became inevitable. The chosen solution uses a standard web browser in a multifold way. First, it provides a simple microcontroller and breadboard simulation as a webpage. Second, it offers a basic development environment (IDE) on the same webpage, Third, it utilizes the browsers integrated debugger and its other development tools. This setting emulates the whole lab setup and makes it useable for all students online at the same time. Video transmission of a hardware microcontroller setup identical to the emulation and screen sharing of the standard development tools during the lectures complements the online course. The setup was successfully tested in multiple microcontroller courses. The microcontroller web emulation, the lab setup and the integration of both into the lecture is presented in this paper.

Learning how to use microcontrollers in industry setups requires not only the programming of the microcontroller but also interfacing the microcontroller hardware with inputs, outputs. The usual way to teach this is to provide the students with a hard- and software setup of a microcontroller, an extension board with some sensors and actors connected to the microcontrollers in- and outputs and a personal computer with software tools and connectors installed to write and transmit the program for the microcontroller. This computer usually hosts an additional tool to be able to debug the code running on the microcontroller. This setup is hosted several times in a laboratory at the university and the students can access it in groups. Due to the students not being able to access the labs during the pandemic, a different setup was needed. The solution was to move the real world lab setup to an emulation in the browser.

All up-to-date web browsers include a programming language interpreter (interpreting JavaScript) and sophisticated development tools. The implemented design of a microcontroller web emulation utilizes especially the browsers debugger and its network communication monitor.

The user interface of the laboratory emulation is a webpage. It shows the task description, the code editor (including file management) and the microcontroller plus hardware emulation. The user can code, run and debug the microcontroller-programming task online, without any local installation required. Using the browser’s communication capabilities even IoT (internet of things) scenarios are implemented.

As the emulation is a digital twin of an existing real-world microcontroller circuit, the physical version is used via video and screen sharing in lectures and code is frequently transferred from the emulation to the real implementation and vice versa and requires only minor changes.

Keywords:

Microcontroller, programming, online, emulation, browser, class, laboratory, code, simulation.