Merge pull request #9 from EarthlingInteractive/improve-tutorial

Improve tutorial

src/button.js

@@ -93,6 +93,7 @@ AFRAME.registerComponent('button', {
         this.button.setAttribute('text', 'value', this.data.value);
         this.button.setAttribute('text', 'color', this.data.textColor);
         this.button.setAttribute('text', 'wrapCount', this.data.textWrapCount);
+        this.button.setAttribute('text', 'zOffset', 0.005);
 
         if (!this.buttonBorder) {
             this.buttonBorder = document.createElement('a-plane');

src/index.html

@@ -108,29 +108,28 @@
         <a-plane height="5" width="10" material="visible: false;" class="selectable"></a-plane>
     </a-entity>
 
-    <a-entity id="tutorial" position="0 1.6 -1" tutorial>
+    <a-entity id="tutorial" position="0 2 -4.8" tutorial>
         <a-entity tutorial-step="dur: 3000; textvalue: Welcome to ElectionVR"></a-entity>
         <a-entity tutorial-step="dur: 3000; textvalue: Created by Earthling Interactive"></a-entity>
         <a-entity tutorial-step="dur: 3000; textvalue: Explore US election data in virtual reality."></a-entity>
-        <a-entity tutorial-step="offset: 0 0.2 -1; triggerEvent: year-changed; controllerTypes: gaze, desktop; textvalue: To select something, move the cursor over it and gaze for 1 second. Try selecting a year button."></a-entity>
-        <a-entity tutorial-step="triggerEvent: year-changed; controllerTypes: singlePointer, doublePointer; textvalue: To select something, point the laser at it and pull the trigger button. Try selecting a year button."></a-entity>
-        <a-entity tutorial-step="dur: 2000; textvalue: Good. Now look around."></a-entity>
-        <a-entity tutorial-step="dur: 3000; controllerTypes: desktop; textvalue: Use the w-a-s-d keys to move around."></a-entity>
-        <a-entity tutorial-step="dur: 3000; textvalue: Voting data for the candidates are shown using the 3D shapes of each state."></a-entity>
-        <a-entity tutorial-step="dur: 3000; textvalue: The color shows the party of the candidate."></a-entity>
-        <a-entity tutorial-step="dur: 3000; textvalue: The height shows the number of votes."></a-entity>
-        <a-entity tutorial-step="dur: 4000; textvalue: The width shows the percentage of the vote that the candidate received."></a-entity>
+        <a-entity tutorial-step="controllerTypes: gaze, desktop; textvalue: To select something, move the cursor over it and gaze for 1 second. Try selecting the Next Step button."></a-entity>
+        <a-entity tutorial-step="controllerTypes: singlePointer, doublePointer; textvalue: To select something, point the laser at it and pull the trigger button. Try selecting the Next Step button."></a-entity>
+        <a-entity tutorial-step="dur: 2000; textvalue: Good."></a-entity>
+        <a-entity tutorial-step="controllerTypes: desktop; textvalue: Use the w-a-s-d keys to move around."></a-entity>
+        <a-entity tutorial-step="textvalue: Voting data for the candidates are shown using the 3D shapes of each state."></a-entity>
+        <a-entity tutorial-step="textvalue: The color shows the party of the candidate."></a-entity>
+        <a-entity tutorial-step="textvalue: The height shows the number of votes."></a-entity>
+        <a-entity tutorial-step="textvalue: The width shows the percentage of the vote that the candidate received."></a-entity>
         <a-entity tutorial-step="controllerTypes: singlePointer, doublePointer; triggerEvent: target-selected; textvalue: To see detailed voting information, point the laser at a shape and click the trigger. Try selecting a shape now."></a-entity>
-        <a-entity tutorial-step="offset: 0 0.2 -1; controllerTypes: gaze, desktop; triggerEvent: target-selected; textvalue: To see detailed voting information, move the cursor over a shape and gaze for 1 second. Try selecting a shape now."></a-entity>
+        <a-entity tutorial-step="controllerTypes: gaze, desktop; triggerEvent: target-selected; textvalue: To see detailed voting information, move the cursor over a shape and gaze for 1 second. Try selecting a shape now."></a-entity>
+        <a-entity tutorial-step="dur: 2000; textvalue: Good."></a-entity>
+        <a-entity tutorial-step="textvalue: If 2 shapes are the same width, then the vote was very close."></a-entity>
+        <a-entity tutorial-step="textvalue: The winning candidate&apos;s shape is the one at the bottom."></a-entity>
+        <a-entity tutorial-step="triggerEvent: year-changed; offset: 0 1 0; textvalue: You can change the election year data you&apos;re looking at. Try selecting a different Year button now."></a-entity>
         <a-entity tutorial-step="dur: 2000; textvalue: Good."></a-entity>
-        <a-entity tutorial-step="dur: 4000; textvalue: If 2 shapes are the same width, then the vote was very close."></a-entity>
-        <a-entity tutorial-step="dur: 4000; textvalue: The winning candidate&apos;s shape is the one at the bottom."></a-entity>
-        <a-entity tutorial-step="triggerEvent: stretch-end; controllerTypes: doublePointer; textvalue: To change the size of the map, hold down the trigger buttons on both controllers at the same time and move your hands apart or together."></a-entity>
-        <a-entity tutorial-step="dur: 2000; controllerTypes: doublePointer; textvalue: Good."></a-entity>
-        <a-entity tutorial-step="triggerEvent: drag-end; controllerTypes: singlePointer, doublePointer; textvalue: To move the map around, point at the map, hold down the grip button on one controller and move your hand."></a-entity>
-        <a-entity tutorial-step="dur: 2000; controllerTypes: singlePointer, doublePointer; textvalue: Good."></a-entity>
-        <a-entity tutorial-step="triggerEvent: stretch-end; controllerTypes: doublePointer; textvalue: To move and scale the map at the same time, hold down the grip buttons on both controllers at the same time and move your hands."></a-entity>
-        <a-entity tutorial-step="dur: 2000; controllerTypes: doublePointer; textvalue: Good."></a-entity>
+        <a-entity tutorial-step="controllerTypes: doublePointer; textvalue: To change the size of the map, point at the map with both controllers, hold down the trigger buttons at the same time, and move your hands apart or together."></a-entity>
+        <a-entity tutorial-step="controllerTypes: singlePointer, doublePointer; textvalue: To move the map around, point at the map with one controller, hold down the grip button, and move your hand."></a-entity>
+        <a-entity tutorial-step="controllerTypes: doublePointer; textvalue: To move and scale the map at the same time, point at the map with both controllers, hold down the grip buttons on both, and move your hands."></a-entity>
         <!--<a-entity tutorial-step="offset: 0 0.2 -1; controllerTypes: doublePointer; triggerEvent: reset-view; textvalue: To reset the map size and position, press the menu button on either controller."></a-entity>-->
         <a-entity tutorial-step="dur: 3000; textvalue: Voting data is from the Federal Election Commission."></a-entity>
         <a-entity tutorial-step="dur: 3000; textvalue: The US map data is from the US Census Bureau."></a-entity>

src/text-panel.js

@@ -16,14 +16,16 @@ AFRAME.registerPrimitive('a-text-panel', {
         },
         text: {
             color: 'white',
-            align: 'left',
-            wrapCount: 20
+            align: 'center',
+            wrapCount: 32,
+            zOffset: 0.005
         }
     },
 
     mappings: {
         primitive: 'geometry.primitive',
         width: 'geometry.width',
+        height: 'geometry.height',
         textcolor: 'text.color',
         textalign: 'text.align',
         textwrapcount: 'text.wrapCount',

src/tutorial-step.js

@@ -15,11 +15,11 @@ AFRAME.registerComponent('tutorial-step', {
         },
         anchor: {
             type: 'selector',
-            default: 'a-camera'
+            default: '[tutorial]'
         },
         offset: {
             type: 'vec3',
-            default: { x: 0, y: 0, z: -1 }
+            default: { x: 0, y: 0, z: 0 }
         },
         textvalue: {
             type: 'string'
@@ -32,6 +32,8 @@ AFRAME.registerComponent('tutorial-step', {
         this.stepEl.object3D.visible = false;
         this.stepEl.setAttribute('opacity', 0);
         this.stepEl.setAttribute('textopacity', 0);
+        this.stepEl.setAttribute('height', 2);
+        this.stepEl.setAttribute('width', 4);
         const fadeinProps = {
             dur: 400,
             easing: 'linear',

src/tutorial.js

@@ -47,26 +47,36 @@ AFRAME.registerComponent('tutorial', {
     },
 
     transition(prevStep, nextStep) {
-        if (prevStep !== undefined && prevStep >= 0 && this.tutorialSteps[prevStep]) {
-            this.tutorialSteps[prevStep].components['tutorial-step'].hide();
+        if (this.hasStep(prevStep)) {
+            this.getStep(prevStep).hide();
         }
-        if (nextStep < this.tutorialSteps.length && this.tutorialSteps[nextStep]) {
-            this.tutorialSteps[nextStep].components['tutorial-step'].show();
+        if (this.hasStep(nextStep)) {
+            this.getStep(nextStep).show();
         }
         if (!this.tutorialSteps[nextStep]) {
             this.handleStopTutorial();
         }
     },
 
+    getStep(index) {
+        return this.tutorialSteps[index].components['tutorial-step'];
+    },
+
+    hasStep(index) {
+        return (index !== undefined && index >= 0 && this.tutorialSteps[index]);
+    },
+
     handleStartTutorial() {
         this.startTutorialButton.setAttribute('visible', false);
+        this.startTutorialButton.setAttribute('position', '-5 -0.5 -1');
         this.nextStepButton.setAttribute('visible', true);
         this.stopTutorialButton.setAttribute('visible', true);
         this.el.setAttribute('tutorial', 'currentStep', 0);
     },
 
     handleStopTutorial() {
         this.startTutorialButton.setAttribute('visible', true);
+        this.startTutorialButton.setAttribute('position', '0 -1.25 0.01');
         this.nextStepButton.setAttribute('visible', false);
         this.stopTutorialButton.setAttribute('visible', false);
         this.el.setAttribute('tutorial', 'currentStep', -1);