Skip to content
This repository was archived by the owner on Apr 3, 2023. It is now read-only.

UI UX

Jump to bottom
shangbol edited this page Dec 6, 2020 · 26 revisions

Table of Contents

Main Menu

Main Menu
On startup, Chatterplot will display a list of the user's datasets showing the latest dataset first. From here the user can search their datasets, see the preview of the dataset visualization, and create a new datasets. The user can also click on one of the datasets to see details.

  • Main Menu: Sets up the main screen with necessary icons and layouts.
  • Listview: Creates listview items components and listeners. We used RecyclerView to make a list of datasets.
  • Search: Uses Searchview to filter out datasets based on their name.
  • Dataset Visual Preview: Saves the graph as png file that can be used as a preview later. When we are rendering the Listview, we check if there is a preview available, and if there is, we display it.

Create Dataset

Create Dataset From the main menu, the user can create a dataset in one of two ways: with a voice command or using a GUI. Users can add up to 5 columns to the dataset. For more information about voice command structure, see here: https://github.com/UM-EECS-441/androidgroup/wiki/Voice-Commands-Wiki#Create-Dataset

Insert Data

From within a dataset, the user can insert data using a voice command or a GUI. For more information about voice command structure, see here: https://github.com/UM-EECS-441/androidgroup/wiki/Voice-Commands-Wiki#insert-data

  • Input Data using GUI: Allows users to input a new data entry through GUI.
  • Input Data using Voice Command: Allows users to input a new data entry through voice commands. Similarly, we utilize Android's Speechrecognizer to convert speech to text. Then, we parse the text to extract necessary data.

Visualization

When a dataset is opened, it will begin by displaying the table view. To switch between the table view and the graph view, the user can tap the icon in the bottom right corner of the screen. The user can tap the button at the top right corner to change the type of graph.

  • Dataset Visualization: Graphs the data based on the setting set by the user. We use 'AAChartCore-Kotlin' to graph the data.
  • Visualization Settings: Allows users to change the type of graph they want to graph. Currently support Line, Bar, Pie, and Column graph.

Importing Data


When creating a dataset, the user can import CSV files. On the create dataset prompt, the user can tap three dots at the top right corner to import CSV files from the device or Google Drive. Then, the user can change the name of the dataset as well as the name of columns.

  • Import CSV Files: Imports CSV files from the device or Google Drive. The top line of the CSV file is used to determine the column name and the rest are treated as data.

Exporting Data

In the table view of the dataset, the user can tap the three dots in the bottom right corner to open the menu and select "Export to CSV" to export the current dataset into CSV.

  • Export CSV Files: Exports the selected dataset into a CSV files. We use 'Kotlin-CSV' to save the dataset as CSV.

Share Visualization


On the visualization page, the user can tap the share icon at the bottom to share the visualization with other people

  • Save/Share Dataset Visualization: Shares the current graph using other apps. We convert the view containing the graph into a png file first. Then, we let the user share the image.

Clone this wiki locally