Hi Marco

>>ASAP I hope to start writing a UI plugin with some nice look and above all with good UX, in order to speed up things in NE (or...PE...Project Elephant).
Good news. What kind of interface you want to make?

Thanks Max for latest update,

Copy/Paste will be a productivity boon in general use, and...
ingeniously answers my call for a "make macro" function
by allowing to paste into a new macro, so kudos!

This is just a thought, but would it be possible to have a
"Copy & Remove" option (or "Cut" in Adobe nomenclature)?
It would be handy when cleaning up node circuitry, by copying out
groups of nodes to package into a macro, without then have to
reselect the same nodes to remove. If you agree that this would be
useful, then perhaps, sometime in the future this option could be included.

For now, I'm so happy with the new functionality, especially
Ctrl + drag copying! This is something that I have long desired.

Thanks again
James

P.S. >>Removed buttons icons (all icons generating on the fly)<<

This may be a dim witted question, but could explain this
or illustrate with image. I don't know what are "buttons icons"
The only things that would fit the description that I can see is:
"NEW","LOAD","SAVE" etc. but they have not been removed.

Hi Max.

@You : "...Good news. What kind of interface you want to make?..."

Well...I still don't know.

I have in mind some kind of simple "buttons driven" UI with expandable/collapsible grouping of buttons.

I want to start with a simple thing and to see how it works.

Something like this (please don't care about colors or icons, are only examples)



As you can see I wrote "dynamically generated" (also with icons if possible).

I will need to parse in some way the .js source code of P. Elephant to extract the names of the various nodes.

I think that with just this simple UI working with P. Elephant will be much, much faster.

Please let me know what do you think about it.

Cheers.

Marco (mkdm)

Hi Max.

P.s....

@Me : "..(also with icons if possible)..."

I think it's easily feasible for example assuming " icon file name.png = node name".
Icons could be placed into a folder inside the root of P.E.

Anyway...let me know.

Ciao!

James
>>This is just a thought, but would it be possible to have a "Copy & Remove" option (or "Cut" in Adobe nomenclature)?
I added this function today morning.

>>The only things that would fit the description that I can see is: "NEW","LOAD","SAVE" etc. but they have not been removed.
In v0.96 and earlier versions the icons was stored in /imgs directory as png files. In v0.97 this directory has been removed. Now NE engine draws icons automatically every time you you run it.
Now you can change color of the icons in colors.js file.

Marco
>> want to start with a simple thing and to see how it works. Something like this (please don't care about colors or icons, are only examples)
It's OK. Looks good. I'll make small change in init.js (or index.html) today, so you can add custom buttons and windows without making any changes in the core files.
I'll send you an example today evening.

>>I think it's easily feasible for example assuming " icon file name.png = node name". Icons could be placed into a folder inside the root of P.E.
Huge amount of separate png icons will affect on overall engine performance. Especially when you open NE window.
The better and more clear way is store the icons inside every node as base64 encoded image.

Hi Max.

@You : "...It's OK. Looks good....I'll make small change in init.js...I'll send you an example today evening."

PERFECT!!!

@You : "...The better and more clear way is store the icons inside every node as base64 encoded image...."

Ok, I agree. Every node must expose a property for the based64 image,
so I can read it in runtime during the generation of the graphical menu UI.

And each author of any node must fill that information.

Anyway, this should be optional.
If an author doesn't want to provide any icon for its node he is free to do that.
But if an author want the icon displayed for his node he must fill that property of the node with the based64 data.

Right ?


I stay tuned.

Ciao.

Hi Marco

Here a example of ui extension
Find this line in index.html

loadScripts('core','init');

and change it to

loadScripts('core','init, *');

after this modification NE will load all additional .js files in /core directory

Copy atteched file to /core

Hi Max.

Thank you very much!

ASAP I will study your code and starting to write my UI plugin.

Meanwhile, I want to inform you that I'm getting some strange errors with latest nodeeditor.v.0.97.2017.10.05,
but you already said that is unstable.

Also, as you can see, your UI example loads correctly only the very first time I open it in N.E.

Anyway, please check this video to see what's happening : http://take.ms/hOEL0


I don't know if this may help you but this is the shortcut definition in Moi's ini that I use to open N.E :

Alt+F2=script: moi.ui.createDialog( 'nodeeditor.v.0.97.2017.10.05/index.html', 'resizeable,defaultWidth:680,defaultHeight:420', moi.ui.mainWindow );

I stay tuned.

Thanks.

Marco (mkdm)

Hi Marco,

I just forgot how my loadScript function works :)
rename mylib.js to ext.mylib.js and change the line in index.html to loadScripts('core','init, ext.*');

Hi Max.

No problem. Thanks for the tip.

I hope in this weekend to start writing the UI plugin based on your example.
I still don't know what kind of style I want to use.
Anyway it will be minimalist and lightweight.

Obviously, before coding the entire plugin, I will try some prototype and I will ask you if it is good also for you, before I go any further.

Bye!

Hello Max, hello Marco,

some questions about the Icons:

Resolution: 64x64?
Format: png?
Colordepth: 8bit?
Stored in static member e.g.
function Point(){
Point.icon="iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AA....

Will it be excluded from storing in the *.nod file?

Examples for the Icon design - coloured or Grey to get a consistent look?

Thanks in advance
and have a nice day
Karsten

Hi Karsten.

I complete here the previous message.

IF MAX AGREE OF COURSE.

1) 64 x 64 : OK
2) format : Base64 png
3) 8 Bit : OK
4) "function Point() {Point.icon="iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AA...." : OK
5) Style : flat icons



Stay tuned.

Bye.

P.S.

Max, if you think that an overall size of 64x64 it too big for the icon we can use 56x56 or 48x48.

All other measures shall be proportionate to what I wrote in my previous message :

56x56 : roud corner : 7, centered icon : 42
48x48 : roud corner : 6, centered icon : 36

Hi Marco, Karsten

1) 64 x 64 : OK
I think 24x24 should be enough for LoDPI displays, and 48x48 or 64x64 for HiDPI.

2) format : Base64 png
OK

3) 8 Bit : OK
8-bit png doesn't support smooth transparency gradients. We can't make nice-looking rounded corners using 8-bit format.
So we should use 24-bit png ( or we can make smooth rounded corners using png8+html5+js )

4) "function Point() {Point.icon="iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AA...." : OK
function Point() { ... }
Point.icon ="iVBO...
OK

5) Style : flat icons
OK

P.S. Wait.. Does MoI support svg/svgz images? It's a best variant. If not, I would like to advise Michael add support of this format in v.4, and create new MoI interface using svgz icons.
In the nearest future all monitors will be 4k, so vector scalable icons will looks great.
..I'll check it today

Hi Max.

1) @You : "...I think 24x24 should be enough for LoDPI displays, and 48x48 or 64x64 for HiDPI."

Hmm...I think 24x24 it's too small. Maybe 32x32 is better. For HiDPI let's go for 64x64.
How to check DPI in Moi scripting ?

3) @You : "...we should use 24-bit png..."
Maybe there's a little misunderstanding :)
With 8 Bit I mean 8 bits per channel....so 24 bit.
OK

@You : "...P.S. Wait.. Does MoI support svg/svgz images? It's a best variant..."

Ok I wait.
I think, too, that SVG would be perfect.

Now I ask to Michael.

We'll catch up!

Ciao.

Marco (mkdm)

P.s.

Max, about SVG icons I asked to Michael at http://moi3d.com/forum/index.php?webtag=MOI&msg=8613.1

Bye.

Hi Marco,

I updated lib example. Now it can add a nodes.

>>Hmm...I think 24x24 it's too small. Maybe 32x32 is better.
You are free to use any icon size :) We can change it anytime we want.

Unfortunatelly, svg is not supported by MoI, so we should use png.
Maybe later we will make our own vector icon format for NE.
I think it is not bad idea for a plain design icons. We could draw a node icon and convert it to a compact data string.
It will be much smaller than base64 encoded png and can be exported directly from MoI.

Hi Max.

Thanks a lot for this new updated lib! Great job!

But...in this way you've taken all the fun to coding on my own from scratch :)

Anyway...I'm going to use you example code as a solid base to build a new UI for that left panel.

Ok. For the icon size I will go for this solution :

1) If you want, during my spare time, I can design all icons for all standard nodes of NE.
I will design using Affinity Designer, a very powerful vector editor, therefore I won't have any problem with scaling and I will be able to export the icons at any resolution and size.

2) I will design the icons in flat style with these dimensions :
Dark grey rounded box 32x32 px round radius 4px color Hex 373737.
Inner icon max 24x24 flat white or bicolor

This is a real size example :



We can always decide to export the icons from Affinity with different sizes if we see that 32x32 is not good.

Is it OK for you ? if yes I can start the creation of icons and js coding.

3) @You : "...I think it is not bad idea for a plain design icons. We could draw a node icon and convert it to a compact data string.
It will be much smaller than base64 encoded png and can be exported directly from MoI."

I'm sorry but I didn't understand what you mean. Could you please be more clear ?

Thanks a lot and have a nice day.

We'll catch up.

Ciao.

Hi max.

I's sorry if I ping you again but I'm waiting your response before I go any further with icon designing and JS coding for the new NE ui.

My question is at : http://moi3d.com/forum/index.php?webtag=MOI&msg=7713.670

Please, let me know.

Bye.