DP Code - Page Image Widget

From DPWiki
Jump to navigation Jump to search

Exploratory work on creating a PageImage JS widget that attaches to a <div> and handles all user interaction with the image.

Rationale

We want to revamp and consolidate the proofreading interfaces. Part of that will be figuring out how to manage image viewing (panning and zooming). This is a piece we can work on now and use within the current Standard and Enhanced interfaces -- replacing the current image pane contents -- allowing incremental development. It's also a widget we can reuse across the site in places where we show a page image.

UX Design Philosophy

  • Keep the image controls proximal to the image, not in the text pane
    • This keeps everything related to the image with the image, making it a truly modular design we can reuse across the site.
    • This also means removing image manipulation from other parts of the proofreading interface (eg: text frame, WordCheck)
  • Use modern, expected pan and zoom controls
    • Buttons for zooming in and out
    • Touch screen (and often touch pad) zoom controls (pinch-to-zoom)
      • Laptops and touch screens use the now-common pinch-to-zoom to zoom images in and out.
    • Panning via scroll bars and touch pads/mouse wheels
      • This ensures that scroll wheels and touch pads can be used in a natural way to pan the image.
    • Use mouse-friendly panning tools (click-and-drag)

Core functionality

  • Zoom to a specific %
  • Zoom in button
  • Zoom out button
  • Always shows current zoom percentage
  • Fit image vertically
  • Fit image horizontally
  • "Natural" zoom and pan controls
    • Pan via scroll bars (and touchpads/scroll wheels that use them)
    • Pan via click-and-drag
    • Zoom via pinch

Other requested functionality

Task 1882 was created to collect tasks that have been opened over the years that have requested adjustments to the proofreading interfaces. Listed below are some that have been requested in addition to the core functionality listed above:

  • Task 212 -- Image Scaling: proper semantics and "Actual Size" button;   Task 1012 -- Image resize buttons should resize relative to original size
is this needed or desirable? The image pane in the proofreading interfaces fits an image (whatever it's actual dimensions) into a 1000 pixel wide container. It doesn't change the dimensions of the actual image. -- srjfoo 16:35, 16 September 2021 (EDT)
  • Task 378 -- Centre image in proofing interface
this request was for the enhanced interface, which has always been left-aligned. Now that the image widget has been rolled out and is available in the page browser and both proofreading interfaces, should there be an option for the proofer to choose left, right or center aligned? -- srjfoo 16:35, 16 September 2021 (EDT)
  • Task 850 -- Provide ability to rotate image in proofing interface;   Task 1965 -- Add ability to rotate image in proofreading interface and image viewer
  • Task 1643 -- Be able to change colours in proofreading interface
Specifically, at this point, the comment about possibly being able to invert the image. The task, itself, is more general, but if the image widget is designed to control the image, it may be more appropriate to include the possibility of inverting the image with the image widget instead of overall styling of the proofreading interface(s). -- srjfoo 16:35, 16 September 2021 (EDT)

Interface

For zoom manipulation, the widget needs an interface to:

  • set specific zoom amount
  • buttons to zoom in and out
  • buttons to fit the image vertically and horizontally

Where it would/could be used

Will replace page image viewing code in:

  • Page Browser
  • Proofreading Interfaces (Standard & Enhanced)
  • WordCheck
  • Quizzes

Open Questions

What about styling / colors?
My (cpeel) initial thought is to design with a non-customizable theme to start out with and punt customization until we figure out how to incorporate that into the larger proofreading interface design. I'm envisioning that both the image viewer and proofreading interface style being driven by a proofreading-interface-specific theme. So while I see "viewing interface can be easily theme-able" as a requirement, I don't see us incorporating selectable themes into the widget.

Proposals

Docked toolbox 1

The challenge is that a toolbox takes up room and the div might be very narrow (vertical proofreading panes) or very wide (horizontal proofreading panes) and we need to be able to get the toolbox out of the way so it needs a way to be moved around. A floating toolbox has the problem of needing a user to move it around to prevent it from overlaying part of the image, so a fixed toolbox seems like the better option.

If we allow the toolbox to dock to one of the 4 cardinal directions (N, E, S, W) with each of those having three possible alignment positions (left, center, right for N and S; top, middle, bottom for E, W) we allow the user to place the toolbox and have the buttons in a position that is convenient for them. We can uniquely represent the valid combinations using modified 8 cardinal directions where the first letter represents where the toolbar is docked, and the second where the icons are aligned. "E" says that the bar will dock on the east and be center aligned. "ES" says that the bar will dock on the east with the icons aligned south. "SE" is that the bar will dock on the south with the icons aligned east.

Default alignment for the vertical interface will be NE (docked north, right-aligned). Default alignment for the horizontal interface will be S (docked south, center-aligned). Default alignment for everything outside the proofreading interface will be NW (docked north, left-aligned).

Feedback on defaults: Two people have said they prefer to have the image and the text panes immediately adjacent in the horizontal layout, so having that default be 'N' rather than 'S' would be better.

Wireframes

Persistence

Users will want the toolbox position to remain constant so they don't have to futz with it constantly. This can be stored in browser local storage.

Proofreading Interface
The toolbox location & alignment should persist with a key based on the user's vertical/horizontal layout.
Other interfaces
The other places that the widget is used should persist with a key based on the name of the PHP page being used.

Widget input

JSON blob with initial view settings and image URL. 

{
    "image": {
        "url": "http://...",
        "align": "left" / "right" / "center"
    }
    "zoom": <int> / "fit-width", "fit-height",
    "toolbar": {
        "location": "N" / "NE" / "EN" / "E" / "ES" / "SE" / "S" / "SW" / "WS" / "W" / "WN" / "NW",
        "persistence_key": "blah"
    }
}
Retrieved from "https://www.pgdp.net/w/index.php?title=DP_Code_-_Page_Image_Widget&oldid=117657"