Gallery2:Modules:imagenotes:othersystems

Systems implementing image region annotation

There are a number of external systems whose behaviours were mentioned in forums as being desirable for image region annotation, so an attempt should be made to implement the features of these and make it possible to recreate their exact functionality without too much difficulty for a G2 site administrator/themer.

Facebook

Viewing mode (default)

• Image is unobscured by any added tags.
• Tags that have been applied to the image are listed below the image following the 'In this photo' text and are separated by commas.
  • Each listed tag is written in blue if the tag relates to another Facebook user, or black if not.
  • Each listed tag is followed by a set of operations related to that tag based on the viewing users permissions. The operations available are displayed in brackets, seperated by pipes ('|')
    • If the logged in user owns the photo, or the tag is of the user, the 'remove tag' operation is available. When clicked the tag is immediately removed from the image.
    • If the logged in user doesn't own the picture but has requested it be tagged and the tag request has not yet been accepted, the 'remove requested tag' operation is available. When clicked the tag request is immediately removed from the image.
    • If the tagged user has given permission, the 'photos' operation is avaiable. When clicked this returns a search for other images in which this user has been tagged.
  • When the tag or any of it's operations are hovered over, the image region is highlighted in the image.
• Image operations are clustered together in a box below and to the right of the image. One of the image operations is to 'Tag this photo'.
  • If the tag is clicked (not it's operations) and the user exists in Facebook, the user is taken to the tagged users profile page.
• When the mouse hovers over the image the cursor is a hand.
• Whilst the mouse cursor passes over an image region, the text of the associated tag is displayed centred horizontally on the image region, close to the bottom of the image region.
  • Only one tag is displayed at a time even if overlapping image regions are hovered over.

'Tag this photo' mode

• When the 'Tag this photo' button is clicked a box appears above the image with instructions and a button labelled 'Done Tagging'.
  • The instructions are 'Click on people in the photo to tag them.'.
  • If the user doesn't own the image the text '<owner> will be asked to approve all tags before others can see them.' is appended.
• 'Tag this photo' mode remains active until the 'Done Tagging' button is clicked.
• The tags below the photograph operate as in viewing mode.
• When the mouse hovers over the image the cursor is a crosshair.
• The behaviour is the same as in viewing mode when an existing image region is hovered over.
• When a position on the image is clicked:
  • An image region of a constant size is created and drawn on the image.
  • The image region is centered on the mouse click, but adjusted so that it is contained within the bounds of the image.
  • A tag selection box is drawn next to the image region.
    • It's top is aligned with the image region.
    • It is rendered either to the left or right of the image region, attempting to keep within the confines of the image.
    • It contains a text entry box, a list of checkboxes and names and a 'Tag' and 'Cancel' button.
    • The list of checkboxes/names lists:
      • The names already tagged in other pictures in the photo album.
      • The names of all the friends of the user viewing the image.
      • Anyone already tagged in the photo is not shown in the list.
      • The list has a scrollbar appended when the number of listed names is too big.
    • The text entry box is a single line. On entering text the list of names below is filtered to names containing the entered text.
    • When a checkbox is checked, the image is tagged with the selected name for the displayed image region.
    • When the 'Tag' button is clicked, the image is tagged with the text entered in the text entry box. If that is empty, nothing happens.
    • When the tag is created by clicking a checkbox or the 'Tag' button:
      • Notification text is added to the box above the picture.
      • If the user does not own the picture then the tag is not actually added, but a tag request is sent to the owner of the picture. (This is reflected in the notification above the image).
      • The image region and selection boxes are hidden and the tag is added to the tags below the image and behaves as all the other tags.
    • When the cancel button is clicked no tagged image region is created and the image region and selection boxes are hidden.
• When 'Done Tagging' is clicked the default viewing mode is returned to. The tags are already saved even if this button is not clicked however and the page is navigated away from.

Photo tag requests

• If you own an image and another user adds a tag to the photo, instead of the tag being immediately added, you, as the owner are sent a photo tag request.
• In the Facebook requests page, a photo tag request is shown as the image being tagged with the requested image region drawn over it and the requested tag for that region drawn below and to the left of the region.
• The text next to the annotated photo states who has requested what tag to be added.
• There are 'Confirm' and 'Ignore' buttons. The 'Confirm' buttons adds the tag to the image so all can see it, the 'Ignore' button removes the tag request.
• When multiple photo tag requests are present, it is possible to confirm/ignore all of the requests at once.

Fotonotes

Viewing mode (default)

• Above the image are buttons for changing image interactions:
  • 'Add note'
  • 'Edit note'
  • 'Delete note'
  • 'Hide notes'/'Show notes'
• By default all image regions are always displayed over the image.
  • The regions are transparent boxes with a thin black outer border and thin white border just inside it.
  • The regions are layered on top of one another.
• Clicking the 'Hide notes' button hides the image regions and changes the button's text to 'Show notes'. Clicking this again redisplays the image regions.
• Whilst the mouse cursor is in an image region:
  • The region has an additional thin yellow box drawn around the thin black box.
  • The note associated with the image region is displayed in a rounded box aligned to the bottom left of the image region.
  • The image region and note will be highlighted and displayed until the mouse cursor leaves the image region.

'Add note' mode

• When the 'Add note' button is clicked:
  • All existing image regions are hidden.
  • A new image region of an initial standard size is created in the centre of the image.
    • The new image region has black and white borders, but they are drawn with dashed lines.
    • The image region is surrounded by 8 small white boxes. (top left, top middle, top right, middle left, middle right, bottom left, bottom middle, bottom right)
      • The white boxes are resize handles.
      • The corner resize handles can resize on both x and y axes within contraints of the image, the non-corner resize handles are restricted to either the x or the y axis.
  • If the mouse is dragged within the image region, the region will change position within the constraints of the image.
  • Below the image a box is displayed with two text boxes. The top text box is for single line entry and labeled 'Title'. The bottom text box is for multi-line entry and is labelled 'Content'. There are also two buttons, 'Ok' and 'Cancel'.
  • On clicking the 'Ok' button a new image note is created and viewing mode is returned to.
  • On clicking the 'Cancel' button the template image note is destroyed and viewing mode it returned to.

'Edit note' mode

• When the 'Edit note' button is clicked:
  • If the user clicks on one of the displayed image regions, the selected image note is edited in the same manner as when adding a note.
  • If the user clicks 'Ok' the changes made are saved and if the user clicks 'Cancel' the changes are discarded. Viewing mode is returned to.

'Delete note' mode

• If the 'Delete note' button is clicked, when the user clicks on an image region that region and associated note is deleted then viewing mode is returned to.

Flickr (inspired by Fotonotes)

Viewing mode (default)

• Above the image are buttons for altering things to do with the image. There is an 'ADD NOTE' button.
• The image starts off unobscured.
• When the mouse cursor is over the image, all image regions are displayed.
  • The regions are transparent boxes with a thin black outer border and thin white border just inside it.
  • The regions are layered on top of one another.
• Whilst the mouse cursor is in an image region:
  • The region has an additional thin yellow box drawn around the thin black box.
  • The note associated with the image region is displayed in a rounded box aligned with the image region as it was when the note was created.
    • The full text of the note is displayed, unlike when the note is created and a scrollbar is applied when the text is too long.
    • The width of the note is the same as when the note was created or less if there is only a small amount of text.
  • The image region and note will be highlighted and displayed until the mouse cursor leaves the image region.
• If an image region is clicked and the user has permission:
  • The image region and note will be edited as in 'ADD NOTE' mode (see below).
  • An additional 'Delete!' button will be displayed and if clicked the image note will be deleted.

'ADD NOTE' mode

• When the 'ADD NOTE' button is clicked:
  • All existing image regions are made visible, even when the cursor is outside the image. The image regions will not display their notes when the mouse cursor hovers above them.
  • A new image region of an initial standard size is created towards the top left of the image.
    • The new image region has black and white borders, but they are drawn with dashed lines.
    • The image region has 4 small white boxes within it at each of the corners.
      • The white boxes are resize handles.
      • The resize handles can resize on both x and y axes within contraints of the image.
  • Below the image region, aligned to it's left, a rounded text box is displayed with the text 'Add your note here'.
    • The text in this box can be altered (and forms the text of the image note). If more than three lines of text are entered a scroll bar is added to the text box.
  • Below the text box there are also two buttons, 'Save' and 'Cancel'.
  • If the mouse is dragged within the image region (not on the resize handles), the region will change position within the constraints of the image.
  • The text box and buttons will move with the image region as it is moved or resized. If the text box and buttons cannot fit below the image region and still be displayed completely over the image, they are moved above the image region and are aligned to it's left.
  • On clicking the 'Save' button a new image note is created and viewing mode is returned to.
  • On clicking the 'Cancel' button the template image note is destroyed and viewing mode it returned to.