| | |
| | | } |
| | | } |
| | | |
| | | export const generateSprite = (deviceType, source) => { |
| | | export const generateSprite = (deviceType, texture) => { |
| | | let sprite; |
| | | switch (deviceType) { |
| | | case DEVICE_TYPE.SHELF: |
| | |
| | | |
| | | |
| | | case DEVICE_TYPE.AGV: |
| | | if (source) { |
| | | sprite = new PIXI.Sprite(PIXI.Texture.from(source, { resourceOptions: { scale: 1 } })); |
| | | if (texture) { |
| | | sprite = new PIXI.Sprite(PIXI.Texture.from(texture, { resourceOptions: { scale: 1 } })); |
| | | } |
| | | sprite.width = 300; |
| | | sprite.height = 500; |
| | |
| | | } |
| | | |
| | | export const rotationParseNum = (num) => { |
| | | return num * Math.PI / 180; |
| | | return num * (Math.PI / 180); |
| | | } |
| | | |
| | | export const incrementSpriteNo = (str, incrementValue) => { |
| | |
| | | // dynamic graphic ---------------- |
| | | |
| | | export const generateDynamicGraphic = (curZone, data, setCurSprite) => { |
| | | // console.log("ws", curZone, data); |
| | | console.log(JSON.stringify(data)); |
| | | for (const agvVo of data.agvVos) { |
| | | showAgvSprite(curZone, agvVo, setCurSprite); |
| | | drawerAgvPath(curZone, agvVo); |
| | | } |
| | | |
| | | } |
| | | |
| | | const agvRotationOffsetDegrees = 0; |
| | | const agvRotationOffset = rotationParseNum(agvRotationOffsetDegrees); |
| | | |
| | | const showAgvSprite = (curZone, agvVo, setCurSprite) => { |
| | | const { agvNo, code, direction, backpack, dynamicRoute, battery, ...rest } = agvVo; |
| | | if (!code) { return } |
| | | const { agvNo, code, direction, battery, backpack } = agvVo; |
| | | if (!code) { return; } |
| | | const codeSprite = querySprite(DEVICE_TYPE.POINT, code); |
| | | if (!codeSprite) { return } |
| | | if (!codeSprite) { return; } |
| | | let agvSprite = querySprite(DEVICE_TYPE.AGV, agvNo); |
| | | const targetRotation = rotationParseNum(direction); |
| | | |
| | | const backpackCount = backpack?.filter(item => item.loaded === true).length || 0; |
| | | |
| | | if (!agvSprite) { |
| | | agvSprite = generateSprite(DEVICE_TYPE.AGV, |
| | | // generateAgvSpriteTexture(getAgvStatusMode(backpack.filter(item => item.loaded === true).length, battery)); |
| | | generateAgvSpriteTexture(getAgvStatusMode(1, battery)) |
| | | ); |
| | | const agvStatusMode = getAgvStatusMode(backpackCount, battery); |
| | | const agvTexture = generateAgvSpriteTexture(agvStatusMode); |
| | | agvSprite = generateSprite(DEVICE_TYPE.AGV, agvTexture); |
| | | |
| | | initSprite(agvSprite, DEVICE_TYPE.AGV); |
| | | |
| | | agvSprite.data.no = agvNo; |
| | | agvSprite.data.backpackCount = backpackCount; |
| | | agvSprite.data.battery = battery; |
| | | |
| | | agvSprite.position.set(codeSprite.position.x, codeSprite.position.y); |
| | | agvSprite.rotation = rotationParseNum(direction); |
| | | agvSprite.rotation = targetRotation + agvRotationOffset; |
| | | mapContainer.addChild(agvSprite); |
| | | beInsight(agvSprite, setCurSprite); |
| | | // agv no on sprite |
| | | |
| | | // agvNo sprite |
| | | const agvText = new PIXI.Text(agvNo.toString(), { |
| | | fontSize: 60, |
| | | fill: 0x000000, |
| | | }); |
| | | agvText.anchor.set(0.5, 0.5); |
| | | agvText.position.set(0, 0); |
| | | agvSprite.addChild(agvText); |
| | | agvSprite.updateTextRotation = () => { |
| | | if (agvText && agvSprite) { |
| | | agvText.rotation = -agvSprite.rotation; |
| | | } |
| | | }; |
| | | agvSprite.updateTextRotation(); |
| | | |
| | | } else { |
| | | const prevBackpackCount = agvSprite.data.backpackCount; |
| | | const prevBattery = agvSprite.data.battery; |
| | | |
| | | if (backpackCount !== prevBackpackCount || battery !== prevBattery) { |
| | | const agvStatusMode = getAgvStatusMode(backpackCount, battery); |
| | | const agvTexture = generateAgvSpriteTexture(agvStatusMode); |
| | | agvSprite.texture = PIXI.Texture.from(agvTexture, { resourceOptions: { scale: 1 } }); |
| | | // update backpackCount and battery |
| | | agvSprite.data.backpackCount = backpackCount; |
| | | agvSprite.data.battery = battery; |
| | | } |
| | | |
| | | animateRotation(agvSprite, targetRotation, agvRotationOffset); |
| | | } |
| | | |
| | | new TWEEDLE.Tween(agvSprite?.position).easing(TWEEDLE.Easing.Linear.None).to({ |
| | | x: codeSprite.position.x, |
| | | y: codeSprite.position.y |
| | | }, 1000).onUpdate(() => { |
| | | updateEffect(agvSprite); |
| | | }).start(); |
| | | new TWEEDLE.Tween(agvSprite.position) |
| | | .to({ |
| | | x: codeSprite.position.x, |
| | | y: codeSprite.position.y |
| | | }, 1000) |
| | | .easing(TWEEDLE.Easing.Linear.None) |
| | | .start(); |
| | | } |
| | | |
| | | const animateRotation = (sprite, targetRotation, agvRotationOffset) => { |
| | | let currentRotation = sprite.rotation + agvRotationOffset; |
| | | targetRotation += agvRotationOffset; |
| | | |
| | | let rotationDifference = targetRotation - currentRotation; |
| | | |
| | | rotationDifference = ((rotationDifference + Math.PI) % (2 * Math.PI)) - Math.PI; |
| | | |
| | | const endRotation = sprite.rotation + rotationDifference; |
| | | |
| | | new TWEEDLE.Tween(sprite) |
| | | .to({ rotation: endRotation }, 1000) |
| | | .easing(TWEEDLE.Easing.Linear.None) |
| | | .onUpdate(() => { |
| | | if (sprite.updateTextRotation) { |
| | | sprite.updateTextRotation(); |
| | | } |
| | | }) |
| | | .start(); |
| | | }; |
| | | |
| | | const drawerAgvPath = (curZone, agvVo) => { |
| | | if (!mapContainer) { |
| | | return; |
| | | } |
| | | const { agvNo, code: curCode, dynamicRoute } = agvVo; |
| | | // if (dynamicRoute?.length <= 1) { |
| | | // return; |
| | | // } |
| | | |
| | | const agvPathName = 'agvPath-' + agvNo; |
| | | let agvPath = mapContainer.getChildByName(agvPathName); |
| | |
| | | } |
| | | |
| | | mapContainer.addChild(agvPath); |
| | | } |
| | | } |