Full Version: Command Bar Issue

From: Whiteman Dynamic (TIM_WHITEMAN)

11 Dec 2019 [#1]

Hello Again friends,

I'm wondering if anyone knows of a solution to this fairly simple UI issue that I'm struggling to figure out (I'm not great at html!)

All I want to do is to be able to center these highlighted icons vertically (like the others). For some reason, no matter what I try, they stay either top or bottom aligned? (Excuse some of the icons, I've got to re-artwork some of them!)

Thank you all for understanding my noob question! ;)

Kind regards,

Tim

Image Attachments:
Command Bar Issue.jpg

From: Michael Gibson

11 Dec 2019 [#2] In reply to [#1]

Hi Tim, centering things vertically has historically tended to be a tricky area of HTML. There is a mechanism in recent years called flexbox which tends to be the easiest way. If you look at the stock CommandBar.htm you'll see a few things that are centered are using a <vcenter></vcenter> tag around them which will use a flexbox to do it. That's the easiest.

But needing to center those buttons is an indication that other some of your other UI is too tall. The stock command bar is carefully designed so that those buttons are the tallest things so they take up the entire height and thus don't need centering and can also benefit from Fitt's law for targeting them.

- Michael

From: Whiteman Dynamic (TIM_WHITEMAN)

11 Dec 2019 [#3] In reply to [#2]

Hi Michael, many thanks for your kind reply and explanation, I am very grateful.

Yes, I did notice the vcenter, flex and hbox tags. So, I'm guessing that the vcenter tags would need to be within the flex tags for it to work correctly?

Yes, I did consider that there might be an element of the command bar that is taller than the rest. Is there a way that I could troubleshoot which part is the one that is potentially causing the issue? I suspect that it may be the custom UI scripted parts, specifically object library, scripts and lighting? As you may have noticed, I did try to remove the text from the icons and I'm not sure if I did it correctly, so that might be causing an issue too? I'm wondering if despite removing the text, it has left the empty space where the text would be and thus thrown it out of alignment?

Thanks again for your time and insight.

Tim

From: Michael Gibson

11 Dec 2019 [#4] In reply to [#3]

Hi Tim,

> So, I'm guessing that the vcenter tags would need to be within the flex tags for it to work correctly?

Yup.

> Is there a way that I could troubleshoot which part is the one that is potentially causing the issue?

One way to get a better sense of how much space a particular element is taking up is to put style="background:red" on it.

> As you may have noticed, I did try to remove the text from the icons and I'm not sure if I
> did it correctly, so that might be causing an issue too? I'm wondering if despite removing
> the text, it has left the empty space where the text would be and thus thrown it out of
> alignment?

Yes, if you just remove the text from the inside of the <moi:CommandButton> elements it's still going to have space for a blank line there.

So the code for a <moi:CommandButton> is going to come from the template file CommandButton.htm, there's an img and a div in it for the text.

If you go to the <style> section up at the top of CommandBar.htm if you add this rule it should get rid of the button text line entirely:

code:

			moi\:CommandButton > div, moi\:CommandMenuButton > div, moi\:CommandSplitButton > div {
				display:none;
			}

or you could also go to templates CommandButton.htm, CommandMenuButton.htm, and CommandSplitButton.htm and remove the <div> from there as well. The way the controls work is that when there is a custom element it looks to see if there is an .htm file with that same name and if there is it splices in the contents of that file for the inside of the control.

- Michael

From: Whiteman Dynamic (TIM_WHITEMAN)

12 Dec 2019 [#5] In reply to [#4]

Hi Michael,

Thank you so much for your kind knowledge and assistance. You were absolutely right about the text affecting the positions of the icons (the

tags. Hey look at me, I'm learning! lol). So I've made some changes and very nearly got to the look that I'm after. As you probably noticed, I am using a custom UI from a source that I can't remember and can no longer find the original UI webpage? Anyway, the only issue I am facing now is the Option, Help and Window controls all insisting on being bottom aligned (I think?)

This is the CommandBar.htm that I am currently using, forgive me for butchering your original beautiful, clean code! ;)

code:

<html>
	<head>
		<style>
			body {
				white-space:nowrap;
			}
			
			body > hbox {
				height:100%;
				-webkit-box-align:end;
			}
			
			body > hbox > flex, body > hbox > div {
				height:100%;
			}
			
			body > hbox > flex > *, body > hbox > div > * {
				vertical-align:center;
			}
			
			moi\:ViewTabs, moi\:CoordinateControls {
				display:-webkit-inline-box;
				-webkit-box-orient:horizontal;
				-webkit-box-align:center;
				height:100%;
			}
			
			.vspacer {
				display:inline-block;
				width:0;
				height:100%;
			}

			moi\:CommandButton > div, moi\:CommandMenuButton > div, moi\:CommandSplitButton > div {
				display:none;
			}

			<!--
			Remove Icon Text
			The command above removes the text from below the icons of CommandButton.htm, CommandMenuButton.htm and CommandSplitButton.htm
			-->

		</style>
	</head>
	
	<body class="CommandBarBody">
		<hbox>
	
			<flex>
			
				<!-- Include vertical spacer to make vertical-align:bottom work well with command buttons !-->
				

				<moi:CommandMenuButton menu="FileMenu.htm" icon="moi://ui/icons/File.png"><moi:Text textid="File"></moi:CommandMenuButton>
				<moi:CommandButton icon="moi://ui/icons/Save.png" command="save" rcommand="saveas"><moi:Text textid="Save"></moi:CommandButton>

				<moi:Spacer>
				
				<moi:CommandButton icon="moi://ui/icons/Undo.png" onclick="moi.command.undo();"><moi:Text textid="Undo"></moi:CommandButton>
				<moi:CommandButton icon="moi://ui/icons/Redo.png" onclick="moi.command.redo();"><moi:Text textid="Redo"></moi:CommandButton>
				
				<moi:Spacer>
				
				<moi:CommandButton icon="moi://ui/icons/Delete.png" command="delete"><moi:Text textid="Delete"></moi:CommandButton>

				<moi:SmallSpacer>

				<moi:ViewTabs>
			
				<moi:Spacer>

				<moi:CoordinateControls>

				<moi:Spacer>
				
				<vcenter>
					<moi:StateButton
						binding="value = moi.drawingAids.gridSnap"
						menu="GridSnapMenu.htm">
						<moi:Text textid="Grid Snap">
					</moi:StateButton>
				</vcenter>

				<vcenter>
					<moi:StateButton
						binding="value = moi.drawingAids.straightSnap">
						<moi:Text textid="Straight Snap">
					</moi:StateButton>
				</vcenter>

				<vcenter>
					<moi:StateButton
						binding="value = moi.drawingAids.objectSnap"
						menu="ObjectSnapMenu.htm">
						<moi:Text textid="Object Snap">
					</moi:StateButton>
				</vcenter>
				
				<moi:Spacer>

				<vcenter>
					<script type="text/javascript" src="customui/CustomInit.js">
				</vcenter>

				<moi:Spacer>

				<vcenter>
					<moi:CommandButton icon="moi://ui/icons/ToggleLines.png" onclick="script:var breps = moi.geometryDatabase.getObjects().getBReps(); var hide = true; for ( var i = 0; i < breps.length; ++i ) { var edges = breps.item(i).getEdges(); if ( i == 0 ) hide = !edges.item(0).hidden; edges.setProperty( 'hidden', hide ); }"><moi:Text textid="Edges"></moi:CommandButton>
				</vcenter>

				<vcenter>
					<moi:CommandButton icon="moi://ui/icons/ToggleHiddenLines.png" onclick="script:moi.view.showHiddenLines =! moi.view.showHiddenLines;"><moi:Text textid="HL"></moi:CommandButton>
				</vcenter>

				<vcenter>
					<moi:CommandButton icon="moi://ui/icons/wireframe.png" onclick="var breps = moi.geometryDatabase.getObjects().getBReps(); var hide = true; for ( var i = 0; i < breps.length; ++i ) { var faces = breps.item(i).getFaces(); if ( i == 0 ) hide = !faces.item(0).hidden; faces.setProperty( 'hidden', hide ); }"><moi:Text textid="Wire"></moi:CommandButton>
				</vcenter>

				<vcenter>
					<moi:CommandButton icon="moi://ui/icons/seledges.png" onclick="script: /* switch selection from a face to its edges */ var gd = moi.geometryDatabase; var faces = gd.getSelectedObjects().getFaces(); gd.deselectAll(); for ( var i = 0; i < faces.length; ++i ) faces.item(i).getEdges().setProperty( 'selected', true );"><moi:Text textid="SelEdges"></moi:CommandButton>
				</vcenter>

				<vcenter>
					<moi:CommandButton icon="moi://ui/icons/nakededges.png" onclick="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 );"><moi:Text textid="NakEdges"></moi:CommandButton>
				</vcenter>

				<vcenter>
					<moi:CommandButton icon="moi://ui/icons/ImportOBJExact.png" command="_ImportObj exact"><moi:Text textid="ImportObj"></moi:CommandButton>
				</vcenter>

				<vcenter>
					<moi:CommandButton icon="moi://ui/icons/Node Editor.png" command="moi.ui.createDialog( 'nodeeditor/index.html', 'resizeable,defaultWidth:680,defaultHeight:420', moi.ui.mainWindow )"><moi:Text textid="NodeEditor"></moi:CommandButton>
				</vcenter>				

				<vcenter>
					<moi:CommandButton icon="moi://ui/icons/measure.png" command="MeasureDistance"><moi:Text textid="Measure"></moi:CommandButton>
				</vcenter>				

			</flex>

				<vcenter>
					<moi:CommandButton icon="moi://ui/icons/Options.png" onclick="if ( event.ctrlKey && event.shiftKey ) { LlamaMode(); } else { moi.ui.createDialog( 'Options.htm', 'resizeable,defaultWidth:43em,defaultHeight:32em' ); }"><moi:Text textid="Options"></moi:CommandButton>
				</vcenter>
				
				<vcenter>
					<moi:CommandSplitButton icon="moi://ui/icons/Help.png" menu="HelpMenu.htm" onclick="moi.launchHelp();"><moi:Text textid="Help"></moi:CommandSplitButton>
				</vcenter>

				<moi:Spacer>

				<moi:Spacer>

				<!-- <moi:CommandButton icon="Minimize.png"  style="position:absolute; right:0;" onclick="moiWindow.minimize();"></moi:CommandButton>

				<moi:CommandButton icon="Restore.png"  style="position:absolute; right:0;" onclick="moiWindow.restore();"></moi:CommandButton>
			 -->
						
				
				
				<script>
					var g_InLlamaMode = false;
					
					function LlamaMode()
					{
						g_InLlamaMode = !g_InLlamaMode;					
					
						var panels = moi.ui.getUIPanels();
						for ( var i = 0; i < panels.length; ++i )
						{
							var images = panels.item(i).document.images;
							for ( var j = 0; j < images.length; ++j )
							{
								var img = images[j];
								if ( img.parentElement.tagName.indexOf('COMMAND') == -1 )
									continue;
															
								if ( !img.savedSrc )
									img.savedSrc = img.src;
								
								if ( g_InLlamaMode )
								{
									img.src = 'res://llamaicon';								
									img.style.webkitTransition = '-webkit-transform 10s linear';
									img.style.webkitTransform = 'rotate(360deg)';
								}
								else
								{
									img.src = img.savedSrc;
									img.style.webkitTransform = '';
								}
							}
						}						
					}
				</script>
			
 			<moi:SidePaneTitleBar style="display:block;">
			
		
		</hbox>
	</body>
</html>

Thanks again for your time and patience Michael, I am really very grateful!

Kind regards,

Tim

Attachments:
CommandBar.htm

Image Attachments:
Command Bar Issue_Almost.jpg

From: Michael Gibson

12 Dec 2019 [#6] In reply to [#5]

Hi Tim, what version of MoI are you using? The flexbox stuff is a little different between MoI v3 and v4, since v3 uses a much older version
of the WebKit engine in it. So the particular names of the CSS properties used are slightly different between v3 and v4.

- Michael

From: Whiteman Dynamic (TIM_WHITEMAN)

17 Dec 2019 [#7] In reply to [#6]

Hi Michael,

Thank you for your kind response, I do apologise for my slightly delayed response. I'm currently using version 3.

From: Michael Gibson

18 Dec 2019 [#8] In reply to [#7]

Hi Tim, so some of the difficulty in centering things is that the standard CommandBar is actually designed specifically to make command buttons drop down to the bottom instead of being centered. That's so they can make use of a thing called "Fitt's Law" basically meaning that when a button is flush against the bottom of the screen it will be targeted if you slam the mouse button down against the bottom of the screen where it stops.

If the buttons are centered, then that might no longer hold true, there might instead be a little bit of space below them so they might not be targeted when the mouse stops against the edge of the screen.

But if you wanted to make things centered like you're asking about it would probably be easiest to restructure it a bit and take out the bottom-aligning stuff and replace it with centering instead. I've attached a reworked CommandBar.htm that does that, does it do what you wanted? This one is set up for v3, for v4 the flexbox properties are similar but have slightly different names.

- Michael

Attachments:
CommandBar.htm

From: Whiteman Dynamic (TIM_WHITEMAN)

23 Dec 2019 [#9] In reply to [#8]

Hi Michael,

Thank you for your kind explanation of "Fitt's Law", an interesting solution and I can see that it works well in this case.

You're an absolute gentleman Michael as always! Thank you so much for the generosity of your time and knowledge in helping me fix the Command Bar. The attachment that you provided is exactly what I was trying to achieve!

I wish you a happy and relaxing Christmas holiday with your family.

Kind regards,

Tim

Reply to All

Full Version: Command Bar Issue

Back to thread list | Login