XBIM WeXplorer sets the model color, xbimwexplorer
Directory Basics
This article discusses model color operations, as you have noticed that the model has a reasonable graphical representation by default. This is from the IFC model, it should look the same in all tools, it should look like in the Creation environment of you or your users. However, sometimes it is important to modify this representation to report a result (classification, error reporting, conflict detection, etc.) to the user.
We will use the Javascript Functions Defined in The onclick attribute of HTML elements to use ugly code. This is not recommended, but for clarity and simplicity, we encourage you to follow these guidelines to develop sustainable and clear Web applications.
First of all, it is necessary to define your own style and have a simple function defineStyle () to do this. You can define up to 224 styles. We will define a new color for each product type in the following code:
<Button onclick = "Recolour ()"> recolor by type </button> <button onclick = "if (viewer) viewer. resetStyles (); "> Reset </button> <script type =" text/javascript "> function Recolour () {if (! Viewer) return; var index = 0; for (var I in xProductType) {var type = xProductType [I]; var color = [Math. random () * 255, Math. random () * 255, Math. random () * 255,255]; viewer. defineStyle (index, color); viewer. setStyle (index, type); index ++ ;};</script>
You can extend this example as needed. You only need to define 0-224 color styles and set them to overwrite styles of the product or product type. If you want to reset the style to its default resetStyles () function.
Another visual feature is highlighted. You can think of it as a choice, but it is not very good. It leaves all the final selection logic to you. This is just a visual representation.
<Select id = "cmbSelection"> <option value = "noAction"> none </option> <option value = "select"> select </option> </select> <button onclick = "if (viewer) viewer. resetStates () "> Reset </button> <script type =" text/javascript "> function initHighlighting () {viewer. on ('pick', function (args) {var cmb = document. getElementById ('cmbselection '); var option = cmb. value; switch (option) {case 'select': viewer. setState (xState. HIGHLIGHTED, [args. id]); break; case 'hide ': viewer. setState (xState. HIDDEN, [args. id]); break; default: break; }}) ;}; </script>
The advantage of this method is that the highlight is separated from other visual appearances. You cannot highlight or hide products at the same time, but this makes sense. It is important that you can display the analysis results and select them at the same time. If you give up your selection, you still have a valid result. You can usually combine them in any wayStyleAndStatus.
The overall HTML code is as follows:
<link href="styles/xviewer-styles.css" rel="stylesheet" /> <script src="scripts/xbim-viewer.debug.bundle.js"></script>
<Body> <div id = "main"> <div class = "xviewer-control"> <button onclick = "Recolour () "> recolor by type </button> <button onclick =" if (viewer) viewer. resetStyles (); "> Reset style </button> <script type =" text/javascript "> function Recolour () {if (! Viewer) return; var index = 0; for (var I in xProductType) {var type = xProductType [I]; var color = [Math. random () * 255, Math. random () * 255, Math. random () * 255,255]; viewer. defineStyle (index, color); viewer. setStyle (index, type); index ++ ;};</script> </div> <div class = "xviewer-control"> Select Operation: <select id = "cmbSelection"> <option value = "noAction"> none </option> <option value = "select"> select </option> <Option value = "hide"> hide </option> </select> <button onclick = "if (viewer) viewer. resetStates () "> Reset </button> <script type =" text/javascript "> function initHighlighting () {viewer. on ('pick', function (args) {var cmb = document. getElementById ('cmbselection '); var option = cmb. value; switch (option) {case 'select': viewer. setState (xState. HIGHLIGHTED, [args. id]); break; case 'hide ': viewer. setState (xSt Ate. HIDDEN, [args. id]); break; default: break ;}});}; </script> </div> <canvas id = "viewer" width = "500" height = "300"> </canvas> <div> select a product ID: <span id = "productId"> model </span>. </div> <div id = "errors"> </div> <script type = "text/javascript"> // check var check = xViewer. check (); var viewer = null; var pickedId = null; if (check. noErrors) {viewer = new xViewer ('viewer '); viewer. on ('loaded', fun Ction () {initHighlighting (); viewer. start () ;}); viewer. on ('error', function (arg) {var container = document. getElementById ('errors '); if (container) {// related error container. innerHTML = "<pre style = 'color: red; '>" + arg. message + "</pre> <br/>" + container. innerHTML ;}}); viewer. on ('pick', function (args) {var id = args. id; var span = document. getElementById ('produd D'); if (span) {span. innerHT ML = id? Id: 'model' ;}}); viewer. load ('data/SampleHouse. wexbim ');} else {var msg = document. getElementById ('errors'); for (var I in check. errors) {var error = check. errors [I]; msg. innerHTML + = "<pre style = 'color: red; '>" + error + "</pre> <br/>" ;}}</script> </div>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
