Screenshot of examples folder

[kler]

This PR contains a simple Python script which will launch each example (that contains a main.py) and take a screenshot of the page. In this way it's a little bit easier to grasp the example.

Screenshots (for examples that worked out of the box) are also added in this PR in a separate commit.

[falkoschindler]

Thank you for this pull request, @kler!

Adding screenshots certainly helps to get an idea of an example before running it. We have some concerns though:

• Right now you don't see the screenshot when opening an example folder like https://github.com/zauberzeug/nicegui/tree/2d1c9b8ee9f1400fad721e78ff25a5a96606934c/examples/chat_app. I mean, you have to click on screenshot.png to actually see it. A README.md like https://github.com/zauberzeug/nicegui/tree/2d1c9b8ee9f1400fad721e78ff25a5a96606934c/examples/ros2 would allow to show the screenshot right below the file list. But of course, it would require more work to also create Markdown files without overwriting existing readme files.
• The uniform screenshots size is far from ideal for most examples. I guess it would require manual interaction to find the right size for each example. But right now they just doesn't look nice.
• Placing screenshot files in the repository is a good starting point. But ideally we'd like to improve the "wall of boxes" https://nicegui.io/#examples with a visually more interesting gallery. Maybe we can integrate screenshots within those tiles or even readme files including screenshots as popups. Again, this will require more manual work.

So I propose the following plan:

• Regenerate screenshots manually to better fit the UI content.
  We can use test_startup.sh to launch (almost) all examples automatically.

• Add a README.md to every example folder, including at least

  • a title (from https://github.com/zauberzeug/nicegui/blob/main/website/examples.py)
  • a short description (from https://github.com/zauberzeug/nicegui/blob/main/website/examples.py, but using imperative mood for consistency)
  • an image pointing to the corresponding screenshot.png

  If there is already a readme file, the first line after the title should contain the short description. The remaining content can remain unchanged.

• Update examples.py to automatically load data from the examples folder, fetching title and description from the readme files.

• Improve the example tiles on the main page to somehow include screenshots. Popups might be a good start.

What do you think? Would you like to tackle some of these tasks?
If this isn't what you anticipated and you just wanted to add some PNGs, I would understand completely. Then I can try to look into it myself when I find some time.

Important: When working on repetitive changes to so many files, it's always a good idea to start with a few examples and discuss the resulting code and UX before doing the rest. This avoids doing the work multiple times.

[kler]

I think you're suggestions are excellent, I agree fully.
However I wasn't planning to put in that amount of work in the project as of now.

This was more of a half-ass effort in making the existing examples a little bit easier to grasp 😃
If you want to disregard this PR I understand.

A suggestion to anyone that would implement this feature would be to create a separate md (called screenshot.md or similar) exclusively for the screenshot, and then linking to this md inside the README.md, to avoid fiddling with the "main" README content.

[leocjj]

I just sent the PR #5044 to follow the proposed plan by @falkoschindler

[falkoschindler]

Let's close this PR in favor of PR #5044.