├── .gitignore ├── changelog.md ├── images └── demo.gif ├── .github └── FUNDING.yml ├── hacs.json ├── LICENSE ├── info.md ├── README.md └── search-card.js /.gitignore: -------------------------------------------------------------------------------- 1 | *~ 2 | -------------------------------------------------------------------------------- /changelog.md: -------------------------------------------------------------------------------- 1 | ## v0.1 2 | 3 | - Initial version 4 | -------------------------------------------------------------------------------- /images/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/postlund/search-card/HEAD/images/demo.gif -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [postlund] 4 | -------------------------------------------------------------------------------- /hacs.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "search-card", 3 | "render_readme": true, 4 | "homeassistant": "2024.4.0b0" 5 | } 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Pierre Ståhl 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 | -------------------------------------------------------------------------------- /info.md: -------------------------------------------------------------------------------- 1 | # Search Card 2 | 3 | A Lovelace card that enables quick entity searching with customizable actions. 4 | 5 | ## Features 6 | 7 | - 🔍 Quick entity search within the Home Assistant frontend 8 | - ⚡ Custom actions with regex-based matching 9 | - 🎯 Domain filtering (include/exclude specific domains) 10 | - 📋 Configurable result limits and placeholder text 11 | 12 | ## Prerequisites 13 | 14 | - Home Assistant 15 | - [card-tools](https://github.com/thomasloven/lovelace-card-tools) 16 | 17 | ## Using the card 18 | 19 | ### Options 20 | 21 | | Name | Type | Default | Description | 22 | | ---------------- | -------- | ------------------- | ------------------------------------------- | 23 | | max_results | integer | 10 | Maximum number of search results to display | 24 | | search_text | string | "Type to search..." | Custom placeholder text | 25 | | actions | object | optional | Custom action definitions | 26 | | included_domains | string[] | optional | Only show entities from these domains\* | 27 | | excluded_domains | string[] | optional | Hide entities from these domains\* | 28 | 29 | \*Note: `included_domains` and `excluded_domains` cannot be used together 30 | 31 | ### Example Configuration 32 | 33 | ```yaml 34 | type: custom:search-card 35 | max_results: 10 36 | search_text: "Search entities..." 37 | excluded_domains: 38 | - automation 39 | - script 40 | ``` 41 | 42 | ### Domain Filtering Example 43 | 44 | Include only lights and switches: 45 | 46 | ```yaml 47 | type: custom:search-card 48 | included_domains: 49 | - light 50 | - switch 51 | ``` 52 | 53 | ### Custom Actions Example 54 | 55 | ```yaml 56 | type: custom:search-card 57 | actions: 58 | - matches: '^toggle (.+\..+)' 59 | name: "Toggle {1}" 60 | service: homeassistant.toggle 61 | service_data: 62 | entity_id: { 1 } 63 | ``` 64 | 65 | ## Issues and Troubleshooting 66 | 67 | If you encounter issues: 68 | 69 | 1. Clear browser cache 70 | 2. Restart Home Assistant 71 | 3. Verify card-tools is properly installed 72 | 4. Check your configuration syntax 73 | 74 | If you believe you have found an error, please create an issue with: 75 | 76 | - Your configuration 77 | - Home Assistant version 78 | - Browser and version 79 | - Error messages (if any) 80 | 81 | ## Roadmap 82 | 83 | Planned features: 84 | 85 | - Entity exclusion list 86 | - "Show all" results button 87 | - Additional action types 88 | - More polished UI 89 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Search Card 2 | 3 | A Lovelace card for Home Assistant that enables quick entity searching with customizable actions. 4 | 5 | ![Demo of card](images/demo.gif) 6 | 7 | ## Features 8 | 9 | - 🔍 Quick entity search within the Home Assistant frontend 10 | - ⚡ Custom actions with regex-based matching 11 | - 🎯 Domain filtering (include/exclude specific domains) 12 | - 📋 Configurable result limits and placeholder text 13 | 14 | ## Installation 15 | 16 | ### Prerequisites 17 | 18 | - Home Assistant 19 | - [card-tools](https://github.com/thomasloven/lovelace-card-tools) 20 | 21 | ### Option 1: HACS (Recommended) 22 | 23 | 1. Search for "Search Card" in the HACS store 24 | 2. Install and follow the HACS prompts 25 | 26 | ### Option 2: Manual Install 27 | 28 | 1. Download `search-card.js` 29 | 2. Copy it to `config/www/search-card/` (create directory if needed) 30 | 3. Add to `ui-lovelace.yaml`: 31 | 32 | ```yaml 33 | resources: 34 | - url: /local/search-card/search-card.js?v=0 35 | type: module 36 | ``` 37 | 38 | ### Option 3: Git Install 39 | 40 | ```bash 41 | # Clone into your www directory 42 | git clone https://github.com/postlund/search-card.git 43 | ``` 44 | 45 | Then add the same resource reference as in Manual Install. 46 | 47 | ## Configuration 48 | 49 | ### Basic Example 50 | 51 | ```yaml 52 | type: custom:search-card 53 | max_results: 10 54 | search_text: "Search entities..." 55 | excluded_domains: 56 | - automation 57 | ``` 58 | 59 | ### Available Options 60 | 61 | | Name | Type | Default | Description | 62 | | ---------------- | -------- | ------------------- | ------------------------------------------- | 63 | | max_results | integer | 10 | Maximum number of search results to display | 64 | | search_text | string | "Type to search..." | Custom placeholder text | 65 | | actions | object | optional | Custom action definitions | 66 | | included_domains | string[] | optional | Only show entities from these domains\* | 67 | | excluded_domains | string[] | optional | Hide entities from these domains\* | 68 | 69 | \*Note: `included_domains` and `excluded_domains` cannot be used together 70 | 71 | ### Domain Filtering 72 | 73 | The card supports filtering entities by their domains using either `included_domains` or `excluded_domains`. 74 | 75 | #### Common Home Assistant Domains 76 | 77 | - `light` - Light entities 78 | - `switch` - Switch entities 79 | - `sensor` - Sensor entities 80 | - `binary_sensor` - Binary sensor entities 81 | - `climate` - Climate control entities 82 | - `media_player` - Media player entities 83 | - `automation` - Automation entities 84 | - `script` - Script entities 85 | - `camera` - Camera entities 86 | - `cover` - Cover/blind/garage door entities 87 | 88 | #### Examples 89 | 90 | Include only lights and switches: 91 | 92 | ```yaml 93 | type: custom:search-card 94 | included_domains: 95 | - light 96 | - switch 97 | ``` 98 | 99 | Exclude automation and script entities: 100 | 101 | ```yaml 102 | type: custom:search-card 103 | excluded_domains: 104 | - automation 105 | - script 106 | ``` 107 | 108 | **Note**: The card will show entities from all available domains in your Home Assistant instance unless you specify domain filters. 109 | 110 | ### Custom Actions 111 | 112 | Actions allow you to define service calls triggered by regex matches. Example: 113 | 114 | ```yaml 115 | type: custom:search-card 116 | actions: 117 | - matches: '^toggle (.+\..+)' 118 | name: "Toggle {1}" 119 | service: homeassistant.toggle 120 | service_data: 121 | entity_id: { 1 } 122 | ``` 123 | 124 | ## Troubleshooting 125 | 126 | If you encounter issues: 127 | 128 | 1. Clear browser cache 129 | 2. Restart Home Assistant 130 | 3. Verify card-tools is properly installed 131 | 4. Check your configuration syntax 132 | 133 | For bug reports, please [create an issue](https://github.com/postlund/search-card/issues) with: 134 | 135 | - Your configuration 136 | - Home Assistant version 137 | - Browser and version 138 | - Error messages (if any) 139 | 140 | ## Roadmap 141 | 142 | Planned features: 143 | 144 | - Entity exclusion list 145 | - "Show all" results button 146 | - Additional action types 147 | -------------------------------------------------------------------------------- /search-card.js: -------------------------------------------------------------------------------- 1 | customElements.whenDefined("card-tools").then(() => { 2 | var ct = customElements.get("card-tools"); 3 | 4 | const BUILTIN_ACTIONS = [ 5 | { 6 | matches: "^((magnet:.*)|(.*.torrent.*))$", 7 | name: "Add to Transmission", 8 | icon: "mdi:progress-download", 9 | service: "transmission.add_torrent", 10 | service_data: { 11 | torrent: "{1}", 12 | }, 13 | }, 14 | ]; 15 | 16 | const matchAndReplace = (text, matches) => { 17 | for (var i = 0; i < matches.length; i++) { 18 | text = text.replace("{" + i + "}", matches[i]); 19 | } 20 | return text; 21 | }; 22 | 23 | class SearchCard extends ct.LitElement { 24 | static get properties() { 25 | return { 26 | config: { type: Object }, 27 | hass: { type: Object }, 28 | _results: { type: Array }, 29 | _activeActions: { type: Array }, 30 | _searchValue: { type: String }, 31 | _lastHass: { type: Object }, 32 | }; 33 | } 34 | 35 | constructor() { 36 | super(); 37 | this._results = []; 38 | this._activeActions = []; 39 | this._searchValue = ""; 40 | this._lastHass = null; 41 | this._debouncedSearch = this._debounce((searchText) => { 42 | this._performSearch(searchText); 43 | }, 100); 44 | } 45 | 46 | shouldUpdate(changedProps) { 47 | return ( 48 | changedProps.has("config") || 49 | changedProps.has("_results") || 50 | changedProps.has("_activeActions") || 51 | changedProps.has("_searchValue") 52 | ); 53 | } 54 | 55 | setConfig(config) { 56 | this.config = config; 57 | this.max_results = this.config.max_results || 10; 58 | this.search_text = this.config.search_text || "Type to search..."; 59 | this.actions = BUILTIN_ACTIONS.concat(this.config.actions || []); 60 | this.included_domains = this.config.included_domains; 61 | this.excluded_domains = this.config.excluded_domains || []; 62 | } 63 | 64 | getCardSize() { 65 | return 4; 66 | } 67 | 68 | render() { 69 | const results = this._results.slice(0, this.max_results).sort(); 70 | const rows = results.map((entity_id) => this._createResultRow(entity_id)); 71 | const actions = this._activeActions.map((x) => 72 | this._createActionRow(x[0], x[1]) 73 | ); 74 | 75 | return ct.LitHtml` 76 | 77 |
78 |
79 | 90 | 91 | 97 | 98 | 99 | 100 |
101 | 102 | ${ 103 | results.length > 0 104 | ? ct.LitHtml`
Showing ${results.length} of ${this._results.length} results
` 105 | : "" 106 | } 107 |
108 | ${ 109 | rows.length > 0 || actions.length > 0 110 | ? ct.LitHtml`
${actions}${rows}
` 111 | : "" 112 | } 113 | 114 | `; 115 | } 116 | 117 | _createResultRow(entity_id) { 118 | var row = ct.createEntityRow({ entity: entity_id }); 119 | row.addEventListener("click", () => ct.moreInfo(entity_id)); 120 | row.hass = this.hass; 121 | return row; 122 | } 123 | 124 | _createActionRow(action, matches) { 125 | var service_data = action.service_data; 126 | for (var key in service_data) { 127 | service_data[key] = matchAndReplace(service_data[key], matches); 128 | } 129 | 130 | const elem = cardTools.createThing("service-row", { 131 | type: "call", 132 | name: matchAndReplace(action.name, matches), 133 | icon: action.icon || "mdi:lamp", 134 | service: action.service, 135 | service_data: service_data, 136 | }); 137 | elem.hass = this.hass; 138 | return elem; 139 | } 140 | 141 | _valueChanged(ev) { 142 | this._searchValue = ev.target.value; 143 | this._debouncedSearch(this._searchValue); 144 | } 145 | 146 | _clearInput() { 147 | this._searchValue = ""; 148 | this._results = []; 149 | this._activeActions = []; 150 | } 151 | 152 | _debounce(func, wait) { 153 | let timeout; 154 | return function executedFunction(...args) { 155 | const later = () => { 156 | clearTimeout(timeout); 157 | func(...args); 158 | }; 159 | clearTimeout(timeout); 160 | timeout = setTimeout(later, wait); 161 | }; 162 | } 163 | 164 | _performSearch(searchText) { 165 | if (!this.config || !this.hass || searchText === "") { 166 | this._results = []; 167 | this._activeActions = []; 168 | return; 169 | } 170 | 171 | try { 172 | const searchRegex = new RegExp(searchText, "i"); 173 | const newResults = []; 174 | 175 | for (const entity_id in this.hass.states) { 176 | if ( 177 | (entity_id.search(searchRegex) >= 0 || 178 | this.hass.states[entity_id].attributes.friendly_name?.search( 179 | searchRegex 180 | ) >= 0) && 181 | (this.included_domains 182 | ? this.included_domains.includes(entity_id.split(".")[0]) 183 | : !this.excluded_domains.includes(entity_id.split(".")[0])) 184 | ) { 185 | newResults.push(entity_id); 186 | } 187 | } 188 | 189 | this._results = newResults; 190 | this._activeActions = this._getActivatedActions(searchText); 191 | } catch (err) { 192 | console.warn(err); 193 | this._results = []; 194 | this._activeActions = []; 195 | } 196 | } 197 | 198 | _getActivatedActions(searchText) { 199 | var active = []; 200 | 201 | for (const action of this.actions) { 202 | if (this._serviceExists(action.service)) { 203 | var matches = searchText.match(action.matches); 204 | if (matches != null) { 205 | active.push([action, matches]); 206 | } 207 | } 208 | } 209 | return active; 210 | } 211 | 212 | _serviceExists(serviceCall) { 213 | var [domain, service] = serviceCall.split("."); 214 | var servicesForDomain = this.hass.services[domain]; 215 | return servicesForDomain && service in servicesForDomain; 216 | } 217 | 218 | static get styles() { 219 | return ct.LitCSS` 220 | #searchContainer { 221 | width: 90%; 222 | display: block; 223 | margin-left: auto; 224 | margin-right: auto; 225 | } 226 | #searchTextFieldContainer { 227 | display: flex; 228 | padding-top: 5px; 229 | padding-bottom: 5px; 230 | } 231 | #searchText { 232 | flex-grow: 1; 233 | } 234 | #count { 235 | text-align: right; 236 | font-style: italic; 237 | } 238 | #results { 239 | width: 90%; 240 | display: block; 241 | padding-bottom: 15px; 242 | margin-top: 15px; 243 | margin-left: auto; 244 | margin-right: auto; 245 | } 246 | `; 247 | } 248 | } 249 | 250 | customElements.define("search-card", SearchCard); 251 | }); 252 | 253 | setTimeout(() => { 254 | if (customElements.get("card-tools")) return; 255 | customElements.define( 256 | "search-card", 257 | class extends HTMLElement { 258 | setConfig() { 259 | throw new Error( 260 | "Can't find card-tools. See https://github.com/thomasloven/lovelace-card-tools" 261 | ); 262 | } 263 | } 264 | ); 265 | }, 2000); 266 | 267 | window.customCards = window.customCards || []; 268 | window.customCards.push({ 269 | type: "search-card", 270 | name: "Search Card", 271 | preview: true, 272 | description: "Card to search entities", 273 | }); 274 | --------------------------------------------------------------------------------