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
Pilootcase Yappa - afbeeldingen
Agenda ● Pilootcase Yappa - Showroomr
● 3D CMS ● Phonegap / JQM ervaringen ● Verspreiding technologie ● Varia ● Planning
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
Agenda ● Pilootcase Yappa - Showroomr ● 3D CMS
● Phonegap / JQM ervaringen ● Verspreiding technologie ● Varia ● Planning
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
Agenda ● Pilootcase Yappa - Showroomr ● 3D CMS ● Phonegap / JQM ervaringen
● Verspreiding technologie ● Varia ● Planning
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
Agenda ● Pilootcase Yappa - Showroomr ● 3D CMS ● Phonegap / JQM ervaringen ● Verspreiding technologie
● Varia ● Planning
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?
Agenda ● Pilootcase Yappa - Showroomr ● 3D CMS ● Phonegap / JQM ervaringen ● Verspreiding technologie ● Varia
● Planning
Planning ● Pilootcase Yappa / Stad Lommel ○ Verdere uitwerking ○ Integratie aspecten locatiebepaling ○ Generalisatie ● 3D CMS ontwikkeling ● Stage
