This video shows how ditzie’s most basic features and the simple “dnd” image set can be combined to create very simple battlemaps.

Start by bringing up the Attributes window on any object (shift-double-click anything on the page, it doesn’t matter what). Look at the very bottom of the resulting window and find a line that says “++ 0 x 0″

Move All section of the Attributes window

Guess what? You can edit those zeros. Click on one of them and enter a value to offset by (the format is ‘++ “X offset” x “Y offset”‘) and tab or click off. This will offset all of the images on the page by the same amount. I’d suggest using small numbers, 50 or 100 at a time, to reposition your elements around the canvas.

Here’s a little known secret about ditzie… while you can’t double click a “non-changeable” image to edit its Properties, you can shift-double-click it to bring up the Attributes window. From there, you can directly edit and change some of the parameters of the item, including its CSS rules. Simply delete the keyword “nochange” from the list of CSS classes associated with the item and click the “Set Classes” button. Click off the Attributes window and you’ll find the image is now changeable again.

Make a non-changeable image changable again

Now if you’re wondering if this somehow makes ditzie insecure… well, it’s worth noting that ditzie isn’t “secure” anyway. The whole point of making something non-changeable is to prevent you from accidentally making mistakes that would otherwise compromise your work. This is a larger philosophical debate (if your philosophy has room for something as silly as ditzie to begin with), but suffice it to say that being able to make-changeable any thing that was made non-changeable is a feature, not a bug.

Of course, if you don’t have a clue what kind of links I’m talking about, you might want to check out the Gallery interface. When you add an item to your personal gallery, you’ll notice one of the options is “Link.” You can create a link to any other gallery (to be used for convenience). The “hilight” image of the linked gallery then appears as a member of the ditzie image set for the gallery in which the link was placed. In the browser, linked galleries appear as sub albums.

When you have an image that you intend to use as a background, it takes a few steps to “get it right.” Move it down, strip the title, lock it, make it non-changeable. That’s a few clicks which I felt could be a lot simpler (especially if you use ditzie for incremental battle-mapping like I do), so I went and made it simpler. The new “Make Background” button in the Properties window (that’s what “double click” window is called: Properties) will do exactly that:

1. Remove the title
2. Move the image to the bottom of the stack
3. Lock the image
4. Make the image non-changable

Make Background button in the Properties Window

Hope you find it useful!

I’m now planning to completely rewrite the ditzie UI leveraging the HTML5 canvas’ ability to handle precise pixel rendering. After doing a lot of research, it seems clear that I can make ditzie do everything I want with the canvas, but I’m going to have to do a lot of learning on my own to get there. I’ve seen some incredible examples of what the canvas can do (my favorite thus far is Raymond Hill’s excellent jigsaw puzzle implementation), and I’ve put together a few mock-ups (sorry, keeping those secret for now) which have me convinced that I’m on the right path.

As it happens, I’m also in the process of rewriting ditzie’s back-end to be more flexible and powerful. I’m setting a lofty goal to one day make this sucker capable of supporting real-time collaboration just as it’s ancestor once aimed to be. In the short term, any users who might be concerned about performance or available can rest assured that my #1 goal is to make sure ditzie remains practical and usable above all else.

Turns out, I can make drop shadows and rotating images play nice together after all. Unlike the previous solution which uses the next-generation of the script.aculo.us library (called scripty2), this implementation is done with HTML5:

http://ditzie.com/demos/rotate2.html

While it looks okay in Firefox, this solution produces some strange results in Chrome and Safari. I haven’t even tried IE yet, but I’m sure it won’t be pretty. Anywho, looks like drop shadows may be a possibility in the future too.

With today’s newer browsers and the power of advanced scripting it’s pretty trivial to knock together in-browser image rotation. Therefore, I’d like you to behold a demo of what I think is one of the most important features on ditzie’s horizon (just tap the left or right arrow keys to watch the magic):

http://ditzie.com/demos/rotate.html

This is a feature that I’m quite anxious to add to ditzie, but alas, there’s some back-end work that needs to be done to support it first. Rest assured, however, that image rotation is something that ditzie will support in the not-too-distant future.

Let’s give this whole screen casting thing a try while we’re at it:

As a reminder, the Gallery system on the Beta site is a completely different animal. If you want to actually use ditzie, you’ll need to register over there. This site is just a blog where I ramble on about ditzie.