Merge pull request #2 from lochungtin/TS-Remake

update website
lochungtin · Jan 1, 2024 · da86a82 · da86a82
2 parents 35da20b + 6ef8cd7
commit da86a82
Show file tree

Hide file tree

Showing 11 changed files with 205 additions and 1 deletion.
diff --git a/docs/.nojekyll b/docs/.nojekyll
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,33 @@
+<div style="text-align:center">
+
+![icon](img/icon.png ':size=25%')
+
+</div>
+
+# Pyxelite
+
+## Background Motivations
+
+The idea came to life when I discovered that the Addressable RGB (ARGB) PC fans require an external adapt in order to support full LED control. I did not want to pay extra just to have customisable lights, but I would also want my system to look a certain way. So, I decided that I would hack them and control them via a microcontroller (MCU). Write and flashing code each time when I want to change colour would be ridiculous, so I made a mobile app to control the MCU as well.
+
+## Mobile App
+
+The app is written in React Native and the **RESTful API** requests are handled by Axios. A custom colour picker is made for users to choose their own accents for the animations. Each colour is saved in the colour library for future use. Animations are precoded and available for selection in the app.
+
+[Pyxelite Mobile App GitHub](https://github.com/lochungtin/Pyxelite) | [Mobile App](./app.md)
+
+### Features
+
+- Basic Control and Animations  
+- Custom Brightness and Motion Speed
+- Custom Colours and Colour Library
+
+## Micro Controller Unit
+
+An ESP32 is used as the **controller and web server**. It is directly connected to the PC fans via its built-in IO port. It also hosts the web server that the phone app connects to. RESTful APIs are used to control the colour, speed, and animation of the LEDs inside the computer fans
+
+[Pyxelite MCU Github](https://github.com/lochungtin/Pyxelite/tree/master/mcu) | [Micro Controller Unit](./mcu.md)
+
+## Limitations and Future Work
+
+Currently, only one colour is support for the entire system. Upcoming versions of the project is to allow **different colours and configurations** for every single ARGB device connected.
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
@@ -0,0 +1,4 @@
+*   [Home](/)
+*   [Mobile App](./app.md)
+*   [Microcontroller](./mcu.md)
+*   [Future Work](./planned.md)
diff --git a/docs/app.md b/docs/app.md
@@ -0,0 +1,35 @@
+<div style="text-align:center">
+
+![icon](img/icon.png ':size=25%')
+
+</div>
+
+# Mobile App
+
+## About
+
+|||
+|:--:|:--|
+|![img](./img/home.jpg ":size=70%")|Pyxelite is an open source mobile ARGB controller written in React Native for the ARGB microcontroller, which is the other part of the project.|
+
+This project is currently in alpha and only available for android, support for desktop support is planned while iOS currently has no intention of being support. The latest stable release apk can be found [Here](https://github.com/lochungtin/Pyxelite/releases/download/v1.0.0-alpha/Pyxelite-AlphaV1.0.0.apk).
+
+## Features
+
+### Basic Control and Animations
+
+|||
+|:--:|:--|
+|![img](./img/settings.jpg ":size=70%")|There are currently 4 supported animations in the app and the MCU, they are: **Static (default)**, **Breathe**, **Wave**, and **Travel**|
+
+### Custom Brightness and Motion Speed
+
+Animation speed and brightness can be configured to the user's liking, the scale is from **0 to 255**, for both speed and brightness.
+
+### Custom Colours and Colour Library
+
+Colours can be created using the **colour creation tool** and saved to a locally maintained **colour library**, where colours can be selected and sent to the MCU.
+
+## Limitations and Future Work
+
+Currently, only one colour is support for the entire system. Upcoming versions of the project is to allow **different colours and configurations** for every single ARGB device connected.
diff --git a/docs/img/home.jpg b/docs/img/home.jpg
diff --git a/docs/img/icon.png b/docs/img/icon.png
diff --git a/docs/img/settings.jpg b/docs/img/settings.jpg
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport"
+		content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
+	<meta name="description" content="">
+
+	<link rel="icon" type="image/x-icon" href="favicon.ico">
+
+	<title></title>
+
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css">
+
+
+	<!-- Custom Styles -->
+	<style>
+		:root {}
+	</style>
+</head>
+
+<body>
+	<div id="app"></div>
+
+	<script>
+		// Docsify Configuration
+		window.$docsify = {
+			loadSidebar: true,
+			auto2top: true,
+			subMaxLevel: 2,
+		};
+	</script>
+
+	<!-- Required -->
+	<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/js/docsify-themeable.min.js"></script>
+
+	<!-- Recommended -->
+	<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/zoom-image.min.js"></script>
+</body>
+
+</html>
diff --git a/docs/mcu.md b/docs/mcu.md
@@ -0,0 +1,19 @@
+<div style="text-align:center">
+
+![icon](img/icon.png ':size=25%')
+
+</div>
+
+# Micro Controller Unit
+
+## About
+
+ESPyxelite is the micro controller uni section of project Pyxelite. As the name suggests, the MCU selected is a ESP32.
+
+## Web Service Based Controlling
+
+**RESTful** architecture is used to interact with the mobile application. The ESP32 hosts a web server with a few endpoints to connect to, on each *PUT* request, the internal data of the ESP32 updates, and the LED sequence updates accordingly.
+
+## Limitations and Future Work
+
+Currently, only one colour is support for the entire system. Upcoming versions of the project is to allow **different colours and configurations** for every single ARGB device connected.
diff --git a/docs/planned.md b/docs/planned.md
@@ -0,0 +1,56 @@
+<div style="text-align:center">
+
+![icon](img/icon.png ':size=25%')
+
+</div>
+
+
+# Planned Work for Version 2 Release
+
+## Device Control / Library
+
+### Device Control
+
+- Save device IP address
+- Turn selected device on and off
+  - Individual or sync control
+
+### Pin Control
+
+- Match pin of MCU to connected ARGB device
+
+## Custom Colour Picker / Library
+
+- Create custom colours
+- Access saved colours for animation creation
+
+## Animation
+
+### Presets
+
+- Static
+- Breathe
+- Travel
+- Rainbow
+- Sine Swing
+
+### Set Starting Index
+
+- Configure the starting index of the ARGB array
+  - For cyclic animations
+
+### Sub-pin Grouping
+
+- Divide ARGB device pins into sub groups with the same animation
+  - Same cycle period
+
+## Custom Animations
+
+- Frame by frame pin editing
+- Save as parsable config
+
+## Brightness and Speed Control
+
+- Brightness set values from 0 to 255
+- Speed set values from 0 to 255
+  - Relative to set ms
diff --git a/mcu/README.md b/mcu/README.md
@@ -1 +1,13 @@
-## ESPyxelite
+# Micro Controller Unit
+
+## About
+
+ESPyxelite is the micro controller uni section of project Pyxelite. As the name suggests, the MCU selected is a ESP32.
+
+## Web Service Based Controlling
+
+**RESTful** architecture is used to interact with the mobile application. The ESP32 hosts a web server with a few endpoints to connect to, on each *PUT* request, the internal data of the ESP32 updates, and the LED sequence updates accordingly.
+
+## Limitations and Future Work
+
+Currently, only one colour is support for the entire system. Upcoming versions of the project is to allow **different colours and configurations** for every single ARGB device connected.