Hi,
Is it possible to enlarge the Node Editor's UI.
I know we can zoom in and out in the main work area
but the info side panel cannot be zoomed and with it
now being a main part of imputing data it's a pain
on my surface pro 4.

Barry

Hi Barry, yes I think it's possible to enlarge the UI. It looks like you would need to edit one of the .css files which are inside the node editor in the css subdirectory.

From a quick look I think you'd need to change the file litegraph-editor.css , it looks like there are several css classes in there that define things for the info panel, like this:

.node-info .node-infoline {
	width: 100%;
	font-size: 12px;
	display: inline-block;
}

You'd need to edit the font-size value in there to increase the size of that particular element. It looks like there are individual font sizes set for various controls, so you'll need to look through everything in the /* NODE PANEL *********************/ section and adjust all the font sizes you find there.

It can be nicer if control font sizes are set as percentage values instead of direct pixel values, that way you can control many things with just one font setting on a container element. To do that you'd modify things like font-size:14px to font-size:110% , and then add a base font-size to the parent element which looks like probably the .node-panel class.

- Michael

Hi Michael,
thank's for the help I have modified the editor.css file and got a good result.
The only thing is the info panel now opens on the left side of the screen and
not the right as normal. I did increase the panel width from 240 to 320.
There is a editor-hd.css file, does this need modifying also ?
Thanks
Barry

Hi Barry, can you please post a .zip file of your modified node editor? If you can post the entire thing so I could take a look at it over here maybe I'll be able to figure out why it's moved to the left side for you.

- Michael

Hi Michael,
here is my modified file.
Barry

Hi Barry can you please post your entire node editor folder zipped up so I can make sure I've got all the same stuff as you.

- Michael

Hi Michael,
file attached.
Barry

Hi Barry, it's because of using // for commenting out stuff in the editor.css file. Unfortunately unlike .js files, css doesn't understand // meaning a comment, it only knows /* */ for comments.

So in the .node-panel class in editor.css, when you have this:

	width: 300px;//240
	right: 0px;

it's going to think you have 2 properties there named 'width' with a value of 300px and then another one named '//240 right' which won't be recognized so essentially right: is disabled there.

If you remove the // comments or switch them to /* */ then shut down and restart MoI you should then be back to what you want.

You may have had a few other various side effects from the // comments effectively disabling the property on the next line after in other areas too.

- Michael

Hi Michael,
I have removed all the comment tags but still the same.
I will try installing a fresh copy of the node editor and retry editing without comment tags.
Thanks
Barry

Hi Barry, hmm removing the // comments worked for me over here but I did have to exit MoI and restart it, did you do that part?

Anyway if you start fresh and don't put in any // comments that should work too.

- Michael

Michael,
sorted it there was an old core file from a previous version of node editor still in the ui directory.
Removing that as cured the issue. Bad house keeping by me sorry about that.
I have a much more useable node editor ui now.
So again many thanks
Barry.

That's great Barry, you're welcome!

- Michael