I’ll give in this post a technical overview “Coding View”, and how it works and why I’m using specific library, plugin, or even techniques.

Let’s start with the basic structure of the coding view it self;

Coding view divided mainly into two parts:
1 – The left side part which contains the list of codes and their codes, in a colored box (users decide the color of each box in initiate step), and then Newspaper info (name, publication date, image source)

2 – The right side (or the middle part, because the right side is part of the layout) which contains the images slider “Carousel”, and we have faced two options for displaying images in Coding view:

1 – The first one is to display image by image and submit each image highlighted areas values by itself, and the problem with this is the following; first even if the user coding 10 images it take time and the user will even take time to skip images and back to them later, so the main problem was the navigating between images, but this option was much simpler to handel on the front side and even on the server side, becuse we will be dealing with only one image at a time, but for scalability purpose it will be bad, and we will need to refactor a big part of the code for larg set of images

2 – The second one, which we actually using now is using a bootstrap jQuery slider plugin http://twitter.github.com/bootstrap/javascript.html#carousel, to display a large set of images with a very easy navigation way, so users can slide to any image to code first and the back again to the uncoded images, the problem with this option is it impose more complexity on how to store the highlighted area in the browser and how to submit this values to the server

Before explaining how we store highlighted areas, we should know how we generate them, which is done using imgAreaSelect jQuery plugin http://odyniec.net/projects/imgareaselect/ which is simple and easy to use.

I’ll explain now how we store highlighted areas in the browser: we are using hidden fields to store the values of highlighted areas, line 3 show hidden field with an id for instance “image3_ha1” with default value “0”, and this field is used to tell us if highlighted area number “1” is used with image or not, then line 4 which store the code id which this highlighted area is represent, by setting the number we can decide the color of the highlighted area (I’ll explain this part after this), then line 5 which stores the x1 value and so on for the following fields (for now we are using x1,y1, width, and height to draw the highlighted area only) and the same for the fields starting from line 11, the differenc is that it represent the other highlighted area

We are using just two highlighted areas to code, but we are going to make it unlimited in the next version

  1. <% @image_counter.downto(1) do |ic| %>
  2.  <div id="image<%= ic %>">
  3.   <%= hidden_field_tag "image#{ic}_ha1","0" %>
  4.   <%= hidden_field_tag "image#{ic}_ha1_code_id","0" %>
  5.   <%= hidden_field_tag "image#{ic}_ha1_x1" %>
  6.   <%= hidden_field_tag "image#{ic}_ha1_y1" %>
  7.   <%= hidden_field_tag "image#{ic}_ha1_x2" %>
  8.   <%= hidden_field_tag "image#{ic}_ha1_y2" %>
  9.   <%= hidden_field_tag "image#{ic}_ha1_width" %>
  10.   <%= hidden_field_tag "image#{ic}_ha1_height" %>
  11.   <%= hidden_field_tag "image#{ic}_ha2","0" %>
  12.   <%= hidden_field_tag "image#{ic}_ha2_code_id","0" %>
  13.   <%= hidden_field_tag "image#{ic}_ha2_x1" %>
  14.   <%= hidden_field_tag "image#{ic}_ha2_y1" %>
  15.   <%= hidden_field_tag "image#{ic}_ha2_x2" %>
  16.   <%= hidden_field_tag "image#{ic}_ha2_y2" %>
  17.   <%= hidden_field_tag "image#{ic}_ha2_width" %>
  18.   <%= hidden_field_tag "image#{ic}_ha2_height" %>
  19.  </div>
  20. <%end%>

We are using bootstrp jQuery modals plugin http://twitter.github.com/bootstrap/javascript.html#modals to allow users to select the code of a highlighted area the following snippet shows how codes colors attached to the options, and it’s important to point this part because; loading codes colors fetched from this elements, in line 3, we have added an attribute to the radio button element called “color” and sets it value with the code color, and also code_id element to store the code id, this two attributes is very important, becuase we are using them to set the highlighted areas colors

  1. <% @thread.codes.each do |code| %>
  2.   <%= radio_button_tag "codes", code.code_text, false, color: code.color, code_id: code.id %> <%= code.code_text %><br>
  3. <% end %>

Last part which is submiting buttons at center part, “Display Now” button which will direct the user to display view, “Clear Highlighted Areas” which will reset all hidden fields values and highlighted areas, “Nothing to Code” which will add a box of the images saying “Nothing to code here” (will implemented soon), last button “Cancel” which will delete the thread (will implemented soon)

We spend our last meeting reviewing the milestones we’ve created to manage the large ammount of issues we have pending in Github. The version 0.1 is working!
Notes from our July 10th 2012 meeting:
Reviewing bugs-features 1st milestone 0.1
  • Second time I run the app I get: “An error occured while installing factory_girl (3.0.0), and Bundler cannot continue.”
  • Listing of all the front pages images in display view. Fixed. Just commited.
  • Sometimes the scraper fails. Limitation of dates? For example: October 2011 fails…. fixed. Line 0 of lib/scraper.rb remove the 0, it was causing problems for months 10, 11 and 12.
2nd milestone. Review 0.1.1. July 11th 2012
  • Add the limit date for kiosko when creating a thread. Is it different for dif newspapers? I think so. It would be great to hae a messsage like: “x images from x newspapers have not been found.” We should build and scraper (for future updates) to detect when a newspaper got in kiosko.net)
  • Edit: thread features (see highlighted areas in the coding view once you come back from display). Which thing will not be edtitable? Dates and media could not be changed, so the scraper doesn’t run again.
3rd milestone 0.1.2  July 13th
Coding view:
  • Question: when coding large ammount of images, it is difficult to know where we are? which order the newspaper would appear? Order by date and not by newspaper? Let’s try to order by date.
Display view:
  • Newspaper by row https://github.com/numeroteca/pageonex/issues/31 Newspaper name in the first column.
  • Creating thumbnails for front pages https://github.com/numeroteca/pageonex/issues/22 and resize those thumbnails, not the full size pages.
  • Add link when you click on an image, so you can re-edit it.(recode images)
  • Add dates to have a reference (for each column of images shows the date of them)
  • Quantification of highlighted areas: bar graph.
  • Colors of codes in display view.
4th Online test 0.1.3 July 15th 
  • Online test? We need an online version for beta testers. Which are our need in term of server, domain… so I can prepare. We can use http://www.heroku.com/ for first test, and then start building it in our own server.
  • Compatibility with other browsers: (bootstrap itself provide this feature ) http://twitter.github.com/bootstrap/
Beta testing!
5th milestone. Dey: To be decided.
Build the tool in our own server pageonex.com
Open Id acces or Twitter…
Scraper – creating thread:
  • Open/close feature
  • Select media sources (frontpages) from different moths. Now we can only select days within a month.
  • Be able to select scraper source:
    • Kiosko.net
    • [the other built in our scrape.rb El País, NYT
  • While scraping: show files that are being downloaded/failing
  • Show which threads are opened (all threads) and be able to search.
Display view
  • Export graph and data
  • Select / unselect newspapers
  • Select order in which newspaper appear.
  • Question: how non-coder will be view the display? any diference in the links to coded image?
Ahmd should start posting more regulary:
Start with a post about the Coding view.
  • Why jquery carrousel vs. single view.
  • How highlighted ares are handled, gem used? storing coordinates? storing width-height?

And keep going with other issues to explain different decisions in the development process.

We are now is so close to the first Version 0.1, which will basically give the user the following features; to be able to create an account and creating a Thread, with basic info; name, start date, end date (in the same month, just for alpha version), description, choosing and number of newspaper, and Topics  to code with it and for each topic the user can add a color and description.

Then user start to code scraped images (opened issues) with selected topics, the color of  highlighted area will be based on the topic color, maximum number highlighted areas for alpha version is two, and if the user want to add any other highlighted areas, the system will prompt the user with the option to clear the current highlighted areas or skip adding other highlighted area, after that the display, it’s not finished yet.

Here’s a UI – first drafts and Some of opened issues

User interface drafts from some weeks ago

First previews form the Ruby On Rails application: