Configurator 360 Hands-On Lab

Transcription

1 Configurator 360 Hands-On Lab Pierre Masson Premium Support Specialist Join the conversation #AU2017 #AUGermany

2 Preliminary step Enable C360 Go the trial page of C360 and enable it : You will need your Autodesk Account login.

3 Class summary In this hands-on lab, we will use Inventor software and Configurator 360 to create a fully configurable model available in the cloud. We will start with an Inventor model and explore different strategies for driving it parametrically, like ilogic rules, forms and deriving parts. We will fine tune the model to configure it successfully in C360, we will learn how to display user messages for your customers. Finally, we will upload the model and make it ready for deployment everywhere.

4 Key learning objectives At the end of this class, you will be able to: Use various methods to create parametric driven assemblies. Upload your model in Configurator 360. Set your Configurator 360 environment. Embed the configurator in a custom webpage. Deploy your design to colleagues and customers.

5 Agenda Configurator 360 Presentation. Step 1 : Explore your parametric driven design. Step 2 : Using ilogic forms and images. Step 3 : Setting up the C360 environment. Step 4 : Loading the model in C360. Step 5 : Displaying a message in C360. Step 6 : Embedding the design in your webpage. Step 7 : Adding elements to the HTML Page.

6 Configurator 360 Presentation

7 CAD/ Engineering CAD Configurations, as a Service CPQ Value Prop Dynamic visualization Various 3D, 2D formats Engineering BOM High performance Embed into any website Home Grown CPQ

8 CAD/ Engineering CAD Configurations, as a Service BIM Customer website Value Prop Dynamic visualization Various 3D, 2D formats Revit, IFC Engineering BOM High performance Embed into any website BIM Content on Demand

9 An out-of-the-box experience for Inventor customers Scalability Performance Online CAD configuration Website integration Multi-platform Uptime Product Fixes New version Revisions Analytics Security Technology/ Hardware

10 Step 1 : Explore your parametric driven design

11 Parametric part derived in components Parametric_Driver.ipt contains the main parameter to drive our assembly. It is derived into the components. Only the relevant parameters for each part are derived.

12 Driving parameters from top IAM with ilogic We want to drive the relevant parameters from the main assembly. An ilogic rule will copy the main assembly parameter into the parametric part. Then Inventor will update the component geometry with the new Parametric_Driver.ipt parameters values.

13 Changing the gear Variant An ilogic Rule is using the Variant Parameter to swap the Gear component depending on the value chosen. You can change parameters at the top assembly, and observe the update in the parametric driver and then in the other parts.

14 Step 2 : Using ilogic forms and images

15 Using ilogic forms and images ilogic forms and images are supported in Configurator 360. They will be available in your configurator and can be really helpful to guide the user in making the right choices for his configuration.

16 Create ilogic form to switch gear Create a new ilogic form. Add a Tab Group called Driving Gear. Drag 2 pictures in it, link them to gears pictures in the picture folder. Add parameter Drive_Gear to the tab. The name of the pictures must match the Drive_Gear values to change accordingly.

17 Add the user parameters to the form Add a Tab Group called Differential Parameters. Drag the user parameters of the main assembly. Though we will be able to edit them directly without having to go in the parameters window.

18 Step 2 completed Step 2 is completed. You have created an ilogic form with images that can drive your assembly configuration. This kind of solution can be very useful to guide your users in their choices.

19 Step 3 : Setting up the C360 environment

20 Setting up the C360 environment We will log into Configurator 360 and explore the environment. We will define the most important settings like company description.

21 Setting up the branding options Navigate to configurator360.autodesk.com. Sign-In. Go to the Options Tab / Branding. Set the company name, logo and other settings for your catalog.

22 Setting up the download options Download types are very important to define. You might want to enable / disable the drawing download. Go to the Downloads tab, and drag and drop some file types.

23 Setting up the quote options Go to the RFQ Tab, and define the settings you need. Custom PDF Documents can be used, where parameters and properties from the model are directly put in the document. For more information, see this link.

24 Step 4 : Loading the model in C360

25 Uploading the model in C360 Files can be uploaded as a ZIP file from the C360 portal. Files can be uploaded from the C360 Plugin in Inventor.

26 Uploading the model from Inventor Open Differential Revised.iam from the step 4 files. Go to Tools / Add-Ins and ensure the configurator 360 Add-In is loaded. Go to the A360 tab and select Upload to Configurator 360.

27 Uploading the model from Inventor Select New Design, give it a name. The design type will be assembly. Upload all files in this assembly s folder, otherwise the gear variants will not be loaded.

28 Navigating in the configurator environment Open the design in C360. The ilogic form is loaded with the pictures. You can also drive the parameters we exposed in the ilogic form. Navigating in 3D is similar to Inventor (Mouse Wheel pressed and Shift for Orbit).

29 Note : Sharing Files across design It is possible to define common files for all your designs. For example you have a central excel sheet containing data for your design components. You can enable this in the Options, tab Shared Files.

30 Step 5 : Displaying a message in C360

31 Displaying a message in C360 With a bolts number below 8, the assembly result is not ok. We will display a message in C360 if the user chooses a bolt number outside a range. We will also check that the number of gears is acceptable. C360 uses a custom iproperty with a special name ( C360Message. ) to detect if user messages must be displayed.

32 Creating the ilogic code to display a message Open the differential assembly in Step5. Edit rule Replace_Parameter_Part and add the code in the text file in Step5. OneValid will be a Boolean variable that is true if the number of bolts and the number of gear is ok. The iprop C360MessageTriggered will be the one to trigger the message.

33 Uploading the design and checking the message Upload your design from the C360 Inventor plugin. Create a new version of the previously uploaded design. Upload all files in the folder. Enable the latest version of the design and open it. Test the message.

34 Step 6 : Embedding the design in your webpage

35 Embedding the design in your webpage By calling Configurator 360 from your webpage, you can add much more information and interactivity on the webpage, using basic web programming. And you will benefit from navigating in the 3D Model and update it the way you want.

36 Preparing C360 for embedding In C360 Options, allow these sites to embed your configurations : Enable your design for unrestricted viewing.

37 Installing and enabling IIS Install IIS on your computer Open it, go to default Web Site, then Manage Web Site. Make sure it is started and go to browse. A Welcome page is opened.

38 Opening Port 80 in the firewall Go to Windows Firewall. Advanced Parameters. Create an Inboud Rule and select Port. Open Port 80.

39 Creating your HTML Page Navigate to : sk.com/doc.html Create a new NotePad File Copy the content of Putting it all together in the Notepad file. Save it as an HTM File.

40 Creating your HTML Page Navigate to your C360 Design and copy the codes after autodesk.com/ Paste it in the Design Code in the HTM File.

41 Creating your HTML Page Back to IIS, right click Default Web Site and click Explore. Paste the HTM File in this directory. Click the HTM File to open it in a browser.

42 Creating your HTML Page Open the HTM file with a Browser. Make sure or localhost is in the address. Rotate and check the file. You can notice the configuration UI are not available.

43 Step 7 : Adding elements to the HTML Page

44 Creating a button Add a line to the scripts to load the jquery Library. We will this library to manage button events in our Javascript.

45 Creating a button Place a Form called Bolts_Number. Put a text field with default value to 6. Add a submit button.

46 Creating a button When loading the page, we want the button value to be updated accordingly to the current parameter. When the design is loaded we use list properties as callback to get all properties of the design. Edit this function to loop through all props. When Bolts_Number is found, take its value to our button.

47 Creating a button Now we want the ability to modify the number of bolts via this button. We will add a function that executes when the click button is pressed. It will set the property value of Bolts_Number to the number entered in the webpage field

48 Debugging in Google Chrome Start Google Chrome. Drag and Drop the HTML page from the wwwroot folder. If needed, change the address to Press F12. Navigate through the different tabs like Console, Sources

49 Breakpoint in Google Chrome Go to Sources Tab. Edit the HTM file under Locate the listproperties function. Click on the grey area where lines number are listed. It will create a breakpoint. Refresh the page with F5. The design will be paused in that line and we can do some diagnostics.

50 Breakpoint in Google Chrome On the right pane, we can go step by step and observe the code execution of each line. We can also see the status of each local variable. Remove the breakpoint.

51 Test it! Copy the HTML file to the wwwroot folder. Then drag and drop the file in your browser. Change the address to The number of Bolts value should be updated. Change it and see the number of bolts updating.

52 We re done, congrat s!! Thanks a lot for attending this session. Today, we learned how to : Create an ilogic form with images. Configure your C360 catalog. Upload and share designs on C360. Display warnings on C360. Embed the configurator in your webpage. Read and Set design parameters using controls from your webpage.

53 Autodesk and the Autodesk logo are registered trademarks or trademarks of Autodesk, Inc., and/or its subsidiaries and/or affiliates in the USA and/or other countries. All other brand names, product names, or trademarks belong to their respective holders. Autodesk reserves the right to alter product and services offerings, and specifications and pricing at any time without notice, and is not responsible for typographical or graphical errors that may appear in this document Autodesk. All rights reserved.