Git Product home page Git Product logo

comake's Introduction

CoMake

CS Senior Project Capstone 2016-2017, University of Colorado Boulder

Background

CraftML is a 3D modeling markup language that has been used to create 3D printable tactile pictures for the visually impaired. However, it is difficult for people without prior coding experience to learn, and it is not collaborative.

How Comake Works

Comake transforms CraftML's 3D coding workspace into a user interface that simulates a 2D interaction environment, termed 'canvas'. Users can:

  1. Arrange and modify existing CraftML models by manipulating their images in Comake
  2. Check work with a 3D previewer
  3. Generate usable CraftML code from a canvas
  4. Collaborate with users in real time

Technologies

Because Comake is best used for real-time work, our stack is comprised of:

  1. Firebase, a real-time cloud database hosted by Google
  2. React, a JavaScript library for building fast and scalable websites
  3. Redux, a state manager for Javascript applications
  4. Material UI, a user interface library based on material design principles

Documentation

Contributors

Sponsors

Tom Yeh & Peizhe Cao, Sikuli Lab | University of Colorado Boulder


Our live site can be accessed here.

comake's People

Contributors

ameletyan avatar calebhsu avatar ianchar avatar seanhansberry avatar sperry94 avatar zachlamb avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Forkers

gomberg5264

comake's Issues

Fetch things from Firebase

Acceptance Criteria

  1. Not getting things from test canvas
  2. Hook up so we pull down user's list of canvases

Users see their own canvases

Acceptance Criteria:

  • The website no longer writes to the test ref in firebase, but writes to user-specific grids

Set up page structure with react-router

Acceptance Criteria

  1. Four placeholder pages based on the structure we determine
    1.1. Reorganize components into folders accordingly
  2. If possible, start layout component wrapper route

Display associated canvases in user's home page

Blocked by #56 until required actions/reducers are written.

Acceptance Criteria

  1. Display all canvases user is member of on their home page
    1.1 Keep the static image for now, once we have the screenshot API in place, we can retrieve the capture from Firebase

Propose/document database rules

Acceptance Criteria

  1. Define set of allowed user actions based on user type
  2. Document rules
  3. Send to team for approval before implementing

Finalize DB schema

Complete db schema (with current information).
Populate with some mock data

High-Fidelity Mockup

Acceptance Criteria

  1. Have a demo-ready prototype, including
    1.1. Basic functioning signup/login
    1.2. Create canvas
    1.3. Basic click & drag on canvas
    1.4. User can access previously saved canvases

Create Redux Actions/Reducers

Create all actions and reducers based on what front-end team gives. This includes writing all unit tests and integration tests (and fixing the pre-existing ones)

Set up back-end service

Acceptance Criteria

  1. Create service to handle user sharing, admin functions, etc.
    Note: not final functionality

Refactor redux

Acceptance Criteria

  1. Change the structure of the state for redux
  2. Fix tests so that they look at specific branch of state rather than whole state.

BUG: User admin field is a string, should be a bool

When user data is created, the admin field is set to "false" (string) instead of false (boolean). This results in the database rules not working as intended (no major breaking changes however).

AC:

  • admin field is initialized to a boolean instead of a string

Add rotation

Acceptance Criteria

  1. Figure out how to get images to rotate

Create mock sidebar

Acceptance Criteria

  1. Implement mock sidebar for canvas page per Zach's mockups
    1.1 Make it look similar to Google Drive's sidebar

Implement canvas creation service

Implement the canvas creation service in the backend.

Acceptance Criteria:

  • A canvas creation service will be made that handles user requests to create a canvas
  • The client service package will be updated to create the proper request for the canvas creation service
  • Front end add button is hooked up to backend creation

Implement sharing service

Implement the canvas sharing service in the backend.

Acceptance Criteria:

  • A canvas sharing service will be made that handles user requests to share a canvas
  • The client service package will be updated to create the proper request for the canvas sharing service

Mock Firebase

Acceptance Criteria

  1. Mock Firebase for testing purposes
    1.1 Look into MockJS

Create placeholder model cards on home page

Acceptance Criteria

  1. Start making placeholder cards as discussed for home page
    1.1. Include the detail overlay / popup

This is mostly for proof of concept / making it easier to hook into backend once we actually have models.

Keep users signed out

Acceptance Criteria

  1. When user clicks "Sign Out", they shouldn't be logged back in automatically.
  2. Maybe ask Tom about this

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.