Create a Visual Library of Images in HTML5 Canvas: Mouse Management and State Storage

By HTMLGoodies Staff  |  eMail Email    Print Print  Post a comment

written by David Catuhe

Last week in our tutorial on How To Create a Visual Library of Images in HTML5 Canvas, we told you about cards loading and display, as well as how cache is handled in our application. This week we're going to discuss mouse management and state storage.

Mouse management

To browse our cards collection, we have to manage the mouse (including its wheel).

For the scrolling, we'll just handle the onmouvemove, onmouseup and onmousedown events.

Onmouseup and onmousedown events will be used to detect if the mouse is clicked or not:

  1. var mouseDown = 0;
  2. document.body.onmousedown = function (e) {
  3. mouseDown = 1;
  4. getMousePosition(e);
  5. previousX = posx;
  6. previousY = posy;
  7. };
  8. document.body.onmouseup = function () {
  9. mouseDown = 0;
  10. };

The onmousemove event is connected to the canvas and used to move the view:

  1. var previousX = 0;
  2. var previousY = 0;
  3. var posx = 0;
  4. var posy = 0;
  5. function getMousePosition(eventArgs) {
  6. var e;
  7. if (!eventArgs)
  8. e = window.event;
  9. else {
  10. e = eventArgs;
  11. }
  12. if (e.offsetX || e.offsetY) {
  13. posx = e.offsetX;
  14. posy = e.offsetY;
  15. }
  16. else if (e.clientX || e.clientY) {
  17. posx = e.clientX;
  18. posy = e.clientY;
  19. }
  20. }
  21. function onMouseMove(e) {
  22. if (!mouseDown)
  23. return;
  24. getMousePosition(e);
  25. mouseMoveFunc(posx, posy, previousX, previousY);
  26. previousX = posx;
  27. previousY = posy;
  28. }

This function (onMouseMove) calculates the current position and provides also the previous value in order to move the offset of the display window:

  1. function Move(posx, posy, previousX, previousY) {
  2. currentAddX = (posx - previousX) / visuControl.zoom;
  3. currentAddY = (posy - previousY) / visuControl.zoom;
  4. }
  5. MouseHelper.registerMouseMove(mainCanvas, Move);

Note that jQuery also provides tools to manage mouse events.

For the management of the wheel, we will have to adapt to different browsers that do not behave the same way on this point:

  1. function wheel(event) {
  2. var delta = 0;
  3. if (event.wheelDelta) {
  4. delta = event.wheelDelta / 120;
  5. if (window.opera)
  6. delta = -delta;
  7. } else if (event.detail) { /** Mozilla case. */
  8. delta = -event.detail / 3;
  9. }
  10. if (delta) {
  11. wheelFunc(delta);
  12. }
  13. if (event.preventDefault)
  14. event.preventDefault();
  15. event.returnValue = false;
  16. }

We can see that everyone does what he wants Sourire.

The function to register with this event is:

  1. MouseHelper.registerWheel = function (func) {
  2. wheelFunc = func;
  3. if (window.addEventListener)
  4. window.addEventListener('DOMMouseScroll', wheel, false);
  5. window.onmousewheel = document.onmousewheel = wheel;
  6. };

And we will use this function to change the zoom with the wheel:

  1. // Mouse
  2. MouseHelper.registerWheel(function (delta) {
  3. currentAddZoom += delta / 500.0;
  4. });

Finally we will add a bit of inertia when moving the mouse (and the zoom) to give some kind of smoothness:

  1. // Inertia
  2. var inertia = 0.92;
  3. var currentAddX = 0;
  4. var currentAddY = 0;
  5. var currentAddZoom = 0;
  6. function doInertia() {
  7. visuControl.offsetX += currentAddX;
  8. visuControl.offsetY += currentAddY;
  9. visuControl.zoom += currentAddZoom;
  10. var effectiveTotalCardsInWidth = colsCount * cardWidth;
  11. var rowsCount = Math.ceil(totalCards / colsCount);
  12. var effectiveTotalCardsInHeight = rowsCount * cardHeight
  13. var maxOffsetX = effectiveTotalCardsInWidth / 2.0;
  14. var maxOffsetY = effectiveTotalCardsInHeight / 2.0;
  15. if (visuControl.offsetX < -maxOffsetX + cardWidth)
  16. visuControl.offsetX = -maxOffsetX + cardWidth;
  17. else if (visuControl.offsetX > maxOffsetX)
  18. visuControl.offsetX = maxOffsetX;
  19. if (visuControl.offsetY < -maxOffsetY + cardHeight)
  20. visuControl.offsetY = -maxOffsetY + cardHeight;
  21. else if (visuControl.offsetY > maxOffsetY)
  22. visuControl.offsetY = maxOffsetY;
  23. if (visuControl.zoom < 0.05)
  24. visuControl.zoom = 0.05;
  25. else if (visuControl.zoom > 1)
  26. visuControl.zoom = 1;
  27. processListOfCards();
  28. currentAddX *= inertia;
  29. currentAddY *= inertia;
  30. currentAddZoom *= inertia;
  31. // Epsilon
  32. if (Math.abs(currentAddX) < 0.001)
  33. currentAddX = 0;
  34. if (Math.abs(currentAddY) < 0.001)
  35. currentAddY = 0;
  36. }

This kind of small function does not cost a lot to implement, but adds a lot to the quality of user experience.

State storage

Also to provide a better user experience, we will save the display window’s position and zoom. To do this, we will use the service of localStorage (which saves pairs of keys / values ​​for the long term (the data is retained after the browser is closed) and only accessible by the current window object):

  1. function saveConfig() {
  2. if (window.localStorage == undefined)
  3. return;
  4. // Zoom
  5. window.localStorage["zoom"] = visuControl.zoom;
  6. // Offsets
  7. window.localStorage["offsetX"] = visuControl.offsetX;
  8. window.localStorage["offsetY"] = visuControl.offsetY;
  9. }
  10. // Restore data
  11. if (window.localStorage != undefined) {
  12. var storedZoom = window.localStorage["zoom"];
  13. if (storedZoom != undefined)
  14. visuControl.zoom = parseFloat(storedZoom);
  15. var storedoffsetX = window.localStorage["offsetX"];
  16. if (storedoffsetX != undefined)
  17. visuControl.offsetX = parseFloat(storedoffsetX);
  18. var storedoffsetY = window.localStorage["offsetY"];
  19. if (storedoffsetY != undefined)
  20. visuControl.offsetY = parseFloat(storedoffsetY);
  21. }

This article was reprinted with permission from Microsoft Corporation. The original is available here. This site does business with Microsoft Corporation.

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  • HTML5 eBook

    HTML5 ebook

    HTML5 is the new standard that is expected to take over the Web. New versions of browsers are already starting to support the advanced features. Learn why HTML5 is important and discover how to use start using it today.
  • Html5 Logo