73. Java to go (Java-portable) und HTML 5 Canvas Erstellung mit der Freeware LeonardoSketch

Einleitung

Coffee to go ist Trend in Deutschland. Java to go von PortableApps.com hingegen eher ein Geiheimtipp! Was hat das mit Leonardo zu tun? Nein, damit ist nicht da Vinci gemeint, aber diese Software (Freeware) hat die Fähigkeit einfache Canvas-zeichnungen in HTML-5 Code zu erstellen. Die Software benötigt dazu eine Javaumgebung. Damit schließt sich der Kreis und der erstellte "Da-Vinci-Code" ist die Grundlage von Javascriptcode, der dann wie durch Zauberhand zu einer PNG-Grafik im Browser "umgesetzt wird". Das Bild kann dann heruntergeladen werden. Hinter einem Bild steht also ein "mathematischer Code" in Javascript.

Inhaltsverzeichnis

Installation von Java Portable und Launcher
Grundgedanke
Download von Java_Portable_6_Update_22_online.paf.exe und JavaPortableLauncher_1.1.paf.exe
Voraussetzungen für den USB-Stick
Installation von Java auf den USB-Stick
Wie benutze ich die Javaumgebung

Leonardo zur Erstellung für Quellcode von Canvas (Html 5)
Leonardo installieren
Grundbeschreibung von Leonardo
HTML Canvas


Installation von Java Portable und Launcher

Grundgedanke

Viele Freeware benötigt eine Java-Laufzeitumgebung, die ein wenig anspruchsvoller ist, als die rudimentären Elemente in den Webbrowsern. Der Vorteil einer festen Installation ist die Erschließung vieler Software wie Teile von Open Office - oder dessen Abschaltung Libre Office - das nach Meinung des Sternenhimmelstuermers die "wahre" Alternative ist. Eine Javaumgebung ist betriebssystemunabhängig, d. h. die Anwendungen innerhalb der Javaumgebung können von Programmierern einmal programmiert, auf jedem System laufen. Viele Windowsuser laden sich deshalb Javaumgebungen runter. Diese müssen ständig aktualisiert werden - alte Umgebungen sind ein dankbarer Entmüllfaktor per Hand oder besser per Freeware, da Sie meistens als Dateileichen auf dem System bleiben -  , und  die Laufzeitumgebung ist ein dankbares Einfallstor für Viren, die sich in so einer Umgebung auch sichtlich wohl fühlen. Deshalb findet man bei vielen Usern keine fest installierte Umgebung.

Ab und zu kommen Sie aber vielleicht nicht um Java herum und dann ist es schön die eigene Javaumgebung auf dem USB- Stick zu haben (sind "nur 103 MB") und dann keine Rückstände auf dem Zielsystem zu haben...


Download von Java_Portable_6_Update_22_online.paf.exe und JavaPortableLauncher_1.1.paf.exe.

Die Seite ist englisch, zuverlässig und die Urmutterseite vieler portablen Anwendungen. Daher gibt der Sternenhimmelstuermer diesen Link.

Wichtig für Sie sind die großen roten Buttons mit weißer Schrift. Hier startet der Download.

Die Reihenfolge ist egal und Sie können die Dateien auch gerne auf dem Desktop lagern. Die erste o. a. Datei hat erstmal 13 MB. Später bei der Installation ist eine Onlineanbindung nötig und es werden noch einmal um die 90 MB herruntergeladen.


Installation auf dem USB-Stick

Voraussetzungen: Formatierung NTFS oder FAT (der Sternenhimmelstuermer hat FAT-Formatierung getestet). Alte Dateien können Sie auf dem USB-Stick liegen lassen, aber es sollte noch genügend Platz für die Installation der Java-Umgebung sein (so um 120 MB mit einkalkulierten Spielraum). Die fertigen Installationen liegen dann als normale Windowsordner vor mit jeder Menge vielfältiger kleiner neuen Dateien...

Der Stick wird an den PC angeschlossen - fertig.


Installation von Java auf den USB-Stick

Als erstes müssen Sie die Java Portable 6...Datei mit Administrationsrechten (rechte Maustastenklick und als Administrator auswählen) gestartet werden. Als installationssprache können Sie deutsch auswählen, was Ihnen ohne den nächsten Tipp wenig hilft: Zwei Fenster weiter wird ihnen nämlich der Installationspfad \CommonFiles\Java vorgeschlagen, den Sie nun gerne anpassen können. Und hier machen viele User einen Fehler, der ihnen erst am Ende der kompletten Installation zum Verhängnis wird und mit einer Fehlermeldung bei jedem Versuch quittiert wird, wenn Sie eine Anwendung starten wollen.

Der einzig richtige Weg ist wie folgend beschrieben:

1. Mal kurz start - computer - und dort den Laufwerkbuchstaben des Wechseldatenträgers herausfinden (Kann E oder F oder ? sein).
2. Den Laufwerkbuchstaben vor den eingetragenen Pfad im o. a.  Dialogfenster mit Doppelpunkt eingeben, also z. B. bei Laufwerk E, E:\CommonFiles\Java  
3. Dann geht es mit der Installation weiter. Lediglich eine Internetanbindung muss vorhanden sein. Achten Sie auf Ihre Firewall! Blockiert diese, ist es meist schon zu spät. Einen Moment später kommt eine Fehlermeldung und die Installation geht weiter (oder war das bei der anderen Datei, habe ich jetzt vergessen...). Also professionelle Firewall entweder kurzfristig deaktivieren und Windows Firewall aktivieren - die ist eher gutmütig.

Dann dasselbe Spiel mit der Installationsdatei des Launchers. Hier ist der zu veränderne Pfad: \JavaPortableLauncher in Laufwerk - z. B. E: - in E:\JavaPortableLauncher

Wichtig ist, dass Sie nicht in irgendwelche Unterverzeichniss oder andere Pfade kopieren. Merke: die Pfade sind eher halbabsolut und nicht relativ.


Wie benutze ich die Javaumgebung?

Die Ordner sind installiert, aber wie startet man denn nun so ein Javaprogramm. Keine Rosen ohne Dornen. Eine feste Installation auf dem PC ist ein wenig einfacher. Einige Java- Programme haben zur Aktivierung ihrer Umgebung Exe oder BAt- Dateien, in denen einzelne Pfade und Parameter der zu startenden Javadateien (.jar) stehen. Bei einer festen Installation weiß Windows nun, dass es eine Javaumgebung hat und kann die Befehle über die Kommandozeile zuordnen. Der Pfad zum USB-Stick hingegen ist Windows nicht bekannt.

Im wesentlichen gibt es drei Methoden, um eine reibungslose Installation zu gewährleisten:

1: Beim u. a. Leonardo gibt es drei Versionen: Die reine Datei Leonardo.onejar.jar (Javaarchivdatei) ist eine Datei, die sämtliche Programmdateien enthält. Folglich können Sie sie über den Ordner  JavaPortableLauncher, den Sie auf den USB-Stick als zweites installierten, die Datei JavaPortableLauncher.exe (Symbol braune Kaffebohne) durch Doppelklicken anwenden. Daraufhin öffnet sich ein Dialogfenster, in dem nach Dateien mit der Endung JAR gesucht wird. Nun hehen Sie im Fenster zu der  Leonardo.onejar.jar
und wählen diese aus. Die Anwendung startet.

2. Sie haben eine Exe oder Batchdatei. Die Batch muss man leider anpassen. Bei einer Batchdatei ist das gar nicht so schwer. Die Pfade zu den unterschiedlichen Dateien müssen lediglich angepasst werden. Bei einer Exe-Datei bleibt leider keine Möglichkeit, als eine kleine Nachforschung im Internet...oder ausprobieren der einzelnen Jar-Archive (ziemlich fruchtlos, da Parameterangaben fehlen, aber für ein wenig Übersicht nützlich - also Finger weg. Keine Sorge. Nichts kann kaputtgehen und bisher klappte es beim Sternenhimmelstuermer mit Variante 1 gut.

Der folgende Artikel knüpft an dieser nahtlos Stelle an...


Leonardo zur Erstellung für Quellcode von Canvas (Html 5)


Leonardo installieren

Downloaden Sie die Datei  Leonardo.onejar.jar  hier (unter den Punkt: double-clickable jar version for all platforms) auf den PC, wenn Sie eine portable Version Java von PortableApps wie oben beschrieben verwenden.  Suchen Sie mit der Launcher.exe die Datei wie oben beschrieben.

Haben Sie eine fest installierte Javaumgebung, dann können Sie die Version für (for) Windows verwenden und starten dort die Exe.

Die erste Frage nach Zählung durch Google Analystik kann verneint werden. Keine Rosen ohne Dornen: Das Tool hat Onlinefähigkeit. Sicherheitsrisiko? Benutzung wie immer auf eigene Gefahr.



Grundbeschreibung von Leonardo

Das Tool ist noch in einer frühen Entwicklungsphase. Das Tool ist erfreulicher Weise deutsch und die Bedienung ist noch leicht haklig.

 Einige Modi sind schwer veränderbar.

Ansonsten arbeitet es funktional. Hat zwei kleine Vorlagenbilotheken, die per Drag und Drop ins ins Bearbeitungsfenster gezogen werden können.

Das Hauptfenster zur Bearbeitung ist für Menschen auch ohne Corel Draw Erfahrung leicht zu erlernen, da die Vektorbearbeitungswerkzeuge in der linken Palette sehr überschaubar sind: Kreise, Linien, Text, Quadrate und Objekte vom Dreieck bis Achteck. sind anklickbar und können dann im Hauptfenster frei plaziert werden. Über Einfachklick oder Doppelklick werden verschiedene Eigenschaften in Fenstern angezeigt. Der gewohnte Rechtsklick für ein Kontextmenü entfällt.

Die Menüliste im oberen Bereich ist im Windowsstil. Wenn Sie ein Element markieren, können Sie unter dem gleichnamigen Menüpunkt auch die ebene des Elementes in den Vordergrung und Hintergrund bringen. Für Corel Draw oder ambitionierte Word-Anwender ist das Arbeiten mit mehreren Ebenen kein Hit, aber für den Normaluser in der Regel ungewohnt. Wichtig ist dabei die Regel: Neue Elemente sind erstmal auf der obersten Ebene (Erst z. B. einen Kreis und dann den Text, natürlich geht das auch umgekehrt, aber dann müssen Sie eines der Elemente auswählen und dann in den Hintergrund oder Vordergrund bringen).

Bilder können natürlich auch eingefügt werden (unterstes Symbol anklicken und danach die Arbeitsfläche anklicken, um das Bild dorthin zu importieren. Für einen reinen Canvasexport ist das natürlich Quatsch, da nur Vektorgrafiken als Javascript dargestellt werden können..).

Linien können wie alle Elemente frei plaziert werden und an den Knotenpukten zu flächen Verbunden werden, die farblich gefüllt werden können. Kurven können erstellt werden.

Zu guter ketzt können Sie das Projekt im eigenen Format speichern. Die erstellte Grafik kann als PDF, HTML mit Bildern, HTML Canvas, SVG, PNG und zu Java 2 D konvertiert werden. Ein Hochladen zu Twitter oder Flickr ist aus der Anwendung möglich, wurde aber vom Sternenhimmelstuermer nicht getestet.


HTML Canvas

Der Sternenhimmelstuermer erstellte eine Probeseite mit dem Originalcode (Die komplette Canvas-Seite im HTML 5 Code ist gerade mal 8 KB groß, dass ist mehr als vielversprechend!!!), die mit dem Internet Explorer 9 erstmal nicht angezeigt wird. Vielleicht klappt es ja mit Google Frame in Verbidung mit dem Internet Explorer 6,7 und 8, der Sternenhimmelstuermer testete das nicht, da er überwiegend mit Firefox im Internet unterwegs ist, mit dem es keine Probleme gibt. Mit Google Chrome werden Sie ebenfalls keine Schwierigkeiten haben... Obwohl eine Vorlage - eine Erdkugel nicht exportiert wurde - ist alles noch nicht so ausgereift, aber aller Anfang ist schwer...

Canvas ist ein Teil von Html 5. Schauen Sie sich den Quelltext der Probeseite an und Sie werden verstehen, was der Sternenhimmelstuermer mit "Da Vinci-Code" meinte. Es dürfe ebenso eine Mär sein, dass Profis aufwendige Tabellen in HTML Quellcode schreiben wie Menschen, die behaupten, Canvas-Zeichnungen rein durch Programmieren zu erstellen.

Wie dem auch sei - es kommt Bewegung in Canvas und das ist höchste Zeit, damit dieses unseelige Flash aus dem Internet verschwindet.

Dazu brauch es weitere Editoren. Dann bitte auch Freeware zur Erstellung von Animationen. User und Homepagebetreiber wie der Sternenhimmelstuermer werden dann schnell Canvas multiplizieren und die Ablösung von Flash wird dann sehr schnell erfolgen.
Auch diese Abhandlung wurde unter Priorität im Geiste der Canvasbewegung ausführlich geschrieben, um die Entwicklung zu beschleunigen.

Der Sternenhimmelstuermer bittet User, die vielleicht andere Freeware oder billige Software in Verbindung mit Canvas kennen, ihr Wissen an den Sternenhimmelstuermer zu posten...