From 03312aa5f7316e624474cb496b2c7485908d4efd Mon Sep 17 00:00:00 2001 From: Georgi Gardev Date: Sat, 9 May 2020 20:37:23 +0300 Subject: [PATCH] Add new screenshot and reorganize README. Add code examples --- README.md | 106 ++++++++++++++++++++++++++------------- examples/name_inside.png | Bin 0 -> 9353 bytes 2 files changed, 71 insertions(+), 35 deletions(-) create mode 100644 examples/name_inside.png diff --git a/README.md b/README.md index ec5eb14..ce1064c 100644 --- a/README.md +++ b/README.md @@ -14,24 +14,6 @@ This is a Time Picker Card for [Home Assistant](https://www.home-assistant.io/)' Requires an [Input Datetime](https://www.home-assistant.io/integrations/input_datetime/) that has time (`has_time: true`). -## Screenshots - -### Default config - card name shown, 24 hour mode - -![Default theme with card name](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/default_with_name.png) - -### Custom config - hidden card name, 12 hour mode - -![Default theme with no card name](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/default_without_name.png) - -### Custom config - hidden card name, 12 hour mode with a "single" hour mode picker - -![Default theme with single hour mode](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/single_hour_mode.png) - -### Using a custom theme - -![Custom theme](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/custom.png) - ## Installation Install using [HACS](https://hacs.xyz) or follow this [guide](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins) @@ -63,6 +45,59 @@ hide: name: false ``` +## Examples + +### Default config - card name shown, 24 hour mode + +![Default theme with card name](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/default_with_name.png) + +```yaml +type: 'custom:time-picker-card' +entity: input_datetime.alarm_time +``` + +### Custom config - hidden card name, 12 hour mode + +![Default theme with no card name](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/default_without_name.png) + +```yaml +type: 'custom:time-picker-card' +entity: input_datetime.alarm_time +hour_mode: 12 +hide: + name: true +``` + +### Custom config - hidden card name, 12 hour mode with a "single" hour mode picker + +![Default theme with single hour mode](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/single_hour_mode.png) + +```yaml +type: 'custom:time-picker-card' +entity: input_datetime.alarm_time +hour_mode: 12 +layout: + hour_mode: single +hide: + name: true +``` + +### Custom config - card name inside card and controls aligned right + +![Default theme with single hour mode](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/name_inside.png) + +```yaml +type: 'custom:time-picker-card' +entity: input_datetime.alarm_time +layout: + name: inside + align_controls: right +``` + +### Using a custom theme + +![Custom theme](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/custom.png) + ## Options | Name | Type | Requirement | Description | Default | @@ -78,9 +113,11 @@ hide: ## Layout Object -| Name | Type | Requirement | Description | Default | -| --------- | -------------------- | ------------ | -------------------------------------------------------------------------------------------------- | -------- | -| hour_mode | `single` or `double` | **Optional** | Whether to show both AM/PM or just the current mode. In `single` mode, tap the value to change it. | `double` | +| Name | Value | Requirement | Description | Default | +| -------------- | ------------------------- | ------------ | -------------------------------------------------------------------------------------------------- | -------- | +| hour_mode | `single`, `double` | **Optional** | Whether to show both AM/PM or just the current mode. In `single` mode, tap the value to change it. | `double` | +| align_controls | `left`, `center`, `right` | **Optional** | Horizontal alignment of the controls | `center` | +| name | `header`, `inside` | **Optional** | Whether to show the name as a header or inside the card | `header` | ## Hide Object @@ -109,21 +146,20 @@ you can use the following variables in your theme's config file: - [![GitHub][github-icon]][github-link] [GeorgeSG][github-link] - [![Twitter][twitter-icon]][twitter-link] [@georgesg92][twitter-link] -[hacs-shield]: https://img.shields.io/badge/HACS-Default-brightgreen.svg -[hacs-link]: https://github.com/custom-components/hacs -[downloads-shield]: https://img.shields.io/github/downloads/GeorgeSG/lovelace-time-picker-card/latest/total?color=brightgreen&logo=github -[downloads-link]: https://github.com/GeorgeSG/lovelace-time-picker-card/releases -[releases-shield]: https://img.shields.io/github/release/GeorgeSG/lovelace-time-picker-card.svg -[releases-link]: https://github.com/GeorgeSG/lovelace-time-picker-card/releases -[ci-shield]: https://img.shields.io/github/workflow/status/GeorgeSG/lovelace-time-picker-card/CI?label=CI&logo=github& -[ci-link]: https://github.com/GeorgeSG/lovelace-time-picker-card/actions?query=workflow%3ACI +[hacs-shield]: https://img.shields.io/badge/HACS-Default-brightgreen.svg +[hacs-link]: https://github.com/custom-components/hacs +[downloads-shield]: https://img.shields.io/github/downloads/GeorgeSG/lovelace-time-picker-card/latest/total?color=brightgreen&logo=github +[downloads-link]: https://github.com/GeorgeSG/lovelace-time-picker-card/releases +[releases-shield]: https://img.shields.io/github/release/GeorgeSG/lovelace-time-picker-card.svg +[releases-link]: https://github.com/GeorgeSG/lovelace-time-picker-card/releases +[ci-shield]: https://img.shields.io/github/workflow/status/GeorgeSG/lovelace-time-picker-card/CI?label=CI&logo=github& +[ci-link]: https://github.com/GeorgeSG/lovelace-time-picker-card/actions?query=workflow%3ACI [maintenance-shield]: https://img.shields.io/maintenance/yes/2020.svg -[maintenance-link]: https://github.com/GeorgeSG/lovelace-time-picker-card -[commits-shield]: https://img.shields.io/github/commit-activity/y/GeorgeSG/lovelace-time-picker-card -[commits-link]: https://github.com/GeorgeSG/lovelace-time-picker-card/commits/master -[license-shield]: https://img.shields.io/github/license/GeorgeSG/lovelace-time-picker-card?color=brightgreen -[license-link]: https://github.com/GeorgeSG/lovelace-time-picker-card/blob/master/LICENSE - +[maintenance-link]: https://github.com/GeorgeSG/lovelace-time-picker-card +[commits-shield]: https://img.shields.io/github/commit-activity/y/GeorgeSG/lovelace-time-picker-card +[commits-link]: https://github.com/GeorgeSG/lovelace-time-picker-card/commits/master +[license-shield]: https://img.shields.io/github/license/GeorgeSG/lovelace-time-picker-card?color=brightgreen +[license-link]: https://github.com/GeorgeSG/lovelace-time-picker-card/blob/master/LICENSE [github-icon]: http://i.imgur.com/9I6NRUm.png [github-link]: https://github.com/GeorgeSG/ [twitter-icon]: http://i.imgur.com/wWzX9uB.png diff --git a/examples/name_inside.png b/examples/name_inside.png new file mode 100644 index 0000000000000000000000000000000000000000..66198be20339ea916cdef468e550d75f0c0190fa GIT binary patch literal 9353 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 HO