Hello folks,

please take a look at the attached image, while ago (maybe a year or so) I asked for the possibility of having an add-on described in the attached image!

Is it feasible to develop an add-on that captures thumbnails of meshes created through Nodes, saves the corresponding Node file in a designated directory, and later allows users to reload the Node file simply by clicking on the associated thumbnail image? Pretty much like Max's addon (Obj Library?)

I think having such an addon will enable us to create a library of Nodes for creating different meshes (such as screw threads , knots and bolts, gears, etc. and therefore we would be able to quickly create meshes using node editor (none destructive way)

Note 1: I already shared this idea with some good folks here (on private chat); one of them was MO, and he came up with a solution I am willing to share with the rest of you if you are interested or better maybe MO can do that! himself.
However, I still wish we could have such an addon that I have described in this post.

Note 2: Ofcourse the Icon I have suggested for "Node Library" hypothetical addon is a black and white copy of James's Instagram page "Nodeology" ;-)

Hi Psygorn, I'm sorry but I'm not familiar enough with the node editor to make an addon like that.

- Michael

Hi Michael,

it is ok, I posted this to see anyone is capable of making such an addon, if I be honest I thought someone can reverse engineering Max's "Obj library" add-on
In theory, the concept appears straightforward: create a mesh using the Node Editor, generate and save a thumbnail of the created mesh, and instead of saving the mesh itself in a directory, save the corresponding Node file in the designated directory.

So, I'll wait and see if any good folks of the community can make such an add-on! :-)

-Psygorn

Hi Psygorn and Michael

I gave it a shot and successfully implemented it into nodeeditor using Max's "ObjLibrary" script.
It's very rough though, yet it works ok. :)

I have a question for Michael:
Is there any way to change the menuButton's arrow direction?
When there is not enough space for menu, it opens underneath, but arrow stays on top.

Oh WOOOW! I see some hope! Tanx MO.

A couple of questions for MO: so if u click on Ancient Numerical systems it will recall the .nod file?

And Why u didn't name it Node Library?

-Psygorn

Hi,
just a thought if a button was added to Max's Moi custom ui that opened the location of nod files
and by clicking on the required nod file it would open nodeditor and load automatically.
Here is some info to this question I got from Microsoft Copilot but its beyond me.

If MoI3D had a feature like that, it would indeed make working with NodeEditor much more streamlined! While MoI3D does not natively support this functionality out of the box, we can create a custom script to achieve a similar effect. Here’s a general approach on how you could set this up:

Create a Custom Command:

You need to create a custom command in MoI3D to open the NodeEditor and load a specific .nod file.

JavaScript for Custom Command:

Write a JavaScript file to handle the opening of the NodeEditor and loading of the .nod file.

Here’s an example JavaScript code snippet to give you an idea:

// Define the custom command
moi.command.addCommand('OpenNodeFile', function() {
// Open file dialog to select a .nod file
var filePicker = moi.ui.createFilePicker();
filePicker.caption = 'Select Node File';
filePicker.filter = 'Node Files (*.nod)|*.nod';

if (filePicker.showOpen()) {
var selectedFile = filePicker.fileName;

// Check if NodeEditor is loaded
if (!moi.ui.createPanel('nodeeditor')) {
moi.ui.alert('NodeEditor is not installed or not loaded.');
return;
}

// Load the selected .nod file into the NodeEditor
moi.command.execCommand('loadnod', selectedFile);
}
});

// Register the custom command
moi.commandList.registerCommand('OpenNodeFile', moi.command.OpenNodeFile);

Add Command to MoI3D:

Save the JavaScript file in the MoI3D commands directory.

Add a shortcut or button in the MoI3D UI to execute this custom command.

Use the Command:

When you execute this command, a file dialog will open, allowing you to select a .nod file. The script then loads the selected file into the NodeEditor.

Please note that you need to have the NodeEditor installed and properly configured in MoI3D for this to work. This custom command is a starting point and may need adjustments based on your specific setup and requirements.

Cheers
Barry

Hi Mo,

re:
> I have a question for Michael:
> Is there any way to change the menuButton's arrow direction?
> When there is not enough space for menu, it opens underneath, but arrow stays on top.

So the way it works currently is that it will put the arrow below if it's in a UIPanel with dock="top", like if you change MainWindowLayout.xml and for the command bar edit dock="" to be <UIPanel dock="top" src="moi://ui/CommandBar.htm">

There isn't a way to control it separate from that but I will add in a dir="up" / dir="down" property.

But another way you can show a menu is like this:

<moi:PushButton style="padding:0" onclick="moi.ui.showMenu( 'ObjectSnapMenu.htm', this, 1, 0 );">Snap to</moi:PushButton>

The 3rd parameter to moi.ui.showMenu() is an integer:
0 = put menu below button
1 = put menu on right side of button
2 = put menu above button
3 = put menu on left side of button

And the 4th parameter is another integer:
0 = expand menu to right (when menu above or below button) or down (when menu on left or right side of button).
1 = expand menu to left or up

- Michael

Hi Psygorn
>> if u click on Ancient Numerical systems it will recall the .nod file?
Yes, It loads the selected nod file.

Unfortunately, my lack of HTML knowledge stopped me here :)
This is what I've done, maybe someone can help me.

First, I tried to call the "createDialog" with selected .nod url file, it worked well.
but, It needs to close and refresh the nodeeditor window every time user choose a new file.

Simpler way is to clear the graph by calling the LiteGraph methods,
but, I couldn't find a way to access to the "LiteGraph.editor" variable from "ObjLibrary.menu.htm" file.
It is necessary for clearing or starting the graph.

I'll try it later. hope someone can give me a hint. :)

Hi Michael
Thanks for the info. I'll try it out later. :)

Hi Mo, something like this for a script to find the node editor object from script running outside of the node editor dialog.

    var uipanels = moi.ui.getUIPanels();

    for ( var i = 0; i < uipanels.length; ++i )
    {
        var uipanel = uipanels.item(i);

        // uipanel is the HTML window object that holds global variables.

       // Find the one that has "nodeeditor" somewhere in it's URL:

       moi.ui.alert( uipanel.document.URL );

    }

If there is a global variable on the node editor dialog named LiteGraph then you should be able to do uipanel.LiteGraph.editor

- Michael

Thank you Michael. Yes, It found the "LiteGraph" variable and works very well.
I'll try again later. :)

Hi Mo, also maybe instead of looking at the URL it may be better to look for that global variable existing.

Something like this:

    var uipanels = moi.ui.getUIPanels();

    for ( var i = 0; i < uipanels.length; ++i )
    {
        var uipanel = uipanels.item(i);
        
        /* uipanel is the HTML window object that holds global variables. */
        /* Find the one that has a global variable "LiteGraph". */
        if ( uipanel.LiteGraph )
        {
              moi.ui.alert( 'found it' );
        }
    }

I have made some progress with the use of Copilot to this point.
1) on shortcut key file opens to pick nod file.
2) Nodeditor opens automatically on selection of nod file.
3) File fails to load with undifined error.
Problem with path I think.
Here's the JS code.

function openNodeFile() {
try {
// Open the file selection dialog
var filePath = moi.filesystem.getOpenFileName('Open', 'MoI Nodeeditor files (*.nod)|*.nod');
if (!filePath) {
moi.ui.alert('No file selected.');
return; // Exit if no file is selected
}

// Alert the selected file path
moi.ui.alert('File selected: ' + filePath);

// Open the Nodeditor dialog with the correct path
moi.ui.createDialog('moi://appdata/nodeeditor/index.html?scheme=Light', 'resizeable,defaultWidth:680,defaultHeight:420', moi.ui.mainWindow);

// Attempt to load the selected .nod file into the Nodeditor
// Placeholder for actual logic to load the file
// If `loadNodeFile` is not the correct method, replace this with the correct one
if (typeof moi.ui.commandUI.loadNodeFile === 'function') {
moi.ui.commandUI.loadNodeFile(filePath); // Replace with the correct method if necessary
moi.ui.alert('File loaded successfully.');
} else {
moi.ui.alert('Error: loadNodeFile method not found in moi.ui.commandUI.');
}

} catch (error) {
moi.ui.alert('Error: ' + error.message);
}
}

// Run the openNodeFile function
openNodeFile();

you are a valiant pioneer!

Thanks pilou,
Hope someone will come up with the answer why the nod file won't load from the code I've posted.
Anyway good experience playing with Ai
Cheers

Hi Barry,

re:
> Hope someone will come up with the answer why the nod file won't load from the code I've posted.

Well a couple things - moi.ui.commandUI.loadNodeFile() won't work because moi.ui.commandUI is for accessing the UI in the command options area in the upper right area of the main window. Like where the width and height fields are shown when you're drawing a rectangle.

The node editor isn't located there, it's in a dialog not in "command UI".

Another thing is that you will need to wait until the dialog has finished loading before you can access it.

Also there is not any function named loadNodeFile() in the node editor.

Here is an example of waiting for the dialog to be loaded. Then I think you will need to copy the code from Editor.prototype.onLoadButton in editor.js .

var g_dlg = null;
var g_filePath = '';

function handleOnLoad() {
	// You can access LiteGraph here.

	moi.ui.alert( g_dlg.htmlWindow.LiteGraph );
}

function openNodeFile() {
    try {
        // Open the file selection dialog
        g_filePath = moi.filesystem.getOpenFileName('Open', 'MoI Nodeeditor files (*.nod)|*.nod');
        if (!g_filePath) {
            moi.ui.alert('No file selected.');
            return; // Exit if no file is selected
        }

        // Alert the selected file path
        moi.ui.alert('File selected: ' + g_filePath);

        // Open the Nodeditor dialog with the correct path
        g_dlg = moi.ui.createDialog('moi://appdata/nodeeditor/index.html?scheme=Light', 'resizeable,defaultWidth:680,defaultHeight:420', moi.ui.mainWindow);

	// Need to wait for the dialog to finish loading before accessing it.
	// You can push global variables onto it now but the regular content in it isn't loaded yet.
	g_dlg.htmlWindow.addEventListener( 'load', handleOnLoad );


    } catch (error) {
        moi.ui.alert('Error: ' + error.message);
    }
}

// Run the openNodeFile function
openNodeFile();

Hi Barry, so although there does not seem to be a loadNodeFile() function, you can give the node editor a parameter named 'file' in the URL's search string to tell it which file to load when it starts.

Like this:

function openNodeFile() {
    try {
        // Open the file selection dialog
        filePath = moi.filesystem.getOpenFileName('Open', 'MoI Nodeeditor files (*.nod)|*.nod');
        if (!filePath) {
            moi.ui.alert('No file selected.');
            return; // Exit if no file is selected
        }

        // Alert the selected file path
        moi.ui.alert('File selected: ' + filePath);

	// Put parameter file=path.nod in the URL's search string to have it load the file.
	var url = 'moi://appdata/nodeeditor/index.html?scheme=Light&file=' + filePath;

        // Open the Nodeditor dialog with the correct path
        moi.ui.createDialog(encodeURI(url), 'resizeable,defaultWidth:680,defaultHeight:420', moi.ui.mainWindow);

    } catch (error) {
        moi.ui.alert('Error: ' + error.message);
    }
}

// Run the openNodeFile function
openNodeFile();

Hi Barry, so the part about telling the node editor which file to load using a file= parameter in the URL is a little buggy in the node editor code.

To fix it, open the node editor file init.js and find this on line number 44:

	var data = '', loadFilePath = NeParameters.file.replace(/%5C/g,"\\");

change it to this instead:

	var data = '', loadFilePath = decodeURIComponent(NeParameters.file);

Then the code to use it should go like this:

function openNodeFile() {
    try {
        // Open the file selection dialog
        filePath = moi.filesystem.getOpenFileName('Open', 'MoI Nodeeditor files (*.nod)|*.nod');
        if (!filePath) {
            moi.ui.alert('No file selected.');
            return; // Exit if no file is selected
        }

        // Alert the selected file path
        moi.ui.alert('File selected: ' + filePath);

        // Put parameter file=path.nod in the URL's search string to have it load the file.
        var url = 'moi://appdata/nodeeditor/index.html?scheme=Light&file=' + encodeURIComponent(filePath);

        // Open the Nodeditor dialog with the correct path
        moi.ui.createDialog(url, 'resizeable,defaultWidth:680,defaultHeight:420', moi.ui.mainWindow);

    } catch (error) {
        moi.ui.alert('Error: ' + error.message);
    }
}

// Run the openNodeFile function
openNodeFile();

Thanks Michael,
works fine now.
Cheers
Barry