- work in progress -

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

The Data tab on the start screen can be switched to Structure View. The default Structure View image can be changed by creating a custom image and uploading it. The Structure View image must have SVG format and must not exceed a size of 10 MB. The default version of the image might serve as template when creating your own image. It is Both the SVG files as well as VISIO templates are attached to the online version of this User Guide German version and English version(see below).

The custom Structure View image can have links embedded. Freely available tools like Inkscape allow adding links to SVG files. Follow this documentation for more details: http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web- Links .html. 
Links might lead to any ressource desired. Links might also lead to certain screens / functionality of iteraplan. For this case use relative links. E.g. to link to the Business Mapping List, use "../client/#/list/BusinessMapping" as link target.

The Structure View can be reset to default by using 'Revert' next to the upload icon.

How to edit the structure view using Inkscape

Customize Structure View using MS VISIO

  1. Download the structure view VISIO template (Download: VISIO template german; VISIO template english)
  2. Open the file in MS VISIO and edit it according to your needs
  3. Now export a SVG file by clicking on "File" → "Export" → "Change File Type" → "Graphic File Types - SVG Scalable Vector Graphics (*.svg)" → "Save As"
  4. The exported SVG file can already be uploaded to iteraplan, but there are two optional steps that remove certain (probably unwanted) visual effects
  5. Optional Step 1: Remove the underline-effect when hovering over building block types in certain browsers. For this, open the SVG in a text editor and add "a:link {text-decoration: none;}" inside the "<style>" tag.
  6. Optional Step 2: Remove the tooltipp that is shown when hovering over the SVG. For this, open the SVG in a text editor and remove all "<title>" tags. Advanced text editors like Notepad++ can easily remove all tags with only a few clicks.

Customize Structure View using Inkscape

  1. Download the structure view SVG file (Download: SVG german; SVG english)
  2. Open the file in Inkscape and go to the Object menu and click on “Fill and Stroke Paint”. This click adds the “Fill and Stroke Paint” dialogue on the right side of the screen. In the same way you can open “Text and Font” dialogue.
  3. Click on the rectangle that you want to rename. You have to click through different layers, so keep double-clicking until only the right rectangle is selected.
  4. Then choose the Text tool on the left-hand toolbar (or F8) and click where you want to insert the new text. Type in the new name. When you’ve finished, make sure the text is selected.
  5. In the right-hand dialogue choose “Text and Font” and select font: Roboto, font-weight: medium, font-size: 40 (alternative: Arial, normal, 36px should be okay, too), text-orientation: centered. Apply.
  6. Change the tool in the left-hand toolbar, use the selection-arrow (or press F1). The horizontal toolbar at the top shows the icon for flipping the selected text by 90 degrees. You can now position the text according to the old text.
  7. To change the color, open the “Fill and Stroke” dialogue on the right-hand side. Make sure, the text is selected, then change the value in “Fill” to ffffffff.
  8. You can zoom in with ctrl + mousewheel. Use the arrow tool and select the old text. Again you might have to double-click through several layers, so keep clicking on one of the characters until you have the old text selected. Then press the delete-key on the keyboard or use the right-click-menu and choose “delete”.
  9. Select the new text with the arrow tool and go to the menu “Path” and click on the first entry in the dropdown menu “Object to Path”. This step makes sure, your browser can display the new text.
  10. If you want to add custom links to the SVG, follow this documentation for more details: http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Links.html.