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.