Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make extra Content persistent #398

Merged
merged 28 commits into from
Aug 8, 2024
Merged

Conversation

luc-github
Copy link
Owner

Add Notifications message for extensions to inform then they are visible or not

Add div that is the place the cached content are stored because content are never destroyed but only hidden
Add elementsCache  tool to handle communication between container and content
Adapt fullscreen button with new logic for extra content
rearrange the class / style for consistency
Comment verbose debug log that are no more necessaries
Add fallback if error loading content
Clean up code
Adjust CSS
try remote refresh using getElementById
… way to allows to use context instead of direct access
Rewrite of FullScreen management   -WIP
rewrite of Container helper to be consistent across all APP
rewrite of FullScreenButton and CloseButton- WIP
Simplify ID of extra content
Fix page does not show up
Add some debug
comment  events.off
Add some debug
Fix wrong autorefresh of iframe due to useState for visibility
Add notification of visibility state to extension
@luc-github luc-github merged commit aeeacd9 into 3.0 Aug 8, 2024
2 checks passed
@DivingDuck
Copy link

Hello @luc-github,
I want to test the new Gcode-Viewer. Can you please give me a hint how to install and use it?
Best regards,
DD

@luc-github
Copy link
Owner Author

Have a look to https://github.com/luc-github/ESP3D-WEBUI/tree/3.0/extensions
the package is there https://github.com/luc-github/ESP3D-WEBUI/tree/3.0/extensions/gcodeViewer/dist

the generic setup instructions are there : https://esp3d.io/ESP3D-WebUI/Version_3.X/documentation/extensions/
I did not do docs because usage is pretty basic - just load GCODE files

The detailed API is there : https://esp3d.io/ESP3D-WebUI/Version_3.X/documentation/api/extensions/

@DivingDuck
Copy link

Thanks for your fast answer. I was looking in the location but I was missing the installation pictures for extensions, there was only 3 icons with missing content. Now I see them again 🙂.
I'm still struggling a bit. I maybe do something wrong. Here is what I did:
I first upload the extension file to the flash memory:
esp3dgcodeviewer1

Then I add a additional pannel
esp3dgcodeviewer2

The result was:
esp3dgcodeviewer3

@luc-github
Copy link
Owner Author

Do not put the .gz in address

@DivingDuck
Copy link

DivingDuck commented Aug 20, 2024

Ha, I just got it running. It looks like I can't use *.gz files for this extension...
After uploading the file gcodeViewer.html and referencing this file to the extension I got a working view
esp3dgcodeviewer4

Edit:

Do not put the .gz in address

Even better.
Thank you very much for your help

@DivingDuck
Copy link

DivingDuck commented Aug 20, 2024

This is working nice and I like it.

Some impressions as feedback while I'm playing with the extension in Firefox (129.0.1v):

The auto rotation of the 3D model seems to be a little rough compared with the rotation speed done by using the mouse. Guess, this is due to the calculation time within the browser.

One thing I notice was that the origin 0,0,0 is placed in the back right instead of front left that most application use as reference. This is easily configurable via settings (thanks!). Maybe you want change the default so that peoples do not ask or complain for it all the time when they use the extension the first time. Same for top bottom view, the origin is in the top right corner instead of bottom left corner

I was initially a bit confused about where the model should be loaded as the usual way is using the file panel in the dashboard or via drag&drop. I got used to it. Supporting drag&drop in addition would be nice.

Regarding the GUI, comparing with the main GUI of ESP3D the items seems to be placed everywhere. One lonely menu item on the top two on the bottom and the quick view items on the top right side. When you resize the window w/o a model loaded the items for the different view buttons are floating sometimes to the top, to the right side or to the bottom (sometimes as well as two liner). The floating of the buttons are often not predictable:
esp3dgcodeviewer5
esp3dgcodeviewer6

It is better when I load a model, but there are also quite often the buttons flowing unpredictable. Sometimes the view buttons and layer sliders went somewhere where i can't see them or end in some funny views for the menu buttons/sliders (i.e. when the window on the right starts to be too small):
esp3dgcodeviewer7

The font sizes of the menu items change sometimes depending on the windows size (what is nice), but the font size for the slider descriptions do not change, this is maybe why the auto placing of the items seems to be a little confused. I don't know if it is easily possible to put the sliders in vertical and horizontal orientation to the model window right and bottom. If not, I would prefer a fixed location at the bottom instead of floating somewhere.

Perhaps grouping the menu items a little bit different can help: i.e. move the two buttons from the bottom to the top (there is a lot of space not used on the bottom for now). Move the file name in a second row and leave it alone. Helps maybe for the flow of the view buttons as well. In general it feels better having those buttons on the top and not on the right side or on the bottom of the window.

Edit: An additional idea, Use icons instead of view buttons with text, like often used in slicer and CAD software. This will save a lot of space and is easier to group nicely together.

Best regards, DD

@luc-github
Copy link
Owner Author

luc-github commented Aug 21, 2024

Thank you for your feedback:

About your first issue:
I will add a sanity check for people who left .gz in url this will avoid confusion and work all the time

About auto rotation:
Yes I agree , I have tried to slow down the speed but it is not as smooth as with mouse mouvement which do less calculations

About origin:
That is really depend of machine and I doubt I will get a consensus, default position will never satisfy people and because it is customizable I think we can live with it

About UI:
It is definitly not the best but it was ok during my tests, mitigating between using most space for rendering and using left space for controls
What resolution is your screen ?
on my side I have on panel:

image

And Page:
image

and full screen:
image

That said I did not manage portrait view yet - only landscape, and I just noticed I have a scrollbar in Full screen which should not happen, need to adjust css again,

the scrollbar on your screen should not be there so I am wondering what is your resolution to duplicate the issue

About drag & Drop
Yes I fully agree, it would be a nice addition

About icons of view button instead of text:
I know you can use cube and color the face to explain what face you press but that is not really clear for me
And in our case there is space so we can use it to display everything properly, it is just a matter of using css properly

I am not designer and this extension is more a Proof of Concept that the WebGL rendering can be done in less than13KB, more over, this my first project with 3D and WebGl so there are tons of improvement to be done for sure ...
I hope to get contribution for improvement.

I am waiting for your resolution and will spend some time to improve css, portrait support was planned, but I forget it, busy with others projects / issues - I will find some time for it.

Edit:
Webui v76 now handle .gz in address for local extra content

@DivingDuck
Copy link

Hello Luc,
Thank you for taking the time commenting my feed back in such a detail. Very kindly.

The screen solution on my test system is 1680x1050

I will add a sanity check for people who left .gz in url this will avoid confusion and work all the time

This works nicely 👍

I am not designer and this extension is more a Proof of Concept that the WebGL rendering can be done in less than13KB, more over, this my first project with 3D and WebGl so there are tons of improvement to be done for sure ...

Don't worry, I'm quite impressed about what you are implementing in the project. Really. All I wrote is under the impression to give a honest feedback from one user w/o any ulterior motive. I was a little surprised that there is no other feedback so fare.

Anyway, I did some more tests this morning with a bigger model (47 MB gcode). This time I add the panel view to the dashboard. Btw, I like this view very much. While loading and processing the model is nicely displayed with a process bar and more or less "fast", it took quite long (> 90 sec.) to show the model in the view w/o seeing that there are still some processes working for preparing the 3D view. After checking the process manager I understood what was going on. The memory consumption in Firefox increased up to 5.5 GB and the GPU uses additional 2.8 GB of memory in the graphic card. Bit's have to flow...
Guess there is no way to show this activity in a process bar like you did it for loading / processing a file so that a user know the system is still processing the data for the view.

I just recognize you pushed a new update while I'm writing this comment. You are so fast in updating your code 🙂

Best regards, DD

@DivingDuck
Copy link

I just recognize you pushed a new update while I'm writing this comment.

The page view is now much better and the buttons do not jump around when I resize the browser window. 👍

@luc-github
Copy link
Owner Author

You also should not see anymore a scrollbar - it should auto adjust size of canvas to avoid it, let me know if it happen

@DivingDuck
Copy link

It only happen if the browser window is too small, but this is ok as this indicate I need to resize the window better:

esp3dgcodeviewer8

Maybe the space below the bottom icons can be optimized a little bit.

@luc-github
Copy link
Owner Author

Yes looks like I was generous on each bottom margin it should be better with latest 77 I have just pushed

@DivingDuck
Copy link

Much better. 🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants