Software for the EZ-RASSOR Paver Arm

controller/App.js

@@ -1,11 +1,26 @@
 import React from 'react';
-import ControllerScreen from 'ezrassor-app/src/components/app/ControllerScreen'
+import ControllerScreen from './src/components/app/ControllerScreen.js';
+import RoboticArmScreen from './src/components/app/RoboticArmScreen.js';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-export default class App extends React.Component {
+const Stack = createNativeStackNavigator();
 
+export default class App extends React.Component {
   render() {
     return(
-      <ControllerScreen />
-    )
-  } 
-} 
+      <NavigationContainer>
+      <Stack.Navigator
+      screenOptions={{
+        headerShown: false
+      }}
+       >
+        <Stack.Screen name="Controller" component={ControllerScreen}/>
+        <Stack.Screen name="Arm" component={RoboticArmScreen} />
+      </Stack.Navigator>
+     </NavigationContainer>
+      // <ControllerScreen/>
+      // <RoboticArmScreen/> */}
+    );
+  }
+}

controller/package.json

@@ -1,21 +1,29 @@
 {
-  "name": "ezrassor-app",
   "main": "node_modules/expo/AppEntry.js",
-  "private": true,
+  "name": "ezrassor-app",
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
+    "web": "expo start --web",
     "eject": "expo eject"
   },
   "dependencies": {
-    "expo": "^34.0.3",
-    "expo-font": "^6.0.1",
-    "react": "16.8.3",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
-    "react-native-modal": "^7.0.2"
+    "@expo/vector-icons": "^12.0.0",
+    "@react-navigation/native": "^6.0.2",
+    "@react-navigation/native-stack": "^6.2.2",
+    "expo": "^42.0.0",
+    "expo-font": "~9.2.1",
+    "expo-status-bar": "~1.0.4",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
+    "react-native-modal": "^13.0.0",
+    "react-native-screens": "~3.4.0",
+    "react-native-web": "~0.13.12",
+    "react-native-safe-area-context": "3.2.0"
   },
   "devDependencies": {
-    "babel-preset-expo": "^5.0.0"
+    "@babel/core": "~7.9.0"
   }
 }

controller/src/api/ezrassor-service.js

@@ -1,5 +1,5 @@
-import {Robot, Operation} from 'ezrassor-app/src/enumerations/robot-commands';
-import HTTP from 'ezrassor-app/src/api/web-commands';
+import {Robot, Operation} from '../enumerations/robot-commands';
+import HTTP from './web-commands';
 
 export default class EZRASSOR { 
 
@@ -90,7 +90,8 @@ export default class EZRASSOR {
             front_arm_instruction:0,
             back_arm_instruction:0,
             front_drum_instruction:0,
-            back_drum_instruction:0 
+            back_drum_instruction:0,
+            robotic_arm_instruction:0 
         }
 
         HTTP.doPost(this.apiPath, this.twistMsg);
@@ -120,6 +121,9 @@ export default class EZRASSOR {
             case Robot.WHEELS:
                 this.updateTwistMsg({wheel_instruction:operation});
                 break;
+            case Robot.ARM:
+                this.updateTwistMsg({robotic_arm_instruction:operation});
+                break;
             case Robot.AUTONOMY:
                 this.updateAutonomyTwistMsg(operation);
                 break;

controller/src/components/app/ControllerScreen.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import Modal from "react-native-modal";
-import FadeInView from "ezrassor-app/src/components/app/FadeInView";
-import EZRASSOR from 'ezrassor-app/src/api/ezrassor-service' 
-import ControllerStyle from 'ezrassor-app/src/styles/controller';
-import {Robot, Operation} from 'ezrassor-app/src/enumerations/robot-commands';
-import { Linking, Text, View, TouchableHighlight, TouchableOpacity, Image, StatusBar, KeyboardAvoidingView, TextInput} from 'react-native';
+import FadeInView from "./FadeInView";
+import EZRASSOR from '../../api/ezrassor-service' 
+import ControllerStyle from '../../styles/controller';
+import {Robot, Operation} from '../../enumerations/robot-commands';
+import { StyleSheet, Linking, Text, View, TouchableHighlight, TouchableOpacity, Image, StatusBar, KeyboardAvoidingView, TextInput} from 'react-native';
 import { FontAwesome, MaterialCommunityIcons } from '@expo/vector-icons';
 import * as Font  from 'expo-font';
 
@@ -17,12 +17,12 @@ export default class ControllerScreen extends React.Component {
       infoModalVisible: false,
       ipModal: false,
       xyModal: false,
+      armModal: false,
       isLoading: true,
       control: 0,
       xy: '0,0',
-      ip: '192.168.1.2:8080' 
+      ip: '192.168.0.102:8080' 
     }; 
-
     this.EZRASSOR = new EZRASSOR(this.state.ip);
   }
 
@@ -85,8 +85,10 @@ export default class ControllerScreen extends React.Component {
         <Modal
           style={ControllerStyle.modalViewContainer}
           isVisible={this.state.autonomyModalVisible}
+          onSwipeComplete={() => this.setAutonomyModalVisible(false)}
+          swipeDirection='down'
           onRequestClose={() => this.setAutonomyModalVisible(!this.state.autonomyModalVisible)}>
-          
+
           <TouchableHighlight style={{ flex: 1, marginHorizontal: 15, justifyContent: 'center' }}>
             <View>
               <View style={{ flexDirection: 'row', marginVertical: 15, justifyContent: 'center' }}>
@@ -113,55 +115,13 @@ export default class ControllerScreen extends React.Component {
           </TouchableHighlight>
         </Modal>
 
-        {/*Information Popup Modal*/}
-        <Modal
-          style={ControllerStyle.modalViewContainer}
-          isVisible={this.state.infoModalVisible}
-          onSwipe={() => this.setInfoModalVisible(false)}
-          swipeDirection='down'
-          onRequestClose={() => this.setInfoModalVisible(false)}>
-          <View style={{flexDirection: 'row'}}>
-            <View style={ControllerStyle.columnHeader}>
-              <Text style={ControllerStyle.textSmall}>App Developer</Text>
-              <Text style={{color: '#fff'}}>Christopher Taliaferro</Text>
-              <View style={{marginVertical: 10}}/>
-              <Text style={ControllerStyle.textSmall}>EZ-RASSOR Team</Text>
-              <View style={{flexDirection: 'row'}}>
-                <View>
-                  <Text style={ControllerStyle.columnText}>Camilo Lozano</Text>
-                  <Text style={ControllerStyle.columnText}>Cameron Taylor</Text>
-                  <Text style={ControllerStyle.columnText}>Harrison Black</Text>
-                  <Text style={ControllerStyle.columnText}>Ronald Marrero</Text>
-                  <Text style={ControllerStyle.columnText}>Samuel Lewis</Text>
-                </View>
-                <View style={{marginHorizontal:5}}/>
-                <View>
-                  <Text style={ControllerStyle.columnText}>Sean Rapp</Text>
-                  <Text style={ControllerStyle.columnText}>Tiger Sachse</Text>
-                  <Text style={ControllerStyle.columnText}>Tyler Duncan</Text>
-                  <Text style={ControllerStyle.columnText}>Lucas Gonzalez</Text>
-                </View>
-              </View>
-            </View>
-            <View style={{ flex: .5, borderRadius:20, backgroundColor: '#2e3030'}}></View>
-            <View style={ControllerStyle.columnHeader}>
-              <Text style={ControllerStyle.textSmall}>Our Mission</Text>
-              <View style={{marginVertical: 10}}/>
-              <Text style={ControllerStyle.columnText}>The EZ-RASSOR (EZ Regolith Advanced Surface Systems Operations Robot) is an inexpensive, autonomous, regolith-mining robot designed to mimic the look and abilities of NASA’s RASSOR on a smaller scale. The primary goal of the EZ-RASSOR is to provide a functioning demonstration robot for visitors at the Kennedy Space Center.</Text>
-              <View style={{marginVertical: 10}}/>
-              <Text style={[ControllerStyle.textTiny, ControllerStyle.columnText]}>Visit
-                  <Text style={[ControllerStyle.textTiny, ControllerStyle.columnHyperlink]} onPress={() => Linking.openURL('https://github.com/FlaSpaceInst/EZ-RASSOR')}> our GitHub repository </Text>
-                  for more information.
-              </Text>
-            </View>
-          </View>
-        </Modal>
-
+        {/*Arm Functionality Popup Modal*/}
+
         {/*Settings Modal*/}
         <Modal
           style={ControllerStyle.modalViewContainer}
           isVisible={this.state.ipModal}
-          onSwipe={() => this.setIPModalVisible(false)}
+          onSwipeComplete={() => this.setIPModalVisible(false)}
           swipeDirection='down'
           onRequestClose={() => {this.setIPModalVisible(false)}}>
           <KeyboardAvoidingView
@@ -178,7 +138,7 @@ export default class ControllerScreen extends React.Component {
         <Modal
           style={ControllerStyle.modalViewContainer}
           isVisible={this.state.xyModal}
-          onSwipe={() => this.setXYModalVisible(false)}
+          onSwipeComplete={() => this.setXYModalVisible(false)}
           swipeDirection='down'
           onRequestClose={() => {this.setXYModalVisible(false)}}>
           <KeyboardAvoidingView
@@ -199,8 +159,8 @@ export default class ControllerScreen extends React.Component {
         <FadeInView style={ControllerStyle.headerContainer}>
 
           {/*Left Row Icons*/}
-          <TouchableOpacity style={{ flex: 1, padding: 3 }} onPress={() => { this.setInfoModalVisible(true)}}>
-            <FontAwesome name="info-circle" size={32} color='#fff'/>
+          <TouchableOpacity style={{ flex: 1, padding: 3 }} onPress={() => { this.props.navigation.navigate('Arm')}}>
+            <MaterialCommunityIcons  name="arm-flex-outline" size={32} color='#fff'/>
           </TouchableOpacity>
           <TouchableOpacity style={{ flex: 1, padding: 1 }} onPress={() => this.setIPModalVisible(true)}>
             <FontAwesome name="search" size={30} color='#fff'/>
@@ -332,3 +292,8 @@ export default class ControllerScreen extends React.Component {
     );
   }
 } 
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: "#f0f"
+  }
+});