.

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