Node editor UI

Next
 From:  Barry-H
8456.1 
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
  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
8456.2 In reply to 8456.1 
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:

code:
.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
  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:  Barry-H
8456.3 In reply to 8456.2 
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
  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
8456.4 In reply to 8456.3 
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
  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:  Barry-H
8456.5 In reply to 8456.4 
Hi Michael,
here is my modified file.
Barry
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
8456.6 In reply to 8456.5 
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
  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:  Barry-H
8456.7 In reply to 8456.6 
Hi Michael,
file attached.
Barry
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
8456.8 In reply to 8456.7 
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:

code:
	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
  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:  Barry-H
8456.9 In reply to 8456.8 
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
  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
8456.10 In reply to 8456.9 
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
  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:  Barry-H
8456.11 In reply to 8456.10 
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.


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
 From:  Michael Gibson
8456.12 In reply to 8456.11 
That's great Barry, you're welcome!

- 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