@plantquest/assetmap
PlantQuest Asset Map
Install
npm install --save @plantquest/assetmapUsage
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 mapmapStart: Pixel start position of map ( e.g[y, x]( default:[2925, 3900]) )mapStartZoom: Starting zoom levelmapRoomFocusZoom: Zoom level for room focusmapMaxZoom: Maximum zoommapMinZoom: Minimum zoomstates: 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
SEND MESSAGES
ZOOM
{
srv: 'plantquest',
part: 'assetmap',
zoom: <INTEGER>,
}
Where:
<INTEGER>: Zoom level (default: 2 to 6)
GET RELATION ( REQUIRES A RELATION LISTENER )
{
srv: 'plantquest',
part: 'assetmap',
relate: 'room-asset',
}
Listen: RELATION
SHOW ROOM
{
srv: 'plantquest',
part: 'assetmap',
show: 'room',
room: <ROOM-ID>,
focus: <Boolean>,
}
Where:
<ROOM-ID>: Room Identifier String
<Boolean>: either true or false - enable focus when a room is shown
SHOW ASSET
{
srv: 'plantquest',
part: 'assetmap',
show: 'asset',
asset: <ASSET-ID>,
}
Where:
<ASSET-ID>: Asset Identifier String
HIDE ASSET
{
srv: 'plantquest',
part: 'assetmap',
hide: 'asset',
asset: <ASSET-ID>,
}
Where:
<ASSET-ID>: Asset Identifier String
SET ASSET STATE
{
srv: 'plantquest',
part: 'assetmap',
show: 'asset',
state: <STATE>,
asset: <ASSET-ID>,
}
Where:
<STATE>: State String ('up', 'down', 'alarm', 'missing') - states from the options
<ASSET-ID>: Asset Identifier String
SHOW MAP
{
srv: 'plantquest',
part: 'assetmap',
show: 'map',
map: <INTEGER>,
}
Where:
<INTEGER>: Number of the map
LISTEN MESSAGES
STATE
{
srv: 'plantquest',
part: 'assetmap',
state: <STATE>,
}
Where:
<STATE>: 'ready' - triggered when the map is fully rendered
RELATION
{
srv: 'plantquest',
part: 'assetmap',
relate: 'room-asset',
relation: <RELATION>,
}
Where:
<RELATION>:
{ '<ROOM-ID>': { asset: [ '<ASSET-ID>', ... ] } }
ROOM-ASSET RELATION: Get all the rooms IDS containing their asset IDS in that room
```js // for example const PQAM = window.PlantQuestAssetMap PQAM.listen((msg) => { if('room-asset' === msg.relate) { // use msg.relation } }) ```
USER SELECT ROOM
{
srv: 'plantquest',
part: 'assetmap',
select: 'room',
room: <ROOM-ID>,
}
Where:
<ROOM-ID>: Room Identifier String
USER SELECT MAP
{
srv: 'plantquest',
part: 'assetmap',
show: 'map',
map: <INTEGER>,
level: <STRING>,
}
Where:
<INTEGER>: Number of the map user just selected
<STRING>: Name of the level of that map
USER SHOW ASSET
{
srv: 'plantquest',
part: 'assetmap',
show: 'asset',
asset: <OBJECT>,
}
Where:
<OBJECT>: Metadata of the SHOWN asset