TETRA HTML5. Gebruikersgroepvergadering 25 februari 2014, Hasselt

Transcriptie

1 TETRA HTML5 Gebruikersgroepvergadering 25 februari 2014, Hasselt

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

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

4 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, )

5 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?

6 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

7 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

8 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

9 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

10 Pilootcase Yappa - afbeeldingen

11 Pilootcase Yappa - afbeeldingen

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

13 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?

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

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

16 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, )

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

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

19 3D CMS - back-end

20 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

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

22 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

23 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);

24 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);

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

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

27 Babylon JS - demo Resultaat demo

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

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

30 Babylon JS - 3d CMS WIP Demo

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

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

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

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

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

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

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

38 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

39 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

40 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.

41 CoderDojo Hasselt PXL UHasselt HTML groepje Melding project en partners

42 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

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

44 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?

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

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