🚀 Big News:Socket Has Acquired Secure Annex.Learn More →

Book a Demo Sign in

@wework/floormap.gl

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@wework/floormap.gl

A javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.

npm

Version: 0.8.0-rc1

Version published: 7 years ago

Maintainers: 20

Created: 5 years ago

Source

floormap.gl

A javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.

Quick Start

Clone the project

git clone git@github.com:WeConnect/floormap.gl.git
cd floormap.gl

Install dependencies

yarn install

Start the demo

yarn start:demo

Build the library

yarn build

A dist folder will be created, and outputs files are floormap.gl.min.js, index.js and index.es.js files

Gently reminder: In order to use this floormap.gl library in your own node application, you may yarn link first and it will register @wework/floormap.gl in your local development. Then yarn link '@wework/floormap.gl' in your node application

Example usage in html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>FloorMapGL</title>
</head>
<body>
  <div id="floormap"></div>
  <script type="text/javascript" src="dist/floormap.gl.min.js" ></script>
  <script>
    var renderer = new FloorMapGL({
      target: document.getElementById('floormap'),
      size: {
        width: 500,
        height: 500
      },
      backgroundColor: 'grey',
      antialias: true,
      pixelRatio: 2
    })

    renderer.draw({
      id: '001',
      tags: ['hello'],
      type: 'MESH',
      style: {
        color: 'rgb(155, 255, 55)',
        side: 'FRONT',
        outline: {
          color: 'rgb(255, 0, 0)',
          only: false
        }
      },
      points: [
        { x: -1, y: -1 },
        { x: 1, y: -1 },
        { x: 1, y: 1 },
        { x: -1, y: 1 }
      ],
      interactable: true,
      extrude: 0,
      position: { x: 0, y: 0, z: 0 },
      rotation: { x: 0, y: 0, z: 0 },
      scale: { x: 10, y: 10, z: 10 }
    },
    false,
    (success) => {
      console.log(success)
    },
    (error) => {
      console.log(e)
    })
  </script>
</body>
</html>

Example usage in web application

link the floormap.gl package in your node application

yarn link '@wework/floormap.gl'

or download the package directly from the npm

yarn add '@wework/floormap.gl'

example usage in a react application

import React, { Component } from 'react'
import FloorMapGL from '@wework/floormap.gl'

class FloorMap extends Component {
  componentDidMount() {
    this.renderer = new FloorMapGL({
      target: this.mount,
      size: {
        width: 500,
        height: 500
      },
      backgroundColor: 'grey',
      antialias: true,
      pixelRatio: 2
    })

    this.renderer.draw(
      {
        id: '001',
        tags: ['hello'],
        type: 'MESH',
        style: {
          color: 'rgb(155, 255, 55)',
          side: 'FRONT',
          outline: {
            color: 'rgb(255, 0, 0)',
            only: false
          }
        },
        points: [
          { x: -1, y: -1 },
          { x: 1, y: -1 },
          { x: 1, y: 1 },
          { x: -1, y: 1 }
        ],
        interactable: true,
        extrude: 0,
        position: { x: 0, y: 0, z: 0 },
        rotation: { x: 0, y: 0, z: 0 },
        scale: { x: 10, y: 10, z: 10 }
      },
      false,
      (success) => {
        console.log(success)
      },
      (error) => {
        console.log(e)
      }
    )
  }

  render() {
    return (
      <div
        ref={(mount) => {
          this.mount = mount
        }}
      />
    )
  }
}

export default FloorMap

Renderer Object

Name	Type	Description
target	object	domElement, it is `required`
size	object	window size of the renderer
backgroundColor	string	background color of the renderer, default is `'black'`
antialias	boolean	Options to smooth the jagged line, default is `true`
pixelRatio	number	The rendering resolution, default is `2`
camera	object	camera settings
groundPlane	boolean	invisible ground plane for the mouse interaction, default is `false`

size

Name	Type	Description
width	number	the width of the renderer window, by default is `700`
height	number	the height of the renderer window, by default is `400`

camera

Name	Type	Description
zoomLevel	number	zoom level of the camera view, default is `1`
enableRotate	boolean	to enable to control and rotate the camera view angle, default is `true`
maxPolarAngle	number	max horizontal rotation of the camera in degree, default is `90`

example:

import FloorMapGL from '@wework/floormap.gl'

var renderer = new FloorMapGL({
  target: domElement,
  size: {
    width: 720,
    height: 480
  },
  backgroundColor: 'black',
  antialias: true,
  pixelRatio: 2,
  camera: {
    maxPolarAngle: 90,
    enableRotate: true,
    zoomLevel: 1
  },
  groundPlane: true
})

List of APIs in floormap.gl

Name	Description
draw	Draw the list of renderObjects onto the screen
updateWindowDimension	Update the size of the renderer window
getIdsByTags	Get all the renderObjects id by tags
fitContent	Adjust the renderer camera view frustum to fit the content space / given drawn boundaries
getZoom	Get the current zoom level of the camera
setZoom	Set the zoom level for the camera
getCenter	Get the center of the boundaries
setCameraViewPoint	Set the camera panning position
setCameraViewAngle	Set the camera rotation view angle
createInstancedMesh	Create a instance mesh
addToInstancedMesh	Link the renderObject to the instanceMesh
drawInstancedMesh	Draw the instance mesh
addEventListener	subscribe to a renderer event
removeEventListener	unsubscribe to a renderer event
removeAllEventListeners	unsubscribe all the renderer event listeners
remove	remove specific renderObject by id
removeAll	remove all the renderObjects in the renderer

Example Apis Usage

draw

.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)

Parameters	Type	Description
arrayOfParams	array	array of RenderObjects
transparentUpdate	boolean	flag to enable clearing and re-render the scene again for transparent object
onSuccess	function	callback function when successfully render this draw call
onError	function	callback function when there is an error occur in this draw call

example:

renderObjects = []

renderObjects.push({
  id: '001',
  tags: '',
  type: 'MESH',
  style: {
    color: 'rgb(155, 255, 55)',
    side: 'FRONT',
    outline: {
      color: 'rgb(255, 0, 0)',
      only: false
    }
  },
  points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],
  interactable: true,
  visible: true,
  extrude: 0,
  position: { x: 0, y: 0, z: 0 },
  rotation: { x: 0, y: 0, z: 0 },
  scale: { x: 1, y: 1, z: 1 },
  draw: true
})

renderer.draw(
  renderObjects,
  false,
  (success) => {
    console.log(success)
  },
  (errors) => {
    console.log(errors)
  }
)

Update renderObjects

using the same .draw() api to update the specific renderObject by id

example:

renderer.draw(
  [
    {
      id: '001',
      style: {
        color: 'rgb(155, 255, 55)'
      },
      position: { x: 10, y: 0, z: 0 }
    }
  ],
  false,
  (success) => {
    console.log(success)
  },
  (errors) => {
    console.log(errors)
  }
)

updateWindowDimension

.updateWindowDimension({ width: Number, height: Number })

Parameters	Type	Description
width	number	new width for the renderer window
height	number	new height for the renderer window

example:

renderer.updateWindowDimension({ width, height })

remove

.remove(id: String)

example:

renderer.remove(id)

removeAll

.removeAll()

example:

renderer.removeAll()

setCameraViewPoint

.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })

example:

renderer.setCameraViewPoint({
  position: { x: 2, y: 0, z: 5 }
})

setCameraViewAngle

setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })

example:

renderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })

getIdsByTags

.getIdsByTags(tags: Array)

example:

renderer.getIdsByTags(['tag1', 'tag2'])

fitContent

.fitContent(params: Object)

Parameters	Type	Description
id	string	renderObject id, default is the whole `renderScene boundary`
padding	number	add the padding for the camera view, default is `0`
points	array	custom boundary shape, `optional`

example:

this.renderer.fitContent()
this.renderer.fitContent({ padding: 50 })
this.renderer.fitContent({ id: '07-124', padding: 50 })
this.renderer.fitContent({ points: points, padding: 50 })

Renderer Events

Name	Value	Description
ONCLICK	'onclick'	when the user select the interactable renderObject by clicking/touching
ONHOVER	'onmousehover'	when the user mouse hovering the interactable renderObject
ONMOUSEOVER	'onmouseover'	when moving the mouse pointer onto a renderObject
ONMOUSEOUT	'onmouseout'	when moving the mouse pointer out of a renderObject
ONMOUSEMOVE	'onmousemove'	when moving the mouse pointer
ONRENDER	'onrender'	when .draw api successfully sent all the data to the gpu to render
ONERROR	'onerror'	when floormap.gl renderer encounters any internal errors
ONTEXTURELOAD	'ontextureload'	when texture is loaded and sent to the gpu

ONCLICK

Parameters	Type	Description
id	string	id of the renderObject
point	object	intersection point in the world space, x y z value
mousePos	object	the mouse position in screen space, x y value

ONHOVER

Parameters	Type	Description
id	string	id of the renderObject
point	object	intersection point in the world space, x y z value
mousePos	object	the mouse position in screen space, x y value

ONMOUSEOVER

Parameters	Type	Description
id	string	id of the renderObject
point	object	intersection point in the world space, x y z value
mousePos	object	the mouse position in screen space, x y value

ONMOUSEOUT

Parameters	Type	Description
id	string	id of the renderObject
point	object	intersection point in the world space, x y z value
mousePos	object	the mouse position in screen space, x y value

ONMOUSEMOVE

Parameters	Type	Description
id	string	id of the renderObject
point	object	intersection point in the world space, x y z value
mousePos	object	the mouse position in screen space, x y value

ONRENDER

Parameters	Type	Description
frameTime	number	the time taken to complete this draw call
memory	object	gpu memory info
render	object	render info
renderObjects	array	list of renderObjects to render in the draw call

ONERROR

Parameters	Type	Description
error	object	Error() object

ONTEXTURELOAD

Parameters	Type	Description
frameTime	number	the time taken to complete this draw call
memory	object	gpu memory info
render	object	render info
renderObjects	array	list of renderObjects to render in the draw call

addEventListener

.addEventListener(eventName: String, callback: Function)

example:

renderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)
renderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)
renderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)

removeEventListener

.removeEventListener(eventName: String, callback: Function)

example:

renderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)
renderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)
renderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)

RenderObject samples

MESH rendering setting

example:

{
  id: '001', // required
  tags: ['level 3'],
  type: 'MESH',
  style: {
    color: 'rgb(155, 255, 55)',
    side: 'FRONT',
    texture: {
      img: '',
      repeat: 0.5
    }
    outline: {
      color: 'rgb(255, 0, 0)',
      width: 0.2,
      only: false
    }
  },
  points: [
    { x: -1, y: -1 },
    { x: 1, y: -1 },
    { x: 1, y: 1 },
    { x: -1, y: 1 }
  ],
  geometryTranslate: {x: -1, y: -1, z: 0},
  interactable: true,
  visible: true,
  extrude: 0,
  position: { x: 0, y: 0, z: 0 },
  rotation: { x: 0, y: 0, z: 0 },
  scale: { x: 1, y: 1, z: 1 }
}

TEXT rendering setting

example:

{
  id: '002',
  tags: ['nothing'],
  type: 'TEXT',
  position: { x: 0, y: 0, z: 0 },
  scalar: 1.0,
  center: { x: 0.5, y: 0.5 },
  style: {
    color: 'rgb(255, 255, 255)',
    fontFamily: 'Arial, Helvetica, sans-serif',
    textAlign: 'center',
    fontWeight: 'normal', // normal, bold, bolder, lighter
    fontStyle: 'italic' // normal, italic, oblique
  },
  text: 'hello',
  interactable: false,
  visible: true
}

SPRITE rendering setting

example:

{
  id: '003',
  tags: ['level 3'],
  type: 'SPRITE',
  position: { x: 2, y: 0 },
  center: { x: 0.5, y: 0.5 },
  style: {
    color: 'rgb(255, 255, 255)',
    img: meeting_room,
    width: 'auto',
    height: 'auto',
    maxWidth: 3,
    maxHeight: 3
  },
  interactable: false,
  visible: true
}

LINE rendering setting

example:

{
  id: '004',
  tags: ['level 3'],
  type: 'LINE',
  lineWidth: 1.0,
  points: [
    { x: 0, y: 0 },
    { x: 100, y: 0 },
    { x: 100, y: 90 },
    { x: 200, y: 20 }
  ],
  style: {
    color: 'rgb(255, 0, 255)',
    opacity: 0.7
  },
  interactable: false,
  visible: true
}

Instanced Mesh

example:


renderer.createInstancedMesh({
  id: 'MESH_GROUP_1',
  mesh: {
    style: {
      color: 'rgb(155, 255, 55)',
      side: 'FRONT',
      outline: {
        color: 'rgb(255, 0, 0)',
        width: 0.2,
        only: false
      }
    },
    points: [...],
    extrude: 5
  },
})

renderer.addToInstancedMesh({
  id: 'UUID',
  instancingId: 'MESH_GROUP_1',
  style: {
    color: 'rgb(100,101,102)'
  },
  position: { x: 0, y: 0, z: 0 },
  rotation: { z: 0 },
  scale: { x: 1, y: 1, z: 1 },
})

renderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })

FAQs

What is @wework/floormap.gl?

Is @wework/floormap.gl well maintained?

Package last updated on 02 Jan 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@wework/floormap.gl

floormap.gl

Quick Start

Clone the project

Install dependencies

Start the demo

Build the library

Example usage in html

Example usage in web application

Renderer Object

size

camera

example:

List of APIs in floormap.gl

Example Apis Usage

draw

example:

Update renderObjects

example:

updateWindowDimension

example:

remove

example:

removeAll

example:

setCameraViewPoint

example:

setCameraViewAngle

example:

getIdsByTags

example:

fitContent

example:

Renderer Events

ONCLICK

ONHOVER

ONMOUSEOVER

ONMOUSEOUT

ONMOUSEMOVE

ONRENDER

ONERROR

ONTEXTURELOAD

addEventListener

example:

removeEventListener

example:

RenderObject samples

MESH rendering setting

example:

TEXT rendering setting

example:

SPRITE rendering setting

example:

LINE rendering setting

example:

Instanced Mesh

example:

Related posts

TeamPCP-Linked Supply Chain Attack Hits SAP CAP and Cloud MTA npm Packages

Socket Has Acquired Secure Annex