Liberal Arts Modules 2014

From CSclasswiki
Jump to: navigation, search

--Thiebaut 15:01, 9 September 2014 (EDT)

Poster (3/23/15)


To be presented at the Consortium for Computing Sciences in Colleges, New England, April 2015.

LOG of TO-DO Actions


  • First meeting. Introduction
  • Liberal-Arts Modules (LAM) -- Context: Research Education
  • Projects so far
    1. Campus Map
    2. Tagging images
  • Today
    • Learn how to edit a Mediawiki wiki-page. Some resources:
  • Resources for learning WikiMedia language
  • For the next few weeks
    • Redo Homework 12, but this time, use most of the building on campus (as many as you can).
    • Rewrite Lab 12.
    • Do a survey of mapping software, and how maps are used today. You can start by visiting DT's page on data visualization.
    • Eventually, we want a short survey of the history of map visualization at the beginning of our page.
    • Check if Dava Sobel is still on campus this semester. She would be a great person to interview for background material.


  • Meeting today
  • List of things to do for next week
    1. take solution form Homework 12 and implement it.
    2. Make it work
    3. Digitize a few buildings (maybe 10, or more)
    4. Display map with different colors for different centuries.
    5. Start a new page, with progress report.
    6. Put a screen copy of the map created.


To Do:

  • link to CSC111 homework
  • Code for digitizing the map
  • The map
  • the python file with building names and dates.
  • CSV file for digitized building
  • add a link to graphics library: graphics librarly link
  • Think about generating a gradient of colors for the building colors: from gray (for example) for old buildings, to orange for more modern ones (link)
  • Use this new map of the campus link
  • And convert this map from a pdf to a gif or jpg.


  • We setup Dropbox on the Lab Computer: good tool to use in the future.
  • We added Ford Hall to the gif of the campus.
  • Found a URL for a possible set of RGB values that create a gradient. We might be able to use that for coloring the buildings.
  • To do for next week:
  • Add the Health Center to the gif file
  • Generate a simple gradient (collection of rectangles next to each other) with the RGB colors found in the URL mentioned above.
  • Digitize the map
  • Start coloring!


  • Good meeting today!
  • Figured out how to generate
    • A list of gradient colors (by hand, but we need 20 or so different colors)
    • A csv file containing
      • The building names
      • The building's year of construction
      • A color corresponding to the year
      • The building coordinates

For next meeting (10/20)

  • Clean-up the Python program that generates the new CSV. Document it well. Add a main() function. Make it modular by using functions for the different actions.
  • Document well what somebody would have to do to make it work for a different campus, or with a different gradient of colors. Make the number of things that need to be edited as small as possible.
  • Optionally, it might actually be nice to have the list of colors in a text file that is read by the Python program. You could have a csv of colors, one r, g, b group per line.
  • Generate a map with the different buildings and the different colors.
  • Some ideas to think about to add a bit of sophistication to the final product:
    • Could we create some kind of movies where not the whole map is displayed at once, but first the oldest buildings, then the next ones in time, maybe advancing 10 years in time for every second of computer time?
    • Could we have some buttons or some way of picking some particular year and see what the campus looked like then?

Meeting 11/2/14: New Project

--Thiebaut 07:44, 6 November 2014 (EST)

  • nice collection of drawings by Jackie on our next project and approach:

LAM2 approach1.jpg LAM2 approach2.jpg LAM2 approach3.jpg LAM2 approach4.jpg LAM2 approach5.jpg

  • TO DO: attack the project following the steps highlighted above!

Meeting 11/25/14: Bunny + Annotation

  • The application is taking form!
  • Some suggestions/questions:
  • Could we put all the loose code of the program in a main() function?
  • Add a header to the program and to the functions
  • Change the format of the csv file so that it includes the name of the image it corresponds to.
  • You can make the name of the csv file contain the name of the image, e.g. bunny.jpg.csv
  • You can put the name of the file in the first line of the csv file (this breaks the format of the csv file, but that's ok)
  • It would be nice to have a lineEdit at the top and a LOAD button that would allow one to load up a csv file, have its image appear, as well as the annotations.
  • When you click on the image to set an anchor for an annotation, put a cross or a dot on the image so that the user understands that something has happened when she clicked the image. (a cross allows for more precise positioning).

Meeting 12/8/14: Cat/Bunny Annotation

  • The cat and bunny are annotated!
  • Some good Python sophisticated code was discovered and used. We cleaned up the sorting of the annotations by y-coordinates. Works well
  • The lines from the annotation points to the text boxes get covered by something at the top... Maybe keep the lines in a list, and redraw them regularly?

Items to work on for next time (2015)

  • Improve documentation of the code (look at printed wiki page annotated by hand)
  • figure out how to erase & redraw screen so that new annotation can fit at right place and old lines are updated (currently the old lines linking annotation points and text boxes are not erased). Might need to implement a list of lines.
  • figure out how to show full lines between points and boxes.
  • remove the marker indicating the annotation point when the user presses ENTER
  • accept the new annotation text when the user presses ENTER
  • to edit a new entry, make the program check whether the user clicked on a pixel close to an old annotation point. If so, copy the text of the annotation in the entry box for the user to edit the text. Pressing ENTER should show the edited annotation back in its right place.

Continuing into the New Year!

  • Key Ideas for project
    • Add dot to the ends of the lines linking to the boxes
    • Limit text box to hold 50 - 75 words ---> we have to know the font size; the tricky part is knowing the height of the box; we can get the width by using the size of a and multiplying a x (#ofchars + #ofspaces)
    • Be able to support up to 10 boxes
    • BE ABLE TO EDIT: essentially click a box and it's text is shown in the entry window
    • Also be able to delete annotation: maybe you click the box same as when editing and a delete button appears next to the entry window
    • Clickable web links
    • Insert another jpeg: Display a window of 6 or 8 images for example and if you click on one then a new window with the image and its annotations appears.
    • Collapse boxes so that theres more room --> needs more research (keyword: popups)
    • Add/Edit titles and links
    • Change background to black
    • Image and window dynamically resize
    • Maybe be able to choose the size of the image (small,medium,large)
    • Zooming

For 2/2/15

  • Research the ability(or inability) to click on a url link in tkinter and have it open in the default browser
  • The idea is to have the link to the museum at the top

2/23/15 Meeting

  • Went over poster for CCSCNE
  • Spent the rest of the time looking at ways to work with Tkinter to clear the canvas. The problem seems that the image and the lines are registered with the canvas, and the labels are not packed, but placed on the canvas. As a result, the delete( ALL ) function does not remove the labels.
  • Suggestion: create a packing box where the labels can be placed, and pack the labels inside that packing box. it might be easier this way to remove the labels when a new label needs to be added.

3/2/15 Meeting

  • Tips for cleaning up code to be more readable
  • Discovered how to clear and redraw the photo and lines
  • Discovered how to erase the labels but need to work on redrawing the new labels
  • Key: use the Frame widget


Progress For Image Annotation Project

To do for Week of 3/30/15

  • Plug all the holes in the program! Should not be allowed to click outside the image.
  • Lines should align with the boxes
  • Should not be allowed to generate several crosses on the window... if click twice, remove previous cross...
  • Add a new Quit button.
  • Allow user to process several images one after the other. It's ok if we have to destroy the root window every time.

  • Think of putting code + images + information about project in LAM wiki...

2015 CCSCNE Poster Presentation