Problem of aps-iot-extensions-demo and Animating Sprite Viewables:Sprite can't be moved automatically

Question

I am a student in the Department of Architecture of National Cheng Kung University in Taiwan. It is my first time to use stackoverflow. The Autodesk staff told me that I can come here to ask questions related to** Autodesk Platform Services**.

I am currently studying how to bring people flow data into aps. on the platform. I'm currently using aps-iot-extensions-demo from github and Animating Sprite Viewables from the official website, I tried for a while but couldn't successfully use the instructions from the official website to move and change sprites. I'm currently making modifications based on aps-iot-extensions-demo.

I mainly refer to the following two websites: aps-iot-extensions-demo Animating Sprite Viewables

The following is the code I mainly modified: SensorSpritesExtension.js:

/// import * as Autodesk from "@types/forge-viewer";
import { UIBaseExtension } from './BaseExtension.js';

export const SensorSpritesExtensionID = 'IoT.SensorSprites';
export class SensorSpritesExtension extends UIBaseExtension {
    constructor(viewer, options) {
        super(viewer, options);
        this._onSpriteClicked = this._onSpriteClicked.bind(this);
        this._dbIdToSensorId = new Map();
        this.update = this.update.bind(this);
    }
    onDataViewChanged(oldDataView, newDataView) { this.update(); }
    update() {
        if (this.isActive()) { // TODO: update @types/forge-viewer
            this._refreshSprites();
        }
    }
    async load() {
        await super.load();
        this._style = this._createVisualStyle();
        this.viewer.addEventListener(Autodesk.DataVisualization.Core.MOUSE_CLICK, this._onSpriteClicked);
        
        console.log(`${SensorSpritesExtensionID} extension loaded.`);
        return true;
    }
    unload() {
        super.unload();
        this._style = undefined;
        this.viewer.removeEventListener(Autodesk.DataVisualization.Core.MOUSE_CLICK, this._onSpriteClicked);
        console.log(`${SensorSpritesExtensionID} extension unloaded.`);
        return true;
    }
    activate() {
        super.activate();
        this._refreshSprites();
        this._test(); 
        console.log('activate method has been called and _test method invoked'); // 确认activate方法被调用
        return true;
    }
    deactivate() {
        super.deactivate();
        this._dataVizExt.removeAllViewables();
        return true;
    }
   
    onToolbarCreated() {
        this.createToolbarButton('iot-sensor-sprites-btn', 'IoT Sensor Sprites', 'https://img.icons8.com/ios-filled/50/000000/iot-sensor.png'); // <a href="https://icons8.com/icon/61307/iot-sensor">IoT Sensor icon by Icons8</a>
    }
    _onSpriteClicked(ev) {
        if (this.onSensorClicked) {
            this.onSensorClicked(this._dbIdToSensorId.get(ev.dbId));
        }
    }
    _refreshSprites() {
        this._dataVizExt.removeAllViewables();
        if (!this.dataView) {
            return;
        }


        const viewableData = new Autodesk.DataVisualization.Core.ViewableData();
        viewableData.spriteSize = 32;

        this._dbIdToSensorId.clear();
        let dbid = 1000000;

        for (const [sensorId, sensor] of this.dataView.getSensors().entries()) {
            this._dbIdToSensorId.set(dbid, sensorId);
           
            const { x, y, z } = sensor.location;
            const style = this._style;
            const viewable = new Autodesk.DataVisualization.Core.SpriteViewable(new THREE.Vector3(x, y, z), style, dbid++);

            viewableData.addViewable(viewable);
        }

        viewableData.finish().then(() => {
            this._dataVizExt.addViewables(viewableData);
        });
        
    }

    
    _createVisualStyle() {  
        const DataVizCore = Autodesk.DataVisualization.Core;
        const viewableType = DataVizCore.ViewableType.SPRITE;
        const spriteColor = new THREE.Color(0xffffff);
//https://img.icons8.com/color/48/000000/electrical-sensor.png
        const spriteIconUrl = 'https://img.icons8.com/color/48/000000/electrical-sensor.png' ; // <a href="https://icons8.com/icon/12096/proximity-sensor">Proximity Sensor icon by Icons8</a>
        
        return new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIconUrl);
    }

    _test() {
        console.log('_test method has been called');     
        let spritesToUpdate = this._dataVizExt.viewableData.viewables.map((v) => v.dbId);
        let moveDistance = 20; 
        let currentPosition = -30; 
        let direction = 1; 
    
        const updatePosition = () => {
            currentPosition += (moveDistance * direction);
            if (currentPosition <= -50 || currentPosition >= -30) {
                direction *= -1; 
            }
    
            this._dataVizExt.invalidateViewables(spritesToUpdate, (viewable) => {
                let newPosition = new THREE.Vector3(currentPosition, viewable.position.y, viewable.position.z);
                return { position: newPosition };
            });
    
            console.log(`Sprites updated to position X: ${currentPosition}`);
        };
    
        setInterval(updatePosition, 200); //
    }
}

My current thinking is that after the sprites are initially created by db.json, the program in SensorSpritesExtension.js updates the position of the sprites every 200 milliseconds. I am currently using back and forth motion as a test effect, but I don’t know yet. What is the reason? I have modified it many times through ChatGPT4.0, and changed many ways of writing, but none of them have succeeded in making the Sprites move automatically.

I would like to ask for your help, thank you.

varunpatil · Accepted Answer · 2023-11-14 08:33:15Z

0

You need to give new position every interval. I was able to animate the sensors with this code:

viewableData.finish().then(() => {
   this._dataVizExt.addViewables(viewableData);
   let spritesToUpdate = this._dataVizExt.viewableData.viewables.map((v) => v.dbId);
   let xpos = 0;
   setInterval(() => {
      xpos=xpos+0.2;
      this._dataVizExt.invalidateViewables(spritesToUpdate, (viewable) => {
      return {
        // Move the viewable to a new location.
        position: { x: (viewable._position.x+xpos), y: viewable._position.y, z: viewable._position.z },
      };
   });
   }, 1000);
});

edited Nov 14, 2023 at 8:33

answered Nov 14, 2023 at 8:24

varunpatil

8231 gold badge5 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Problem of aps-iot-extensions-demo and Animating Sprite Viewables:Sprite can't be moved automatically

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related