This document describes the building of an Arduino-powered robotic crossbow controlled by a React Native mobile application. Key details include: - The crossbow is powered by an Arduino microcontroller and can shoot projectiles up to 150 feet per second. It is remotely controlled via Bluetooth using a mobile app. - The mobile app was created with React Native and features a joystick to control the crossbow's pan and tilt servos as well as a button to fire the crossbow. - Communication between the app and Arduino is done through serial Bluetooth to trigger functions like firing the crossbow or moving its position. The crossbow's movement and firing are implemented through code on the Arduino.

1. FOR OFFICIAL USE ONLY. DO NOT DISTRIBUTE.

3. AN INTRODUCTION TO ROBOTIC WEAPONS SYSTEMS
Weapons Grade
React

4. DISCLAIMER: I HAVE LITTLE TO
NO KNOWLEDGE ABOUT ROBOTIC
WEAPONS SYSTEMS

5. HOWEVER, I BUILT A TOTALLY
SWEET ROBOT CROSSBOW

6. INTRODUCING
THE CROSSBRO

7. 0:00 / 1:39

8. SPECS

9. Arduino Based
50lb draw weight
Shoots 150FPS
Powered by a single 9v battery
Remote Controlled via Bluetooth
Controller App written in React Native
Frickin laser beams

10. WHY?

12. I LOVE CROSSBOWS

13. I LOVE ARDUINOS

14. Whats an Arduino?
Open source electronics board
ATMega microcontroller
C/C++ based language & API
IDE and bootloader

16. How to
build one

17. Bow Selection

19. Pan/Tilt with Servos

23. Pulling The Trigger

27. Powering it up

29. Arduino runs on 5v

32. Communication

34. HM-10
Receives data wirelessly
Sends to Arduino via Serial I/O
TX/RX

35. What does any of this
have to do with React?

36. Software

37. Things it needs to do
Move the crossbow
Shoot the crossbow
All of this via Bluetooth

38. React Hardware

39. render() {
const { pan, tilt, joystick, laserPin, actuator, speed} = this.props;
const { panValue, tiltValue, laserValue, actuator } = this.state;
return [
<Servo {...pan} value={panValue} />,
<Servo {...tilt} value={tiltValue} />,
<Laser pin={laserPin} mode="OUTPUT" value={laserValue} />,
<pin mode="OUTPUT" pin={actuator.pins[0]} value={actuator[0]} />,
<pin mode="OUTPUT" pin={actuator.pins[1]} value={actuator[1]} />,
];
}

40. Basic Arduino

41. void setup() {
// Setup stuff goes here
}
void loop() {
// Control stuff goes here
}

42. void setup() {
pinMode(1, OUTPUT); // Activate pin
}
void loop() {
digitalWrite(LED_BUILTIN, HIGH); // On
delay(1000);
digitalWrite(LED_BUILTIN, LOW); // Off
delay(1000);
}

43. Serial Communication

45. void setup() {
Serial.begin(9600); // Start Listening
}
void loop() {
while (Serial.available() > 0) {
char recieved = Serial.read(); // Read char
data += recieved; // Add to string
if (recieved == '$') { // Check if finished
// Check the message
}
data = ""; // Reset the string
}
}
}

46. Firing The Bow

47. if (data == "FIRE$") {
extendActuator(); // Turn motor on
delay(1500);
retractActuator(); // Reverse Polarity
delay(1500);
stopActuator(); // Turn motor off
}

48. void extendActuator() {
digitalWrite(RELAY_PIN_1, HIGH);
digitalWrite(RELAY_PIN_2, LOW);
}
void retractActuator() {
digitalWrite(RELAY_PIN_1, LOW);
digitalWrite(RELAY_PIN_2, HIGH);
}
void stopActuator() {
digitalWrite(RELAY_PIN_1, HIGH);
digitalWrite(RELAY_PIN_2, HIGH);
}

49. Moving the bow

50. Servo panServo, tiltServo; // Create servo objects
void setup() {
panServo.attach(PAN_PIN, PAN_MIN, PAN_MAX);
tiltServo.attach(TILT_PIN, TILT_MIN, TILT_MAX);
}
void loop() {
...
} else {
if (data.indexOf('|') != -1) { // If Pipe
int pipeIndex = data.indexOf('|'); // Find indexes
int dollarIndex = data.indexOf('$');
String xVal = data.substring(0, pipeIndex); // Get substrings
String yVal = data.substring(pipeIndex + 1, dollarIndex);
phoneX = xVal.toInt(); // Convert to int
phoneY = yVal.toInt();
}
}
}

51. void loop() {
...
// Map values to servo positions
panValue = phoneX + map(phoneX, 0, 1023, -speed, speed);
tiltValue = phoneY + map(phoneY, 0, 1023, -speed, speed);
panServo.writeMicroseconds(panValue); // Write servo positions
tiltServo.writeMicroseconds(tiltValue);
delay(15); // Waits for servos
}

52. React Native

53. User Interface
Connect
Joystick
Fire Button

54. react-native-bluetooth-
serial

55. export default class CrossBro extends Component {
constructor(props) {
super(props);
this.state = {
connected: false,
isEnabled: false,
devices: []
};
}
}

56. componentWillMount() { // Get enabled, device list
Promise.all([ BluetoothSerial.isEnabled(),BluetoothSerial.list() ])
.then((values) => {
const [ isEnabled, devices ] = values; // Destructure values
this.setState({ isEnabled, devices }); // Set state
BluetoothSerial.isConnected() // Check if connected
.then(connected => {
if (!connected) { If not connected, connect
BluetoothSerial.connect(this.state.devices[0].id).then((res) => {
this.setState({connected: true});
}).catch((err) => console.log(err));
}
})
});
}

57. handleJoyStick = ({x,y}) => { // Handle joystick move
BluetoothSerial.write(x.toFixed() + '|' + y.toFixed() + '$');
}
handleButton = () => { // Handle Fire Button
BluetoothSerial.write('FIRE$');
}

58. Joystick

60. <Joystick
handleSize={88}
size={300}
onMove={this.handleJoyStick}
onRelease={this.handleRelease}
xRange={[0, 1023]}
yRange={[0, 1023]}
/>

61. render() {
return (
<View style={this.getContainerStyles()}>
<View style={this.getXStyles()} />
<View style={this.getYStyles()} />
<View
style={this.getHandleStyles()}
{...this._panResponder.panHandlers}
/>
</View>
);
}

62. componentDidMount() {
this.interval = setInterval(this.outputLoop, 200);
}
componentWillUnmount() {
if (this.interval) {
clearInterval(this.interval);
}
}
outputLoop = () => {
if (this.state.pressed === true) {
const coords = this.outputTranslatedValues();
this.props.onMove(coords);
}
};

63. Fire Button

65. <SafetyButton
size={66}
label="FIRE"
onClick={this.handleButton}
onFail={this.handleFail}
/>

66. render() {
return (
<View style={this.getContainerStyles()}>
<View style={this.getLeftStyles()} />
<View style={this.getRightStyles()} />
<View style={this.getHandleStyles()} {...this._panResponder.panHandlers
<Text style={this.getTextStyles()}>{this.props.label}</Text>
</View>
</View>
);
}

67. onPanResponderRelease: (evt, gestureState) => {
if (this.state.hitLeft && this.state.hitRight) {
this.props.onClick();
} else {
this.props.onFail();
}
this.setState({
position: 0,
pressed: false,
hitRight: false,
hitLeft: false
});
},

68. Again, why?

69. DEMO