Hello MTG I've updated this UI Editor (Helper) to generate inc code. This tool will let you create some UI elements, resize and move where you'd like the element to go. There is some manual editing required - especially with images at this time. This tool will help you create UI faster. There is no save and load mechanics built in and progress can be lost. There is a save and load inc feature with the tool - however preexisting UI files will not load correctly due to the lack of support for all the possible UI elements.
To use the tool you select your element type and as of now it only supports page, button, image, and text.
UPDATES:
- You can now save and load INC files into the tool - however UI files that are already made will come out wacky as I haven't fully built support for all the UI elements yet. This feature works great with any UI you make with the tool - however any customized edits you make manually (not in the editor) will not be loaded or saved with the tool.
UI Editor Helper
I'll walk you through a demo here:
1. Update the inc field with a name for the file, for now I'll use Basic
2. Let's add a page element to put all our other elements in. Let's name the page before we generate it by inputting the name into the name field, let's call it page.
3. Click add element, and you can now see it show up in the grid. Clicking on it will display some properties and allow you to rename it - it will also become highlighted. Take note that any additional edits you want to make will have to wait until after you compile (such as styling, etc)
4. Let's now resize it (resize from the bottom right) bigger than the provided size and then select button from the listing. After you pick button, name the element btnOne, then click on the page from the element listing.
5. You know you select page by seeing the page details above 'compile to code' button. Now click add child element to add the button to the page element. Let's also move it to the bottom left area.
6. Let's add another button to the page element, so once again we will click on the page element from the listing (it should say page in the details) then set the button name to btnTwo and click add child element and let's move it to the bottom right this time.
7. Now let's add a text field to the page element. Once again we select the page element from the listing, then we select text from the selection, then name it textOne, let's resize and place it in the middle
8. Let's now compile the UI Code and copy it into a file with the extention
You then end up with this in the end:
At that point I suggest you make your edits as you see fit.
To use the tool you select your element type and as of now it only supports page, button, image, and text.
UPDATES:
- You can now save and load INC files into the tool - however UI files that are already made will come out wacky as I haven't fully built support for all the UI elements yet. This feature works great with any UI you make with the tool - however any customized edits you make manually (not in the editor) will not be loaded or saved with the tool.
UI Editor Helper
I'll walk you through a demo here:
1. Update the inc field with a name for the file, for now I'll use Basic
2. Let's add a page element to put all our other elements in. Let's name the page before we generate it by inputting the name into the name field, let's call it page.
3. Click add element, and you can now see it show up in the grid. Clicking on it will display some properties and allow you to rename it - it will also become highlighted. Take note that any additional edits you want to make will have to wait until after you compile (such as styling, etc)
4. Let's now resize it (resize from the bottom right) bigger than the provided size and then select button from the listing. After you pick button, name the element btnOne, then click on the page from the element listing.
5. You know you select page by seeing the page details above 'compile to code' button. Now click add child element to add the button to the page element. Let's also move it to the bottom left area.
6. Let's add another button to the page element, so once again we will click on the page element from the listing (it should say page in the details) then set the button name to btnTwo and click add child element and let's move it to the bottom right this time.
7. Now let's add a text field to the page element. Once again we select the page element from the listing, then we select text from the selection, then name it textOne, let's resize and place it in the middle
8. Let's now compile the UI Code and copy it into a file with the extention
.inc ideally you'll want to name the file what you put up top in the text field - in this demo we called it Basic so it'd be basic.incYou then end up with this in the end:
At that point I suggest you make your edits as you see fit.
Attachments
Last edited: