/gooz-client-v1.0.0

A web application for remote access to microcontroller cards.

Primary LanguageJavaScriptApache License 2.0Apache-2.0

Gooz Client User Document

Introduction

Gooz Client is a web application to communicate with microcontrollers. Client provides sending commands to microcontrollers, visual interface for data monitoring and tools for specific peripheral devices.

Contributors

  • Gorkem Aktas
  • Ozgur Karaaslan
  • Mert Yurttutar
  • Orkun Konak

Layouts

Gooz Client has three main layouts: navigation bar, side bar and container.

Layouts

Area surrounded by red is Navigation Bar, blue is Side Bar and green is Container.

Navigation Bar

The Navigation Bar consists of three main parts in itself. The first of these parts is The Brand Part with “GOOZ Client”. The second part is The Workspace Tabs Part which includes workspaces created by the users. In this part, users could delete and switch their own workspaces. The last part is The Register Part contains the register button. This part redirects to the registration page.

Navbar

Side Bar

Sidebar1

The Side Bar shows the properties of created workspace. This bar consists of 3 parts. The first of these parts is Card’s Info*.* This part contains the data entered by the user. These data are Workspace Name, Card Name, Card Type, Connection Type, and Connection Address. For example, If ‘Workspace Name’ is called ‘Workspace 5’, ‘Card Name’ is called ‘Gooz’ and ‘Card Type’ is chosen as ‘esp32’, ‘Connection Type’ is chosen ‘com-port’, ‘Connection Address’ is chosen ‘COM5’, this part looks like the figure. The second of these part is Widgets. The user accesses the terminal and line chart from this part.

Container

The container contains the widgets and makes them show up neatly.

Container

Specifications

Terminal

The Terminal on the client connects to Gooz’s terminal and allows to communicate with Gooz. The terminal generally works like a normal terminal. With this terminal, the user can send various commands to the card and receives various outputs from cards.

Terminal_1

Terminal_2

Data Monitoring

The user can perform data monitoring by using the Line Chart in the widgets section. A chart type is selected by the user from the Line Chart section and the line chart of that type is displayed on the screen. Data that come from the card is shown on this line chart and instantaneous changes in data are reflected instantly on the line chart. There are two chart types that the user can choose from. One of these types is the temperature line chart. This chart shows the temperature of the CPU.

Temperature

Another type is the ADC (Analog to Digital Converter) line chart. This chart reads the analog value from the pin, converts it to digital, and prints it as output.

ADC_1

ADC_2

Servo Interface

Servo Interface provides controlling servo motor with angle.

Servo_1

Servo_2

Usage

  • Clicking ‘GOOZ Client’, directs you to the home page.

goozclientbutton

  • Pressing the ‘+’ button will take you to the registration page. After the values are written in the input fields, the workspace is saved by pressing the ‘Add New Workspace’ button.

+ butonu

!add

  • The workspace can be deleted by pressing the ‘x’ button next to the workspace name or the user can navigate among workspaces.

workspaceler

  • The values entered in the register field are displayed by clicking the ‘Card's Info’ button in the Side Bar.

Cards_Info

  • Terminal or Line Chart selection is made by clicking on the ‘Widgets’ area.

Widgets

  • Pressing the ‘Terminal’ area opens the terminal. The command is entered in the white area under the terminal and the command is sent to the card by clicking the send button. Then the outputs are printed to the terminal. The terminal can be closed by pressing the red ‘x’ button in the upper right corner of the terminal screen.

    Terminal2_1

    Terminal2_2

  • The chart type is selected by clicking on the ‘LineChart’ field, and the line chart is created in the container layout according to the chart type selected by clicking the ‘Add’ button, or it is canceled by clicking the ‘Cancel’ button. The line chart can be closed by clicking the ‘x’ button in the upper right corner of the line chart.