Image tiles

Image tiles are simply used to display images on your dashboards, such as company logos or architecture diagrams.

You can also use live diagram mode to reflect the current health state of workspaces, dashboards, or objects using SVG images.

To add an image tile, hover over a blank tile on a dashboard and click the

Configuring an image tile

When configuring an image tile, you can either manually upload an image from your device or import an image using a URL.

Uploading an image

1. Drag and drop, or browse for an image:
   Either drag and drop the image you want to upload or click the field to manually browse for it from your device.
2. Live Diagram:
   If the uploaded image is an SVG file, and contains hyperlinks to SquaredUp objects, you’ll have the option to Show health state and configure the live diagram properties.
3. Description:
   Optionally, enter a description for the image. This displays to screen readers and when you hover over the image on the dashboard.
4. Click Save to add the image tile.

Importing an image via URL

1. Select the Enter an image URL tab.
2. Image URL:
   Enter the URL of the image you’d like to display.
3. Description:
   Optionally, enter a description for the image. This displays to screen readers and when you hover over the image on the dashboard.
4. Click Save to add the image tile.

Formatting image tiles

This one minute video shows you how to format your text and image tiles once they have been configured:

Play Formatting text and image tiles

Live diagram mode

Live diagrams reflect the health state of workspaces, dashboards or objects from SquaredUp by updating the color of your SVG image.

You can choose how to style the health state effect for the image and optionally add a health state icon.

Before you start

When configuring a live diagram, you must supply an SVG image that contains a hyperlink to the object you want to show the health state of.

1. Create an SVG diagram using your preferred editor (for example, https://diagrams.net or Microsoft Visio). SVG live diagram tip
2. In SquaredUp, browse to the workspace, dashboard, or object for which you want to show live health state for, and copy the URL from your browser’s address bar.
3. In your SVG editor, select an object and add a hyperlink to the link you copied (for example, in diagrams.net right-click an object and select Edit link).
4. Export the hyperlinked SVG. It is now ready to be uploaded as a live diagram in SquaredUp.

Configuring a live diagram

When uploading your hyperlinked SVG, configure the following properties:

1. Show Health state:
   Must be enabled, as this displays the health status of the linked object to your image.
2. Style:
   Select one or more of the following parameters to configure how the health state is displayed:
   • Fill:
     Fills the SVG object with the corresponding health state color.
   • Icon:
     Displays an icon over the SVG that reflects the state and color of an object's health. If selected, you can also choose define the icon's Position and the Icon size.
   • Glow:
     Displays a gradient effect around the SVG using the health state color.

     

Troubleshooting live diagrams

• If you are using any external images within your SVG, ensure these images are embedded. Any external references will be blocked due to browser security policies.
• When hyperlinking an object in a SVG it’s worth noting that SquaredUp will select the first child element when using Fill mode.

Was this article helpful?