e-reader for the hard-of-seeing

For my sanity’s sake, this week I combined the pcomp and ICM assignments: for the former, we were to have three inputs send ASCII data to a p5 sketch; for the latter, we were to manipulate DOM elements.

I decided to make an e-reader of sorts for… people like my parents. People who still squint while wearing 2x magnification glasses and follow the words they’re reading with their fingers so as to not lose their place. So the e-reader should display one sentence of a text at a time, with a way to increase or decrease the font size easily.

I grabbed some random text from Project Gutenberg, but couldn’t figure out how to store a text file into a variable in p5 or javascript, so I just created a <p> tag into the <body> of my index.html file and dumped everything in there. When p5 selects an HTML element, it selects the tag itself, so I couldn’t store the text into an array and split by punctuation like I originally intended. Sooo I cheated by wrapping each sentence in a <p> tag and then containing the entire thing in a <div>. Then I selected all the<p> tags and displayed/hid them by their indexes.

Everything else went relatively smoothly. Arduino buttons would control the displaying of the paragraph tags, and a potentiometer would control the font-size style. Here’s the Arduino code:

Circuit:

And the p5 code: http://alpha.editor.p5js.org/xujenna/sketches/SJd9j9fTZ

Result:

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *