Full Version: Custom UI feature

Hi MoI community,

I love the customization options available to MoI. I was wondering if anyone knows if it would be possible to have shortcut activated tool window? The idea would be something like pressing the spacebar and having a window open in the view that would have a selection of commonly used tools that could be customised by editing the htm content? I'm not sure if it would be practical or would work very well, but it would be an even faster workflow than using hotkeys in principle? I know software like ZBrush has this kind of functionality and was wondering if something similar would be possible in MoI v3?

Thank you for any ideas or responses.

Happy MoI'ing!

---

Hi Tim,

i wrote a script to do exactly what you describe a few years ago.
Here is the link: http://moi3d.com/forum/messages.php?webtag=MOI&msg=5993.1

Hope you like it!

Dinos

---

Hi Dinos,

Wow! What a quick and awesome response! Thank you very much, I am most grateful! You've probably just helped me improve my speed and workflow considerably!

Have a great day/evening!

Kind regards,

Tim

---

Hi Dinos

I am loving your Script Pallete! Such a great tool. I don't want to sound ungrateful, but I was wondering if there is anyway of adding scripts without having to create a keyboard shortcut? I think Frenchy Pilou did ask about this on the thread, but I don't think it was ever responded to?

Is there anyway of adding the scripts to the htm file instead of being assigned to keyboard shortcuts? It would just save me having a cluttered shortcut list! :)

Thanks again for your contribution though, still a great tool!

Kind regards,

Tim

---

Hi Tim,

really glad that you like my Script Palette!
Its a simple script that i wrote mainly to fit my workflow and so its not that flexible.

Having said that, it would be very easy to modify it to do what you want.

You just have to add you commands right after the Var declaration at the top of the script:

		var line = '', title, cmd='', html = '', list = [],
			file = moi.filesystem.openFileStream( moi.settings.getIniPath(), 'r' );

in the following format:

		var line = '', title, cmd='', html = '', list = [],
			file = moi.filesystem.openFileStream( moi.settings.getIniPath(), 'r' );
			
		list = [
			{ 'title' : "Volume Calculator", 'cmd' : "_CVolume2"},
			
			{ 'title' : "Naked Edges", 'cmd' : "script:var gd = moi.geometryDatabase; gd.deselectAll(); var breps = gd.getObjects().getBreps(); for ( var i = 0; i < breps.length; ++i ) breps.item(i).getNakedEdges().setProperty( 'selected', true );"}
		];
		
		

The list can contain any number of commands that you like and you can mix the commands here with any shortcuts that you selected using the original comment (/*! command name */) method.

If you are using an inline javascript command (javascript code that starts with the command script: like the Naked Edges command on top) then you have to make sure that the code contains no double quotes. If it does just change them to single quotes.

Please let me know if it works for you!

Best,

Dinos

---

Hey Dinos,

Wow that’s perfect! Thank you so much for your time and help, I really appreciate it.

I have already developed a habit of hitting the spacebar to use your palette! It’s impressive just how much a bit of code can have such a positive impact to someone’s time and workflow. Thanks again!

Have a great day!

Tim

---

You are welcome Tim :-)

Have a great evening! (it's 11:00pm here in Cyprus)

---

Hey Dinos,

I have returned to be annoying again! :D I am sorry to be a nuisance, but just a really simple request if I may?

I have tried my best to work out how to add a separator to divide list items into groups in CSS, but I'm not sure how to do it (I'm a better modeller than I am a coder! ;P )

Is there a way to divide the list with separators? I'm sure it must be quite simple?

Thanks as always for all of your kind help, I'm really enjoying your Script Palette. My spacebar (shortcut) has never seen so much action! :D

Kind regards,

Tim

---

Hi Tim, try using a <hr> tag for a horizontal dividing line, hr stands for "horizontal rule".

- Michael

---

Hi Michael,

Thank you very much for your kind response and instruction, I appreciate it.

Inspired very much by Dinos awesome script palette, I have decided to have a very amateur attempt at producing an icon menu version of the same. Please try not to laugh, my expertise is more in 3D modelling and rendering than it is in html coding! :D [Spacebar activated]



<html>
<head>
<style>
body {
padding: 4px;
}
</style>
</head>

<body class="MenuBody">

<nobr>
<moi:CommandButton icon="moi://ui/icons/TrimIcon.png" command="Trim"><moi:Text textid="Trim"></moi:CommandButton>
<moi:Spacer>
<moi:CommandButton icon="moi://ui/icons/MirrorIcon.png" command="Mirror"><moi:Text textid="Mirror"></moi:CommandButton>
<moi:Spacer>
<moi:CommandButton icon="moi://ui/icons/OffsetIcon.png" command="Offset"><moi:Text textid="Offset"></moi:CommandButton>
<moi:MenuSeparator>
<moi:CommandButton icon="moi://ui/icons/CPlaneIcon.png" command="script: /* CPlane */ moi.view.setCPlaneInteractive();"><moi:Text textid="CPlane"></moi:CommandButton>
<moi:Spacer>
<moi:CommandButton icon="moi://ui/icons/CPlaneIcon.png" command="script: /* Set CPlane to current view */ moi.view.setCPlane( moi.ui.mainWindow.viewpanel.getViewport('3D').targetFrame );"><moi:Text textid="View"></moi:CommandButton>
<moi:CommandButton icon="moi://ui/icons/CPlaneIcon.png" command="script: /* Reset CPlane to default */ moi.view.resetCPlane();"><moi:Text textid="Reset"></moi:CommandButton>

<moi:CommandButton icon="moi://ui/icons/ScaleIcon.png" command="Scale"><moi:Text textid="Scale"></moi:CommandButton>
<moi:Spacer>
<moi:CommandButton icon="moi://ui/icons/Scale2dIcon.png" command="Scale2d"><moi:Text textid="Scale 2d"></moi:CommandButton>
<moi:Spacer>
<moi:CommandButton icon="moi://ui/icons/Scale1dIcon.png" command="Scale1d"><moi:Text textid="Scale 1d"></moi:CommandButton>
<moi:MenuSeparator>
<moi:CommandButton icon="moi://ui/icons/BooleanDifferenceIcon.png" command="BooleanDifference"><moi:Text textid="Diff"></moi:CommandButton>
<moi:Spacer>
<moi:CommandButton icon="moi://ui/icons/BooleanUnionIcon.png" command="BooleanUnion"><moi:Text textid="Union"></moi:CommandButton>
<moi:Spacer>
<moi:CommandButton icon="moi://ui/icons/BooleanIntersectionIcon.png" command="BooleanIntersection"><moi:Text textid="Isect"></moi:CommandButton>
<moi:Spacer>
<moi:CommandButton icon="moi://ui/icons/BooleanMergeIcon.png" command="BooleanMerge"><moi:Text textid="Merge"></moi:CommandButton>
</nobr>

</body>
</html>

So I have a few questions if I may please?

1. Is there anyway to get the window to automatically close after one of the icons has been clicked on? As it is at the moment, it obscures the viewing window when one of the icons is selected.

2. I noticed that the textid's for some of the icons is not working? I'm wondering if it is because of the overall size of the palette window (too small) or the textid's not being recognised by the software? Sometimes they seemed to work, sometimes they didn't? (Boolean icons textid's are a good example)

Thank you for your time and help! :)

Kind regards,

Tim

Image Attachments:
Palette Test.jpg 

---

Hi Tim,

> 1. Is there anyway to get the window to automatically close after one of the icons has
> been clicked on? As it is at the moment, it obscures the viewing window when one of
> the icons is selected.

Yup, you'll just need to add an onclick event handler that then tells the window to close.
This can be just in one place on the body instead of on all buttons individually because of
how events "bubble up". See below for an example.


> 2. I noticed that the textid's for some of the icons is not working? I'm wondering if it is because
> of the overall size of the palette window (too small) or the textid's not being recognised by the
> software? Sometimes they seemed to work, sometimes they didn't? (Boolean icons textid's are
> a good example)

So using a <moi:Text> element with a textid value actually means "Look up the text with this
id in the current string table". It's used for text that can be translated into different languages. The
ones that are not working for you are because there is no entry with that id in the string table
(see EnglishStrings.txt for example).

If you just want to make direct plain text you don't need to use a <moi:Text> for that,
you can just use the text directly.

Here's an example with those modifications, also I organized things into rows:

<html>
	<head>
		<style>
			body { 
				padding: 4px;
			}
		</style>
	</head>

	<body class="MenuBody" onclick="moiWindow.close();">
	
		<nobr>
			<moi:CommandButton icon="moi://ui/icons/TrimIcon.png" command="Trim">Trim</moi:CommandButton>
			<moi:Spacer/>
			<moi:CommandButton icon="moi://ui/icons/MirrorIcon.png" command="Mirror">Mirror</moi:CommandButton>
			<moi:Spacer/>	
			<moi:CommandButton icon="moi://ui/icons/OffsetIcon.png" command="Offset">Offset</moi:CommandButton>
		</nobr>

		<moi:MenuSeparator/>

		<nobr>
			<moi:CommandButton icon="moi://ui/icons/CPlaneIcon.png" command="script: /* CPlane */ moi.view.setCPlaneInteractive();">CPlane</moi:CommandButton>
			<moi:Spacer/>
			<moi:CommandButton icon="moi://ui/icons/CPlaneIcon.png" command="script: /* Set CPlane to current view */ moi.view.setCPlane( moi.ui.mainWindow.viewpanel.getViewport('3D').targetFrame );">View</moi:CommandButton>
			<moi:CommandButton icon="moi://ui/icons/CPlaneIcon.png" command="script: /* Reset CPlane to default */ moi.view.resetCPlane();">Reset</moi:CommandButton>
		</nobr>

		<nobr>			
			<moi:CommandButton icon="moi://ui/icons/ScaleIcon.png" command="Scale">Scale</moi:CommandButton>
			<moi:Spacer/>
			<moi:CommandButton icon="moi://ui/icons/Scale2dIcon.png" command="Scale2d">Scale 2D</moi:CommandButton>
			<moi:Spacer/>
			<moi:CommandButton icon="moi://ui/icons/Scale1dIcon.png" command="Scale1d">Scale 1D</moi:CommandButton>
		</nobr>

		<moi:MenuSeparator/>

		<nobr>
			<moi:CommandButton icon="moi://ui/icons/BooleanDifferenceIcon.png" command="BooleanDifference">Diff</moi:CommandButton>
			<moi:Spacer/>
			<moi:CommandButton icon="moi://ui/icons/BooleanUnionIcon.png" command="BooleanUnion">Union</moi:CommandButton>
			<moi:Spacer/>
			<moi:CommandButton icon="moi://ui/icons/BooleanIntersectionIcon.png" command="BooleanIntersection">Isect</moi:CommandButton>
			<moi:Spacer/>
			<moi:CommandButton icon="moi://ui/icons/BooleanMergeIcon.png" command="BooleanMerge">Merge</moi:CommandButton>
		</nobr>
	
	</body>
</html>

Hope that helps!

- Michael

---

Hi Michael,

Wow! Thank you very much for so kindly sharing your time, effort and experience; I am most grateful and learned something useful too!

Really cool of you to correct and improve the code for me, thanks again, it works perfectly!

I love how effortless the simple UI UX of MoI is and often find myself wishing other software were as simple but extremely effective. I even use MoI to do vector work rather than Illustrator, because it is so quick and effortless to achieve the same results.

I think you have definitely done the right thing to insist on the simplicity of MoI first and foremost. Of course different users are going to want different functionality, but you’re right to choose to keep it simple instead.

Have a great day!

Kind regards,

Tim

---