Website zum Erstellen von Shapes und Export als Json.
Möglichkeit zur Eingabe eigener Bilder und Jsons von Shapes.
Am besten dann wenn Andere die Möglichkeit haben das so entstandene Bild mit shapes in ihrer Website einbinden könenn
# WWW Projekt ShapePicture Editor
## Was macht ShapePicture Editor?
Mit dem ShapePicture Editor kann man auf eigenen Bildern klickbare Gebiete erstellen. Der Stil dieser Gebiete kann nach belieben angepasst werden. Beim draufklicken öffnet sich ein Modal. Der Titel und der Körper dieser Modale kann auch angepasst werden. Dieses ShapePicture kann als Json exportiert werden und auf einer eigenen Webseite angezeigt werden.
Wenn Sie den ShapePicture Editor starten, sollten Sie zunächst das Bild auswählen, auf welchem Sie die Formen (Gebiete) erstellen wollen. Geben Sie dazu in dem zugehörigen Modal die Url zu ihrem Bild an und klicken Sie auf "Übernehmen". Nun könenn Sie die Formen erstellen.
#### 2. Formen erstellen
Formen können entweder gezeichnet werden (über das entsprechende Dropdown Menü erreichbar) oder durch Angabe der Koordinaten der Formen erstellt werden.
#### 3. Formen bearbeiten.
Dazu klicken Sie auf die Form, die sie bearbeiten wollen. Es öffnet sich das Modal dieser Form. Durch doppelklicken auf den Titel oder den Körper des Modals können Sie diese bearbeiten. Indem Sie mit dem Mauszeiger aus dem entsprechenden Bereich rausgehen, speichern Sie Ihre Änderung. In den Körper können Sie auch eine Url eingeben, dann wird die Internetseite, die unter dieser Url erreichbar ist in dem Körper des Modals angezeigt. Im Fuß des Modals können Sie entweder die Form löschen oder den Stil der Form bearbeiten. Wenn Sie sich entscheiden den Stil bearbeiten zu wollen, dann klicken Sie da drauf und es öffnet sich ein neues Modal mit allen stilistischen Eigenschaften dieser Form. Links sehen sie die Eigenschaften, rechts die dazugehörigen Werte, die Sie bearbeiten können. Wenn Sie auf Speichern klicken, wird Ihre Änderung an derm Stil gespeichert.
#### 4. Übersicht über alle Formen verschaffen
Wenn Sie auf den Button "Tabelle mit Formen anzeigen" klicken, öffnet sich eine Tabelle, in der Sie zu jeder Form den Namen und Koordinaten sehen können. Sie können die Formen auch von hier aus bearbeiten oder löschen.
#### 5. ShapePicture abspeichern und hochladen
Wenn Sie mit Ihrem ShapePicture zufrieden sind, können Sie auf einen Button klicken, sodass Ihnen die Json Datei angezeigt wird, die alle notwendigen Daten enthällt, die gespeichert werden sollen. Kopieren Sie alles, was in dem grauen Kasten steht öffnen Sie einen Texteditor, fügen Sie den kopierten Text ein und speichern Sie es als eine Json-Datei. Nun sollten Sie diese Datei auf Ihren bevorzugten Cloud-Server hochladen.
#### 6. Ein bereits erstelltes ShapePicture laden
Clicken Sie auf den zugehörigen Button und geben Sie dort die Url zu der Json Datei ein, die Sie abgespeichert haben. Nun können Sie weiter an Ihrem ShapePicture arbeiten.
#### 7. Url zu einem ShapePicture erhalten und einsetzen
Clicken Sie auf den zugehörigen Button, und Sie erhalten eine Url von dem ShapePicture. Nun können Sie diese Url im Browser eingeben und Ihnen wird das fertige ShapePicture angezeigt. Wenn Sie das ShapePicture auf Ihrer eigenen Webseite einbinden möchten, nutzen Sie auf Ihrer Webseite das [Html-Element "iframe"](https://www.w3schools.com/html/html_iframe.asp) und binden Sie da die Url zum ShapePicture Editor ein.