Work Item and Activity screens mostly complete

mobile/src/ARViewer/ARViewer.js

@@ -1,43 +1,72 @@
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet, View, TouchableHighlight, Image } from 'react-native'
 import {
-  ViroARSceneNavigator, ViroARScene, ViroARPlane, ViroBox, ViroText, ViroAmbientLight
+  ViroARSceneNavigator,
+  ViroARScene,
+  ViroARPlane,
+  ViroBox,
+  ViroNode,
+  ViroAmbientLight,
+  ViroSpotLight,
+  Viro3DObject,
+  ViroSurface,
 } from 'react-viro'
 import autobind from 'autobind-decorator'
 import backImage from './images/back.png'
 
 const styles = {
-  helloWorldTextStyle: {
-    fontFamily: 'Arial',
-    fontSize: 30,
-    color: '#ffffff',
-    textAlignVertical: 'center',
-    textAlign: 'center',
-  },
   buttons : {
     height: 80,
     width: 80,
   },
 }
 
+const shapes = {
+  hardhat: { shape: require('./models/hardhat.obj'), materials: [ require('./models/hardhat.mtl') ] },
+  question: { shape: require('./models/question.obj'), materials: [ require('./models/question.mtl') ] },
+  clipboard: { shape: require('./models/question.obj'), materials: [ require('./models/clipboard.mtl') ] },
+}
+
 class WorkItemSceneAR extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      text : "Initializing AR..."
+      position: [0, .2, 0],
+      scale: [.2, .2, .2],
     }
   }
 
   render() {
     return (
-      <ViroARScene onTrackingInitialized={()=>{this.setState({text : "Hello World!"})}}>
+      <ViroARScene>
         <ViroAmbientLight color="#ffffff" intensity={200}/>
-        <ViroText
-          text={this.state.text} scale={[.5, .5, .5]}
-          position={[0, 0, -1]}
-          style={styles.helloWorldTextStyle} />
         <ViroARPlane>
-          <ViroBox position={[0, .5, 0]} />
+          <ViroNode
+            visible={true}
+            position={this.state.position}
+            scale={this.state.scale}
+            key='hardhat'>
+            <ViroSpotLight
+              innerAngle={5}
+              outerAngle={20}
+              direction={[0, -1 ,0]}
+              position={[0, 4, 0]}
+              color="#ffffff"
+              castsShadow={true}
+              shadowNearZ={.1}
+              shadowFarZ={6}
+              shadowOpacity={.9} />
+            <Viro3DObject
+              position={[0, 0, 0]}
+              source={shapes['hardhat'].shape}
+              type = "OBJ" />
+            <ViroSurface
+              rotation={[-90, 0, 0]}
+              position={[0, -.001, 0]}
+              width={2.5} height={2.5}
+              arShadowReceiver={true}
+              ignoreEventHandling={true} />
+          </ViroNode>
         </ViroARPlane>
       </ViroARScene>
     )
@@ -62,7 +91,7 @@ export class ARViewer extends React.Component {
           apiKey='06F37B6A-74DA-4A83-965A-7DE2209A5C46'
           initialScene={{ scene: WorkItemSceneAR }} />
 
-        <View style={{position: 'absolute',  left: 50, right: 0, top: 50}}>
+        <View style={{position: 'absolute',  left: 30, right: 0, top: 50}}>
           <TouchableHighlight style={styles.buttons} onPress={this._handlePress} underlayColor={'#00000000'} >
             <Image source={backImage} />
           </TouchableHighlight>

mobile/src/ARViewer/models/clipboard.mtl

@@ -0,0 +1,22 @@
+# Blender MTL File: 'clipboard.blend'
+# Material Count: 2
+
+newmtl board
+Ns 498.039216
+Ka 0.000000 0.000000 0.000000
+Kd 0.142866 0.055360 0.026186
+Ks 0.500000 0.500000 0.500000
+Ke 0.000000 0.000000 0.000000
+Ni 1.000000
+d 1.000000
+illum 3
+
+newmtl metal_shiny
+Ns 400.000000
+Ka 0.000000 0.000000 0.000000
+Kd 0.302552 0.302552 0.302552
+Ks 1.000000 1.000000 1.000000
+Ke 0.000000 0.000000 0.000000
+Ni 1.000000
+d 1.000000
+illum 3

mobile/src/ARViewer/models/hardhat.mtl

@@ -0,0 +1,12 @@
+# Blender MTL File: 'hardhat.blend'
+# Material Count: 1
+
+newmtl Material
+Ns 96.078431
+Ka 1.000000 1.000000 1.000000
+Kd 0.640000 0.628157 0.012959
+Ks 0.500000 0.500000 0.500000
+Ke 0.000000 0.000000 0.000000
+Ni 1.000000
+d 1.000000
+illum 2

mobile/src/ARViewer/models/question.mtl

@@ -0,0 +1,12 @@
+# Blender MTL File: 'question.blend'
+# Material Count: 1
+
+newmtl Yellow
+Ns 237.254902
+Ka 1.000000 1.000000 1.000000
+Kd 0.649412 0.563220 0.009454
+Ks 0.196078 0.184390 0.009218
+Ke 0.000000 0.000000 0.000000
+Ni 1.000000
+d 1.000000
+illum 2