TETRA HTML5. Gebruikersgroepvergadering 25 februari 2014, Hasselt

TETRA HTML5 Gebruikersgroepvergadering 25 februari 2014, Hasselt

Agenda Pilootcase Yappa - Showroomr 3D CMS Phonegap / JQM ervaringen Verspreiding technologie Varia Planning

Pilootcase Yappa - probleemstelling Initieel: visualisatie grondplan (winkel, ) Grondplan: dynamisch aanpasbaar Aanvulbaar met extra info: video, tekst, Hulplijn => verkoper vragen Locatie opvragen / delen Indoor locatiebepaling

Pilootcase Yappa - probleemstelling Probleemstelling werd verbreed Meer generieke oplossing Toepasbaar op o.a. Kristalpark Lommel 3 cases Gebouw (kantorencomplex, school / universiteit, shoppingcentrum) Winkel / magazijn / Ruimtelijk gebied (buurt, industrieterrein, natuurgebied, )

Pilootcase Yappa - Analyse Communicatie met back-end / alles lokaal / offline modus met synchronisatie (Indoor) Locatiebepaling ibeacon / Estimote QR code Experimentele opties (Indoor Atlas) Grafische aspecten => niet de focus Mobile aspect => responsive design?

Pilootcase Yappa Locatiebepaling in de winkel Eerste versie Kaartje QR-codes om locatie aan te geven => scanner app Resultaten met magnetisch veld waren niet naar wens

Pilootcase Yappa - Showroomr Data wordt momenteel ontsloten via back-end communicatie Responsive design aan front-end kant Embedded in Android project voor integratie QR-code scanner

Pilootcase Yappa - Showroomr Bovenop kaart van de winkel, die kan geüpload worden => grid Wordt gebruikt om obstakels aan te geven, deze kunnen bovenop de kaart getekend worden Routebepaling Generiek genoeg voor gebouw, terrein, Uitdaging met meerdere verdiepingen http://qiao.github.io/pathfinding.js/visual/

Pilootcase Yappa - Showroomr Volgende stappen: Clickable hotspots => audio, video,... 3D content => work in progress Andere mogelijkheden voor locatiebepaling: ibeacon, Estimote, NFC, Voor- en nadelen app versus puur html5 Bv. nood QR code scanner

Pilootcase Yappa - afbeeldingen

3D CMS Administrator kan 3D scene opstellen Editor in browser Opslag in centrale database Gebruikers kunnen 3D scene verkennen Interactie met 3D wereld: Tekst Foto s Webpagina s Animaties?

3D CMS - doel Zaalplan voor beurzen Grondplan voor evenementen (festivals, ) Interieur winkel/magazijn Grondplan industriële site Focus op herbruikbaarheid

3D CMS - admin functionaliteit Overzicht beschikbare assets Toevoegen 3D model, material, texture aan database Invoegen aan scene 3d model Lichtbron Startpunt voor user

3D CMS - admin functionaliteit Verplaatsen objecten in scene (positie, rotatie, scale) 3D model in scene aanpassen: Material (diffuse, specular, emission, ) en texture Collider Zichtbaarbaar Shadow caster Behavior (klikbaar, animatie, )

3D CMS - user functionaliteit Bezoek scene via hyperlink Kiezen viewpoint Bird s eye First person Camera Rondwandelen Interactie met objecten Klikken op object Pathfinding?

3D CMS - back-end (werkversie): PHP (CodeIgniter RESTful server), MySQL

3D CMS - back-end

3D CMS - front-end Babylon Js Uitgebreide render engine Collision detection ingebouwd Géén Wavefront obj ondersteuning (enkel via exporter programma) Babylon formaat >> Client side obj importer ontwikkelen

Babylon JS Game engine? <> render engine >> enkel renderen van objecten Meerdere componenten: Render engine Physics engine (of collision detection) Scripting Animation Sound

Babylon JS WebGL 3d game engine Open source, Apache Licence 2.0 Scene graph met camera s, meshes, materials, textures en lichten Collision engine Animation engine Particle system http://www.babylonjs.com/

Babylon JS - demo //get canvas var canvas = document.getelementbyid("babyloncanvas"); //Babylon var engine = new BABYLON.Engine(canvas, true); //scene var scene = new BABYLON.Scene(engine);

Babylon JS - demo //camera var camera = new BABYLON.ArcRotateCamera("camera", 1, 0.8, 10, new BABYLON. Vector3(0, 0, 0), scene); scene.activecamera.attachcontrol(canvas); //light var light = new BABYLON.DirectionalLight("light", new BABYLON.Vector3(-0.75, -1, -0.5), scene);

Babylon JS - demo //add box var box = BABYLON.Mesh.CreateBox("box", 3.0, scene); var material = new BABYLON.StandardMaterial( material1", scene); box.material = material;

Babylon JS - demo // Once the scene is loaded, just register a render loop to render it engine.runrenderloop(function () { scene.render(); });

Babylon JS - demo Resultaat demo

Babylon JS - physics Collisions? Wanneer raken twee objecten mekaar? scene.collisionsenabled = true; box.checkcollisions = true; Zwaartekracht? Voorlopig enkel op camera camera.applygravity = true; Demo

Babylon JS - demo Picking Object uit de scene selecteren Muis >> raycast in 3d >> object var pickresult = scene.pick(evt.clientx, evt.clienty); Demo

Babylon JS - 3d CMS WIP Demo

Phonegap / JQM ervaringen HTML5 app jquery Mobile jquery Mobile router Backbone js Apache Cordova

Phonegap / JQM ervaringen Develop once? Plugins nodig? Device InAppBrowser UrbanAirship (notifications) Beschikbaarheid per platform Installatie per platform

Phonegap / JQM ervaringen Develop once? Ja, voor basis maar met plugins pet platform en custom code en configuratie per platform

Phonegap / JQM ervaringen Performance? JQM problematisch op low end devices optimalisaties (transitions, gradients, shadows, ) Native feel moeilijk te evenaren

Verspreiding technologie Cegeka Knowledge Sharing Meeting Research Dag PXL FeWeb on tour CoderDojo Belgium Opleidingsonderdeel Special Topics in IT 2

Cegeka Knowledge Sharing Meeting 5 november 2013 Strategische samenwerking Cegeka - Hogeschool PXL Uitwisseling ervaringen en expertise Cegeka werknemers Toelichting project + partners voor de aanwezigen Nieuwe features HTML5 10-tal collega s PXL was eveneens aanwezig

Research Dag PXL 15 november 2013 Interne onderzoeksdag Postersessie Poster HTML5 werd uitgebreid toegelicht voor de aanwezigen, waaronder Vlaams Minister van Innovatie, mevrouw Ingrid Lieten

FeWeb on Tour Beroepsfederatie internetprofessionals Jaarlijkse ronde PXL-IT Research werd via 10-tal slides voorgesteld Lopende projecten, waaronder HTML5, werden in detail voorgesteld, samen met partners en doelstellingen.

CoderDojo Hasselt PXL UHasselt HTML groepje Melding project en partners

Opleidingsonderdeel Special Topics in IT2 Studenten 3e jaar applicatie-ontwikkeling Enkele relevante, recente topics 9 weken, HTML5, CSS3, JavaScript 3 weken: focus op Canvas element Project Alle studenten hebben hierdoor kennis van HTML5 technologie

Varia PWO project Windows 8 Business Apps Focus op modern UI guidelines / apps in business context Performantietesten die reeds zijn uitgevoerd => herhalen in de context van Windows 8? Zijn er andere items die jullie eventueel aan bod willen zien komen?

Planning Pilootcase Yappa / Stad Lommel Verdere uitwerking Integratie aspecten locatiebepaling Generalisatie 3D CMS ontwikkeling Stage