Module: Photo annotation v4.5 (v5 beta 3)

Version 5 beta 3

---

If you want to test the next version of the module you can find it attached to this post along with the latest stable version.
This version uses ajax to save, delete and edit annotations eliminating the need to reload the whole page when saving, updating or deleting annotations.
Please note that I have still not figured out how to disable the "show full size" link of the image when clicking on annotations or on the delete/modify areas. Therefore the beta version removes the link completely and places a little box at the upper left corner of the re-sized image allowing to view the photo in full size.




About this module

---

This module allows you to create comments on photos similar to Flickr and Facebook (see screenshots below). It can notify users when a photo is tagged and comments are added.
This module is partially compatible with rWatcher's TagFaces module which means that faces/notes/annotations created with one module will be shown by the other as well (user annotations create with the Photo annotation module will however not be shown by the TagFaces module).

IMPORTANT: You cannot run both modules at the same time.

Codex page: http://codex.gallery2.org/Gallery3:Modules:photo_annotation




Screenshots

---

Add and edit annotations
[img]http://codex.gallery2.org/images/9/95/Photoannotation_add_edit.png[/img]
An annotation linking to a tag
[img]http://codex.gallery2.org/images/4/43/Photoannotation_tag.png[/img]
An annotation with title and description
[img]http://codex.gallery2.org/images/1/18/Photoannotation_note.png[/img]




Features

---

• Uses a modified version of jquery-image-annotate
• Annotations are added and edited directly on the photo page
• Annotations can be displayed below the photo
• Tags can be added to a photo and/or created while creating an annotation
• All annotation areas are displayed when hovering over the photo with the mouse
• Titles and descriptions are shown when hovering over an annotation area
• Tag- and user-annotations are click-able and will display the tag collection / user profile page
• Users can be notified when someone tags a photo with them and/or adds a comment to a photo
• "User cloud" block can be added to the sidebar showing users with tagged photos and allowing to search for users
• Admin: Convert existing tag annotations (created with either Photo annotation or TagFaces module) can be converted to user annotations
• Admin: When deleting a user, user annotation can be automatically converted to tag or note annotations

Installation

---

• Download the module from this post
• Extract the module to the module directory of your G3 install.
• Activate the module: Login -> Admin -> Modules. Check the box next to the module. Click update at the bottom of the page.
• If you are updating from a previous version, please run the upgrader (http://yourdomain/pathtogallery/upgrader
• If you want to add the "User cloud" to your sidebar go to Login -> Admin -> Appearance -> Manage sidebar

Usage

• On any photo page go to the Photo Options menu and click on "Add Annotation"
• To delete an annotation, hover over it with the mouse and then click on the little "x" in the upper right corner of the annotation area
• To modify an annotation, hover over it with the mouse and then click on the little pen in the upper right corner of the annotation area
• To modify your notification settings go to your profile page (click on your name where it says "Logged in as") and click on "Edit"

---

Configuration

---

You can configure the module by going to Login -> Admin -> Settings -> Photo annotation




Version history

---

Version 1

• Initial release

Version 1.1

• Clicking 'Cancel' when editing an annotation would prevent viewing the image in full size
• Theme now works with greydragon theme without modifications

Version 1.2

• Fixed incorrect re-direct with "non-webroot-installs" and mod_rewrite activated
• Fixed bug when re-activating the module
• Fixed bug causing video pages not to display the video (not tested)

Version 2

• Improved tag handling:
  
  • Drop down was replaced by ajax-textbox
  • Tags can now be added while creating the annotation
  • If a tag is entered which does not exist it will be created
• When entering text in the tags textbox, the notes textbox is cleared and vice versa to avoid confusion
• Added photoannotation.php provided by tkott to allow compatibility with the XMP module
• Deletion confirmation dialog now looks better
• Canceling deletion does not show the full size image anymore
• Fixed positioning bug for RTL languages
• Fixed bug when deleting an annotation when image contained annotations with same tag attached to them
• Fixed tiny bug with positioning of the add / edit form

Version 2.1

• Form is now hidden when resizing and dragging the annotation area
• A few minor UI improvements

Version 3

• Only beta releases (had to bump version number to 4)

Version 4

• Increased initial size of the annotation area
• Added possibility to associate users with annotations
  
  • Clicking on an annotation that has a user associated you will get to the user profile page
  • User profile page shows images of users
• Added side bar block "People"
  
  • Displays all users with annotations
  • Allows to search for users
  • Admins can hide the block for guests
• Added user notification
  
  • Users can decide if they want to receive notifications by editing their profile
  • Admin can decide if notifications is switched on by default for new users and users who have not saved this setting
  • Notifications will be sent out when a user annotation is created on a photo and/or if a comment is added to a photo with user annotations
• Annotations can now be displayed below the resized photo (legend)
• Hovering over the legend will now highlight the corresponding annotation
• Added options to change annotation borders
• Added admin option that allows to convert existing tag notifications to user notifications
• Added admin option allowing to automatically convert a user annotation to a tag or note annotation when deleting a user
• Added admin option to remove orphaned annotations (this can happen if a tag is deleted)

Version 4.1

• Disable notification sending for new and updated comments if the commenter is the same as the user to be notified and notification module is active
• First time installation would set the version number incorrectly to 3 instead of 4

Version 4.2

• Fix undefined variable error

Version 4.3

• Search now also searched in full name
• Fix undefined variable error

Version 4.4

• Fixed two JavaScript bugs in IE8

Version 4.5 / 5 beta 3

• Fixed a bug where the user profile page would display empty thumbnails when a user doesn't have the right to see the photos

---
Build bridges not barriers.

Attachment	Size
photoannotationv4-5.zip	77.68 KB
photoannotationv5b3.zip	79.67 KB

Thanks. I already created one: http://codex.gallery2.org/Gallery3:Modules:photo_annotation sorry for that (forgot to put it in the post).

---
Build bridges not barriers.

Version 1.1 can now be downloaded from the first post.

---
Build bridges not barriers.

Bugs:

- RTL bug(s) (with Arabic language selected):
(1) The annotation square appears out of photo once you click on Add Annotation button. It's a trivial thing though, as you can easily drag it over the photo again.
(2) The first time you try to resize the annotation selection square, it is moved to the left side so it is get out of the photo in case you were in the middle or so.
(3) The text needs to be right-aligned for RTL languages.

- General bug(s):
(1) The module doesn't correctly redirect you when 'mod_rewrite' is enabled. Once I save the annotation, it redirects me to:

http://MySite.com/gallery/gallery/PictureXX

and I see the dang page.
(2) I activated the module and played with it for a while. After that I deactivated. Now, every time I try to activate it again nothing happens. The module page is refreshed without activating the Photo Annotation module. I see those lines in the log:

2010-08-29 17:33:03 +03:00 --- error: exception 'Database_Exception' with message '#1060: Duplicate column name 'description' [ ALTER TABLE items_faces ADD `description` varchar(2048) default NULL ]' in /home/****/public_html/gallery/system/libraries/Database_Mysqli_Result.php:27
Stack trace:
#0 /home/****/public_html/gallery/system/libraries/Database_Mysqli.php(79): Database_Mysqli_Result_Core->__construct(false, 'ALTER TABLE ite...', Object(mysqli), true)
#1 /home/****/public_html/gallery/system/libraries/Database.php(272): Database_Mysqli_Core->query_execute('ALTER TABLE ite...')
#2 /home/****/public_html/gallery/modules/gallery/libraries/MY_Database.php(45): Database_Core->query('ALTER TABLE ite...')
#3 /home/****/public_html/gallery/modules/photoannotation/helpers/photoannotation_installer.php(55): Database->query('ALTER TABLE {it...')
#4 /home/****/public_html/gallery/modules/gallery/helpers/module.php(218): photoannotation_installer::upgrade('1')
#5 /home/****/public_html/gallery/modules/gallery/controllers/admin_modules.php(89): module_Core::upgrade(Array, Array)
#6 /home/****/public_html/gallery/modules/gallery/controllers/admin_modules.php(51): Admin_Modules_Controller->_do_save('photoannotation')
#7 /home/****/public_html/gallery/modules/gallery/controllers/admin.php(62): Admin_Modules_Controller->confirm()
#8 [internal function]: Admin_Controller->__call()
#9 /home/****/public_html/gallery/system/core/Kohana.php(331): ReflectionMethod->invokeArgs(Array, Array)
#10 /home/****/public_html/gallery/system/core/Event.php(208): Kohana_Core::instance('modules', Array)
#11 /home/****/public_html/gallery/application/Bootstrap.php(67): Event_Core::run(Object(Admin_Controller), Array)
#12 /home/****/public_html/gallery/index.php(94): require('/home/****/pub...')
#13 {main}

Otherwise, the module is really promising. I am excited to get it working
Thanks!

http://gallery.menalto.com/node/90183?page=1#comment-352077
The "video clip can't play" problem is gone after I update to photoannotation v1.2.

However, I still find another strange problems. I will draw a picture to show them.

Hi all,
I have just uploaded version 2 to the first post of this thread. Please see the version history there for a detailed list of changes.

Fixed.

Fixed.

Partially fixed. I'm not 100% happy with the result since I would prefer to have e.g. the resize edge/corner at the bottom left etc. But text should be aligned correctly now.

From http://gallery.menalto.com/node/90183?page=1#comment-351728

Implemented.

Already implemented with 1.2

Fixed although not 100% ideal yet. I will look into a more "ajaxy" solution for the next version.

I added the file.

OK let me know the details and I will have a look what's going on.

---
Build bridges not barriers.

Great work Uli!

Everything works as far as I can tell!! Thanks for including my file.

Tomek
----
Publish on Gallery 3 (WLPG Plugin) | XMP Module

WOW, this is really becoming amazing.

It will be cool if you could implement it this way. Otherwise, I am just satisfied !

Some suggestions:

- It's better, IMHO, to use the resize_bottom() function instead of photo_bottom() to show the face/note annotations. I know about your order module, but it is not because of the ordering. It's because I think that resize_bottom is more suitable position for such note. You can try it your-self.

- I really liked the Ajaxy auto suggestions for tag names. However, it would be awesome if you can make it more user connected. For now I am thinking of:
(1) Expand the suggestion source to include the usernames of Gallery existed users.
(2) Add a section to the user profiles to show any photo the user annotated in.

I'm glad to hear that. I will definitely try to implement this but I can't promise your when because I would like to implement one of your other suggestions first

I will give it a try. The closer it is to the photo the better IMHO so I think it makes sense.

This is a very cool idea (although I will need to change a lot of tags on my gallery if I implement this). I will think of some ways how to do this.
@bharat: Maybe this idea is worth implementing into the tags module what do you think? If you think it is I wouldn't mind to have a look how to do it.

Nice idea as well.

Without checking: I think you're right. I will fix this with the next version.

Thanks for the feedback,
Uli

---
Build bridges not barriers.

Hi Tommek
In a way I agree with you (this is how I use it at the moment) but I also would like to see more functionality for the user management to improve how users can interact etc. Implementing something like this would e.g. allow notifications if someone comments on a photo a user is on etc. I'm sure that some will like the idea and others rather use Facebook and co but I personally would like to have something like this.
Just my humble opinion though.

Uli

---
Build bridges not barriers.

Sounds like a good approach I was thinking of something along these lines. For me the most important things are to keep it as simple and clean as possible and to make it configurable since I think not everyone would like to have this as default behaviour.
---
Build bridges not barriers.

Very nice. However, I think the tagging interface needs some work here. First, it should be clearer that you have to enter *one* of the three annotation types (user, face, note.) Second, it should be clearer that you can always enter a description, despite what type of annotation you used. As a result, the three annotation types should be grouped together, while the description field should be isolated in the bottom of the interface.

Well. After some playing with 'Inspect Element' feature of Safari, I have got these results:
[img]http://grab.by/6ekt[/img]

The HTML code with the inline style attributes are:

<form id="photoannotation-form" action="/~mamoun/gallery3fork2/index.php/photoannotation/save/2" method="post" style="">
	<div style="background-color: #EEE; color: #4E7199; margin-bottom: 5px; padding: 6px 12px; height: 20px; ">
		<input type="hidden" name="csrf" value=removed for public display>
		<input type="hidden" name="noteid" value="1">
		<input type="hidden" name="notetype" value=
مستخدم:
			<select id="photoannotation-user-list" class="dropdown" style="float: left; width: 155px; " name="userlist">
				<option value="-1">...</option>
			</select>	
		</div>
		<strong>أو</strong>
			
		<br>
		<div style="background-color: #EEE; color: #4E7199; margin-bottom: 5px; padding: 6px 12px; height: 20px; ">
وسم:
			<input id="image-annotate-tag-text" type="text" name="tagsList" style="width: 155px; float: left; " value="" autocomplete="off" class="ac_input">
			<strong></strong>
			</div>
			<strong>أو</strong>
				
			<br>
			<div style="background-color: #EEE; color: #4E7199; padding: 6px 12px; margin-bottom: 15px; height: 20px; ">
ملاحظة:
				<input id="image-annotate-text" type="text" name="text" style="float: left; width: 155px;" value="">
		</div>

الوصف (اختياريٌّ):
		<textarea id="image-annotate-desc" name="desc" rows="3" style="width: 240px; margin-top: 3px; ">
		</textarea>
</form>

What you think?

Hi all,

edit: please find the latest beta in the post below

Changes from beta 1:

• User profile page is now showing images of users and has full functionality
• Added options how to display the annotation areas
• A user can now be associated with only one annotation area per photo
• Some UI improvements
• Bugfixes

Todo:

• Improve annotation area settings (feedback and suggestions are very welcome)
• Allow to send e-mail notifications if a user is associated with an annotation area

If you are updating from version 2 or 1 please be sure to run the updater (http://yourdomain/pathtogallery/upgrader).
If you are updating from version 3 beta 1 please delete all old files before uploading the new ones since some were removed (if you leave those you will have difficulties with user profile pages).

Thanks in advance for testing.

---
Build bridges not barriers.

Hello,
Attached to this post is version 4 beta 2. The reason why I am releasing this so shortly after beta 1 is that I found a few annoying bugs with the notification part (I managed to test it in the end).

Here some of the changes:
- Added admin option to customize the notification mails sent to the user
- Bugfixes
- Code cleanup

Hope someone can find some time to give it a try.

Uli

---
Build bridges not barriers.

I downloaded and tested v4b2 last night. Didn't notice any major issues. On the admin page, you had two checkbox options that looked to be identical for display tags below a photo. This may already be fixed in v4RC so I will try to test again tonight.

I did notice that one photo was flagged as "out of date" in my maintenance dashboard after working with annotations for a while. However, after trying to reproduce the problem a couple of different ways, I eventually just considered it an "anomaly".

I'll continue to test tonight and thanks again for all of your hard work.

Version 4 final is out and can be downloaded from the first post.
Changes from version 4 RC:

• Admin option: disable people cloud for guest users
• Removed the term user from front end
• Notification is not being sent out if notification module is active and user is watching the photo
• Fixed typo in admin area
• Auto complete now works for username and user's full name
• Increased initial size of annotation
• Fixed bug where tags wouldn't save
• Removed unnecessary line breaks in legend

For a full list of changes since version 3 please see first post.

---
Build bridges not barriers.

Hello hukoeth,

I think I found a bug with the latest experimental gallery3-3.0-rc-2-332-g3e1743b and latest photo annotation module ver. 4.1.
I've upgraded from previous git version.

When I switch on photo annotation module the sidebar disappears, also photo view doesn't show. When I turn it off everithing works normally.

Here is what I see in the logs when trying to open an album:
2010-09-17 08:01:36 -07:00 --- error: Undefined variable: user_array
#0 /home/rat/public/ratbook/modules/photoannotation/helpers/photoannotation.php(265): gallery_error_Core::error_handler(30)
#1 /home/rat/public/ratbook/modules/photoannotation/helpers/photoannotation_block.php(34): photoannotation_Core::cloud('photoannotation', Object(Theme_View))
#2 [internal function]: photoannotation_block_Core::get(Array, 'photoannotation', Object(Theme_View))
#3 /home/rat/public/ratbook/modules/gallery/helpers/block_manager.php(106): call_user_func('site_sidebar', Object(Theme_View))
#4 /home/rat/public/ratbook/modules/gallery/libraries/Theme_View.php(204): block_manager_Core::get_html()
#5 /home/rat/public/ratbook/themes/wind/views/sidebar.html.php(15): Theme_View_Core->sidebar_blocks('/home/rat/publi...', Array)
#6 /home/rat/public/ratbook/system/libraries/View.php(318): include('/home/rat/publi...')
#7 /home/rat/public/ratbook/system/libraries/View.php(260): View_Core->load_view(false, false, false)
#8 /home/rat/public/ratbook/modules/gallery/libraries/MY_View.php(69): View_Core->render()
#9 /home/rat/public/ratbook/system/libraries/View.php(226): View->render()
#10 /home/rat/public/ratbook/themes/wind/views/page.html.php(135): View_Core->__toString('/home/rat/publi...', Array)
#11 /home/rat/public/ratbook/system/libraries/View.php(318): include('/home/rat/publi...')
#12 /home/rat/public/ratbook/system/libraries/View.php(260): View_Core->load_view(false, false, false)
#13 /home/rat/public/ratbook/modules/gallery/libraries/MY_View.php(69): View_Core->render()
#14 /home/rat/public/ratbook/system/libraries/View.php(226): View->render()
#15 /home/rat/public/ratbook/modules/gallery/controllers/albums.php(79): View_Core->__toString(Object(Item_Model))
#16 /home/rat/public/ratbook/modules/gallery/controllers/albums.php(22): Albums_Controller->show()
#17 [internal function]: Albums_Controller->index(Object(Albums_Controller), Array)
#18 /home/rat/public/ratbook/system/core/Kohana.php(331): ReflectionMethod->invokeArgs(NULL)
#19 [internal function]: Kohana_Core::instance(Array, Array)
#20 /home/rat/public/ratbook/system/core/Event.php(208): call_user_func_array('system.execute')
#21 /home/rat/public/ratbook/application/Bootstrap.php(67): Event_Core::run()
#22 /home/rat/public/ratbook/index.php(97): require('/home/rat/publi...')
#23 {main}

And here is what happening when trying to open a photo and just a blank page is showing:

2010-09-17 08:03:23 -07:00 --- error: Undefined variable: noeditablehover
#0 /home/rat/public/ratbook/modules/photoannotation/helpers/photoannotation_theme.php(41): gallery_error_Core::error_handler(Object(Theme_View))
#1 [internal function]: photoannotation_theme_Core::head(Array, Array)
#2 /home/rat/public/ratbook/modules/gallery/libraries/Theme_View.php(273): call_user_func_array('head', Array)
#3 [internal function]: Theme_View_Core->__call()
#4 /home/rat/public/ratbook/themes/wind/views/page.html.php(71): Theme_View->head('/home/rat/publi...', Array)
#5 /home/rat/public/ratbook/system/libraries/View.php(318): include('/home/rat/publi...')
#6 /home/rat/public/ratbook/system/libraries/View.php(260): View_Core->load_view(false, false, false)
#7 /home/rat/public/ratbook/modules/gallery/libraries/MY_View.php(69): View_Core->render()
#8 /home/rat/public/ratbook/system/libraries/View.php(226): View->render()
#9 /home/rat/public/ratbook/modules/gallery/controllers/photos.php(55): View_Core->__toString(Object(Item_Model))
#10 [internal function]: Photos_Controller->show(Object(Photos_Controller), Array)
#11 /home/rat/public/ratbook/system/core/Kohana.php(331): ReflectionMethod->invokeArgs(NULL)
#12 [internal function]: Kohana_Core::instance(Array, Array)
#13 /home/rat/public/ratbook/system/core/Event.php(208): call_user_func_array('system.execute')
#14 /home/rat/public/ratbook/application/Bootstrap.php(67): Event_Core::run()
#15 /home/rat/public/ratbook/index.php(97): require('/home/rat/publi...')
#16 {main}

Hi therat,
Can you please try version 4.2 attached to the first post. This should hopefully get rid of the error.

Regards,
Uli

---
Build bridges not barriers.

Hi Tomek,
Thank you very much.
About the add function. I indeed removed it at one point (sorry completely forgot to contact you) but not with the intention to break compatibility with your module. I am happy to add it again but since I have rewritten the code to save annotations and moved it to helpers/photoannotation.php anyway may I suggest something else:

If I read your code correctly you create tags if they don't exist already during the import process and you only save annotations with tags (not notes or users).
Therefore you could call photoannotation::saveface($tag_id, $item_id, $str_x1, $str_y1, $str_x2, $str_y2, $description) to save the annotation with the benefit to not have redundant code. What do you think?

Uli

---
Build bridges not barriers.

Uli,

My module now successfully points at your saveface function. Thanks for the heads up!

Tomek
----
Publish on Gallery 3 (WLPG Plugin) | XMP Module

Hello Uli,
Unfortunately the fix didn't resolve the missing sidebar.
The errors in logs however changed:

On album load:
2010-09-19 09:49:02 -07:00 --- error: Undefined variable: item
#0 /home/rat/public/ratbook/modules/photoannotation/helpers/photoannotation.php(45): gallery_error_Core::error_handler('g-user-cloud-fo...')
#1 /home/rat/public/ratbook/modules/photoannotation/helpers/photoannotation_block.php(35): photoannotation_Core::get_user_search_form('photoannotation', Object(Theme_View))
#2 [internal function]: photoannotation_block_Core::get(Array, 'photoannotation', Object(Theme_View))

On picture view load:
2010-09-19 09:49:27 -07:00 --- error: Undefined variable: legend_users
#0 /home/rat/public/ratbook/modules/photoannotation/views/photoannotation_highlight_block.html.php(108): gallery_error_Core::error_handler('/home/rat/publi...', Array)
#1 /home/rat/public/ratbook/system/libraries/View.php(318): include('/home/rat/publi...')
#2 /home/rat/public/ratbook/system/libraries/View.php(260): View_Core->load_view(false, false, false)

...
2010-09-19 09:49:27 -07:00 --- error: Undefined variable: item
#0 /home/rat/public/ratbook/modules/photoannotation/helpers/photoannotation.php(45): gallery_error_Core::error_handler('g-user-cloud-fo...')
#1 /home/rat/public/ratbook/modules/photoannotation/helpers/photoannotation_block.php(35): photoannotation_Core::get_user_search_form('photoannotation', Object(Theme_View))

And by the way I think that "Add anotation" button appeared in the photo dropdown menu. However nothing happens when I press it, no logs also.
It might be that something with my setup is not exactly right, or a gadget in the sidebar is messing with your module. I'll try to exclude some of the parts to see if the bar appears.

Thanks for your help, appreciated.

PS. Ok, I think I found it: the "Users" block is not working together with annotation module. Sidebar shows when anotation is switched on and Users block is excluded. However "Add annotation" button still doesn't work. Error that still persists on photo view is:
error: Undefined variable: legend_users

Version 4.4 is out. This is only a bugfix release addressing two issues with the JS code in IE8. The new version is attached to the first post.

---
Build bridges not barriers.

Edit: version 5 beta 3 can be found attached to the first post.

The only change is a bugfix addressing the issue that the legend wouldn't show when adding the first annotation of any type to a photo.

---
Build bridges not barriers.

Hello Uli,

Your latest fix solved my problem. Now annotation works , thanks.

To have better error reporting I think you should research a option introduced earlier from the developers of the gallery framework. The logs I send you are generated in <galery root>/var/log/<date>.php

To enable this function I think you should create a file named
"local.php" in your gallery root with the following content:

<?
defined("SYSPATH") or die("No direct script access");
error_reporting(E_ALL);
ini_set('display_errors', true);
?>

But I might be wrong, I did that some time ago and don't remember very well ...

Looks like I am a little picky. I am really getting annoyed that there is no space between the resized photo and the navigation buttons anymore. It seems your plugin replaces the resized photo div to disable the full screen click. There was padding of 2.2em on top/bottom of the resized photo.
BEFORE: [img]http://grab.by/6EpV[/img]
AFTER: [img]http://grab.by/6EpT[/img]

Also, for some reason, sometimes the close button appears not centered (*some*times, with *some* annotation!):
[img]http://grab.by/6EpR[/img]

Thanks!

Hukoeth, is it possible to tag a person that isn't a Gallery user? Thanks for this great extension!