Tag Archives: World Wide Web

Introducing Media Circus

Media Circus is a scrolling marquee that displays amusing headline news mashups.

Although this project is not quite finished, it’s at a point where I can show it: what’s missing is the ability of the unit to automatically update the headlines (once every hour). Currently, this appliance needs to be manually updated.

Cutup

Media Circus Concept Drawing

Media Circus is composed of several modules, starting with “Cutup”, a mashup generator which is a php script that retrieves rss headlines from two Canadian news services, recombines them and displays 20 of them in HTML format. This isn’t by any means a new concept: it’s actually an old dadaist party game. William Burroughs used cutups in his writing. Visit Publicassemblage, runme.org, and Cut-up Machine for more online examples of this technique.

From this list, a human operator chooses one or two and makes minor edits to prepare them for inclusion in the unit. For the time being, I’m the ‘human operator’, and my choices are regularly uploaded to the ‘generalxcentric’ Twitter feed. I use Hootsuite to schedule the tweets throughout the day.

I’ll be building Cutups for the USA and the UK, and in the more distant future, provide a Media Circus mobile app that will enable users to generate their own news headline mashups!

The Hardware

The marquee runs on an Arduino Duemilanove (ATMEGA328 microcontroller). Power is supplied by an LM317T adjustable voltage regulator configured to output 5v. The regulator delivers up to 1.5 amps current, more than enough to drive the four SURE 0832 displays, but you must attach a heatsink—the regulator gets very hot.

I specify the ATMEGA328 because it has 2k of internal SRAM memory, and in the case of this application, it’s important. This microprocessor has three types of random access memory:

  • 32k Flash memory, of which about 2k is used by the Arduino bootloader.
  • 2k SRAM (Static ram), which is used to hold variables created by the program at runtime
  • 1k EEPROM memory, available using the PROGMEM function

The Flash memory is the same technology used in USB thumb drives. It is relatively slow to write to and reasonably fast to read from. It’s non-volatile, which means that it doesn’t lose data if power is removed. The 2k SRAM (Static Random Access Memory) is used for temporary storage of variables. It’s fast with both reading and writing, but it’s volatile. The EEPROM (Electrically-erasable Programmable Read-Only Memory) is also volatile, and it is very slow to write to, and fast to read from. The Arduino IDE does not have a function to make use of this memory. If you need it, you have to load the avr/prgmspace.h library and invoke PROGMEM.

For the purposes of this application, I quickly ran into the 2k SRAM limit, for two reasons:

  1. Each headline uses about 70 characters, which means that if I want ten headlines, I need to reserve 700 bytes (30%) of my available 2000 bytes of SRAM. That’s just to create the variables. Then my program had to concatenate the headlines into a long string of characters to be displayed by the marquee sign. That’s about ¾ of my available SRAM. I solved the problem by moving the individual headlines directly into EEPROM space at program startup, freeing-up 700 bytes.
  2. What actually drives the marquee is Gaurav Marek’s brilliant HT1632 library for Arduino. Along with this library comes a 5×4 font file. As you may have guessed from the name of the font file, each letter uses a rectangle of maximum 4 pixels across and 5 pixels down. However, the SURE 0832 display has a height of 8 pixels, so I redesigned the font for larger letters. The disadvantage to the new font file is size: my new font uses about 20% more space in SRAM than the original.

These SRAM space challenges were surmounted in time by moving the individual headlines into PROGMEM, and limiting the number of headlines displayed to seven.

However the SRAM requirements were not settled, because my plan was to attach an Ethernet Shield to the Arduino. The shield has its own library (conveniently included in the Arduino IDE), which requires more SRAM. But when I attached the shield, the unit failed to run. I tried reducing the headlines to one that simply read “help” but the marquee remained blank. There’s probably some interaction between the HT1632 library and the ethernet library, but I’m not competent or patient enough to try to resolve that issue.

I had another Ethernet shield, this one from Nuelectronics. This shield uses a different chip and has different libraries, and is altogether a more challenging device to integrate into an Arduino sketch. Although the shield does work with the marquee sketch, I was unable to adapt the library examples to my uses. That will have to wait for later.

SURE 0832 Display

The 0832 comes with ribbon cables and dip switches, prepared to be linked to three other modules. It’s a fairly simple matter to connect one module to the next and at the left end of the array, this is where you connect the Arduino. This is the pinout chart for my system, which uses Guarav Maurek’s HT1632 library. It permits easy individual pin assignments—a very useful utility, since Ethernet shields often use particular pins that can’t easily be changed. The pins on the SURE modules are labeled clearly on the back of each board.

Source Files

Click here for a ZIP archive of the Media Circus Arduino sketch and modified ‘font_5x4.h’ file for larger dot matrix type.

Update September 4, 2011

You can view more photos from this project at General Eccentric.

Update April 19, 2013

The General Eccentric Book and updated final code and drawings are available here.

Design Students: Just One Word

404 Page not found graphicIn the 1967 movie “The Graduate,” Mr. McGuire (Walter Brooke) takes young Ben (Dustin Hoffman) aside at his graduation party:

Mr. McGuire: I just want to say one word to you – just one word.
Ben: Yes sir.
Mr. McGuire: Are you listening?
Ben: Yes I am.
Mr. McGuire: ‘Plastics.’
Ben: Exactly how do you mean?
Mr. McGuire: There’s a great future in plastics. Think about it. Will you think about it?
Ben: Yes I will.
Mr. McGuire: Shh! Enough said. That’s a deal.

This short scene served to underscore the divide between the young and old generations of that age. The term ‘generation gap’ had just recently been coined. Today, advice is still given, and because of “The Graduate,” it bears much of the generational divide and paternalism that separates adviser and advisee. So it is with considerable unease that I offer my advice to students of design who are concerned about their future, post-graduation. Just one word: Web.

Old Guys Do Print

We know that the jobs for fresh graduates are in the digital realms, not in print. A couple of years ago NSCAD design grad and Halifax designer Jeff White posted an entry on his website called “How to Get a Job as a Designer:”

  • Don’t email all of the companies at one time.
  • Find out the names of the hiring person at each company you want to work at and address us individually. With the web, it’s really not hard, and shows some initiative on your part.
  • Don’t email us a big PDF of your work. Many of us receive a big chunk of our email on a handheld device, and downloading a 3MB PDF is a hassle, even over 3G.
  • There is next to no work for print designers in Halifax at this time. You’ll need (a lot of) web experience to really get in the door. I’d suggest spending the next few months honing your web design skills. Put together a killer portfolio online, find some non-profits looking for a designer, and go after them. We’re all looking for designers with fresh ideas who also understand how to code XHTML/CSS/Actionscript and everything else. Being a multi-talented designer will keep you employed.

Yet, for reasons I cannot fathom, the majority of students seem to be avoiding digital media. Real media is all the rage: the Craft Division can’t keep up with the demand for “book arts” courses. In design, print and product design are the stars of the show.

Design graduates who are qualified to do web design are reporting back to us that they have been successful landing web design work, and striking-out in their attempts to break into print and other design areas. The reason for this is simple: ‘old guys’ do the print stuff. They have years of experience and they’re unfamiliar with web design. So for students in design school, the key to their future success is one word: Web.

404 Course Not Found

Around the same time as his “How to Get a Job” posting, Jeff discussed “The State of Design Education in Nova Scotia.” I consider Jeff a very knowledgeable commentator—he’s taught two of our web design courses. In his post, he criticized design educators in general and NSCAD in particular for not paying enough attention to web design:

One thing a former student mentioned was the need for a more intensive studio-level course in web design. I couldn’t agree more. A dedicated course in web typography…is also absolutely essential…

…So what can we do? As industry members we have a responsibility to push our educational institutions to provide up-to-date and appropriate courses for students. We’re the ones who will reap the benefit. Just the other day I sat in the office of the president of a major local web developer who was crying for at least two web designers with front end coding (XHTML/CSS/Javascript) capabilities. I was able to think of only one person and he’s not even from our city. Industry groups like the GDC and ACIMA also need to get more involved in the students side of things, and the student side of ACIMA is something I’m going to be working towards next year. The GDC doesn’t seem to have much interest in the web at all, but if enough of us got involved, maybe we could change that.

NSCAD’s Bachelor of Design program has a web design course that is a requirement for graduation. It teaches students XHTML/CSS and how to create web standards-compliant websites. But Jeff has a point. Where are the other web design courses that provide more in-depth opportunities and experiences?

Intermediate Interactive Design

404 Page Not Found screen
404 page from myfamouswebsite.com

It’s no wonder that some people complain that NSCAD doesn’t educate its designers in web design: it seems as though only one, the Intro course, is ever taught. Intermediate Interactive Design is the follow-on course to the required introduction course, and we offer it every year. I teach the course when I can, and I love it. The course is an examination of the historical and theoretical foundations of interactive design and communication, with practical studio projects, such as learning how to install and develop websites using a popular open-source content management system, Joomla. We read and discuss some of the seminal articles in hypertext, user interface and information architecture theory and practice. Students have opportunities to learn new software and techniques, and to apply this knowledge to solving practical problems.

The course last ran in 2009 and may not run in 2011. But don’t blame NSCAD: the course was offered in 2010, and when only five students enrolled, it had to be cancelled.

The course is being offered again in Winter 2011 but only four students have enrolled. It risks cancellation for the second year in a row.

There is only so much that we, those of us from the older generation, can do to encourage young people to benefit from our mistakes and take advantage of our insights. When we do this too forcefully, we risk sounding paternalistic, or, even worse, irrelevant. Students know that they will leave university heavily in debt, and because they are paying for their education with much of their own hard-earned cash, they expect value for their money. And at the moment, students don’t seem to value web design.

Anti-Downloading Law Firm Caught Infringing IP

There is a copyright violation here.

It was recently reported by Boing Boing and The Hollywood Reporter that a legal firm called “US Copyright Group” is seeking to sue thousands of Bittorrent users for copyright infringement. The website for this group of lawyers uses stock photography and html frames (who uses frames nowadays?) — it’s a real classy design job. I was curious about these images. Having used some stock photography in the past, I know that, depending on the license, you have to give credit to the photographer, the collection and/or the image company.

Using TinEye it was determined that the stock image used on their “Solutions” page is Getty Images’ royalty-free photo #86512636. But just because it’s ‘royalty-free’ doesn’t mean that the photo can be used without credit. IP lawyers, above all, should know that the license agreement sometimes contains ‘gotchas’. Getty Images’ Royalty-Free Image and Footage License Agreement, Section 4.3, states that:

All Licensed Material used in an editorial context, must include the following credit line adjacent to the Licensed Material: “[Photographer’s Name]/[Collection Name]/Getty Images” or as otherwise shown on the Getty Images website. If Licensee omits the credit, an additional fee in an amount up to one hundred percent (100%) of the License Fee may be payable by Licensee, at Getty Images’ sole discretion. The foregoing fee shall be in addition to any other rights or remedies that Getty Images may have at law or in equity.

And as you can see in this screen shot, there is no photo credit for Getty Images. I wonder what “rights and remedies” the copyright holder will exact from these scofflaws?