EQInterface Forums - View Single Post

I've seen more than a little complaining about the new UI engine and people having issues working with and using it. There is also a lack of coherent guidance on how to even start with it. So, I thought I would offer what I have figured out, been doing to experiment, and how I test it.

Just as a disclaimer, I use Vert and have only experimented with the new engine to see what works, since I am a software developer and have front end web development experience from my junior years.

I initially messed with the converter app, and after installing .Net 5, got it to work - kind of. It doesn't seem to have very well defined rules, so the conversion is very hit or miss. I eventually gave up on it and went on to just copy (and then modify) the default HTML files in a new "html-test" folder. Which, honestly, is probably quicker for 90% of people unless they did something crazy custom to their UI files.

The tools I used:

VS code to do development. It has a built in format document option that makes all the file contents standardized in spacing and line breaks, while also making it immensely more readable. It's free from Microsoft and is super handy.
Gimp for image manipulation. It allows you to create/modify both .tga and .png files. What more do you need?
Firefox for testing/debugging. I suppose most modern browsers should work, but I haven't tried others since I don't use them (because of tracking) anymore

You'll notice I didn't say you need EQ for any part of this. Because now you can actually test your new UI outside the game. In pieces, for the moment. I'm sure some enterprising person will come along and show everyone how to load all the new UI parts into a mock up, so you can see the whole thing, before too terribly long.

Anyway, that comes after I explain a bit about how the new UI seems to work.

As you can see this is the "main" UI file EQ uses (line 5 says as much) behind the scenes.

For those that have never seen HTML before, you're going to want to pay attention to lines 6 through 8. It is importing the contents of those files. And everything that is part of this page is affected by them. Line 8 is where all your styling (images, colors, font size, etc) comes from.

Lines 12 to 14 are where they are pulling in all the windows that make up the visible UI. Specifically in the <include-body /> elements. Those pages are affected by the files imported in the last paragraph, when rendered as a child of this parent page.

This is the window selector file and this is where I will demonstrate the general layout and how to modify and test/debug it. Lines 6 through 10 and lines 13 through 21 are the changes I did to this file from stock. You could even delete the <style /> element since it's contents have all been commented out. I left it for illustration purposes in case someone wanted to modify only this window though.

Now to test that this window will render outside the game. Go to the folder where the file is and open it with Firefox. It should look similar to this:

If it didn't render then you likely didn't reference the main.css file properly. I haven't tried not referencing the JS files yet. Not really worth time investigating since it works with them referenced, is only for testing, and will be removed before final publish anyway.

Now that we have it rendering in a browser, it makes it so much easier to figure out what controls your window renderings. Simply right click anywhere on the web page and open the inspect or developer tools window. You can use it to inspect any of the rendered HTML to see what classes in the main.css file affect the final styling. You can then either change them there or add something to the <style /> of the page or specific element. There are literally thousands of articles on the web teaching complete novices how to use CSS on a web page for you to reference.

I personally used Gimp to open up the custom "window_pieces01.tga" file that came with Vert and copied out the parts used in the window title bars, and pasted them over the images referenced in the CSS classes. My window is a bit ugly since I didn't do the image work very cleanly. But, you know, I am only experimenting and will wait for others to do the port since I honestly can't be bothered to learn the old proprietary UI system. I just enjoy putting out code and/or technology fires.

One last thing I noticed was the atlas.json file seems to map the individual parts out of big "window_pieces01.png" (and similar) files like the old UI did. I don't know if it does anything with those maps if the individual images already exist. But it should likely be updated to match whatever custom files you add to the "./assets/images" folder. Here is an example of what I mean:

Hopefully this quiets some of the complaints and gives some direction to those who are lost trying to figure out where to start their conversions at. Just don't forget to remove the references in the <head /> section of your window.

05-24-2023, 11:07 PM	#1
Trenus A Bat Join Date: May 2023 Server: Rathe Posts: 1	New UI Observations I've seen more than a little complaining about the new UI engine and people having issues working with and using it. There is also a lack of coherent guidance on how to even start with it. So, I thought I would offer what I have figured out, been doing to experiment, and how I test it. Just as a disclaimer, I use Vert and have only experimented with the new engine to see what works, since I am a software developer and have front end web development experience from my junior years. I initially messed with the converter app, and after installing .Net 5, got it to work - kind of. It doesn't seem to have very well defined rules, so the conversion is very hit or miss. I eventually gave up on it and went on to just copy (and then modify) the default HTML files in a new "html-test" folder. Which, honestly, is probably quicker for 90% of people unless they did something crazy custom to their UI files. The tools I used: VS code to do development. It has a built in format document option that makes all the file contents standardized in spacing and line breaks, while also making it immensely more readable. It's free from Microsoft and is super handy. Gimp for image manipulation. It allows you to create/modify both .tga and .png files. What more do you need? Firefox for testing/debugging. I suppose most modern browsers should work, but I haven't tried others since I don't use them (because of tracking) anymore You'll notice I didn't say you need EQ for any part of this. Because now you can actually test your new UI outside the game. In pieces, for the moment. I'm sure some enterprising person will come along and show everyone how to load all the new UI parts into a mock up, so you can see the whole thing, before too terribly long. Anyway, that comes after I explain a bit about how the new UI seems to work. As you can see this is the "main" UI file EQ uses (line 5 says as much) behind the scenes. For those that have never seen HTML before, you're going to want to pay attention to lines 6 through 8. It is importing the contents of those files. And everything that is part of this page is affected by them. Line 8 is where all your styling (images, colors, font size, etc) comes from. Lines 12 to 14 are where they are pulling in all the windows that make up the visible UI. Specifically in the <include-body /> elements. Those pages are affected by the files imported in the last paragraph, when rendered as a child of this parent page. This is the window selector file and this is where I will demonstrate the general layout and how to modify and test/debug it. Lines 6 through 10 and lines 13 through 21 are the changes I did to this file from stock. You could even delete the <style /> element since it's contents have all been commented out. I left it for illustration purposes in case someone wanted to modify only this window though. Now to test that this window will render outside the game. Go to the folder where the file is and open it with Firefox. It should look similar to this: If it didn't render then you likely didn't reference the main.css file properly. I haven't tried not referencing the JS files yet. Not really worth time investigating since it works with them referenced, is only for testing, and will be removed before final publish anyway. Now that we have it rendering in a browser, it makes it so much easier to figure out what controls your window renderings. Simply right click anywhere on the web page and open the inspect or developer tools window. You can use it to inspect any of the rendered HTML to see what classes in the main.css file affect the final styling. You can then either change them there or add something to the <style /> of the page or specific element. There are literally thousands of articles on the web teaching complete novices how to use CSS on a web page for you to reference. I personally used Gimp to open up the custom "window_pieces01.tga" file that came with Vert and copied out the parts used in the window title bars, and pasted them over the images referenced in the CSS classes. My window is a bit ugly since I didn't do the image work very cleanly. But, you know, I am only experimenting and will wait for others to do the port since I honestly can't be bothered to learn the old proprietary UI system. I just enjoy putting out code and/or technology fires. One last thing I noticed was the atlas.json file seems to map the individual parts out of big "window_pieces01.png" (and similar) files like the old UI did. I don't know if it does anything with those maps if the individual images already exist. But it should likely be updated to match whatever custom files you add to the "./assets/images" folder. Here is an example of what I mean: Hopefully this quiets some of the complaints and gives some direction to those who are lost trying to figure out where to start their conversions at. Just don't forget to remove the references in the <head /> section of your window.