Visualize the robot's configuration more realistically

preconditions: Javascript/Typescript; browser-enabled graphic frameworks; some knowledge about SVG

context: OpenRoberta is a learning platform. It uses a graphical programming language (based on blockly) and has code generators/loader for many robots and embedded systems used in education. Browse through https://lab.open-roberta.org . Use the simulator and write some simple programs to get started.

problem: Developers of IOT devices or embedded systems connect peripheral devices (sensors and actuators) by connecting the ports of the board to the connectors with cables. Currently the configuration has to be defined in the configuration tab of the lab, but in a user-unfriendly way.

idea: Visualize these connections in a user-friendly way. Many tutorials for Arduinos e.g. use images generated with https://fritzing.org/, a different approach is http://www.modkit.com/vex/editor/.

task: produce the pictures, images, svgs etc., embed them in a browser pane and implement a layout-algorithm that allows the user to connect the board and the sensors/actors in a user-friendly way.

note: several layout-algorithms should be tried and user experience with these layouts should be collected.

contact: Beate Jost <beate.jost AT iais.fraunhofer.de> @bjost2s, Patrick Werner <patrick.werner AT iais.fraunhofer.de> @boonto