In the last post I’ve did an overview of how Coding works, so in this post I’ll walk you through the Display view and how it works
Let’s start with the basic structure of the display view it self;
Display view is divided mainly into three horizontal sections
- First section; contains information about the thread, basic information (name, description, status, starting date and ending date) and then number of boxes representing the codes and their colors
- Second section; contains the bar chart of the calculated “Surfaces Percentage”, it’s not working in this snapshot but it will be working soon.
We are using Rickshaw which is JavaScript toolkit for creating interactive real-time graphs, and to use it we have to include three files as the following
<%= javascript_include_tag “d3.min.js”, “d3.layout.min.js”, “rickshaw.min.js” %> and then create an object from Rickshaw.Graph and pass the JSON object of the information to display which is the surfaces percentage for each day in set of images from different magazines, I’ll write about how this values can be calculate exactly in another post after deploying the beta version - Last section which showing the the highlighted images, each newspaper images appears in an individual row
I’ll try to explain here how we load this images and arrange them in rows and calculate the size of highlighted areas and their position;- First how to calculate the size of the images based on the size of the page, specifically the size of the div which contains the images of a newspaper:
- gets the width of the row div which contains images for any newspaper
- gets the number of images in a row
- divide this width by the number of the images, to specify the height of each image
- then calculate the ratio between the original image and the new image size
- based on this values I do set the images size and highlighted areas
- First how to calculate the size of the images based on the size of the page, specifically the size of the div which contains the images of a newspaper:
Try to zoom in and out and you will see how the images and the highlighted areas are calculated, that is happen because I’ve also bind the handler with resize event on the window object