Feb 20, 2017

So you want to make a pretty picture using the computer? Well no, if you are reading this that's probably the least of what you want to do. There are plenty of programs out there that can allow you to do that, so that can't be your goal for reading this article. Maybe you want to write a computer program that will allow you to practice multiple skills and produce something that you can both enjoy yourself and show off? Well, now we are getting somewhere.

Basic Outline

To begin with this program will be run over the web using a local server. In other words this program will create a web-page to display the content we create. This web page will be the basic blank canvas that we will paint, a few different colors to select from, and a save button. Also present but unseen on this page will be two different links, one which imports style and another functionality. Because we wish to save our priceless masterpieces we will also need a data file, but if we neglect to create one the program will do it for us, as a function of the save process. It will only create the data file the first time, and subsequently data will simply be added to it.

Languages and Functionality

One of the reasons that this projects is a good learning experience for beginners it the number of languages it integrates together in the course of making everything work. The displayed portion of the page is written in HTML, the styling is done through CSS, the engine is written in JavaScript, and the local server is run through Ruby.

Sinatra

The server may be the most unfamiliar part of this project to many, both in concept and in the tools it uses. To get Ruby to do this for us we are going to be using a Domain Specific Language named Sinatra. If you don't have Sinatra installed on your machine go and download it now. Sinatra allows ruby to display multiple HTML scripts as web-pages at the same time and pass information between pages all while retaining the basic functionality of ruby. It's a good thing. For our Mondrian painting project the Ruby/Sinatra combo will only be used as a way to save our paintings. Bellow is how your ruby page is going to look.

Lets start at the top. There are two requires, one for Sinatra and one for CSV, which is the language we are going to use to store our save data. (If you are unfamiliar with require, please acquaint yourself with it. Everything else on this page is a single web process called POST. POST allows you to manipulate and move data without creating a web-page for it, so it is perfect for our purposes. POST also is more secure than the other main Sinatra operation, but that does not matter to us so much. The process begins with post, than a portion of a web address. All Sinatra websites are hosted on localhost:4567,so this page will be hosted at localhost:4567/moving. A do loop is then called, than inside a do loop the operations of the page can occur. Params is a hash containing all the data that this page has received during its current iteration. So to extract the data we call .values on it(You will see during the JavaScript why we only need the values), then take the resulting data and pass it into a CSV file called data.csv using another do loop and <<, which is called piping. .open can be told how to interact with the file it opens, in this case the "a" right after the filename tells it to append the document, in other words to add the newly introduced data onto the end of data already present in the file, rather than erasing the preexisting data. That is about the whole of the ruby in this program

Javascript

Most of the operating parts of this project are powered by JavaScript, so hopefully you have used the language and are at least somewhat familiar with it. The JavaScript looks like this:

Quite a lot going on there! Once again we start at the top. Everything in this page of code is wrapped in an event listener, and the bulk of the code is chained functions. In fact the only non-function part of this code is the portion at the bottom calling three of the functions. Good stuff. Most of the functions are explained within the code, so before explaining how the code works I am going to go over some of the methods you may be unfamiliar with.

• window.addEventListener("load", function() This bit of code tells the program to look for an event then perform an action. In this case the event is the loading of the page "load" and the function is all the JavaScript in the program. The .addEventListener method will be used several more times, but this is the only time it will target window. Window is the true root of the DOM, which is very aptly explained here, just imagine there is another level above document.
• document.getElementsByClassName("color"). Document, as you hopefully just read, is the next level down of the DOM. This method scours throughout the entire HTML for objects tagged with the class of "color" and brings them back in an array for your coding joy. "color" of course can be any class that exists within the HTML.
• window.getComputedStyle(event.target, null).getPropertyValue("background-color") This is kind of a doozy of a line, and if I did not have such innate trust in you, dear reader I would break it up into multiple points. .getComputedStyle() is a method that brings up the CSS style of a named element. In this case it is getting the CSS style of event.target, that is whatever set off an event listener most recently. .getPropertyValue() then targets a more specific CSS style element, in this case background-color. So this line of code takes up all the CSS elements of something that set off an event target, then extracts from that group the background color. See? not too hard to understand.
• var xhr = new XMLHttpRequest(); xhr.open ("POST", "http://localhost:4567/moving?" + querystring); xhr.send(); This chunk of code is the other half of the Sinatra code we talked about earlier. Notice the "POST"? Anyhow the XMLHTTPRequest is a method of sending a request to server. "POST" is the style of request that is going out, the "http..." is the location of the request, and ... Whats a query string you ask? Good question. Query strings are ways of passing information to servers. So whenever you see www.whatever.com/thatthing?information, you know that the server has been passed a query string. You will only see that with a "GET" request, as "POST" requests such as the one we are using are hidden from the viewer, along with many other security measures.

So now that the more obscure methods are out of the way lets run down how this program works.

1. On loading an event listener is triggered, starting a function that contains all the code
2. A global variable named color is created, which will be used to pass information from variable to variable.
3. Function colorPrimer, is triggered, setting up event listeners on the four color swatches on the side.
4. Function distribute adds events listeners to all of the boxes in the painting, readying them to receive color from fillBox.
5. Next function save is triggered, once again adding an event listener, only this time the target is the save box in the lower left hand corner. Now your canvas is ready, and you can get to painting.
6. The first thing to do is to chose a color from the swatches on the left hand side. When one of the swatches is clicked, the colorPrimer event trigger goes off, loading and running function getColor. getColor records the color of the swatch that was clicked, and saves it to color. This can be done multiple times, the color changing to the newly selected color every time.
7. When one of the boxes inside the painting is clicked, function fillBox changes the background-color of the box to the stored background-color stored in the global variable color.
8. This process can be repeated, changing the background-color by clicking on swatches as desired, until the painting is to your liking.
9. When you decide that the painting is sufficiently masterful, clicking the save box triggers toCSV. This function gets all the elements labeled row, (in this case every box in the painting) and loops through them, saving the id of the box and background color as a hash-like object with an & at the end of it (to allow the multiple elements to function as one query) inside a recently made string object called query string. As white is the default color it comes up as a blank when back-ground color is checked for, so we need a placeholder value. Another hash-like object is then constructed out of an identifier and a timestamp. Thus when we get to the Ruby portion of this program and extract the values we will only have an in order picture of the painting, with only the background-color and a timestamp to identify its unique place in the universe.
10. This section of the program ends when this constructed snapshot, structured as a query string, of our painting is attached to a new XMLHttpRequest targeted at the Ruby section of our program and sent.

HTML & CSS

There is not much truly confusing about the HTML and CSS of this page. There are id tags and class tags, which if you do not understand can be learned about here. Floats were personally difficult for me to understand, but when it was explained to me that they remove the height property of their parent element, thus making every sibling element slide toward them, everything became much more clear. To unmake this height-less state another element is given a property of clear. Don't feel bad if this doesn't make a whole lot of sense, or seems like a silly way to do spacing. It is. Other that that everything should be pretty straight forward, and you are now at the point where if you want you can copy and paste everything I have given you and have a functioning program. I would suggest attempting to write the JavaScript yourself, however, as this will allow you to not only learn these techniques more fully, but to also get more of a feeling of accomplishment, which is important in programing. Good luck, have fun!