Merge pull request #10 from NASAKnights/robot-page

added two resources pages for programming and control systems, added …
NASAKnights · Sep 19, 2024 · e48726a · e48726a
2 parents a1155ad + 9f5866c
commit e48726a
Show file tree

Hide file tree

Showing 9 changed files with 286 additions and 14 deletions.
diff --git a/images/bannerBackground/banner-controlsystem.JPG b/images/bannerBackground/banner-controlsystem.JPG
diff --git a/images/bannerBackground/banner-programming.JPG b/images/bannerBackground/banner-programming.JPG
diff --git a/pages/resources-controlsystems.html b/pages/resources-controlsystems.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>122 Nasa Knights - Contact Us</title>
+
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-MEXWT68NP8"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-MEXWT68NP8');
+    </script> 
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="robots" content="noindex">
+    <!-- ABOVE IS A GOOGLE DO-NOT-CRAWL DECLARATION. REMOVE WHEN SITE IS USER READY-->
+
+    <script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
+    <link href="../style.css" rel="stylesheet" type="text/css" media="all">
+    <script src="../script.js" defer></script>
+
+    <link rel="icon" type="image/x-icon" href="../images/favicon.png">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+    <link href='https://fonts.googleapis.com/css?family=Bruno Ace' rel='stylesheet'>
+    <link href='https://fonts.googleapis.com/css?family=Comme' rel='stylesheet'>
+  </head>
+
+  <body>
+    <div id="navplace">
+      <script>$(function(){
+        $("#navplace").load("../templates/navbar.html");
+      });</script>
+    </div>
+
+    <div class="page">
+      <div class="pageTitle" 
+            style="background-image: url('../images/bannerBackground/banner-controlsystem.JPG');  
+                    background-repeat: no-repeat;
+                    background-size: cover;
+                    background-attachment: fixed;
+                    background-position: center top;
+                    background-position: 0vw -50vh;">
+        <h1 class="pageTitleText" >Control Systems</h1>
+      </div>
+      <div class="pageBody">
+        <h2 class="pageHeaders">Welcome to the Control Systems Subteam! As a member of this team, you will be crucial to ensuring our robot moves smoothly and precisely. You’ll work with motors, sensors, and control systems to optimize performance. Below are key topics for you to explore, along with links to helpful resources. Don’t hesitate to reach out to a fellow student or mentor if you have questions.</h2>
+        <h2 class="pageHeaders">1. <strong>Motor Power Requirements</strong></h2>
+        <p class="pagePara">Understanding how much power the robot’s motors need for tasks like moving, lifting, or shooting is one of the foundational skills in control systems. You’ll consider factors like motor efficiency, torque, and voltage. Use the following resources to learn how to find the right motor for the job:
+        <a href="https://docs.wpilib.org/en/stable/docs/hardware/hardware-tutorials/motors.html">Understanding Motor Power</a></p>
+        <h2 class="pageHeaders"><a href="https://www.reca.lc/">Motor Specifications</a></h2>
+        <h2 class="pageHeaders">2. <strong>Gearing and Speed vs. Torque</strong></h2>
+        <p class="pagePara">Gearing plays a significant role in balancing speed and torque for our motors. Different tasks like driving, shooting, or lifting require different gear ratios. These resources will help you understand gear ratios and how to select the right one for each system:<br>
+        <a href="https://www.youtube.com/watch?v=49DxlXs8tyk">How Gear Ratios Work</a><br>
+        <a href="https://accu-components.com/us/p/442-what-is-gear-ratio">More on Gear Ratios</a><br>
+        <a href="http://cmra.rec.ri.cmu.edu/products/vex_easy_c/curriculum/path_planning/orchard/phase1/docs/gears.pdf">Gear Ratio Example</a></p>
+        <h2 class="pageHeaders"><a href="https://docs.wpilib.org/en/stable/docs/hardware/hardware-tutorials/transmissions.html">FRC Gear Ratio Video</a></h2>
+        <h2 class="pageHeaders">3. <strong>Pneumatics</strong></h2>
+        <p class="pagePara">Pneumatic systems are used to power various actuators and mechanisms on the robot. Learn how to use pneumatics in FRC through this overview video:</p>
+        <h2 class="pageHeaders"><a href="https://docs.wpilib.org/en/stable/docs/hardware/hardware-tutorials/pneumatics.html">Pneumatics Overview Video</a></h2>
+        <h2 class="pageHeaders">4. <strong>Sensor Selection and Integration</strong></h2>
+        <p class="pagePara">Sensors provide critical feedback to the robot, allowing it to understand its surroundings and make decisions. You’ll work with encoders, gyroscopes, and limit switches to measure speed, position, and orientation. Learn how to choose and integrate these sensors into the robot:
+        <a href="https://docs.wpilib.org/en/stable/docs/software/hardware-apis/sensors/index.html">FRC Sensors Overview</a></p>
+        <h2 class="pageHeaders"><a href="https://docs.wpilib.org/en/stable/docs/hardware/hardware-tutorials/sensors.html">FRC Sensors Video Tutorials</a></h2>
+        <h2 class="pageHeaders">5. <strong>Simple Filtering</strong></h2>
+        <p class="pagePara">Filters are used to clean up sensor data, especially when using encoders for precise control during autonomous routines. Understanding how to apply filtering will help make sensor readings more reliable:</p>
+        <h2 class="pageHeaders"><a href="https://docs.wpilib.org/en/stable/docs/software/advanced-controls/filters/index.html">Filtering and Encoder Basics</a></h2>
+        <h2 class="pageHeaders">6. <em>PID Control*</em></h2>
+        <p class="pagePara">Accurate robot movement relies on control algorithms like <strong>PID (Proportional-Integral-Derivative)</strong>. PID helps maintain control over motion, whether it&#39;s for moving or rotating the robot. Learn how to fine-tune these control loops to improve robot performance:</p>
+        <h2 class="pageHeaders"><a href="https://docs.wpilib.org/en/stable/docs/software/advanced-controls/introduction/index.html">FRC PID Control Guide</a></h2>
+        <h2 class="pageHeaders">7. <strong>Command-Based Control System</strong></h2>
+        <p class="pagePara">The <strong>Command-Based</strong> programming model is used to organize our robot code and manage complex behaviors. This modular approach simplifies controlling various subsystems. Begin learning about Command-Based programming here:</p>
+        <h2 class="pageHeaders"><a href="https://docs.wpilib.org/en/stable/docs/software/commandbased/index.html">Command-Based Programming Guide</a></h2>
+        <h2 class="pageHeaders">8. <strong>ProfiledPIDSubsystem</strong></h2>
+        <p class="pagePara">For controlling systems like rotary joints and flywheels, we use <strong>ProfiledPIDSubsystem</strong>. Learn more about it here:</p>
+        <h2 class="pageHeaders"><a href="https://docs.wpilib.org/en/stable/docs/software/advanced-controls/controllers/profiled-pidcontroller.html">FRC Subsystem Controllers</a></h2>
+        <h2 class="pageHeaders">9. <strong>Networking and Communication</strong></h2>
+        <p class="pagePara">Effective communication between the robot, Driver Station and coprocessor is key during matches. <strong>NetworkTables</strong> is a framework that allows real-time communication between any devices on the robot&#39;s network. Learn how it works and how we use it:</p>
+        <h2 class="pageHeaders"><a href="https://docs.wpilib.org/en/stable/docs/software/networktables/index.html">NetworkTables Overview</a></h2>
+        <h2 class="pageHeaders">10. <strong>Data Logging and Debugging</strong></h2>
+        <p class="pagePara">Data logging helps us track motor performance, sensor readings, and control signals. Use <strong>AdvantageScope</strong> to visualize and debug the robot’s performance, allowing us to identify and solve issues quickly:</p>
+        <h2 class="pageHeaders"><a href="https://docs.wpilib.org/en/stable/docs/software/dashboards/advantagescope.html">Data Logging and Debugging in FRC</a></h2>
+        <h2 class="pageHeaders">11. <strong>State-Based Control</strong></h2>
+        <p class="pagePara"><strong>State-Based Control</strong> is a method for organizing the control logic in more complex systems. Learn how this method is used to manage robot states effectively:</p>
+        <h2 class="pageHeaders"><a href="https://docs.wpilib.org/en/stable/docs/software/advanced-controls/state-space/index.html">State-Based Control</a></h2>
+        <h2 class="pageHeaders">12. <strong>Continuous Improvement and Testing</strong></h2>
+        <h2 class="pageHeaders">Testing is an essential part of control systems. Throughout the season, we will continuously test and refine our algorithms, control loops, and overall systems. Always look for opportunities to improve the robot’s performance!</h2>
+        <p class="pagePara">By being a part of the control systems subteam, you’ll gain hands-on experience in designing, optimizing, and fine-tuning the systems that make our robot run. From motors and sensors to algorithms and debugging, your role will ensure the robot performs efficiently and accurately during competition. Use these resources to guide your learning and feel free to ask questions whenever you need assistance!</p>
+
+
+
+      </div>
+    </div>
+
+    <div id="footerplace">
+      <script>$(function(){
+        $("#footerplace").load("../templates/footer.html");
+      });</script>
+    </div>
+
+  </body>
+</html>
diff --git a/pages/resources-programming.html b/pages/resources-programming.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>122 Nasa Knights - Contact Us</title>
+
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-MEXWT68NP8"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-MEXWT68NP8');
+    </script> 
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="robots" content="noindex">
+    <!-- ABOVE IS A GOOGLE DO-NOT-CRAWL DECLARATION. REMOVE WHEN SITE IS USER READY-->
+
+    <script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
+    <link href="../style.css" rel="stylesheet" type="text/css" media="all">
+    <script src="../script.js" defer></script>
+
+    <link rel="icon" type="image/x-icon" href="../images/favicon.png">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+    <link href='https://fonts.googleapis.com/css?family=Bruno Ace' rel='stylesheet'>
+    <link href='https://fonts.googleapis.com/css?family=Comme' rel='stylesheet'>
+  </head>
+
+  <body>
+    <div id="navplace">
+      <script>$(function(){
+        $("#navplace").load("../templates/navbar.html");
+      });</script>
+    </div>
+
+    <div class="page">
+      <div class="pageTitle"
+            style="background-image: url('../images/bannerBackground/banner-programming.JPG');  
+                background-repeat: no-repeat;
+                background-size: cover;
+                background-attachment: fixed;
+                background-position: center top;
+                background-position: 0vw -70vh;">
+        <h1 class="pageTitleText">Programming</h1>
+      </div>
+      <div class="pageBody">
+
+        <h2 class="pageHeaders">
+            Welcome to your robotics journey! Below is a list of important topics for you to explore. As you dive into these, feel free to reach out to us anytime for help or clarification. We want to ensure you understand these concepts well, so don’t hesitate to ask questions!</h2>
+        <h2 class="pageHeaders">
+            0. <strong>Getting Started with C++, Python, and Git</strong></h2>
+        <p class="pagePara">Before you can dive into making robots move you&#39;ll need to have some concepts under your belt. If you get bored look into topics 2 and 3!</p>
+        <ul class="pagePara3">
+            <li><strong>C++ Textbook-Style Learning</strong>: <a href="https://www.learncpp.com/">Learn C++</a> — Chapters 0, 1, 2, 4, 5, 6, 8, 9, 10, 13, 14, 12.</li>
+            <li><strong>Interactive C++/Python Learning</strong>: <a href="https://www.codecademy.com">Codecademy</a> — Recommended for hands-on practice.</li>
+            <li><strong>Git</strong>: <a href="http://rogerdudler.github.io/git-guide/">Version Control</a></li>
+            <li><strong>Github</strong>: <a href="https://github.com/NASAKnights">Our Github</a> - Make an account and talk to a mentor about getting added to our organization.</li>
+        </ul>
+        <hr>
+        <h2 class="pageHeaders">
+            1. <strong>Getting Started with WPILib: <a href="https://docs.wpilib.org/en/stable/docs/zero-to-robot/introduction.html">Zero to Robot Guide</a></strong></h2>
+        <h2 class="pageHeaders">
+            This guide will take you through everything from wiring the control system to setting up your custom VS Code environment and even building a basic drivetrain for your robot.</h2>
+        <h2 class="pageHeaders">
+            2. <strong>WPILib Tools Overview</strong></h2>
+
+        <p class="pagePara">
+            WPILib provides a range of tools that you’ll use for your robot’s control system and software. Get familiar with them here:
+        </p>
+        <h2 class="pageHeaders">
+            <a href="https://docs.wpilib.org/en/stable/docs/controls-overviews/control-system-software.html">WPILib Tools Overview</a></h2>
+        <h2 class="pageHeaders">
+            3. <strong>Path Planning for Autonomous Routines</strong></h2>
+        <p class="pagePara">
+            We use <strong>PathPlanner</strong> for creating autonomous paths for the robot. Explore it here:
+        </p>
+        <h2 class="pageHeaders"><a href="https://pathplanner.dev/home.html">PathPlanner</a></h2>
+        <h2 class="pageHeaders">
+            4. <strong>Understanding Units</strong></h2>
+        <p class="pagePara">
+            When we command robot components to move to specific angles or at certain speeds, 
+            we use &quot;units&quot; to handle this. Learn how to work with units here:
+        </p>
+        <h2 class="pageHeaders">
+            <a href="https://docs.wpilib.org/en/stable/docs/software/basic-programming/cpp-units.html">WPILib Units</a></h2>
+        <h2 class="pageHeaders">
+            5. <strong>Robot Dashboard: AdvantageScope</strong></h2>
+        <p class="pagePara">We are transitioning to using <strong>AdvantageScope</strong> for robot dashboards. Check out the details below:</p>
+        <ul class="pagePara3">
+            <li><a href="https://docs.wpilib.org/en/stable/docs/software/dashboards/advantagescope.html">AdvantageScope Overview</a></li>
+            <li><a href="https://github.com/Mechanical-Advantage/AdvantageScope/blob/main/docs/INDEX.md">AdvantageScope Usage Guide</a></li>
+        </ul>
+        <hr>
+        <h2 class="pageHeaders">
+            6. <strong>WPILib Documentation</strong></h2>
+        <p class="pagePara">The WPILib documentation is a key <strong>resource</strong> for everything you&#39;ll need while working with the libraries. Be sure to bookmark this link:</p>
+        <h2 class="pageHeaders">
+            <a href="https://github.wpilib.org/allwpilib/docs/release/cpp/index.html">WPILib Docs</a></h2>
+        <h2 class="pageHeaders">
+            7. <strong>NetworkTables</strong></h2>
+        <p class="pagePara">We use <strong>NetworkTables</strong> to communicate data across the robot system using a publish/subscribe model. Dive into it here:</p>
+        <h2 class="pageHeaders">
+            <a href="https://docs.wpilib.org/en/stable/docs/software/networktables/index.html">NetworkTables</a></h2>
+        <h2 class="pageHeaders">
+            8. <strong>Robot Simulation</strong></h2>
+        <p class="pagePara">
+            Simulation is a powerful way to test your robot’s code without needing the physical robot. Learn how to simulate your robot:</p>
+        <h2 class="pageHeaders">
+            <a href="https://docs.wpilib.org/en/stable/docs/software/wpilib-tools/robot-simulation/introduction.html">Robot Simulation</a></h2>
+        <h2 class="pageHeaders">
+            9. <strong>Command-Based Programming</strong></h2>
+        <p class="pagePara">
+            We use <strong>Command-Based Programming</strong> to organize robot actions. Start learning it here:
+        </p>
+        <h2 class="pageHeaders">
+            <a href="https://docs.wpilib.org/en/stable/docs/software/commandbased/index.html">Command-Based Programming</a></h2>
+        <h2 class="pageHeaders">
+            10. <strong>ProfiledPIDSubsystem</strong></h2>
+        <p class="pagePara">For controlling systems like rotary joints and flywheels, we use <strong>ProfiledPIDSubsystem</strong>. Learn more about it here:</p>
+        <h2 class="pageHeaders">
+            <a href="https://docs.wpilib.org/en/stable/docs/software/commandbased/profilepid-subsystems-commands.html">ProfiledPIDSubsystem</a></h2>
+        <h2 class="pageHeaders">
+            11. <strong>Swerve Drive Kinematics and Odometry</strong></h2>
+        <p class="pagePara">For advanced robot movement, we use <strong>Swerve Drive</strong>. Learn how to control and track swerve drive robots here:</p>
+        <ul class="pagePara3">
+            <li><a href="https://docs.wpilib.org/en/stable/docs/software/kinematics-and-odometry/swerve-drive-kinematics.html">Swerve Drive Kinematics</a></li>
+            <li><a href="https://docs.wpilib.org/en/stable/docs/software/kinematics-and-odometry/swerve-drive-odometry.html">Swerve Drive Odometry</a></li>
+        </ul>
+        <hr>
+        <p class="pagePara">
+            Explore these topics at your own pace, and remember, we’re here to support you as you learn.
+        </p>
+
+
+      </div>
+    </div>
+
+    <div id="footerplace">
+      <script>$(function(){
+        $("#footerplace").load("../templates/footer.html");
+      });</script>
+    </div>
+
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -155,15 +155,6 @@ a:-webkit-any-link {
   .navbarPages a.active {
     font-weight: bolder;
   }
-
-  /* .navbarPages a::before {
-    display: block; 
-    height: 0;
-    font-weight: bolder;
-    overflow: hidden;
-    content: attr(navBarText);
-    visibility: hidden;
-  } */
 
   /* Navbar hide links for small windows */
   .navbarPages .dropdownIcon {
@@ -496,14 +487,17 @@ a:-webkit-any-link {
 .pageTitle {
 
   display: flex;
+  width: 100vw;
+  max-width:100%;
 }
 
 .pageTitleText {
   font-family: 'Bruno Ace';
   font-size: 6vw;
   font-weight: bolder;
   color: rgba(255, 255, 255, 0.8);
-  padding: 20px;
+  padding: 20px 0px;
+  width: 100%;
   text-shadow: 1px 7px 15px black;
   text-align: center;
 }

diff --git a/templates/navbar.html b/templates/navbar.html
@@ -16,7 +16,13 @@
           </div>
         <a href="../pages/robot.html">Our Robots</a>
         <a href="../pages/media.html">Media</a>
-        <a href="../pages/resources.html">Resources</a>
+        <div class="dropdown">
+          <button onclick="location.href = '../pages/resources.html';" class="dropbtn">Resources</button>
+            <div class="dropdown-content">
+              <a href="../pages/resources-programming.html">Programming</a>
+              <a href="../pages/resources-controlsystems.html">Control Systems</a>
+            </div>
+          </div>
         <a href="../pages/sponsors.html">Sponsors</a>
         <a href="../pages/contact.html">Contact Us</a>
         <a href="javascript:void(0);" class="dropdownIcon" onclick="dropdown()">