Einleitung
In Ihrer QM-Pilot Umgebung können Sie unter Konfiguration -> Einstellungen -> Logos unter "Benutzerdefinierte Prozesslandschaft/Dokumentenlandschaft/Risikolandschaft einfügen" eine eigene Übersichtsseite unter "Prozesse/Dokumente/Risiken ansehen" anzeigen lassen. Dazu können Sie mit dem Knopf "Select files... " das gewünschte Bild in Ihre QM-Pilot Umgebung laden.
Um die Landschaft nun anzuzeigen, muss der Haken bei "Benutzerdefinierte Prozesslandschaft/Dokumentenlandschaft/Risikolandschaft auf oberster Ebene anzeigen" gesetzt werden.
Mit dem Feld "Code benutzerdefinierte Prozesslandschaft/Dokumentenlandschaft/Risikolandschaft" können Sie Bereiche auf Ihrem hochgeladenen Bild definieren bei denen mit einem Klick z.B. zu einem Prozess/Dokument/Risiko navigiert wird oder eine neue Seite geöffnet wird. Dies geschieht mit einem sogenannten Image Map.
Hier eine kurze Einführung im Umgang mit Image Maps im Bezug auf die Landschaft in Ihrer QM-Pilot Umgebung:
Aufbau
Eine Image-Map beginnt immer mit folgendem Code:
und endet mit:
Dazwischen werden ein oder mehrere Bereiche als Formen (Rechteck, Polygon oder Kreis) definiert:
Rechteck
Beispiele:
oder
Die "<" zeigen den Begin und ">" das Ende eines Bereichs an. Jeder Bereich besitzt folgende Eigenschaften:
|
Eigenschaft |
Beschreibung |
|
target |
Ob bei einem Klick auf den Bereich der Link im gleichen Fenster ("_self") oder in einem neuen Fenster ("_blank") geöffnet werden soll. |
|
alt |
Welcher Text angezeigt werden soll wenn man mit der Maus über den Bereich fährt. |
|
title |
Welcher Text angezeigt werden soll wenn man mit der Maus über den Bereich fährt. |
|
href |
Auf welche Seite navigiert werden soll sobald der Bereich angeklickt wird. |
|
ng-click |
Auf welchen Prozess/Dokument/Risiko navigiert werden soll sobald der Bereich angeklickt wird. Wird nur benötigt, wenn zu einem Prozess in der aktuellen QM-Pilot Umgebung navigiert werden soll, wobei 528 für die treeId steht (welche man am Ende des Links erkennt welchen man sieht, wenn man einen Prozess öffnet). |
|
coords |
Die Koordinaten (in Pixel) der Ecken des Rechteck-Bereichs in der Reihenfolge: Links, Oben, Rechts, Unten |
|
shape |
Der Typ des Bereichs (hier "rect" für Rechteck) |
Polygon
Beispiel:
oder
Die "<" zeigen den Begin und ">" das Ende eines Bereichs an. Jeder Bereich besitzt folgende Eigenschaften:
|
Eigenschaft |
Beschreibung |
|
target |
Ob bei einem Klick auf den Bereich der Link im gleichen Fenster ("_self") oder in einem neuen Fenster ("_blank") geöffnet werden soll. |
|
alt |
Welcher Text angezeigt werden soll wenn man mit der Maus über den Bereich fährt. |
|
title |
Welcher Text angezeigt werden soll wenn man mit der Maus über den Bereich fährt. |
|
href |
Auf welche Seite navigiert werden soll sobald der Bereich angeklickt wird. |
|
ng-click |
Auf welchen Prozess/Dokument/Risiko navigiert werden soll sobald der Bereich angeklickt wird. Wird nur benötigt, wenn zu einem Prozess in der aktuellen QM-Pilot Umgebung navigiert werden soll, wobei 528 für die treeId steht (welche man am Ende des Links erkennt welchen man sieht, wenn man einen Prozess öffnet). |
|
coords |
Die Koordinaten (in Pixel) der Ecken des Polygon-Bereichs. Jeder Punkt wird jeweils in der Reihenfolge Links, Oben angegeben. Falls sich Anfangs-Punkt und End-Punkt des Polygons nicht decken, werden diese automatisch am Ende verbunden. |
|
shape |
Der Typ des Bereichs (hier "poly" für Polygon) |
Kreis
Beispiel:
oder
Die "<" zeigen den Begin und ">" das Ende eines Bereichs an. Jeder Bereich besitzt folgende Eigenschaften:
|
Eigenschaft |
Beschreibung |
|
target |
Ob bei einem Klick auf den Bereich der Link im gleichen Fenster ("_self") oder in einem neuen Fenster ("_blank") geöffnet werden soll. |
|
alt |
Welcher Text angezeigt werden soll wenn man mit der Maus über den Bereich fährt. |
|
title |
Welcher Text angezeigt werden soll wenn man mit der Maus über den Bereich fährt. |
|
href |
Auf welche Seite navigiert werden soll sobald der Bereich angeklickt wird. |
|
ng-click |
Auf welchen Prozess/Dokument/Risiko navigiert werden soll sobald der Bereich angeklickt wird. Wird nur benötigt, wenn zu einem Prozess in der aktuellen QM-Pilot Umgebung navigiert werden soll, wobei 528 für die treeId steht (welche man am Ende des Links erkennt welchen man sieht, wenn man einen Prozess öffnet). |
|
coords |
Die Koordinaten (in Pixel) des Zentrums des Kreis-Bereichs sowie den Radius in der Reihenfolge: Links, Oben, Radius |
|
shape |
Der Typ des Bereichs (hier " circle" für Kreis) |
Im Internet finden sich auch Tools mit denen sich Image Maps generieren lassen. Ein einfaches Tool finden Sie unter https://www.image-map.net
Beachten Sie hierbei, dass jeweils nur den Code von benötigen und dass Sie das selbe Bild verwenden, welches Sie im QM-Pilot hochladen. Ausserdem muss bei den Tools im Internet das Attribut ng-click="onChangeTree(... )" selber gesetzt werden falls auf ein Prozess/Dokument/Risiko innerhalb der QM-Pilot Umgebung navigiert werden soll.