loading

Start exploring to learn more about me and my passion for technology in education
learn more

Category: 360 Video

A category for all things 360 including video and stills

Adding 360 AR to Storyline 360

julian.davis360 Video, eLearning, eLearning Tools

My new role has allowed me to venture past Captivate and enter the world of Articulate 360 and in particular, Storyline. I’m enjoying the change and have to say, Storyline is miles ahead of Captivate. I wanted to demonstrate (as well as figure out) how 360 AR can be added to Storyline, and turns out it’s fairly simple.  Using the project I created using Marzipano here as the basis for 360, it’s as simple as inserting a new Web Object. From the Browse button navigate to the folder of the files downloaded from the Marzipano online tool OR enter the address of the Marzipano files that you may have on a server somewhere. View the Storyline course below or click to view in a new tab

Connecting Marzipano to xAPI – Part One

julian.davis360 Video, eLearning, eLearning Tools, Learning Analytics, xAPI

Having written a couple of articles on Marzipano that continue to gain attention in Google searches including Marzipano 360 how to change hotspot properties and styles, Marking up 360 images making WHS more engaging and How to use 360 images with Marzipano and Insta360 I wanted to take things to the next level in eLearning and find out what it is the user is doing. I’m currently involved in the xAPIChort and had also read an article Mel Milloway on incorporating xAPI into 360 images. This got me thinking as to how it can be setup in Marzipano and feed xAPI Statements back to an LRS. Prior warning here, you’ll need to know a little bit about JavaScript as you need to modify the resulting JavaScript file that is made from the package, but if you follow this tutorial, you may work it out! I used the Marzipano tool to generate a multi page interactive VR of the MONA Museum located in Hobart Tasmania back in 2016. I’m going to use this small project as a base for incorporating xAPI. This is part one, introducing you to the concepts and capturing an Info Hotspot. The follow up parts will look at capturing more info and passing to the Learning Record Store (LRS). 1. Setting Up the Project Files The first thing you need to do is expand the Marzipano package to a folder, you’ll end up with a folder structure similar to the image below: You will also need to download an xAPI wrapper. This is the library that will do […]

Marzipano 360 how to change hotspot properties and styles

julian.davis360 Video, Apps, eLearning

Recently I was asked about changing the hotspot properties of a Marzipano 360 project. This article will extend on How to use 360 images with Marzipano and Insta360. Unfortunately, there is no interface to change the styles of the hotspot, so you’ll need to know a little bit about CSS. For a simple free HTML / CSS editor, checkout Brackets. With your project completed and exported, we want to edit the file called style.css. As I’m using brackets, search for hotspot. This will reveal all the classes that are linked to all hotspots. You are looking for anything with the word background-color: or background: The value after will be a rgb() or rgba() value. These represent a Red Green Blue colour up to the value of 256. Where it is rgba, the a represents the alpha component of the colour. So, for example lets look at changing the default grey colour to a vibrant green. The first thing you want to do is locate you new colour value. A great place to start is https://www.w3schools.com/colors/colors_picker.asp where you can select the colour you want. In this case, I will use rgb(51, 204, 51). Here is a screen shot of the original for reference. Back to your CSS. You need to update background colours with the colour of choice with the following CSS classes: .info-hotspot .info-hotspot-header .info-hotspot .info-hotspot-text .info-hotspot .info-hotspot-close-wrapper Save your CSS file and review the results.   Why not have a play with other colours, in the CSS. Don’t forget the semi-colon at the end of the lines!