From 84a0e1a01443512d718ffbb9d57b2dc32f981c9d Mon Sep 17 00:00:00 2001 From: fyang151 Date: Fri, 19 Jul 2024 20:53:23 -0600 Subject: [PATCH 1/2] added voyage descriptions from file --- .../public/info/PolarisVoyageDescription.txt | 1 + .../components/Polaris/PolarisContainer.tsx | 160 +++++++++--------- 2 files changed, 83 insertions(+), 78 deletions(-) create mode 100644 src/website/public/info/PolarisVoyageDescription.txt diff --git a/src/website/public/info/PolarisVoyageDescription.txt b/src/website/public/info/PolarisVoyageDescription.txt new file mode 100644 index 000000000..1535e33cd --- /dev/null +++ b/src/website/public/info/PolarisVoyageDescription.txt @@ -0,0 +1 @@ +Raye is an 18 foot fully autonomous sailboat set to sail from Victoria, BC, to Maui, Hawaii, this summer! The boat was designed and built entirely by our Sailbot team, with over 200+ UBC students having worked on Raye in its 6 years of development. With lots of on land and in water testing proving that our initial designs were successful, we are excited to see the team’s further development over the next few months before the launch this summer (2022). Being an autonomous sailboat, Raye required a heavy emphasis on a broad range of engineering fields, with the main three being Mechanical, Electrical, and Software engineering. Below is more information on the tasks of each sub-team and how their contribution has been essential to the success of the project.\n Raye’s hull was designed off a Volvo 60 with several considerations for the internal electrical components and external sensors. The hull and deck are composed of a corecell foam core sandwiched between 6 layers of carbon fibre. The deck is filled with solar panels, hatches, sensors, rigging, and much more. With an 8 foot keel and a 20 foot mast, Raye’s sail area gives it optimal speed with great directional accuracy. Since Raye is a sloop, it has a single mast with a headsail (jib) and a mainsail (main) attached to a boom. Each individual sail is controlled by its own winch that is specifically designed for autonomous sailing where there is no crew to retie ropes. The dual rudder system allows Raye to have rudder control even when it heels/tilts to the sides.\n Our electrical system is designed to emphasize robustness and modularity, allowing us to swap a whole “battery box” or cable assembly out of Raye with at most a couple of screws! Raye has six 18VDC, 66Ah lithium-ion battery assemblies along with many other related power devices. Our central computing is a mix of ARM-based computing and x86 based computing, which provides a well-supported platform for software development. Both CAN Bus and wireless communications are connected to this assembly, centralizing internal telemetry, control, and data reporting. This optimizes power consumption while allowing easy communication between the sensors and the main computer. Enhancing this communication is a UCCM, which is a commonly iterated PCB design that can be considered as a “smart, programmable gateway” between any device to the CAN bus.\n Raye’s software can be separated into three categories: pathfinding, navigation, and controller. The pathfinding team is responsible for Raye’s global and local pathfinding capabilities. Global pathfinding periodically creates sailing paths from the current position to destination with minimized length and desirable wind speeds throughout. Local pathfinding navigates along the global path while avoiding upwind/downwind sailing and minimizing turning and path length. In short, global pathfinding finds optimized checkpoints for the boat along the path and local pathfinding tells the boat how to arrive at the checkpoint. The navigation team makes sure that data gets from point A to point B, and through everything in between. For the programming languages, this team uses C++ for efficient low-level communication on the boat itself, but uses Python to process data on the mainland because resource efficiency is not as critical. The controller team is responsible for translating pathfinding commands and sensor data to commands for the rudder and sail. After being given navigation instructions, the controller translates those into commands on how to steer Raye’s rudder and sails to reach the destination. The control team also monitors sensor data from Raye such as power levels and makes adjustments to keep it sailing smoothly. \ No newline at end of file diff --git a/src/website/views/components/Polaris/PolarisContainer.tsx b/src/website/views/components/Polaris/PolarisContainer.tsx index c6aceca51..4d1b84f10 100644 --- a/src/website/views/components/Polaris/PolarisContainer.tsx +++ b/src/website/views/components/Polaris/PolarisContainer.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useState, useEffect} from 'react'; import { connect } from 'react-redux'; import styles from '@/views/components/Polaris/PolarisContainer.module.css'; import { @@ -22,88 +22,92 @@ function stringToParagraphs(text: string) { )); } -class PolarisContainer extends React.Component { - render() { - const voyageInfo = { - desc: 'Raye is an 18 foot fully autonomous sailboat set to sail from Victoria, BC, to Maui, Hawaii, this summer! The boat was designed and built entirely by our Sailbot team, with over 200+ UBC students having worked on Raye in its 6 years of development. With lots of on land and in water testing proving that our initial designs were successful, we are excited to see the team’s further development over the next few months before the launch this summer (2022). Being an autonomous sailboat, Raye required a heavy emphasis on a broad range of engineering fields, with the main three being Mechanical, Electrical, and Software engineering. Below is more information on the tasks of each sub-team and how their contribution has been essential to the success of the project.\n Raye’s hull was designed off a Volvo 60 with several considerations for the internal electrical components and external sensors. The hull and deck are composed of a corecell foam core sandwiched between 6 layers of carbon fibre. The deck is filled with solar panels, hatches, sensors, rigging, and much more. With an 8 foot keel and a 20 foot mast, Raye’s sail area gives it optimal speed with great directional accuracy. Since Raye is a sloop, it has a single mast with a headsail (jib) and a mainsail (main) attached to a boom. Each individual sail is controlled by its own winch that is specifically designed for autonomous sailing where there is no crew to retie ropes. The dual rudder system allows Raye to have rudder control even when it heels/tilts to the sides.\n Our electrical system is designed to emphasize robustness and modularity, allowing us to swap a whole “battery box” or cable assembly out of Raye with at most a couple of screws! Raye has six 18VDC, 66Ah lithium-ion battery assemblies along with many other related power devices. Our central computing is a mix of ARM-based computing and x86 based computing, which provides a well-supported platform for software development. Both CAN Bus and wireless communications are connected to this assembly, centralizing internal telemetry, control, and data reporting. This optimizes power consumption while allowing easy communication between the sensors and the main computer. Enhancing this communication is a UCCM, which is a commonly iterated PCB design that can be considered as a “smart, programmable gateway” between any device to the CAN bus.\n Raye’s software can be separated into three categories: pathfinding, navigation, and controller. The pathfinding team is responsible for Raye’s global and local pathfinding capabilities. Global pathfinding periodically creates sailing paths from the current position to destination with minimized length and desirable wind speeds throughout. Local pathfinding navigates along the global path while avoiding upwind/downwind sailing and minimizing turning and path length. In short, global pathfinding finds optimized checkpoints for the boat along the path and local pathfinding tells the boat how to arrive at the checkpoint. The navigation team makes sure that data gets from point A to point B, and through everything in between. For the programming languages, this team uses C++ for efficient low-level communication on the boat itself, but uses Python to process data on the mainland because resource efficiency is not as critical. The controller team is responsible for translating pathfinding commands and sensor data to commands for the rudder and sail. After being given navigation instructions, the controller translates those into commands on how to steer Raye’s rudder and sails to reach the destination. The control team also monitors sensor data from Raye such as power levels and makes adjustments to keep it sailing smoothly.', - }; +const PolarisContainer = () => { - const paragraphs = stringToParagraphs(voyageInfo.desc); + const [description, setDescription] = useState() - const customContents = [ - { - title: 'GPS', - data: ['GPS', '12 hours', 'JSON'], - action: downloadGPSData, - }, - { - title: 'AIS Ships', - data: ['AIS Ships', '12 hours', 'JSON'], - action: downloadAISShipsData, - }, - { - title: 'Global Path', - data: ['Global Path', '12 hours', 'JSON'], - action: downloadGlobalPathData, - }, - { - title: 'Local Path', - data: ['Local Path', '12 hours', 'JSON'], - action: downloadLocalPathData, - }, - { - title: 'Batteries', - data: ['Batteries', '12 hours', 'JSON'], - action: downloadBatteriesData, - }, - { - title: 'Wind Sensors', - data: ['Wind Sensors', '12 hours', 'JSON', 'Download'], - action: downloadWindSensorsData, - }, - { - title: 'Generic Sensors', - data: ['Generic Sensors', '12 hours', 'JSON', 'Download'], - action: downloadGenericSensorsData, - }, - ]; + useEffect(() => { + fetch('/info/PolarisVoyageDescription.txt') + .then((res) => res.text()) + .then((data) => setDescription(data)); + }, []); - return ( -
-
-
Polaris
-
-
Latitudes
-
Hello1
-
-
-
Longitudes
-
Hello2
-
-
-
Date Range
-
Hello3
-
-
-
Geography
-
Hello4
-
+ const paragraphs = description + + const customContents = [ + { + title: 'GPS', + data: ['GPS', '12 hours', 'JSON'], + action: downloadGPSData, + }, + { + title: 'AIS Ships', + data: ['AIS Ships', '12 hours', 'JSON'], + action: downloadAISShipsData, + }, + { + title: 'Global Path', + data: ['Global Path', '12 hours', 'JSON'], + action: downloadGlobalPathData, + }, + { + title: 'Local Path', + data: ['Local Path', '12 hours', 'JSON'], + action: downloadLocalPathData, + }, + { + title: 'Batteries', + data: ['Batteries', '12 hours', 'JSON'], + action: downloadBatteriesData, + }, + { + title: 'Wind Sensors', + data: ['Wind Sensors', '12 hours', 'JSON', 'Download'], + action: downloadWindSensorsData, + }, + { + title: 'Generic Sensors', + data: ['Generic Sensors', '12 hours', 'JSON', 'Download'], + action: downloadGenericSensorsData, + }, + ]; + + return ( +
+
+
Polaris
+
+
Latitudes
+
Hello1
-

{paragraphs}

-
-
Access Data Sets
- {customContents.map((content) => ( -
- -
- ))} +
+
Longitudes
+
Hello2
+
+
+
Date Range
+
Hello3
+
+
+
Geography
+
Hello4
- ); - } +

{paragraphs}

+
+
Access Data Sets
+ {customContents.map((content) => ( +
+ +
+ ))} +
+
+ ); } + export default connect()(PolarisContainer); From bc08885946456615a5e0225de323a3f4eb03dd68 Mon Sep 17 00:00:00 2001 From: fyang151 Date: Sat, 10 Aug 2024 00:22:32 -0600 Subject: [PATCH 2/2] added paragraphs --- .../views/components/Dataset/Dataset.tsx | 10 +++++- .../components/Polaris/PolarisContainer.tsx | 33 +++++++++---------- 2 files changed, 25 insertions(+), 18 deletions(-) diff --git a/src/website/views/components/Dataset/Dataset.tsx b/src/website/views/components/Dataset/Dataset.tsx index 9b6e56c8c..a29573446 100644 --- a/src/website/views/components/Dataset/Dataset.tsx +++ b/src/website/views/components/Dataset/Dataset.tsx @@ -30,7 +30,7 @@ const Dataset = ({ title, content, downloadAction }: DatasetProps) => { ))}
- {content.slice(0, 3).map((item, index) => ( + {content.slice(0, 2).map((item, index) => (
{ {item}
))} +
+ + JSON + +
( - - {item} -
-
- - )); -} - const PolarisContainer = () => { - const [description, setDescription] = useState() + function stringToParagraphs(text: string) { + return text.split('\\n').map((item, key) => ( + + {item} +
+
+ + )); + } + + const [description, setDescription] = useState() useEffect(() => { fetch('/info/PolarisVoyageDescription.txt') .then((res) => res.text()) - .then((data) => setDescription(data)); + .then((text) => stringToParagraphs(text)) + .then((paragraphs) => setDescription(paragraphs)); }, []); - const paragraphs = description - const customContents = [ { title: 'GPS', @@ -62,12 +61,12 @@ const PolarisContainer = () => { }, { title: 'Wind Sensors', - data: ['Wind Sensors', '12 hours', 'JSON', 'Download'], + data: ['Wind Sensors', '12 hours', 'JSON'], action: downloadWindSensorsData, }, { title: 'Generic Sensors', - data: ['Generic Sensors', '12 hours', 'JSON', 'Download'], + data: ['Generic Sensors', '12 hours', 'JSON'], action: downloadGenericSensorsData, }, ]; @@ -93,7 +92,7 @@ const PolarisContainer = () => {
Hello4
-

{paragraphs}

+ {description}
Access Data Sets
{customContents.map((content) => (