Changes between Version 21 and Version 22 of squeak_faq


Ignore:
Timestamp:
10/21/2013 04:28:42 PM (11 years ago)
Author:
willi.mueller
Comment:

improved image displaying and loading

Legend:

Unmodified
Added
Removed
Modified
  • squeak_faq

    v21 v22  
    4040=== Wie werden Grafiken im Image verwendet? ===
    4141
    42 Der Dreh und Angelpunkt ist hier die Klasse `Form`. Die Basis von `Form` ist die "Squeak Canvas", eine Bitmap, die Bilder enthält, oder auf der gezeichnet werden kann. Diese Objekte können dann in einem `ImageMorph` verwendet werden. Bei größeren oder vielen Bildern lohnt ein Blick auf die Klassenseite von Form. Da gibt es eine Methode, die aus einer Datei direkt ein Form-Objekt lädt. Ähnliches findet sich auch auf den Klassenseiten von den Klassen `PNGReadWriter`, `JPEGReadWriter`, `GIFReadWriter und weitere für spezielle Bildformate.
    43 
    44 Mit Klassen wie `FileDirectory` oder `FileUrl` kann im Dateisystem navigiert werden. Hierbei gilt es auch zu bedenken, dass die Trennzeichen in den Pfaden je nach Betriebssystem unterscheidlich sind: "\" bei Windows, Linux und OSX benutzen "/"). Für Plattformunabhängigkeit könnt ihr `FileDirectory>>slash` oder `FileDirectory class>>slash` benutzen (siehe [#platform-path-separator Plattformunabhängige Dateizugriffe])
     42
     43==== Anzeigen von Bildern ==== #images-in-squeak
     44
     45Folgender Code zeichnet das Bild <Squeak-Image>/Contents/Resources/anImage.jpg in einen `ImageMorph`:
     46
     47{{{
     48ImageMorph new
     49    image: (Form fromFileNamed: 'anImage.jpg');
     50    openInHand.
     51}}}
     52
     53Wenn das Bild in einem Unterordner liegt, ermöglicht die Klasse `FileDirectory` plattformunabhängige Dateipfade ("\" für Windows, "/" für Linux und OS X)
     54
     55{{{
     56ImageMorph new
     57    image: (Form fromFileNamed: (FileDirectory uri: 'folder/anImage.jpg') fullName);
     58    openInHand
     59}}}
     60
     61Der Dreh- und Angelpunkt ist hier die Klasse `Form`. Die Basis von `Form` ist die "Squeak Canvas", eine Bitmap, die Bilder enthält, oder auf der gezeichnet werden kann. Diese Objekte können dann in einem `ImageMorph` verwendet werden.
     62
     63Es gibt in Squeak den `ImageReadWriter` als abstrakte Klasse und dazu verschiedene Implementierungen für z.B. BMP und PNG (`PNGReadWriter`, `BMPReadWriter`). Auf Klassenseite von `ImageReadWriter` findet sich dann auch `ImageReadWriter class>>formFromFileNamed:`.
     64
     65{{{
     66    ImageMorph new
     67    image: (ImageReadWriter formFromFileNamed:  (FileDirectory uri: 'folder/anImage.jpg') fullName);
     68    openInHand
     69}}}
     70
     71
     72==== Speichern und Austauschen von Bildern ====
    4573
    4674Bilder können auch im Image gespeichert werden. Das hat den Vorteil, das ihr die Bilder über Monticello verwalten könnt und so alle Teammitglieder über das Repository die aktuellen Bilder bekommen.
    4775Dazu speichert ihr die Bilder in Methoden, die Array-Repräsentationen der Grafiken zurückgeben. Dazu laded ihr das Bild, wie oben beschrieben, zuerst in eine Form und aus dieser erzeugt ihr dann das Array (siehe. z.B. `Form>>storeOn`).
    4876
    49 Es gibt in Squeak den `ImageReadWriter` als abstrakte Klasse und dazu verschiedene Implementierungen für z.B. BMP und PNG (`PNGReadWriter`, `BMPReadWriter`). Auf Klassenseite von `ImageReadWriter` findet sich dann auch `ImageWriter class>>formFromFileNamed:`, was in der konkreten Implementierung genutzt werden kann.
    5077
    5178
     
    6895==== Wieso stepping zu langsam sein kann ====
    6996
    70 Das Stepping Model von Morphic ist relativ einfach und basiert auf einem Prozess, welcher alle stepping Methoden ausführt, wenn ihre `Morph>>stepTime` abgelaufen ist. Im Umkehrschluss heißt das aber auch je mehr `Morph>>step` Methoden je häufiger aufgerufen werden, desto mehr Zeit wird zwischen einzelnen Schritten benötigt (da mehr berechnet wird). Die `#stepTime` gibt dabei einen Wunschwert an, nach dem die `#step` Methode wieder aufgerufen werden soll. Nun kann es aber sein, dass die `#step` Methoden soviel zu tun haben (oder andere Prozesse), dass die Überprüfung nur alle 50 ms ausgeführt wird und somit kann eine Zeit von 33 ms nicht garantiert werden. Allerdings wird durch die beschriebene Bewegung eine explizite `#runStepMethods Message an die Welt gesendet, welcher die Abarbeitung aller steps auslöst. Das heißt der UI Prozess löst bei seiner Reaktivierung eine neu Berechnung aus.
     97Das Stepping Model von Morphic ist relativ einfach und basiert auf einem Prozess, welcher alle stepping Methoden ausführt, wenn ihre `Morph>>stepTime` abgelaufen ist. Im Umkehrschluss heißt das aber auch je mehr `Morph>>step` Methoden je häufiger aufgerufen werden, desto mehr Zeit wird zwischen einzelnen Schritten benötigt (da mehr berechnet wird). Die `#stepTime` gibt dabei einen Wunschwert an, nach dem die `#step` Methode wieder aufgerufen werden soll. Nun kann es aber sein, dass die `#step` Methoden soviel zu tun haben (oder andere Prozesse), dass die Überprüfung nur alle 50 ms ausgeführt wird und somit kann eine Zeit von 33 ms nicht garantiert werden. Allerdings wird durch die beschriebene Bewegung eine explizite `#runStepMethods` Message an die Welt gesendet, welcher die Abarbeitung aller steps auslöst. Das heißt der UI Prozess löst bei seiner Reaktivierung eine neu Berechnung aus.
    7198
    7299==== Lösungen ====
     
    129156
    130157
    131 Bei größeren oder vielen Bildern ist `Form` interessant. Eine Datei lässt sich in eine `Form` mit `Form class>>importImage` laden.
    132 Ähnliches findet sich auch auf den Klassenseiten von den Klassen `PNGReadWriter`, `JPEGReadWriter`, `GIFReadWriter` und weitere für spezielle Bildformate.
    133 
    134 
    135 Mit Klassen wie `FileDirectory` oder `FileUrl` kann im Dateisystem navigiert werden.
    136 Hierbei gilt es auch zu bedenken, dass die "Pathdelimiter" der Betriebssysteme unterschiedlich
    137 sein können (/ oder \, ). Für Plattformunabhängigkeit könnt ihr `GRPlatform>>pathSeparator` benutzen.
    138 
    139 
    140 Wenn Bilder in Methoden (Was nicht unbedingt zu empfehlen ist)
    141 und damit im Image gespeichert werden sollen, können Array-Repräsentationen
    142 gewonnen werden, indem das Bild, wie oben beschrieben, in eine Form geladen wird
    143 und aus dieser dann das Array (z.B. `Form>>storeOn`).
     158Wenn Bilder in Methoden und damit im Image gespeichert werden sollen, können Array-Repräsentationen gewonnen werden, indem das Bild, wie oben beschrieben, in eine Form geladen wird und aus dieser dann das Array (z.B. `Form>>storeOn`).
    144159
    145160
    146161Das Speichern von Bildern im "Quellcode"/Image hat den einfachen Vorteil, dass ihr sie mit allen Teammitgliedern mit Hilfe des Monticello Source Code Repository teilen könnt. Bei externen Dateien muss leider ein anderer Weg (z.B. Dropbox, Git, SVN) genutzt werden. Dennoch würden wir externe Dateien immer bevorzugen (welche nur bei Bedarf geladen und im Image gecached werden), da sie das Image klein halten. Unser Plan gegen Ende des Semester ist es alle Projekte in ein Image zu laden, daher ist es auch hier sinnvoll eure Resourcen extern im Dateisystem zu halten. Denkt bitte auch daran einen Unterordner für euer Projekt innerhalb des Squeak Verzeichnisses zu nutzen.
    147162
     163Siehe Einträge zu [#platform-path-separator Plattformunabhängige Dateipfade] und [#images-in-squeak Bilder in Squeak].
    148164
    149165=== Wie formatiert man Text in Squeak? ===
     
    327343=== Wie werden plattformunabhängige Datei-Zugriffe realisiert? === #platform-path-separator
    328344
    329 Unabhängige Trennzeichen bekommt ihr mit den Methoden: `#separator`, `#pathSeparator`, `#separatorString`.
    330 Ebenso kapselt die Klasse URI alle notwendigen Plattform-Mappings.
     345Mit der Klasse `FileDirectory` kann im Dateisystem navigiert werden. Weil verschiedene Betriebssysteme verschiedene Pfad-Trennzeichen ("\" auf Windows, "/" bei Linux und OS X) verwenden, sollte die Methode `FileDirectory>>slash` verwendet werden.
     346
     347Das Pfad-Problem tritt jedoch nicht bei `FileDirectory-Objekten auf, denn sie übersetzen einen "/" im Pfad bereits in den betriebssystemspezifischen Pfad `<Squeak-Image>/Contents/Resources/folder/anImage.jpg` bzw. `<Squeak-Image>\Contents\Resources\folder\anImage.jpg` auf Windows.
     348
     349{{{
     350FileDirectory uri: 'folder/anImage.jpg'
     351}}}
    331352
    332353
     
    519540}}}
    520541
    521 Hierbei werden alle Dateien im Unterverzeichnis "KoanResources" (im
    522 Contents/Resources Verzeichnis des Images) hinzugefügt und beim
    523 Installieren wieder extrahiert. Einzelne Dateien könnt ihr mittels "zip
    524 addFile: pathToFile as: fileName" hinzufügen.
     542Hierbei werden alle Dateien im Unterverzeichnis "!KoanResources" (im
     543!Contents/Resources Verzeichnis des Images) hinzugefügt und beim Installieren wieder extrahiert. Einzelne Dateien könnt ihr mittels
     544`zip addFile: pathToFile as: fileName` hinzufügen.
    525545
    526546Weitere Informationen und Anleitungen siehe [http://wiki.squeak.org/squeak/3324 SARInstaller Dokumentation].