Added color picker, readme and various other fixes

Author: kalpshekhar-sag

README.md

@@ -1 +1,62 @@
-# c8y-3d-collada-widget
+# Cumulocity IoT 3D Collada Widget
+
+This is a runtime widget to view a 3D collada model (*.dae) 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.
+
+### Installation - for the dashboards using Runtime Widget Loader
+1. Download the latest `3dcollada-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`.
+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.
+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.
+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.
+10. `Show grid` allows you to show or hide the grid.
+11. Click `Save` to add the widget on the dashboard.
+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`.
+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.
+5. Go to `http://localhost:9000/apps/cockpit/` in the browser to view and test your changes.
+6. (Optional) push the changes back to this repository.
+
+### Build - to create a new build for the Runtime Widget Loader
+1. Finish the development and testing on your local machine.
+2. Run `gulp` to start the build process. Run `npm install -g gulp` to install gulp if not already.
+3. Use `widget.zip` file in the `dist` folder as a distribution.
+
+------------------------------
+
+These tools are provided as-is and without warranty or support. They do not constitute part of the Software AG product suite. Users are free to use, fork and modify them, subject to the license agreement. While Software AG welcomes contributions, we cannot guarantee to include every contribution in the master project.
+
+------------------------------
+
+For more information you can Ask a Question in the [TECHcommunity Forums](http://tech.forums.softwareag.com/techjforum/forums/list.page?product=cumulocity).
+  
+  
+You can find additional information in the [Software AG TECHcommunity](http://techcommunity.softwareag.com/home/-/product/name/cumulocity).

app.module.ts

@@ -15,6 +15,9 @@ 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';
 
 @NgModule({
   imports: [
@@ -29,7 +32,7 @@ import { ColladaWidgetConfig } from './src/collada-widget/collada-widget-config.
     SensorPhoneModule,
     UpgradeModule
   ],
-  declarations: [ColladaWidget, ColladaWidgetConfig],
+  declarations: [ColladaWidget, ColladaWidgetConfig, ColorPickerComponent, ColorSliderComponent, ColorPaletteComponent],
   entryComponents: [ColladaWidget, ColladaWidgetConfig],
   providers: [{
     provide: HOOK_COMPONENTS,
@@ -38,7 +41,7 @@ import { ColladaWidgetConfig } from './src/collada-widget/collada-widget-config.
       {
         id: 'com.softwareag.globalpresales.colladawidget',
         label: '3D Collada',
-        description: 'This is a 3D Collada Widget for Cumulocity IoT.',
+        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,
         previewImage: require("./assets/img-preview.png")

package-lock.json

@@ -23,6 +23,7 @@
     "@angular/compiler": "8.2.13",
     "@angular/core": "8.2.13",
     "@angular/forms": "8.2.13",
+    "@angular/http": "7.2.15",
     "@angular/platform-browser": "8.2.13",
     "@angular/platform-browser-dynamic": "8.2.13",
     "@angular/router": "8.2.13",
@@ -35,7 +36,6 @@
     "lodash": "4.17.20",
     "mathjs": "9.3.2",
     "rxjs": "6.4.0",
-    "stream-to-blob": "2.0.1",
     "three": "0.127.0",
     "url-search-params-polyfill": "6.0.0",
     "zone.js": "0.9.1"

package.json

@@ -5,4 +5,12 @@ td, th {
 
 div.separator {
     height: 20px;
+}
+
+.showColorPicker {
+    display: block;
+}
+
+.hideColorPicker {
+    display: none;
 }

src/collada-widget/collada-widget-config.component.css

@@ -2,7 +2,7 @@
 <c8y-form-group>
 
     <!-- Model File -->
-    <label for="model-file" translate>3D Collada File (*.DAE)</label>
+    <label for="model-file" translate>3d collada 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>
@@ -107,13 +107,14 @@
     <div class="row">
         <div class="col-lg-6">
             <!-- Background Color -->
-            <label for="background-color" translate>Background Color</label>
-            <input type="text" class="form-control" name="background-color" [(ngModel)]="widgetInfo.advanced.backgroundColor" (change)="updateConfig()" />
+            <label for="background-color" translate>Background color (in hex)</label>
+            <input type="text" class="form-control" name="background-color" [(ngModel)]="widgetInfo.advanced.backgroundColor" (change)="updateConfig()" (click)="openBackgroundColorPicker()" />
+            <app-color-picker [ngClass]="backgroundColorPickerClosed? 'hideColorPicker' : 'showColorPicker'" (colorPickerClosed)="closeBackgroundColorPicker()" (colorSet)="setSelectedColorForBackground($event)" ></app-color-picker>
         </div>
         <div class="col-lg-6">
             <!-- Show Grid -->
             <label for="show-grid" translate>
-                Show Grid
+                Show grid
             </label>
             <select class="form-control" name="show-grid" [(ngModel)]="widgetInfo.advanced.showGrid" (change)="updateConfig()">
                 <option value = "false" [selected]="widgetInfo.advanced.showGrid === 'false'">No</option>

src/collada-widget/collada-widget-config.component.html

@@ -31,6 +31,8 @@ import { ColladaLoader } from 'three/examples/jsm/loaders/ColladaLoader.js';
 export class ColladaWidgetConfig implements OnInit {
   @Input() config: any = {};
 
+  backgroundColorPickerClosed : boolean = true;
+
   modelFile: File = null;
   modelFileUploadMessage: string;
   private measurementSeriesLoaded: boolean = false;
@@ -281,4 +283,18 @@ export class ColladaWidgetConfig implements OnInit {
     _.set(this.config, 'customwidgetdata', this.widgetInfo);
   }
 
+  setSelectedColorForBackground(value: string) {
+    value = value.substring(0,7);
+    this.widgetInfo.advanced.backgroundColor = value;
+    this.updateConfig();
+  }
+
+  closeBackgroundColorPicker() {
+    this.backgroundColorPickerClosed = true;
+  }
+
+  openBackgroundColorPicker() {
+    this.backgroundColorPickerClosed = false;
+  }
+
 }

src/collada-widget/collada-widget-config.component.ts

@@ -2,28 +2,27 @@ 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 { HttpClientModule } from '@angular/common/http';
+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';
 
 @NgModule({
   imports: [
-    CoreModule,
-    HttpClientModule
+    CoreModule
   ],
-  declarations: [ColladaWidget, ColladaWidgetConfig],
+  declarations: [ColladaWidget, ColladaWidgetConfig, ColorPickerComponent, ColorSliderComponent, ColorPaletteComponent],
   entryComponents: [ColladaWidget, ColladaWidgetConfig],
   providers: [{
     provide: HOOK_COMPONENTS,
     multi: true,
-    useValue: [
-      {
-        id: 'com.softwareag.globalpresales.colladawidget',
-        label: '3D Collada',
-        description: 'This is a 3D Collada Widget for Cumulocity IoT.',
-        component: ColladaWidget,
-        configComponent: ColladaWidgetConfig,
-        previewImage: require("~assets/img-preview.png")
-      }
-    ]
+    useValue: {
+      id: 'com.softwareag.globalpresales.colladawidget',
+      label: '3d collada',
+      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,
+      previewImage: require("~assets/img-preview.png")
+    }
   }],
 })
 export class ColladaWidgetAppModule {}

src/collada-widget/collada-widget.module.ts

@@ -0,0 +1,9 @@
+.color-palette:hover {
+    cursor: pointer;
+  }
+  
+  :host {
+    width: 150px;
+    height: 150px;
+    display: block;
+  }

src/collada-widget/color-picker/color-palette/color-palette-component.css

@@ -0,0 +1,9 @@
+<canvas
+  #canvas
+  class="color-palette"
+  width="150"
+  height="150"
+  (mousedown)="onMouseDown($event)"
+  (mousemove)="onMouseMove($event)"
+>
+</canvas>