Occupancy sensor demo app
You can use this app to visualise occupancy sensor data from CISCO DNA Spaces Firehose stream.
What do you need?
- DNA Spaces account with access to the Firehose API (Api Key).
- Infrastructure to run Docker image for Firehose connection proxy.
Build and run
Build UI:
npm install
npm run build
Build docker image:
docker build -t demoapp-space-occupancy -f deploy\Dockerfile .
Run docker container:
docker run -p 5050:80 \
--env LIVE_STREAM_URL=http://partners.dnaspaces.io \
--env LIVE_STREAM_API_KEY=YOUR_DNAS_API_KEY \
--env VUE_APP_LIVE_STREAM_URL_FOR_WEB=/api/partners/v1/firehose/events \
--env WEB_ASSETS_CDN="/" \
demoapp-space-occupancy
Components
Firehose API Proxy
You need a proxy backend to DNA-S Firehose API to perform authentication and allow UI app to connect from web browser bypassing CORS policy.
Following environment variables are needed:
- LIVE_STREAM_URL - DNA-S Firehose http API url,
- LIVE_STREAM_API_KEY - DNA-S Api Key,
You can use the same container to serve UI application at the same time, in that case you should specify following:
- VUE_APP_LIVE_STREAM_URL_FOR_WEB - configure UI application to use following URL to connect the Firehose API stream, you can use value
/api/partners/v1/firehose/events
to connect to the same nginx container as the one serving the app
- WEB_ASSETS_CDN - optional address for web assets CDN
Command to build image
docker build -t demoapp-space-occupancy -f deploy\Dockerfile .
Command to run container
docker run -p 5050:80 \
--env LIVE_STREAM_URL=http://partners.dnaspaces.io \
--env LIVE_STREAM_API_KEY=YOUR_DNAS_API_KEY \
--env VUE_APP_LIVE_STREAM_URL_FOR_WEB=/api/partners/v1/firehose/events \
demoapp-space-occupancy
UI Application
Application is reading local file to get its configuration. File src/components/LocationStore.js
contains static info for the map and rooms.
Most important elements:
LocationStore.floors[0].imageXyGeojson
- floor map image boundary, units are meters
LocationStore.zones
- these are elements for the side menu, xyGeojson
is used to zoom-on, on click
LocationStore.floors[0].rooms[]
- these are rooms with sensors, each desk should be also represented as room in open space
LocationStore.floors[0].rooms[].name
- name displayed in tooltip on hover
LocationStore.floors[0].rooms[].roomSensors[].trackingId
- MAC address of a sensor
LocationStore.floors[0].rooms[].xyGeojson
- room area geoJSON, unit are meters, empty properties
object must be provided, since it will be populated with working data.
Map image is loaded from path /map_images/lab_occupancy_v3.png
, you can change it here: src/components/OccupancyMap.vue:10
. You can use WEB_ASSETS_CDN environment variable to get map image from different source.
Commands to build the UI app
npm install
npm run build
Compiles and hot-reloads for development