Project 5:

A Magnifier

Due:  Thursday, October 12th  *in class*

In this project, you will build a web-based magnifier. The magnifier will have three different ways of operating, which will illustrate some of the strengths and weaknesses of different ways of magnifying digital content.

Yet Another Chrome Extension

The basis for this project will be a Chrome extension. To get started, copy and paste the extension that you built for Project 3 into a new directory. Enter its manifest to have a different name. I suggest something like, “Magnifier,” and then load it into the browser. I would disable the extensions you created for prior weeks. As you add in more and more, the chances increase that something will conflict with something else, and it might be confusing to tell what is going wrong.

Three Kinds of Magnification

For this project, you will implement three kinds of magnification.

Browser Zoom

The first, and most straightforward, kind of zoom that you will implement is to programmatically set the built-in browser zoom. When the user presses the + or - keys, increase or decrease the zoom level by .1. This can be done by setting document.body.style.zoom. No zoom is 1.0, higher numbers are more zoom, and smaller numbers are less zoom. Keep track of the current zoom level using a global variable in your script.

Graphical Zoom

The second kind of zoom you’ll implement is a graphical zoom, that just enlarges (or scales) the size of the pixels on the screen. When the user presses ctrl+ or ctrl- increase and decrease the magnification by .1. To do this, you’ll use CSS to transform the content to make it bigger and smaller. You can do that with the following command, which sets the CSS using JQuery:  $(“body”).css(“transform”, “scale(0.7)”) where 0.7 should be replaced by the magnification amount.

One challenge with pixel-based magnification is that content can grow larger than the screen. To make it easy for people to navigate content from left-right right, you’ll implement a function that will gradually move the content left when the mouse is within 100px of the left side of the screen and moves it right when the mouse is within 100px of the right of the screen.

A further challenge with the particular way the browser implements scaling is that even if you scale an element to be larger than the size of the window, it won’t automatically scroll that element. So, you’ll need to adjust the size (width) and position of the element manually to compensate. For instance, if the original $(“body”).width() is 1000px and you apply a transform to make it 1.5x as large, you’ll need to set the body’s width to 1500px.

By default, the transform happens from the middle out, so you’ll also need to set the position of the element (in this case the whole BODY) to move over to the right by half the increase in size. To make it so you can move it, you’ll need to set the positioning type to “relative,” which you can do with
$(“body”).css(“position”, “relative”).  This basically means that when you set the left and top properties, they’ll be interpreted relative to wherever the element would have been otherwise. So, in this case, you’d say the “left” css property to “250px”, e.g., $(“body”).css(“left”, “250px”). This should achieve the graphical zoom magnification that you would expect.

You can see when the left/right scrolling is necessary by seeing when $(document).width() is larger than $(window).width(). To detect the position of the mouse, use the mousemove event handler. Get the x coordinate from the event, if it is close enough to the edge of the window, then animate scrolling of the document in the desired direction, which you can do using JQuery’s scrollLeft (scrollLeft documentation here). Be sure to check if your program is already scrolling before scrolling again to avoid too much scrolling.

Refactoring Content

The final way that you’ll magnify content for this assignment is to refactor some of the content to make it much easier to see and in the center of the screen. Use a selector much like you did in your third project. This time instead of reading the content when the user presses the spacebar, create a new larger and centered element on the screen that displays the content with big text. When the user presses escape, make the large centered box disappear.

To make a new element in JQuery, you can just write the HTML for the element inside the $ function, i.e.,  $(“<div id=’mydiv’></div>”) will create a new element with id ‘mydiv’. It still needs to be added to the page, which you can do with the append function.

So, something like, $(“body”).append($(“<div id=’mydiv’></div>”))

You can create a centered element above the rest using CSS like:
position: fixed;

left: 500px;

top: 200px;

z-index: 10;

Ideally, you would adjust these to make your content appear right in the middle.

You can make your content have a bigger font, by, for instance, setting its font-size to something large, i.e., font-size: 30px;. You might also want your content to have a fancy rounded border, like we did in class, with the “border-radius” property.

Here’s a screenshot of the example refactoring that we did in class:
example from class showing the nice refactored display of some otherwise awful looking text

Grading

Main components of our grading will be:

Using the appropriate keyboard commands, does the following happen:


This page and contents are copyright Jeffrey P. Bigham except where noted.