Risk Literacy/Real World Labs/web-based Exploration
With this learning resource you will be able to create web-based exploration platform for a Real World Lab. This approach combines a
- geographical map to show were the Real World Lab is located and
- image map that add clickable areas on an image with other web content and
- VR environments in AFrame for web-based exploration even with a VR headset.
This approach can replace the augmented reality approach with Mixare or AR.js that provides augmented reality in the browser.
360o Panorama and VR environmentsEdit
Explore a option virtual reality environment which can be explored with a browser, VR headset or mobile device with e.g. Card Board.
Explain the options to improve risk literacy with a 3D environment and visualized invisible risks with exposure of users to risky situations physically. Design the VR environment as an exploratory learning resource with ToDos for the user (see also gamification and serious games).
- (Learner's Geolocation on Map) Learn about geolocation aware browser applications by checking the OpenLayers Example for Geolocation and press of the button "track position". This retrieve the geolocation of GPS or estimates geolocation by IP-address of browser.
- (Create your first web-based Map) Learn to create your first map on your computer.
- Install an OpenSource Editor Copy and Paste the code below the OpenLayers Example into the Atom-Editor and save the file. Browse your local file in your Webbrowser (e.g. Firefox, Chromium, Chrome, ...)
- Center the map over your Real World Map and select an appropriate zoom factor for your map in OpenLayers
- Explore the Image Map features and the requirments and constraints for learners with the following examples
- Image Map Example on Wikipedia - click on single person in painting on the right.
- You can create an Image Map in LibreOffice or GIMP. See Youtube Video for GIMP or you can try the Online image editor.
- Create ImageMaps with webbased tool ImgMap, that does
- Select images for your Real World Lab (e.g. the image on the right with the river Queich) and create an image map that informs about the objects seen on the image (e.g. the water wheel or the river). The ImageMap editor will defined clickable areas on the image. Users explore the Real World Lab just by the web browser by selecting the river bed, or a building. By clicking on the river or the building the user can select further details of river or the building (view inside the building).
- Use the following URL in the Online Image Map by Dario D. Müller (2017)
- Mark the water wheel and create a reference to an online resource in Wikipedia, that explains this type of old technology.
- Try other types of links that make a reference objects see on the image, e.g. a geographical map with a marker, that shows where the image was taken, or any other web-based resouce including quizzes, YouTube Videos, ...
- For further details see GIMP Image Maps in Wikiversity.
3D Panorama VideosEdit
The OpenSource Library Valiant360 is a 360 degree panoramic video player.
- Look around (drag view) in top video on Valiant360 Website on GitHub
- As video source you need an equirectangular video (see example on Youtube)
- Exxplore an artifical 3D world with and panorama video (see also 3D Modelling)
- Explore Hardware Setup with 4 Cameras and explain why you need 4 cameras and an overlap of camera images!
- Explain the decomposition of video into single frame (e.g. 25 frames per second) and how a single webbased 360o Image to explore the environment!
- Explore the device sensors of mobile device. Explain how these sensors can be used look around in a 3D video just by turning and moving the device.
- Explain how a geolocation at a mobile device can be used to add 360o to place yourself in 360o video refers to the current geolocation your are currently. View a flood event from previous years, so that the learner will be able to understand, what the impact will be for the current geolocation of the Real World Lab and learn and do something to make place a bit save (see Risk Awareness and Response to the perceived risk)
Integration of ApproachesEdit
The following learning task we will integrate digital maps with OpenLayers with Markers with 3D scenes in Aframe. Furthermore with will link an image map with wikipedia article for further information about the displayed people or objects in the images.
- (OpenLayers Map ) Create an OpenLayers Map with Markers4Map that contain markers for a certain geolocation.
- OpenLayers Map with Wikipedia Content
- OpenLayer Map with 360o Panorama Image linked in Marker/Icon popup.
- (360o Image -Panorama) Create a webbased Image for that geolocation on Github with AFrame. Link in Wikiversity Source of this article is generated with Markers4Map by pressing the Display-Map-Button and copy the link in the browser URL.
- (Image Map) Create ImageMap with and image of the geolocation on the map and reference objects on the image to corresponding Wikipedia or Wikiversity articles that explain the purpose or background of the object.
- Markers4Map - OpenSource GitHub Tool to create an URL that encodes the geolocation of markers with their pop-ups for OpenStreetMap in OpenLayers
- OpenLayers Display Markers - OpenSource GitHub Tool takes a JSON file as input via URL to display geo-encoded markers with pop-ups for OpenStreetMap Maps in OpenLayers
- LibreOffice Image Maps
- W3 Schools example of Image Maps
- Geolocation in OpenLayers, With one click you can determine the geo-position on the map.
- Tracking and Simulate a Path in the Real World Lab.
- Online Image Map Generator - AppLSAC Tool Example for Wikiversity
- Create Image Maps with GIMP
- ↑ Allen, R. (1998). The Web: interactive and multimedia education. Computer Networks and ISDN Systems, 30(16), 1717-1727.
- ↑ ImgMap - Webbased OpenSource Tool for creating ImageMap for Wikiversity (accessed 2017/10/24) - https://niebert.github.io/imgmap - Download; https://www.github.com/niebert/imgmap (Offline use of ImageMap Editor)
- ↑ Valiant360 Github Repository of 360 degree panoramic video player (accessed 2017/09/12) - https://flimshaw.github.io/Valiant360/
- ↑ Example of Equirectangular Video on Youtube by (accessed 2017/10/19) - https://www.youtube.com/watch?v=US6IZ2vuLVk
- ↑ Doyle, S., Dodge, M., & Smith, A. (1998). The potential of web-based mapping and virtual reality technologies for modelling urban environments. Computers, Environment and Urban Systems, 22(2), 137-155.
- ↑ Markers4Map - Webbased HTML5 OpenSource tool with Browser storage of JSON file by application of LocalStorage (2017) - accessed 2017/10/24 - https://niebert.github.io/Markers4Map - Source Code Github: https://www.github.com/niebert/Markers4Map