Merge pull request #480 from xBimTeam/feature/constant-color-channel

Added constant color channel for Heatmaps plugin

examples/data-visualization/index.ts

@@ -1,4 +1,4 @@
-import { Viewer, Heatmap, InteractiveClippingPlane, ContinuousHeatmapChannel, ValueRange, ValueRangesHeatmapChannel, HeatmapSource, Icons, CameraType, ViewType, ClippingPlane, ProductType, IHeatmapChannel, ChannelType, } from '../..';
+import { Viewer, Heatmap, InteractiveClippingPlane, ConstantColorChannel, ContinuousHeatmapChannel, ValueRange, ValueRangesHeatmapChannel, HeatmapSource, Icons, CameraType, ViewType, ClippingPlane, ProductType, IHeatmapChannel, ChannelType, } from '../..';
 import { Icon } from '../../src/plugins/DataVisualization/Icons/icon';
 import { IconsData } from './icons';
 
@@ -14,7 +14,9 @@ viewer.addPlugin(plane);
 
 const tempChannelId = "room_temp";
 const humidityChannelId = "room_humidity";
+const energyChannelId = "room_energy";
 
+const energySource = new HeatmapSource("Energy sensor", 1, 152, energyChannelId, 10);
 const temperatureSource = new HeatmapSource("Temp sensor", 1, 152, tempChannelId, 1);
 const humiditySource = new HeatmapSource("Humidity sensor", 1, 152, humidityChannelId, 10);
 const sourceIcon = new Icon("Room 1 Sensor", "Temperature sensor", 1, 152, IconsData.errorIcon, null, null, null, () => { viewer.zoomTo(152, 1) });
@@ -31,10 +33,15 @@ const tempChannel = new ValueRangesHeatmapChannel
 
 const humidityChannel = new ContinuousHeatmapChannel
 (humidityChannelId, "double", "Humidity", "Humidity of Rooms", "humidity", "%", 0, 100, ["#1ac603", "#f96c00"]);
+
+const energyChannel = new ConstantColorChannel
+(energyChannelId, "double", "Energy", "Energy Consumption", "energy", "kW", "#1ac603");
+
 selectedChannel = tempChannel;
 
 heatmap.addChannel(tempChannel);
 heatmap.addChannel(humidityChannel);
+heatmap.addChannel(energyChannel);
 
 viewer.on('loaded', args => {
     try {
@@ -46,6 +53,7 @@ viewer.on('loaded', args => {
 
         heatmap.addSource(temperatureSource);
         heatmap.addSource(humiditySource);
+        heatmap.addSource(energySource);
 
         icons.addIcon(sourceIcon);
         icons.addIcon(new Icon("Temperature Sensor 2", "Temperature sensor", 1, 617, IconsData.successIcon));
@@ -59,11 +67,16 @@ viewer.on('loaded', args => {
                 heatmap.renderSource(temperatureSource.id);
                 sourceIcon.description = `Room ${selectedChannel.name}: ${temperatureSource.value}${selectedChannel.unit}`;
             }
-            else{
+            else if(selectedChannel.channelId === humidityChannelId){
                 humiditySource.value = getRandomInt(100).toString();
                 heatmap.renderSource(humiditySource.id);
                 sourceIcon.description = `Room ${selectedChannel.name}: ${humiditySource.value}${selectedChannel.unit}`;
             }
+            else if(selectedChannel.channelId === energyChannelId){
+                energySource.value = getRandomInt(100).toString();
+                heatmap.renderSource(energySource.id);
+                sourceIcon.description = `${selectedChannel.description}: ${energySource.value}${selectedChannel.unit}`;
+            }
         }, 2000);
 
     } catch (e) {
@@ -134,6 +147,11 @@ function setSelectedChannel() {
             container.appendChild(rangeDiv);
         });
 
+    } else if(selectedChannel.channelType === ChannelType.Constant){
+        const gradientElement = document.getElementById('gradient-parent')!;
+        gradientElement.style.display = "none";
+        const container = document.getElementById('ranges')!;
+        container.style.display = "none";
     }
 
 }
@@ -151,6 +169,11 @@ function handleDropdownChange() {
             setSelectedChannel();
             return;
         }
+        case 'Energy':{
+            selectedChannel = energyChannel;
+            setSelectedChannel();
+            return;
+        }
     }
 }
 

src/plugins/DataVisualization/Heatmap/constant-color-channel.ts

@@ -0,0 +1,153 @@
+import { IHeatmapChannel, ChannelType } from "./heatmap-channel";
+
+/**
+ * Constant color channel.
+ * 
+ * @implements {IHeatmapChannel}
+ */
+export class ConstantColorChannel implements IHeatmapChannel {
+    private _channelType: ChannelType;
+    private _channelId: string;
+    private _dataType: string;
+    private _name: string;
+    private _description: string;
+    private _property: string;
+    private _unit: string;
+    private _enabled: boolean;
+    private _color: string;
+
+    /**
+     * Creates an instance of DiscreteHeatmapChannel.
+     * 
+     * @param {string} channelId - A user-defined unique identifier for the channel.
+     * @param {string} dataType - The data type of the channel values.
+     * @param {string} name - The name of the channel.
+     * @param {string} description - A brief description of the channel.
+     * @param {string} property - The data property represented by this channel.
+     * @param {string} unit - The unit of measurement for the channel.
+     * @param {string} color - The hex color.
+     */
+    constructor(
+        channelId: string,
+        dataType: string,
+        name: string,
+        description: string,
+        property: string,
+        unit: string,
+        color: string
+    ) {
+        this._channelType = ChannelType.Constant;
+        this._channelId = channelId;
+        this._dataType = dataType;
+        this._name = name;
+        this._description = description;
+        this._property = property;
+        this._unit = unit;
+        this._color = color;
+        this._enabled = true;
+    }
+
+    /**
+     * Gets the type of the channel.
+     * @returns {ChannelType} The type of the channel.
+     */
+    public get channelType(): ChannelType {
+        return this._channelType;
+    }
+
+    /**
+     * Gets the unique identifier for the channel.
+     * @returns {string} The channel ID.
+     */
+    public get channelId(): string {
+        return this._channelId;
+    }
+
+    /**
+     * Gets the data type of the channel values.
+     * @returns {string} The data type.
+     */
+    public get dataType(): string {
+        return this._dataType;
+    }
+
+    /**
+     * Sets the data type of the channel values.
+     * @param {string} value - The new data type.
+     */
+    public set dataType(value: string) {
+        this._dataType = value;
+    }
+
+    /**
+     * Gets the name of the channel.
+     * @returns {string} The name of the channel.
+     */
+    public get name(): string {
+        return this._name;
+    }
+
+    /**
+     * Gets the description of the channel.
+     * @returns {string} The description of the channel.
+     */
+    public get description(): string {
+        return this._description;
+    }
+
+    /**
+     * Sets the description of the channel.
+     * @param {string} value - The new description.
+     */
+    public set description(value: string) {
+        this._description = value;
+    }
+
+    /**
+     * Gets the data property represented by this channel.
+     * @returns {string} The data property represented by this channel.
+     */
+    public get property(): string {
+        return this._property;
+    }
+
+    /**
+     * Gets the unit of measurement for the channel.
+     * @returns {string} The unit of measurement.
+     */
+    public get unit(): string {
+        return this._unit;
+    }
+
+    /**
+     * Sets the unit of measurement for the channel.
+     * @param {string} value - The new unit of measurement.
+     */
+    public set unit(value: string) {
+        this._unit = value;
+    }
+
+    /**
+     * Gets hex color of the channel.
+     * @returns {string} The hex color.
+     */
+    public get color(): string {
+        return this._color;
+    }
+
+    /**
+     * Gets a boolean value indicating if this channel is enabled
+     * @returns {boolean} a value indicates if this channel is enabled.
+     */
+    public get isEnabled(): boolean {
+        return this._enabled;
+    }
+
+     /**
+     * Sets if this channel is enabled or not
+     * @param {boolean} value - a value indicates if this channel is enabled.
+     */
+    public set isEnabled(value: boolean) {
+        this._enabled = value;
+    }
+}

src/plugins/DataVisualization/Heatmap/heatmap-channel.ts

@@ -74,4 +74,10 @@ export enum ChannelType {
      * @type {string}
      */
     ValueRanges = "valueRanges",
+
+    /**
+     * Represents a constant color channel type.
+     * @type {string}
+     */
+    Constant = "Constant",
 }

src/plugins/DataVisualization/Heatmap/heatmap.ts

@@ -4,6 +4,7 @@ import { ChannelType, IHeatmapChannel } from "./heatmap-channel";
 import { ModelHandle } from "../../../model-handle";
 import { HeatmapSource } from "./heatmap-source";
 import { ContinuousHeatmapChannel } from "./continuous-heatmap-channel";
+import { ConstantColorChannel } from "./constant-color-channel";
 import { DiscreteHeatmapChannel } from "./discrete-heatmap-channel";
 import { ValueRangesHeatmapChannel } from "./value-ranges-heatmap-channel";
 import { State } from "../../../common";
@@ -103,6 +104,10 @@ export class Heatmap implements IPlugin {
                     this.renderValueRangesChannel(channel as ValueRangesHeatmapChannel, sources);
                     return;
                 }
+                case ChannelType.Constant: {
+                    this.renderConstantColorChannel(channel as ConstantColorChannel, sources);
+                    return;
+                }
             }
         }
         else {
@@ -111,6 +116,24 @@ export class Heatmap implements IPlugin {
         }
     }
 
+    private renderConstantColorChannel(channel: ConstantColorChannel, sources: HeatmapSource[] = null) {
+        if (this._colorStylesMap[channel.color])
+            return;
+
+        const rgba = this.hexToRgba(channel.color);
+        this._viewer.defineStyle(this._nextStyleId, rgba);
+        this._colorStylesMap[channel.color] = this._nextStyleId;
+        this._nextStyleId++;
+
+        const maps = (sources ?? this._sources).filter(s => s.channelId == channel.channelId);
+        const groups = this.groupBy(maps, m => `${m.modelId}`);
+        groups.forEach(group => {
+                const products: number[] = group.reduce((ps, c) => { ps.push(c.productId); return ps; }, []);
+                this._viewer.setStyle(this._colorStylesMap[channel.color], products, group[0].modelId);
+                this._viewer.addState(State.XRAYVISIBLE, products, group[0].modelId)
+        });
+    }
+
     private renderDiscreteChannel(channel: DiscreteHeatmapChannel, sources: HeatmapSource[] = null) {
         const colorVals = Object.values(channel.values);
         colorVals.forEach(colorHex => {

src/plugins/index.ts

@@ -6,6 +6,7 @@ export * from "./ClippingPlane/interactive-clipping-plane"
 export * from "./DataVisualization/Heatmap/heatmap"
 export * from "./DataVisualization/Heatmap/heatmap-channel"
 export * from "./DataVisualization/Heatmap/continuous-heatmap-channel"
+export * from "./DataVisualization/Heatmap/constant-color-channel"
 export * from "./DataVisualization/Heatmap/value-ranges-heatmap-channel"
 export * from "./DataVisualization/Heatmap/discrete-heatmap-channel"
 export * from "./DataVisualization/Heatmap/heatmap-source"