Images

Two widgets show a picture uploaded into the dashboard: Image for pictures made of pixels, such as a photo or a logo, and SVG for drawings, such as a plant diagram or a whole screen's background. Both keep the file inside the dashboard itself, so it travels with every export and transfer of the dashboard, and both fit it into their box the same way.

Both widgets also have the properties every widget shares: see Properties every widget shares. Their own three settings sit in the Image block of the setup panel: a preview, a file picker, and two choice boxes without captions for the fit.

How a picture fits its box

When the picture and the box have different proportions, two settings decide what happens. scale chooses between fitting and covering, and aspectRatio chooses where the picture sits:

The choice boxes list the names in capitals, XMIDYMID or MEET, and in English only. The first sets aspectRatio, the second scale. Changing them, or the file, can be undone and enables Save, like any other edit.

Image

An image shows a picture made of pixels. Pick the file in the Image block: PNG, JPEG, GIF, BMP and the other formats Java can read. The picture is converted to PNG and stored in the dashboard as text, so a photo usually takes more room than the file it came from. An animated GIF keeps its first frame. Until a file is chosen, the widget shows a placeholder picture, in the editor and in the viewer.

• Size and place come from the box: a new image is 80 × 32 px, centred on the point where it was dropped. The offsets dX, dY, dWidth and dHeight move and resize it in the viewer.
• Every repaint encodes the picture again. A view repaints each time a variable it shows changes, and every repaint turns the picture into PNG once more. A large picture on a busy screen therefore costs the server work at every change. Keep Image for small pictures, such as a logo, and use an SVG for large pictures and backgrounds.

Properties

Styling

• Element: one SVG <image>. styles applies to it.
• Default styles: {}, none.
• Keys that work: opacity and cursor.
• Keys to avoid: fill and stroke, which do not colour a picture, and x, y, width and height, which some browsers take as the image's geometry and draw instead of its box.

The widget reads no style key itself.

Styled example. A camera snapshot, dimmed while the camera is offline:

Styles   {opacity:if(CAM_1_ONLINE,1,0.4)}

SVG

An SVG widget shows a drawing. Pick a file whose name ends in .svg in the Image block; any other file is ignored. The drawing is stored in the dashboard as the text of the file. Until a file is chosen, the widget shows a placeholder picture.

• It is shown as a picture. Scripts and links inside the drawing do nothing, and it cannot load other files. Text in it is drawn with the fonts of the viewer's device, so convert text to paths in the drawing program when its look matters.
• Styles are never applied. The setup panel offers no Styles field, and a styles stored in the record changes nothing. Change the look in the drawing itself, draw shapes over it, and show or hide it with visible. The offsets dX, dY, dWidth and dHeight do move and resize it in the viewer.
• A drawing stays sharp at every zoom, and repainting it costs little, which makes it the widget for large pictures.
• Use it as the background. A drawing of the whole screen goes last in the widget list, because the first widget is drawn on top and the last underneath everything. Make its box the size of the canvas, and draw it in the canvas's proportions: a drawing of 1920 × 1080 on a canvas of 1920 × 1080 fills it with meet, without bands. See How dashboards draw and refresh for the paint order and the canvas size.

Properties

Styling

• Element: one SVG <image>. styles is never applied to it.
• Default styles: {}, none.
• Keys that work: none.
• Keys to avoid: all of them; they have no effect.

The widget reads no style key itself.

Styled example. A drawing cannot be styled, but a shape can be drawn over it. A red frame around the whole background while the plant is in alarm is a Rectangle with the canvas's box, placed before the SVG in the list so that it is drawn over it:

Styles   {fill:"none",stroke:if(PLANT_ALARM,"#DC2626","none"),stroke_width:8}

Next steps

• How dashboards draw and refresh
• Properties every widget shares
• Styling widgets
• Shapes and text

This page describes Data Orchester Dashboards 1.9.4.