forked from custom-cards/boilerplate-card
-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
567 additions
and
251 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,8 @@ | ||
| resources: | ||
| - url: http://127.0.0.1:5000/boilerplate-card.js | ||
| - url: http://127.0.0.1:5000/mm2-clock-card.js | ||
| type: module | ||
| views: | ||
| - cards: | ||
| - type: custom:boilerplate-card | ||
| name: Boilerplate Card Development | ||
| entity: sun.sun | ||
| test_gui: true | ||
| - type: custom:mm2-clock-card | ||
| name: MM2 Clock Card | ||
| displayType: both |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,119 +1,30 @@ | ||
| # Boilerplate Card by [@iantrich](https://www.github.com/iantrich) | ||
| # MM2 Clock Card by [@shbatm](https://www.github.com/shbatm) | ||
|
|
||
| A community driven boilerplate of best practices for Home Assistant Lovelace custom cards | ||
| Digital/Analog Clock Card for Home Assistant Lovelace based on the [MagicMirror2](https://magicmirror.builders/) Clock | ||
|
|
||
| [![GitHub Release][releases-shield]][releases] | ||
| [![License][license-shield]](LICENSE.md) | ||
| [](https://github.com/custom-components/hacs) | ||
| This is a direct port of the [MagicMirror2 Clock](https://github.com/MichMich/MagicMirror/tree/master/modules/default/clock) to TypeScript and the Home Assistant card. Credit goes to the original contributers to that project and module. | ||
|
|
||
| ![Project Maintenance][maintenance-shield] | ||
| [![GitHub Activity][commits-shield]][commits] | ||
|
|
||
| [![Discord][discord-shield]][discord] | ||
| [![Community Forum][forum-shield]][forum] | ||
|
|
||
| ## Support | ||
|
|
||
| Hey dude! Help me out for a couple of :beers: or a :coffee:! | ||
|
|
||
| [](https://www.buymeacoffee.com/zJtVxUAgH) | ||
| ## Screenshot | ||
|  | ||
|
|
||
| ## Options | ||
|
|
||
| | Name | Type | Requirement | Description | Default | | ||
| | ----------------- | ------- | ------------ | ------------------------------------------- | ------------------- | | ||
| | type | string | **Required** | `custom:boilerplate-card` | | ||
| | name | string | **Optional** | Card name | `Boilerplate` | | ||
| | show_error | boolean | **Optional** | Show what an error looks like for the card | `false` | | ||
| | show_warning | boolean | **Optional** | Show what a warning looks like for the card | `false` | | ||
| | entity | string | **Optional** | Home Assistant entity ID. | `none` | | ||
| | tap_action | object | **Optional** | Action to take on tap | `action: more-info` | | ||
| | hold_action | object | **Optional** | Action to take on hold | `none` | | ||
| | double_tap_action | object | **Optional** | Action to take on hold | `none` | | ||
|
|
||
| ## Action Options | ||
|
|
||
| | Name | Type | Requirement | Description | Default | | ||
| | --------------- | ------ | ------------ | -------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | ||
| | action | string | **Required** | Action to perform (more-info, toggle, call-service, navigate url, none) | `more-info` | | ||
| | navigation_path | string | **Optional** | Path to navigate to (e.g. /lovelace/0/) when action defined as navigate | `none` | | ||
| | url | string | **Optional** | URL to open on click when action is url. The URL will open in a new tab | `none` | | ||
| | service | string | **Optional** | Service to call (e.g. media_player.media_play_pause) when action defined as call-service | `none` | | ||
| | service_data | object | **Optional** | Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service | `none` | | ||
| | haptic | string | **Optional** | Haptic feedback for the [Beta IOS App](http://home-assistant.io/ios/beta) _success, warning, failure, light, medium, heavy, selection_ | `none` | | ||
| | repeat | number | **Optional** | How often to repeat the `hold_action` in milliseconds. | `non` | | ||
|
|
||
| ## Starting a new card from boilerplate-card | ||
|
|
||
| ### Step 1 | ||
|
|
||
| Clone this repository | ||
|
|
||
| ### Step 2 | ||
|
|
||
| Install necessary modules (verified to work in node 8.x) | ||
| `yarn install` or `npm install` | ||
|
|
||
|
|
||
| ### Step 3 | ||
|
|
||
| Do a test lint & build on the project. You can see available scripts in the package.json | ||
| `npm run build` | ||
|
|
||
| ### Step 4 | ||
|
|
||
| Search the repository for all instances of "TODO" and handle the changes/suggestions | ||
|
|
||
| ### Step 5 | ||
|
|
||
| Customize to suit your needs and contribute it back to the community | ||
|
|
||
|
|
||
| ## Starting a new card from boilerplate-card with [devcontainer][devcontainer] | ||
|
|
||
| Note: this is available only in vscode ensure you have the [Remote Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) extension installed. | ||
|
|
||
| 1. Fork and clone the repository. | ||
| 2. Open a [devcontainer][devcontainer] terminal and run `npm start` when it's ready. | ||
| 3. The compiled `.js` file will be accessible on | ||
| `http://127.0.0.1:5000/boilerplate-card.js`. | ||
| 4. On a running Home Assistant installation add this to your Lovelace | ||
| `resources:` | ||
|
|
||
| ```yaml | ||
| - url: "http://127.0.0.1:5000/boilerplate-card.js" | ||
| type: module | ||
| ``` | ||
| _Change "127.0.0.1" to the IP of your development machine._ | ||
| ### Bonus | ||
| If you need a fresh test instance you can install a fresh Home Assistant instance inside the devcontainer as well. | ||
| 1. Run the command `dc start`. | ||
| 2. Home Assistant will install and will eventually be running on port `9123` | ||
|
|
||
| ## [Troubleshooting](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins) | ||
| NB This will not work with node 9.x if you see the following errors try installing node 8.10.0 | ||
| ```yarn install | ||
| yarn install v1.3.2 | ||
| [1/4] 🔍 Resolving packages... | ||
| warning [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-commonjs. | ||
| [2/4] 🚚 Fetching packages... | ||
| error @typescript-eslint/[email protected]: The engine "node" is incompatible with this module. Expected version "^8.10.0 || ^10.13.0 || >=11.10.1". | ||
| error Found incompatible module | ||
| info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command. | ||
| ``` | ||
|
|
||
| [commits-shield]: https://img.shields.io/github/commit-activity/y/custom-cards/boilerplate-card.svg?style=for-the-badge | ||
| [commits]: https://github.com/custom-cards/boilerplate-card/commits/master | ||
| [devcontainer]: https://code.visualstudio.com/docs/remote/containers | ||
| [discord]: https://discord.gg/5e9yvq | ||
| [discord-shield]: https://img.shields.io/discord/330944238910963714.svg?style=for-the-badge | ||
| [forum-shield]: https://img.shields.io/badge/community-forum-brightgreen.svg?style=for-the-badge | ||
| [forum]: https://community.home-assistant.io/c/projects/frontend | ||
| [license-shield]: https://img.shields.io/github/license/custom-cards/boilerplate-card.svg?style=for-the-badge | ||
| [maintenance-shield]: https://img.shields.io/maintenance/yes/2019.svg?style=for-the-badge | ||
| [releases-shield]: https://img.shields.io/github/release/custom-cards/boilerplate-card.svg?style=for-the-badge | ||
| [releases]: https://github.com/custom-cards/boilerplate-card/releases | ||
| The following properties can be configured: | ||
|
|
||
| | Option | Description | ||
| | ----------------- | ----------- | ||
| | `timeFormat` | Use 12 or 24 hour format. <br><br> **Possible values:** `12` or `24` <br> **Default value:** uses value of _config.timeFormat_ | ||
| | `displaySeconds` | Display seconds. <br><br> **Possible values:** `true` or `false` <br> **Default value:** `true` | ||
| | `showPeriod` | Show the period (am/pm) with 12 hour format. <br><br> **Possible values:** `true` or `false` <br> **Default value:** `true` | ||
| | `showPeriodUpper` | Show the period (AM/PM) with 12 hour format as uppercase. <br><br> **Possible values:** `true` or `false` <br> **Default value:** `false` | ||
| | `clockBold` | Remove the colon and bold the minutes to make a more modern look. <br><br> **Possible values:** `true` or `false` <br> **Default value:** `false` | ||
| | `showDate` | Turn off or on the Date section. <br><br> **Possible values:** `true` or `false` <br> **Default value:** `true` | ||
| | `showWeek` | Turn off or on the Week section. <br><br> **Possible values:** `true` or `false` <br> **Default value:** `false` | ||
| | `dateFormat` | Configure the date format as you like. <br><br> **Possible values:** [Docs](http://momentjs.com/docs/#/displaying/format/) <br> **Default value:** `"dddd, LL"` | ||
| | `displayType` | Display a digital clock, analog clock, or both together. <br><br> **Possible values:** `digital`, `analog`, or `both` <br> **Default value:** `digital` | ||
| | `analogSize` | **Specific to the analog clock.** Defines how large the analog display is. <br><br> **Possible values:** A positive number of pixels` <br> **Default value:** `200px` | ||
| | `analogFace` | **Specific to the analog clock.** Specifies which clock face to use. <br><br> **Possible values:** `simple` for a simple border, `none` for no face or border, or `face-###` (where ### is currently a value between 001 and 012, inclusive) <br> **Default value:** `simple` | ||
| | `secondsColor` | **Specific to the analog clock.** Specifies what color to make the 'seconds' hand. <br><br> **Possible values:** `any HTML RGB Color` <br> **Default value:** `#888888` | ||
| | `analogPlacement` | **Specific to the analog clock. _(requires displayType set to `'both'`)_** Specifies where the analog clock is in relation to the digital clock <br><br> **Possible values:** `top`, `right`, `bottom`, or `left` <br> **Default value:** `bottom` | ||
| | `analogShowDate` | **Specific to the analog clock.** If the clock is used as a separate module and set to analog only, this configures whether a date is also displayed with the clock. <br><br> **Possible values:** `false`, `top`, or `bottom` <br> **Default value:** `top` | ||
| | `timezone` | Specific a timezone to show clock. <br><br> **Possible examples values:** `America/New_York`, `America/Santiago`, `Etc/GMT+10` <br> **Default value:** `none`. See more informations about configuration value [here](https://momentjs.com/timezone/docs/#/data-formats/packed-format/) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| { | ||
| "name": "Boilerplate Card", | ||
| "name": "MM2 Clock Card", | ||
| "render_readme": true, | ||
| "filename": "boilerplate-card.js" | ||
| "filename": "mm2-clock-card.js" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,27 @@ | ||
| { | ||
| "name": "boilerplate-card", | ||
| "name": "MM2 Clock Card", | ||
| "version": "1.1.7", | ||
| "description": "Lovelace boilerplate-card", | ||
| "description": "Lovelace Clock Card (Ported from MagicMirror2)", | ||
| "keywords": [ | ||
| "home-assistant", | ||
| "homeassistant", | ||
| "hass", | ||
| "automation", | ||
| "clock", | ||
| "lovelace", | ||
| "custom-cards" | ||
| ], | ||
| "module": "boilerplate-card.js", | ||
| "repository": "[email protected]:custom_cards/boilerplate-card.git", | ||
| "author": "Ian Richardson <iantrich@gmail.com>", | ||
| "module": "mm2-clock-card.js", | ||
| "repository": "[email protected]:shbatm/mm2-clock-card.git", | ||
| "author": "shbatm (support@shbatm.com)", | ||
| "license": "MIT", | ||
| "dependencies": { | ||
| "custom-card-helpers": "^1.3.9", | ||
| "home-assistant-js-websocket": "^4.4.0", | ||
| "lit-element": "^2.2.1", | ||
| "lit-html": "^1.1.2" | ||
| "lit-html": "^1.1.2", | ||
| "moment": "^2.24.0", | ||
| "moment-timezone": "^0.5.27" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/core": "^7.6.4", | ||
|
|
@@ -32,11 +35,14 @@ | |
| "eslint-config-prettier": "^6.5.0", | ||
| "eslint-plugin-import": "^2.18.2", | ||
| "eslint-plugin-prettier": "^3.1.1", | ||
| "postcss-preset-env": "^6.7.0", | ||
| "prettier": "^1.18.2", | ||
| "rollup": "^1.26.0", | ||
| "rollup-plugin-babel": "^4.3.3", | ||
| "rollup-plugin-commonjs": "^10.1.0", | ||
| "rollup-plugin-node-resolve": "^5.2.0", | ||
| "rollup-plugin-postcss": "^2.0.6", | ||
| "rollup-plugin-postcss-lit": "^0.2.1", | ||
| "rollup-plugin-serve": "^1.0.1", | ||
| "rollup-plugin-terser": "^5.1.2", | ||
| "rollup-plugin-typescript2": "^0.24.3", | ||
|
|
@@ -46,7 +52,7 @@ | |
| "scripts": { | ||
| "start": "rollup -c --watch", | ||
| "build": "npm run lint && npm run rollup", | ||
| "lint": "eslint src/*.ts", | ||
| "lint": "eslint src/*.ts --fix", | ||
| "rollup": "rollup -c" | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.