July 2016

July 1

It is infact June 30th, but this date for the dev log is still technically correct. I did not want it to end up as the last post in the June logs, and have people overlook it, because this is a big one.

I've been teasing that the new v3 UI has some major new features, but not saying anything. I wanted to show, rather than tell, given what these do.

First, here is a pic of what the new UI looks like, for the tabs that exist so far:



Several things are immediately apparent when looking at this image.

Firstly, all of the text is a lot bigger. I understand that there are issues at different screen sizes with the Armory/Item Compare, as their font is tiny to begin with. Made doubly worse, as the v3 UI is designed to work on Mobile devices. The default font is the size you see in this pic, but you will be able to resize it in the Settings.

Secondly, the buttons and inputs are a lot less over-styled. Rather than being "in your face" about their presence, they are simply just different enough to distinguish them. As well, they are actually both styled the exact same. Any element with those borders is something you can interact with in some way.

Finally, and more subtly, there are actually a lot fewer colors in use now. In that entire image, there are only six colors (plus the Black borders for seven) present. Aside from making the site look cleaner, this will also make it easier to make custom color themes.

---

If you have a keen eye, you might have been wondering: "Why does the Item List window have a title calling it Item List, and also a tab named Item List? Isn't that redundant?" This actually ties in to one of the centerpiece new features of the v3 UI.

When trying to arrange the windows to your tastes, sometimes you hit a wall. Due to the weird sizes and shapes of the windows, you might not be able to line up two windows how you'd like. You might only want part of a window, but not the whole thing. You might not have enough screen space to have immediate access to all of the windows that you'd like to, or they might be tabs of the same window, and thus cannot be used together.

The v3 UI takes the drag and drop customization options to a new level of detail, and rather than me trying to explain a lot of things, have this GIF that runs through the main features:



...I am clearly FAR from mastering the art of screen capture GIFs, as the low quality graphics of this GIF attest, but I believe it still manages to convey the message. (The transparent square things are part of the GIF quality, and not actually present when dragging/dropping)

A lot of things happened in that 22 seconds, so I'll make a run through of the primary features of the new UI:

Tab Shuffling

You will be able to re-organize the order the tabs appear in, and this will be saved exactly the same way as window positions are. The left-most tab will be the default tab open on each window, when the page is first loaded.

Tab Relocation

On the v3 UI, the distinction of unique "windows" has been abolished. Each tab is entirely independent, and can be freely separated from its original window, or freely merged into any other window. As mentioned with shuffling, the site will remember which tabs you have placed where, and in what order.

The window width is determined by the widest tab they contain, and will dynamically adjust as needed.

Tab Ejection

This wasn't quite ready to demo, but you will be able to drag and drop tabs onto the main page background, separating them into their own independent windows. When doing this, the new window's title will default to the tabs name.

Window Collapsing

You may not always need a window open at all times. If you only occasionally need it, you can click its title to hide the entirety of the actual contents of the tabs. While collapsed, you can still freely drag the window around. To re-open a window, you just need to click its title again.

The site will remember which windows are collapsed, and which are not.

Window Renaming

Another feature that wasn't actually ready for demonstration, but you will be able to easily rename windows via an Edit icon that will appear beside their titles when hovered. Being able to relocate tabs wouldn't be very useful if you couldn't rename the windows as well, don't you think?

Tab Data Persistence

A third feature that was not completely ready for demonstration in the GIF. If you noticed, the Item List blanked itself when it was relocated to the "Character Info" window, yet continued to function properly.

On the actual release UI, all properties within the tabs will be preserved when moving them.

Keybind Support

The fourth and final not demonstrated feature. In honesty, I don't have a clear idea in mind yet of exactly how I want this to function. I have already implemented support into the page to properly receive and handle keyboard events (key presses) for more than just typing names and stats.

My goal with this will be to make it easier and faster to access the various Armory windows. I have rough ideas of allowing custom keybinds for summoning and dismissing individual windows, but nothing concrete yet.

Less Sensitive Window Dragging

The most minor feature of the group, but still worth note. To resolve the incidents where just barely missing clicking on something else results in dragging the window out of position, their drag functionality has been tweaked so that you can only drag them via their title bars. (Don't kill me Microsoft!)

---

If you wondered why I haven't been posting any Dev Logs for a while, this is why. In the process of actually getting these features to work, I had to rewrite my main function assembling together the page a whopping six times to get it to behave.

The amount of precision involved in making this sustainable is far beyond what I usually have to work with. All of the relevant code needed to be re-assembled to stop assuming the existence of the other tabs, all of my events need paired functions to unbind them for relocation, and so on. It took a while to get used to the process, and figure out exactly how to make it all work.

There are still minor stability issues (dragging an opened tab will cause errors and break the page), tabs can still drop onto their own windows wasting resources, etc, but the hard part is done. It might be approaching time to start reassembling the actual Armory ontop of this UI.

With all of that said and unveiled, are there any new convenience features that you would like to see implemented, that don't yet exist, or tweaks to be made to the v3 UI?

July 4

The next few updates will probably be very plain in comparison to the last one, but it's not like I can unveil much to top THAT. The next while will be more of what I have been doing up until now: implementing and refining functionality.

In those previews, you will notice that the scroll wheel is not actually starting at the top. Until today, those lists didn't scroll at all. As of now, they partially do, but scrolling is really awkward still.

I wanted to make scrolling smoother, as compared to the current lists. I also wanted to clean up the code involved in scrolling. Unfortunately, these two goals seem to be at odds so far. Smoother scrolling requires messier code, and it gets very stiff when scrolled all the way to the top or bottom due to animation queuing.

I am going to make a few more attempts to resolve this, but it is possible that I will have to sacrifice its scrolling animation again, for the sake of functionality. I am currently making efforts to perform the actual scrolling with jQuery's .animate() function, which does not seem to have a way to actually abort the queue for some reason.

On the older UI, I had previously tried the CSS3 transition properties, which did work, but caused extreme instability in the vertical alignment of the list, and was scrapped as a result. I may try this again if .animate() fails, but I don't expect much from it at this time.

No new tabs have been added to the Armory since the last update, as I am focusing on fully completing the code/CSS/template frameworks before re-implementing more of the UI.

July 11

So I haven't posted a Dev Log for a full week. Short answer? The ingame events, and Delia prep.

The last task I was working on, smooth scrolling on the lists, has been completed as of a few days ago. At this point, not only does it scroll *very* smoothly, and the difference IS remarkable between the new and old lists, but the actual scrollbar functions as well. In addition, it is smoothly animated too. I fully intended to post a screen capture GIF of it once it was complete, but to my disappointment, the recording does not have enough FPS to display the animation correctly. It just looks choppy like the current one.

On the subject of actually getting the animation to work, I was actually surprised by what I ended up working out. I had been initially fighting with JQuery's .animate() function to get it to handle moving and animating the list. However, I kept consistently running into issues with the scrolling getting "stuck" at the top and bottom of the list. I even tried writing in a function to run on each step of the animation, to cancel any queuing. Nothing I tried worked.

Eventually, I ended up scrapping .animate() completely, and I tried the CSS3 Transitions method. Amazingly, it immediately worked beautifully. It uses an extremely trivial amount of code too, since all I have to do is apply the new position property.

The scrollable lists code is now fully converted over to its actual proper formatting/structure, rather than just a placeholder setup. At this point, aside from being able to click and drag the scrollers bar to scroll, it is now 100% complete. This is my immediate next task, and I don't expect it to be very difficult. I simply need to make it draggable, and add a function to "snap" it into place when dragging ends, so that items are not only partially showing at the top/bottom of the list after.

Once that tiny bit of functionality is marked off and completed, I am next going to re-implement the Buffs Dialog. It has a scrollable list as well, but its list has a slight extra step of complexity, with each listing having the checkbox to enable/disable it. This will be a good way to test how adaptable the list currently is.