Adel's Blog

I'm making very slow progress working on Curvy "after having finished Dead Space". Looks like I either underestimated the amount of work and design required, or I overestimated my work abilities, or both. Anyway, since no drawing program is even usable without layers, I thought I'd work on them relatively early. The layers window is a customization of a custom tree-view control which I had created for use in the Angel3D Editor's Scene Explorer, although layers in Curvy will not be arranged in a tree but in a regular list instead.

Next to the "Add Layer" and "Remove Layer" toolbar buttons on the layers window, there will also be a "Move Up" and a "Move Down" button to allow the user to rearrange layers (drag and drop is not yet supported in the custom tree view control, and although implementing it should be rather easy, I'll not do that simply because I'm bored with GUI programming after all the work I put in the Win32 Property Grid control).

The Eye icon next to each layer is, not surprisingly, a layer visibility toggle button. The button next to it shows up a window which allows the user to set the properties of the selected layer: its name, transparency, color override options, and curve drawing mode options (wireframe, dots, regular... etc). However I'm still faced with a lot of UI design issues which I wish I had external help with. Like I said earlier, I can't help but think about such issues from the coding perspective and not the user perspective. Should each curve have a color and allow the user to specify a color override on certain layers? Or should a layer have a color and allow the user to override the color of certain curves? Should the layer properties window be integrated inside the layers window, or should it pop up separately when the user presses the layer options button next to the eye button? Ughhh...

Well, anyway, on to working on undoable commands and the undo queue. This will require rewriting a lot of things... FUN!

In an unrelated note, yesterday was the last day of the sixty consecutive days that I had to fast because of the car accident.

It's been about six months since the fated traffic accident I made which resulted in the death of a 16 year-old boy and the severe injury of another. Just when the injured boy was getting better and better, today we found that he had broken his leg again! I don't know how... he probably overestimated the recovery he had made and now it's broken all over again... completely broken. He underwent another operation to put the bones back together with screws, and his complete recovery is questionable. I'm completely helpless. I can't help but keep wondering what it is that I lived through the accident for.

So I finished the awesome property grid control and I proceeded to use it within Curvy (more on Curvy later). But after a while I was reminded of why I originally hated this particular control - it's ugly! The contents of a property grid control can never look as good as a well-designed dialog box. But the undeniable fact is that, programmatically, the property grid control is A LOT easier to use and also quicker to set up than a half decent dialog box, even when using easy and intuitive tools such as the awesome ResEdit. Creating custom dialog boxes for each and every thing quickly gets tedious and time and space consuming as an application grows. Consider the Unreal Editor for example, it simply has to use a property grid control.

Anyway, I was faced with the issue of placing controls to allow the user to control the thickness of the curves created using the draw tool. So I placed an edit box control to allow the user to type the thickness in. But you really can't expect someone drawing curves to stop and type some value just to change the thickness of the curve. So I replaced it with a slider control. Ok, faster, but more restrictive - the thickness will be restricted to increments of 1, which is stupid. Also, have you ever found yourself trying to set the brush size in Photoshop to 2 and got frustrated because it keeps jumping between 1 and 3? You have to move the cursor just one pixel to the right... son of a bitch!

So, I created an edit box with a slider as a child control underneath it like so:

Of course, this solves almost nothing - it just allows the user to pick the less inconvenient way to alter the curve thickness. So I thought: mapping the slider to the curve thickness should not be done linearly. Instead, we'll use a curve to do the mapping. So I ended up with these two functions:

const FLOAT sliderCurvature = 1.5f;
const INT sliderMax = 100;
FLOAT SliderToThickness( INT nSlider ) { return powf( (FLOAT)nSlider, sliderCurvature ) / (FLOAT)sliderMax; }
INT ThicknessToSlider( FLOAT thickness ) { return (INT)(powf( thickness * sliderMax, 1.f / sliderCurvature )); }

Now the user has finer control over the curve thickness on the left side of the slider, where the curve thickness is small. But still that wasn't good enough - it just assumes the user wants better control in that particular thickness span, which isn't necessarily true. So I decided to complement this with a "resizer" thingy whose concept is "inspired" from the brush resizer in Autodesk Sketchbook Pro. Basically it's a small window that the user clicks in and then drags left and right or up and down to resize the brush.


It's nice and cool, and it's the fastest way to resize the brush, or in our case, modify the curve thickness. But it presented the same problem as the slider - you don't get the fine control that is needed when working with thin curves. The answer to that was to modify the thickness based on the zoom of the view. Typically while working with thin curves (especially less than 1 pixel of thickness), the user will zoom in to see them better. So we just multiply the drag delta by the inverse of the zoom and we get fine control.

That worked very well. It works with thin and thick curves equally well. And I thought maybe I'll do the same thing with the slider control. But then I realized it wouldn't work, because the slider control is designed to allow the user to specify a value within a range, and having a range here doesn't make sense, and to make this practical the slider will have to be stupidly very long. Also, the brush resizer window's visibility should not be imposed on the user, so if a user hides it, he ends up with a crappy alternative. So I decided to replace the slider with a different control. Enter the new spin box control!

The spinbox control is similar to the Windows' "up-down" control, or spin control. The up-down control allows the user to either click the up or down arrows to increment/decrement a value (typically displayed in an edit box), or to click and hold either of those buttons for timed increments. For an example, in XP, go to Display Settings > Screen Saver, and see the "Wait:" setting. It works well for those kinds of things, but it's not very practical for finer control. The spinbox control differs in that it has three parts, two increment/decrement (up and down or left and right, depending on whether the control is horizontal or vertical), and a central drag part. The user clicks on the central part and drags to change the value. Awesomeness if I may say so myself.

Then I started wondering how they solved this in the Unreal Editor. I then found out that they used something similar to the combination I made earlier of the edit box and the slider, except they are integrated into one new hybrid control. But it had two problems - I only found out I could do dragging after seeing it done in the video tutorials, so it's not really intuitive, and the second issue is that dragging the "slider" filled up the undo buffer! Every step added an entry in the undo queue. Ha, amateurs

Here is how it looks like now. The spinbox control still is incomplete - it needs to draw separators between its 3 parts.


If it's one thing I learned, it's that the requirements of a program should not be set by the programmer himself - he will either end up skipping important things, or spending too much time tweaking and inventing stuff to his liking. Where is Chris when you need him ? Anyway, I think it would be better to update more often with shorter posts... yeah, that would be more appropriate and useful.

So the trial got postponed till December 29th. Yay for temporary freedom. Things are looking pretty gloomy though. I can't say I'm looking forward to spending two to three years in prison. This wasn't supposed to happen. I'm a hikikomori, damn it... what's the point if I'm going to get into this kind of trouble anyway? I guess that's fate for you. What a horrible concept.