How to use images as controls
Would you like to use a control panel that include images to represent different values? Then add a
Select control using images to your solution by following these steps.
- You configured the frames and routes for your solution.
- You configured the relevant contents such as the model(s), control panel(s), viewer(s) and datastore.
- You saved the images you’d like to use as controls to your solution folder.
1. Configure a selection control
- Define a control with
- Define how many images there will be with
- Define the choices with
kind: Image, their value, label and relevant image path.
my-image-selection: kind: Select label: My image selection value: "2" columns: 1 choices: - kind: Image label: image 1 value: "1" imagePath: my-image-ph.png - kind: Image label: image 2 value: "2" imagePath: my-image-ph.png
2. Set the right size for your image
To display the image choices correctly, the layout width and itemheight should be exactly right based on the sizes of your images (px).
- Note down the widths and heights of your images in pixels.
imageHeightshould be equal to the height of the images.
- The width of the relevant area in your layout can be calculated with the formula below:
area-width = 40 + (image-width * number-of-columns) + (6 * (number-of-columns - 1))
The configuration should look similar to the example below:
my-home-frame: kind: Frame layout: kind: ColumnLayout widths: [auto, 583px] #use the formula to calculate the width of the control panel areas: ["",my-params] contents: my-params: kind: ControlPanel controls: my-image-selection: kind: Select label: My image selection value: "2" imageHeight: 100 #should be equal to the height of the images columns: 1 choices: ...
- Create a file
solution.yamlfile with the image selection example solution file content.
- Save the placeholder image in your solutions folder.
- Deploy using the cli:
ph deploy solution -o <org-slug> <solution-name>
The solution should look like the image below.