Test

DrDavidBell @drdjbell david.bell@brunel.ac.ukAn Introduction to Mobile Development: Forms to VR

TodayShort Talk (15-30 mins) before:JQuery Mobile Taster (30 mins)Break (15 mins)A-Frame Virtual Reality Taster (30 mins)Design Lab (30 mins)

Research Art & Social Media

https://www.youtube.com/watch?v=fcM1TIJFu6Q&feature=youtu.be AR

Public interaction with art and architecture, data derived personas and journeys, behavioural simulation.

Research Museum (AR)

Future

Who has done some mobile development?Apple - XCodeGoogle AndroidMobile WebApp InventorPhoneGap

Who has entered virtual or augmented reality?Oculus Rift Sony Playstation VRSamsung Gear VRHTC ViveGoogle CardboardGoogle Daydream

Mobile Web - FormsJQuery Mobilehttp://demos.jquerymobile.com/1.4.5/forms/

Mobile Web - VRA-Frame toolkithttp://aframe.io

VR

Hyper Reality

VR Software DesignInheritanceCompositionSpaceShipFlyingSaucerSpaceFlyingSaucer

Tag based extensionsTraditional code:aMethod(param1, param2)e.g. int sum=add(1,2)Tag code:

e.g. Tag code better support composition

LAB TIME SJ123

JQuery Mobile

Lab 1 JQuery Mobile FormCreate a mobile phone interface that allows you to store:Location (Text)Visit Type (Drop down: School, Family, Other)Date (Text)Description (String)Rating (Slider: Numeric 0-100)

Lab 1 JQuery Mobile FormUse W3Schools (JQuery Tutorial)Read Forms sectionAdapt one code exampleSave your code for later

Lab 1 Examples

In Chrome:w3schools.com/jquerymobile

Starting Webserver: LoginLogin with username and passwordDownload directory structure STEP 1Start Run \\UxisShare\MasterClass Copy Aframe-master directory into DownloadsdirectoryStart a web local web server STEP 2Open explorer WIN EGo to DownloadsRun server.bat

Now for some Virtual Reality (VR)Open localhost:8000 in a browser (Chrome)Physical virtualSpace and time travel (portals)

https://www.youtube.com/watch?v=pEo70oTlY1w

Browser localhost:8000 should look like this

Now for VRRun One test in Boilerplates

Now for VRMove to directory aframe-master\examples\boilerplate\oneOpen index.html (in Notepad++)Open a browser localhost:8000

Now for Mars TravelChange the code to access the Mars image (open index.html in directory one)

Adding a Mars skyChange titleChange image to mars.jpegRun in a Chrome browser

Adding an AlienChange titleChange image to mars.jpegRun in a browser or VR headset

A-Image

A-Image

Add a flying saucerSaucer.png is in the directory oneAdd the saucer in the sky

Code Walkthrough

Portal in time and spaceNow look in directory twoOpen in a Browser or VR headset

Portal in time and spaceChange the colour of the sphereChange the size of the sphereChange the museum to a scene of your choice

Design an experienceIn groups (4-5)Scenarios (images/videos):Entering a museumWalking around Maiden CastleView the London SkylineWalking around a volcano RED PEN: Title of VR experienceGREEN PEN: Additional Imagery, SoundsBLUE PEN: Portals

Choice:- Physical augmented reality- Remote Virtual Reality

Designing an experienceIn groups (4-5)Scenarios (images/videos):Entering a museumWalking around Maiden CastleView the London SkylineWalking around a volcano RED PEN: Title of VR experienceGREEN PEN: Additional Imagery, SoundsBLUE PEN: Portals