html5 and kineticjs based web-client for pa system
DESCRIPTION
HTML5 and KineticJS Based Web-Client for PA System. TEAM 3 - K. Plataniotis , M. Mnitsakanyan , M. Mehrafrouz , S. Yildirim. Contents. Challenges Target Frameworks KineticJS 3D research Design Responsiveness Test Demo Lessons learned Future work. Challenges. - PowerPoint PPT PresentationTRANSCRIPT
TEAM 3 - K. Plataniotis , M. Mnitsakanyan , M. Mehrafrouz , S. Yildirim
HTML5 and KineticJS Based Web-Client for PA System
Contents•Challenges •Target• Frameworks
– KineticJS– 3D research
• Design• Responsiveness Test• Demo• Lessons learned• Future work
Challenges • Scalability Definition– Screen Size– Platform • Device size• Operating System• Browser
– User Experience• Same user feeling with the application• Similar template for various devices
Target• PC 24” (Windows 7)
– Chrome , Firefox, Safari• Tablet ASUS 10” (Android)
– Chrome, Firefox• Tablet IPAD 10” (iOS)
– Safari, Chrome• Mobile 3”-4.5” (Android)
– Mini Opera• Mobile iPhone 3.5” (iOS)
– Safari
Frameworks• KineticJS• HTML5 Canvas• CSS• JQuery• WebRTC
KineticJS•HTML5 Canvas based JavaScript library•Canvas interactivity for desktop and mobile applications•Object Oriented API•Multiple layers to improve rendering performance•Ready to use and custom shapes•Transition and animation support•Drag and drop
3D Research•WebGL (Web-based Graphics Library)
–Lack of browser support–Slow performance –Scalability requirement is not fulfilled–No added value on the current project–Trades off between performance and user experience
3D Research •Three.js– HTML5 3D Library
•Models–3D models software–Google 3D Warehouse
•3d models library that contains real airport models
Design1. User interface2. Navigation to different floors/zones/main
building3. Notifications to the user4. User scenarios
Design1. User interface– Three separate tabs for main actions• Calls, Monitoring, BGM
– Bigger screen size for every action– Different interaction/representation for each
action
Design
Design
Design2. Navigation to different floors/zones/main
building–User interaction on maps•Mouse or touch
–Events•Click on buttons to zoom / navigate / select zone•Drag map•Zoom with multi-touch and mouse-wheel
Design3. Notifications– Color– Opacity– Animation– Text messages on html elements and Kinetic Stage (canvas)
4. User scenarios– Predefined calls– Live calls– Zone monitoring– BGM channel control
Responsiveness Test• Less than 250ms is acceptable
Device PC Tablet
Time ~ 212 ms ~ 70ms
Demo
Lessons learned• Hard to find generic solution for different combinations• KineticJS
– Advantages• Visualization of huge numbers of shapes/objects • Interaction with any of the shapes• Easy to learn and implement
– Disadvantages• HTML5 canvas is pixel based• Alternative technology (SVG based RaphaelJS library)
• Browser based 3D rendering is promising(e.g: WebGL, MapsGL)– not widely supported
Future work• Additional notifications for the user interaction
(animation, sound, vibration)• Appearance can be improved (e.g.: buttons, radio
buttons)• Using KineticJS library for full application• Customized setting for each user after login• Use of WebRTC maybe is not the best option for
this project• Keyboard Interaction
Sourceshttp://kineticjs.com/http://threejs.org/https://github.com/mrdoob/three.js/ http://www.chromeexperiments.com/detail/mapsgl/