Full Version: MoI GUI Builder released for Mac and PC!

Show messages:  1-8  9-28  29-48  49-68  69-88  89-102

Great UI!

---

Thanks Michael,

Unfortunately, these will have to wait until next weekend before I can get to them. Much appreciated!!!

---

Hi Michael,

According to your method has been modified. Thanks!



Also,the scroll bar color can change?

-Yuan

Image Attachments:
4 

---

Hi Yuan,

> Also,the scroll bar color can change?

It is possible to change the scollbar colors but it's somewhat laborious since you can't just tweak a single color, when you use a custom scrollbar selector it will replace the default system drawn scrollbar entirely and so you will have to specify a lot of different properties yourself to make up all the pieces.

The different selectors are described here:
http://css-tricks.com/custom-scrollbars-in-webkit/

Also some info here:
http://beautifulpixels.com/goodies/create-custom-webkit-scrollbar/


So for a quick example, if you add this into moi.css you will get a weird looking red and yellow 2 color scrollbar:

::-webkit-scrollbar {
background:red;
}

::-webkit-scrollbar-thumb {
background:yellow;
}


- Michael

---

Hi Yuan,
yes, it's a nice UI you are working on.
Would be a pleasure if you share it after finishing.

---

Hi Chippwalters

this is a great tool. Where can I found the last version?

Regards
Michael

---

Look at the bottom of the first post. Download then press the "check for updates" button.

---

Is there a way to change this frame?

Image Attachments:
UI_07.png 

---

Sorry I haven't gotten around to making all the changes yet. I've been slammed at work and have to finish other projects on the weekend. I hope I'll get to it this coming weekend :-).

---

Hi Jay,

re:
> Is there a way to change this frame?

That's controlled by the class named SceneBrowserSwatchActive in moi.css, in its border property:

.SceneBrowserSwatchActive {
border:1px solid rgb(80,80,80);
border-radius:2px;
}

- Michael

---

New Update: 0.9.32

Added the following:

1. Hover and active colors for LabelButton
2. Active color for PushButton
3. Hilite border color for Container and StylesContainer takes color from the buttons shown at bottom
4. Background color for Container and StylesContainer
5. Border color for SceneBrowserSwatchActive
6. Background color for FilenameContainer
7. Scrollbar background color*
8. Scrollbar thumb button color*
9. Check out Icon Builder
   
   * These effect all scrollbars other than the one used for the shortcut keys (no way to edit CSS for those). If you use these be aware you will NOT see the left and right scrollbar arrows. This shouldn't be a big miss, and may in fact create less visiable clutter.
   
   As usual, you only need to press the Check for update button at the top right of the interface to download this update.
   
   

---

Icon Builder

Icon Builder allows anyone to build sets of correctly named icons, using their own icons if they wish. When it first opens, it will attempt to create a folder (make sure this app is placed somewhere with write permissions!) called moi_icons.

There is nothing to do, as there are no files yet in THAT folder. So, download the base files:
https://altuit.cloud/web/dbpub/MoIGUIdownloads/BaseIcons.zip
Unzip them and put them in the folder.

The anatomy of a base file:

• It's a 64px x 64px transparent PNG.
• It only has 1 color (black or whatever you like. It can be changed in Icon Builder.
• It's name is EXACTLY the same as the icon it will be replacing.

The interface:

1. Button to launch the Icon Builder window
2. The Backdrop button sets the background of the Icon Builder window
3. The icons in the folder will be shown one at a time. You can press PREV and NEXT to step through them. If you add new icons to the folder, just close and open the Icon Builder window to refresh the list of icons.
4. You can set the color of the icon AND the hilite glow color around the icon. You only need to set this once. Not necessary for each icon as when you SAVE it will apply the current color and hilite settings to all icons.
5. When you are satisfied with the color scheme, you can press the Save Icons button and choose a folder to save the icons in.

You will need to know the correct location for where to put the newly rendered icons. For the icon in BaseIcons.zip, you should put the newly created icons in the moi/ui/icons folder.

If you create new base icons, please share links to them in this thread!

---

Example uses the darkinterface preset.
Notice scrollbar at bottom is much less prominent. Also, the icons are customized to match the color of the interface.

---

Here's the existing ICONS which will work for both LIGHT and DARK interfaces. You can colorize them however you like in Icon Builder. See below for exceptions*

*Not sure how to replace the Copy, Paste and History Icons...Michael?
*The Dark icons at the bottom are base64 encoded directly in the htm file. Perhaps the htm file can be modified to look first for an icon name and if it doesn't find it use the base 64 encoded version? Max?

Icons for Light Backgrounds:
https://altuit.cloud/web/dbpub/MoIGUIdownloads/IconsForLightBgs.zip

Icons for Dark Backgrounds: (Like above)
https://altuit.cloud/web/dbpub/MoIGUIdownloads/IconsForDarkBgs.zip

Remember, put these in your moi_icons folder in MGB. It will use these to build out the full set (minus what you see above). Then save to your icons folder in moi/ui/icons
(please back up!)

---

*Not sure how to replace the Copy, Paste and History Icons..?

Those are being drawn as a resource from the application.

What you can do is edit the sidepane.htm file to change them from a resource to an icon asset. The 2 lines are listed below.

<table><tr><td>&lt;moi:CommandButton icon="res://copyclipboardicon" command="copyclipboard" rcommand="copyclipboardwithorigin"&gt;&lt;moi:Text textid="Copy clipboard"&gt;&lt;/moi:CommandButton&gt;</td>
<td>&lt;moi:CommandButton icon="res://pasteicon" command="paste" </td></tr></table>

Just change the Res : / /xxxxxx lines to regular "icon="icons/xxxxx.png" lines..........

---

Thanks. For other Resources, Michael has provided a mechanism to replace them by just putting a correctly named file in the icons folder-- without having to edit the htm of a specific file. I'm trying NOT to touch anything but the moi.css file (so far that's all I change in MGB). Of course Icon Builder creates new icons which must be manually moved to the icons folder.

I'm hoping there is something similar for these icons as well.

---

Hi Chipp, yes the same thing should apply to the Copy, Paste, and History icons (info on this here: http://moi3d.com/forum/index.php?webtag=MOI&msg=6325.5).

If you place files named CopyClipboardIcon.png, PasteIcon.png, and HistoryIcon.png in the /icons sub-folder they should get picked up and used without needing to change the side pane code itself.

To see which specific name to use (like you probably got tripped up because Copy needs to be "CopyClipboard", the other kind of copy is the Transform > Copy command), look at the button code to see what is used there for the res:// protocol, like for example for Edit > Copy it says: icon="res://copyclipboardicon"

- Michael

---

Thanks Michael,

Yes, you are correct. I did try using the obvious names to no avail. Good tip by you and Burrman on where to find the names! Much appreciated. I'll soon update the icon files links with the new icons.

---

Added the icons to the ZIP collections referenced above:
http://moi3d.com/forum/index.php?webtag=MOI&msg=7245.42

Also added a feature which effectively DOUBLES the intensity of the colorization (see checkbox below).



Created this new set in about 10 seconds.

---

A couple more interfaces to show how you use the IconsForDark vs IconsForLight version.
This one is fairly generic and uses the IconsForDarkBgs.zip and the darkInterface theme template with light gray icon color and black hilite color:



And his one is fairly generic and uses the IconsForLightBgs.zip and the MediumInterface theme template with black icon color and white hilite color:



If you colorized the top interface with the IconsForLight, all the icons would look like a NEGATIVE (inverted) version, and of course the same is true if you colorized the bottom set of icons using IconsForDark.

It's best to think of it this way:
If the global text is overall darker than the background, then you should use IconsForLight. If the global text is overall lighter, then use the IconsForDark. Hope that clears things up :)

---

Show messages:  1-8  9-28  29-48  49-68  69-88  89-102