Mousing over diagrams

[daal]

When mousing over a diagram, it would be nice if the pop-up would contain a lot less information. As it is, the huge white window full of %20s is a bit bothersome.

[Solomon]

Hmm, strange...I'm not getting this problem on my end (OS X, Chrome 5.0 Beta).

[schultz]

I'm only seeing it when the page first begins loading. I thought it might be the alternate text for the image, as the issue daal is saying makes it very much sound like that. It's not happening to me, though. Daal, what browser are you using?

Looking at the source code for the page itself, it looks like the javascript behind the processing of the diagram code is what's causing this (does a bunch of replaces on the text sent in and then adds it to the link that gets sent to the actual image/diagram/sgf creator).

[Gresil]

Does your browser show image URLs when mousing over? Turn that off, because it looks like a diagram's URL encodes the entire diagram definition. Here's the URL of a random diagram:

Code: Select all

http://www.lifein19x19.com/forum/example4.php?request=SGF&msg=$$Bcm151 Moves 151 to 160 This is a long title, which I am going to keep writing about. You can write paragraphs and paragraphs, and the captions should wrap correctly, and not overlap with the image. Hopefully this works on all diagram sizes. If it does, that would be cool. And nothing else to say here, I guess...
$$ ---------------------------------------
$$ | . . . . . . . . . . . . O . . . . . . |
$$ | . . . . O X . . . . X O X O O . O . . |
$$ | . O O O . X . . . X . . X X O O X . . |
$$ | . . X O . . . X . , X . . X X X O O . |
$$ | . . X O . X X X X O . O . . . X X O . |
$$ | . . . . O O O X O . . . . . X X O . . |
$$ | . . X . . . . O O . . O . . X O . O . |
$$ | . . . . O X . . . . . . X X O O . . . |
$$ | . X X . O 6 . O . O . X . . . O O . . |
$$ | . O X , X . X O . , . . . . X O X X . |
$$ | . O O X . . X O X X . X X X . X . . . |
$$ | . . . X . . . X O . . O X O X X 5 O . |
$$ | . . O X . . . X O . O . O O O . X 4 . |
$$ | . . O X . . . X O . . . O . X O O O . |
$$ | . . O . . . . O X O O . O . . X . . . |
$$ | . . O X X . . . X X X O . O . X O . . |
$$ | . . X O X . . . X . . X O . . X O . . |
$$ | . . O O X 3 . . . . . . X X . X O 0 . |
$$ | . . 2 C O . . . . . . . . . . 9 7 8 . |
$$ ---------------------------------------

[schultz]

Does your browser show image URLs when mousing over? Turn that off, because it looks like a diagram's URL encodes the entire diagram definition. Here's the URL of a random diagram:

Code: Select all

http://www.lifein19x19.com/forum/example4.php?request=SGF&msg=$$Bcm151 Moves 151 to 160 This is a long title, which I am going to keep writing about. You can write paragraphs and paragraphs, and the captions should wrap correctly, and not overlap with the image. Hopefully this works on all diagram sizes. If it does, that would be cool. And nothing else to say here, I guess...
$$ ---------------------------------------
$$ | . . . . . . . . . . . . O . . . . . . |
$$ | . . . . O X . . . . X O X O O . O . . |
$$ | . O O O . X . . . X . . X X O O X . . |
$$ | . . X O . . . X . , X . . X X X O O . |
$$ | . . X O . X X X X O . O . . . X X O . |
$$ | . . . . O O O X O . . . . . X X O . . |
$$ | . . X . . . . O O . . O . . X O . O . |
$$ | . . . . O X . . . . . . X X O O . . . |
$$ | . X X . O 6 . O . O . X . . . O O . . |
$$ | . O X , X . X O . , . . . . X O X X . |
$$ | . O O X . . X O X X . X X X . X . . . |
$$ | . . . X . . . X O . . O X O X X 5 O . |
$$ | . . O X . . . X O . O . O O O . X 4 . |
$$ | . . O X . . . X O . . . O . X O O O . |
$$ | . . O . . . . O X O O . O . . X . . . |
$$ | . . O X X . . . X X X O . O . X O . . |
$$ | . . X O X . . . X . . X O . . X O . . |
$$ | . . O O X 3 . . . . . . X X . X O 0 . |
$$ | . . 2 C O . . . . . . . . . . 9 7 8 . |
$$ ---------------------------------------

Gresil beat me to it, was editing my post while he posted the above. This is what it is doing. I saw another version of this that actually takes all that text and creates a md5 hash of the text and uses that as the name of the image and sgf file. Would be a way to clean this up quite a bit.

Edit - Found where I saw that, and feel a little silly. Code that is tagged with a familiar author...Adrian Petrescu.

[daal]

I'm using Opera, and I don't have any idea how to turn off image urls.

BTW, I wanted to post a screenshot of what I'm seeing, and I can't figure out how to do that either

Edit: It must be a browser thing, The pop-ups don't show up in Firefox...

[daal]

I uploaded this to Imgur (thanks sol.ch), but is there a more direct way to post an image? In any case, this is what I'm seeing:

[Phelan]

I uploaded this to Imgur (thanks sol.ch), but is there a more direct way to post an image?

You can use the "upload attachment" function below the main post writing area.

[Kirby]

Yes, currently information is passed through the URL to generate an image on the fly. The image is not actually saved anywhere. This was because it was the only way I could figure out how to make diagrams work at the time. I think there's probably an alternative method that we can look into, but maybe after I work on the space issue with the diagrams that I think simpkin brought up.

[fwiffo]

Does the server side script even cache the generated images?

[ross]

I'm using Opera, and I don't have any idea how to turn off image urls.

I'm using Opera too, but I'm not seeing it--but if I remember correctly, I've used versions of Opera that will use the image URL as the alt text if no alt text is specified. That means that this problem could be fixed by just adding some short alt text for the image (like "Go Diagram"), I'm guessing.

[Kirby]

Does the server side script even cache the generated images?

Well, if I think about the actual implementation, there's a good chance that it does. Basically, we just use the php imagepng function, which outputs the raw image stream directly. I haven't looked into how php implements this.

The imagepng function can also take a filename as a parameter, in which case it will save the file to the given location.

[Kirby]

I'm using Opera, and I don't have any idea how to turn off image urls.

I'm using Opera too, but I'm not seeing it--but if I remember correctly, I've used versions of Opera that will use the image URL as the alt text if no alt text is specified. That means that this problem could be fixed by just adding some short alt text for the image (like "Go Diagram"), I'm guessing.

I'm wasn't seeing the behavior before, either, but I added the alt text like you suggested for now.

[daal]

I'm using Opera, and I don't have any idea how to turn off image urls.

I'm using Opera too, but I'm not seeing it--but if I remember correctly, I've used versions of Opera that will use the image URL as the alt text if no alt text is specified. That means that this problem could be fixed by just adding some short alt text for the image (like "Go Diagram"), I'm guessing.

I'm wasn't seeing the behavior before, either, but I added the alt text like you suggested for now.

Doesn't seem to have done the trick, but thanks for the effort.

[Kirby]

Doesn't seem to have done the trick, but thanks for the effort.

It looks like your browser shows the URL regardless of the ALT text, then. I'm thinking that we're going to have to save the images on the server to adjust this, rather than generating them dynamically. I don't see how using an MD5 for a dynamically generated filename would allow for us to get around saving the images to disk since MD5 can have collisions. Perhaps we could save the files to the server using an MD5 hash for the filename, and if a duplicate filename existed, we could increment the filecount (eg. <md5-hash>1.gif, <md5-hash>2.gif, etc.). This would be inefficient for the cases where you have two of the same images (because we would generate separate, but identical images).

On the other hand, perhaps the chances of having an MD5 collision are low enough that we could use this filenaming scheme.