Clearing up MIST - GlimmerLabs/MathOverImages GitHub Wiki
Overview
Parts of the site (front end)
+-----------+---------+---------+-----------+------------+
| Workspace | Profile | Gallery | Tutorials | Challenges |
+-----------+---------+---------+-----------+------------+
Please read our Code Style Guidelines.
Workspace
This is the GUI (Graphical User Interface) where users can create their own images by dragging and dropping values and functions. Also on screen is a workspace key and a quick-start guide.
The workspace is a canvas element that is manipulated using a JavaScript library, KineticJS. KineticJS compiles different layers, groups, and shapes and aids in interaction using onclick
, onmouseover
, onmousedown
, etc. events.
- The template file for the create page is
Site/views/create.gejs
- The stylesheet for the create page is
Site/public/css/mist-gui.css
- The JavaScript for the workspace is in
Site/public/js
and is prefixed withmist-gui-
- The JavaScript for the renderer is in
Site/public/js
and is prefixed withmist-
Profile
Each user has their own profile page. This shows the user's bio and featured image and links to the account settings page. There are also links to each users' albums, images, and eventually badges. Albums are where users can group together images they're interested in. They can include images of their own or images created by other users.
- The template file for the profile page is
Site/views/profile.gejs
- The stylesheet for the profile page is
Site/public/css/profile.css
- The JavaScript for the profile page is
Site/public/js/profile.js
Gallery
A gallery is a collection of images. There are four main galleries: Random, Recent, Featured, and Top Rated. Additionally, every user has a gallery of their own images, and any albums they create. These can be accessed through their profile page Each gallery has nine images per page. When an user clicks an image, they are taken to that image's page.
The single image page has the title of the image, when the image was created, the image itself, the amount of stars the image has received, the creator of the image, various controls (stop/start, create a jpeg, see the code, etc.), and a comment section.
Tutorials
We are building a collection of both video and text tutorials.
Challenges
Here is where users are challenged to figure out how certain images are created. They can choose the difficulty and type of challenge, then are given a workspace to experiment with. Once they think they've successfully matched the image, they can submit their image to see if it's correct.
This part of the site is still in development. We hope to make it easier to add new challenges and to create a system to see which challenges users have completed.
Parts of the site (back end)
+----------+--------+--------+-----------+-------------+----------+------------+
| Database | Server | Routes | Templates | Stylesheets | Renderer | Javascript |
+----------+--------+--------+-----------+-------------+----------+------------+
Please read our Code Style Guidelines.
Big Picture
When the user (Web brower) loads a page at http://glimmer.grinnell.edu/page, the request gets handled by Node.js. Node.js looks up the page in routes.js and sometimes runs the Javascript program described therein. More often, it loads an .ejs file that has embedded Javascript. That Javascript relies on other libraries (which we find WHERE?). The Javascript also often connects with the database (how?) to obtain information that it then sends on to the user.
Example
Forthcoming.
Database
MIST uses an SQL database that houses a number of tables.
Users
id
name
email
...
Albums
id
user id
name
images
...
Images
id
code
user id
...
Workspaces
id
name
user id
elements (json)
...
Many database functions have already been written, and can be found in Site/functions/database.js
.
Files for database maintenance are in Site/database_maintenance
.
Server
The server uses a modified MEAN stack. As mentioned above, instead of MongoDB, MIST uses a MySQL database. All backend code uses Express.js and Node.js to handle HTTP requests. The language used for all backend tasks is Javascript.
Routes
When a link is clicked on, or a url is entered, routes.js tells the server what files to use in order to build the correct page. It exists in Site/app
.
Templates
Our templates are written in gejs, an in-house extension of ejs (embedded javascript). Ejs allows for conditionals and variables, among other things. The .gejs files create .ejs files, which then produce the necessary .html documents when a browser asks for a specific page. The .ejs files are made when you call the ./update
file in the terminal (while in the Site directory).
If you want to edit a page, edit the .gejs file NOT the .ejs file. The .gejs files allows for information that is common to every page be input more easily.
These template files are located in Site/views/
.
Before we began using ejs, our template files were written in jade, another template language. Because of this, a few of our pages (the text tutorials) are still written in jade. These can be found in Site/public/views
.
Stylesheets
The CSS stylesheets for various pages can be found in Site/public/css/
. The main stylesheet for the site is styles.css
.
Renderer
The renderer is what produces the images and animations in the browser. Given an expression, a canvas, and som dimensions, it will produce an image.
The renderer is written and javascript located in Site/public/js/
in files prefixed with mist-
(not mist-gui
).
(We need to describe each file.)
JavaScript
Most JavaScript files are located in Site/public/js
, however, functions for certain pages can be found in Site/functions
.