Lazaroth's Modern UI

User avatar
Posts: 221
Joined: Sat Apr 16, 2011 6:30 pm
Location: Luleå, Sweden

Lazaroth's Modern UI

Postby Lazaroth » Fri Dec 20, 2013 5:01 pm

Current version: 0.4

Try it out
Source Code

Recommended Browser: Chrome
(behaves similar to the XL Engine's Awesomium)
Current Themes: Daggerfall and Skyrim
(you can create your own by using Daggerfall as a base)

- Make sure the page has finished loading before trying it out!
- Keep in mind that using the latest version of a browser is required.

v 0.4
- Dynamic loading of window scripts.
- Dynamic window creation.
- Move windows to their own files.
- Rewrite of inventory to support scaling.
- Map.
- Option to render a 3d world
- UI Scaling
- Enhanced Margin Size
- Better error handling.
- Standardized button presses.
- Dehardcoded many values.
- Read me.
- HowTo for creating themes.
- Bugfixes.
v 0.3
- Made scrollbars work consistently.
- Speed optimizations.
- Fixed Sticky Windows.
v 0.2.1
- Bugfixes
v 0.2
- Themes.
- Workspaces.
- Changelog and version number.
- Checkboxes are now triggered when the corresponding LI is.
- Windows are now brought to focus when clicked.
- Added dates to quests.
- Added Creative Commons license.
v 0.1
- First Public Release

- The default button to open the inventory is TAB.
- The size of the inventory is adjusted automatically based on your browser window size. The default settings are optimized for 1920x1080, but you can easily fix this by adjusting stuff manually.
- The layout is a hybrid between Morrowind and SkyUI. All windows can be resized and moved.
- There is an effect added behind the windows when inside the inventory. It matches the currently selected scenes. You can turn it off in the settings menu.
- The inventory and spell list is populated with random things from a database file. This includes random prefixes and suffixes on weapons and armors.
- The icons are adjusted automatically depending on which material the item is made of. Daedric, Silver etc. This is done by having partially semi transparent icons with a color behind them. The colors can be changed in the database file.
- You can switch between showing inventory items as a grid or as a list.
- When in grid mode, you can choose to have the scrollbar on the right or at the bottom.
- You can filter the items by writing part of the name.
- You can sort the items by type; e.g. weapons, armors, potions etc.
- You can sort the items by different attributes, such as name, weight or value.
- You can set a quick key for a weapon, spell or armor by hovering the item with your mouse and pressing 0-9. Closing the inventory and pressing 0-9 selects a weapon or spell that has a quick keys (no armors etc).
- You can add a favorite by pressing the middle mouse button on an item.
- You can press the button on the top right to make a window sticky, i.e. visible even if you close the inventory.
- You can move and zoom around in the map, but this is basically just a placeholder for now.

- The default button to open the journal is J.
- Active quests have white text, finished have gray.
- The quests are taken from an xml file (for an xml file to load, you have to run in through a web server).

- Zoom, pand and rotate
- Find Locations
- Filter location types

- Health, magicka and stamina are filled automatically from the amount specified in the database file.
- The compass needle is rotatable. Hovering it, makes it rotate.

Settings Menu
- The settings menu is located bottom right in the browser.
- You can switch between different scenes; night, rain and snow. These changes the background and the inventory effect.
- You can change current theme (make the windows look differently).
- You can change the default buttons and renaming all workspaces.
- You can move windows to a new workspace by dragging it to the corresponding top left number.
- If you prefer smaller margins, you can change the size.
- You can reset the settings and window positions to default.

Buttons for the Daggerfall Theme
TAB: opens up the inventory
J: opens the journal
M: opens the map
S: opens player stats
Backspace: opens settings menu
0-9: hover a spell or an item with your mouse and press 0-9 to set a quick key
Middle Mouse: Select a favorite item or spell
alt-shift: Rotates the map
shift: Zoom in on the map

If you find bugs, let me know, or even better yet, use the source code to fix the problem yourself.
Last edited by Lazaroth on Fri Jun 20, 2014 2:46 pm, edited 5 times in total.
User avatar
Posts: 526
Joined: Tue Apr 19, 2011 12:35 pm
Location: Duisburg, Germany

Re: Lazaroth's Modern UI

Postby greenlight » Fri Dec 20, 2013 5:22 pm

Absolutely amazing! :shock:
This is just an elegant but still functional UI and I can't wait to see it in DaggerXL.
Although I'm not the biggest fan of the Morrowind UI, this is definitely much better than the original UI. Maybe Lucius can take a look at it and see if he can implement it in the current build to see how it works.

And if you were able to code that in "a few hours here and there" you must be a good coder :)
In Soviet Russia books burn nazis...
User avatar
Posts: 134
Joined: Sat Jul 06, 2013 5:41 am
Location: Denmark

Re: Lazaroth's Modern UI

Postby Adda » Fri Dec 20, 2013 5:51 pm

Looks great, all I'm missing is a menu showing stuff like, resistances, total weapon damage, critical chance/damage, spell effect strength/duration, and so on, with all modifies included.
ThinkPad R60 - UXGA IPS - Core 2 Duo T7200 - Radeon X1300 64MB - 2x2GB - 7200.4 320GB - M2Tech hiFace Two - Atoll DAC 100 - Aragon 18k - AKG K240DF
User avatar
Posts: 126
Joined: Fri Apr 15, 2011 4:37 pm
Location: Ostrava - Privoz, Czech Republic

Re: Lazaroth's Modern UI

Postby ragholio » Fri Dec 20, 2013 6:32 pm

Excellent work Lazaroth! Definately a mod I will use :)
My original music | |
User avatar
Posts: 148
Joined: Mon Apr 29, 2013 1:36 am
Location: Arizona

Re: Lazaroth's Modern UI

Postby HoonDing » Fri Dec 20, 2013 7:17 pm

I like it! I've got a much smaller resolution (1280x800), though, so some of the graphics get cut off. Worth mentioning. I mean, I can resize the windows in the menus to see everything in one menu, but I obviously can't get everything to fit and it just doesn't look pretty. I always prefers a list menu to a grid menu for the more information, but things don't exactly line up, so it's actually more confusing.

Personally, I don't think the Morrowind style "everything fits on one screen" method is that important, and Daggerfall's also got way more information to convey than Morrowind, in some aspects. I'd got for something like tabs or what have you, where each menu category can have the full screen when it needs it. Would also help you consolidate some menus into more over-arching categories. I could make a case for combining the character menu (skills, class, advantages/disadvantages, etc) with the inventory/apparel menus and the active effects menu (okay, Daggerfall didn't have an active effects menu, but it could really use one). That way you've got all your character information on one screen, and the means to modify it by having your inventory right there, to equip whatnot.

Remember that the map has way, way more information on it in Daggerfall than any of the later games; to fast travel, you've got to pick a region, then find the location, then decide logistics like camping/renting a room, etc. Daggerfall's default map menu isn't that bad, but I can think of a few problems that a new UI could fix. Finding specific locations right now is sort of dependent on good spelling; I always find myself double-checking my journal to make sure I spelled "The Sepulcher of Darkenezzar" correctly, and you can see how that becomes annoying with all these fantasy words of arcane spellings. Perhaps an autofill or "did you mean?..." like in search engines. Or better yet, a "show on map" button in the quest list would be easy enough. Another minor problem I have is just looking at my map and forgetting where I currently am. Honestly, though, a higher resolution and better artwork is all the map menu really needs to look better.

The journal's great, but it could use more information. Knowing the current date & time, the date you received a quest, and even a timer to indicate how many days you have left for your current quest would be great.

Overall, I do really like it, and I wish I knew the first thing about making these things so that I could dive into it and help you out, but alas. Great work on it, though!
Posts: 95
Joined: Tue Jan 17, 2012 1:06 am

Re: Lazaroth's Modern UI

Postby Janus » Fri Dec 20, 2013 8:54 pm

This is absolutely gorgeous. Very reminiscent of Morrowind :)
User avatar
Site Staff
Site Staff
Posts: 116
Joined: Thu Apr 14, 2011 10:44 pm

Re: Lazaroth's Modern UI

Postby Arctus » Fri Dec 20, 2013 10:25 pm

Cool stuff, should be pretty interesting to see it in action.
Interrupt wrote:Edit for Arctus:
Nothing is Daggerfallish enough for Arctus! :D
I think what it's missing is the pixels big and sharp enough to chop wood with.
User avatar
Posts: 748
Joined: Fri Apr 15, 2011 10:46 am
Location: Moscow, Russia

Re: Lazaroth's Modern UI

Postby jet800 » Sat Dec 21, 2013 4:10 am

First of all - it's quite awesome!!

My points:
1. Overall style is too high-tech imo, doesn't fit with DF, I'd prefer some brown colors, bit brighter maybe.
2. Switch buttons should work not only when clicking on switch itself, but if it's highlighted and clicked - it should be considered as toggle.
3. How settings window for other ingame settings would look? I mean it's no good making separate places to configure stuff.
4. Quest window text is hard to read, Probably due to transparent background.
5. There should be button to open/close windows. Not only hotkeys, especially for closing. Naturally it's expected to be where currently "stick" toggle resides.
6. Will be there an item comparison tooltip and how it would look like?
User avatar
Phobos Anomaly
Posts: 234
Joined: Sun Mar 24, 2013 10:56 pm

Re: Lazaroth's Modern UI

Postby Phobos Anomaly » Sat Dec 21, 2013 11:25 am

I like it very much Lazaroth, I don't mind if you spend some hours or some months on this, it's just great.

I don't have really nothing to criticize, Maybe a slide bar for transparency amount?, I think our fellow forum-dwellers have already pointed out very interesting things.

Lazaroth wrote:Next up:
- Adding support for different styles, so you Daggerfall purists don't go crazy

Oh yes, a stony theme for purists would be great!
User avatar
Posts: 526
Joined: Tue Apr 19, 2011 12:35 pm
Location: Duisburg, Germany

Re: Lazaroth's Modern UI

Postby greenlight » Sat Dec 21, 2013 12:58 pm

Phobos Anomaly wrote:Oh yes, a stony theme for purists would be great!

I remember someone created an ornamental stone-themed UI (or at least the menu bar while in the game, that one with the compass, health bar, etc.) that looked really awesome. Maybe that can be used as an inspiration for a UI mod of Lazaroth's UI then.
In Soviet Russia books burn nazis...

Return to “Mods / Addons”

Who is online

Users browsing this forum: No registered users and 0 guests