# \[Solved\] Demo graphics technology **URL:** \ **Category:** Help\ **Tags:** experience\ **Created:** [January 12, 2019, 8:51pm UTC](https://forums.losant.com/t/solved-demo-graphics-technology/1442 "2019-01-12T20:51:28Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![paul\_wareham](https://avatars.discourse-cdn.com/v4/letter/p/ed8c4c/32.png) [@paul\_wareham](https://forums.losant.com/u/paul_wareham)\ **Post date:** [January 12, 2019, 8:51pm UTC](https://forums.losant.com/t/solved-demo-graphics-technology/1442/1 "2019-01-12T20:51:28Z")
I’m assuming that none of the graphics in this demo are standard blocks or Losant dashboards? I was curious which technologies were used to create them and if it was hosted on the Losant Platform? ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/fcd696bf8d1b6ab60dff291482834ed2c754edd6.jpeg) [https://cdn2.hubspot.net/hubfs/742943/Website/Images/losant-ar-demo-ipad.jpg](https://cdn2.hubspot.net/hubfs/742943/Website/Images/losant-ar-demo-ipad.jpg) ---
**Author:** ![anaptfox](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/anaptfox/32/873_2.png) [@anaptfox](https://forums.losant.com/u/anaptfox)\ **Post date:** [January 14, 2019, 3:15pm UTC](https://forums.losant.com/t/solved-demo-graphics-technology/1442/2 "2019-01-14T15:15:10Z")
Hi @paul_wareham, It is in fact hosted within Losant using Losant Experiences. And you are correct, this demo is not using standard blocks or Losant dashboards. In this case, this is a client-side web app that’s hosted within experiences and, because of experiences, this app has access to the devices’ data. In addition, this demo had a really nice AR component that was done using [AR.js](https://github.com/jeromeetienne/AR.js/blob/master/README.md). For more info, here are some good resources on Experiences: > **[Losant Product Demos](https://www.losant.com/iot-platform/losant-product-demos?demo=end-user-experiences)** > > Online product demos of the Losant enterprise IoT platform. Experience the ease of use of an AEP. Start building for free, today. [https://docs.losant.com/experiences/walkthrough/views/overview/](https://docs.losant.com/experiences/walkthrough/views/overview/) [https://docs.losant.com/experiences/overview/](https://docs.losant.com/experiences/overview/) ---
**Author:** ![paul\_wareham](https://avatars.discourse-cdn.com/v4/letter/p/ed8c4c/32.png) [@paul\_wareham](https://forums.losant.com/u/paul_wareham)\ **Post date:** [January 14, 2019, 3:50pm UTC](https://forums.losant.com/t/solved-demo-graphics-technology/1442/3 "2019-01-14T15:50:52Z")
Thanks @anaptfox The video was great. Do you have any boostrap or github repository for the Asset Tracking example or the Smart Office example in the video? ---
**Author:** ![anaptfox](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/anaptfox/32/873_2.png) [@anaptfox](https://forums.losant.com/u/anaptfox)\ **Post date:** [January 14, 2019, 4:25pm UTC](https://forums.losant.com/t/solved-demo-graphics-technology/1442/4 "2019-01-14T16:25:06Z")
At the moment, I don’t think anything is published. I’ll talk with the team to see how we can get some of those examples out there. Are you looking for anything specific? ---
**Author:** ![paul\_wareham](https://avatars.discourse-cdn.com/v4/letter/p/ed8c4c/32.png) [@paul\_wareham](https://forums.losant.com/u/paul_wareham)\ **Post date:** [January 14, 2019, 4:27pm UTC](https://forums.losant.com/t/solved-demo-graphics-technology/1442/5 "2019-01-14T16:27:02Z")
the filtering for the asset tracking is pretty similar to what I had in mind. ---
**Author:** ![Steve\_K](https://avatars.discourse-cdn.com/v4/letter/s/3ec8ea/32.png) [@Steve\_K](https://forums.losant.com/u/Steve_K)\ **Post date:** [January 14, 2019, 5:34pm UTC](https://forums.losant.com/t/solved-demo-graphics-technology/1442/6 "2019-01-14T17:34:47Z")
It would be great to get additional Experience examples published. Brandon’s [earlier example](https://forums.losant.com/t/display-a-list-of-devices-based-on-experience-user-group/946) would be especially handy. I for one have been struggling to get traction with Experiences and demos would be appreciated (a new University session on Experiences would be awesome). Thanks! ---
**Author:** ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)\ **Post date:** [January 17, 2019, 12:16am UTC](https://forums.losant.com/t/solved-demo-graphics-technology/1442/7 "2019-01-17T00:16:40Z")
Just a quick correction to Taron’s post above. The application in that screenshot was created with [ARToolKit](https://github.com/artoolkit/jsartoolkit5) for the marker detection. We’ve since updated the application to utilize [js-aruco](https://github.com/jcmellado/js-aruco) instead, which is built on OpenCV and offers more performant detection using smaller markers. When a marker is detected, is uses the [jquery-sse](https://github.com/byjg/jquery-sse) library to open a streaming connection to the appropriate device’s [state stream](https://docs.losant.com/rest-api/device/#state-stream). Since the graphs required a very specific visual style, they were created directly using [D3](https://d3js.org/). The entire thing is built as a browser application using a bunch of JavaScript and the libraries above. The HTML, CSS, and JavaScript are all hosted in Experience Pages. We use the browser’s [full screen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) to put the web page in full screen after it loaded. Full screen gave the app a nice native feel.