Please enable JavaScript.

Coggle requires JavaScript to display documents.

FIA3 - Project Folio - Coggle Diagram

- - - - Pycharm
        
        The platform/text editor where the code will be written, edited and run.
      - Python
        
        The Python coding language will need to be used across the duration of this project, namely an app.py file, which will import various libraries (such as flask, requests and flask google maps, see "Python libraries" branch), set up routes, carry/define variables and run files if called locally (if name == main)
      - Flask
        
        Flask is a microframework that will need to be used in the creation of this web app, see Functionality -> Python Libraries -> Flask for more details
      - Bootstrap (Frontend Framework)
        
        The Bootstrap library will be used to further stye the website and to save time on the more complicated CSS styling. It can be found here: https://getbootstrap.com/
      - Jinja Code
        
        Jinja code allows for the use of a python-like code within a html file. This allows one to create blocks of code such as a for loop, and is accessed using {% %}.
      - CSS
        
        The CSS coding language will also be used for the styling/design of the web app in the html code and on an external stylesheet. CSS will also be employed through bootstrap.
      - HTML
        
        The HTML coding language will also have to be used to create html files which includes the structure, content, design, functionality, responsiveness and linking of each page on the web app.
  - - - url_for
      - flash
      - render_template
      - Flask
    - - secure_filename
    - - vision
  - - - Website can be displayed on many different devices
      - Menus and other objects on website may have to be changed to accomodate for other devices
      - Bootstrap code will need to be used.
- - - - Year 8 student
      - Just started in the club
      - Shoots about 20-30 photos a month
      - Is not confident with archiving photos by himself
    - - Senior student and hobby photographer
      - Shoots photos on most College events and some overseas school trips
      - Likes to take photos but finds cataloguing them annoying
      - Likes technology
    - - College staff member and club coordinator
      - experienced photographer shooting many photos per month
      - Marketing often asks me for certain photos and I wish I had a way to find specific images quickly by their content
      - Students in the club have to catalogue their own photos, but some are not very reliable. In the end, it is often a mess.
      - Can spend hours trying to catalogue his and his students’ images and would rather spend time with his kids.
  - - - Must be used for all content images (except decorative images)
      - Attribute is set to null for decorative images
      - Appropriately describes the content of the image to which it relates
    - - Must appear in the browser tab for all pages
      - Must be appropriate for the page
      - Must be different for each page.
    - - Results in correct display of the page with no horizontal scrolling
      - Allows all buttons to remain visible
    - - Are on every page (at least one)
      - Levels on each page have a meaningful hierarchy
  - - - web design standards
      - the Australian Privacy Act (1988)
      - standards adapted from Australian Accessibility Standards (see table below).
    - - selecting a file for image recognition
      - displaying of image recognition data for selected image file
      - Searching for an image via keywords and display of image
    - - Configurable data
      - Configurable Language
      - Simple controls/commands to accomodate for wider audience
      - Easy-to-comprehend layout
      - Engaging UI
      - Informative information presented clearly
  - - - Learnability and Effectiveness
        
        Users must be able to access data quickly, with the input and output fields must be presented clearly with easy access.
        
        Design Principles (CARP) - Contrast, Alignment, Repetition and Proximity.
      - Utility
        
        Portability and Responsiveness of Website - it is usable and visually appealing across multiple devices.
      - Accessibility
        
        How accessible the web app is to all different kinds of user groups. This can be achieved through:
        
        Text colour contrast - not only visually appealing but it can impact the website's functionality in transmitting information.
        
        Screen reading - which is easily defined navbars, buttons and headers for ease of access.
        
        Accessible/applicable images - Image files with an 'alt' tag as well as images that are aesthetically complementary to the website.
      - Safety
        
        The web app must have measures to create a safe environment for the user.
        
        Hiding user data
        
        Warnings/Pop-ups that ask for the user's private details
- - - - A functional menu bar that is present across all pages of the web app.
      - Ability to alter the order of how photos are displayed (perhaps by time uploaded)
      - Automatic labelling system by the most common labels as determined by the Google Vision API.
      - Have a secure login feature so that the user may save and access their photos that are in the catalogue.
    - - A UI that adheres to the design principles of CARP to benefit the user’s experience on the web app.
      - Cater the UE to all ages of users, as photography is not catered to merely adults. Therefore, language used must be simple and clear for the user’s benefit.
      - Colours used on the web app are high contrast to benefit user accessibility and the design principles of CARP.
      - Web app is responsive through the use of Bootstrap CSS code.
  - - - Use Google Vision APIs to automatically determine image recognition data
      - Use Flask, Bootstrap and SQLite
      - Save an image (filename) and image recognition data in an SQLite database.
      - User receives information about the data that has been recognised in an image and will be stored in the database.
      - A responsive interface for searching a file for image recognition, displaying image recognition data.
      - Search function for image via keyword
    - - User can select images from a folder
      - Page titles must appear in the browser tab for all pages.
      - Page titles must be unique and appropriate for each page
      - Accurate alt text must be used for all context images
      - Alt text is set to null for decorative images.
      - Headings must have a meaningful hierarchy.
      - All buttons must remain visible when page is zoomed into
      - All forms must have visible labels to allow interaction with voice inputs
      - Error/validation messages are clear and specific
      - Appropriate colour contrast
      - 5 second time limit for all moving/flashing content.
- - - - Adheres to standard grammar conventions
    - - Structure of QCAA Example
      - Voiceover of Prototype
        
        8-10 minutes
        
        Script for voiceover required
        
        In mp4 file format
        
        No larger than 500MB
      - Video of Slideshow
        
        1-2 min
        
        So it demonstrates the functionality of the prototype data-driven solution user interface and coded components
        
        no larger than 200MB
        
        in mp4 file format
    - - Annotations required
- - - - Sources
        
        Google Vision
        
        https://cloud.google.com/vision/docs/request
        
        OpenWeatherMap
        
        https://openweathermap.org/
      - Acquisition
        
        API's
        
        User
        
        The User will upload their photographs for storage, scanning, cataloguing and more
        
        OpenWeatherMap
        
        Weather data by geological location
        
        Google Vision
        
        To scan, interpret, and assign labels to the user's photographs
    - - Data will have to be accessed using and API key and stored using JSON
      - Weather data does not incorporate weather warnings (OpenWeather)
      - Data will have to be converted from JSON to a python dictionary
      - Weather data requires conversion in some cases (OpenWeather)
    - - Integer
      - Boolean
      - String
      - Float
    - - Google Vision
        
        Trainable machine learning models that classify images by custom labels using AutoML Vision
        
        Detects objects and faces, read handwriting, and build valuable image metadata with Vision API
        
        Uses machine learning to understand images with industry-leading prediction accuracy
      - OpenWeather
        
        [JSON]
        
        Wind
        
        Humidity
        
        Temperature
        
        Dew Point
        
        Cloud Cover
        
        Sunrise/sunset
        
        Minute, Hourly and 8-day forecast
        
        "Feels like" temperature
        
        Coordinates
        
        Pressure
        
        Archival Database
    - - When Accessed from their respective API's, all data will be displayed in the JSON format
      - To be used on the website, the JSON data must be converted into a python dictionary
    - - sqllite3 Database
        
        Tables
        
        Image table
        
        image_data
        
        privacy_status
        
        image_name
        
        member_ID
        
        image_id [PK]
        
        Members
        
        firstname
        
        surname
        
        member_id [PK]
        
        house
        
        yearGroup
        
        username
        
        password
        
        Label Table
        
        label
        
        score
        
        image_id [FK]
        
        label_id [PK]