Add gallery and first set of instructions for ui

docs/_config.yml

@@ -6,3 +6,6 @@ url: https://proroklab.github.io/cambridge-robomaster
 
 aux_links:
   Template Repository: https://github.com/proroklab/cambridge-robomaster
+include:
+  - assets/js
+  - assets/css

docs/_data/gallery_robot_common_ui_plate.yml

@@ -0,0 +1,33 @@
+- url: /imgs/instructions/common/ui/parts_overview.jpeg
+  alt: Parts overview
+  description: Overview of the parts used in the UI assembly.
+- url: /imgs/instructions/common/ui/button_wires_cut.jpeg
+  alt: Wires overview
+  description: Overview of the wires used in the UI assembly.
+- url: /imgs/instructions/common/ui/plate_switch.jpeg
+  alt: Switch in front plate
+  description: Align the front plate so that the rectangular hole is on the left, and the circular hole is on the bottom. Align the switch so that the off-position is on the bottom. Remove protective screen around the switch if necessary. Press the switch into the rectangular hole. Re-attach protective screen on top of the switch (optional).
+- url: /imgs/instructions/common/ui/plate_button.jpeg
+  alt: Button in front plate.
+  description: Turn the front plate on its back. Remove protective screen around the switch if necessary. Unscrew the nut from the button if not already done, and insert it through the front. Then screw the nut back on.
+- url: /imgs/instructions/common/ui/plate_display_standoffs.jpeg
+  alt: Insert display standoffs
+  description: Take two screws and two distance bolts. Remove protective screen around the screw holes if necessary. Mount the distance bolts as indicated with two screws.
+- url: /imgs/instructions/common/ui/plate_display.jpeg
+  alt: Mount display
+  description: Attach the display cable to the display. Mount the display to the front plate on the standoffs.
+- url: /imgs/instructions/common/ui/button_wires_soldered.jpeg
+  alt: Solder wires to button
+  description: Take the wires and remove isolation from one side for soldering. Solder two colored wires to the top pin of the button so that the shorter wire is facing the display, and the longer wire facing upwards. Solder the black wire to the bottom pin.
+- url: /imgs/instructions/common/ui/button_pullup_aligned.jpeg
+  alt: Mound pullup and cut wire
+  description: Take the pullup and cut one end to about 0.5cm length. Solder it to the second pin of the display (counted from top, pin corresponding to the red wire on the display). Cut the shorter cable of the button facing the display so that there is some overlap with the resistor, remove isolation and apply solder it.
+- url: /imgs/instructions/common/ui/button_shrink.jpeg
+  alt: Add heat shrink
+  description: Cut three pieces of heat shrink and put them on both wires of the button and the resistor. Cut the resistor to the appropriate length so that the cable can be soldered on it.
+- url: /imgs/instructions/common/ui/button_wires_crimped.jpeg
+  alt: Crimp button wires
+  description: Apply heated air to all heat shrinks. Cut the wires of the button to a similar length and crimp the endings. Prepare a 2x housing.
+- url: /imgs/instructions/common/ui/button_wires_housing.jpeg
+  alt: Insert into housing
+  description: Insert the button wires into the housing.

docs/_data/gallery_robot_common_ui_wiring.yml

@@ -0,0 +1,12 @@
+- url: /imgs/instructions/common/ui/wiring_new.jpeg
+  alt: Cable
+  description: Find the cable supplied with the display unit.
+- url: /imgs/instructions/common/ui/wiring_cut.jpeg
+  alt: Cable cut
+  description: Cut off one end of the connector and prepare the cut off end of the cable for crimping.
+- url: /imgs/instructions/common/ui/wiring_crimped.jpeg
+  alt: Cable crimped
+  description: Crimp all four wires and find the crimp housing (1x 2, 2x 1).
+- url: /imgs/instructions/common/ui/wiring_crimped_housing.jpeg
+  alt: Cable in housing
+  description: Connect the white and yellow cable to the 2x housing, and the black and red cable to the 1x housing.

docs/_includes/gallery-scripts.html

@@ -0,0 +1 @@
+<script src="{{ "/assets/js/gallery.js" | relative_url }}"></script>

docs/_includes/gallery-styles.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="{{ "/assets/css/gallery.css" | relative_url }}">

docs/_includes/gallery.html

@@ -0,0 +1,17 @@
+<div id="{{ include.gallery_id }}" class="gallery-container" data-gallery="{{ include.gallery_id }}">
+    <div class="image-counter" id="counter-{{ include.gallery_id }}"></div>
+
+    <!-- Gallery Image list -->
+    {% for image in site.data[include.gallery_data] %}
+    <div class="image-container {% if forloop.first %}active{% endif %}" data-index="{{ forloop.index0 }}">
+        <img src="{{ image.url }}" alt="{{ image.alt }}">
+        <p class="image-description">{{ image.description }}</p>
+    </div>
+    {% endfor %}
+
+    <!-- Navigation buttons container -->
+    <div class="nav-buttons">
+        <button class="nav-button prev-button" onclick="prevImage('{{ include.gallery_id }}')">Previous</button>
+        <button class="nav-button next-button" onclick="nextImage('{{ include.gallery_id }}')">Next</button>
+    </div>
+</div>

docs/assets/css/gallery.css

@@ -0,0 +1,53 @@
+/* Basic styling for the gallery */
+.gallery-container {
+    max-width: 800px;
+    margin: 20px auto;
+    text-align: center;
+    position: relative;
+}
+
+.gallery-container img {
+    width: 100%;
+}
+
+.image-container {
+    display: none;
+}
+
+.image-container.active {
+    display: block;
+}
+
+.image-description {
+    margin-top: 10px;
+    font-style: italic;
+    color: #555;
+}
+
+/* Styles for the image counter */
+.image-counter {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    padding: 5px 10px;
+    border-radius: 5px;
+    font-size: 14px;
+}
+
+/* Navigation buttons */
+.nav-buttons {
+    position: absolute;
+    top: 50px; /* Adjust this value to set the fixed distance below the counter */
+    right: 10px;
+}
+
+.nav-button {
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+    margin: 5px;
+}

docs/assets/js/gallery.js

@@ -0,0 +1,34 @@
+function showImage(galleryId, index) {
+    const gallery = document.getElementById(galleryId);
+    const images = gallery.querySelectorAll('.image-container');
+    images.forEach((img, i) => {
+        img.classList.toggle('active', i === index);
+    });
+    const counter = document.getElementById('counter-' + galleryId);
+    counter.textContent = `Step ${index + 1} / ${images.length}`;
+}
+
+function prevImage(galleryId) {
+    const gallery = document.getElementById(galleryId);
+    let currentIndex = Array.from(gallery.querySelectorAll('.image-container')).findIndex(img => img.classList.contains('active'));
+    currentIndex = (currentIndex > 0) ? currentIndex - 1 : gallery.querySelectorAll('.image-container').length - 1;
+    showImage(galleryId, currentIndex);
+}
+
+function nextImage(galleryId) {
+    const gallery = document.getElementById(galleryId);
+    let currentIndex = Array.from(gallery.querySelectorAll('.image-container')).findIndex(img => img.classList.contains('active'));
+    currentIndex = (currentIndex < gallery.querySelectorAll('.image-container').length - 1) ? currentIndex + 1 : 0;
+    showImage(galleryId, currentIndex);
+}
+
+// Initialize the counters when the page loads
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.gallery-container').forEach(gallery => {
+        const galleryId = gallery.getAttribute('data-gallery');
+        const images = gallery.querySelectorAll('.image-container');
+        if (images.length > 0) {
+            showImage(galleryId, 0); // Initialize to the first image
+        }
+    });
+});

docs/hardware_setup.md

@@ -13,8 +13,14 @@ nav_order: 3
 1. TOC
 {:toc}
 
+{% include gallery-styles.html %}
+
 ## RoboMaster Assembly
 
+{% include gallery.html gallery_id="gallery_robot_common_ui_wiring" gallery_data="gallery_robot_common_ui_wiring" %}
+
+{% include gallery.html gallery_id="gallery_robot_common_ui_plate" gallery_data="gallery_robot_common_ui_plate" %}
+
 ## Components
 
 ## Laser Cutting
@@ -27,3 +33,4 @@ nav_order: 3
 
 ### Wire harness
 
+{% include gallery-scripts.html %}