Create Interactive Content with SOLIDWORKS Composer
One of our favorite things about SOLIDWORKS Composer is the way you can take your images to a whole new level, with the ability to create content that you can navigate quickly and easily. So how can we do that?
The first thing to do is to create some image views. This highlights another great feature of using SOLIDWORKS Composer. We don’t have to worry about mates or display states for this. I can do what I want to position the geometry without worrying that I am breaking the SOLIDWORKS model.
For this blog we are using the SSM Trike which was a design project from a group of our interns.
So for this we wanted to show a couple of options for content. Here you will see the colour options for the bike as well as links for the spare parts. We are going to use SVG output files for this. They are scalable vector graphics so, no matter the size, we wont get pixelated results.
So first set up all your views, here are a couple of them:
As you can see we have colour options and parts lists. What we could show is limited only by our own imagination, or requirements of the customers.
To add the interactivity we need to add links to our objects in the views. For the front page we set a link to the relevant SVG file. So for the colour options we linked to the TRIKE-RED.svg file. Since this is for web content we need to do this. By keeping the link simple like this we know that as long as we keep all the SVG files in the same folder we will be ok.
Then all we need to do is continue with this process, adding links in each of the views. Remember that if we have an object, or ‘actor’ to use the SOLIDWORKS Composer term, that we have updated with link information, we can update that object across multiple views.
This allows us to use single items to link to other files. But there is another way! This involves using Hotspots.
Hotspots allows you to create groups of objects to act as a common link. This is useful to allow users to navigate around a system and highlights the complete group instead of the individual parts. You can colour the hot spot and when you hover over the hotspot you see the dynamic highlighting. This comes through nicely into the SVG file.
Hotspots also give another additional treat. That is it allows you to customise the highlight colour for links. The swatches for the colour options were all originally highlighting in green. This was then changed to a hot spot with an appropriate shade applied to ensure that hovering over the link had no adverse effect on the display. Otherwise you see a green tint to any object with a link applied.
Remember that links can also work for other non composer files. Do you want to play a video? Display a PDF or link to another page? All this is possible. Look out for the PDF logo in the main bar assembly. It will link to a pdf drawing of the part. Also selecting the Play button will link to a short video of the trike.
Once you have all your files created it’s time to add it into a website.
The following is a simple page that embeds the file. If the html page is in the same folder as the SVG files this will work nicely and is good for testing.
So we come to the final step. Test, test, test. Make sure that all of the links are up to date. It is all too easy to miss one out. Get colleagues to check too.
See the Kids Trike Parts list live on our website:
We have a few other Composer interactive examples on our website so feel free to take a look.
This is just the tip of the iceberg for what can be done with SOLIDWORKS Composer and even better news is that the product is currently on offer until the end of June 2017.
Gordon Stewart
Elite SOLIDWORKS Applications Engineer – Solid Solutions
Latest posts by Solid Solutions Technical Team (see all)
- Hybrid Mesh Modelling in SOLIDWORKS 2022 - January 26, 2022
- Tips & Tricks for Structure Systems - March 4, 2021
- Windows 7 End of Life – How will this affect SOLIDWORKS? - February 3, 2020