Skip to content

Commit

Permalink
upgrade guide fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@Unreal-Dan
Unreal-Dan committed Aug 14, 2024
1 parent 3eb579c commit 3fdf8bd
Show file tree
Hide file tree
Showing 7 changed files with 492 additions and 273 deletions.
139 changes: 138 additions & 1 deletion docs/duo_quick_use.md → docs/duo_guide.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,143 @@
---
layout: default
title: Duo Quick Guide
title: Duo Guide
nav_order: 1
parent: Guides & Tutorials
published: false # temporarily disabling this page
---

<style>
.device-icon {
margin: 0px;
width: 30%;
height: 30%
}

.white { background-color: rgba(255, 255, 255); }
.cyan { background-color: rgba(0, 255, 255); }
.purple { background-color: rgba(128, 0, 128); }
.green { background-color: rgba(0, 128, 0); }
.blue { background-color: rgba(0, 0, 255); }
.yellow { background-color: rgba(255, 255, 0); }
.red { background-color: rgba(255, 0, 0); }

.rounded-box {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
margin-left: 5px;
border-radius: 2px;
border: 2px solid #555;
vertical-align: middle;
}

.color-list-entry {
display: flex;
align-items: center;
font-size: 16px;
font-weight: bold;
margin-bottom: 10px; /* Remove bottom margin for seamless transition */
padding: 8px;
border: 1px solid #333;
border-bottom: none; /* Remove bottom border */
border-radius: 4px; /* Round top corners only */
background-color: #222; /* Darker background */
color: #eee; /* Light text for contrast */
transition: background-color 0.3s; /* Smooth background color transition */
}

.color-list-entry:hover {
background-color: #2a2a2a; /* Slightly lighter on hover */
}

.color-list-entry + div {
margin-top: 0; /* Remove top margin for seamless transition */
margin-bottom: 16px;
padding-left: 30px;
font-size: 18px;
line-height: 1.5;
padding: 10px;
border: 1px solid #333;
border-top: none; /* Remove top border */
border-radius: 0 0 4px 4px; /* Round bottom corners only */
background-color: #333; /* Dark background for text */
color: #ccc; /* Light text for readability */
transition: background-color 0.3s; /* Smooth background color transition */
}

.color-list-entry + div:hover {
background-color: #3a3a3a; /* Slightly lighter on hover */
}

.menu-wrapper {
padding-left: 60px;
padding-right: 60px;
}

/* Scoped link styles within the menu section */
.menu-wrapper a {
text-decoration: none; /* Remove default link styling */
color: inherit; /* Inherit color from parent */
display: block; /* Ensures the link covers the whole section */
}

.device-icon {
margin: 20px;
width: 30%;
height: 30%;
}
</style>

<img align="right" width="" height="220" class="device-icon" src="assets/images/duo-logo-square-512.png">

# Duo Guide

Welcome to the Vortex Duo Guide, this page aims to get you up and running as fast as possible.

## Basic Operation

The duo has one <span style="color: #00c6ff">navigation button</span>, this button acts as the power switch.

## Navigating Modes

Short click the <span style="color: #00c6ff">navigation button</span> to forward through the 14 available modes.

To edit a mode, navigate to it then hold the navigation button to open the menus.

## Menus

Use short clicks to cycle through the following menu options, long click to enter a menu.

{% raw %}
<div class="menu-wrapper">
<a href="randomizer_menu.html">
<div class="color-list-entry"><span class="rounded-box white"></span>Randomizer</div>
</a>

<a href="mode_sharing_menu.html">
<div class="color-list-entry"><span class="rounded-box cyan"></span>Mode Sharing</div>
</a>

<a href="color_select_menu.html">
<div class="color-list-entry"><span class="rounded-box green"></span>Color Select</div>
</a>

<a href="pattern_select_menu.html">
<div class="color-list-entry"><span class="rounded-box blue"></span>Pattern Select</div>
</a>

<a href="global_brightness_menu.html">
<div class="color-list-entry"><span class="rounded-box yellow"></span>Global Brightness</div>
</a>

<a href="factory_reset_menu.html">
<div class="color-list-entry"><span class="rounded-box red"></span>Factory Reset</div>
</a>
</div>
{% endraw %}---
layout: default
title: Duo Guide
nav_order: 4
parent: Guides & Tutorials
---
Expand Down
83 changes: 71 additions & 12 deletions docs/orbit_quick_use.md → docs/gloves_guide.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: default
title: Orbit Guide
title: Gloves Guide
nav_order: 1
parent: Guides & Tutorials
---
Expand Down Expand Up @@ -88,21 +88,21 @@ parent: Guides & Tutorials
}
</style>

<img align="right" width="" height="220" class="device-icon" src="assets/images/device-orbit.png">
<img align="right" width="" height="220" class="device-icon" src="assets/images/device-gloves.png">

# Orbit Guide
# Gloves Guide

Welcome to the Vortex Orbit Guide, this page aims to get you up and running as fast as possible.
Welcome to the Vortex Wired Gloves Guide, this page aims to get you up and running as fast as possible.

## Buttons

The orbit has two <span style="color: #00c6ff">navigation buttons</span> and a small <span style="color: #00ff00">power switch</span>.
The gloves have one <span style="color: #00c6ff">navigation button</span> and a small <span style="color: #00ff00">power switch</span> on each glove.

There is also a very small <span style="color: #ff0000">reset button</span> for updating the device firmware.

## Navigating Modes

Short click the <span style="color: #00c6ff">navigation buttons</span> to cycle forward or backwards through the 14 available modes.
Short click the <span style="color: #00c6ff">navigation button</span> to forward through the 14 available modes.

To edit a mode, navigate to it then hold the navigation button to open the menus.

Expand Down Expand Up @@ -137,6 +137,66 @@ Use short clicks to cycle through the following menu options, long click to ente
</a>
</div>
{% endraw %}
---
layout: default
title: Gloves Guide
nav_order: 3
parent: Guides & Tutorials
---

<style>
.white { background-color: rgba(255, 255, 255, 0.6); }
.cyan { background-color: rgba(0, 255, 255, 0.6); }
.purple { background-color: rgba(128, 0, 128, 0.6); }
.green { background-color: rgba(0, 128, 0, 0.6); }
.blue { background-color: rgba(0, 0, 255, 0.6); }
.yellow { background-color: rgba(255, 255, 0, 0.6); }
.red { background-color: rgba(255, 0, 0, 0.6); }

.rounded-box {
display:inline-block;
width:28px;
height:12px;
margin-right:8px;
margin-left:8px;
margin-top: 4px;
border-radius: 2px;
border: 2px solid #dfdfdf;
align-items: center;
}

.color-list-entry {
align-items: center;
font-size: 18px;
}

.device-icon {
margin: 20px;
width: 30%;
height: 30%
}
</style>

<img align="right" width="" height="220" class="device-icon" src="assets/images/gloves-logo-square-512.png">

# Gloves Quick Use Guide

Welcome to the Vortex Gloves Quick-Use-Guide, this guide aims to get you up and running as fast as possible.

## Accessing Menus

To enter the menu:

1. **Hold the Navigation Button:** Hold the button until the LEDs alternate white blinks.
2. **Cycle Menus:** Use short clicks to cycle through menu options. The menu colors indicate their function:

<div class="color-list-entry"><span class="rounded-box white"></span>Randomizer</div>
<div class="color-list-entry"><span class="rounded-box cyan"></span>Mode Sharing</div>
<div class="color-list-entry"><span class="rounded-box purple"></span>Editor Connection</div>
<div class="color-list-entry"><span class="rounded-box green"></span>Color Select</div>
<div class="color-list-entry"><span class="rounded-box blue"></span>Pattern Select</div>
<div class="color-list-entry"><span class="rounded-box yellow"></span>Global Brightness</div>
<div class="color-list-entry"><span class="rounded-box red"></span>Factory Reset</div>

## Selecting LEDs for Colorset/Pattern/Randomization

Expand All @@ -157,7 +217,7 @@ Use short clicks to cycle through the following menu options, long click to ente
Learn more about the [Randomizer](randomizer.html).

## Changing the Colorset on a Mode

<img align="right" width="" height="220" src="assets/images/ColorSelect.png">

1. **Select Color Select Menu (Green):**
2. **Select an LED group.**
Expand All @@ -175,7 +235,7 @@ Learn more about [Color Selection](colorSelect.html).
1. **Select Pattern Select Menu (Blue):**
2. **Select an LED group.**
3. **Select Pattern:**
- Chose one of the 4 shortcuts to enter the pattern list.
- Choose one of the 4 shortcuts to enter the pattern list.
- Cycle through patterns and long click to apply.

## Wirelessly Transferring to Another Device
Expand All @@ -184,7 +244,7 @@ Learn more about [Color Selection](colorSelect.html).
2. **Initiate Transfer:**
- Short click to cycle between receive (default) and send.
- Point the button of the sending device at the button of the receiving device.
- The recieving device will start to glow green and play the mode once it is recieved.
- The receiving device will start to glow green and play the mode once it is received.

## Connecting to the PC

Expand All @@ -201,7 +261,6 @@ To connect to PC and web applications see [Connecting to Computer](computer.html

1. **Select Factory Reset Menu (Red):**
2. **Confirm Reset:**
- Short click to cycle between factory reset or cancle.
- Hold the factory reset option untill the device fades from red to white to reset.

- Short click to cycle between factory reset or cancel.
- Hold the factory reset option until the device fades from red to white to reset.

Loading

0 comments on commit 3fdf8bd

Please sign in to comment.