Detailed Description

The Picture Sequence widget displays different elements in an SVG file based on input values.

The SVG file needs to be structured as described in Styling by SVG. The different cdpPicture elements are selected using the property named widgetPicture. It is also possible to add different styles for the images in separate elements as described in Style element structure. The different style elements for the different pictures are named cdpPictureNStyleX - "N" being the picture number and "X" the style number for that picture. We use the property named widgetStyle to select the style element for a certain picture number. This means that combining the widgetPicture and widgetStyle properties is similar to selecting row and column in a matrix of images.

The above image shows the default example SVG file for the theme named flat_gray_light (:/themes/flat_gray_light/pictures/pictureSequenceExample.svg). Notice how each row represent a picture while the different columns show different styles of that picture. Both rows and columns start on index 0. Hence, to make the widget show the green picture on the last column , we set widgetStyle to 1 and widgetPicture to 2.

Connect and Control the Picture from CDP

The properties widgetPicture and widgetStyle can be connected and controlled by CDP objects. To do this we add routing to cdpRouting for controlling widgetPicture, and to cdpStyleRouting for selecting cdpStyle. If you want a fixed style or fixed picture, you only need to add routing to the property you want to change in runtime.

The following table shows what to configure to change picture and style from CDP using two CDP Signals named MyPictureSignal and MyStyleSignal.

Styling by SVG

Use the svgFile property to style the widget using a svg file. Styling by svg enables switching between different themes in runtime (as long as the files are placed at identical locations within theme directories).

Main element structure

The following tree shows the svg structure of a picture sequence.

svg
└─── Layer1
  ├─── cdpPicture0       (element group)
  │     ├─── < Path >    (transparent rect/path)
  │     └─── < Group >   (graphics)
  ├─── cdpPicture1       (element group)
  │     ├─── < Path >    (transparent rect/path)
  │     └─── < Group >   (graphics)
  └─── cdpPictureX       (element group)
        ├─── < Path >    (transparent rect/path)
        └─── < Group >   (graphics)

The following table explains the named elements in more detail.

Note: Elements that are written with pointy brackets, like < Path >, can be given any name. Avoid cdp prefix as these are special to the parser.

Note: The structure is loadable by both CDPBasePicture and CDPBasePictureSequence.

Style element structure

The picture sequence also supports styles that can be changed by the widgetStyle property or by cdp object. Styles makes it possible to make a picture matrix and collect multiple picture sequences in one file.

svg
├─── Layer1
│     └─── ...                  (see previous section)
└─── Styles
      ├─── cdpPicture0StyleX    (element group)
      │     ├─── < Path >       (transparent rect/path)
      │     └─── < Group >      (background graphics)
      ├─── cdpPicture1StyleX    (element group)
      │     ├─── < Path >       (transparent rect/path)
      │     └─── < Group >      (background graphics)
      └─── cdpPictureXStyleX    (element group)
            ├─── < Path >       (transparent rect/path)
            └─── < Group >      (actual graphics)