Extending the Art Viewer UX

Exercise 3

Let’s turn our attention to enhancing the user experience of the Art Viewer application. In the current state, the app does not contain any guidance on what the various input controls are used for, and the image displayed has a default view that some might consider too big or too small for their screen. Your task is to give the Art Viewer a couple of usability enhancements:

• Leverage the {cicerone} package to add an interactive help guide covering the key inputs such as department selection and approval / rejection of art pieces.
• Incorporate custom JavaScript code to create a zoom-in and zoom-out capability for the image viewer. See the reference below for a starting point.

Tip

A convenient set of JavaScript code for performing image zoom is available on Mickey Aharony’s Cool Tricks for Resising Images in JavaScript blog post. For convenience, here are two functions derived from that post which could be useful:

zoomin = function() {
  var myImg = document.getElementById("imgid");
  var currWidth = myImg.clientWidth;
  console.log('image width before zoomin is ' + currWidth);
  if(currWidth >= 10000){
      alert("You’re fully zoomed in!");
  } else{
      myImg.style.width = (currWidth + 100) + "px";
      var nextWidth = myImg.clientWidth;
      console.log('image width after zoomin is ' + nextWidth);
  } 
}

zoomout = function() {
  var myImg = document.getElementById("imgid");
  var currWidth = myImg.clientWidth;
  console.log('image width before zoomin is ' + currWidth);
  if(currWidth <= 20){
      alert("That’s as small as it gets.");
  } else{
      myImg.style.width = (currWidth - 100) + "px";
      var nextWidth = myImg.clientWidth;
      console.log('image width after zoomin is ' + nextWidth);
  }
}

Note the use of the getElementById("imgid") call. This tells the script to apply the function code to an element in the web application with that particular ID.