6.4 - Adding a 2D visualization - 2D Visualizations

In this lesson, we will add a 2D visualization to the Elfcar Configuration Model. The 2D images can be found by clicking here.

Adding 2D images

2D images can be added to a Configuration Model through the Step Editor. You can choose 'Hotspot' for the Step type. 2D images are very suitable if you want to show products. With 2D images it is also possible to show visualizations of the configuration on the quotation document.

How 2D graphics work in Elfsquad

2D images are overlaid on top of each other in Elfsquad. If a top image contains a transparent background, the underlying image is displayed there. This has the advantage that you do not have to create a unique image for each possible combination. Suppose the Elfcar has 3 colors and 3 different rims, this is 9 combinations in total. But it is not necessary to create all these 9 images. You can in this case create 3 images of the car with the different colors and 3 images for rims. In this example it doesn't make a big difference. But if you add multiple options you can soon create thousands of combinations. It is important that the images are all the same size. If you do not do this, the images will not be in the right place.

Adding a 2d image

1. Open 'Editor' > 'Step Editor' > 'Elfcar'.

2. Make sure you are in the Step 'Exterior Back'.

3. Click on 'Add image'.

4. Select the image Elfvo_black_back.png

5. Click on 'Add Feature'.

6. Select the Features 'Comfort Model' & 'Black'.

7. Repeat the above steps but for the white comfort model image, making sure that instead of selecting the Feature Black, you now select the Feature White.

Only when all Features associated with an image are 'active' will the image become visible. For the images we just added, an image is only visible if the comfort model is selected in combination with either the Black Exterior color or the White.

Where to show the 2d images

The 2d images are visible during configuration and can also be shown on the quote. During configuration in the EMS, the image is visible in the upper right corner. This image is small by default, you can enlarge it.

Another option is the Showroom, which is an additional module. With the Showroom, the emphasis during configuration lies on the visualization. The showroom is ideally suited if you want end customers to configure themselves.

Assignment

Add all corresponding images for the Steps 'Rear Exterior' and 'Front Exterior'. The images can be downloaded via the link at the top of this page. Below you will find a file with an overview of all images and the features they should be linked to. Good luck!

Download: File with all images