Hello fellow MoI users. Today, I'm releasing the first version of MoI GUI Builder (MGB).
MGB is a WYIWYG interface for editing the colors and borders of MoI's interface and saving them to the moi.css config file automatically. You need zero understanding of how CSS or moi.css works to use this app. It can also save it's own GUI(Graphic User Interface) files in case you want to share them or edit them later.
It's free to use. Let me know in this thread if there are any issues you come upon or features you'd like to see added.
REMEMBER: Always backup your copy of MoI. I have not seen any issues, and there is a feature to return to 'factory new' moi.css. Even though, I would still recommend backing up!
Here's a quick rundown on how things work:
Always Check for updates! This is the first thing you should do should you encounter any problems. FWIW, the downloaded version won't work with the new MoI 3.1 UNLESS you check for updates!
Start by setting the correct filepath to the moi.css. For Mac users you will click the button "MoI v3.app filepath" and for PC users please click the button: moi.css filepath
Reset moi.css resets your moi.css file to the factory original for Moi3D v3
Reset All resets all the individual parts of MGB to their default settings.
Save and Load Template will save and load the current MGB template settings. This way you can share and modify multiple existing GUIs.
Save moi.css automatially saves the current settings into the designated moi.css file. Then you launch the MoI v3 app to view the changes.
Backdrop sets the MGB background to a color which can help in designing the interface for a particular desktop.
Set Global Text Color sets the global text color for the MoI interface.
Control name of the selected element; loosely based on the CSS selector.
Config settings click on the color swatches to change a color. Click on the HEX to edit HEX value. Drag right to left to change values in numeric inputs.
Reset will reset only the selected control to it's default values.
Tips A bit of help text.
Video Tutorial:
Download locations: (Note, the PC version has yet to be tested on a PC. Please let me know how it works! (My PC VM is at work and not at home)
Is there a way to get it to reload the customized CSS you created previously?
If it already knows the file path, it'd be great for it to load the existing CSS file and let you go from there. I made some changes but realized I made my background too dark. Unfortunately when I reloaded MoiGUI my changes didn't appear, so I apparently need to start over. I tried Load Template, but that doesn't seem to load CSS files.
Otherwise this is a really neat tool. If it would let me start to change icons, fonts, etc., it would be phenomenal.
Use the save template to save the customized moi.css template for MGB. Use the load template to load the template you just saved. This way you can continue to tweak your design.
MGB program does not parse the moi.css file directly, which would be called 'round-trip' CSS editing. Writing a full blown WYSIWYG round-trip CSS editor which correctly parses *any old CSS* is a full-time job for a team of programmers as it would necessarily need to handle all sorts of flavors (and mistakes) of CSS. I enjoy MoI but don't have that kind of time to spend.
If you save the template, you can reload it. The background screen settings are set in the Options panel and are not stored with the MoI.css file so you shouldn't have any problems reloading the "newly generated from your old template" moi.css file.
Changing Icons could be done. I'm not sure about changing fonts as I suspect there are limitations to the GUI framework Michael uses-- especially considering WINE.
The UI font is automatically set onto the <body> element as part of the processing that happens when an HTML document is loaded, the setting for it is in moi.ini, under:
[UI]
UIFontName=Century Gothic
The font size is also set in the same way and it can be adjusted in the Options dialog under the "General" section with the slider for "UI size".
re: I'm not sure if changing the "CloseWindowButton" Backgroundcolor Change is working...
There are 2 different window close buttons, the first one is a <moi:WindowControlButton> with id="Close" - that one is one that you will only see on the Windows version when it is a maximized window, it will be a close button in the upper right corner of the main window. That one is controlled in moi.css by:
Sorry..been in meetings all day with lawyers. As I mentioned, I still don't have a windows image for my VMware here at home, so it will be awhile before I can get to Windows specific changes.
Fixed the aforementioned issues. Press button check for update (dot 1) to load the new version. No need to restart.
The (dot 4) close button now has more properties and works correctly. The (dot 3) properties field now had a custom text-color property you can set which overides the CSS in the SidePaneContextArea.htm for the text-color.
Please NOTE: If you've previously *saved* a template from MGB, and then load it, you will now need to press the (2) RESET button for any individual item which has been updated since last saved. In this case, all you need to do is reset the two shown areas (4 & 3).
Michael,
On another note, is there any sort of CSS which I can access to define the text input highlight text and background color (5)? FWIW I tried variants of: