# Website GUI Documentation

## 1. Introduction

The purpose of this **website** is to provide a user-friendly platform for Lorafy. Our design is focused on creating a seamless and intuitive user experience, with clear navigation and easy access to all of the website's features.

### 1.1 Table Of Contents

- 1. Introduction
- 2. Features
- 3. Initial Design
- 4. Final Design
- 5. Final Implementation
- 6. Instructions
- 7. Troubleshooting
- 8. FAQ

## 2. Features
### 2.1. Overview of main features
- Central graph that is easy to navigate.
- Several pages with different information
- Responsive layout that adapts to different screen sizes
- Clean and modern color scheme
- Light and dark mode

## 3. Initial Design
### 3.1. Inspiration
The design of the website was heavily influenced by trading platforms. A range of popular trading platforms were studied, and their design elements, such as the color scheme and layout, were used as a starting point for the website design. The primary focus was on their impimentation of charts and how to make it compatible and easily viewable on various devices such a deskop and mobile devices. Unique touches and refinements were then added to attempt to create a user-friendly and intuitive experience.

### 3.2. Sketch
Below is an initial sketch of what the Homepage layout could look like on a desktop. As mentioned before, the design is heavily inspired by the layout of trading apps/websites, with a prominent central chart used to display all the essential data.

*(Figure 3.2.1. - Initial Sketch)*

At the top of the page will be a menubar containing the logo on the left and the various menu buttons on the right. The menubar should also be responsive to allow easy viewing on mobile devices. At the center of the page will be the chart that will likely be contained in a box to separate it from the background and elevate its importance visually.

As shown, the options to select various elements related to the chart and the displayed data will be positioned around the main char to allow for easy and intuitive use. This design aims to minimize the number of clicks by the user to access the chart's various elements.

### 3.3. Logo
Below are the light and dark variants of the Lorafy logo.

*(Figure 3.3.1. - LoRaFY Logo Dark & Light)*

The design is inspired by the LoRa logo, with the capitalization being the same in both logos. The radio waves coming off the 'R' are also inspired by the same logo but were redesigned slightly to match the more modern design of the website.

### 3.4. Color Palette
When choosing a color palette for a website, it's essential to consider the overall aesthetic and branding of the site, as well as the audience and the purpose of the site.


Navy Blue, is a popular color for modern and professional websites because it is a deep, rich shade that exudes elegance and sophistication. It is also a versatile color that can be used as a primary color or as an accent. It works well with both light and dark themes.Sky Blue and Midnight Blue will be used as variations of this.

Dark gray is another classic professional color that is often used on websites. It is a neutral color that is easy on the eyes and pairs well with other colors. It can also add a touch of sophistication and sophistication to a website. It will be importaint to adding a light and dark mode.

Lastly, different shades of light gray will be used as it is a neutral color that is versatile and easy to work with. It is a somewhat calming color that is easy on the eyes and complements the other colors in the palette. It can also be used as a primary color or accent.

Overall, these colors are professional, modern, and easy on the eyes, making them a good choice for a professional website. They are also cohesive and balanced, which means they work well together and create a coherent visual aesthetic.

## 4. Final Design
### 4.1. Dashboard
*(Figure 4.1.1. - Home Page Dark & Light)*

Keeping in line with the initial sketch, the final homepage design features a Navigation Bar at the top of the page containing a logo on the left and buttons to different pages on the right. In the center of the page is a large central graph that the user can use to navigate the data. The selector for the datasets displayed is on the left of the main chart. The options consist of Temperature, Brightness, Pressure, and Humidity. to the right of the chart is the selector for the different sensors that can be enabled or disabled on the graph. On top of the chart is a time range selector. It has a few preset ranges, such as one hour, one day, one week, one month, one year, max, and a custom time range that the user can select. There are also a few other options to the right that are from the charting library. At the bottom of the page is space to add other charts or ways of displaying further relevant data. However, these might be removed in the final production version if deemed unnecessary.

### 4.2. Sensors
*(Figure 4.2.1. - Sensors Page Dark & Light)*

The next page over on the NavBar is the Sensors page. This page consists entirely of a data table that shows the metadata for the different sensors, such as the EUI, their Address, Battery level, and battery voltage.

### 4.3. Setting
*(Figure 4.3.1. - Settings Page Dark & Light)*

The settings page will contain some of the options for the page, such as switching between light and dark modes and allowing the user to enable or disable caching. Furhter settings may also be included throughout development.

### 4.4. Sign-In
*(Figure 4.4.1. - Sign-In Page Dark & Light)*

The last page on the NavBar is the sign-in page. Depending on time constraints, this page may not be included at all in the final product. However, if it does, it consists of a simple login screen where the user can enter their username/email and password. There won't be any options to create an account or recover it, as this will all be done manually directly in the backend. The main reasons for logging in would be for some added permissions, such as adding and deleting sensors from the database via the web interface.

### 4.5. Mobile
*(Figure 4.5.1. - Mobile Home Page)*

The above is a possible version of what the mobile version of the website might look like. However, implementing this will also depend on the time remaining, so it may be subject to change. It has the same features as the desktop version of the home page, just rearranged to better fit on a mobile device. The buttons to select the data set and sensors have been moved underneath the chart to be easily accessible on a smaller screen while keeping the chart somewhat readable.

## 5. Final Implementation
*(Figure 5.1. - Final Implementations)*

Above are the final implementations of all the website pages. The final product consists of the main dashboard, which remains relatively unchanged, with only minor aesthetic changes to the time range and sensor selection button groups. The next page with the metadata table remained unchanged from the original design. Next, an about page was added with links to the developer's GitHub.

This was not included in the original design but still maintained a consistent theme with the rest of the website. The Settings and SignIn pages were removed during the development process due to a lack of relevance and development time, respectively. All the mobile variants f the individual pages are shown to the right of the desktop versions.

## 6. Instructions

1. To navigate the website, use the main menu at the top of the page.
2. Click on any menu item to access the corresponding page.
3. Use the button groups on the sides of the chart to select different datasets, timeframes, and sensors to display on the graph.
4. Enjoy!

## 7. Troubleshooting

If you encounter any issues while using the website, please try the following solutions:

- Make sure you are using the latest version of your web browser.
- Clear your browser's cache and cookies.
- If the issue persists, contact the developers for assistance.

## 8. Frequently Asked Questions

- Can I customize the website's layout or color scheme?
- No, the website's design is fixed and cannot be customized.
- Is the website mobile-friendly?
- Yes, the website's layout is responsive and will adapt to different screen sizes.
- Can I access the website from multiple devices?
- Yes, you can access the website from any device that has an internet connection.