Title: MathCanvas
Author: James Reyes - jlreyes
Website: http://math-canvas.com
Overview: http://math-canvas.com/overview
Math Canvas is a project done for Carnegie Mellon's 15-237 Cross-Platform Mobile Web Apps class. You can find the course webpage at http://www.cs.cmu.edu/~237/
Because this is a cross-platform mobile web app it works both on iOS and Android devices, and theoretically, any semi-modern browser.
Math Canvas uses a Typescript Framework developed for general purpose mobile applications (https://github.com/jlreyes/ts-mobile-framework).
- Run a redis server (http://redis.io/)
- node webserver.js
- node socketserver.js
There are build.sh files scatterred throughout the project. They build various things depending on the folder they are in.
For more information about a file, each file contains a description of itself (some more detailed than others) at its top.
mathcanvas/
socketserver.js - The socket server
webserverer.js - The web server
mockups/
This folder contains mockups/storyboards for the application.
lib/
Globals.js - Globals for the web server
Util.js - Utility functions for the web and socket server
DbClient.js - Module to communicate with the database. Contains
all necessary functions used by the socket and web
server to read and write from the redis database.
JsonResponse - Contains a JsonResponse class that we use in our
JSON api.
commands/
room.js - Our JSON api for room commands
session.js - Our JSON api for session commands
static/
private/
(Future site of private files. Since everything is done via AJAX,
there is no need for private files at the moment)
public/
index.html - The root html file for mathcanvas
style/
normalize.css - Normalizer for css
page-chat-mobile.css - Special css for the mobile chat page
page-room-mobile.css - Special css for the mobile room page
index.css - Contains application framework css including all
the styling used by each page. Generated by
index/index.scss
icons/
(Contains icons for the application).
pages/
(This folder contains the code and html for each page within
the application. To keep things general, I will list a
barebones example)
/
build.sh - Automatically compiles the typescript and
html template.
page.js - The compiled page script. This contains all
scripts used in the application concatenated
into one file.
page.js.map - Source map mapping the page.js source code
to its corresponding typescript file. For
debugging.
template.js - The compiled dust templates (compiled from
page--.html)
scripts/
imports.ts - All typescript files include this and
this include all typescript files. This
makes compiling sane.
Page.ts - The typescript page file.
View.ts - The typescript PageView file for
this page.
views/
MobileView.ts - The mobile version of
the PageView
lib/
(This folder contains library typescript definition files)
scripts/
app.js - The application framework. Contains all the code
needed to run an app with my framework.
app.js.map - Sourcemap mapping app.js source code to its
typescript source code.
init.js - Starts the application, setting everything necessary
up.
lib/
(This folder contains the libraries used by my app )
app/
(This folder contains the typescript for my application
framework)
build.sh - Builds the app framework, copying over the
declaration file output to the page library
folder
app.ts - The app class
page.ts - Page class
pageview.ts - The page's view class
dialog.ts - Dialog class including the SimpleDialog class
and the SelectDialog class.
intent.ts - Intent class (used for starting pages)
socket.ts - Socket class (takes care of socket connection)
template.ts - Dust template class.
declarations/
(This folder contains type declaration files used by
this app)
modules/
contants.ts - Contants for the application.
globals.ts - Global variables for the application.
pagetransitioner.ts - Module containing functions
that transition from one page
to the next.
util.ts - Contains utility functions used in the app
templates/
(This folder contains library html dust templates)
Note about the project layout: Throughout the project you will see "mobile" within filenames. This is because I have built the project so that it should be easy to expand to desktop or tablet if I ever have the desire. Mostly everything is done with a MVC or MV structure so that I simply have to create a implement a new view (or in many cases, simply implement a new template) in order for the app to work on said device.
This work is licensed under the Creative Commons Attribution 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by/3.0/.