├── dist ├── bg.jpg └── quote-of-the-day-card.js ├── images ├── quote.PNG ├── quote.gif ├── quote.jpg └── yannick-pulver-ZwPuquZBnyM-unsplash.jpg ├── LICENSE └── README.md /dist/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dnguyen800/quote-of-the-day-card/HEAD/dist/bg.jpg -------------------------------------------------------------------------------- /images/quote.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dnguyen800/quote-of-the-day-card/HEAD/images/quote.PNG -------------------------------------------------------------------------------- /images/quote.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dnguyen800/quote-of-the-day-card/HEAD/images/quote.gif -------------------------------------------------------------------------------- /images/quote.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dnguyen800/quote-of-the-day-card/HEAD/images/quote.jpg -------------------------------------------------------------------------------- /images/yannick-pulver-ZwPuquZBnyM-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dnguyen800/quote-of-the-day-card/HEAD/images/yannick-pulver-ZwPuquZBnyM-unsplash.jpg -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Dan Nguyen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Quote of the Day Card 2 | ![quote](images/quote.gif) 3 | 4 | Quote of the Day card uses the [Feed Parser Sensor](https://github.com/custom-components/sensor.feedparser) to pull quotes from Brainyquotes.com RSS feed and display them on a nice card. Quotes are selected randomly. 5 | 6 | 7 | ## Requirements 8 | - **Feedparser v0.0.8 or later:** Feedparser changes the way the data is stored from dictionary to list format. Quote of the Day card was updated in v0.0.4 to be compatible with this breaking change. Previous versions of Feedparser may work but are untested. 9 | 10 | ## Instructions 11 | 1. Download the [Feed Parser Sensor](https://github.com/custom-components/sensor.feedparser) and use the following configuration: 12 | 13 | ```yaml 14 | sensor: 15 | - platform: feedparser 16 | name: Quote of the Day 17 | feed_url: 'https://www.brainyquote.com/link/quotebr.rss' 18 | date_format: '%a, %b %d %I:%M %p' 19 | ``` 20 | 21 | ## HACS Instructions 22 | 2. Go to HACS settings and add the following custom repository (as plugin): 23 | 24 | ``` 25 | https://github.com/dnguyen800/quote-of-the-day-card 26 | ``` 27 | 28 | ## Manual Instructions 29 | 30 | 2. Download the [Quote-Day-Card](https://raw.githubusercontent.com/dnguyen800/quote-of-the-day-card/master/dist/quote-of-the-day-card.js), [bg.jpg](https://github.com/dnguyen800/quote-of-the-day-card/blob/master/dist/bg.jpg) and place the files in your `config/www` folder. 31 | 32 | 3. Add the following to the resources section of your ui-lovelace.yaml 33 | 34 | ```yaml 35 | resources: 36 | - url: /local/quote-of-the-day-card.js 37 | type: js 38 | ``` 39 | 4. Write configuration for the card in your `ui-lovelace.yaml`. 40 | 41 | ```yaml 42 | - type: custom:quote-of-the-day-card 43 | entity: sensor.quote_of_the_day 44 | feed_attribute: entries # Required if using FeedParser v0.0.8 or later 45 | ``` 46 | 47 | 5. Restart Home Assistant 48 | 49 | ## Options 50 | | Name | Type | Default | Description 51 | | ---- | ---- | ------- | ----------- 52 | | entity | string | **Required** | Name of the Feed Parser sensor that contains the Quote of the Day data. 53 | | feed_attribute | string | **Required** | If using Feedparser v0.0.8 or later, use **``feed_attribute: entries``**. If using an earlier Feedparser version, do not add this config. 54 | | image | string | /local/bg.jpg | If the background image is stored in a location other than /www/bg.jpg, you can input a different location here. Example: '/local/bg.jpg' 55 | 56 | 57 | 58 | ## Credits 59 | - Background image by [Yannick Pulver](https://yannickpulver.com/) via [Unsplash](https://unsplash.com/@yanu) 60 | - [Feed Parser Sensor](https://github.com/custom-components/sensor.feedparser) - @iantrich For doing the hard work. 61 | - All the Home Assistant custom components and cards out there. I learned from your examples. 62 | 63 | -------------------------------------------------------------------------------- /dist/quote-of-the-day-card.js: -------------------------------------------------------------------------------- 1 | // Notes 2 | // Feedparser data loads each RSS feed data entry as an HA entity's attribute. The name of the attribute is the name of the author, like 'Oscar Wilde'. 3 | // The quote's data is stored as a dictionary under key 'Oscar Wilde'. Access an entry by hass.states[config.entity].attributes[author name][column name] 4 | 5 | 6 | let oldStates = {} 7 | 8 | 9 | class QuoteOfTheDayCard extends HTMLElement { 10 | 11 | constructor() { 12 | super(); 13 | oldStates = {} 14 | this.attachShadow({ mode: 'open' }); 15 | } 16 | 17 | setConfig(config) { 18 | if (!config.entity) { 19 | throw new Error('Please define an entity.'); 20 | } 21 | 22 | const root = this.shadowRoot; 23 | if (root.lastChild) root.removeChild(root.lastChild); 24 | 25 | const cardConfig = Object.assign({}, config); 26 | 27 | const card = document.createElement('ha-card'); 28 | const content = document.createElement('div'); 29 | const style = document.createElement('style'); 30 | 31 | style.textContent = ` 32 | ha-card { 33 | /* sample css */ 34 | ha-card-box-shadow: var(--box-shadow); 35 | border-radius: var(--border-radius); 36 | } 37 | 38 | body { 39 | margin: 0; 40 | font-family: Arial, Helvetica, sans-serif; 41 | } 42 | 43 | .quotecontainer { 44 | position: relative; 45 | width: 100%; 46 | } 47 | 48 | .quotecenter { 49 | margin: auto; 50 | width: 90%; 51 | position: absolute; 52 | text-align: center; 53 | padding: 1px; 54 | 55 | line-height: 1; 56 | top: 50%; 57 | left: 50%; 58 | transform: translate(-50%, -50%); 59 | color: white; 60 | 61 | } 62 | 63 | .quotecontainer img { 64 | display: block; 65 | margin-left: auto; 66 | margin-right: auto; 67 | width: 100%; 68 | height: auto; 69 | ha-card-box-shadow: var(--box-shadow); 70 | border-radius: var(--border-radius); 71 | } 72 | 73 | /*=== Trigger ===*/ 74 | .animate { 75 | -webkit-animation-duration: 1s; 76 | animation-duration: 1s; 77 | -webkit-animation-fill-mode: both; 78 | animation-fill-mode: both; 79 | } 80 | 81 | /*=== Optional Delays, change values here ===*/ 82 | .one { 83 | -webkit-animation-delay: 0.7s; 84 | -moz-animation-delay: 0.7s; 85 | animation-delay: 0.7s; 86 | } 87 | 88 | /*=== Animations start here ===*/ 89 | /*=== FADE IN ===*/ 90 | @-webkit-keyframes fadeIn { 91 | from { 92 | opacity: 0; 93 | } 94 | 95 | to { 96 | opacity: 1; 97 | } 98 | } 99 | @keyframes fadeIn { 100 | from { 101 | opacity: 0; 102 | } 103 | 104 | to { 105 | opacity: 1; 106 | } 107 | } 108 | 109 | .fadeIn { 110 | -webkit-animation-name: fadeIn; 111 | animation-name: fadeIn; 112 | } 113 | 114 | `; 115 | 116 | 117 | 118 | content.innerHTML = ` 119 |
120 |
121 | `; 122 | 123 | card.appendChild(content); 124 | card.appendChild(style); 125 | root.appendChild(card); 126 | this._config = cardConfig; 127 | } 128 | 129 | // Helper method that checks if there are any changes to the states before it refreshes the card. See @swampen PR #41 in air-visual-card 130 | shouldNotUpdate(config, hass) { 131 | let clone = JSON.parse(JSON.stringify(config)) 132 | // Here, delete any config attribute that should not be checked for updates 133 | delete clone["image"] 134 | delete clone["feed_attribute"] 135 | delete clone["type"] 136 | let states = {} 137 | for (let entity of Object.values(clone)) { 138 | states[entity] = hass.states[entity] 139 | } 140 | if (JSON.stringify(oldStates) === JSON.stringify(states)) { 141 | return true 142 | } 143 | oldStates = states 144 | return false 145 | } 146 | 147 | set hass(hass) { 148 | const config = this._config; 149 | const root = this.shadowRoot; 150 | const card = root.lastChild; 151 | if (this.shouldNotUpdate(config, hass)) { 152 | return 153 | } 154 | 155 | this.myhass = hass; 156 | let card_content = ''; 157 | let quote_content = ``; 158 | const image = config.image || "/hacsfiles/quote-of-the-day-card/bg.jpg"; 159 | const entity = config.entity; 160 | const feed_attribute = config.feed_attribute; 161 | 162 | 163 | card_content += `
164 | 165 |
`; 166 | 167 | if (hass.states[entity]) { 168 | const quoteList = feed_attribute ? hass.states[entity].attributes[feed_attribute] : hass.states[entity].attributes; 169 | var quoteArray = []; 170 | 171 | // Build an array of keys while walking through quoteList dictionary. 172 | // The If statement filters out common HA entity attributes like 'friendly_name', 'icon,' and 'homebridge_hidden'. Assumes remaining attributes are the RSS feed entries 173 | for (var quote in quoteList) { 174 | if (quoteList.hasOwnProperty(quote) && quote !== "friendly_name" && quote !== "icon" && quote !== "homebridge_hidden") { 175 | quoteArray.push(quote); 176 | } 177 | } 178 | 179 | 180 | // Selects random quote 181 | var quoteAuthor = quoteArray[quoteArray.length * Math.random() << 0]; 182 | var quote = quoteList[quoteAuthor] 183 | 184 | if (!quoteList) { 185 | throw new Error("Feed is !feed"); 186 | debugger; 187 | } 188 | 189 | 190 | if (quoteList == undefined) { 191 | throw new Error("Feed is undefined"); 192 | debugger; 193 | } 194 | 195 | // If statement also checks for values in 'summary' and 'title'. 196 | if (quote['summary'].length >= 60) { quote_content += `

${quote['summary']}

`; } 197 | else if (quote['summary'].length >= 140) { quote_content += `

${quote['summary']}

`; } 198 | else { quote_content += `

${quote['summary']}

`; } 199 | quote_content += `

${quote['title']}

`; 200 | 201 | card_content += quote_content 202 | card_content += `
` 203 | 204 | }; 205 | root.lastChild.hass = hass; 206 | root.getElementById('content').innerHTML = card_content; 207 | 208 | 209 | } 210 | getCardSize() { 211 | return 1; 212 | } 213 | } 214 | 215 | customElements.define('quote-of-the-day-card', QuoteOfTheDayCard); 216 | --------------------------------------------------------------------------------