Show a screenshot per example on the website

[leocjj]

Motivation

There is an open Enhancement in NiceGUI Wishlist project No. 10: Show a screenshot per example on the website

PR #4391 was created but has requested changes, so I'm creating this new PR to follow the proposed plan by @falkoschindler:

Implementation

This PR has a sample of 5 examples with screenshots and README files to get some feedback before doing the others 45.

Progress

• [5/50] Regenerate screenshots manually to better fit the UI content.
• [5/50] Add a README.md to every example folder, including at least: a title,
  a short description, an image pointing to the corresponding screenshot.png examples.py
• [0/1] Update examples.py to automatically load data from the examples folder, fetching title and description from the readme files.
• [0/50] Improve the example tiles on the main page to somehow include screenshots. Popups might be a good start.

[falkoschindler]

Thank you for the initiative to improve the example tiles, @leocjj! Starting with a few examples only before generating all 50 screenshots and markdown files is definitely a great idea.

Let's continue updating examples.py and the example tiles to see how the final result looks like. 🙂

[falkoschindler]

@leocjj I appreciate your work. But let's focus on how to integrate screenshots into the grid tiles on the website before spending more time and effort on creating screenshots. E.g. the orange title bars might look weird within the blueish theme, so we probably need to adjust them anyway.

[leocjj]

Hi @falkoschindler, I'm working on the grid tiles, this is how it looks like with the images.

You're right about the orange title bars, what do you think about this two styles? Second (AI interface) and third (Audio recorder) columns?

---

Here the same two styles for another example

Style 1:

Style 2

I prefer style 1 because for some examples the url is important

[rodja]

Maybe we just show the webpage without any chrome?

[falkoschindler]

I also think we can remove the frame and only show the page content. It helps to recognize an example and to get a brief impression of what to expect. But we don't need to show every detail.

Oh and right now the screenshots are 1920x1080 (but zoomed in?). Maybe a smaller size would be better? I would suggest something like 960x540 or something in this ballpark which nicely fits the content.

Apart from that we might want to use WEBP instead of PNG. It usually reduces the file size significantly without any quality loss. We just need to check if it works as part of a README.md on GitHub.

[leocjj]

Thank you for your feedback @rodja and @falkoschindler, what do you think about this? Images are now webp at 960x540 (average size of just 10 kb)

[falkoschindler]

I like it very much! 👍🏻
@rodja do you agree?

[rodja]

Yes. That could work. We can still ask our designer to make some fine-tuning to the appearance. But the cropped screenshots are the right way.

[leocjj]

Hi @falkoschindler and @rodja , it's almost done, do you want to take a look?
Please let me know in case of some feedback!

[evnchn]

Thank you for the PR. This may be a bit extra but see I'm cranking up the detection sensitivity all the way to 200% in hopes that when @falkoschindler returns from the holiday he can skip one "code quality" / "code refactoring" commit on this PR.

Please feel free to speak up if you think some of the comments don't apply. Thanks!

[leocjj]

Thanks @evnchn for your comments, commit sent!

[leocjj]

Hi @falkoschindler and @rodja, busy days I think, same for me!
Just let me know if I can help with something else in this PR, I really want to see this deployed!
Have a nice day!