Merge pull request #491 from xBimTeam/feature/icons-value-readout

Added value readout component to the icon visualization

Author: Ibrahim5aad

examples/3d-tracking/index.ts

@@ -11,7 +11,7 @@ viewer.addPlugin(icons);
 var plane = new InteractiveClippingPlane();
 viewer.addPlugin(plane);
 
-const sourceIcon = new Icon("Digger #1", "Tracking digger location along the bridge", null, IconsData.diggerIcon);
+const sourceIcon = new Icon("Digger #1", "Tracking digger location along the bridge", null, null, IconsData.diggerIcon);
 
 viewer.on('loaded', args => {
     try {

examples/data-visualization/index.ts

@@ -23,8 +23,9 @@ const temperatureSource = new HeatmapSource("Temp sensor", products, tempChannel
 const humiditySource = new HeatmapSource("Humidity sensor", products, humidityChannelId, 10);
 const occupancySource = new HeatmapSource("Occupancy sensor", products, occChannelId, "Occupied");
 
-const sourceIcon = new Icon("Rooms 1 and 2 Sensor", "Temperature sensor", products, IconsData.errorIcon, null, null, null, () => { 
+const sourceIcon = new Icon("Rooms 1 and 2 Sensor", "Temperature sensor", "22°C", products, IconsData.errorIcon, null, null, null, () => { 
     viewer.zoomTo(products, 1) });
+const otherIcon = new Icon("Temperature Sensor 2", "Temperature sensor", "22°C", [{id: 617, model: 1}], IconsData.successIcon);
 
 let selectedChannel: IHeatmapChannel;
 const ranges = [
@@ -71,7 +72,7 @@ viewer.on('loaded', args => {
         heatmap.addSource(occupancySource);
 
         icons.addIcon(sourceIcon);
-        icons.addIcon(new Icon("Temperature Sensor 2", "Temperature sensor", [{id: 617, model: 1}], IconsData.successIcon));
+        icons.addIcon(otherIcon);
         // icons.addIcon(new Icon("Temperature Sensor 3", "Temperature sensor", 1, [447], IconsData.successIcon));
 
         heatmap.renderChannel(selectedChannel.channelId);
@@ -81,21 +82,29 @@ viewer.on('loaded', args => {
                 temperatureSource.value = getRandomInt(40).toString(); // will work for stringified
                 heatmap.renderSource(temperatureSource.id);
                 sourceIcon.description = `Room ${selectedChannel.name}: ${temperatureSource.value}${selectedChannel.unit}`;
+                sourceIcon.valueReadout = `${temperatureSource.value}${selectedChannel.unit}`;
+                otherIcon.valueReadout = `22${selectedChannel.unit}`;
             }
             else if(selectedChannel.channelId === humidityChannelId){
                 humiditySource.value = getRandomInt(100).toString();
                 heatmap.renderSource(humiditySource.id);
                 sourceIcon.description = `Room ${selectedChannel.name}: ${humiditySource.value}${selectedChannel.unit}`;
+                sourceIcon.valueReadout = `${humiditySource.value}${selectedChannel.unit}`;
+                otherIcon.valueReadout = `10${selectedChannel.unit}`;
             }
             else if(selectedChannel.channelId === energyChannelId){
                 energySource.value = getRandomInt(100).toString();
                 heatmap.renderSource(energySource.id);
                 sourceIcon.description = `${selectedChannel.description}: ${energySource.value}${selectedChannel.unit}`;
+                sourceIcon.valueReadout = `${energySource.value}${selectedChannel.unit}`;
+                otherIcon.valueReadout = `20${selectedChannel.unit}`;
             }
             else if(selectedChannel.channelId === occChannelId){
                 occupancySource.value = occupancySource.value === "Occupied" ? "Vacant" : "Occupied";
                 heatmap.renderSource(occupancySource.id);
                 sourceIcon.description = `${selectedChannel.description}: ${occupancySource.value}`;
+                sourceIcon.valueReadout = `${occupancySource.value}`;
+                otherIcon.valueReadout = `N/A`;
             }
 
         }, 2000);

src/plugins/DataVisualization/Icons/icon.ts

@@ -10,6 +10,7 @@ export class Icon {
     private _location: Float32Array;
     private _imageData: string;
     private _description: string;
+    private _valueReadout: string;
     private _name: string;
     private _width: number;
     private _height: number;
@@ -24,6 +25,7 @@ export class Icon {
      * 
      * @param {string} name - The name of the icon.
      * @param {string} description - A brief description of the icon.
+     * @param {string | null} valueReadout - A value readout of the icon.
      * @param {number} products - The products associated with the icon.
      * @param {string} imageData - Base64 encoded image data for the icon.
      * @param {Float32Array | null} [location=null] - The XYZ coordinates for the icon location. If not provided, the centroid of the product bounding box is used.
@@ -36,6 +38,7 @@ export class Icon {
     constructor(
         name: string,
         description: string,
+        valueReadout: string | null,
         products: { id: number, model: number }[] | null,
         imageData: string | null,
         location: Float32Array | null = null,
@@ -48,6 +51,7 @@ export class Icon {
         this._location = location;
         this._name = name;
         this._description = description;
+        this._valueReadout = valueReadout;
         this._width = width;
         this._height = height;
         this._onIconSelected = onIconSelected;
@@ -126,6 +130,22 @@ export class Icon {
         this._description = value;
     }
 
+    /**
+     * Gets the value readout of the icon.
+     * @returns {string} The value readout of the icon.
+     */
+    public get valueReadout(): string {
+        return this._valueReadout;
+    }
+
+    /**
+     * Sets the value readout of the icon.
+     * @param {string} value - The new value readout of the icon.
+     */
+    public set valueReadout(value: string) {
+        this._valueReadout = value;
+    }
+
     /**
      * Gets the width of the icon.
      * @returns {number} The width of the icon.

src/plugins/DataVisualization/Icons/icons-data.ts

@@ -20,6 +20,29 @@ export abstract class IconData{
             scale: 1.1;
         }
         
+        .icon-value-readout {
+            position: absolute;
+            background: rgb(255, 255, 255);
+            color: black;
+            border-radius: 10px;
+            padding: 2px 5px;
+            font-size: 11px;
+            font-weight: bold;
+            white-space: nowrap;
+            top: -18px;
+            left: 50%;
+            transform: translateX(-50%);
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+            pointer-events: none;
+            z-index: 10;
+            animation: fadeIn 0.3s ease-in-out;
+        }
+        
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        
         #floatdetails {
             display: none;
             position: absolute;

src/plugins/DataVisualization/Icons/icons.ts

@@ -117,10 +117,17 @@ export class Icons implements IPlugin {
                 icon.location = new Float32Array([centerX, centerY, centerZ]);
             }
         }
+        
+        const valueDiv = document.createElement('div');
+        valueDiv.classList.add('icon-value-readout');
+        valueDiv.id = 'value-' + id;
+        valueDiv.style.display = 'none'; // Initially hidden
+        
         this._instances[id.toString()] = icon;
         iconElement.id = "icon" + id;
         iconElement.title = (icon.products && icon.products.length)
             ? `Products ${icon.products.map(p => p.id).join(', ')}` : "";
+        iconElement.appendChild(valueDiv);
         iconElement.appendChild(image);
         this._icons.appendChild(iconElement);
         this._iconsCount++;
@@ -277,6 +284,20 @@ export class Icons implements IPlugin {
                         iconLabel.style.display = 'block';
                         iconLabel.style.left = posLeft + 'px';
                         iconLabel.style.top = posTop + 'px';
+
+                        if(icon.valueReadout){
+                            const valueDiv = document.getElementById('value-' + k);
+                            if(valueDiv) {
+                                valueDiv.textContent = icon.valueReadout;
+                                valueDiv.style.display = 'block';
+                                valueDiv.style.top = (iconheight + 5) + 'px';
+                            }
+                        } else {
+                            const valueDiv = document.getElementById('value-' + k);
+                            if(valueDiv) {
+                                valueDiv.style.display = 'none';
+                            }
+                        }
                     }
 
                 } else {