#1: Jan Wolter (jan) on Sep 29, 2013

For the last few years there has been an option on the settings tag to draw puzzles in "SVG Mode" instead of the standard "HTML mode".

SVG is "Scalar Vector Graphics" and it's an image drawing language understood by most browsers now.

In old-fashioned HTML, there really wasn't any way to draw pictures on the screen. All you could do was load images. So the webpbn puzzle screens were all tiled together out of images. This is rather slow and clumsy.

SVG actually lets me draw lines and rectangles and such. Much nicer.

However, browser support was slow in coming. Well, I should say "Internet Explorer support was slow in coming". But it's here now. IE9 and IE10 do SVG very nicely. Even the mobile browsers are catching up - they all either already support SVG or will in their next major releases.

So my plan is that sometime soon I'm going to switch to using SVG as the default for all users. The old HTML option won't go away, and will still be usable by people with old and bad browsers, but new features won't necessarily be implemented there. I'm currently thinking about things like added colors and triddler puzzles, neither of which will be available in the HTML mode when and if I get them done. Before I do either of those, the puzzle creation tool will need to be switched to using SVG instead of HTML.

So you can go to the "Settings" tab now and set things to SVG mode and see what you think. Or you can wait till I implement the switch.

Hi, Jan, I am now using the SVG mode and have not had any problems (using Chrome).

I do have a request/suggestion for the puzzle page - could you consider moving the color selection "button" to the corner of the puzzle where the number of rows/columns is displayed? (Normally the upper left, unless you use the arrow keys to move the clues to the right or bottom.) This would keep the selector on the screen on larger puzzles.

Thanks for all you do for us puzzlers!

Hmmm...I never use the color selection button that way, which is probably why I never minded it being a bit out of the way. I'll have to think about that.

I mostly just use the "cycle through the colors" setting, but I don't do a lot of big color puzzles. Possibly I should do as you suggest, but meanwhile, there are many alternatives:

• Set either the middle or right mouse button to the "eyedropper" symbol. Then clicking on a clue number or cell with that mouse button sets the left mouse button color to that color. This is nice because you never have to move the mouse off the puzzle to change colors, and if you are changing to red, then it's probably because you were looking at a red clue, so clicking on it to change colors is pretty natural. (If you only have one mouse button, then control-click and shift-click are your middle and right buttons).
• If you set the right mouse button to the "M" symbol, then that button will bring up a menu of colors from which you can select a new color for the left button.
• Or, you can use no mouse buttons at all. Put your cursor over a cell, and hit the "1" key on your keyboard to paint a cell white. "2" is black, "3" is red, "4" is green, "5" is blue, "0" or space are unknown.

Of course, you should use whatever system works best for you, and I'm certainly willing to try to make things work better, but I suspect that not everyone knows of all the options available.

I'm not going to switch to the SVG client quite as soon as I thought, because the more I test it out on different browsers, the less satisfied I am.

Clue Numbers In the old program, each clue number is a hand-made image file. For the 99 different clue numbers, 4 colors, and 3 sizes, there are 1,188 different image files. To add a color, I'd need to create 297 more. To add a zoom level (which is really needed as computer screen resolutions increase), I need to create 396 more images. Loading each of those little images from the server slows down page load time and increases server load. I'm not really fond of the fiddly little images.

The SVG mode doesn't use them. It generates text the way computers normally do, based on a font already stored on your computer. The problem is that such fonts aren't really designed to fit two digit numbers neatly into a square. The number "99" is wider than it is tall, and the number "3" is taller than it is wide. The old image tiles stretched or squished the numbers to approximate squareness, so they could be as big and bold as space allowed. In SVG I can actually do the same thing - I set the font height as large as it can go to fit in the box, and then tell SVG to stretch or squish the font to fit the font to the correct horizontal width. This works OK in IE and Chrome, but Firefox ignores the command. So if I want the numbers to fit in the boxes in Firefox, I need to make them small enough so that the width of "99" fits in the box, which means the numbers aren't very tall. The good news is that the Firefox developers completed a fix for this in July. Not sure how long it will be before it appears in the browser.

One fix I've considered is to have the SVG client use the old image tiles, especially when the puzzle is at a small size, or the browser is Firefox. As you "bigger" the puzzle up, it would switch to sensibly rendered characters.

Grid Lines You probably think that the paint by number grid has lines on it. It doesn't. It has a square for each cell. Those cells are placed with gaps between them, through which you see the black background that is behind the cells. This makes sense because I don't want to do anything with the lines, but the cells have to change color and respond to clicks, so they are objects and the lines aren't.

This means that the positioning of the cells needs to be quite precise, so that the gaps are exactly one pixel wide except for every fifth line, which is two pixels wide. Unfortunately, this isn't always the case right now in the SVG client. In some browsers the 2-pixel/1-pixel distinction gets muddled up, so the thicker lines aren't where they are supposed to be. In other browsers (IE mostly) the lines sometimes vanish entirely. Not good news.

This is all due to round-off error in scaling transforms. I spent a lot of time trying to avoid this, but that's fiddly and sensitive to browser's individual weirdnesses. I might have to give it up, draw the cells a bit bigger, so they overlap a hair, and then draw lines on top of them. This would probably scale better.

Hover-text There is a webpbn setting that causes a little box to pop up when you hover your mouse over a clue (or cell if you set it that way) with the clue numbers and colors in bigger print. This hasn't been working reliably in SVG. I haven't entirely figured out what is up with it. More browser incompatibilities I think.

Hmm...the whole business about lines being gaps between images has always gotten messed up when you use your browser's zoom function. That's because when you zoom a pixel isn't necessarily a pixel anymore. It looks like Windows now has a setting about how much to zoom things on your screen, which defaults to 125% on many computers. IE and Firefox make this the default zoom size. In firefox 100% doesn't even seem to be an option (except via some "about:config" stuff). Chrome ignores it, and defaults to 100%. So this means that a lot more people are running their browsers with random zoom values other than 100%. Probably I need to work on being more tolerant of that.

Jan, I didn't know about all those options to select colors. I regularly use the keyboard numbers, and I keep the right mouse button set to white. I'll try the eyedropper thingie on the middle button, which I've never used much as a button in any application, just for scrolling. Thanks.

Okay, I tried setting the middle (wheel) button to the eyedropper, and it activated a zoom function. Same when I set the middle button to "M". I looked at the mouse settings in Control Panel (it's a Logitech Bluetooth mouse), but don't know if I need to change anything there or someplace else on the system.

Some browsers won't allow me to re-assign the middle mouse button. I think Firefox is one that does that. You can always use control-click as a substitute middle button.

Firefox will allow the reassignment of the middle button, but the user must do something first:

Choose Tools | Options and click the Advanced button. Then, under the General tab uncheck "Use autoscrolling" (the first in the Browsing section).

Joel, your problem sounds different. If you're zooming, that means you're rolling the wheel. The middle-button select is a click. (Push down on the scroll wheel without rolling it.) You do this on top of a cell with the color you want (either a clue of that color, or an already set pixel). It doesn't scroll through the colors.

I'm using Chrome, and I'm pretty sure I'm just clicking the wheel. If I roll it, that just scrolls the display up and down. Once I click the wheel, then it zooms if I roll it

Hmm. I just brought up webpbn on Chrome 30.0.1599.69 m on Win7 and the center-click works fine for color picking.

If I center-click outside the puzzle, I get a four-way arrow and the page free-scrolls in the direction I move the cursor. Scrolling the wheel at this point just moves the screen -- no zooming.

The only way it zooms is with ctrl+scroll.

My Chrome is unchanged from factory settings as I don't use it.

The problem may be with my netbook computer. There's a sticker on it touting its' features, one of which is "Magnifier." I'll poke around and see if I can find a way to disable that function.

Goto next topic

You must register and log in to be able to participate in this discussion.