www/screenshots/README.md
<!-- Header -->
[link-profile]:https://github.com/renemarc
[link-repo]:https://github.com/renemarc/home-assistant-config
<a name="top"></a>
<code>[renemarc][link-profile] / **[home-assistant-config][link-repo]** / [www](..) / **screenshots** /</code>
<p align="right"><sub><strong><a href="https://github.com/renemarc/home-assistant-config">🏠 Home Assistant configuration for a smart-looking place! 😎</a><br>Be sure to <a href="#" title="star">⭐️</a> or <a href="#" title="fork">🔱</a> this repo!</strong></sub></p>
<!-- Hero -->
<figure>
<div align="center">
<a href="#sensors-groups" title="Sensors groups"><img src="group-climate.png" alt="Climate Control group" width="140"></a>
<a href="#cards" title="Cards"><img src="card-aurora.png" alt="Nanoleaf Aurora card" width="140"></a>
<a href="#area-groups" title="Area groups"><img src="group-kitchen.png" alt="Kitchen group" width="140"></a>
<a href="#various" title="Various"><img src="group-modes.png" alt="Modes group" width="140"></a>
</div>
<div align="center">
<a href="#menus" title="Menus"><img src="menu-home.png" alt="Home" width="280"></a>
</div>
</figure>
<h1 align="center">Screenshots</h1>
Screenshots of UI elements features in this repository. A [screenshot making guide](#screenshot-making-guide) is available below.
## Cards
<div align="center">
<figure>
<div>
<img src="card-warning.png" alt="Warning card" title="Normal theme" width="325">
<img src="card-warning-dark.png" alt="Warning card (dark theme)" title="Dark theme" width="325">
</div>
<figcaption>
<p><strong>Warning card.</strong></p>
</figcaption>
</figure>
</div>
<div align="center">
<figure>
<div>
<img src="card-critical.png" alt="Critical card" title="Normal theme" width="325">
<img src="card-critical-dark.png" alt="Critical card (dark theme)" title="Dark theme" width="325">
</div>
<figcaption>
<p><strong>Critical card.</strong></p>
</figcaption>
</figure>
</div>
<div align="center">
<figure>
<div>
<img src="card-secondary.png" alt="Secondary Title card" title="Secondary Title" width="325">
</div>
<figcaption>
<p><strong>Secondary Title card, used to replace the sensor name with the temperature's value.</strong></p>
</figcaption>
</figure>
</div>
<div align="center">
<figure>
<div>
<img src="card-lifx.png" alt="LIFX+ card" title="LIFX light control" width="325">
</div>
<figcaption>
<p><strong>LIFX light control.</strong></p>
</figcaption>
</figure>
</div>
<div align="center">
<figure>
<div>
<img src="card-lightpack.png" alt="Lightpack card" title="Lightpack control" width="325">
</div>
<figcaption>
<p><strong>Lightpack control.</strong></p>
</figcaption>
</figure>
</div>
<div align="center">
<figure>
<div>
<img src="card-limitlessled.png" alt="LimitlessLED card" title="LimitlessLED control" width="325">
</div>
<figcaption>
<p><strong>LimitlessLED control.</strong></p>
</figcaption>
</figure>
</div>
<div align="center">
<figure>
<div>
<img src="card-aurora.png" alt="Nanoleaf Aurora card" title="Nanoleaf Aurora control" width="325">
</div>
<figcaption>
<p><strong>Nanoleaf Aurora control.</strong></p>
</figcaption>
</figure>
</div>
<div align="center">
<figure>
<div>
<img src="card-satellite-geocolour.jpg" alt="NOAA GeoColour satellite image" title="Normal theme" width="325">
<img src="card-satellite-vapour.jpg" alt="NOAA Water Vapour satellite image" title="Normal theme" width="325">
</div>
<figcaption>
<p><strong>NOAA satellite images for North-America's East Coast.</strong></p>
</figcaption>
</figure>
</div>
<p align="right"><a href="#top" title="Back to top">🔝</a></p>
## Area groups
<div align="center">
<figure>
<div>
<img src="group-kitchen.png" alt="Kitchen group" title="Normal theme" width="325">
<img src="group-kitchen-dark.png" alt="Humidity group (dark theme)" title="Dark theme" width="325">
</div>
<figcaption>
<p><strong>Area group.</strong></p>
</figcaption>
</figure>
</div>
<div align="center">
<figure>
<div>
<img src="group-ceiling.png" alt="Ceiling Wash lights group" title="Normal theme" width="325">
<img src="group-ceiling-dark.png" alt="Ceiling Wash lights group (dark theme)" title="Dark theme" width="325">
</div>
<figcaption>
<p><strong>Ceiling Wash Light group.</strong></p>
</figcaption>
</figure>
</div>
<div align="center">
<figure>
<div>
<img src="group-lounge.png" alt="Lounge group" title="Normal theme" width="325">
<img src="group-lounge-dark.png" alt="Lounge group (dark theme)" title="Dark theme" width="325">
</div>
<figcaption>
<p><strong>Lounge group.</strong></p>
</figcaption>
</figure>
</div>
<div align="center">
<figure>
<div>
<img src="group-bedroom.png" alt="Bedroom group" title="Normal theme" width="325">
<img src="group-bedroom-dark.png" alt="Bedroom group (dark theme)" title="Dark theme" width="325">
</div>
<figcaption>
<p><strong>Bedroom group.</strong></p>
</figcaption>
</figure>
</div>
<div align="center">
<figure>
<div>
<img src="group-washroom.png" alt="Washroom group" title="Normal theme" width="325">
<img src="group-washroom-dark.png" alt="Washroom group (dark theme)" title="Dark theme" width="325">
</div>
<figcaption>
<p><strong>Washroom group.</strong></p>
</figcaption>
</figure>
</div>
<p align="right"><a href="#top" title="Back to top">🔝</a></p>
## Sensors groups
<div align="center">
<figure>
<div>
<img src="group-climate.png" alt="Climate Control group" title="Normal theme" width="325">
<img src="group-climate-dark.png" alt="Climate Control group (dark theme)" title="Dark theme" width="325">
</div>
<figcaption>
<p><strong>Climate Control group.</strong></p>
</figcaption>
</figure>
<figure>
<div>
<img src="group-humidity.png" alt="Humidity group" width="325" title="Normal theme">
<img src="group-humidity-dark.png" alt="Humidity group (dark theme)" title="Dark theme" width="325">
</div>
<figcaption>
<p><strong>Humidity group.</strong></p>
</figcaption>
</figure>
<figure>
<div>
<img src="group-temperature.png" alt="Temperature group" title="Normal theme" width="325">
<img src="group-temperature-dark.png" alt="Temperature group (dark theme)" title="Dark theme" width="325">
</div>
<figcaption>
<p><strong>Temperature group.</strong></p>
</figcaption>
</figure>
</div>
<div align="center">
<figure>
<div>
<img src="group-battery.png" alt="Battery Levels group" title="Normal theme" width="325">
<img src="group-battery-dark.png" alt="Battery Levels group (dark theme)" title="Dark theme" width="325">
</div>
<figcaption>
<p><strong>Battery Levels group.</strong></p>
</figcaption>
</figure>
</div>
<div align="center">
<figure>
<div>
<img src="group-atmosphere.png" alt="Atmospheric Safety group" title="Normal theme" width="325">
<img src="group-atmosphere-dark.png" alt="Atmospheric Safety group (dark theme)" title="Dark theme" width="325">
</div>
<figcaption>
<p><strong>Atmospheric Safety group.</strong></p>
</figcaption>
</figure>
</div>
<div align="center">
<figure>
<div>
<img src="group-transit.png" alt="Public Transit group" title="Normal theme" width="325">
<img src="group-transit-dark.png" alt="Public Transit group (dark theme)" title="Dark theme" width="325">
</div>
<figcaption>
<p><strong>Public Transit group.</strong></p>
</figcaption>
</figure>
</div>
<div align="center">
<figure>
<div>
<img src="group-network.png" alt="Network group" title="Normal theme" width="325">
<img src="group-network-dark.png" alt="Network group (dark theme)" title="Dark theme" width="325">
</div>
<figcaption>
<p><strong>Network group.</strong></p>
</figcaption>
</figure>
</div>
<div align="center">
<figure>
<div>
<img src="group-security.png" alt="Security group" title="Normal theme" width="325">
<img src="group-security-dark.png" alt="Security group (dark theme)" title="Dark theme" width="325">
</div>
<figcaption>
<p><strong>Security group.</strong></p>
</figcaption>
</figure>
</div>
<div align="center">
<figure>
<div>
<img src="group-system.png" alt="System group" title="Normal theme" width="325">
<img src="group-system-dark.png" alt="System group (dark theme)" title="Dark theme" width="325">
</div>
<figcaption>
<p><strong>System group.</strong></p>
</figcaption>
</figure>
</div>
<div align="center">
<figure>
<div>
<img src="group-weather.png" alt="Today's Weather group" title="Normal theme" width="325">
<img src="group-weather-dark.png" alt="Today's Weather group (dark theme)" title="Dark theme" width="325">
</div>
<div>
<img src="group-forecast.png" alt="Weekly Forecast group" title="Normal theme" width="325">
<img src="group-forecast-dark.png" alt="Weekly Forecast group (dark theme)" title="Dark theme" width="325">
</div>
<figcaption>
<p><strong>Weather groups.</strong></p>
</figcaption>
</figure>
</div>
<div align="center">
<figure>
<div>
<img src="group-calendar.png" alt="Calendar group" title="Normal theme" width="325">
<img src="group-calendar-dark.png" alt="Calendar group (dark theme)" title="Dark theme" width="325">
</div>
<figcaption>
<p><strong>Calendar group.</strong></p>
</figcaption>
</figure>
</div>
<p align="right"><a href="#top" title="Back to top">🔝</a></p>
## Menus
<div align="center">
<figure>
<div>
<img src="menu-home.png" alt="Home" title="Home" width="650">
</div>
<div>
<img src="menu-switchboard.png" alt="Switchboard" title="Switchboard" width="650">
</div>
<div>
<img src="menu-weather.png" alt="Weather" title="Weather" width="650">
</div>
<div>
<img src="menu-status.png" alt="Status" title="Status" width="650">
</div>
<div>
<img src="menu-configuration.png" alt="Configuration" title="Configuration" width="650">
</div>
<figcaption>
<p><strong>Menus.</strong></p>
</figcaption>
</figure>
</div>
<p align="right"><a href="#top" title="Back to top">🔝</a></p>
## Various
<div align="center">
<figure>
<div>
<img src="group-actions.png" alt="Actions group" title="Normal theme" width="325">
<img src="group-actions-dark.png" alt="Actions group (dark theme)" title="Dark theme" width="325">
</div>
<figcaption>
<p><strong>Actions group.</strong></p>
</figcaption>
</figure>
</div>
<div align="center">
<figure>
<div>
<img src="group-configuration.png" alt="Configuration group" title="Normal theme" width="325">
<img src="group-configuration-dark.png" alt="Configuration group (dark theme)" title="Dark theme" width="325">
</div>
<figcaption>
<p><strong>Configuration group.</strong></p>
</figcaption>
</figure>
</div>
<div align="center">
<figure>
<div>
<img src="notification-humidity.png" alt="Humidity notification" title="Normal theme" width="325">
<img src="notification-humidity-dark.png" alt="Humidity notification (dark theme)" title="Dark theme" width="325">
</div>
<figcaption>
<p><strong>Notifications.</strong></p>
</figcaption>
</figure>
</div>
<div align="center">
<figure>
<div>
<img src="group-modes.png" alt="Modes group" title="Normal theme" width="325">
<img src="group-modes-dark.png" alt="Modes group (dark theme)" title="Dark theme" width="325">
</div>
<figcaption>
<p><strong>Modes group.</strong></p>
</figcaption>
</figure>
</div>
<div align="center">
<figure>
<div>
<img src="group-presence.png" alt="Presence group" title="Normal theme" width="325">
<img src="group-presence-dark.png" alt="Presence group (dark theme)" title="Dark theme" width="325">
</div>
<figcaption>
<p><strong>Presence group.</strong></p>
</figcaption>
</figure>
</div>
<p align="right"><a href="#top" title="Back to top">🔝</a></p>
## Screenshot making guide
These are the steps I used to make these screenshots and animated GIFs. The resulting web-optimized retina images are then embeded at half-width in the README.md files to make them look regular size, while keeping their sharpness on high-resolution screens withouth requiring too much bandwidth. These steps can also be performed on a regular-resolution screen, ideally while zoomed at %200.
### UI groups
1. Take rough screenshot on retina/high-resolution screen.
2. Clean up screenshot in an image editor:
- Resize canvas to 650 pixels wide.
- Remove identifying information.
- Save in non-compressed format for reference (PNG, PSD, BMP...)
3. Export as web-optimized PNG.
4. Use [TinyPNG](https://tinypng.com) to compress web-optimized PNG further.
### HADashboard static image
1. Take rough screenshot on retina/high-resolution screen. I used Firefox @ 80% zoom on a MacBook Pro 13".
2. Clean up screenshot in an image editor:
- Resize canvas to large-enough format, say 2000×1212.
- Uniformize elements with other screenshots.
- Remove identifying information.
- Replace copyrighted images with public domain placeholders.
- Save in non-compressed format for reference (PNG, PSD, BMP...)
3. Export as web-optimized PNG.
4. Use [TinyPNG](https://tinypng.com) to compress web-optimized PNG further.
### HADashboard animated GIF
1. Take rough screenshot on retina/high-resolution screen. I used Firefox @ 80% zoom on a MacBook Pro 13".
2. Clean up screenshot in an image editor:
- Resize canvas to large-enough format, say 2000×1212.
- Uniformize elements with other screenshots.
- Remove identifying information.
- Replace copyrighted images with public domain placeholders.
3. Save as regular PNG.
4. Create animation with other PNGs using [PicGIF](http://www.pearlmountainsoft.com/picgif/) or other animated GIF-making software or web app.
- Export as non-optimzed GIF at x1080 resolution, say 1782x1080.
5. If needed, use [ImageMagick](https://www.imagemagick.org/) to make it loop indefinitely:
`mogrify -loop 0 dashboard-example-1080.gif`
6. Use [ezgif.com](https://ezgif.com/optimize) to compress animated GIF at 35%.
<!-- Footer -->
<p align="right"><a href="#top" title="Back to top">🔝</a></p>
<p align="center"><strong>Don't forget to <a href="#" title="star">⭐️</a> or <a href="#" title="fork">🔱</a> this repo! 😃</strong></p>
[🔙 Back to `/www/`](../)
[🏠 Home][link-repo]