Einführung

Willkommen bei GeObject!

GeObject ist ein Tool, mit dem Du Programme entwerfen kannst, um digitale Zeichnungen zu erzeugen. Dieser Guide soll Dir dabei helfen, Dich hier zurechtzufinden und erklärt Dir die wichtigsten Konzepte, die Du zum Benutzen benötigst. So wirst Du zum Experten über Klassen und Objekte!

Installation

GeObject wurde als sog. Progressive Web App entwickelt. Du kannst es damit nutzen, wie eine normale Webseite oder auch fast wie eine native Applikation auf Deinem Tablet. Im Folgenden wird Dir gezeigt, wie Du GeObject zu Deinem Home-Bildschirm deines iPads hinzufügen kannst.

Apple

Öffne die Seite von GeObject mit dem Safari-Browser auf Deinem iPad. Klicke dann auf das Teilen-Symbol (Viereck mit Pfeil nach oben) und scrolle nach unten bis zur Option Zum Home-Bildschirm. Bestätige das Hinzufügen zum Homescreen.

Get Started

Jetzt ist alles bereit um durchzustarten!

Du kannst GeObject in zwei Richtungen verwenden:

1. Code->Zeichung: Hier kannst Du mit Programmierbausteinen Dein eigenes Programm erstellen, das Dir eine Zeichnung erzeugt.
2. Zeichung->Code: Hier erstellst Du Dir zuerst die Zeichnung und kannst Dir ein Programm automatisch erzeugen lassen, mit dem Du die Zeichung nachbilden kannst.

Code->Zeichnung

In diesem Abschnitt lernst Du, wie Du in GeObject korrekte Programme entwickelst, mit denen Du eigene Vektorgrafiken erzeugen kannst. Du lernst dabei, was sich hinter welcher Schaltfläche verbirgt und worauf Du beim Programmieren unbedingt achten solltest!

Das Fenster, in dem Du deine Programme erstellen kannst, ist in zwei Teile unterteilt. Auf der linken Seite befindet sich die Toolbox. Sie ist der Werkzeugkasten bei Deiner Arbeit. Hier findest Du deine Bausteine nach Kategorien gegliedert. Du siehst, dass mit Ausnahme der Kategorie Algorithmik für jede Klasse eine eigene Kategorie in GeObject existiert, die alle Methoden von Instanzen dieser Klasse bereithält. Um diese anzeigen zu lassen, kannst Du einmal auf die entsprechende Kategorie klicken. Auf der rechten Seite befindet sich dann der eigentliche Arbeitsplatz - der Workspace.

Das Erstellen Deines Programms erfolgt dann in einer sehr einfachen Mechanik. Ziehe einfach den Baustein Deiner Wahl aus der ausgeklappten Toolbox auf die Arbeitsfläche und lasse ihn - wenn möglich - in einen anderen einrasten.

Beim Aufbau Deines Programms musst Du ein paar Dinge beachten:

Wenn Du mit Deinem Programm zufrieden bist, kannst Du es nun erzeugen lassen. Am einfachsten geht das über die Schaltfläche ZEICHNEN. Drückst Du auf den Button, wird das Programm automatisch ausgeführt. Dabei wird die Geschwindigkeit, genauer die Zeit zwischen der Ausführung der einzelnen Blöcke durch den Regler auf der rechten Seite bestimmt. Möchtest Du, dass das Programm etwas langsamer abläuft, kannst Du einfach den Regler weiter nach rechts schieben.

Willst Du es komplett selbst in der Hand, in welchem Tempo dein Programm abläuft, kannst Du auch jeden Block einzeln ausführen. Benutze dazu die Schaltfläche SCHRITT.
Beachte: Dieses Feature funktioniert noch nicht für die Bausteinkategorie Algorithmik!

Möchtest Du mal einen Blick auf den Programmcode werfen, der im Hintergrund für dein Programm ausgeführt wird? Mit einem Klick auf MEHR -> CODE kannst Du den entsprechenden Code in der Porgrammiersprache JavaScript sehen.

Wenn Du Dein Programm für später speichern möchtest, kannst Du es unter MEHR -> DOWNLOAD lokal auf Deinem Gerät abspeichern. Möchtest Du an einem bestehenden Projekt weiterarbeiten, kannst Du über MEHR -> UPLOAD die entsprechende JSON-Datei hochladen.

Du kannst Deine Zeichnung wieder löschen nach Ausführung Deines Programms, indem du auf LÖSCHEN klickst.

Zeichnung->Code

In diesem Abschnitt lernst Du, wie Du Zeichnungen per Hand erstellen und Dir daraus ein Programm generieren kannst, mit dem Du in der anderen Arbeitsrichtung genau diese Vektorgrafikzeichnung rekonstruieren kannst. Du lernst dabei, wie Du bei der Arbeit am besten vorgehst und worauf Du achten solltest.

Wie schon bei Code->Zeichnung ist das Fenster Deiner Anwendung in zwei Teile unterteilt, lediglich in umgekehrter Reihenfolge, schließlich möchtest Du aus einer Zeichnung ein mögliches Programm erzeugen lassen. Beim Erstellen Deiner Zeichnung unterscheidet GeObject grundsätzlich zwei Zustände: öffnest du die Toolbar im rechten oberen Eck und wählst Deine erwünschte Form aus, kannst du mit einem Klick auf die Zeichenfläche Deine geometrische Form mit standardisierten Eigenschaften an der entsprechenden Stelle erzeugen lassen. Hast Du keine Form aus der Toolbar ausgewählt, kannst Du mit einem Klick auf ein bereits erzeugtes Objekt das zugehörige Kontextmenü öffnen. Dazu erfährst Du gleich noch mehr.

Wie Du jetzt weißt, kannst Du zu Deiner Zeichnung neue Objekte über die Toolbar hinzufügen. Jedoch wird bis auf die Position jedes Objekt einer Klasse die gleichen Eigenschaften haben. So wird zum Beispiel jedes Rechteck rot sein. Um diese Eigenschaften im Nachhinein zu verändern, kannst Du das eben angesprochene Kontextmenü verwenden. Mit einem Klick auf ein Objekt, werden Dir alle Methoden aufgelistet, die dieses Objekt bereitstellt. Um jetzt einer Objekteigenschaft einen anderen Attributwert zuzuweisen, fülle die Parameter der entsprechenden Methode mit Werten Deiner Wahl. Achte dabei, dass die eingetragenen Werte das korrekte Format haben, da das Programm sonst ungewollte Ausgaben erzeugt. Du kannst Dich dabei an den Platzhaltern orientieren, die standardmäßig in den Eingabefeldern hinterlegt sind. Um Deine Änderungen jetzt anzuwenden, musst Du dem Objekt jetzt eine Botschaft senden, dass er seine Eigenschaften entsprechend Deiner eingetragenen Werte verändert. Dies machst Du, indem Du auf den grünen Pfeil rechtsstehend klickst.

Im Übrigen kannst Du Elemente über das Kontextmenü auch wieder entfernen. Klicke dazu unten auf die Schaltfläche LÖSCHEN. Achtung: Das Löschen kannst Du nicht rückgängig machen. Gelöschte Objekte verschwinden auch komplett aus dem Programm, dass Du später generieren kannst.

In der Regel ist es hilfreich zu wissen, welche Eigenschaften und Methoden eine Klasse hat bzw. welche Attributwerte diese Eigenschaften bei einem konkreten Objekt haben. Mit einem Klick auf INSPIZIEREN im Kontextmenü eines Objekts, öffnet sich ein Popup mit zwei "Kästchen". Auf der linken Seite befindet sich immer die Klassenkarte zur entsprechenden Klasse des Objekts. Dort sind alle Eigenschaften und Methoden aufgeführt, die Instanzen, also konkrete Objekte dieser Klasse haben bzw. anbieten. Auf der rechten Seite des Popup findest Du die passende Objektkarte zu dem von Dir ausgewählten Objekt. Du kannst den Inspektor also dazu nutzen, um Deine Zeichnung präziser aufzubauen und zu überprüfen, ob Änderungen wie erwünscht ausgeführt worden sind.

Wenn Du zufrieden bist mit Deiner Zeichnung, kannst Du es in ein ausführbares GeObject-Programm umwandeln. Klicke dazu einfach auf den Button GENERIERE CODE. Möchtest Du die Zeichnung bzw. das Programm an späterer Stelle weiterentwicklen, steht Dir wie bei Code->Zeichnung ein DOWNLOAD und ein UPLOAD-Button zur Verfügung. Es ist übrigens auch möglich, das heruntergeladene Skript in der jeweils anderen Arbeitsrichtung hochzuladen. Zu guter Letzt kannst Du Deine Zeichenfläche selbstverständlich reinigen und von vorne beginnen. Nutze dazu die Schaltfläche LÖSCHEN.