Hi micheal,
I've waited a long time to post here... (maybe to shy to disturb the "Great Man"...lol)

I love MOI, and I also love working on GUIs....
So, here is a little try of customing MOI :


and my hotkeys


The purpose is to maximise the viewports space and get a very simple interface (remember the old good Mac OS 7.5 ;) ), in order to concentrate on modeling....
Of course, it's just a begininge...consider it as some "Fan Art" :)

So, I have questions and problems :

Screens :
- I can't achieve to split the commands blocks (I would like to see all the commands in the same time : solid, curves, etc...) . As you can see, I have been able to duplicate the solid menu....that's all... do you have ideas ?
- do you have a graphic file (psd) with all icons and images . If you agree to share it, it could speed my work...
- is there a way to make lines thiner
- is there a way to increase the transparency of models ? .
- where can I choose the default font for menus ? Is there a way to use a specific font, and how can I include it in MOI's Folders ?

Keys :
- I don't fiond the way to change view (from top to right,left, etc.) without going full screen...
- I'm looking for a script to hide geometry by type (curves, solids) and reverse thing , like : hide/show all object switch....

I have more...but it would be cool if you could help me on that.

Thx in advance.

Hi lorem, I'm glad that you are having fun tweaking the UI to your preferences!

It looks like you've figured out quite a lot of stuff already.


> - I can't achieve to split of menu blocks (I would like to see all the commands in
> the same time : solid, curves, etc...) . As you can see, I have been able to duplicate
> the solid menu....that's all... do you have ideas ?

Check out this thread: http://moi3d.com/forum/index.php?webtag=MOI&msg=844.1 - I tried to give some instructions in there and there are a couple of SidePane.htm versions posted in there that have separated menus.

Basically each different tab inside of a <moi:PaletteHeader> corresponds to one table inside of the <moi:PaletteBody> . To create a new section, you create a new <moi:PaletteHeader> and <moi:PaletteBody> combination, and then move the TabButton from the old header and the content table from the old body over to the new header and body, and that should separate them.

Let me know if you still are stuck with this part and I can help you some more.


> - do you have a graphic file (psd) with all icons and images . If you agree to share
> it, it could speed my work...

You mean everything all in one big file? Sorry I don't have anything like that - everything was developed as individual images.


> - is there a way to make lines thiner

Inside the 3D view? Sorry, not right now - one side effect of the anti-aliased curve display is it makes it harder to get really thin lines. At some point in the future I should be able to add a switch to turn off the anti-aliasing and use just regular thin (but jagged) lines.


> - is there a way to increase the transparency of models ?

There isn't any way to make surfaces transparent - I would like to work on that in the future. You can adjust the opacity of the hidden lines though which may be useful. To do that, closed MoI down and then edit the moi.ini file found here:
C:\Documents and Settings\ [Your login name] \Application Data\Moi\moi.ini, and under [Hidden lines], you can adjust:
[Hidden lines]
HiddenLineOpacity=34

This can range from 0 (fully transparent) to 255 (hidden lines drawn fully opaque). You can also tweak the HiddenLineStyle= to be either Solid, Dashed, Dotted, or Long Dashed, although since they are small in size I think dashed and dotted might be the same in that case.


> - I don't fiond the way to change view (from top to right,left, etc.) without going full screen...

I think I need some more description of this one - if you're not full screen you are in the split view, so you should see the Top and right view at the same time there.

Do you mean to reverse the direction of a view (like Top switching to Bottom) without making the Top viewport take up the full screen? I think that should work by this:

script:moi.ui.mainWindow.viewpanel.reverseView('Top');

But I didn't test it right now - let me know if that doesn't work.


> - I'm looking for a script to hide geometry by type (curves, solids) and reverse
> thing , like : hide/show all object switch....

Check out here: http://moi3d.com/1.0/docs/moi_command_reference10.htm#shortcutkeys
for some of these - like hide all curves and hide all surfaces are listed in there.

Petr's page: http://kyticka.webzdarma.cz/3d/moi/ also has some stuff listed, look under the Hiding section.

If you need something different than what is on either of those pages, let me know.

- Michael

Wow....thx Mister....

You give me lot of ways to progress...
I'm going to work on all that, and post soon to show you the results...

++

> - where can I choose the default font for menus ? Is there a way
> to use a specific font, and how can I include it in MOI's Folders ?

The global font is set in moi.ini:

[UI]
UIFontSize=10
UIFontName=Century Gothic

The default is Century Gothic if you have it available (like if you have MS Office installed), otherwise Arial.

You can change the .ini file to globally change the font used - this font gets applied to the style of the <body> element of each UI panel, and it will actually override anything set in CSS that is applied to the body. So if you want one type of thing to have a different font than everything else you may need to apply a somewhat more fancy CSS rule that targets the individual element instead of the <body>

Which kind of menu do you want to change, the pop-up ones like the file menu?

- Michael

Oh yeah, when you separate out those different palettes on the side pane, make sure you don't have any duplicate IDs when you're done.

Like when you move a piece from one container to the other, don't just make a copy of it and leave the old one in place - you need to remove the old one. Duplicate IDs for some of those things like palette tabs will confuse the script that controls clicking on a tab.

- Michael

Ok, thx again...for taking time to help me...

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

Ok, I go to tweak all that...

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?