Hello

I would like to create an addon (for personal project) that works similar like Max's Nuts and Bolts, only for custom souvenir box/package creation. I have very limited knowledge about JS and HTML. The only 'script' i've made are merely VBA macros for CorelDraw and Excels, so i know it won't be easy.

Yet, i would appreciate much if any of you could point me to the right direction along with the best step-by-step practice for me to achieve this goal.

Thank you very much in advance. Sincerely.


Edit: I'm sorry for forgetting to mention this: the purpose of the addon is so that for several type of boxes, I can make one type with different dimensions (height, width, and depth). It would be a quite amount of boxes so I needed to have it done just by inserting the dimensions.

Hi Elang,

I'm also learning to create addons. It's lots of fun, even though it's slow. I've found that the best resource is all the commands that already exist. Especially whichever one is closest to what you want to do. Sounds like you already figured out that part. I put together a folder of as many commands as I could find and then whenever I have a question about something I can search for it in these files and see how other people handled it. I'm on Mac so I use BBedit's multi-file search for this purpose, but I think Notepad++ "Find in Files" can be used on Windows. The places that I've found troves of commands are:

• Burr's script archive and Petr's MoI page
• Pilou's website
• the commands built into MoI which are already on your computer

A download manager like wget can be used to get just the .js, .htm, and .zip files from these websites.

Some specifics including an example of how to set up a UI are in the html file here: http://moi3d.com/forum/index.php?webtag=MOI&msg=10857.36

Hi Elang,

re:
> Yet, i would appreciate much if any of you could point me to the right direction along with the best
> step-by-step practice for me to achieve this goal.

MoI is not currently tuned for this type of use and so there aren't resources like step by step tutorials to do this.

You can learn it but you have to be pretty self motivated and ready to experiment and learn by examining existing examples instead of following step by step tutorials.

Another place to check out though is: https://moi3d.com/wiki/Scripting

You can find tutorials on HTML/Javascript separate from MoI like for making web pages. That would probably be a good place to start.

- Michael

Asking pertinent questions on the forum is a good resource for help.

MoI has a BOX command, .js and .html, which has interactive dimension entry. You could write a new front end .html file for the Box command, to type in the desired dimensions, also with minor changes to the .js file . ???

- Brian

Thank you very much Peer, Michael, and Brian. This forum is AWESOME!

I'll try to figure out which is the easiest part and experiment with it.

I would suggest you best option and easiest to ask questions and learn is to design a “Node” to do this with Max’s node editor.

You would spend your time to generate 1 box with a node, then changing the values would be a quick change and output result.

A couple guys here could probably help you get the node setup with just a little bit of information/explaination aboit you box…

I would love to. Where do I start?

Thank you.

Hi Elang,

For some generalities, here is a Word file. (If you do not have Word, it could be converted to PDF.)
https://home.csulb.edu/~pnguyen/cecs100/lecturenotes/Programming%20Development%20Cycles.docx

1. Analyze the problem. The computer (programmer) <user> must figure out the problem, then decide how to resolve the problem - choose a program.
2. Design the program...FlowChart...
etc.
Write out an overall description in "English" (or your) language, of how the interaction of the user is expected to take place.

 

So far you have talked about making rectangular boxes.
Three fields can be defined for Width and Length and Height.
What about thickness of the box walls?

The MoI Box command can make a Box with 6 surfaces.

The MoI Offset/ Inset command can make a box with thicknesses. A uniform thickness would be another entry field for the user.
The open top of the box must be defined and selected somehow.
I do not know how to automatically select the "Top" of the box. Maybe something in Extrude would help. Michael would know...
Define the fields desired.
Depth would depend on the amount of offset height...


Nesting boxes?
Lids?
Heart shaped boxes?

For Windows systems, Notepad++ editor can view current .js and .htm files, such as Box, Ringmaker, NutsAnd Bolts, etc.
(Do not rename .html, use .htm for extension.)
Also Notepad++ can modify existing (renamed) .js and .htm files.
I would set up a project file, (BoxMaker?), easy to find on the hard drive, or USB drive, or even microsoft OneDrive.
Copy promising files such as the three (times 2) files mentioned above, even rename them slightly, and edit them in Notepad++.
The .htm file has the list of fields. Part of the .js file tells MoI how and when to read and process the fields, and can ask the user to enter various values.
Response of geometry creation can be immediate, or there can be an Update button...

An .htm file can be run from Notepad++, for a simple view.
Work from a functioning script, making small modifications, and run in MoI, as a quick "debug." This will show the actual .htm in MoI screen...

Say change Box from interactive, to entry of fields...

- Brian
You could go the nodeeditor way as an alternative.
Max's excellent scripts tend to seem abbreviated and complex to myself...

The interactive Box scripts coding is pretty intimidating to myself.
The MoI API shows the Box Factories inputs, which is fairly simple...AND even has a 7 line .js script to draw a box. Just add the .htm interface to get the parameter values.
(20 units of width, length, and height...)

Example
//Draw a box
var factory = moi.command.createFactory( 'box' );
factory.setInput( 0, moi.vectorMath.createFrame() );
factory.setInput( 2, 20 );
factory.setInput( 3, 20 );
factory.setInput( 4, 20 );
factory.commit();

The extrude command has input 5 for Cap ends.

I do not see any input to cap only one side...
Maybe that could be a feature request?

The example in the API does not show the proper inputs for 5...
extrudefactory.setInput( 1, true ); //cap ends? yes>>>>Error, should be input 5 ???

- Brian

Found an answer here:
https://moi3d.com/forum/index.php?webtag=MOI&msg=9919.9
From 2 years ago.

BoxMaker

Boxmaker makes a rectangular box with thickened walls and thickened bottom.

This Example is for a box with wall and bottom thickness of 0.2 cm.
(Final version would have user control of dimensions.)

The Box's OD, (outer dimensions), are:
Height: 2cm OD, Width: 4cm OD, Depth: 3cm OD .

For inner dimensions, deduct 0.4cm from Width and 0.4cm from Depth,
and deduct 0.2cm from Height.

The Box sits on the xy plane, centered on the Origin.

1. Create Rectangle, with Rectangle Center command.
In Front View, place the center point at (x,y,z) coordinate
point ( 0, 0, 2 ), which will become top the center of final Box.
In Top View, place the corner point at ( 2, 1.5, 2 ).
This rectangle is at the future top of the box.
The rectangle may be styled black, or some other color.

2. Create Planar surface from the rectangle, and style surface cyan.
This surface will become the bottom of the box after move to z = 0.
Move the surface to z = 0, a coordinate decrease of -2cm.

3. Create a second Planar surface from the rectangle, and style it red.
Later, this surface will become the top edge of the box, and also it will become the interior surface of the box. (Liner)

4. In Front View, Extrude the rectangle down to z = 0, (-2cm).
Do NOT cap ends. Do NOT do Both sides. (Rectangle can be deleted.)

5. In 3D View, select red liner surface, and select MoI command
Offset > Inset. Check checkbox "Use Separate Height", and
set the Height to 1.8cm, Direction Inwards.
This creates the red lining and rim of the box.
Select all 11 faces, and Join to a Solid. (Or select some other automatic way.)

All of these commands can be formed in script, after the user selects the desired dimensions, without further manual selections. Maximum inset height can be calculated. The Views can be replaced with appropriate cPlanes or distances...

- Brian
Hopefully there are not too may minor errors in the above text :-)
Adjustments and changes can be pretty common sense. This is a guide to additional work that could be done...
Extrude tends to make names go away.
Well, I guess that similar procedures could make a heart shaped box also. Or round or oval?
Well, Length could be called Width, and former Width called Depth, or some such terminology...

Define user inputs needed:
1. Height, default 2cm OD.
2. Width, default 4cm OD.
3. Depth, default 3cm OD.
4. WallThickness, default 0.2cm.
5. BottomThickness, default 0.2cm.
6. Lid Thickness.

Build list (drop down list) of box types:
1. Rectangular
2. Circular
3. Elliptical
4. HeartShape
5. Polygonal sides.
6. Tapered (Will need extra code for removal of Top face, and less code for bottom.)
7. ?

Define categories of boxes:
1. Bottom
2. Lid which nests over bottom.

Select a sample script to act as a partial template .js and .htm.
Some good choices:
_ChainMaker script.
_EggOvoid3 script
_Power Cone Spiral

_ChainMaker has an Update button, so many dimensions can be entered, before the geometry is recalculated.

_EggOvoid2 has a Build type menu. Geometry is updated each time a dimension is changed. There are also sliders. (Another version has a presets menu.)

_EggOvoid2 is my initial pick for a script template.
Copy _EggOvoid2 .js and .htm to the BoxMaker directory, and load into Notepad++.
In Notepad++, copy ALL, (or desired portions), of _EggOvoid2.js, to the new _BoxMaker.js copy in Notepad++. Also copy desired portions of _EggOvoid2.htm, to the new _BoxMaker.htm file in Notepad++.
(Alternatively, an extra copy of the two template files can be renamed to _BoxMaker, and loaded into Notepad++)

Two view panels can be opened in Notepad++, for side by side views, and copying between two .htm files.

<<<<<<
(As an afterthought, most of Max's scripts utilize a lot of the .js code in the .htm file, do to old speed constraints. It is no longer necessary to put a bunch of the .js code in the .htm file. (Some of MoI's scripts do have a bit of .js code in the .htm file, for programming convenience and "ability".)>>>>>>

Edit the .htm file, and also the .js file.
Initially make the changes gradual, and minor and non-destructive.
The evolving _Boxmaker.js and _Boxmaker.htm files can be copied to the commands folder of MoI AppDate folder, and run in MoI, and so show progressive improvements, or script failure.
Keep lots of copies of evolving scripts, so as not to lose those versions which still function. If the script Zonks-Out when run, make corrections, or else revert to a former partially working copy.
It is hard to edit a variable in .htm file, and conform the other occurrences in .htm or .js.
After selecting text to find, or change, using Ctrl+h in Notepad++is very helpful.

An unfinished draft .htm attached.
Double click in file manager to see menu display.
(Windows 11, see in file manager window???)
My few years old computer is not compatible with Windows 11. Due to the lack of some security feature, and ?.
My 1 or 2 year old Dell computer has Windows 11 on it, currently at work..

- Brian

Alpha1 version is slightly improved, but still needs modifications. (I had uploaded a slightly older version, by mistake.)
p.s. I am an amateur programmer, so others have more skill, and better work habits, and better naming conventions...
(I may do a little more work the next evening...)

Hello.

I thank you very much for so many helpful replies. Please pardon for late respond since I've been quite busy lately.
I will study all of your post, and hopefully will be able to write my own script soon.

I really love MoI as much to this great forum with helpful people.

Sincerely.

I tried to run this in V4 (by entering "_BoxMakerAlpha1" in the input field at the bottom of UI), but nothing happens. Is there any prerequisite to run this? Or did I take it incorrectly?

Thank you very much in advance.

Hi Elang,

I will be interested in trying out the results of your programming.

So I had better move on to my other programming projects, for now at least, as it is your project.

Attached is an update of the .htm screen entry file, _BoxMakerAlpha2.htm, along with a bare bones, non-functional _BoxMakerAlpha2.js.
Load these two files into MoI AppData, command folder, to test out the .htm screen menu and dimension choices, in MoI. The script barely does anything as is.
>>>(Or you could load the scripts into the MoI Program directory with all of the stock MoI scripts, BUT using AppData is my preferred method.)
It features Sliders, with a range which the programmer decide the limits of.
Also, if a value is changed, clicking on the dimension label will reset to the default dimension.
The dropdown Build menu shows its entries.
The Done and Cancel buttons function.
It is a starting point for your BoxMaker script...

What is the minimum MyProgram.js and MyProgram.htm files to enable the testing of the simple .htm file in MoI?
(With the .js file not doing much)

The MyProgram.js file does not need much code, in order to permit rudimentary .htm testing.

Also attached are: _BoxMakerAlpha2MinTestJS.htm, and also _BoxMakerAlpha2MinTestJS.js script.
They can be loaded into MoI Appdata and run as a new script, as in 3rd paragraph above.

- Brian

Hi Elang,

Alpha1 version was just to view in Windows, or Edge or Chrome, but this will not show any MoI specific code...

See Alpha2 versions in previous posts.
The Min version is nearly the same as the Alpha2 version, except the .js file has even LESS code. So the Min version may be discarded.
The Alpha1.htm may also be discarded.

- Brian

Either MoI4 or MoI5 beta will allow trying out the .htm entry window with Alpha2 versions.
No Boxes will be build until a lot more coding is done...

I think you will need to add in the Rectangle factory, the Planar factory, the Move factory, the Extrude factory, the Inset factory, and the Join factory.
And also do some simple subtraction of Height minus BottomThickness for Inset distance.

I do not think that numpoints will be needed, unless a heart curve is drawn.
Or, A basic heart curve could be scaled??? for an input.
The various curves and surfaces, etc., will need to be identified by e.g. Name or Color, in order to be selected for the various steps.

Hi Brian,

I really appreciate the materials that you've post. I'm sure will have to know it very soon. The thing is, they seems to be a little bit too advanced for me (having the UI ready, etc).

I just found a discussion here regards scripts:
http://moi3d.com/forum/index.php?webtag=MOI&msg=7238.1

.. and the discussion there could be a good start for me: to draw objects using script like the following example from Martin.

script:
var factory = moi.command.createFactory( 'box' );
factory.setInput( 0, moi.vectorMath.createFrame() );
factory.setInput( 2, 20 );
factory.setInput( 3, 20 );
factory.setInput( 4, 20 );
factory.commit();

I think I could start learning from this humble beginning.

However, I can't find the right place to have the reference for each objects, i.e.: how to use moi.command.createFactory, what parameters needed, etc.

So, could you please point me the right direction?

Thank you very much in advance.

Hi Elang,

re:
> However, I can't find the right place to have the reference for each objects, i.e.: how to use
> moi.command.createFactory, what parameters needed, etc.

For using moi.command.createFactory(), the example you posted shows it, you pass it the string name of a factory, in what you posted that's 'box'.

In the regular box command the inputs to the box factory are filled in by picking a point to place the corner point and coordinate frame, and then the width, height, and extrusion values are filled in by either another point pick or by values that are typed in to edit fields.

In your example code it's setting values of 20 each for width, height, and extrusion.

If you instead had:

factory.setInput( 2, 30 ); // Input index 2 is width
factory.setInput( 3, 40 ); // input index 3 is height
factory.setInput( 4, 50 ); // input index 4 is extrusion

that would make a width of 30, a height of 40, and an extrusion of 50 units.

- Michael

Hi Michael,

So in general the setInput indexes is something that mimics the way we input them in Moi?

Still are there any reference list for each of the command? I'm hoping something like here:
https://learn.microsoft.com/en-us/dotnet/visual-basic/language-reference/functions/string-functions

... though a much simpler way is ok.

Thank you very much in advance.

Found something very interesting here:
http://moi3d.com/forum/index.php?webtag=MOI&msg=10720.5

Is this contains all object in Moi?

Hi Elang, I think there's a more up to date one here:
http://moi3d.com/forum/index.php?webtag=MOI&msg=10857.36

> Is this contains all object in Moi?

I think it has all of them at that point in time that it was made but it's from quite a while ago.


re:
> So in general the setInput indexes is something that mimics the way we input them in Moi?

Yes the regular commands fill in these same factory inputs, often times by connecting them to edit fields in the UI and also some inputs take x,y,z point values that are filled in by a pointpicker.

A script can just directly fill in the factory inputs instead which is what your example code there was doing.

- Michael