Added support for .obj model type.

Author: kalpshekhar-sag

README.md

@@ -1,14 +1,14 @@
 # 3D Model Viewer Widget for Cumulocity IoT
 
-This is a runtime widget to view a 3D collada model (*.dae) in Cumulocity IoT.
+This is a runtime widget to view a 3D collada model (*.dae, *.obj) in Cumulocity IoT.
 
 <img src="/assets/img-preview.png" />
 
 ### Features
 * Supports measurements from a single device
 * Allows background color customization.
 * Allows to configure realtime device measurement for model movements.
-* Allows to upload custom collada(.dae) model file.
+* Allows to upload custom collada(.dae, .obj) model file.
 
 ### Installation - for the dashboards using Runtime Widget Loader
 1. Download the latest `3d-model-viewer-widget-{version}.zip` file from the Releases section.
@@ -23,7 +23,7 @@ This is a runtime widget to view a 3D collada model (*.dae) in Cumulocity IoT.
 3. Choose `3d model viewer` widget.
 4. `Title` is the title of widget. Provide a relevant name. You may choose to hide this. Go to `Appearance` tab and choose `Hidden` under `Widget header style`.
 5. Select the `device`.
-6. `Model file(*.dae)` is to upload the model file (*.dae) into inventory binary. Please wait for it to finish the upload.
+6. `Model file(*.dae, *.obj)` is to upload the model file (*.dae, *.obj) into inventory binary. Please wait for it to finish the upload.
 7. `Variables` is to declare variables with a constant value or map them to the realtime device measurement series. Choose Target as None and provide the constant value or choose Target as Device and then select a measurment series.
 8. `Properties` is to define values for the model properties. You can provide a value as an mathematical expression using the variables defined earlier.
 9. `Background color (in hex)` allows you to set a custom background color using the color picker.

package-lock.json

@@ -4,7 +4,7 @@
     "dist\\bundle-src\\custom-widget.js": "3d-model-viewer-widget-CustomWidget",
     "dist/bundle-src/custom-widget.js": "3d-model-viewer-widget-CustomWidget"
   },
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package.json

@@ -2,9 +2,9 @@
 <c8y-form-group>
 
     <!-- Model File -->
-    <label for="model-file" translate>Model file (*.dae)</label>
+    <label for="model-file" translate>Model file (*.dae, *.obj)</label>
     <input type="text" class="form-control" [(ngModel)]="widgetInfo.binaryName" readonly />
-    <input type="file" class="form-control" name="model-file" (change)="uploadModelFile($event.target.files)" accept=".dae,model/vnd.collada+xml" />
+    <input type="file" class="form-control" name="model-file" (change)="uploadModelFile($event.target.files)" accept=".dae,model/vnd.collada+xml,.obj" />
     <div>{{modelFileUploadMessage}}</div>
 
     <!-- Separator -->

src/model-viewer-widget/model-viewer-widget-config.component.html

@@ -17,7 +17,6 @@
  */
 
 import { Component, Input, OnInit } from '@angular/core';
-import { jsonpFactory } from '@angular/http/src/http_module';
 import { IResult, IFetchOptions } from '@c8y/client/lib/src/core';
 import { IManagedObjectBinary } from '@c8y/client/lib/src/inventory';
 import { FetchClient, InventoryBinaryService } from '@c8y/ngx-components/api';
@@ -36,7 +35,6 @@ export class ModelViewerWidgetConfig implements OnInit {
 
   modelFile: File = null;
   modelFileUploadMessage: string;
-  private measurementSeriesLoaded: boolean = false;
   public measurementSeries = [];
   public variableTargets = [
     {
@@ -52,6 +50,7 @@ export class ModelViewerWidgetConfig implements OnInit {
   widgetInfo = {
     binaryId: '',
     binaryName: '',
+    modelType: '',
     advanced: {
       backgroundColor: '#6d82a3',
       showGrid: 'true'
@@ -152,25 +151,25 @@ export class ModelViewerWidgetConfig implements OnInit {
         if(_.has(this.config, 'device.id') && this.config.device.id !== undefined && this.config.device.id !== null && this.config.device.id !== '') {
           this.loadMeasurementSeries();
         } else {
-          console.log("Device is not selected. Select a device.");
+          console.log("3D Model Viewer Widget - Device is not selected. Select a device.");
         }
         if(_.has(this.widgetInfo, 'binaryId') && this.widgetInfo.binaryId !== undefined && this.widgetInfo.binaryId !== null && this.widgetInfo.binaryId !== '') {
           this.loadInfoFromModel();
         } else {
-          console.log("Binary ID is blank. Upload model file.");
+          console.log("3D Model Viewer Widget - Binary ID is blank. Upload model file.");
         }
       } else { // Adding a new widget
         _.set(this.config, 'customwidgetdata', this.widgetInfo);
       }
     } catch(e) {
-      console.log("Exception: "+e);
+      console.log("3D Model Viewer Widget - Exception: "+e);
     }
 
   }
 
   public uploadModelFile(files: FileList) {
     if(files === undefined || files === null || files.length < 1) {
-      console.log("No file selected.");
+      console.log("3D Model Viewer Widget - No file selected.");
     } else {
       this.modelFileUploadMessage = 'Uploading...';
       this.modelFile = files.item(0);
@@ -179,74 +178,73 @@ export class ModelViewerWidgetConfig implements OnInit {
         if(data.res.status === 201) {
           this.widgetInfo.binaryId = data.data.id;
           this.widgetInfo.binaryName = this.modelFile.name;
+          this.widgetInfo.modelType = this.widgetInfo.binaryName.substring(this.widgetInfo.binaryName.lastIndexOf(".")).toLowerCase();
           this.modelFileUploadMessage = 'Upload success!';
           this.updateConfig();
           this.loadInfoFromModel();
         } else {
           this.modelFileUploadMessage = 'Upload failed!';
-          console.log("Model cannot be uploaded: "+data.res.status);
+          console.log("3D Model Viewer Widget - Model cannot be uploaded: "+data.res.status);
         }
       });
     }
   }
 
   public loadMeasurementSeries() {
     if(!_.has(this.config, 'device.id') || this.config.device.id === undefined || this.config.device.id === "") {
-      console.log("Device is not selected.");
+      console.log("3D Model Viewer Widget - Device is not selected.");
     } else {
-      if(!this.measurementSeriesLoaded) {
-        const options: IFetchOptions = {
-          method: 'GET'
-        };
-        let supportedSeriesResponse = this.fetchClient.fetch('/inventory/managedObjects/'+this.config.device.id+'/supportedSeries', options);
-        let me = this;
-        supportedSeriesResponse.then((data) => {
-          data.json().then((res: any) => {
-            res.c8y_SupportedSeries.forEach((ss) => {
-              me.measurementSeries.push(ss);
-            });
-            me.measurementSeriesLoaded = true;
+      this.measurementSeries = [];
+      const options: IFetchOptions = {
+        method: 'GET'
+      };
+      let supportedSeriesResponse = this.fetchClient.fetch('/inventory/managedObjects/'+this.config.device.id+'/supportedSeries', options);
+      let me = this;
+      supportedSeriesResponse.then((data) => {
+        data.json().then((res: any) => {
+          res.c8y_SupportedSeries.forEach((ss) => {
+            me.measurementSeries.push(ss);
           });
         });
-      } else {
-        console.log("Measurement series already loaded: "+JSON.stringify(this.measurementSeries));
-      }
+      });
     }
   }
 
   private loadInfoFromModel() {
-    const options: IFetchOptions = {
-      method: 'GET'
-    };
-    let res = this.fetchClient.fetch('/inventory/binaries/'+this.widgetInfo.binaryId, options);
-    res.then((data) => {
-      data.text().then((modelData) => {
-        const loader = new ColladaLoader();
-        let modelUrl = URL.createObjectURL(new Blob([modelData]));
-        const me = this;
-        loader.load(modelUrl, function(collada) {
-          if(collada.kinematics && collada.kinematics.joints) {
-            const keys = Object.keys(collada.kinematics.joints);
-            let kinematics = {
-              type: 'Kinematics',
-              values: []
-            }
-            keys.forEach(k => {
-              const joint = collada.kinematics.joints[k];
-              if(!joint.static) {
-                kinematics.values.push({
-                  name: k,
-                  min: joint.limits.min,
-                  max: joint.limits.max,
-                  defaultValue: joint.zeroPosition
-                });
+    if(this.widgetInfo.modelType === ".dae") {
+      const options: IFetchOptions = {
+        method: 'GET'
+      };
+      let res = this.fetchClient.fetch('/inventory/binaries/'+this.widgetInfo.binaryId, options);
+      res.then((data) => {
+        data.text().then((modelData) => {
+          const loader = new ColladaLoader();
+          let modelUrl = URL.createObjectURL(new Blob([modelData]));
+          const me = this;
+          loader.load(modelUrl, function(collada) {
+            if(collada.kinematics && collada.kinematics.joints) {
+              const keys = Object.keys(collada.kinematics.joints);
+              let kinematics = {
+                type: 'Kinematics',
+                values: []
               }
-            })
-            me.modelProperties.push(kinematics);
-          }
-        });
-      })
-    });
+              keys.forEach(k => {
+                const joint = collada.kinematics.joints[k];
+                if(!joint.static) {
+                  kinematics.values.push({
+                    name: k,
+                    min: joint.limits.min,
+                    max: joint.limits.max,
+                    defaultValue: joint.zeroPosition
+                  });
+                }
+              })
+              me.modelProperties.push(kinematics);
+            }
+          });
+        })
+      });
+    }
   }
 
   public addVariable(): void {