So....
I finnaly got it !!!

Here is the screen :




Here is the code :

<!-- TEST ZONE START -->


		<moi:PaletteHeader id="MyHeader" activeTab="MyTab" ontabchange="HandleTabChange( this );">
			<table>
                  <tr> 
                        <td><moi:TabButton id="MyTab" class="SingleTabButton">
                            <moi:Text textid="Draw solid tab"/></moi:TabButton></td>
                  </tr>
			</table>
		</moi:PaletteHeader>
        
		<moi:PaletteBody id="MyBody" >        
    		<table id="MyTabContent">
                  <tr>
                    	<td><moi:CommandButton style="icon:icons/PlaneSetIcon.png;" commandSet="planes">
                        	<moi:Text textid="Plane"/></moi:CommandButton></td>
                    	<td><moi:CommandButton style="icon:icons/BoxSetIcon.png;" commandSet="boxes">
                        	<moi:Text textid="Box"/></moi:CommandButton></td>
                     	<td><moi:CommandButton style="icon:icons/SphereIcon.png;" command="sphere">
                            <moi:Text textid="Sphere"/></moi:CommandButton></td>
						<td><moi:CommandButton style="icon:icons/CylinderIcon.png;" command="cylinder">
                        	<moi:Text textid="Cylinder"/></moi:CommandButton></td>
                   </tr>
                   <tr>
                       <td><moi:CommandButton style="icon:icons/ConeIcon.png;" command="cone">
							<moi:Text textid="Cone"/></moi:CommandButton></td>
                       <td><moi:CommandButton style="icon:icons/TextIcon.png;" command="text">
                       		<moi:Text textid="Text"/></moi:CommandButton></td>
                       <td><moi:Text text="Cylinder"/></td>
                       <td>text</td>
                  </tr>
                </table>
		</moi:PaletteBody>
        
        
<!-- TEST ZONE END-->

One thing important I discovered while correcting some bugs : the ID of the table (wich contains icons and commands) must be exactly named like this :
[ID_of_tab-in_header]+"Content"

ex:

....
<moi:TabButton id="MyTab".....>
.....
<table id="MyTabContent">
.....
</table>

Is it right Michael?

+++

Hi lorem,

> about font family...I would like to incorporate a personal font
> (like eurostile, or system), but that's not the most important...

You can do that with the moi.ini setting if you want the same personal font to be used everywhere. So for example:

[UI]
UIFontName=System

or

[UI]
UIFontName=Impact

You can use any font installed in Windows in that setting. Make sure you have closed MoI first before editing the moi.ini file.


If you only want to change the font in one area of the UI, then that is when you need to use font-family in CSS.

- Michael

> One thing important I discovered while correcting some bugs : the ID of the
> table (wich contains icons and commands) must be exactly named like this :
> [ID_of_tab-in_header]+"Content"
>
> Is it right Michael?

Yup, that's exactly right - sorry I forgot to mention that part.

That's how the tab in the header is associated with the table containing all the command buttons.

- Michael

Is there anyway that the code / files for this could be posted? While I really like the original MOI3D Theme / Interface, I really like the look of this setup.

I'm working on a complete GUI, I'll post the complete UI directory, with PSD file (containing all icons) when it's done.

if you want to play with, here is the UI directory (custom not finished , eh !! :) )

http://moi3d.com/forum/get_attachment.php?webtag=MOI&hash=f2789460fe20aca47a55f942b1ac73c2
ui.zip

Many thanks!

pleasure Phil...

So, next step: by modifying the sidepane html file, I have what I was looking for : All palettes visible on the right...

Perfect for 1280x1024 :)
of course, You can hide these palettes if you have smaller screen


That's obviously not finished ( colors...arg :( )

If you want to test it, the ui directory is attached....

Let me know what your feelings ....

++++

PS : Michael, your work is brilliant...Ui is so simple to custom (with few skills of css/xml) .
It is a real pleasure to tweak all the options, keys, scripts.... ;)
It makes me feel like I'm still a programmer !!
lol

Seems you have a very big screen ? ;)

lol... 2x19"

If only I could move palettes on the second monitor......
;)

Nice interface!

Hi lorem,

> If only I could move palettes on the second monitor......

Actually, it may be possible to set this up by using a dialog.

For an example, put this on a keyboard shortcut and trigger it:
script:moi.ui.createDialog( 'SidePane.htm' );

There are some complications, like the little sub-menus under Circles for example will only show up on the main Side pane, not on the floating one. But I think if you were to remove the main side pane (edit MainWindowLayout.xml) it would probably work in the floating one instead, I didn't try that though.

Also you would probably want to turn off the palette collapsing in this case, that should be possible by editing SidePaneTabs.js and just commenting out everything inside of the CompactPaletteHeaders() function.

You can also pass a second parameter to createDialog to set some different options:
script:moi.ui.createDialog( 'SidePane.htm', 'resizeable,defaultWidth:700,defaultHeight:500' );

You would probably want to set 'resizeable' since then the dialog won't change in size to fit to its contents when different pieces of the contents are hidden or shown.

By default the dialog will not open automatically, to do that you would need to put the createDialog() call into a .js file (remove the script: at the front for this one), and then modify the shortcut that you use to start MoI to pass the full path to the .js file (put "quotes" around it if it has any spaces in it) as a command line parameter to moi.exe and then it will run that script when it starts.

That may give you some more ideas to mess with! :)

- Michael

> PS : Michael, your work is brilliant...Ui is so simple to custom (with few skills of css/xml) .
> It is a real pleasure to tweak all the options, keys, scripts.... ;)
> It makes me feel like I'm still a programmer !!
> lol

Thanks lorem, I'm glad that you are enjoying it! :)

Basically I developed this kind of flexible infrastructure first before really digging in to designing the main program UI.

Making it easy to make changes and experiment with different UIs was really important to me. It let me try many different approaches and tweak things in various ways easily before arriving at the current UI.

Some people in the past have asked why I didn't use a cross-platform UI toolkit like Qt when developing MoI. The above is the reason why - I just would not have really been able to arrive at the current UI with a toolkit that is less flexible and more dependent on being defined by C++ code instead of markup with layout capabilities (text wrapping, etc..). I just would not have been able to go through as many design cycles and experiment as freely.

As an added bonus, the same flexibility that enabled me to develop the current UI is also still present for you to change it to your own preferences!

- Michael

Cool

Is there a newer UI version to this edit that works for MoI v3 beta Aug-1-2013 or MoI v2.52?

.

Hi Fake Pilot,

> Is there a newer UI version to this edit that works for MoI v3 beta Aug-1-2013 or MoI v2.52?

No, not as far as I know. The UI version in this thread here is from 2007 so that's for Moi version 1.0

The UI engine changed in MoI v3 (and also for 2.52 which is an early branch of v3) and so custom UIs that were built for v1 will not work directly with v3 or v2.52.

- Michael

Hi Michael,

I just purchased MoI. Been playing with it all day long and starting to really like it. Some things are VERY clever. :-)
I'm a motion designer and web designer. Curious about how the css and html renders in the UI. What browser engine is it?

And, how would I best edit it? Could I just drag the whole ui folder to a web browser and start editing? Could I copy the ui folder to a localhost:5000 server and see it live?

Hi Fake Pilot, thanks, I'm glad that you're having fun with MoI!


> Curious about how the css and html renders in the UI. What browser engine is it? If it is one.

MoI v1 and v2 used the Internet Explorer browser engine (mshtml). For the start of v3 I changed over to using a packaged WebKit engine instead, which v2.52 also uses as well.


> I guess, does it support CSS3 gradients and border-radius etc?

Yup, although the packaged version of WebKit is a few years old now and slightly pre-dates some newer pieces of CSS3 so like for gradients you need to use a slightly older -webkit-gradient syntax for gradients.

The v1 UI was based off of PNG images for all backgrounds, while for v3/v2.52 almost everything has been switched over to CSS properties for doing rounded corners and gradient backgrounds. There are still a couple of remnants of the v1 image based backgrounds like for popup menu borders though.



> And, how would I best edit it?

The main way is to edit the files in a text editor. It probably won't work all that well to try and use a graphical HTML editor.



> Could I just drag the whole ui folder to a web browser and start editing? Could I copy
> the ui folder to a localhost:5000 server and see it live?

That kind of thing won't work all that well because there is some customized browser behavior in MoI that you won't get when the same stuff is loaded into a regular browser.

For example, moi.css is implicitly injected into every page without it needing to be actually declared... Some controls like text edits and slider bars are custom controls implemented by MoI which won't work in a regular browser, stuff like that.

You would sort of get a page displayed in a regular browser but it's not going to be like you're seeing the regular MoI UI if you do it that way.


The main window frame is controlled by a separate (non-HTML engine based) MoI implemented layout manager that positions UI panels, and it's a UI panel that can contain HTML inside of it. The main window is controlled by MainWindowLayout.xml . The moi:// protocol that you see in there is a protocol handler implemented by MoI which loads files from sub-directories inside of MoI's main installation directory.

On the OSX version to get to the UI folder, right-click on the app and choose "Show package contents" and then inside there go to drive_c\moi\ui , that's where you'll find all the various UI definition files. The easiest thing to tweak to start with is moi.css you can change a lot of things from just editing that one file alone.


- Michael

Aha! Thanks.

CSS is good! May I suggest SVG symbols instead of PNG in the future? More lightweight, transparent and renders good even on high resolution screen too, like Macbook Pro Retina.

Use Github? :-) If someone would make a really good UI tweak, Github could help you choose what tweaks to use in later versions.

Hi Fake Pilot,

> CSS is good! May I suggest SVG symbols instead of PNG in the future? More lightweight, transparent
> and renders good even on high resolution screen too, like Macbook Pro Retina.

Unfortunately many of the icon graphics that MoI uses involve light source shaded 3D objects, which are not a great fit for doing in SVG.

Also it can be difficult to get good quality with vector graphic images when they need to scale downwards instead of upwards.

The current PNG graphics should be working fine for higher resolution displays already, the PNG icon images are quite a bit larger than what you see in the regular UI. You can increase the UI size quite a bit before you'll see anything odd in the images. You can test this by increasing the UI size under Options > General > UI Size slider.


> Use Github? :-) If someone would make a really good UI tweak, Github could help you
> choose what tweaks to use in later versions.

Sorry no I don't use Github myself. If someone makes a really good UI tweak and they want to share it, they can just post it here on the forum.

- Michael