feat: completed documentation

ayushsharma82 · May 25, 2024 · 5fe3608 · 5fe3608
1 parent 4f949db
commit 5fe3608
Show file tree

Hide file tree

Showing 29 changed files with 170 additions and 12 deletions.
diff --git a/docs/authentication.md b/docs/authentication.md
@@ -4,8 +4,6 @@ sidebar_label: Authentication
 sidebar_position: 5
 ---
 
-## Introduction
-
 The authentication feature in WebSerial enhances the security of your Internet of Things (IoT) devices by requiring authentication before allowing anybody to access the logs of your device. This feature ensures that only authorized individuals or systems can access and modify your devices, adding an extra layer of protection to your IoT ecosystem.
 
 ## Setting Authentication

diff --git a/docs/branding.md b/docs/branding.md
@@ -8,10 +8,9 @@ sidebar_position: 13
 This is an exclusive feature of WebSerial Pro. Check it out [here](https://webserial.pro).
 :::
 
-<br/>
 <br/>
 
-<img src="/v3/img/branding.png" alt="Branding" width="400px" />
+<img src="/v2/img/branding.png" alt="Branding" width="400px" className="card-preview" />
 
 <br/>
 <br/>

diff --git a/docs/custom-title.md b/docs/custom-title.md
@@ -10,7 +10,7 @@ This is an exclusive feature of WebSerial Pro. Check it out [here](https://webse
 
 <br/>
 
-<img src="/v3/img/custom-title.png" alt="Custom Title" width="400px" />
+<img src="/v2/img/custom-title.png" alt="Custom Title" width="400px" className="card-preview" />
 
 <br/>
 

diff --git a/docs/export.md b/docs/export.md
@@ -0,0 +1,32 @@
+---
+title: Export Logs
+sidebar_label: Export Logs (Pro)
+sidebar_position: 6
+---
+
+:::danger Pro Feature
+This is an exclusive feature of WebSerial Pro. Check it out [here](https://webserial.pro).
+:::
+
+<br/>
+
+<img src="/v2/img/export-logs.png" alt="Export Logs Button" width="300px" className="card-preview" />
+
+<br/>
+<br/>
+
+The "Export Logs" feature of WebSerial Pro provides users with a seamless way to save logs directly from your webserial  interface. It's designed for efficiency and ease of use, this feature allows for:
+
+1. Real-time exportation of logs to various formats like Text, JSON & CSV.
+2. Exports received logs into machine readable formats.
+3. Facilitates troubleshooting and easy sharing among teams/customers.
+
+<br/>
+
+<img src="/v2/img/export-window.png" alt="Export Logs Button" width="1200px" className="card-preview" />
+
+<br/>
+<br/>
+
+Users can initiate the export process with a single click, ensuring that critical data is preserved and accessible for further examination or sharing with team members. Whether for debugging, record-keeping, or collaborative development, the "Export Logs" feature streamlines the workflow, making WebSerial Pro an indispensable tool for developers and engineers.
+
diff --git a/docs/font.md b/docs/font.md
@@ -0,0 +1,39 @@
+---
+title: Font Settings
+sidebar_label: Font Settings (Pro)
+sidebar_position: 8
+---
+
+:::danger Pro Feature
+This is an exclusive feature of WebSerial Pro. Check it out [here](https://webserial.pro).
+:::
+
+WebSerial Pro comes with font family setting through which you can select the font style (font family) of your choice for your WebSerial terminal UI. *By default WebSerial interface uses `monospace` font which is an fixed width font used for code and terminals.*
+
+<br/>
+
+<img src="/v2/img/font-selector.png" alt="Export Logs Button" width="600px" className="card-preview" />
+
+<br/>
+<br/>
+
+Additionaly, to improve accessibility - **WebSerial Pro also lets you adjust font size** which can be a very useful feature for people who have difficulity seeing small text on screen! WebSerial font settings are all about making it most comfortable for you.
+
+<br/>
+<img src="/v2/img/font-size-selector.png" alt="Export Logs Button" width="600px" className="card-preview" />
+
+<br/>
+<br/>
+
+### Demo: Tiny Font ( Size: 12 )
+<hr/>
+<img src="/v2/img/font-tiny-demo.png" alt="Export Logs Button" width="1200px" className="card-preview" />
+
+<br/>
+
+### Demo: Enlarged Font ( Size: 18 )
+<hr/>
+<img src="/v2/img/font-large-demo.png" alt="Export Logs Button" width="1200px" className="card-preview" />
+
+<br/>
+<br/>
diff --git a/docs/hardware-id.md b/docs/hardware-id.md
@@ -8,10 +8,9 @@ sidebar_position: 10
 This is an exclusive feature of WebSerial Pro. Check it out [here](https://webserial.pro).
 :::
 
-<br/>
 <br/>
 
-<img src="/v3/img/hardware-id.png" alt="Hardware ID" width="400px" />
+<img src="/v2/img/hardware-id.png" alt="Hardware ID" width="400px" className="card-preview" />
 
 <br/>
 
@@ -22,19 +21,18 @@ The Hardware ID feature is shown on the WebSerial Pro portal for easy identifica
 ### Example Usage:
 
 ```cpp
-#include <WebSerial.h>
+...
+#include <WebSerialPro.h>
 
 void setup() {
-  // Initialize your hardware and other configurations here
+  ...
 
   // Set the Hardware ID
   WebSerial.setID("my_device_001");
-
-  // Additional setup code
 }
 
 void loop() {
-  // Your main loop code here
+  ...
 }
 ```
 

diff --git a/docs/timestamps.md b/docs/timestamps.md
@@ -0,0 +1,29 @@
+---
+title: Timestamps
+sidebar_label: Timestamps (Pro)
+sidebar_position: 7
+---
+
+:::danger Pro Feature
+This is an exclusive feature of WebSerial Pro. Check it out [here](https://webserial.pro).
+:::
+
+<br/>
+
+<img src="/v2/img/timestamps.png" alt="Export Logs Button" width="500px" className="card-preview" />
+
+<br/>
+<br/>
+
+Timestamps lets you log messages with time added to start of each line. It's a great way to keep track of your logs and when a certain event happens. Ultimately it's can extremely useful tool in most scenarios which can used to analyze scheduled tasks, timers, and task execution times.
+
+The timestamps feature has been re-worked on with the v2 release of WebSerial Pro. Timestamps in WebSerial Pro are now syncronized with your microcontroller without any external dependency using a clever trick! This keeps the time same across multiple opened windows and it's unaffected by the latency of transmission.
+
+<br/>
+
+<img src="/v2/img/timestamps-settings.png" alt="Export Logs Button" width="1200px" className="card-preview" />
+
+<br/>
+<br/>
+
+Users can easily enable the timestamps via their WebSerial settings panel. To further improve the user experience, if you don't want the timestamps to be selectable while you try to copy text from the terminal, then you can also easy switch that off using "Prevent Copying" toggle button.
diff --git a/docs/toggle-input.md b/docs/toggle-input.md
@@ -0,0 +1,63 @@
+---
+title: Toggle Input
+sidebar_label: Toggle Input (Pro)
+sidebar_position: 5
+---
+
+:::danger Pro Feature
+This is an exclusive feature of WebSerial Pro. Check it out [here](https://webserial.pro).
+:::
+
+The toggle input feature in WebSerial Pro allows users to easily enable or disable the command input bar within the webserial interface. It is particularly useful when users want to use WebSerial solely for monitoring purposes, such as when they do not want commands sent to their firmware or when it is integrated into a product for monitoring only.
+
+The input bar can be re-enabled whenever command input is required, making it a versatile tool for various use cases.
+
+## Disable Input
+
+<br/>
+
+<img src="/v2/img/input-bar-disabled.png" alt="Export Logs Button" width="1200px" />
+
+<br/>
+<br/>
+
+By default, the command input bar is enabled in WebSerial. To disable it, you can simply add this line of code in your firmware:
+
+```cpp
+WebSerial.disableInput();
+```
+
+## Enable Input
+
+<br/>
+
+<img src="/v2/img/input-bar.png" alt="Export Logs Button" width="1200px" />
+
+<br/>
+<br/>
+
+Similarly, You can re-enable command input bar using the following line of code:
+
+```cpp
+WebSerial.enableInput();
+```
+
+<br/>
+
+### Example Usage
+
+```cpp
+...
+#include <WebSerialPro.h>
+
+void setup() {
+  ...
+
+  // Disables WebSerial Command Input Bar
+  WebSerial.disableInput();
+}
+
+void loop() {
+  ...
+}
+```
diff --git a/static/v2/img/branding.png b/static/v2/img/branding.png
diff --git a/static/v3/img/custom-title.png → static/v2/img/custom-title.png b/static/v3/img/custom-title.png → static/v2/img/custom-title.png
diff --git a/static/v2/img/export-logs.png b/static/v2/img/export-logs.png
diff --git a/static/v2/img/export-window.png b/static/v2/img/export-window.png
diff --git a/static/v2/img/font-large-demo.png b/static/v2/img/font-large-demo.png
diff --git a/static/v2/img/font-selector.png b/static/v2/img/font-selector.png
diff --git a/static/v2/img/font-settings.png b/static/v2/img/font-settings.png
diff --git a/static/v2/img/font-size-selector.png b/static/v2/img/font-size-selector.png
diff --git a/static/v2/img/font-tiny-demo.png b/static/v2/img/font-tiny-demo.png
diff --git a/static/v2/img/hardware-id.png b/static/v2/img/hardware-id.png
diff --git a/static/v2/img/input-bar-disabled.png b/static/v2/img/input-bar-disabled.png
diff --git a/static/v2/img/input-bar.png b/static/v2/img/input-bar.png
diff --git a/static/v2/img/timestamps-settings.png b/static/v2/img/timestamps-settings.png
diff --git a/static/v2/img/timestamps.png b/static/v2/img/timestamps.png
diff --git a/static/v3/img/branding.png b/static/v3/img/branding.png
diff --git a/static/v3/img/dropzone.png b/static/v3/img/dropzone.png
diff --git a/static/v3/img/feature-mini.png b/static/v3/img/feature-mini.png
diff --git a/static/v3/img/feature.png b/static/v3/img/feature.png
diff --git a/static/v3/img/firmware-version.png b/static/v3/img/firmware-version.png
diff --git a/static/v3/img/hardware-id.png b/static/v3/img/hardware-id.png
diff --git a/static/v3/img/ota-modes.png b/static/v3/img/ota-modes.png
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,10 +8,9 @@ sidebar_position: 13 @@
     This is an exclusive feature of WebSerial Pro. Check it out [here](https://webserial.pro).
     :::
-    <br/>
     <br/>
-    <img src="/v3/img/branding.png" alt="Branding" width="400px" />
+    <img src="/v2/img/branding.png" alt="Branding" width="400px" className="card-preview" />
     <br/>
     <br/>
@@ Expand Down @@