Software_Website/subsystems.html at main · WEMARS-Rover/Software_Website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
<!DOCTYPE html>
<html>
    <head>
        <!--Makes page responsive. To test responsiveness, inspect page and change screen size (options are available)-->
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>WeMars</title>

        <!--Google Fonts link-->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Chakra+Petch:wght@500;600;700&display=swap" rel="stylesheet">
        <!--Links css file to html site-->
        <link rel="stylesheet" href="style.css">
        <!--Links bootstrapcdn-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    </head>
    <body>
        <section class="sub-header sub-header--subsystems">
            <nav>
                <a href="index.html"><img src="images/WEMARS_Logo_New.png"></a>
                <div class="nav-links" id="navLinks">
                    <!--Close icon from Font Awesome icons-->
                    <ul>
                        <li><a href="index.html"><span class="top"><span>Home</span></span><span class="bottom"><span>Home</span></span></a></li>
                        <li><a href="about.html"><span class="top"><span>About</span></span><span class="bottom"><span>About</span></span></a></li>
                        <li><a href="subsystems.html"><span class="top"><span>Subsystems</span></span><span class="bottom"><span>Subsystems</span></span></a></li>
                        <li><a href="sponsor.html"><span class="top"><span>Sponsor</span></span><span class="bottom"><span>Sponsor</span></span></a></li>
                        <li><a href="Join.html"><span class="top"><span>Join Us</span></span><span class="bottom"><span>Join Us</span></span></a></li>
                    </ul>
                </div>
            </nav>

            <div class="sub-header-banner">
                <h1>Subsystems</h1>
                <p class="subsystems-click-note"><i class="fa-solid fa-hand-pointer"></i> Click any subsystem image below to view the latest progress updates.</p>
            </div>

            <nav class="m-nav">

                <div class="responsive-nav">
                    <a href="javascript:void(0);" class="icon" onclick="toggleMenu()" aria-expanded="false" aria-label="Open menu"><i class="fa fa-bars"></i></a>
                    <img src="images/WEMARS_Logo_New.png" class="logo">
                    <div class="bar" id="myLinks">
                        <a href="index.html">Home</a>
                        <a href="about.html">About</a>
                        <a href="subsystems.html">Subsystems</a>
                        <a href="sponsor.html">Sponsor</a>
                        <a href="Join.html">Join Us</a>
                    </div>
                </div>
            </nav>
        </section>

    <section class = "sec-01">
        <div class="subcontainer">
            <div class="subcontent" id="mechanical">
                <div class="subimages" role="button" tabindex="0" aria-label="View mechanical progress" onclick="openSubsystemCard('mechanical')" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();openSubsystemCard('mechanical');}">
                     <img src="./images/Mechanical/Render3.png" alt="Mechanical subsystem">
                </div>
                <div class = "subtext-box">
                    <h3>Mechanical</h3>
                    <p>We design, test, and build everything mechanical on the rover, from material selection and CAD
                        to prototyping and manufacturing. Our focus is on parts that hold up on rough terrain and still
                        handle precise work with the arm.</p>
                    <p>We work closely with electrical and software to make sure everything fits together. Right now
                        we're building a new rover and using what we learned at past competitions to push past what
                        we've done before.</p>
                </div>
            </div>

            <div class="subcontent" id="electrical">
                <div class="subimages" role="button" tabindex="0" aria-label="View electrical progress" onclick="openSubsystemCard('electrical')" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();openSubsystemCard('electrical');}">
                     <img src = "./images/Electrical/Elec-image.png" alt="Electrical subsystem">
                </div>
                <div class = "subtext-box">
                    <h3>Electrical</h3>
                    <p>We handle all the hardware on the rover and build a lot of it in-house: power distribution,
                        GPS, IMUs, CAN communication, and more. Team members pick up PCB design in Altium, embedded systems,
                        circuit protection, and getting different boards talking to each other.</p>
                    <p>We keep the arm and motors powered for mechanical and run the sensors and computers software
                        needs, so staying in sync with the other subteams is a big part of the job. This year we're
                        focused on our upgraded PDB and a modular board architecture that reduces wiring across the rover.</p>
                </div>
            </div>

            <div class="subcontent" id="software">
                <div class="subimages" role="button" tabindex="0" aria-label="View software progress" onclick="openSubsystemCard('software')" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();openSubsystemCard('software');}">
                     <img src = "./images/Software/coding-background.jpg" alt="Software subsystem">
                </div>
                <div class = "subtext-box">
                    <h3>Software</h3>
                    <p>We get motor control, sensors, CAN bus, and communications running on the rover. Right now we're
                        bringing sensors like LiDAR, cameras, IMU, and GPS online through ROS2.</p>
                    <p>We're using last year's rover as a test bed so when the new build is ready, most of our software
                        drops in with minimal rework. This summer we're hoping to push into autonomous navigation and
                        computer vision.</p>
                </div>
            </div>


            <div class="subcontent" id="business">
                <div class="subimages" role="button" tabindex="0" aria-label="View business progress" onclick="openSubsystemCard('business')" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();openSubsystemCard('business');}">
                     <img src = "./images/Buis/business-charts.avif" alt="Business subsystem">
                </div>
                <div class = "subtext-box">
                    <h3>Business</h3>
                    <p>We manage the team's money: sponsors, purchases, and keeping track of where funds go. With a
                        brand-new rover in the works, landing sponsors makes a real difference.</p>
                    <p>We also handle team apparel and plan social events so people get to know each other outside the
                        lab.</p>
                </div>
            </div>


            <div class="subcontent" id="science">
                <div class="subimages" role="button" tabindex="0" aria-label="View science progress" onclick="openSubsystemCard('science')" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();openSubsystemCard('science');}">
                     <img src = "./images/Science/sci-photo.jfif" alt="Science subsystem">
                </div>
                <div class = "subtext-box">
                    <h3>Science</h3>
                    <p>We build the tools to collect and analyze soil samples, including holders and testing procedures.
                        Right now we're working on a sampler that mounts to the arm so we can swap payloads without
                        rebuilding the whole setup.</p>
                </div>
            </div>


        </div>
    </section>

<div class="overlay" id="overlay" onclick="closeSubsystemCard()"></div>

<div class="m-card" id="card-mechanical">
    <button class="close-btn" type="button" aria-label="Close" onclick="closeSubsystemCard()">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>
    <div class="m-card-content">
        <h2>Mechanical Subsystem</h2>
        <div class="m-card-body">
            <div class="m-card-text">
                <p>Here are some images of the 2023/2024 rover. With only 8 memebers and 4 months to redesign and build the, chassis, differential bar, and arm, our team stopped at no cost to get it done. CIRC proved to be a real test of teamwork and clever (last-minute) engineering challenges.
                    Given our small budget, our team had to design and build everything from scratch, using the cheapest materials possible. This meant that we had to be creative with our designs, and we had to be resourceful with our materials.
                </p>
            </div>
            <div class="m-card-images">
                <img src="./images/Mechanical/mech3.png" alt="Mechanical progress">
                <img src="./images/Mechanical/mech1.png" alt="Mechanical subsystem">
                <img src="./images/Mechanical/mech2.png" alt="Mechanical progress">
            </div>
            <div class="m-card-text">
                <p>In the 2024/2025 season, our team grew to 70 members, allowing us to work on more complicated designs at a faster pace. Our goal remains the same from last year; to design the smallest and lightest rover competing at CIRC. As of March we have completed 90% of our final design and are on track to complete manufacturing from may-aug.</p>
            </div>
        </div>
    </div>
</div>

<div class="m-card" id="card-electrical">
    <button class="close-btn" type="button" aria-label="Close" onclick="closeSubsystemCard()">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>
    <div class="m-card-content">
        <h2>Electrical Subsystem</h2>
        <div class="m-card-body">
            <div class="m-card-text">
                <p>We are upgrading our power distribution board to support 6S LiPo batteries and evolving it into a central motherboard that handles power distribution, CAN communication, and other core rover electronics. Our GNSS and arm boards now plug directly into the PDB, improving modularity and reducing wiring across the rover.</p>
            </div>
            <div class="m-card-images">
                <img src="./images/Electrical/PDB.png" alt="Power distribution board">
                <img src="./images/Electrical/GNSS.png" alt="GNSS board">
                <img src="./images/Electrical/ArmBoard.png" alt="Arm board">
            </div>
            <div class="m-card-text">
                <p>We also built a new GNSS board around the u-blox ZED-F9P, bringing centimeter-level positioning accuracy onboard the rover.</p>
            </div>
        </div>
    </div>
</div>

<div class="m-card" id="card-software">
    <button class="close-btn" type="button" aria-label="Close" onclick="closeSubsystemCard()">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>
    <div class="m-card-content">
        <h2>Software Subsystem</h2>
        <div class="m-card-body">
            <div class="m-card-text">
                <p>Latest progress updates for the software subteam will be posted here. Add photos of autonomy testing, sensor integration, ROS2 setup, and on-rover software milestones.</p>
            </div>
            <div class="m-card-images m-card-images--template">
                <div class="m-card-placeholder"><i class="fa-solid fa-image"></i><span>Progress photo</span></div>
                <div class="m-card-placeholder"><i class="fa-solid fa-image"></i><span>Progress photo</span></div>
                <div class="m-card-placeholder"><i class="fa-solid fa-image"></i><span>Progress photo</span></div>
            </div>
        </div>
    </div>
</div>

<div class="m-card" id="card-business">
    <button class="close-btn" type="button" aria-label="Close" onclick="closeSubsystemCard()">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>
    <div class="m-card-content">
        <h2>Business Subsystem</h2>
        <div class="m-card-body">
            <div class="m-card-text">
                <p>Latest progress updates for the business subteam will be posted here. Add photos from outreach events, sponsor meetings, team apparel launches, and social events.</p>
            </div>
            <div class="m-card-images m-card-images--template">
                <div class="m-card-placeholder"><i class="fa-solid fa-image"></i><span>Progress photo</span></div>
                <div class="m-card-placeholder"><i class="fa-solid fa-image"></i><span>Progress photo</span></div>
                <div class="m-card-placeholder"><i class="fa-solid fa-image"></i><span>Progress photo</span></div>
            </div>
        </div>
    </div>
</div>

<div class="m-card" id="card-science">
    <button class="close-btn" type="button" aria-label="Close" onclick="closeSubsystemCard()">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>
    <div class="m-card-content">
        <h2>Science Subsystem</h2>
        <div class="m-card-body">
            <div class="m-card-text">
                <p>Latest progress updates for the science subteam will be posted here. Add photos of sample collection prototypes, lab testing, and science payload integration.</p>
            </div>
            <div class="m-card-images m-card-images--template">
                <div class="m-card-placeholder"><i class="fa-solid fa-image"></i><span>Progress photo</span></div>
                <div class="m-card-placeholder"><i class="fa-solid fa-image"></i><span>Progress photo</span></div>
                <div class="m-card-placeholder"><i class="fa-solid fa-image"></i><span>Progress photo</span></div>
            </div>
        </div>
    </div>
</div>

<section class="footer">
    <h2>WE Mars Team</h2>
    <h3>1151 Richmond St<br>London, ON N6A 3K7</h3>
    <a href="sponsor.html" class="hero-btn" id="contact-btn">CONTACT US</a>
    <div class="icons-container">
        <div class="icons"><a href=""><i class="fa-brands fa-facebook fa-2xl"></i></a></div>
        <div class="icons"><a href="https://www.instagram.com/we.mars/"><i class="fa-brands fa-instagram fa-2xl"></i></a></div>
        <div class="icons"><a href="https://www.linkedin.com/company/western-engineering-mars-rover-team/about/"><i class="fa-brands fa-linkedin fa-2xl"></i></a></div>
    </div>
    <p>Made by WeMars members</p>
</section>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="subsystem.js"></script>

    <script>

        function toggleMenu() {
            var menu = document.getElementById("myLinks");
            var isOpen = menu.classList.toggle("is-open");
            var icon = document.querySelector(".m-nav .icon");
            if (icon) {
                icon.setAttribute("aria-expanded", isOpen ? "true" : "false");
                icon.setAttribute("aria-label", isOpen ? "Close menu" : "Open menu");
            }
            var iconMark = icon && icon.querySelector("i");
            if (iconMark) {
                iconMark.classList.toggle("fa-bars", !isOpen);
                iconMark.classList.toggle("fa-xmark", isOpen);
            }
        }

        var SUBSYSTEMS = ['mechanical', 'electrical', 'software', 'business', 'science'];
        var activeCard = null;

        function openSubsystemCard(name) {
            if (SUBSYSTEMS.indexOf(name) === -1) return;

            closeSubsystemCard(false);
            var card = document.getElementById('card-' + name);
            var overlay = document.getElementById('overlay');
            if (!card || !overlay) return;

            activeCard = name;
            card.style.visibility = 'visible';
            overlay.style.visibility = 'visible';
            card.classList.add('active');
            overlay.classList.add('active');
            history.replaceState(null, '', '#' + name);
        }

        function closeSubsystemCard(clearHash) {
            if (clearHash === undefined) clearHash = true;
            var overlay = document.getElementById('overlay');

            SUBSYSTEMS.forEach(function (name) {
                var card = document.getElementById('card-' + name);
                if (!card) return;
                card.classList.remove('active');
                setTimeout(function () {
                    if (!card.classList.contains('active')) {
                        card.style.visibility = 'hidden';
                    }
                }, 600);
            });

            if (overlay) {
                overlay.classList.remove('active');
                setTimeout(function () {
                    if (!overlay.classList.contains('active')) {
                        overlay.style.visibility = 'hidden';
                    }
                }, 600);
            }

            activeCard = null;
            if (clearHash && window.location.hash) {
                history.replaceState(null, '', window.location.pathname + window.location.search);
            }
        }

        function handleSubsystemHash() {
            var hash = window.location.hash.replace('#', '').toLowerCase();
            if (SUBSYSTEMS.indexOf(hash) === -1) return;

            var section = document.getElementById(hash);
            if (section) {
                section.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
            setTimeout(function () {
                openSubsystemCard(hash);
            }, 350);
        }

        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape') closeSubsystemCard();
        });

        window.addEventListener('load', handleSubsystemHash);
        window.addEventListener('hashchange', handleSubsystemHash);

        ScrollReveal( {
        reset: false,
        distance: '60px',
        duration: 500,
        delay: 400
        });

        ScrollReveal().reveal('.sec-01 .subimages', {delay: 500, origin: 'bottom'});
        ScrollReveal().reveal('.subtext-box', {delay: 700, origin: 'right'});

    </script>

    </body>
</html>