====== Plug and Project: Programmieren mit Scratch ====== Dies ist ein Einstiegsprojek zu PnP im Bereich der Softwareprogrammierung. Um zu den anderen Projekten zu kommen, gehe bitte auf die Hauptseite von [[wiki:informatiksysteme:plug_and_project:start|Plug and Project]]. ===== Kurzbeschreibung ===== In diesem Projekt sollen die Schülerinnen und Schüler Temperatursensorwerte grafisch darstellen mittels Scratch. Da Scratch beim Einlesen externer Daten begrenzt ist, werden in diesem Einstiegsprojekt für Softwareprogrammierung die Daten vergegeben und müssen "nur" noch importiert werden im Scratchprogramm. ==== Keywords ==== PnP, Plug and Project, Raspbian, Scratch, Programmieren, Temperatur ===== Einstieg ===== In diesem Projekt sollt ihr die Temperaturdaten von einer Datei einlesen und mit diesem einen Tagesgraph darstellen. Dafür benötigt ihr einerseits Scratch und die Datei mit den Temperaturwerten. Die Links findet ihr weiter oben. Es werden nun die einzelnen Bereiche und ein paar wichtige Begriffe erklärt: ==== Bühne und Objekte==== {{ :wiki:informatiksysteme:plug_and_project:objektbuehne.png?200|}} Objekte und Bühnen sind das Herzstück von Scratch. Der verschiedenen Programmierblöcke werden in den einzelnen Bühnen und Objekten zusammengesteckt. Auf dem Bild siehst du im unteren Bereich die weiße Bühne und rechts davon den Fuchs als Objekt. Beides davon ist anklickbar und bietet eine Arbeitsfläche zum Programmieren. Über die Funktionen in der Mitte kannstdu auch neue Objekte erzeugen oder einfügen. Durch das Interagieren der Objekte funktioniert das Programm. \\ \\ \\ \\ \\ ==== Die Bereiche von Scratch==== Vieles kann bei Scratch von selbst entdeckt werden und diese Anleitung dient nicht primär dazu, jeden einzelne Funktion zu beleuchten, dies sollt ihr im Eigenstudium machen. Es werden hier nur die einzelnen Bereiche der einzelnen Blockfunktionen kurz beleuchtet:\\ {{ :wiki:informatiksysteme:plug_and_project:allebereiche.png?200|}} * **Bewegung:** Hier findest du alle Blöcke, die mit der Bewegung eines Objektes zu tun haben, meist werden dabei die x- und y-Koordinaten festgelegt oder verändert. Generell liegt über der gesamten Bühne ein x-y-Koordinatensystem, an dem man sich richten kann. X beschreibte dabei die waagrechte und y die senkrechte Koordinate des Objekts. * **Aussehen:** Beim Aussehen geht es um die Farbveränderung eines Objektes oder des Hintergrundes. Außerdem kann dein Objekt über gewisse Blöcke hier "sprechen" und wie du schon eventuell in der Bildbearbeitung gelernt hast, kann man Objekte in den Hintergrund und andere in den Vordergrund holen, was bei Überlappungen wichtig sein könnte. * **Klang:** Bei Klang gibt es Blöcke, mit denen man Töne einspielen kann. Dies ist für unser Projekt zur Zeit nicht wichtig. * **Malstift:** Das Objekt kann eine Spur hinterlassen, wenn man das hier aktiviert, die man farblich auch festlegen kann. * **Steuerung:** Dies ist unser wichtigster Bereich. Hier kann man ein Blockprogramm starten (der Block mit der grünen Fahne), Verzweigungen und Schleifen erzeugen, Programme stoppen und Signale zu anderen Objekten senden. In jedem Scratch-Programm werden viele Steuerungs-Blöcke gebraucht. Auch kann ein kurzes Warten des Programmes festgelegt werden, mit dem man das Zeichnen von Graphen auch gut sichtbar machen kann. * **Fühlen:** Dies ist der große Bereich der Abtastungen. Hier kann man Funktionen einbauen, die zu Wirkung kommen, wenn ein anderes Objekt, oder der Rand berührt wird. Auch können hier Maustasten eingebaut werden und was besonders wichtig ist, externe Sensordaten können hier überprüft werden. * **Operatoren:** Du findest hier die Rechenoperatoren, die besonders als Bedingungen für Schleifen und Verzweigungen dienen. Es gibt hier auch Blöcke, mit denen du Texte zerlegen kannst. * **Variablen:** Für effizientes Programmieren sind Variablen und Listen, die du hier findest, sehr wichtig. Was genau Variablen sind, findest du weiter unten auf dieser Seite. Jedenfalls können hier Variablen und Listen erzeugt und verändert werden. ==== Variable==== {{ :wiki:informatiksysteme:plug_and_project:variableundliste.png?350|}} Eine Variable bei Scratch ist ein Container für eine Zahl oder für Zeichen. Mithilfe von Variablen kann man verschiedene Bausteine bei Scratch mit der selben Zahl ansteuern (und dadurch, dass man den Wert der Variable verändert, ändert sich auch der Code, die diese Variable benutzen. Dies ist für das nächste Thema wichtig. ==== Liste==== Eine Liste enthält mehrere Elemente, die man durch einen gezielten Durchlauf (zum Beispiel in einer Schleife) alle abrufen und ablesen kann. Damit kann man eine große Menge an Daten von einer externen Quelle (zum Beispiel durch eine .txt-Datei) einlesen und damit arbeiten. Das Importieren von Daten funktioniert so, dass man zuerst eine Liste erzeugen muss (der Button dazu ist im Bild rechts zu sehen) und dann auf der Bühne rechts die Liste rechtsklickst und dann auf importieren klickst. \\ \\ ==== Schleife==== Schleife ist ein allgemeiner Begriff für Blöcke bei Scratch, die es ermöglichen, Code mehrmals auszuführen unter speziellen Bedingungen. Links siehst du die verschiedenen Arten von Schleifen, die ganz kurz von Oben nach Unten beschrieben sind: * Die Code in der ersten Schleife wird so oft wiederholt, bis ein spezielles Ereignis eintritt. Dies könnte zum Beispiel sein, dass eine Variable i = 3 ist. {{:wiki:informatiksysteme:plug_and_project:alleschleifen.png?200 |}} * Die zweite Schleife wird eine bestimmte Anzahl oft ausgeführt. Hier könnte auch stattdessen eine Variable eingefügt werden. * Die dritte Schleife nimmt kein Ende, außer durch einen Abbruch des Programmes (dies kann auch durch Blöcke realisiert werden). * Die vierte Schleife ähnelt der ersten, doch wird hier der Inhalt so oft wiederholt, so lange die Bedingung in dem <>-Kästchen stimmt (zum Beispiel i < 3). \\ \\ \\ ==== Signale==== {{ :wiki:informatiksysteme:plug_and_project:signale.png?direct&150|}} Mit Signale kannst du andere Programmblöcke in anderen Objekten starten und so kannst du einen geregelten Ablauf einführen. Wenn du zum Beispiel nacheinander was zeichnen willst, kannst du nach der ersten Zeichnung mit einem Signal die zweite Zeichnung starten. \\ \\ \\ \\ ===== Erste Aufgabe: Koordinatensystem der Temperaturkurve ===== Zu Beginn wollen wir ein einheitliches (am Besten durch Variablen) dimensioniertes Koordinatensystem für die Temperaturkurve zeichnen. Der Abstand von einem Strich zum Nächsten sollte gleich sein, damit man die richtigen Ergebnisse global einfach eintragen kann.
Wenn du beim Zeichnen einen Fehler machst, kannst du bei dem Bühnen-Objekt unter dem Bereich Mahlstift alle Malspuren entfernen, indem du den Block doppelklickst. Wenn du willst, kannst du das auch in dein Programm einbauen.
Als erster sollte man das Fuchs-Objekte durch einen kleinen Punkt ersetzen und ihn weit unten links händisch positionieren, da unser Koordinatensystem weit nach rechts reichen wird, um alle Daten darstellen zu können. Dies kann man dann oben von der Objektleiste ablesen und mit einem Bewegungsblock bei jedem Programmstart auch fixieren. {{ :wiki:informatiksysteme:plug_and_project:koordinatensystem_start.png?250|}} Danach gehört der Malstift in der richtigen Farbe abgesetzt und du musst dir überlegen, wie du auf der y-Achse die Temperatur und auf der x-Achse die Zeitabtastungen gleichmäßig aufträgst. Zur Temperatur sei gesagt, dass du wahrscheinlich zwischen 35 und -10 Grad auftragen willst, also hast du //sieben// Querbalken (Unterteilungen auf der Koordinatenachse) nach oben und //zwei// nach unten.
Leider kann man keine Buchstaben oder Zahlen auftragen, also muss dein Koordinantensystem zur Zeit noch ohne Beschriftung auskommen.
Am besten legst du einen fixen Abstand (Variable) fest, bei denen du auf der y-Achse einen Querbalken pro fünf Grad Celcius machst und zeichnest dann einen Unterteilungsstrich, gehst wieder zurück auf die Koordinatenachse und wiederholst das, bis du genug Unterteilungen hast um gut alle Temperaturen einzeichnen zu können. Hinweis: Wenn du den negativen Wert einer Variable brauchst, kannst du ganz einfach mit der Rechenoperation < 0 - Variable > arbeiten. Auf der x-Achse machst du das gleiche, doch musst du hier bedenken, dass wir in in unserer Temperatur-Datei 3 Messungen pro Stunde haben, für einen Tag lang. Außerdem ist das Zeichenbrett in x-Richtung nur ungefähr 230px breit (Bemerkung: euer Nullpunkt ist wahrscheinlich im Minusbereich bei der x-Achse). Ihr müsst also 72 Striche auf der x-Achse aufzeichnen, bevor das Zeichenbrett endet. Du wirst vieles nach dem Trial-and-Error Prinzip ausprobieren müssen, doch wenn du fertig bist, solltest du ein fertiges und schönes Koordinatensystem haben, das ähnlich ausschauen soll, wie das meinige: {{ :wiki:informatiksysteme:plug_and_project:koordinatensystem.png?200 |}} Wenn du nicht weiterkommst, gibt es weiter unten ein Bild mit meinen Code für das Koordinatensystem. Doch Ziel dieser Aufabe ist, dass du das Koordinatensystem selbst zeichnen und damit weiterarbeiten kannst. ==== Zusammenfassung ==== * Einen Ausgangspunkt (Nullpunkt) finden und festlegen * Abstand festlegen und Unterteilungsstriche Zeichnen, sieben nach oben, zwei nach unten auf der y-Achse * Für 3*24 Werte über der gesamten x-Achse regelmäßig Unterteilungen machen, damit alle Werte sichtbar eingezeichnet werden können ===== Zweite Aufgabe: Einlesen und Zeichnen des Temperaturgraphen===== Zu Beginn der zweiten Aufgabe benötigen wir wieder ein Objekt, das uns als Stift zum Zeichnen dient. Dies kann man zum Anfangspunkt des Koordinatensystems setzen, die Koordinaten sollte ja schon in Variablen gespeichert sein. {{ :wiki:informatiksysteme:plug_and_project:temperaturliste.png?direct&100|}} Nun benötigen wir eine Liste mit den Temperaturwerten. Weiter oben gibt es einen Link zu der Temperaturdatei. Um die Datei einspielen zu können, musst du eine neue Liste erstellen und auf der Zeichenfläche die Liste rechtsklicken und //Importieren// auswählen. Nachdem du die Datei ausgewählt hast, sollte es so wie im Bild aussehen. Nun musst du eine Schleife bauen, die sooft duchläuft, wie es Objekte in der Liste gibt. Für jeden Wert musst du auf dem Koordinatensystem bei der x-Achse um einen Balken weitergehen. Du kannst dir davon viel von der Erzeugung der x-Achse des Koordinatensystems entnehmen. Jetzt musst du noch die y-Koordinate richtig Dimensionieren, sodass es mit der Beschriftung der y-Achse übereinstimmt. Danach setzt du die y-Koordinate des Objekts zurück auf den Balken der x-Achseund durch den automatischen Schleifendurchlauf (vergiss nicht den Zähler der Schleife zu erhöhen, wenn du einen verwendest) sollten nun alle Temperaturdaten richtig eingetragen werden. ==== Zusammenfassung==== * Zweites Objekt auf Nullpunkt setzen * Temperaturwerte in eine Liste laden * Schleife erzeugen, die alle Listenwerte abruft * Jeden Listenwert auf der richtig dimensionierten Höhe auf der y-Achse und fortlaufend auf jeder Unterteilung der x-Achse richtig einzeichnen ===== Folgeprojekte===== [[wiki:informatiksysteme:plug_and_project:pnppythonscripting|Plug and Project: Skripte mit Python]] ==== AutorInnen und Enstehung ==== * Autor: ''Stefan Meier'' * Rückfragen bitte an: ''[[mailto:stn.meier@gmail.com|Stefan Meier]]'' * Datum der Erstellung: ''27.12.2016'' ===== Lehr- und Lernmaterialien ===== * {{ :wiki:informatiksysteme:plug_and_project:koordinatencode1.png?linkonly |Blöcke des Koordinatensystems 1}} * {{ :wiki:informatiksysteme:plug_and_project:koordinatencode2.png?linkonly |Blöcke des Koordinatensystems 2}} * {{ :wiki:informatiksysteme:plug_and_project:loesung_graph.png?linkonly|Blöcke des Graphen}} * {{ :wiki:informatiksysteme:plug_and_project:loesung_buehne.png?linkonly |Blöcke der Bühne}} ==== Hilfreiche Links ==== * [[https://scratch.mit.edu/scratch_1.4/|Scratch Download]] * [[http://workupload.com/file/AYysrfx|Temperaturdatei]] ===== Quellen ===== ===== Kategorien ===== [[wiki:informatiksysteme:plug_and_project:pnpscratchprogramming:teachingmaterials|Unterrichtsmaterialien]]\\ [[wiki:informatiksysteme:plug_and_project:pnpscratchprogramming:internalteachingmaterials|interne Unterrichtsmaterialien]] {{tag>PnP Plug_and_Project Raspbian Scratch Programmieren Temperatur}} ~~DISCUSSION~~