@plantquest/assetmap v9.0.6

@plantquest/assetmap

PlantQuest Asset Map

Install

npm install --save @plantquest/assetmap

Usage

Debug Log

Set window.PLANTQUEST_ASSETMAP_LOG to true to enable logging.

Options

• width: Pixel width of map ( default: '600px' )
• height: Pixel height of map ( default: '400px' )
• mapBounds: Pixel bounds of map
• mapStart: Pixel start position of map ( e.g [y, x] ( default: [2925, 3900] ) )
• mapStartZoom: Starting zoom level
• mapRoomFocusZoom: Zoom level for room focus
• mapMaxZoom: Maximum zoom
• mapMinZoom: Minimum zoom
• states: State definitions ( optional )
  • { [stateName]: { color: COLOR, name: STRING, marker: 'standard'|'alert'}, ...}
• start.map: Starting map ( default: 0 )
• start.level: Starting level ( default: 0 )
• room.color: Room highlight color ( default: '#33f' )

ReactJS: Quick Example

import { PlantQuestAssetMap } from '@plantquest/assetmap'

// enable logging - useful for debugging purposes
window.PLANTQUEST_ASSETMAP_LOG = true

const options = {
  data: 'https://demo.plantquest.app/sample-data.js',
  map: [
    'https://demo.plantquest.app/pqd-pq01-m01-011.png',
    'https://demo.plantquest.app/pqd-pq01-m02-011.png',
  ],
  width: '1000px',
  height: '1000px',
  states: {
    up: { color: '#696', name: 'Up', marker: 'standard' },
    down: { color: '#666', name: 'Down', marker: 'standard' },
    missing: { color: '#f3f', name: 'Missing', marker: 'alert' },
    alarm: { color: '#f33', name: 'Alarm', marker: 'alert' },
    // "color" - color of the polygon of that state
    // "name" - name of the state
    // "marker" - type of marker ( 'standard' | 'alert' ) 
  },
  
  // room highlight color
  room: {
    color: 'red'
  },
  
}

// container when showing an asset
/*
// css example
div.plantquest-assetmap-asset-state-up {
    color: white;
    border: 2px solid #696;
    border-radius: 4px;
    background-color: #696;
    opacity: 0.7;
}
*/
class AssetInfo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  
  render() {
    return <div>
         <h3>{this.props.asset.id}</h3>
         <p><i>Building:</i> {this.props.asset.building}</p>
       </div>
  }
}

class App extends React.Component {
  
  constructor(props) {
    super(props)
    
    // to keep track of map's state
    // using listeners so we can reuse these in our app
    this.state = {
      map: -1,
      level: '',
      rooms: [],
      showRoom: null,
      showAsset: null,
    }
    

  }
  
  componentDidMount() {
    const PQAM = window.PlantQuestAssetMap
    
    // set up message listener
    PQAM.listen((msg) => {
      // put 'ready' listener to use
      if('ready' === msg.state) {
        // set 'rooms' for reuse
        this.setState({
          rooms: PQAM.data.rooms
        })
      }
      // when a user selects a room
      // "USER SELECT ROOM" example
      else if ('room' === msg.select) {
        // pick a room
        let item = PQAM.data.roomMap[msg.room]
        this.setState({ showRoom: item })
        this.selectRoom(item)
      }
      // "USER SELECT MAP" example
      else if('map' === msg.show) {
        this.setState({ level: msg.level })
        this.setState({ map: msg.map })
      }
      // Listen for "USER SHOW ASSET"
      else if('asset' === msg.show) {
        // use msg.asset
      }
      
    })
  
  }
  
  selectRoom(item) {
    const PQAM = window.PlantQuestAssetMap
    
    // "SEND A MESSAGE" example
    // "SHOW ROOM"
    PQAM.send({
      srv: 'plantquest',
      part: 'assetmap',
      show: 'room',
      room: item.room,
      focus: true,
    })
  
  }
  
  showAsset(asset) {
    const PQAM = window.PlantQuestAssetMap
    
    // "SHOW ASSET" example
    // when showing an asset
    // it's important to first show the room of that asset and then the asset
    PQAM.send({
      srv: 'plantquest',
      part: 'assetmap',
      show: 'room',
      room: asset.room,
      focus: true,
    })
    PQAM.send({
      srv: 'plantquest',
      part: 'assetmap',
      show: 'asset',
      asset: asset.id,
    })
    
    this.setState({ showRoom: asset.room })
    this.setState({ showAsset: asset })
    
  }
  

  render() {
    return (
      <div className="App">
        <PlantQuestAssetMap
          options={options}
          assetinfo={AssetInfo}
        />
      </div>
    )
  }
  
}

Messages

// for example
const PQAM = window.PlantQuestAssetMap
PQAM.listen((msg) => {
  if('room-asset' === msg.relate) {
    // use msg.relation
  }
})

Licenses

MIT © Plantquest Ltd BSD 2-Clause © Vladimir Agafonkin, Cloudmade MIT © Justin Manley