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.
Mit dem ShapePicture Editor kann man auf eigenen Bildern klickbare Gebiete erstellen. Der Stil dieser Gebiete kann nach belieben angepasst werden. Beim draufklicken auf so ein Gebiet ö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.
## How to run:
...
...
@@ -17,22 +17,30 @@ Mit dem ShapePicture Editor kann man auf eigenen Bildern klickbare Gebiete erste
## Guide zum Nutzen des ShapePicture Editors:
#### 1. Bild auswählen
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.
Wenn Sie den ShapePicture Editor starten, sollten Sie zunächst das Bild auswählen, auf welchem Sie die Formen (Gebiete) erstellen wollen. Gehen Sie dazu auf "Datei" und dann auf "Bild auswählen". Es öffnet sich ein Modal. Dort geben Sie die Url zu ihrem Bild an und klicken Sie auf "Übernehmen". Nun können 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.
Formen können entweder gezeichnet werden oder durch Angabe der Koordinaten der Formen erstellt werden.
Wenn Sie die Form zeichnen wollen, gehen Sie auf "Neue Form zeichnen" und wählen Sie die gewünschte Formart. Dann zeichnen Sie die Form auf dem Bild.
Wenn Sie die Koordinaten eingeben wollen, klicken Sie auf "Neue Form hinzufügen". Wählen Sie dann unter "Form auswählen" die gewünschte Formart aus. Nachdem Sie die Koordinaten eingegeben haben, klicken Sie auf "Form hinzufügen", und die Form ist erstellt.
#### 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.
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 auf "Form bearbeiten" und es öffnet sich ein neues Modal mit allen stilistischen Optionen dieser Form. Links sehen sie die Optionen, rechts die dazugehörigen Werte, die Sie bearbeiten können. Wenn Sie auf Speichern klicken, wird Ihre Änderung an dem 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.
Wenn Sie auf den Button "Tabelle mit Formen zeigen" 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.
Wenn Sie Ihr ShapePicture abspeichern wollen, gehen Sie auf "Datei" und dann auf "Json Datei anzeigen". Es öffnet sich ein Model, indem der Text der Json Datei angezeigt ist. 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 oder einer anderen Internetseite hochladen, von wo aus diese Datei erreichbar sein wird, wenn Sie es später im ShapePicture Editor wieder öffnen möchten.
#### 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.
Gehen Sie auf "Datei" und dann auf "Ein ShapePicture laden". Es öffnet sich ein Modal. Geben Sie dort die Url zu der Json Datei ein, die Sie abgespeichert haben. Das ShapePicture wird in dem Zustand sein, indem Sie es abgespeichert haben und Sie können nun weiter an Ihrem diesem 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.
Gehen Sie auf "Datei" und dann auf "ShapePicture Vorschau". Sie werden dann nur das ShapePicture sehen. Kopieren Sie nun die Url, auf der Sie gerade sind. Ihr Browser sollte Ihnen diese anzeigen. 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.
Sie können von der Vorschau auch wieder zurücknavigieren, wenn Sie das ShapePicture weiter bearbeiten wollen.
Beachten Sie, dass wenn Sie nachdem Sie das ShapePicture geladen haben Änderungen vornehmen und dann auf die Vorschau gehen, der dort angezeigte Link die neuesten Änderungen nicht enthällt.
