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 with mist-gui-
• The JavaScript for the renderer is in Site/public/js and is prefixed with mist-

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.