Software Development

August 16, 2008

I'll try and get the other three GUI components done this Sunday Aug. 17 or Monday. Radio buttons are just another kind of checkboxes with exclusive selection. For the listbox and dropdown box, I'll copy the code from my treeview component and simplify it to one column without headers.

I've also fixed some drawing issues with D3D. Renders super fast now. Caches textual components as a texture for even faster rendering.

All GUI components can now have built in font (+color & alignment) handling as well as automatic texture handling (like automatic border resizing for editboxes and Project V components.) Checkboxes also have several textures that are handled by the same functionality.

Here's a screenshot of a few GUI components I'm working on. You can see TextButtons, ImageButtons, an EditBox, a CheckBox, a TreeView, several transparent panes though you can't tell in this picture (see next screenshot for a better view). The left pane is for viewing and editing types. The right pane will be for categories where you can see your project and other groups of components. The top pane is for actions (what's there now is certain to change very soon). The top pane is also used for common components and other options/settings. The bottom pane is for navigation (zoom box and scroll box in the bottom right corner) and for listing all your worksheets (for Project V component networks, output, runtime and whatever else you want to display). Oh yeah, that checkbox and editbox won't stay there. I'm just testing them. And yes, that left panel is currently linked to data within a test Project V network. That's the reason I need those other GUI component like editboxes and selection boxes so you can edit types and build your own.

(click on image for larger view)


Here's another view of how the panes can be removed when you want to use the full screen to manipulate the current network (or other worksheet). It also shows how the panes are translucent.



The GUI will get updated quickly once I have all the GUI components I need. There's a lot of stuff in the backend just waiting to be displayed. And keep in mind that most of the code for manipulating Project V data is already written (other than notifications).

August 17, 2008

Done with radio buttons. This was actually a little more difficult than I thought because it's not just a mutually exclusive checkbox. Once an item is selected, you can't unselected by clicking on it again. In that respect, it's different than a pushbutton (which is what the checkbox is).

A couple of little features for checkboxes and radio buttons is that you can use your own graphics if you want and you can select if you want them on the left or right. You can also justify your text. Text justification is available for anything that displays text.

I also added a state change event whenever a checkbox or radio button changes its checked satus.

Next up: ListBox

Actually, I ended up doing the zoom box and the view scrolling functionality. This was actually fun. It's pretty cool seeing the GUI starting to come alive. I can now scroll around and move components where I want. IOW, the virtual canvas is working. It's like a virtual desktop where the viewing area is only a small view into a much larger canvas.

Now maybe I'll finish up ListBoxes. But probably only on another day. I've finished three items today. That's more than enough for now.

The buttons around the zoombox now work. And you can scroll if you hit the edge of the screen. Oh, I forgot to allow scrolling by grabbing the background. I'll do that now. In this screenshot, you can see the zoombox in the lower right corner.



Ok, I'm done scrolling by grabbing the screen.

Another screenshot just for fun. This one has the radio buttons.



August 19, 2008

Started working on listboxes. I won't be done today as I didn't have much time to work on it. There's a lot more to a listbox than I thought. Got all the basic functionality done. Supports multiselect. Got the API working for selecting items, unselecting items, adding items, deleting items along with event notifications of all those actions. I'll hook up the mouse events to activate selections next time I get to it. I also have the drawing routine which won't be hard since I have all the code necessary for that from the treeview component. The treeview component is rather specific to my needs, but all other components are generic in that you can change the graphics and how it works. The listbox falls in that generic category.

The good part about this is that I can use the listbox for dropdown boxes.

August 25, 2008

Done listboxes. I'm happy with how this turned out. I have a generic class for the listbox and another one that is specific for the graphics I am using. The only GUI component that doesn't work this way is the treeview, but that whole component is custom anyways. I added a few extra events in the listbox. When an item is added or deleted, this will trigger an event where you can change the node in question along with a boolean value that says if it's ok to proceed with the action. Another event is available AFTER the operation. Same thing for selecting or unselecting an item. If you change the text of an item, this will trigger yet another event, but there's only one activation (after the text has changed).

The events were easy as it's just calling a function. But drawing and mouse events were a little more complicated, mainly because of the scrollbar. I finally got it done and everything works really smooth.

Next is the dropdown box which I'll use the listbox I just created for that. Unfortunately, I can't use it as is. I don't want selections to show up highlighted, but rather show up underneath after the selection popup graphic has disapeared. Still, I can just copy most of the code from the Listbox over to the dropdown box and modify it. I suppose I'll end up doing a variation on popup menus.

August 29, 2008

I'm done drawing the dropdown box and all its internal functionality. I simply have the events left to do. I'm going to make dropdown boxes work a little differently than the way they traditionally work. I'm going to allow using the mouse wheel to make the selection list popup over the component with the correct option highlighted. The mouse wheel will allow the selection to update, but the highlighted selection always remains directly under the pointer. You can, of course, move the mouse pointer and select the new option directly. Moving the mouse outside the selection area will cancel the popup selection list and retain the original value.

Once that is done, I'll have most of the GUI components done. I would like to have a multiline textbox, but I'll keep that for later. I doubt it would be too difficult. I think I would only need to update the editbox to properly do word wrapping and I already have that functionality available with ICU.

In any case, I'll try and have a working prototype for Project V before I get into any more GUI components.

September 3, 2008

I was bored and decided to implement a video component. It's for another project of mine, but I thought why not include it. I want to be able to play videos as well as grab each frame. Now you can do both and much, much more. You can add as many videos as your machine can handle. I had some problems getting it to work at first because I don't necessarilly play the video at the same frame rate as the rest of the application. DirectShow uses its own threads, so that complicated matters even further. But needless to say, it works great now. The bonus is that it is fully integrated within the GUI system.

September 19, 2008

I'm done the last graphical element that I'm going to use for now (I hope). The dropdown box is done. This one has a lot more features than I wanted. You can activate it by clicking on it or rolling the mouse wheel. Rolling the mouse wheel will automatically select the next item in the direction you are scrolling when the popup activates. Clicking just activates it as is. When the popup does activate, you can use the listbox as normal and select the option you want, or you can leave the mouse pointer where it is and use the mouse wheel. The options will scroll underneath your cursor. So you don't even have to move the mouse cursor. Finally, you click on what you want to change the selection. You may also move the mouse off of the popup list and it will cancel the action.

September 22, 2008

The following work isn't on the list.

I updated the editbox to support ctrl+right and ctrl+left to skip to the previous or following word. I also included double clicking which will select an entire word that's located under the mouse pointer. If no word is present under the pointer, it will select the previous word if one exists.

Again on the editbox, I added two events. One for when the text changes and another when the user presses enter (or the focus is lost). It will only call the event for enter or lost focus ONCE per string. So if you press enter or lose focus, that event will only be triggered if the text has changed since the last trigger.

And finally, I updated all strings to display using ClearType antialiasing if available.

October 20, 2008

I did quite a bit of work today. Unfortunately, most of it isn't anything that anyone will actually see. I fixed a bug with the type system. It had to do with tree traversals. When going back down, I was removing two items instead of one. It works just fine now.

Then I wanted to add a selection box for enumerations. Enumerations are how you define primitive types based on another primitive type. A primitive type like an integer is just a regular type that the compiler understands. But if you want to define another primitive type yourself, you can base it on an integer and then use the Enumeration type as a secondary type to specify what values are allowed. The Options set of the Enumeration type does this for you.

So the big addition to the GUI was to be able to list all of the items in the Options set in a popup and then let the user select what value they want and update the internal values. I finally got it done. So now, ALL Enumerations can be updated within the GUI.

Just as an example, the boolean type is an enumeration. It has TRUE=1 and FALSE=0 in its Options set. So the popup would list TRUE and FALSE and you can select the one you want.

Next up, I have to allow the user to update Integer types. This should be a LOT easier to do. I have to create another component, but it shouldn't be a big deal. I'll subclass the current textbox and add a little bit of code to make it disapear when you press enter or when the textbox loses focus.

October 25, 2008

Finally got the editor for integers done. Actually, it was done several days ago, but I ran into a few memory leaks and memory corruptions using deleted objects. I was finally able to get a memory checker that worked properly even with new STL allocators that call destructors, but do not actually delete the memory in question. This is done to speed up lots of small memory allocations used by STL. Still, I've never seen it done in debug mode before and it threw me for a loop.

Anyways, I can finally get to creating components and linking the up. The fun stuff now begins.

November 10, 2008

Created a new panel on the right side for displaying primitive types and built-in components.

April 15, 2009

Completed event system for type system. Can now be notified on:

Set Creation
Set Deletion
Node Insertion
Node Removal
Reverse Set Creation
Reverse Set Deletion
Reverse Node Insertion
Reverse Node Removal
Node ID Change
Node Name Change
Value Change
Node Deletion

There are three events for each one. Before, After and Delayed. The Before and After events get triggered immediately before and after the action. You cannot modify the type system during these events. However, the delayed events are there just for that purpose.