Renamed the widget to 3d model viewer

Author: kalpshekhar-sag

README.md

@@ -1,4 +1,4 @@
-# Cumulocity IoT 3D Collada Widget
+# 3D Model Viewer Widget for Cumulocity IoT
 
 This is a runtime widget to view a 3D collada model (*.dae) in Cumulocity IoT.
 
@@ -11,25 +11,25 @@ This is a runtime widget to view a 3D collada model (*.dae) in Cumulocity IoT.
 * Allows to upload custom collada(.dae) model file.
 
 ### Installation - for the dashboards using Runtime Widget Loader
-1. Download the latest `3dcollada-widget-{version}.zip` file from the Releases section.
+1. Download the latest `3d-model-viewer-widget-{version}.zip` file from the Releases section.
 2. Make sure you have Runtime Widget Loader installed on your Cockpit or App Builder app.
 3. Open a dashboard.
 4. Click `more...`.
 5. Select `Install Widget` and follow the instructions.
 
 ### Deployment - as part of the Cumulocity IoT Cockpit application
-1. Clone the repository on your local machine using `git clone https://github.com/SoftwareAG/cumulocity-3d-collada-widget.git`.
+1. Clone the repository on your local machine using `git clone https://github.com/SoftwareAG/cumulocity-3d-model-viewer-widget.git`.
 2. Run `npm install` to install the module dependencies.
 3. Run `c8ycli build` to build the cockpit application.
 4. Run `c8ycli deploy` and follow the instructions to deploy the cockpit application on your tenant. This will include the widget also.
 
 ### Configuration - to view the 3d collada model in the widget
 1. Make sure you have successfully installed or deployed the widget.
 2. Click on `Add widget`.
-3. Choose `3d collada` widget.
+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. `3d collada file(*.dae)` is to upload the 3d collada model file (*.dae) into inventory binary. Please wait for it to finish the upload.
+6. `Model file(*.dae)` is to upload the model file (*.dae) 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.
@@ -38,7 +38,7 @@ This is a runtime widget to view a 3D collada model (*.dae) in Cumulocity IoT.
 12. In case you see unexpected results on the widget, refer to browser console to see if there are error logs.
 
 ### Development - to do the enhancements and testing locally
-1. Clone the repository on local machine using `git clone https://github.com/SoftwareAG/cumulocity-3d-collada-widget.git`.
+1. Clone the repository on local machine using `git clone https://github.com/SoftwareAG/cumulocity-3d-model-viewer-widget.git`.
 2. Run `npm install` to download the module dependencies.
 3. Install c8ycli `npm install -g @c8y/cli` if not already.
 4. Run `c8ycli server -u https://your_tenant_url` to start the server.

app.module.ts

@@ -13,11 +13,11 @@ import { AssetsNavigatorModule } from '@c8y/ngx-components/assets-navigator';
 import { CockpitDashboardModule } from '@c8y/ngx-components/context-dashboard';
 import { ReportsModule } from '@c8y/ngx-components/reports';
 import { SensorPhoneModule } from '@c8y/ngx-components/sensor-phone';
-import { ColladaWidget } from './src/collada-widget/collada-widget.component';
-import { ColladaWidgetConfig } from './src/collada-widget/collada-widget-config.component';
-import { ColorPaletteComponent } from './src/collada-widget/color-picker/color-palette/color-palette-component';
-import { ColorSliderComponent } from './src/collada-widget/color-picker/color-slider/color-slider-component';
-import { ColorPickerComponent } from './src/collada-widget/color-picker/color-picker-component';
+import { ModelViewerWidget } from './src/model-viewer-widget/model-viewer-widget.component';
+import { ModelViewerWidgetConfig } from './src/model-viewer-widget/model-viewer-widget-config.component';
+import { ColorPaletteComponent } from './src/model-viewer-widget/color-picker/color-palette/color-palette-component';
+import { ColorSliderComponent } from './src/model-viewer-widget/color-picker/color-slider/color-slider-component';
+import { ColorPickerComponent } from './src/model-viewer-widget/color-picker/color-picker-component';
 
 @NgModule({
   imports: [
@@ -32,18 +32,18 @@ import { ColorPickerComponent } from './src/collada-widget/color-picker/color-pi
     SensorPhoneModule,
     UpgradeModule
   ],
-  declarations: [ColladaWidget, ColladaWidgetConfig, ColorPickerComponent, ColorSliderComponent, ColorPaletteComponent],
-  entryComponents: [ColladaWidget, ColladaWidgetConfig],
+  declarations: [ModelViewerWidget, ModelViewerWidgetConfig, ColorPickerComponent, ColorSliderComponent, ColorPaletteComponent],
+  entryComponents: [ModelViewerWidget, ModelViewerWidgetConfig],
   providers: [{
     provide: HOOK_COMPONENTS,
     multi: true,
     useValue: [
       {
-        id: 'com.softwareag.globalpresales.colladawidget',
-        label: '3D Collada',
+        id: 'com.softwareag.globalpresales.3dmodelviewerwidget',
+        label: '3d model viewer',
         description: 'A runtime widget to view a 3d collada model (*.dae) in Cumulocity IoT. It has been developed by Global Presales team.',
-        component: ColladaWidget,
-        configComponent: ColladaWidgetConfig,
+        component: ModelViewerWidget,
+        configComponent: ModelViewerWidgetConfig,
         previewImage: require("./assets/img-preview.png")
       }
     ]

package-lock.json

@@ -1,8 +1,8 @@
 {
-  "name": "collada-widget",
+  "name": "3d-model-viewer-widget",
   "interleave": {
-    "dist\\bundle-src\\custom-widget.js": "collada-widget-CustomWidget",
-    "dist/bundle-src/custom-widget.js": "collada-widget-CustomWidget"
+    "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.0",
   "description": "",

package.json

@@ -2,7 +2,7 @@
 <c8y-form-group>
 
     <!-- Model File -->
-    <label for="model-file" translate>3d collada file (*.dae)</label>
+    <label for="model-file" translate>Model file (*.dae)</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" />
     <div>{{modelFileUploadMessage}}</div>

src/collada-widget/color-picker/color-palette/color-palette-component.css renamed to src/model-viewer-widget/color-picker/color-palette/color-palette-component.css

@@ -24,11 +24,11 @@ import * as _ from 'lodash';
 import { ColladaLoader } from 'three/examples/jsm/loaders/ColladaLoader.js';
 
 @Component({
-  selector: 'collada-widget-config',
-  templateUrl: './collada-widget-config.component.html',
-  styleUrls: ['./collada-widget-config.component.css']
+  selector: 'model-viewer-widget-config',
+  templateUrl: './model-viewer-widget-config.component.html',
+  styleUrls: ['./model-viewer-widget-config.component.css']
 })
-export class ColladaWidgetConfig implements OnInit {
+export class ModelViewerWidgetConfig implements OnInit {
   @Input() config: any = {};
 
   backgroundColorPickerClosed : boolean = true;

src/collada-widget/color-picker/color-palette/color-palette-component.html renamed to src/model-viewer-widget/color-picker/color-palette/color-palette-component.html

@@ -25,11 +25,11 @@ import { ColladaLoader } from 'three/examples/jsm/loaders/ColladaLoader.js';
 import * as mathjs from 'mathjs';
 
 @Component({
-  selector: 'collada-widget',
-  templateUrl: './collada-widget.component.html',
+  selector: 'model-viewer-widget',
+  templateUrl: './model-viewer-widget.component.html',
   styles: []
 })
-export class ColladaWidget implements OnInit {
+export class ModelViewerWidget implements OnInit {
   @Input() config;
 
   public modelContainerId;

src/collada-widget/color-picker/color-palette/color-palette-component.ts renamed to src/model-viewer-widget/color-picker/color-palette/color-palette-component.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CoreModule, HOOK_COMPONENTS } from '@c8y/ngx-components';
-import { ColladaWidget } from './collada-widget.component';
-import { ColladaWidgetConfig } from './collada-widget-config.component';
+import { ModelViewerWidget } from './model-viewer-widget.component';
+import { ModelViewerWidgetConfig } from './model-viewer-widget-config.component';
 import { ColorPickerComponent } from './color-picker/color-picker-component';
 import { ColorSliderComponent } from './color-picker/color-slider/color-slider-component';
 import { ColorPaletteComponent } from './color-picker/color-palette/color-palette-component';
@@ -10,19 +10,19 @@ import { ColorPaletteComponent } from './color-picker/color-palette/color-palett
   imports: [
     CoreModule
   ],
-  declarations: [ColladaWidget, ColladaWidgetConfig, ColorPickerComponent, ColorSliderComponent, ColorPaletteComponent],
-  entryComponents: [ColladaWidget, ColladaWidgetConfig],
+  declarations: [ModelViewerWidget, ModelViewerWidgetConfig, ColorPickerComponent, ColorSliderComponent, ColorPaletteComponent],
+  entryComponents: [ModelViewerWidget, ModelViewerWidgetConfig],
   providers: [{
     provide: HOOK_COMPONENTS,
     multi: true,
     useValue: {
-      id: 'com.softwareag.globalpresales.colladawidget',
-      label: '3d collada',
+      id: 'com.softwareag.globalpresales.3dmodelviewerwidget',
+      label: '3d model viewer',
       description: 'A runtime widget to view a 3d collada model (*.dae) in Cumulocity IoT. It has been developed by Global Presales team.',
-      component: ColladaWidget,
-      configComponent: ColladaWidgetConfig,
+      component: ModelViewerWidget,
+      configComponent: ModelViewerWidgetConfig,
       previewImage: require("~assets/img-preview.png")
     }
   }],
 })
-export class ColladaWidgetAppModule {}
+export class ModelViewerWidgetAppModule {}

src/collada-widget/color-picker/color-picker-component.css renamed to src/model-viewer-widget/color-picker/color-picker-component.css

@@ -1,3 +1,3 @@
 /* Add your widget's module(s) here */
 
-export { ColladaWidgetAppModule } from "./collada-widget/collada-widget.module";
+export { ModelViewerWidgetAppModule } from "./model-viewer-widget/model-viewer-widget.module";

src/collada-widget/color-picker/color-picker-component.html renamed to src/model-viewer-widget/color-picker/color-picker-component.html

@@ -1,7 +1,7 @@
 {
-    "name": "3d collada",
-    "contextPath": "collada-widget",
-    "key": "collada-widget-application-key",
+    "name": "3D Model Viewer Widget",
+    "contextPath": "3d-model-viewer-widget",
+    "key": "3d-model-viewer-widget-application-key",
     "contentSecurityPolicy": "default-src 'self'",
     "icon": {
       "class": "fa fa-puzzle-piece"