UI Modification Help

Next
 From:  Sharif (SR13765)
3597.1 
Hi;
I have modified the MOI environment in terms of background color to fit my need. I have one question, how can I modify the viewport frames (color and thickness), so It could have less contrast with the background color. I understand that the UI environment can be modified with editing of htm files located in "UI" folder. I don't know which file or section of the file I have to modify to get this change.

Thank you for your help!

Sharif


Attachments:

  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  Michael Gibson
3597.2 In reply to 3597.1 
Hi Sharif, that border around the outside of a view comes from a bitmap named ViewportForeground.png which is in the \ui subfolder under MoI's main install folder.

If you change that file with an image editor, it will change the appearance of the viewport borders.

When you open the file, you will see that there is a white line along the top and left edges of the bitmap which have some black dots in it, these dots divide the rest of the bitmap into 9 regions which controls how the image is stretched, with the corner parts not being stretched at all.

The image also needs to have a transparent middle area.

- Michael
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  Sharif (SR13765)
3597.3 In reply to 3597.2 
Thank you Michael for your quick response!
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  Sharif (SR13765)
3597.4 In reply to 3597.2 
It worked very nicely. Now one more think, the construction line is in black color how can I change that to another lighter color since I am using a dark background now.

Thanks again

Sharif
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  Michael Gibson
3597.5 In reply to 3597.4 
Hi Sharif, the construction line color can be set in moi.ini - to open that up go to Options > General and there is an "Edit .ini file" button near the bottom.

Construction lines actually use the same color as the lines drawn when "Straight snap" is active, so the value you need to change is the StraightSnapLineColor, which is under the [Drawing Aids] section:

[Drawing Aids]
StraightSnapLineColor=103,0,0,0

The 4 numbers there can range between 0 to 255.

The first number is an opacity value, and then red, green, blue.

So for example to make construction lines white with the same kind of opacity they currently have, set it to this:

StraightSnapLineColor=103,255,255,255

- Michael
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  Sharif (SR13765)
3597.6 In reply to 3597.5 
Thank you!, Now I am all set
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  vodkamartini
3597.7 In reply to 3597.6 
No pretty picture of your creation? I like seeing custom UIs...
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  Sharif (SR13765)
3597.8 In reply to 3597.2 
Hi Michael;

I have customized the uI and few areas I cannot get it to work. these areas have been marked on the attached image file as follow:

#1-I like to have the coordinate and distance in single row. I have tried but I cannot get it to work.
#2-How can I change the color of the text for the "file name" from black to white
#3-I have added some pallet , but they are not showing up. and they are no expanding
#4-What is This left arrow keep showing up.

Thanks

EDITED: 24 Jun 2010 by SR13765

Attachments:

Image Attachments:
Size: 737.8 KB, Downloaded: 140 times, Dimensions: 1950x1080px
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  Michael Gibson
3597.9 In reply to 3597.8 
Hi Sharif, you're getting to a level of modifications here where it may be difficult for me to help you very much since it can take quite a bit of effort for me to try and review all the various many changes you are making and try to understand them.

But I think I can still help you for this batch though.

> #1-I like to have the coordinate and distance in single row.
> I have tried but I cannot get it to work.

The current ones are in a table with has a width set on it. Probably the easiest is to just delete the table, and have each of the controls as just individual elements. In the file CommandBar.htm delete the whole piece that starts with
code:
<table id="coordinatetable" cellspacing="0" cellpadding="0">


delete all the way to where the table ends, and in its place put the following:
code:
		<span style="margin-bottom:0.5em; display:inline-block;">
			<input style="width:10em;" class="xyzcoordinatetext">
			d:<input style="width:5em;" class="singlecoordinatetext" style="behavior:url(#default#DistanceCoordinateText); iscoordinate:true;">
			a:<input style="width:5em;" class="singlecoordinatetext" style="behavior:url(#default#AngleCoordinateText);">
		</span>



> #2-How can I change the color of the text for the "file name"
> from black to white

You need to use the "color" CSS attribute for that, right now you're using "text-color" which doesn't do anything.

So for instance in CommandBarTopRight.htm you've currently got:
code:
		#FileNameContainer
		{
			padding-bottom:0.5em;
			text-align:right;
			text-color:ffffff
			width:100%;


Also in addition to that, usually CSS colors are meant to begin with a # sign (although it will probably work if you leave that out), and also make sure to end the line of each property statement with a semi-colon ; - you're missing some of those currently and that could probably mess things up as it will probably think that everything until the next semi-colon is one statement.

So make that say (just that text-color line has been changed):

code:
		#FileNameContainer
		{
			padding-bottom:0.5em;
			text-align:right;
			color:#ffffff;
			width:100%;

And then your the text for the file name will be white.



> #3-I have added some pallet , but they are not showing up.
> and they are no expanding

Be careful to follow the same pattern as the other ones.

In your new one (in SidePane.htm), you wrote:
code:
<PaletteHeader id="SharifToolsHeader" ...


If you look at the other ones, notice that they are not the same as that, they are like this:
code:
<moi:PaletteHeader>


You're missing the "moi:" at the start, you'll need to add that in so that your one says <moi:PaletteHeader> like all the other ones.

Then in addition to that, you'll want to change the label for the tabs, currently you've got this:

code:
<moi:TabButton id="ToolsTab" class="LeftTabButton"><moi:Text textid="Tools tab"/></moi:TabButton>



Those tags that say <moi:Text> mean to look up that name in the UI strings file and put that text into that spot. Unless you are going to make different language versions that can have the text come from different UI string files, you probably don't want to use <moi:Text> tags for your new labels, instead just put the plain text in those areas, like this:

code:
<moi:TabButton id="ToolsTab" class="LeftTabButton">Tools</moi:TabButton>


Once you do those 2 changes (just add moi: to the start of the PaletteHeader tag, and make sure the tab has some text content to it), then your new palette will show up.


> #4-What is This left arrow keep showing up.

It's coming from an extra character in your SideFooter.htm file, at the very start. The first line of that file is like this:
code:
<<html xmlns:moi>


Note that you've got 2 << at the start there, since the first one does not belong to any tag it is getting interpreted as some text to render on the page. Remove the extra one and that will go away.


Hope that helps!

- Michael
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  Sharif (SR13765)
3597.10 In reply to 3597.9 
Hi Michael;

I am done with the UI modification. I am very happy with the layout I have got know. Everthing works well

Thank you again for all your help!

Sharif
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
 From:  Tree (TREELOY)
3597.11 
Damn....even there to help out with UI modification. You da man Michael.
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged
 

Reply to All Reply to All