MoI discussion forum
MoI discussion forum

Full Version: Custom UI feature

Show messages: All  1-5  6-12

From: Whiteman Dynamic (TIM_WHITEMAN)
22 Jun 2018   [#6] In reply to [#5]
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
From: dinos
22 Jun 2018   [#7] In reply to [#6]
You are welcome Tim :-)

Have a great evening! (it's 11:00pm here in Cyprus)
From: Whiteman Dynamic (TIM_WHITEMAN)
30 Jun 2018   [#8] In reply to [#7]
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
From: Michael Gibson
30 Jun 2018   [#9] In reply to [#8]
Hi Tim, try using a <hr> tag for a horizontal dividing line, hr stands for "horizontal rule".

- Michael
From: Whiteman Dynamic (TIM_WHITEMAN)
1 Jul 2018   [#10] In reply to [#9]
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 


From: Michael Gibson
1 Jul 2018   [#11] In reply to [#10]
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:

code:
<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
From: Whiteman Dynamic (TIM_WHITEMAN)
2 Jul 2018   [#12] In reply to [#11]
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

Show messages: All  1-5  6-12