modelo · nxddsnc · Oct 15, 2019 · Sep 4, 2019 · Sep 4, 2019 · Sep 4, 2019
diff --git a/assets/js/utils.js b/assets/js/utils.js
@@ -0,0 +1,18 @@
+function setDarkTheme(viewer) {
+  viewer.setBackgroundColor([26.0 / 255.0, 26.0 / 255.0, 55.0 / 255.0, 1.0]);
+
+  viewer.setEffectEnabled("Sketch", true);
+  viewer.setEffectParameter("Sketch", "color", [180 / 255.0, 180 / 255.0, 180 / 255.0]);
+  viewer.setEffectParameter("Sketch", "colored", true);
+  //this.setEffectParameter("Sketch", "surfaceColor", [51.0 / 255.0, 145.0 / 255.0, 1.0, 0.2]);
+  viewer.setEffectParameter("Sketch", "transparents", true);
+
+  // Turn on SSAO effect
+  viewer.setEffectEnabled("SSAO", true);
+  viewer.setEffectParameter("SSAO", "transparents", true);
+  }
+
+  function updateProgress(progress) {
+    const c = document.getElementById("progress");
+    c.innerHTML = "Loading: " + Math.round(progress * 100) + "%";
+  }
diff --git a/index.html b/index.html
@@ -264,6 +264,19 @@ <h1>Modelo API Samples</h1>
 	        ],
             "Integration": [
                 "jquery"
+            ],
+            "Revit Case": [
+                "switch-style",
+                "2d-graph-interaction",
+                "instant-adjustment",
+                "IOT-1",
+                "people-location-analysis",
+                'building-spacial-heatmap',
+                "IOT-2",
+                "escape-route",
+                "traffic-flow",
+                "urban-ensity-viz",
+                "urban-POI"
             ]
         };
 

diff --git a/samples/2d-graph-interaction/data.js b/samples/2d-graph-interaction/data.js
diff --git a/samples/2d-graph-interaction/index.html b/samples/2d-graph-interaction/index.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>background</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
+  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts-en.common.js"></script>
+    <script src="../../assets/js/jquery.min.js"></script>
+    <style>
+      html,
+      body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+      }
+
+      body {
+        display: flex;
+      }
+
+      .wrapper label {
+        margin: 0 0 0.28571429rem 0;
+        color: rgba(0, 0, 0, 0.87);
+        font-size: 1rem;
+        font-weight: 700;
+      }
+
+      .wrapper .button {
+        display: block;
+        width: 100%;
+        margin-top: 10px;
+      }
+      #model {
+        height: 100%;
+        width: calc(100% - 320px);
+      }
+
+      .item {
+        display: none;
+      }
+
+      .item.active {
+        display: block;
+      }
+
+      .item-img {
+        cursor: pointer;
+        width: 140px;
+        height: 140px;
+        transition: opacity 1s ease-in-out;
+      }
+
+      .item-img:hover {
+        opacity: 0.6;
+      }
+
+      .item-img:first-child {
+        margin-right: 16px;
+      }
+
+      .wrapper {
+        padding: 10px;
+        width: 320px;
+        min-width: 320px;
+      }
+
+      .wrapper label {
+        margin: 0 0 0.28571429rem 0;
+        color: rgba(0, 0, 0, 0.87);
+        font-size: 1rem;
+        font-weight: 700;
+      }
+
+      .wrapper-right label {
+        color: rgba(0, 0, 0, 0.87);
+        font-size: 1rem;
+        font-weight: 700;
+        position: fixed;
+        top: 0.68571429rem;
+        right: 1rem;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="wrapper">
+        <div class="page-header">
+            <h1> <small>2D Graph Interaction</small></h1>
+          </div>
+        <div id="main" style="width: 300px;height:300px;"></div>
+    </div>
+    <div class="wrapper-right">
+      <label id="progress">Loading: 0</label>
+    </div>
+    <div id="model"></div>
+    <script src="https://s3.cn-north-1.amazonaws.com.cn/api-release.modeloapp.com/prod/modeloapi-2.4-lts.js"></script>
+    <script src="/assets/js/utils.js"></script>
+    <script src="./data.js"></script>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/samples/2d-graph-interaction/index.js b/samples/2d-graph-interaction/index.js
@@ -0,0 +1,110 @@
+let lastElement = '';
+const modelId = "q8Z27w8a";
+const appToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTUzLCJ1c2VybmFtZSI6Ik1vZGVsbyIsImlzUGVybWFuZW50Ijp0cnVlLCJpYXQiOjE1Njc1NjI0MTksImV4cCI6MzMxMDM1NjI0MTl9.EbW_cSPca4kWLedgNtfrGguog_o-3CCM5WhM7fFi0GA"
+
+Modelo.init({ endpoint: "https://build-portal.modeloapp.com", appToken });
+
+function updateProgress(progress) {
+    var c = document.getElementById("progress");
+    c.innerHTML = "Loading: " + Math.round(progress * 100) + "%";
+}
+
+const viewer = new Modelo.View.Viewer3D("model");
+viewer.addInput(new Modelo.View.Input.Mouse(viewer)); // Add mouse to control camera.
+const colors = [
+    {
+        color: 'default',
+        value: null
+    },
+    {
+        color: 'red',
+        value: [1, 0, 0]
+    },
+    {
+        color: 'green',
+        value: [0, 1, 0]
+    },
+    {
+        color: 'blue',
+        value: [0, 0, 1]
+    }
+];
+viewer.loadModel(modelId, updateProgress).then(() => {
+    setDarkTheme(viewer);
+    chartSetting();
+})
+
+
+function chartSetting() {
+    const myChart = echarts.init(document.getElementById('main'));
+
+    option = {
+        title: {
+            text: '',
+            left: 'center'
+        },
+        tooltip : {
+            trigger: 'item',
+            formatter: "{a} <br/>{b} : {c} ({d}%)"
+        },
+        legend: {
+            bottom: 0,
+            left: 'center',
+            data: ['type1', 'type2','type3', 'type4']
+        },
+        series : [
+            {
+                type: 'pie',
+                radius : '65%',
+                center: ['50%', '50%'],
+                selectedMode: 'single',
+                data:[
+                    {value:elements.type1.length, name: 'type1'},
+                    {value:elements.type2.length, name: 'type2'},
+                    {value:elements.type3.length, name: 'type3'},
+                    {value:elements.type4.length, name: 'type4'},
+                ],
+                itemStyle: {
+                    emphasis: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
+            }
+        ]
+    };
+    myChart.setOption(option);
+    myChart.on('click',  (params) => {
+        if (lastElement !== '') {
+            viewer.getScene().setElementsColor(elements[lastElement], null);
+        }
+        lastElement = params.name;
+        viewer.getScene().setElementsColor(elements[lastElement], hexToRGB(params.color));
+    });
+}
+
+/**
+ * hex to rgb color
+ * @param {*} color 
+ */
+function hexToRGB(color) {
+    const sColor = color.toLowerCase();
+    const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+    if (sColor && reg.test(sColor)) {
+        if (sColor.length === 4) {
+            const sColorNew = "#";
+            for (let i=1; i<4; i+=1) {
+                sColorNew += sColor.slice(i, i+1).concat(sColor.slice(i, i+1));    
+            }
+            sColor = sColorNew;
+        }
+        const sColorChange = [];
+        for (let i=1; i<7; i+=2) {
+            sColorChange.push(parseInt("0x"+sColor.slice(i, i+2)) / 255);    
+        }
+        return sColorChange;
+    } else {
+        return [0, 0, 0]
+    }
+}