New Module: tag_cloud_html5 - a non-Flash 3D tag cloud (both sidebar block and whole cloud page)

Hey everyone,

NEW: VERSION 7 - new embed feature for putting tag cloud in other places on website! (and minor bug fixes).
NEW: VERSION 6!!! I built a new physics-based model to control motion, and completely redid the admin screen (ver 5). Also, I fixed an odd TagCanvas bug with some browsers (ver 6).

Attached is my new HTML5-compliant tag cloud module. It functions a non-Flash replacement for both 'tag_cloud' and 'tag_cloud_page' modules, with some extra features added. The 'tags' module is still required.

Documentation is available at http://codex.gallery2.org/Gallery3:Modules:tag_cloud_html5.

This module uses a modified version of TagCanvas, a non-flash, HTML5-compliant jQuery plugin. It also uses excanvas to maintain compatibility with pre-9.0 Internet Explorer. This means that it's 100% compliant with all modern browsers, including all iOS devices and Internet Explorer 8.

Similar to older modules:
- Adds a 3D tag cloud as an available sidebar block (similar to 'tag_cloud' module)
- Adds './tag_cloud' url which goes to a page to see the whole cloud (similar to 'tag_cloud_page' module)
- Adds provision for a link to whole cloud page in the sidebar block
- Adds provision for 'Add tag to album' form in the sidebar block
- Provides an admin setting screen to allow tweaking the options

New features:
- Adds provision to include an inline-style display of tags at the bottom of the whole cloud page for easy finding
- Text font and color follow the theme by default
- Compatible with non-Latin characters
- Does not require Flash (better for SEO and for iOS)
- Many more options accessible through the admin screen

As mentioned above, I've modified TagCanvas. In particular, I added a new physics-based motion model, some new parameters, and some bug fixes which are not a part of the original package as this writing (2012/06/08).

The JS file included in the module is therefore called jquery.tagcanvas.mod.min.js, and has been minified and is therefore largely incomprehensible. I've also included the non-minified version for reference.

Let me know what you think. Thanks!

Take care,
Shad

Very good, but sidebar block is empty
Browsers FF13, IE9.
g v3.0.3, Theme greydragon v3.1.4
SM

I see an issue. If I scroll the mouse wheel on the full page the cloud dis-appears. if I scroll the mouse wheel on the sidebar block the cloud shrinks or grows. I guess for the sidebar block that would be expected behaviour/behavior.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

@floridave - by "behaviour/behavior," are you referencing the subtle enUK->enUS translation I did with the TagCanvas options? ;-)

A semi-related issue: now that I have a tag cloud that's accent-friendly, I tried changing some of my tags to have accents. The cloud itself works fine, but nearly everyone has a different idea of how to alphabetize them...

When I got to the admin|content|tags menu, they show up in another category (É instead of E). When I see the inline tag cloud on the whole page, it's ordered at the end (É goes after Z). When I use autocomplete (e.g. to add tags), it ignores the accents (e.g. E will autocomplete words that start with É), which is the correct approach.

Any thoughts on a simple/elegant way to fix this?

Take care,
Shad

No not at all. At work I do that all the time. I spent time in the UK (3 years) and in Florida (2.5 Years, thus the name) and now back home in Canada so have to watch out for all. In Canada we can go do-it both ways.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

Hey guys,

DEAD ZONE: ADDED! No more chasing tags

I just uploaded a Version 3, with a few new features. It required me hacking into the TagCanvas plugin itself to add 'deadZone' and 'initialDecel' options, and I think the result is much better.

So, I've added:
- dead zone option. This is the big feature, which should eliminate the need to chase tags! Not previously in the TagCanvas plugin.
- initial deceleration option. Not previously in the TagCanvas plugin.
- initial speed option. Before, an initial speed would persist until a mouseover instead of decelerate, which looked weird, so I never gave initial speed as an accessible parameter.
- add tags to album form option. You can now choose to show or hide it as you like.
- better whole cloud page formatting.
- *much* better admin page formatting. The number of parameters shown was getting too many and it was looking waaay too cluttered, so I added some CSS.

Let me know whatcha think!

Take care,
Shad

Hey Serge,

Thanks for the feedback!

1. This is adjustable in the admin settings - decrease "outline offset (mouseover region size around text, in pixels)"
2. This is adjustable in the admin settings - increase "zoom". The width and height of the canvas block need to be specified directly to keep TagCanvas happy, but you can change the amount of space by bumping up the zoom. In fact, I did it by default for the wholecloud page (set at 1.25).
3. A good point, but I can't decide if it looks stranger to have them out of alignment with the text boxes or a mile away from their labels, and personally I don't like the option of having the labels "jump" out of alignment with the others for checkboxes. <shrug>

Thanks,
Shad

Hey Serge,

re: the hover problem, maybe I'm not correctly understanding your problem. What I *thought* you meant was that the region for selecting a given tag was too big, which the outline offset thing changes. However, upon re-reading it, it sounds like you're saying is that the size isn't the problem. Rather, it seems you're saying that the region isn't centered on the tag itself. Is that what you mean to say?

To further confuse things, both http://www.goat1000.com/tagcanvas-weighted.php and http://photo.dragonsoft.us work equally well for me on IE9, Chrome, and Firefox... <shrug>

re: the above/below space issue, this is certainly changeable. All that the TagCanvas plugin needs is the height and width to be defined *before* it starts. So, I wrote JS functions that set the height and weight dynamically before starting it up. All we need to do is change my thinking .

Here's my current logic: For the sidebar, I figured the width was the constraint, so I set the width and height to be the width of the sidebar block. For the whole cloud page, I dynamically resized it based on the height of the browser window (and added in protection against it being too wide, which it almost never will be). Also for the whole cloud page, I made the width a bit bigger than the height to ensure that long tags don't run off the end (but doing the same for the sidebar could cost extra space). Details are in the respective views (see views/tag_cloud_html5_block.html.php and views/tag_cloud_html5_page.html.php).

Do you have any suggestions for a more flexible/elegant way to deal with it?

Thanks,
Shad

Hey everyone,

Version 4 is out with sidebar height option, attached above. Man, four versions in two days... I need to stop adding features at some point .

Following on Serge's suggestion, I added an option in the admin menu to define the height of the sidebar block as a fraction of the width (i.e. 1.0 would be a square). Then, I changed the defaults a bit to make best use of it, so it should look pretty decent without fiddling with options too much.

Thanks!

Take care,
Shad

I have disabled whole page mode as I do not want extra link in the sidebar for it.
but in IE9, I have this shift

Serge
_____________________________________________
Photo Gallery | GreyDragon Theme | Follow on Twitter

Hey Serge,

a) you're quite welcome

b) aye, sorry about that. I was kind of lazy on the installer, and if it sees an earlier version install, it simply blanks all old variables and adds the new defaults.

c) true, there are quite a few settings to keep straight at the moment. Hmm... if another version rolls around, I might add a bit more text.

d) ah, interesting! I'm glad we figured it out. Well, *kinda* figured it out. The answer is that it's in the core of TagCanvas - I do nothing to determine X/Y positions afterward. I would try and experiment with it on my end, but I don't have the same symptoms as you do. If interested, I've attached the non-minified JS. The function to look for is MouseMove on line 272 (which is bound to .mousemove on line 877), which calculates the mx and my parameters used as the mouse coordinates for the rest of the script. I'm no jQuery expert, but it seems fairly straightforward to me. One (perhaps stupid and naïve) thought: do you suppose it's a problem with ordering, and it's calculated somehow before the menu is calculated and its space is taken?

e) I could, but I'm not sure how useful they'd be. I experimented with them a bit, and didn't find them very useful for me (freezeActive actually seemed to make it harder to find tags...). You can experiment with them by editing the options in the settings|advanced menu. The variable options_sidebar is passed directly to TagCanvas, so you can simply add whatever parameters to the end of it you like. If you find that freezeActive and shape are way more useful that I estimated, let me know and I can put them in there

Thanks!

Take care,
Shad

Hi Shadlaws. Nice mod! These days, SEO is a big need.

Is there a way to display this on a page outside the gallery in a similar layout to your sidebar display?

===========================
Version: 3.0.3 (Hotlanta)
Operating system: Linux 2.6.18-194.11.4.el5
Apache/2.2.21
PHP: 5.3.8
MySQL: 5.0.95
Clean Canvas theme
Graphics Toolkit = ImageMagick
Albums: 199
Photos: 68913

Hey everyone,

I finished version 5, which now has a physics-based motion model. I didn't like the way the other one "felt," so I decided to give it some underlying dynamics . I also added some new admin options and redid the screen to make it easier to see what's going on, as well as changed the upgrade logic to keep your old settings.

Let me know what you think. Thanks!

Take care,
Shad

Hey Serge,

Thanks for setting that. I think I found a solution! Here's what I've found:

- simple test case with html margin-top + Chrome = no problem
- simple test case with html margin-top + IE9 = no problem
- your site + Chrome = no problem
- your site + IE9 = problem!
So, I tried making a simple patch, namely adding the html margin-top to the y value, and screwed around with my site. Here's what I finally found that worked in both IE9 and Chrome:

//tc.mx = e.pageX - o.left;
tc.mx = e.pageX - o.left + parseInt($("html").css("margin-left"), 10) - $("html").offset().left; // mod Shad Laws
//tc.my = e.pageY - o.top;
tc.my = e.pageY - o.top + parseInt($("html").css("margin-top"), 10) - $("html").offset().top; // mod Shad Laws

So I add the html margin and subtract the html offset... bizarre, eh? Attached is a new JS file - can you drop it in your directory and see how it works?

EDIT: note that the file attached is already minified, so you can't look through its source to see the change...

EDIT: THIS DOESN'T ACTUALLY WORK - correct solution below, and implemented in Version 6.

Thanks!

Take care,
Shad

hi shadlaws -

You've been putting in a lot of work lately. It's pretty exciting to be adding a module while it is in active development.

I'm just wanting to display the tag cloud within other pages in my site, outside of the album directory. Like the Photowidget or minislideshow modules for example. Is that considered a different project? If so, I'll go to your site and try to figure it out.

===========================
Version: 3.0.3 (Hotlanta)
Operating system: Linux 2.6.18-194.11.4.el5
Apache/2.2.21
PHP: 5.3.8
MySQL: 5.0.95
Clean Canvas theme
Graphics Toolkit = ImageMagick
Albums: 199
Photos: 68913

@BillWill - Ah, I see what you mean. It sounds like a nice thing to add. My thought is that it'd be used something like this:

<?php include("http://www.example.com/gallery3/tag_cloud/embed/sidebar/optionoverride/123") ?>

Where:
- "http://www.example.com/gallery3/tag_cloud" is the URL to the existing whole cloud page
- "/embed" triggers the embed feature
- "/sidebar" (or "/wholecloud") tells it to load the options for the sidebar or whole cloud page, respectively
- "/optionoverride/123" tells it to override the value for some option with 123 (e.g. "/maxSpeed/0.1")

What do you think?

Maybe while I'm at it I should look into what it takes for a REST interface, too...

Take care,
Shad

Hello shadlaws -

I tried the include you provided, and can't get it to work.

Warning: include(gallery3/tag_cloud/embed/sidebar/optionoverride/123) [function.include]: failed to open stream: No such file or directory

I tried different variations of the string you provided, including simply <?php include("gallery3/tag_cloud") ?> didn't get anything to show but warnings. (The URL into the address bar for gallery3/tag_cloud works)

If you have any more ideas to try, I'll let you know the results. I know you're still smoothing out the wrinkles in the mod as you originally envisioned it, so if this isn't a big priority for you now, don't sweat it.

===========================
Version: 3.0.3 (Hotlanta)
Operating system: Linux 2.6.18-194.11.4.el5
Apache/2.2.21
PHP: 5.3.8
MySQL: 5.0.95
Clean Canvas theme
Graphics Toolkit = ImageMagick
Albums: 199
Photos: 68913

Got a good laugh on myself for that one!

Now that I know you're looking for feedback, all the options you mentioned sound great. The controls you're passing via the url seem hit the main controls.

The SEO boost this will provide, as well as having interesting links floating around all over the site will be great in drawing in people from other areas of my site into the album.

Thanks for putting out this mod.

bw

===========================
Version: 3.0.3 (Hotlanta)
Operating system: Linux 2.6.18-194.11.4.el5
Apache/2.2.21
PHP: 5.3.8
MySQL: 5.0.95
Clean Canvas theme
Graphics Toolkit = ImageMagick
Albums: 199
Photos: 68913

Version 7 is out! The big thing is the new embed feature as described above.

@xeta - thanks for the catch! I've corrected the problem in the new version. Thanks again!

Take care,
Shad

shadlaws -

I'd like to say I've been working on setting this up, but truth is it's too much fun to be called work. Experimenting with all the settings has been a blast. You have everything nicely arranged, and all the major configuration options right there in the admin panel. Size, speed, shape, front click ... everything you'd expect and then some. I love the embed feature, and yes, I played with that too, including making a div the same size as the browser window, and having the whole cloud swirling tags over the entire front page. It's as visually appealing as it is a useful tool in moving people from other parts of the site to the album, and I'm still looking for places to plug it in. All this plus an SEO bump. Thanks for your work on this.

===========================
Version: 3.0.4 (Ricochet)I'
Operating system: Linux 2.6.18-194.11.4.el5
Apache/2.2.21
PHP: 5.3.8
MySQL: 5.0.95
Clean Canvas theme
Graphics Toolkit = ImageMagick
Albums: 199
Photos: 68913

hi,it DID NOT WORK WITH IE 8,the tag cloud will never show up.could help me

Simple question: I still don't know how to remove this?

[img]http://gallery.menalto.com/files/1_29.jpg[/img]

Thanks.

I found "add tag to album" feature don't work for me. Then I try to add tag, I got something like https://paste.lugons.org/raw/aJmZxsy6ds225hhlVXLG/ and no tags added.
I use Gallery 3.0.8. Not sure, but IIRC in 3.0.7 I got similar answer but tags actually added. Ideas?

BTW, thanks for nice module!