Hello MoI friends,

Just a quick UI question if I may please? I know heavy customizing of the UI is a little bit of a contentious subject, but I am wondering of there is a way of adding an icon to the view buttons instead of having the text (Split, 3D, Top, Front, Right)? I have taken a look inside ViewTabs.htm which I think is where the buttons are located, but have been unsuccessful in tinkering with the code.

Also, whilst on the subject of UI customization, I was wondering if there is a way of removing the white drop shadow on the viewport window text (3D, Top, Front...)?

Thank you for reading, I appreciate any feedback.

Kind regards,

Tim

Hi Tim,

re:
> but I am wondering of there is a way of adding an icon to the view buttons
> instead of having the text (Split, 3D, Top, Front, Right)?

Do you have images for the icons you want to use? Also if you can post maybe a rough sketch or mockup of how you want it to look that would help.


> Also, whilst on the subject of UI customization, I was wondering if there is a way of removing the white drop
> shadow on the viewport window text (3D, Top, Front...)?

Sorry no this part is drawn by the 3D viewport display engine, it's different than the HTML based engine used for the GUI. This part isn't based off of .htm files that you can edit, it's drawn from MoI's internal code.

- Michael

Hi there Michael,

Many thanks for your kind response and my apologies for my slightly delayed reply.

I have created some icons for the buttons and a quick mockup of how I imagine the buttons might look. I was thinking for the cube icons, as they are all the same width, the buttons containing them (3D, Top, Front, Right) could also be equally sized and spaced (I don't think my mockup depicts this, as I took an initial screenshot from MoI and the buttons are varying widths to contain the text.) The only exception could be the Split button as the width of the icon is slightly wider in appearance. The code that I have for the existing buttons is as follows (if it helps?):

moi\:TabContainer {
display:inline-block;
white-space:nowrap;
}

moi\:TabButton {
color: #999999;
display:inline-block;
padding:0.3em 0.5em 0.35em 0.5em;
white-space:nowrap;
font-size:90%;
text-align:center;
border:1px solid #282828;
border-left-color: #282828;
border-right-color: #282828;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #626262), color-stop(3%, #626262), color-stop(4%, #4d4d4d), color-stop(100%, #3d3d3d));




No worries about the shadow text in the viewport window, I did vaguely remember that this wasn't editable from my UI customization days a few years ago. I had forgotten since though.

Thank you as always Michael for your kind help and support. I hope I do not cause offense by editing the UI which you have created, I absolutely love MoI, it is by far my most comfortable user experience and I only really wanted to edit the UI a little for a more comfortable viewing experience (dark, for less eyestrain).

Thanks again and stay happy and safe!

Kind regards,

Tim

Hi Tim, if you copy those icons into the ui\icons folder, then you can update ViewTabs.htm to the attached version and that should have images on the buttons.

That's done by making the <moi:TabButton> elements have <img> tags in them instead of <moi:Text> elements.

However, you will lose the label switch between reversed views, like when the tab switches its text from "Top" to "Bottom". Currently the label switching works through some code in the binary back end updating a text label value on the text element that it is expecting to see in there. At the moment there isn't any way to make it switch between 2 images instead.

I have updated this for the next v4 beta though so it will also call a script function on the UI so that something other than just a text label can be updated when views switch between reversed or regular. This is set up in this attached ViewTabs.htm file so that reverse view label switching should work with the next v4 beta release.

- Michael

Hi Michael,

Thank you very much for your time and for so kindly helping me. I do always appreciate your effort and support.

That's great! I must admit that the non-reverse functionality is a bit of a game changer, as I use the reverse function quite a bit. However, it's very interesting to learn the difference between the ViewTabs.htm with the images and with the text. I'm really interested by the htm|css coding and would like to learn a little more, as I can see that it would benefit the understanding of MoI's backend greatly. It's really a balancing act between using the software creatively and tinkering with its functionality and appearance. Either way, it's great fun!

Really encouraging to hear of the next v4 beta and thank you for being so open and engaging with your users.

Kindest regards,

Tim

Actually, I've just thought of something else relating to the view buttons that I had meant to ask you...

Assuming that I am using MoI without the custom icons (with the text labels), I was wondering if there is a way of left-clicking on the view button to reverse toggle instead of the right-click? So for example, when left-clicking on Top, it toggles to Bottom and vice versa.

Thanks Michael.

Hi Tim,

re:
> Assuming that I am using MoI without the custom icons (with the text labels), I was
> wondering if there is a way of left-clicking on the view button to reverse toggle
> instead of the right-click? So for example, when left-clicking on Top, it toggles
> to Bottom and vice versa.

That's actually how it works currently. If the Top view is the active tab, then when you left click on it , it toggles to Bottom.

If the one you left click on is not active, it will become active. If you then left click it again while it is active it will toggle.

- Michael