├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── workflows │ └── yaml-check.yml ├── .gitignore ├── LICENSE ├── README.md ├── addons ├── actions.yaml ├── debug.yaml ├── dynamic_icons.yaml ├── interactive.yaml ├── resizable.yaml ├── show_helpers.yaml ├── state_helper.yaml ├── style_helper.yaml └── transparent.yaml ├── button_action.yaml ├── button_landscape.yaml ├── button_mini.yaml ├── custom └── example.yaml ├── device.yaml ├── empty.yaml ├── entity_detail.yaml ├── gap.yaml ├── images ├── button-action.gif ├── button-mini.png ├── cbc-samples-animated.gif ├── cbc-samples-noctis.png ├── cbc-samples.gif ├── device.png ├── entity-detail.png ├── info-mini.gif ├── info.png ├── light-group.gif ├── light-motion.gif ├── light.png ├── plug.png ├── template-samples.png ├── title-hotdogs.png └── value-strips.png ├── info.yaml ├── light.yaml ├── light_group.yaml ├── light_motion.yaml ├── plug.yaml ├── title.yaml └── value_strip.yaml /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: wfurphy 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Debug Information** 27 | Add the `debug` template to the problem card and then view the output in your browser console (make sure to set it to view All Levels as the messages are Debug level). Copy the output and paste it here. Omitting any sensitive data like entity names if you wish. 28 | 29 | 30 | **Desktop (please complete the following information):** 31 | - OS: [e.g. iOS] 32 | - Browser [e.g. chrome, safari] 33 | - Version [e.g. 22] 34 | 35 | **Smartphone (please complete the following information):** 36 | - Device: [e.g. iPhone6] 37 | - OS: [e.g. iOS8.1] 38 | - Browser [e.g. stock browser, safari] 39 | - Version [e.g. 22] 40 | 41 | **Additional context** 42 | Add any other context about the problem here. 43 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/workflows/yaml-check.yml: -------------------------------------------------------------------------------- 1 | # This is a basic workflow to help you get started with Actions 2 | 3 | name: YAML Check 4 | 5 | # Controls when the workflow will run 6 | on: 7 | # Triggers the workflow on push or pull request events but only for the "master" branch 8 | push: 9 | branches: [ "master" ] 10 | pull_request: 11 | branches: [ "master" ] 12 | 13 | # Allows you to run this workflow manually from the Actions tab 14 | workflow_dispatch: 15 | 16 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel 17 | jobs: 18 | # This workflow contains a single job called "build" 19 | build: 20 | # The type of runner that the job will run on 21 | runs-on: ubuntu-latest 22 | 23 | # Steps represent a sequence of tasks that will be executed as part of the job 24 | steps: 25 | # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it 26 | - uses: actions/checkout@v3 27 | 28 | # Runs a single command using the runners shell 29 | - name: Create `cbc_master.yaml` release file 30 | run: echo 'button_card_templates:' > cbc_master.yml && cat */*.yaml *.yaml | sed -n '/^ *#/!p' | sed -n '/^ *$/!p' | sed 's/^/ /' >> cbc_master.yml 31 | 32 | # Check yaml is valid 33 | - uses: ibiqlik/action-yamllint@v3 34 | with: 35 | file_or_dir: ./cbc_master.yml 36 | config_data: "{ rules: { line-length: disable, trailing-spaces: disable } }" 37 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore Visual Studio temporary files, build results, and 2 | ## files generated by popular Visual Studio add-ons. 3 | ## 4 | ## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore 5 | 6 | # User-specific files 7 | *.rsuser 8 | *.suo 9 | *.user 10 | *.userosscache 11 | *.sln.docstates 12 | custom/*.yaml 13 | !custom/example.yaml 14 | js 15 | cbc.yml 16 | 17 | # User-specific files (MonoDevelop/Xamarin Studio) 18 | *.userprefs 19 | 20 | # Mono auto generated files 21 | mono_crash.* 22 | 23 | # Build results 24 | [Dd]ebug/ 25 | [Dd]ebugPublic/ 26 | [Rr]elease/ 27 | [Rr]eleases/ 28 | x64/ 29 | x86/ 30 | [Aa][Rr][Mm]/ 31 | [Aa][Rr][Mm]64/ 32 | bld/ 33 | [Bb]in/ 34 | [Oo]bj/ 35 | [Ll]og/ 36 | [Ll]ogs/ 37 | 38 | # Visual Studio 2015/2017 cache/options directory 39 | .vs/ 40 | # Uncomment if you have tasks that create the project's static files in wwwroot 41 | #wwwroot/ 42 | 43 | # Visual Studio 2017 auto generated files 44 | Generated\ Files/ 45 | 46 | # MSTest test Results 47 | [Tt]est[Rr]esult*/ 48 | [Bb]uild[Ll]og.* 49 | 50 | # NUnit 51 | *.VisualState.xml 52 | TestResult.xml 53 | nunit-*.xml 54 | 55 | # Build Results of an ATL Project 56 | [Dd]ebugPS/ 57 | [Rr]eleasePS/ 58 | dlldata.c 59 | 60 | # Benchmark Results 61 | BenchmarkDotNet.Artifacts/ 62 | 63 | # .NET Core 64 | project.lock.json 65 | project.fragment.lock.json 66 | artifacts/ 67 | 68 | # StyleCop 69 | StyleCopReport.xml 70 | 71 | # Files built by Visual Studio 72 | *_i.c 73 | *_p.c 74 | *_h.h 75 | *.ilk 76 | *.meta 77 | *.obj 78 | *.iobj 79 | *.pch 80 | *.pdb 81 | *.ipdb 82 | *.pgc 83 | *.pgd 84 | *.rsp 85 | *.sbr 86 | *.tlb 87 | *.tli 88 | *.tlh 89 | *.tmp 90 | *.tmp_proj 91 | *_wpftmp.csproj 92 | *.log 93 | *.vspscc 94 | *.vssscc 95 | .builds 96 | *.pidb 97 | *.svclog 98 | *.scc 99 | 100 | # Chutzpah Test files 101 | _Chutzpah* 102 | 103 | # Visual C++ cache files 104 | ipch/ 105 | *.aps 106 | *.ncb 107 | *.opendb 108 | *.opensdf 109 | *.sdf 110 | *.cachefile 111 | *.VC.db 112 | *.VC.VC.opendb 113 | 114 | # Visual Studio profiler 115 | *.psess 116 | *.vsp 117 | *.vspx 118 | *.sap 119 | 120 | # Visual Studio Trace Files 121 | *.e2e 122 | 123 | # TFS 2012 Local Workspace 124 | $tf/ 125 | 126 | # Guidance Automation Toolkit 127 | *.gpState 128 | 129 | # ReSharper is a .NET coding add-in 130 | _ReSharper*/ 131 | *.[Rr]e[Ss]harper 132 | *.DotSettings.user 133 | 134 | # TeamCity is a build add-in 135 | _TeamCity* 136 | 137 | # DotCover is a Code Coverage Tool 138 | *.dotCover 139 | 140 | # AxoCover is a Code Coverage Tool 141 | .axoCover/* 142 | !.axoCover/settings.json 143 | 144 | # Visual Studio code coverage results 145 | *.coverage 146 | *.coveragexml 147 | 148 | # NCrunch 149 | _NCrunch_* 150 | .*crunch*.local.xml 151 | nCrunchTemp_* 152 | 153 | # MightyMoose 154 | *.mm.* 155 | AutoTest.Net/ 156 | 157 | # Web workbench (sass) 158 | .sass-cache/ 159 | 160 | # Installshield output folder 161 | [Ee]xpress/ 162 | 163 | # DocProject is a documentation generator add-in 164 | DocProject/buildhelp/ 165 | DocProject/Help/*.HxT 166 | DocProject/Help/*.HxC 167 | DocProject/Help/*.hhc 168 | DocProject/Help/*.hhk 169 | DocProject/Help/*.hhp 170 | DocProject/Help/Html2 171 | DocProject/Help/html 172 | 173 | # Click-Once directory 174 | publish/ 175 | 176 | # Publish Web Output 177 | *.[Pp]ublish.xml 178 | *.azurePubxml 179 | # Note: Comment the next line if you want to checkin your web deploy settings, 180 | # but database connection strings (with potential passwords) will be unencrypted 181 | *.pubxml 182 | *.publishproj 183 | 184 | # Microsoft Azure Web App publish settings. Comment the next line if you want to 185 | # checkin your Azure Web App publish settings, but sensitive information contained 186 | # in these scripts will be unencrypted 187 | PublishScripts/ 188 | 189 | # NuGet Packages 190 | *.nupkg 191 | # NuGet Symbol Packages 192 | *.snupkg 193 | # The packages folder can be ignored because of Package Restore 194 | **/[Pp]ackages/* 195 | # except build/, which is used as an MSBuild target. 196 | !**/[Pp]ackages/build/ 197 | # Uncomment if necessary however generally it will be regenerated when needed 198 | #!**/[Pp]ackages/repositories.config 199 | # NuGet v3's project.json files produces more ignorable files 200 | *.nuget.props 201 | *.nuget.targets 202 | 203 | # Microsoft Azure Build Output 204 | csx/ 205 | *.build.csdef 206 | 207 | # Microsoft Azure Emulator 208 | ecf/ 209 | rcf/ 210 | 211 | # Windows Store app package directories and files 212 | AppPackages/ 213 | BundleArtifacts/ 214 | Package.StoreAssociation.xml 215 | _pkginfo.txt 216 | *.appx 217 | *.appxbundle 218 | *.appxupload 219 | 220 | # Visual Studio cache files 221 | # files ending in .cache can be ignored 222 | *.[Cc]ache 223 | # but keep track of directories ending in .cache 224 | !?*.[Cc]ache/ 225 | 226 | # Others 227 | ClientBin/ 228 | ~$* 229 | *~ 230 | *.dbmdl 231 | *.dbproj.schemaview 232 | *.jfm 233 | *.pfx 234 | *.publishsettings 235 | orleans.codegen.cs 236 | 237 | # Including strong name files can present a security risk 238 | # (https://github.com/github/gitignore/pull/2483#issue-259490424) 239 | #*.snk 240 | 241 | # Since there are multiple workflows, uncomment next line to ignore bower_components 242 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) 243 | #bower_components/ 244 | 245 | # RIA/Silverlight projects 246 | Generated_Code/ 247 | 248 | # Backup & report files from converting an old project file 249 | # to a newer Visual Studio version. Backup files are not needed, 250 | # because we have git ;-) 251 | _UpgradeReport_Files/ 252 | Backup*/ 253 | UpgradeLog*.XML 254 | UpgradeLog*.htm 255 | ServiceFabricBackup/ 256 | *.rptproj.bak 257 | 258 | # SQL Server files 259 | *.mdf 260 | *.ldf 261 | *.ndf 262 | 263 | # Business Intelligence projects 264 | *.rdl.data 265 | *.bim.layout 266 | *.bim_*.settings 267 | *.rptproj.rsuser 268 | *- [Bb]ackup.rdl 269 | *- [Bb]ackup ([0-9]).rdl 270 | *- [Bb]ackup ([0-9][0-9]).rdl 271 | 272 | # Microsoft Fakes 273 | FakesAssemblies/ 274 | 275 | # GhostDoc plugin setting file 276 | *.GhostDoc.xml 277 | 278 | # Node.js Tools for Visual Studio 279 | .ntvs_analysis.dat 280 | node_modules/ 281 | 282 | # Visual Studio 6 build log 283 | *.plg 284 | 285 | # Visual Studio 6 workspace options file 286 | *.opt 287 | 288 | # Visual Studio 6 auto-generated workspace file (contains which files were open etc.) 289 | *.vbw 290 | 291 | # Visual Studio LightSwitch build output 292 | **/*.HTMLClient/GeneratedArtifacts 293 | **/*.DesktopClient/GeneratedArtifacts 294 | **/*.DesktopClient/ModelManifest.xml 295 | **/*.Server/GeneratedArtifacts 296 | **/*.Server/ModelManifest.xml 297 | _Pvt_Extensions 298 | 299 | # Paket dependency manager 300 | .paket/paket.exe 301 | paket-files/ 302 | 303 | # FAKE - F# Make 304 | .fake/ 305 | 306 | # CodeRush personal settings 307 | .cr/personal 308 | 309 | # Python Tools for Visual Studio (PTVS) 310 | __pycache__/ 311 | *.pyc 312 | 313 | # Cake - Uncomment if you are using it 314 | # tools/** 315 | # !tools/packages.config 316 | 317 | # Tabs Studio 318 | *.tss 319 | 320 | # Telerik's JustMock configuration file 321 | *.jmconfig 322 | 323 | # BizTalk build output 324 | *.btp.cs 325 | *.btm.cs 326 | *.odx.cs 327 | *.xsd.cs 328 | 329 | # OpenCover UI analysis results 330 | OpenCover/ 331 | 332 | # Azure Stream Analytics local run output 333 | ASALocalRun/ 334 | 335 | # MSBuild Binary and Structured Log 336 | *.binlog 337 | 338 | # NVidia Nsight GPU debugger configuration file 339 | *.nvuser 340 | 341 | # MFractors (Xamarin productivity tool) working folder 342 | .mfractor/ 343 | 344 | # Local History for Visual Studio 345 | .localhistory/ 346 | 347 | # BeatPulse healthcheck temp database 348 | healthchecksdb 349 | 350 | # Backup folder for Package Reference Convert tool in Visual Studio 2017 351 | MigrationBackup/ 352 | 353 | # Ionide (cross platform F# VS Code tools) working folder 354 | .ionide/ 355 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | The MIT License (MIT) 3 | Copyright (c) 2022, Will Furphy | https://github.com/wfurphy 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![release](https://img.shields.io/github/v/release/wfurphy/creative-button-card-templates) 2 | # Creative Button Card Templates 3 | 4 | A collection of [Button Card](https://github.com/custom-cards/button-card) templates to improve the build speed and quality of your Home Assistant lovelace dashboards. 5 | 6 | ![Template Samples using Noctis theme](images/cbc-samples-animated.gif) 7 | 8 | _Examples above are shown in the default dark theme however they should work for most themes. They might require a couple of tweaks here and there. I prefer the excellent [Noctis theme](https://github.com/aFFekopp/noctis) (Check the "See Noctis example..." section below)_ 9 | 10 |
See Noctis example... 11 |

12 | 13 | _Here are the same samples using the [Noctis theme](https://github.com/aFFekopp/n0.1100...12octis)_ 14 | 15 | ![Template Samples using Noctis theme](images/cbc-samples-noctis.png) 16 | 17 |

18 |
19 | 20 |
See the YAML... 21 |

22 | 23 | This is the code used to create the examples in the gif above. Some entity names omitted, of course. 24 | 25 | ```yaml 26 | # ...cards: 27 | - type: vertical-stack 28 | cards: 29 | - type: custom:button-card # ####| Title - Tab & Icon |####> 30 | template: title 31 | name: Creative Button Card Templates 32 | icon: mdi:cards-outline 33 | - type: grid 34 | square: false 35 | columns: 2 36 | cards: 37 | - type: vertical-stack 38 | cards: 39 | - type: custom:button-card # ####| Action. Button |####> 40 | template: button_action 41 | entity: timer.test_timer 42 | name: Action Button 43 | - type: custom:button-card # ####| Title - Devices |####> 44 | template: title 45 | name: Devices 46 | icon: mdi:cellphone-link 47 | styles: 48 | icon: 49 | - height: 110% 50 | - type: custom:button-card # ####| Device |####> 51 | template: device 52 | entity: switch.sample 53 | name: Device 54 | icon: mdi:tumble-dryer 55 | - type: custom:button-card # ####| Device - Attributes |####> 56 | template: device 57 | entity: switch.sample 58 | name: Device 59 | icon: mdi:nuke 60 | variables: 61 | attributes: 62 | - id: voltage 63 | icon: mdi:alien 64 | state: '1x ' 65 | units: Attribute 66 | - type: custom:button-card # ####| Plug |####> 67 | template: plug 68 | entity: switch.sample 69 | name: Smart Plug 70 | - type: grid 71 | square: false 72 | columns: 2 73 | cards: 74 | - type: custom:button-card # ####| Title - Lights |####> 75 | template: title 76 | name: Lights 77 | icon: mdi:lamps 78 | styles: 79 | card: 80 | - margin-top: 40px 81 | - type: custom:button-card # ####| Light |####> 82 | template: light 83 | entity: light.sample 84 | name: Light 85 | - type: custom:button-card # ####| Light - Motion |####> 86 | template: light_motion 87 | entity: light.sample 88 | name: Light & Motion 89 | variables: 90 | motion_entity: binary_sensor.sample 91 | - type: custom:button-card # ####| Light Group |####> 92 | template: 93 | - light_group 94 | entity: light.sample 95 | name: Light Group 96 | variables: 97 | items: 98 | - entity: light.sample 99 | symbol: mdi:stairs 100 | icon: mdi:home 101 | - entity: light.sample 102 | symbol: C 103 | - entity: light.sample 104 | icon: mdi:lightbulb-spot 105 | symbol: 8 106 | - type: vertical-stack # #########################| COLUMN |#####################> 107 | cards: 108 | - type: horizontal-stack # ####| Mini Buttons |####> 109 | cards: 110 | - type: custom:button-card 111 | template: title 112 | name: "Mini Buttons" 113 | icon: mdi:arrow-right 114 | - type: custom:button-card # ####| Button Mini DND |####> 115 | template: 116 | - button_mini 117 | - dynamic_icons 118 | color_type: card 119 | color: "#9d3042" 120 | entity: input_boolean.sample 121 | variables: 122 | icon: mdi:bell 123 | icon_on: mdi:bell-off 124 | width: 70px 125 | - type: custom:button-card # ####| Button Mini Power |####> 126 | template: button_mini 127 | icon: mdi:power 128 | entity: switch.sample 129 | variables: 130 | width: 70px 131 | - type: custom:button-card # ####| Value Strips |####> 132 | template: title 133 | name: Value Strips 134 | icon: mdi:led-strip 135 | - type: grid 136 | columns: 2 137 | square: false 138 | cards: 139 | - type: custom:button-card # ####| Brightness Strip |####> 140 | template: 141 | - value_strip 142 | variables: 143 | type: brightness 144 | show: 145 | icon: false 146 | value: true 147 | entity: light.sample 148 | - type: custom:button-card # ####| Brightness Strip |####> 149 | template: 150 | - value_strip 151 | variables: 152 | type: adaptive_lighting 153 | al_area_id: den 154 | show: 155 | icon: true 156 | value: true 157 | - type: custom:button-card # ####| Brightness Strip |####> 158 | template: 159 | - value_strip 160 | - transparent 161 | variables: 162 | type: adaptive_lighting 163 | al_area_id: den 164 | show: 165 | icon: true 166 | value: false 167 | - type: custom:button-card # ####| Blinds Strip |####> 168 | template: 169 | - value_strip 170 | entity: cover.den_blinds 171 | variables: 172 | type: cover 173 | show: 174 | icon: true 175 | value: true 176 | fade: false 177 | items: 178 | - value: 0 179 | icon: mdi:blinds 180 | units: '%' 181 | label: close 182 | - value: 25 183 | icon: mdi:blinds 184 | units: '%' 185 | - value: 50 186 | icon: mdi:blinds-open 187 | units: '%' 188 | - value: 75 189 | icon: mdi:blinds-open 190 | units: '%' 191 | - value: 100 192 | icon: mdi:blinds-open 193 | units: '%' 194 | label: open 195 | - type: horizontal-stack # ####| Info Cards |####> 196 | cards: 197 | - type: custom:button-card 198 | template: title 199 | name: Info Cards 200 | icon: mdi:information-outline 201 | - type: custom:button-card # ####| Info Mini |####> 202 | template: 203 | - info_mini 204 | - transparent 205 | variables: 206 | state: 99 207 | units: win 208 | icon: mdi:trophy 209 | - type: custom:button-card # ####| Info x 3 |####> 210 | template: 211 | - info 212 | variables: 213 | items: 214 | - entity_id: sensor.sample 215 | name: Custom Color 216 | color: '#e04632' 217 | decimals: 2 218 | - entity_id: cover.den_blinds 219 | attribute: current_position 220 | units: 'ATTRIBUTE ' 221 | prefix_units: true 222 | - icon: mdi:lightbulb-variant 223 | name: No Entity 224 | state: 'Custom' 225 | - type: custom:button-card # ####| Info x 4 Transparent |####> 226 | template: 227 | - info 228 | - transparent 229 | variables: 230 | items: 231 | - entity_id: sensor.sample 232 | name: Rounding 233 | decimals: 0 234 | - icon: mdi:cash 235 | name: Currency 236 | state: '47.3' 237 | units: '$' 238 | color: "#00b59d" 239 | - entity_id: sensor.sample 240 | name: "Sensor" 241 | color: "#febe6e" 242 | - entity_id: input_number.air_circulation_frequency 243 | name: Custom Icon 244 | icon: mdi:clock-outline 245 | - type: horizontal-stack # ####| Info Minis |####> 246 | cards: 247 | - type: custom:button-card # ####| Spin |####> 248 | template: 249 | - transparent 250 | - info_mini 251 | entity: cover.den_blinds 252 | variables: 253 | attribute: current_position 254 | units: 'SPIN' 255 | state: '↻' 256 | spin: true 257 | icon_color: 'rgba(247, 138, 80, 0.2)' 258 | icon: mdi:fan 259 | - type: custom:button-card # ####| Inline |####> 260 | template: 261 | - info_mini 262 | - transparent 263 | entity: cover.den_blinds 264 | icon: mdi:chart-pie 265 | variables: 266 | icon_color: 'rgba(157, 48, 66, 0.4)' 267 | layout: inline 268 | attribute: current_position 269 | units: '%' 270 | - type: custom:button-card # ####| Background |####> 271 | template: 272 | - info_mini 273 | entity: input_number.air_circulation_frequency 274 | icon: mdi:clock-time-nine-outline 275 | - type: custom:button-card # ####| Mirror Title |####> 276 | template: title 277 | name: Info Mini 278 | icon: mdi:arrow-left 279 | variables: 280 | mirror: true 281 | # ... 282 | ``` 283 | 284 |

285 |
286 | 287 | > "What card are you using for that? I want to use that on mine!" 288 | 289 | I made this repo for my friends who were asking me the above question. If you're someone else who's managed to stumble accross them then hello and you're welcome to use them. I'll try to keep them maintained for a little while but I am planning on making a proper frontend integration with UI configuration in the future. If you like them then please send your kudos to [@RomRider](https://github.com/RomRider) and everyone who contributed to [Button Card](https://github.com/custom-cards/button-card) which is the only reason these templates were possible. 290 | 291 | ## Prerequisites 292 | 293 | You will need to ensure you have the following components installed. They are both available on [HACS](https://hacs.xyz/). 294 | 295 | ### [custom-cards/button-card](https://github.com/custom-cards/button-card) 296 | 297 | The very first step is to ensure you have [Button Card](https://github.com/custom-cards/button-card) installed and working in home assistant. These templates are not going to work without it! You may notice, as I have, that it hasn't been maintained in some time. However, it all appears to be working perfectly still (_Last Checked HA 2022.10.4_). Perhaps if issues arise I will finally have to bite the bullet and develop my own custom card. 298 | 299 | > :raising_hand_man: _If you plan to further extend these templates or create your own then it is **essential** that you read the [button-card documentation](https://github.com/custom-cards/button-card). In fact, I recommend you read it regardless._ 300 | 301 | ### [thomasloven/lovelace-card-mod](https://github.com/thomasloven/lovelace-card-mod) 302 | 303 | I've used card-mod for a few tweaks here and there. It's required for most decent custom cards and themes anyway so you may have it already. 304 | 305 | ## Installation 306 | 307 | ### YAML Mode 308 | 309 | If you are using your lovelace dashboards in [yaml mode](https://www.home-assistant.io/dashboards/dashboards/) (Recommended): 310 | 311 | 1. Open a terminal on your Home Assistant host and navigate to the config directory where you keep your `ui-lovelace.yaml`, in hassOS this is usually `/config`. 312 | 313 | 2. Clone this repository: 314 | 315 | ```sh 316 | git clone https://github.com/wfurphy/creative-button-card-templates.git 317 | ``` 318 | 319 | 3. Include the following snippet **before the other contents** of your `ui-lovelace.yaml`. _If you've used a custom directory then obviously replace `creative-button-card-templates/` with a relative path to your chosen installation directory._ 320 | 321 | ```yaml 322 | ############| Creative Button Card Templates |#################################################> 323 | ##| Will Furphy | https://github.com/wfurphy/creative-button-card-templates 324 | button_card_templates: !include_dir_merge_named creative-button-card-templates/ 325 | #################################################################################/ 326 | ``` 327 | 328 | ### Storage (UI) Mode 329 | 330 | If you're using storage mode (or editing your dashboards using the UI): 331 | 332 | 1. Open a Terminal window and navigate to anywhere you'd like to keep the files then run the following 3 lines: 333 | 334 | ```sh 335 | git clone https://github.com/wfurphy/creative-button-card-templates.git 336 | cd creative-button-card-templates 337 | echo 'button_card_templates:' > cbc.yml && cat */*.yaml *.yaml | sed -n '/^ *#/!p' | sed -n '/^ *$/!p' | sed 's/^/ /' >> cbc.yml 338 | ``` 339 | 340 | 2. Open `cbc.yml` in your chosen text editor, **select all** and **copy** the entire contents to the clipboard. 341 | 3. Open a browser and navigate to your Home Assistant dashboard. 342 | 4. Click the three dots in the top right corner and choose `Edit Dashboard`. 343 | 5. Click three dots again and choose `Raw Configuration Editor`. 344 | 6. On the first line before any other content, **paste** the copied text from `cbc.yml`. 345 | 7. Click **Save** and close the raw configuration editor. 346 | 347 | ## Using the Templates 348 | 349 | > :raising_hand_man: _This is all going to make much more sense to you if you have read the [button-card documentation](https://github.com/custom-cards/button-card)._ 350 | 351 | To use the templates simply specify the `template` property in your button-card yaml. For most you'll need to specify your `entity` (although some don't need it, like `title`). This is all you need for a light card: 352 | 353 | ```yaml 354 | type: custom:button-card 355 | template: light 356 | entity: light.bedside_lamp 357 | # ... 358 | ``` 359 | 360 | You can use multiple templates and/or addons by defining them as a list in the `template` property. Define the template(s) first then the addons. 361 | 362 | ```yaml 363 | type: custom:button-card 364 | template: 365 | - light 366 | - transparent 367 | entity: light.bedside_lamp 368 | # ... 369 | ``` 370 | 371 | Of course, it's still possible to customise things like `name` and `icon` or other properties available in button-card. Any properties you specify will override the template properties. For example, if I wanted to use a name and icon other than the ones specified in the entity for this light: 372 | 373 | ```yaml 374 | type: custom:button-card 375 | template: light 376 | entity: light.bedside_lamp 377 | name: Front Door Light 378 | icon: mdi:lamp 379 | # ... 380 | ``` 381 | 382 | > :raising_hand_man: _Some properties are used to provide the features of the template and overriding them will break the functionality. For example the device and light cards make use of the `label` property. However, they should only be one's you are unlikely to use. If you have one that's not working, go and check out the template YAML and check if you're overriding anything vital!_ 383 | 384 | ### Variables 385 | 386 | The templates allow you to set most options via the `variables` property. You only ever define one `variables` property, just include any variables from any of the templates or addons that you've specified. Here's an example for a device card with a custom width, 1 attribute and dynamic icons: 387 | 388 | ```yaml 389 | type: custom:button-card 390 | template: 391 | - device 392 | - dynamic_icons 393 | entity: switch.something 394 | variables: 395 | width: 200px 396 | attributes: 397 | - id: that_attribute 398 | icon: mdi:plus 399 | icon: "mdi:wifi" 400 | icon_on: "mdi:wifi-star" 401 | icon_unavailable: "mdi:wifi-cancel" 402 | # ... 403 | ``` 404 | ## Templates 405 | 406 | ### Title (`title`) 407 | 408 | ![title](images/title-hotdogs.png) 409 | 410 | It's what it says on the tin. Title is created from the `name` property and supports an optional `icon`. It has an automatic width and so you can put things next to it in a `horizontal stack` and you can `mirror` it so it goes right-to-left if you need. Examples of these variations can be seen in the image at the beginning of this README. 411 | 412 | #### Title Variables 413 | 414 | | Variable | Values | Default | Description | 415 | | - | - | - | - | 416 | | `color` | String (CSS) | `var(--primary-background-color)` | The color of the icon | 417 | | `background_color` | String (CSS) | `var(--state-icon-color)` | The color of the background | 418 | | `mirror` | Boolean | `false` | Run right-to-left instead of left-to-right | 419 | 420 | #### Title Example YAML 421 | 422 |
See the YAML...

423 | 424 | ```yaml 425 | type: custom:button-card 426 | template: title 427 | name: Title for Hotdogs 428 | icon: mdi:hotdog 429 | variables: 430 | color: var(--primary-background-color) 431 | background_color: var(--state-icon-color) 432 | mirror: false 433 | ``` 434 | 435 |

436 | 437 | ### Landscape Button (`button_landscape`) 438 | 439 | This template serves as the base template for the `device` and `light` templates. You probably won't need to use it yourself until you step up to the advanced Through it's configuration and addons which it inherits it has features to reduce the card size and opacity if the entity is unavailable, hide the label containing extra information (like attributes or brightness and color for lights) when the entity is `off`, highlight elements when you hover over it to show it's interactive, set a max-height and include the standard set of `actions`. 440 | 441 | > :raising_hand_man: _Remember if a template inherits an addon you can just use those variables to change the properties when using this template. For example; a card with only the `button_landscape` template specified can accept the `width` and `height` variables from the `resizable` addon. This is the case for all templates and addons. Also inheritance is recursive so if a template inherits another template it also inherits that templates inherited templates right back through the chain. So when you use the `light` template you get all of the options listed here as well._ 442 | 443 | #### Landscape Button Inherits 444 | 445 | - state_helper 446 | - style_helper 447 | - [`actions`](#actions-actions) 448 | - [`resizable`](#resizable-resizable) 449 | - interactive 450 | 451 | #### Landscape Button Variables 452 | 453 | | Variable | Values | Default | Description | 454 | | - | - | - | - | 455 | | `off_hide_info` | Boolean | `true` | Hides the Extra Information or `label` (eg. brightness and color on lights or the attributes on devices) when the entity is off. Set to false if you wish to display this content while the entity is off. _Keep in mind that some attributes are not available when an entity's state is off._ | 456 | 457 | ### Action Button (`button_action`) 458 | 459 | ![button_action](images/button-action.gif) 460 | 461 | The Action button is for Automation, Scripts or Timers. It has an animated icon while running and it shows the last run time when idle. You can customise the `name` property which defaults to "Start" and you can also specify a different name while it's running using the `name_on` variable which defaults to "Cancel". 462 | 463 | If you define a `timer` as the `entity` then a tap will start the timer and while active it will show the time remaining and you can tap again to cancel the timer. If you provide a Script or Automation `entity` that starts a timer in it's actions/sequence then you can use the `timer` variable to specify the timer and it will be shown when active, even if the Script/Automation is finished/idle. It will show until the timer runs out or you can double tap to cancel the timer. 464 | 465 | #### Action Button Inherits 466 | 467 | - state_helper 468 | - style_helper 469 | - [`dynamic_icons`](#dynamic-icons-dynamic_icons) 470 | - [`resizable`](#resizable-resizable) 471 | - interactive 472 | 473 | #### Action Button Variables 474 | 475 | | Variable | Value Type | Default | Description | 476 | | - | - | - | - | 477 | | `timer` | `timer.*` | | A timer entity that is started by your script. Not required if your `entity` is already a timer. 478 | | `icon_on` | `mdi:*` | `mdi:stop` | Set a custom icon for while the script/timer is running. Inherited from `dynamic_icons`. You can use the card `icon` property to change the default icon (`mdi:play`). | 479 | | `name_on` | String | `Cancel` | Set a custom name for while the script/timer is running. You can use the card `name` property to change the default name (`Start`). | 480 | 481 | #### Action Button Example YAML 482 | 483 |
See the YAML...

484 | 485 | ```yaml 486 | - type: custom:button-card #### Action Script with Timer ####> 487 | template: button_action 488 | entity: script.test_script 489 | name: Script with Timer 490 | variables: 491 | height: 50px 492 | timer: timer.test_timer 493 | triggers_update: timer.test_timer 494 | - type: grid 495 | square: false 496 | columns: 2 497 | cards: 498 | - type: custom:button-card # #### Action Timer ####> 499 | template: button_action 500 | entity: timer.test_timer 501 | name: Start Timer 502 | variables: 503 | height: 45px 504 | name_on: Cancel Timer 505 | - type: custom:button-card 506 | template: button_action 507 | entity: script.test_script_2 # #### Action Script ####> 508 | name: Start Script 509 | variables: 510 | height: 45px 511 | name_on: Stop Script 512 | ``` 513 | 514 |

515 | 516 | ### Mini Button (`button_mini`) 517 | 518 | ![button_mini](images/button-mini.png) 519 | 520 | This is a little button which only displays an icon with the option of defining a single text character or another icon as a symbol which will display in front of the main icon. These are great for in a `horizontal-stack` next to the title to control a group or for things like Do Not Disturb (DND) toggles. Of course you can use them for whatever you need. I nearly always add [`dynamic_icons`](#dynamic-icons-dynamic_icons) to them. 521 | 522 | > :raising_hand_man: _The first button in the examples is using the button-card `color_type` property set to `card`. Check out all the [button-card options here]_(https://github.com/custom-cards/button-card) 523 | 524 | #### Mini Button Inherits 525 | 526 | - style_helper 527 | - state_helper 528 | - [`actions`](#actions-actions) 529 | - show_only_icon 530 | - [`resizable`](#resizable-resizable) 531 | - interactive 532 | 533 | #### Mini Button Variables 534 | 535 | | Variable | Values | Default | Description | 536 | | - | - | - | - | 537 | | `symbol` | Single Character String OR `mdi:*` | | A single character of text or an icon to identify the light | 538 | | `symbol_width` | String (CSS) | `50%` | Only applies if the `symbol` is an icon (`mdi:*`). Adjust if the symbol doesn't fit | 539 | | `symbol_font_size` | String (CSS) | `10pt` | Only applies if the `symbol` is a string. Adjust if the symbol doesn't fit | 540 | | `symbol_color` | String (CSS) | `var( --ha-card-background, var(--card-background-color, white) )` | Set a custom symbol color | 541 | 542 | #### Mini Button Example YAML 543 | 544 |
See the YAML...

545 | 546 | _See examples of symbol usage in the [`light_group` section](#light-group-light_group)._ 547 | 548 | ```yaml 549 | - type: custom:button-card # ####| Button Mini DND |####> 550 | template: 551 | - button_mini 552 | - dynamic_icons 553 | color_type: card 554 | color: "#9d3042" 555 | entity: input_boolean.do_not_disturb 556 | variables: 557 | icon: mdi:bell 558 | icon_on: mdi:bell-off 559 | width: 70px 560 | - type: custom:button-card # ####| Button Mini Power |####> 561 | template: button_mini 562 | icon: mdi:power 563 | entity: switch.all_things 564 | variables: 565 | width: 70px 566 | ``` 567 | 568 |

569 | 570 | ### Device (`device`) 571 | 572 | ![device](images/device.png) 573 | 574 | For any `entity` which has on/off state. It can optionally display up to 2 `attributes` from the entity with custom icons, values and units. 575 | 576 | > :raising_hand_man: _If you don't know what attributes are available on your entity you can use the more-info dialogue or check out the [`entity_details` template](#detailed-entity-information-entity_detail)_ 577 | 578 | #### Device Inherits 579 | 580 | - `button_landscape` 581 | 582 | #### Device Variables 583 | 584 | | Variable | Value Type | Default | Description | 585 | | - | - | - | - | 586 | | `attributes` | Array of [Attribute Items](#attribute-item) | `[]` | A list of up to 2 Attribute Item objects. See [Attribute Item](#attribute-item) below for available properties. | 587 | | `attribute_icon_color` | String (CSS) | | Set a custom color for the attribute icons. | 588 | 589 | #### Attribute Item 590 | 591 | | Property | Value Type | Default | Description | 592 | | - | - | - | - | 593 | | `id` | `entity.attributes.*` | | The id of the attribute to display eg. `friendly_name`. _Required_ | 594 | | `icon` | `mdi:*` | | The icon to use for the attribute. | 595 | | `units` | String | | The unit of measurement (if required) for the attribute value. | 596 | | `prefix_units` | Boolean | `false` | When `true` units will appear before the value. | 597 | 598 | #### Device Example YAML 599 | 600 |
See the YAML...

601 | 602 | ```yaml 603 | type: custom:button-card 604 | template: device 605 | entity: switch.wmd_activate 606 | name: Device 607 | icon: mdi:nuke 608 | variables: 609 | attributes: 610 | - id: voltage 611 | icon: mdi:alien 612 | units: Attribute 613 | ``` 614 | 615 |

616 | 617 | ### Smart Plug (`plug`) 618 | 619 | ![plug](images/plug.png) 620 | 621 | Intended for use with smart plugs which have energy metering attributes. Add the smart plug `entity` and you're good to go. 622 | 623 | #### Plug Inherits 624 | 625 | - `device` 626 | 627 | #### Plug Extra information 628 | 629 | - **Current:** The current being used currently (lol) from the `current` attribute. 630 | - **Voltage:** The voltage from the `voltage` attribute. 631 | 632 | #### Plug Example YAML 633 | 634 |
See the YAML... 635 |

636 | 637 | ```yaml 638 | type: custom:button-card 639 | template: plug 640 | entity: switch.smart_plug 641 | name: Smart Plug 642 | ``` 643 | 644 |

645 |
646 | 647 | ### Light (`light`) 648 | 649 | ![light](images/light.png) 650 | 651 | For use with light entities. Just specify the `entity` and the template should do the rest of the work for you. The icon color is set to `auto` so will mimic the current color of the light. _This is a button-card feature and it uses the `--button-card-light-color` css variable_ 652 | 653 | #### Light Inherits 654 | 655 | - `button_landscape` 656 | 657 | #### Light Extra Information 658 | 659 | - **Effects:** If the entity is currently running an effect it will display the effect name derived from the `effect` attribute. 660 | 661 | When there is not an effect running: 662 | 663 | - **Brightness:** The brightness percentage will be displayed calculated from the `brightness` attribute. 664 | - **Color:** When the entity's attribute `color_mode` is set to `color_temp` the color temperature in degrees Kelvin will be displayed otherwise the `rgb_color` attribute will be displayed. 665 | 666 | ### Light with Motion Sensor (`light_motion`) 667 | 668 | ![light_motion](images/light-motion.gif) 669 | 670 | For use with light entities which are controlled by a motion or occupancy sensor. Shows the extra information of the light as well as when occupancy/motion is or was last detected. You specify the light `entity` for the card and then the sensor in the `motion_entity` variable. _The automation for activating the light must already be configured. This button does not provide an automation._ 671 | 672 | #### Light Motion Inherits 673 | 674 | - [`light`](#light-light) 675 | 676 | #### Light Motion Variables 677 | 678 | | Variable | Values | Default | Description | 679 | | - | - | - | - | 680 | | `motion_entity` | `binary_sensor.*` | | The `entity_id` of the motion/occupancy sensor which activates the light in your automation. | 681 | 682 | #### Light Motion Example YAML 683 | 684 |
See the YAML...

685 | 686 | ```yaml 687 | type: custom:button-card 688 | template: light_motion 689 | entity: light.my_light 690 | variables: 691 | motion_entity: binary_sensor.my_motion_sensor 692 | ``` 693 | 694 |

695 | 696 | ### Light Group (`light_group`) 697 | 698 | ![light_group](images/light-group.gif) 699 | 700 | For use with small light groups (up to 6) like multi-globe lamps. Specify a light group and you can have up to 6 separate lights with custom icons and symbols all controlled on one card. The main card controls the group and each individual light can be controlled from an embedded `button_mini`. 701 | 702 | If you're feeling lazy then just specify the light group `entity` and up to the first 6 lights from the group will be automagically added to the card for you with lightbulb icons and numbered 1-_n_. Alternatively you can specify the list of lights manually and control the icons and symbols that are used. 703 | 704 | #### Light Group Inherits 705 | 706 | - [`light`](#light-light) 707 | 708 | #### Light Group Variables 709 | 710 | | Variable | Values | Default | Description | 711 | | - | - | - | - | 712 | | `items` | Array of [Light Items](#light-item) | `[]` | A list of up to 6 lights to display. See the [Light Item](#light-item) table below for available properties. | 713 | 714 | #### Light Item 715 | 716 | | Property | Values | Default | Description | 717 | | - | - | - | - | 718 | | `entity` | `light.*` | | The `entity_id` of the light _Required_ | 719 | | `icon` | `mdi:*` | `mdi:lightbulb` | The icon for the light. | 720 | | `symbol` | Single Character String OR `mdi:*` | | A single character of text or an icon to identify the light | 721 | | `symbol_width` | String (CSS) | `50%` | Only applies if the `symbol` is an icon (`mdi:*`). Adjust if the symbol doesn't fit | 722 | | `symbol_font_size` | String (CSS) | `10pt` | Only applies if the `symbol` is a string. Adjust if the symbol doesn't fit | 723 | | `symbol_color` | String (CSS) | `var( --ha-card-background, var(--card-background-color, white) )` | Set a custom symbol color | 724 | 725 | #### Light Group Example YAML 726 | 727 |
See the YAML...

728 | 729 | ```yaml 730 | #... 731 | - type: custom:button-card # ####| Light Group Auto |####> 732 | template: 733 | - light_group 734 | entity: light.light_group 735 | name: Light Group Auto 736 | - type: custom:button-card # ####| Light Group Custom |####> 737 | template: 738 | - light_group 739 | entity: light.light_group_passage 740 | name: Light Group 741 | variables: 742 | items: 743 | - entity: light.stairs 744 | symbol: mdi:stairs_left 745 | symbol_color: red 746 | - entity: light.cabinet_left 747 | symbol: C 748 | - entity: light.kitchen_left 749 | symbol: mdi:pot-steam 750 | - entity: light.stairs_right 751 | symbol: mdi:stairs 752 | - entity: light.cabinet_right 753 | symbol: C 754 | - entity: light.kitchen_right 755 | symbol: mdi:pot-steam 756 | ``` 757 | 758 |

759 | 760 | ### Value Strip (`value_strip`) 761 | 762 | ![value_strip](images/value-strips.png) 763 | 764 | Value strips can be used to control anything which has a gradual, numeric value. The most obvious examples are brightness / color of lights, covers position (like blinds and garage doors) or temperature for environmental controls. Let your imagination run wild though, they can be customised and used for anything you like. They give you quick tap access to 5 pre-set values and if the value of an item matches the value of the target then they are set to active and highlighted. 765 | 766 | There are two pre-built options, `brightness` and `cover`, for you to use which are available by [setting the `type` variable](#value-strip-types). 767 | 768 | 769 | #### Value Strip Variables 770 | 771 | | Variable | Property | Values | Default | Description | 772 | | - | - | - | - | - | 773 | | `type` | | `value` \| `brightness` \| `cover` | `value` | The type of value strip. See [Value Strip Types](#value-strip-types) below for descriptions of the available values. | 774 | | `show`: | ... | Object | | The following properties allow you to enable / disable some of the design features. There's an example of all the options in the image above. | 775 | | | `icon` | Boolean | `true` | Show the icon for each value | 776 | | | `value` | Boolean | `true` | Show the value text and units for each value | 777 | | | `fade` | Boolean | `true` | Fade the items according to their value (best with `brightness`) | 778 | | `items` | | Array of [value strip items](#value-strip-item) | See [Value Strip Types](#value-strip-types) | Define the items in your `value_strip`. See [value strip item](#value-strip-item) below for available properties. 779 | 780 | #### Value Strip Types 781 | 782 | - **`value`:** _(default)_ This is for creating completely custom Value Strips. You will need to provide the array of `items` to define all 5 items in the strip. 783 | - **`brightness`:** This is for use with a light entity and has five percentage values for brightness. It has the `light.turn_on` service configured in the `tap_action` and highlights the matching value by calculating the brightness percentage from `light.attributes.brightness`.
Default items...

784 | 785 | ```yaml 786 | items: 787 | - value: 10 788 | units: '%' 789 | icon: mdi:brightness-3 790 | - value: 25 791 | units: '%' 792 | icon: mdi:brightness-4 793 | - value: 50 794 | units: '%' 795 | icon: mdi:brightness-5 796 | - value: 75 797 | units: '%' 798 | icon: mdi:brightness-6 799 | - value: 100 800 | units: '%' 801 | icon: mdi:brightness-7 802 | ``` 803 | 804 |

805 | 806 | - **`cover`:** This is for use with blinds or similar. It has the `cover.set_position` service configured in the `tap_action` and matches the active value using `entity.attributes.current_position`.
Default items...

807 | 808 | ```yaml 809 | items: 810 | - value: 0 811 | icon: mdi:blinds 812 | prefix: '' 813 | units: '%' 814 | label: close 815 | - value: 25 816 | icon: mdi:blinds 817 | units: '%' 818 | - value: 50 819 | icon: mdi:blinds-open 820 | units: '%' 821 | - value: 75 822 | icon: mdi:blinds-open 823 | units: '%' 824 | - value: 100 825 | icon: mdi:blinds-open 826 | units: '%' 827 | prefix: '' 828 | label: open 829 | ``` 830 | 831 |

832 | 833 | #### Value Strip Item 834 | 835 | | Property | Values | Default | Description | 836 | | - | - | - | - | 837 | | `value` | Number | | The value to of this item. Used for the action and for display. _Required_ | 838 | | `icon` | `mdi:*` | | The icon for this item | 839 | | `units` | String | | The unit of measurement for the item | 840 | | `prefix` | String | | Any text you would like to prefix before the value. | 841 | | `label` | String | | If provided the label will be displayed instead of the value | 842 | | `color` | String (CSS) | `var(--paper-item-icon-color)` | The color of the item | 843 | | `active_color` | String (CSS) | `var(--button-card-light-color, var(--accent-color))` | The color of the item when it is active (it matches the target value) | 844 | 845 | #### Value Strip Example YAML 846 | 847 |
See the YAML...

848 | 849 | _These aren't the same as the example images, no need to include too much YAML!_ 850 | 851 | ```yaml 852 | #... 853 | - type: custom:button-card # ####| Brightness Strip, Transparent, Only Icons |####> 854 | template: 855 | - value_strip 856 | - transparent 857 | variables: 858 | type: brightness 859 | al_area_id: den 860 | show: 861 | icon: true 862 | value: false 863 | - type: custom:button-card # ####| Custom Cover Strip, Icons and Value, No Fade |####> 864 | template: value_strip 865 | entity: cover.den_blinds 866 | variables: 867 | type: cover 868 | show: 869 | icon: true 870 | value: true 871 | fade: false 872 | items: 873 | - value: 0 874 | icon: mdi:blinds 875 | units: '%' 876 | label: close 877 | - value: 25 878 | icon: mdi:blinds 879 | units: '%' 880 | - value: 50 881 | icon: mdi:blinds-open 882 | units: '%' 883 | - value: 75 884 | icon: mdi:blinds-open 885 | units: '%' 886 | - value: 100 887 | icon: mdi:blinds-open 888 | units: '%' 889 | label: open 890 | ``` 891 | 892 |

893 | 894 | ### Info Card (`info`) 895 | 896 | ![info](images/info.png) 897 | 898 | The Info card is for displaying entities and their states or attributes. It's great for displaying sensors. You can display up to 4 items in an info card. 899 | 900 | #### Info Inherits 901 | 902 | - no_actions 903 | 904 | #### Info Variables 905 | 906 | | Variable | Values | Default | Description | 907 | | - | - | - | - | 908 | | `items` | Array of [Info Items](#info-item) | `[]` | A list of up to 4 items. See the [Info Item](#info-item) table below for available properties _Required_ | 909 | | `mini` | Boolean | `false` | Display using the `info_mini` template rather than the `info_item` one | 910 | | `icon_color` | String (CSS) | `var(--state-icon-color, var(--paper-item-icon-color))` | Set the color of the icons. This will be overridden by a `color` set on any individual items. | 911 | 912 | #### Info Item 913 | 914 | | Property | Values | Default | Description | 915 | | - | - | - | - | 916 | | `entity_id` | Any entity | | The `entity_id` of the item | 917 | | `attribute` | `entity.attributes.*` | | The id of any attribute of the entity specified above. If provided the value of the attribute will be used rather than the entity state. | 918 | | `state` | String | | Providing this will completely override the `entity_id` and `attribute` states and display this string instead. You don't need to specify an `entity_id` if you use this. | 919 | | `units` | String | The entity attribute `unit_of_measurement` | Set a custom unit of measurement for the displayed value | 920 | | `prefix_units` | Boolean | `false` | Display the `units` in front of the value rather than after. Automatically `true` for `$` and `€` units | 921 | | `decimals` | Number | | Round the value to the specified number of decimal places (`0` for a whole number). Automatically `2` for `$` and `€` units | 922 | | `name` | String | The entity `friendly_name` or the attribute name | Set a custom display name for the item | 923 | | `icon` | `mdi:*` | The entity icon | The icon for the entity. | 924 | | `color` | String (CSS) | `variables.icon_color` | Set a custom color for the icon | 925 | 926 | #### Info Example YAML 927 | 928 |
See the YAML...

929 | 930 | ```yaml 931 | # ... 932 | - type: custom:button-card # ####| Info x 3 |####> 933 | template: info 934 | variables: 935 | items: 936 | - entity_id: sensor.temperature 937 | name: Custom Color 938 | color: '#e04632' 939 | decimals: 2 940 | - entity_id: cover.blinds 941 | attribute: current_position 942 | units: 'ATTRIBUTE ' 943 | prefix_units: true 944 | - icon: mdi:lightbulb-variant 945 | name: No Entity 946 | state: 'Custom' 947 | - type: custom:button-card # ####| Info x 4 Transparent |####> 948 | template: 949 | - info 950 | - transparent 951 | variables: 952 | items: 953 | - entity_id: sensor.temperature 954 | name: Rounding 955 | decimals: 0 956 | - icon: mdi:cash 957 | name: Currency 958 | state: '47.3' 959 | units: '$' 960 | color: "#00b59d" 961 | - entity_id: sensor.battery 962 | name: "Sensor" 963 | color: "#febe6e" 964 | - entity_id: input_number.some_counter 965 | name: Custom Icon 966 | icon: mdi:clock-outline 967 | ``` 968 | 969 |

970 | 971 | ### Mini Info (`info_mini`) 972 | 973 | ![info_mini](images/info-mini.gif) 974 | 975 | Displays the icon and state of an entity only. Good for displaying information next to a `title` in a `horizontal-stack`. You can choose between `stack` and `inline` layouts for the state and units. Specify the `entity` and optionally `icon` properties then the other options are in `variables`. 976 | 977 | #### Mini Info Variables 978 | 979 | | Variable | Values | Default | Description | 980 | | - | - | - | - | 981 | | `layout` | `stack` \| `inline` | `stack` | `stack` will show the state with units underneath and `inline` shows the state followed by the units. | 982 | | `attribute` | `entity.attributes.*` | | The id of any attribute of the entity specified above. If provided the value of the attribute will be used rather than the entity state. | 983 | | `state` | String | | Providing this will completely override the `entity` and `attribute` states and display this string instead. | 984 | | `units` | String | The entity attribute `unit_of_measurement` | Set a custom unit of measurement for the displayed value | 985 | | `prefix_units` | Boolean | `false` | Display the `units` in front of the value rather than after. Automatically `true` for `$` and `€` units | 986 | | `decimals` | Number | | Round the value to the specified number of decimal places (`0` for a whole number). Automatically `2` for `$` and `€` units | 987 | | `icon_color` | String (CSS) | `var(--state-icon-color, var(--paper-item-icon-color))` | Set a custom color for the icon | 988 | 989 | #### Mini Info Example YAML 990 | 991 |
See the YAML...

992 | 993 | ```yaml 994 | # ... 995 | - type: custom:button-card # ####| Spin |####> 996 | template: 997 | - transparent 998 | - info_mini 999 | entity: cover.den_blinds 1000 | variables: 1001 | attribute: current_position 1002 | units: 'SPIN' 1003 | state: '↻' 1004 | spin: true 1005 | icon_color: 'rgba(247, 138, 80, 0.2)' 1006 | icon: mdi:fan 1007 | - type: custom:button-card # ####| Inline |####> 1008 | template: 1009 | - info_mini 1010 | - transparent 1011 | entity: sensor.percentage 1012 | icon: mdi:chart-pie 1013 | variables: 1014 | icon_color: 'rgba(157, 48, 66, 0.4)' 1015 | layout: inline 1016 | attribute: current_position 1017 | units: '%' 1018 | - type: custom:button-card # ####| Background |####> 1019 | template: info_mini 1020 | entity: input_number.some_time 1021 | icon: mdi:clock-time-nine-outline 1022 | ``` 1023 | 1024 |

1025 | 1026 | ## Addons 1027 | 1028 | You can use any addon by including it after your template in a list as shown in the example above. Addons with a star (*) are included in _most_ button templates already. 1029 | 1030 | ### Actions (`actions`)* 1031 | 1032 | The `actions` addon will add the `toggle` action for single tap and `more-info` action for hold and double tap as well as the haptic `success` for the iOS app. It's included in most of the button templates by default. 1033 | 1034 | ### No Actions (`no_actions`) 1035 | 1036 | The `no_actions` addon does the opposite of above. It removes the standard functionality and sets your card to have no actions. 1037 | 1038 | ### Dynamic Icons (`dynamic_icons`) 1039 | 1040 | The `dynamic_icons` addon will add functionality to the card which will change the icon dependant on the state of the entity. It works for all entities that have an "on" and "off" state. 1041 | 1042 | > :raising_hand_man: _If you just want to have a static custom icon for your card then it's easiest just to populate the `icon` property._ 1043 | 1044 | #### Dynamic Icon Variables 1045 | 1046 | | Variable | Values | Default | Description | 1047 | | - | - | - | - | 1048 | | `icon` | `mdi:*` | `mdi:wifi` | The icon to display when the entity is off. | 1049 | | `icon_on` | `mdi:*` | `mdi:wifi-star` | The icon to display when the entity is on. | 1050 | | `icon_unavailable` | `mdi:*` | `mdi:wifi-cancel` | The icon to display when the entity is unavailable. | 1051 | 1052 | ### Resizable (`resizable`)* 1053 | 1054 | The `resizable` addon allows you to use `height` and `width` variables to define the size of the card (some templates have min or max sizes set though). It's added to most button templates already so you only need to include the variables to set a custom size for your card. 1055 | 1056 | #### Resizable Variables 1057 | 1058 | | Variable | Values | Default | Description | 1059 | | - | - | - | - | 1060 | | `height` | String (CSS) | _per card_ | The height of the card in any CSS accepted value. Eg `40px` or `90%` | 1061 | | `width` | String (CSS) | _per card_ | The width of the card in any CSS accepted value. Eg `40px` or `90%` | 1062 | 1063 | ### Transparent (`transparent`) 1064 | 1065 | The `transparent` addon will make the background of your card transparent, remove it's `box-shadow` and `border`. I find this looks great with `value_strip` and `info_mini` templates but you can use it on any you like. 1066 | 1067 | ## Advanced Usage 1068 | 1069 | If you've poked around the files or read any of the **Inherits** lists you will notice . They were ones that I used in creation of the templates but you won't need them unless you're making your own templates or advanced changes. I'll document them soon but in the interest of actually getting this release out I'm going to assume if you're doing advanced stuff you can check them out and use them accordingly. 1070 | 1071 | _A special mention for `debug` and `entity_detail` which are included below._ 1072 | 1073 | ### Debug 1074 | 1075 | When added to a card's `template` list `debug` will write a `console.debug()` containing objects that can help you figure out what's happening. So in your browser inspector console you can see the button-card (`this`), the `variables` and the `entity` objects. It comes in handy if things aren't working. If you're going to submit a issue on GitHub you'll need to be able to get this info. Remember to set the level of your browser console to All so you can see the debug messages._ 1076 | 1077 | ### Detailed Entity Information (`entity_detail`) 1078 | 1079 | Mostly used for creating and debugging the templates this card displays the full properties and attributes of an entity in a table. 1080 | 1081 | ![entity_detail card](images/entity-detail.png) 1082 | 1083 | ## Thanks 1084 | 1085 | Massive thanks to [@RomRider](https://github.com/RomRider) and everyone who contributed to [Button Card](https://github.com/custom-cards/button-card) which is the only reason these templates were possible. 1086 | -------------------------------------------------------------------------------- /addons/actions.yaml: -------------------------------------------------------------------------------- 1 | ####{ CreativeBC }####| +Actions |####[ github.com/wfurphy/creative-button-card-templates ]####> 2 | 3 | ############| +Addon Default Actions |############################> 4 | actions: 5 | tap_action: 6 | action: toggle 7 | haptic: success 8 | double_tap_action: 9 | action: more-info 10 | haptic: success 11 | hold_action: 12 | action: more-info 13 | haptic: success 14 | 15 | ############| +Addon NO Actions |############################> 16 | no_actions: 17 | tap_action: 18 | action: none 19 | haptic: failure 20 | double_tap_action: 21 | action: none 22 | haptic: failure 23 | hold_action: 24 | action: none 25 | haptic: failure 26 | 27 | #########################################################################/ 28 | -------------------------------------------------------------------------------- /addons/debug.yaml: -------------------------------------------------------------------------------- 1 | ####{ CreativeBC }####| +Debug |####[ github.com/wfurphy/creative-button-card-templates ]####> 2 | debug: 3 | variables: 4 | debug: true 5 | debug_hass: false 6 | debug_extras: 7 | __title: '::CreativeButtonCards::DEBUG::>' 8 | custom_fields: 9 | debugger: > 10 | [[[ 11 | if (!variables.debug) return 12 | 13 | const o = { 14 | variables: variables, 15 | entity: entity ? entity : {}, 16 | bc: this 17 | } 18 | 19 | if (variables.debug_hass) { 20 | o.hass = hass 21 | } 22 | 23 | if (variables.debug_extras) { 24 | o.extras = variables.debug_extras 25 | } 26 | 27 | console.debug(variables.__title, o) 28 | ]]] 29 | styles: 30 | custom_fields: 31 | debugger: 32 | - height: 0 33 | - width: 0 34 | - visibility: hidden 35 | 36 | #########################################################################/ 37 | -------------------------------------------------------------------------------- /addons/dynamic_icons.yaml: -------------------------------------------------------------------------------- 1 | ############| +Addon > Dynamic Icons |###########################> 2 | dynamic_icons: 3 | template: state_helper 4 | variables: 5 | icon: "mdi:wifi" 6 | icon_on: "mdi:wifi-star" 7 | icon_unavailable: "mdi:wifi-cancel" 8 | state: 9 | - id: cbc_on 10 | icon: "[[[ return variables.icon_on ]]]" 11 | - id: cbc_unavailable 12 | icon: "[[[ return variables.icon_unavailable ]]]" 13 | icon: "[[[ return variables.icon ]]]" 14 | 15 | #########################################################################/ 16 | -------------------------------------------------------------------------------- /addons/interactive.yaml: -------------------------------------------------------------------------------- 1 | ####{ CreativeBC }####| +Interactive |####[ github.com/wfurphy/creative-button-card-templates ]####> 2 | interactive: 3 | card_mod: 4 | style: | 5 | ha-card:hover::after { 6 | display: block; 7 | position:absolute; 8 | top: 0; 9 | left: 0; 10 | width: 100%; 11 | height: 100%; 12 | background: rgba(255,255,255,0.02); 13 | content: ''; 14 | z-index: 1 15 | } 16 | ha-card:hover #label { opacity: 0.8 !important; } 17 | ha-card:hover #name { opacity: 1 !important; } 18 | ha-card:hover #icon { opacity: 1 !important; } 19 | 20 | ############################################################################/ 21 | -------------------------------------------------------------------------------- /addons/resizable.yaml: -------------------------------------------------------------------------------- 1 | ####{ CreativeBC }####| +Resizable |####[ github.com/wfurphy/creative-button-card-templates ]####> 2 | resizable: 3 | variables: 4 | height: 5 | width: 6 | styles: 7 | card: 8 | - min-height: 40px 9 | - max-width: 100% 10 | - height: "[[[ return variables.height ]]]" 11 | - width: "[[[ return variables.width ]]]" 12 | 13 | ############################################################################/ 14 | -------------------------------------------------------------------------------- /addons/show_helpers.yaml: -------------------------------------------------------------------------------- 1 | ####{ CreativeBC }####| +Show Helpers |####[ github.com/wfurphy/creative-button-card-templates ]####> 2 | 3 | ## @TODO ##> Add ability to customise show behavior for all elements 4 | # always|hover|on|on_hover|off|off_hover|never 5 | 6 | ################| Show Only Icon |################> 7 | show_none: 8 | show_name: false 9 | show_icon: false 10 | show_state: false 11 | show_last_changed: false 12 | show_label: false 13 | 14 | ################| Show Only Icon |################> 15 | show_only_icon: 16 | show_name: false 17 | show_icon: true 18 | show_state: false 19 | show_last_changed: false 20 | show_label: false 21 | 22 | ################| Show only Name |################> 23 | show_only_name: 24 | show_name: true 25 | show_icon: false 26 | show_state: false 27 | show_last_changed: false 28 | show_label: false 29 | 30 | ############################################################################/ 31 | 32 | -------------------------------------------------------------------------------- /addons/state_helper.yaml: -------------------------------------------------------------------------------- 1 | ####{ Creative BC }########| +State Helper |########[ github.com/wfurphy ]#####> 2 | state_helper: 3 | state: 4 | - id: cbc_custom_1 5 | operator: template 6 | value: false 7 | - id: cbc_custom_2 8 | operator: template 9 | value: false 10 | - id: cbc_custom_3 11 | operator: template 12 | value: false 13 | - id: cbc_custom_4 14 | operator: template 15 | value: false 16 | - id: cbc_on 17 | value: 'on' 18 | styles: 19 | icon: 20 | - opacity: 0.95 21 | name: 22 | - opactiy: 0.9 23 | - id: cbc_off 24 | value: 'off' 25 | styles: 26 | icon: 27 | - opacity: 0.8 28 | name: 29 | - opactiy: 0.8 30 | - id: cbc_unavailable 31 | value: "unavailable" 32 | label: Unavailable 33 | styles: 34 | card: 35 | - min-height: 40px 36 | - height: 40px 37 | - opacity: 0.2 38 | - box-shadow: none; 39 | label: 40 | - display: block 41 | - margin-top: 0 42 | 43 | ################################################################################/ 44 | 45 | -------------------------------------------------------------------------------- /addons/style_helper.yaml: -------------------------------------------------------------------------------- 1 | ####{ CreativeBC }####| +Style Helper |####[ github.com/wfurphy/creative-button-card-templates ]####> 2 | style_helper: 3 | styles: 4 | card: 5 | - opacity: 1 6 | icon: 7 | - opacity: 0.95 8 | name: 9 | - opacity: 0.9 10 | label: 11 | - opacity: 0.6 12 | state: 13 | - opacity: 1 14 | 15 | ############################################################################/ 16 | 17 | -------------------------------------------------------------------------------- /addons/transparent.yaml: -------------------------------------------------------------------------------- 1 | ####{ CreativeBC }####| +Transparent |####[ github.com/wfurphy/creative-button-card-templates ]####> 2 | transparent: 3 | styles: 4 | card: 5 | - background: none 6 | - box-shadow: none 7 | - border: none 8 | 9 | #########################################################################/ 10 | 11 | -------------------------------------------------------------------------------- /button_action.yaml: -------------------------------------------------------------------------------- 1 | ####{ CreativeBC }####| Action Button |####[ github.com/wfurphy/creative-button-card-templates ]####> 2 | button_action: 3 | template: 4 | - state_helper 5 | - style_helper 6 | - dynamic_icons 7 | - resizable 8 | - interactive 9 | variables: 10 | off_hide_info: false 11 | icon: mdi:play 12 | icon_on: mdi:stop 13 | name_on: "Cancel" 14 | timer: 15 | show_state: true 16 | show_name: true 17 | show_label: true 18 | show_last_changed: true 19 | name: Start 20 | tap_action: 21 | action: > 22 | [[[ return entity?.entity_id.search('timer.') !== -1 ? 'call-service' : 'toggle' ]]] 23 | service: > 24 | [[[ return entity?.state == 'active' ? 'timer.cancel' : 'timer.start' ]]] 25 | service_data: 26 | entity_id: > 27 | [[[ return entity?.entity_id ]]] 28 | haptic: success 29 | double_tap_action: 30 | action: call-service 31 | haptic: success 32 | service: timer.cancel 33 | service_data: 34 | entity_id: "[[[ return variables.timer ]]]" 35 | hold_action: 36 | action: more-info 37 | haptic: success 38 | state: 39 | - id: cbc_custom_1 40 | operator: template 41 | value: > 42 | [[[ 43 | return entity?.entity_id.search('timer.') !== -1 && entity.state == 'active' 44 | ]]] 45 | icon: "[[[ return variables.icon_on ]]]" 46 | name: "[[[ return variables.name_on ]]]" 47 | styles: 48 | grid: 49 | - grid-template-areas: '"i s" "i n"' 50 | name: 51 | - font-size: 12px 52 | - justify-self: start 53 | - align-self: start 54 | - text-align: left 55 | - color: var(--accent-color) 56 | state: 57 | - font-size: 16.8px 58 | - justify-self: start 59 | - align-self: end 60 | - opacity: 1 61 | - display: block 62 | icon: 63 | - color: var(--accent-color) 64 | label: 65 | - display: none 66 | custom_fields: 67 | loadicon: 68 | - display: block 69 | - id: cbc_on 70 | name: "[[[ return variables.name_on ]]]" 71 | label: Something 72 | styles: 73 | icon: 74 | - color: var(--accent-color) 75 | name: 76 | - color: var(--accent-color) 77 | label: 78 | - display: "[[[ return variables.timer && states[variables.timer].state == 'active' ? 'none' : 'block' ]]]" 79 | custom_fields: 80 | loadicon: 81 | - display: block 82 | styles: 83 | grid: 84 | - grid-template-areas: > 85 | [[[ return variables.timer && states[variables.timer].state == 'active' ? '"i n" "i timer"' : '"i n" "i l"' ]]] 86 | # - grid-template-areas: '"i n" "i l"' 87 | - grid-template-columns: 60px auto 88 | - grid-template-rows: 1fr 1fr 89 | - justify-items: start 90 | - align-items: center 91 | card: 92 | - min-height: 40px 93 | - border: none 94 | - padding: 2px 95 | - align-items: center 96 | icon: 97 | - justify-self: center 98 | - align-self: center 99 | - overflow: visible 100 | - width: 30px 101 | - color: var(--paper-item-icon-color) 102 | name: 103 | - justify-self: start 104 | - align-self: end 105 | - text-align: left 106 | label: 107 | - font-size: 12px 108 | - justify-self: start 109 | - align-self: start 110 | - text-align: left 111 | - display: > 112 | [[[ return variables.timer && states[variables.timer].state == 'active' ? 'none' : 'block' ]]] 113 | state: 114 | - font-size: 12px 115 | - justify-self: start 116 | - align-self: start 117 | - text-align: left 118 | - display: none 119 | custom_fields: 120 | loadicon: 121 | - position: absolute 122 | - align-self: center 123 | - justify-self: start 124 | - width: 35px 125 | - margin-left: 12.5px 126 | - opacity: 0.6 127 | - display: none 128 | timer: 129 | - justify-self: start 130 | - justify-text: left 131 | - display: none 132 | - display: > 133 | [[[ return variables.timer && states[variables.timer].state == 'active' ? 'block' : 'none' ]]] 134 | custom_fields: 135 | loadicon: > 136 | [[[ return html`` ]]] 137 | timer: 138 | card: 139 | type: custom:button-card 140 | template: 141 | - transparent 142 | - no_actions 143 | entity: "[[[ return variables.timer ]]]" 144 | icon: mdi:timer-outline 145 | label: Double Tap
to Cancel 146 | show_name: false 147 | show_state: true 148 | show_label: true 149 | size: 20px 150 | styles: 151 | card: 152 | - height: 25px 153 | - padding: 0 154 | grid: 155 | - grid-template-areas: '"i s l"' 156 | - grid-template-columns: 20px auto auto 157 | - grid-template-rows: auto 158 | - align-items: start 159 | - justify-items: start 160 | - padding: 0 161 | state: 162 | - justify-self: end 163 | - align-self: center 164 | - justify-text: right 165 | - opacity: 1 166 | - font-size: 16px 167 | - margin-left: 5px 168 | label: 169 | - justify-self: start 170 | - align-self: center 171 | - justify-text: left 172 | - opacity: 1 173 | - color: var(--accent-color) 174 | - font-size: 9px 175 | - margin-left: 10px 176 | 177 | 178 | 179 | #########################################################################/ 180 | -------------------------------------------------------------------------------- /button_landscape.yaml: -------------------------------------------------------------------------------- 1 | ####{ CreativeBC }####| Landscape Button Template |####[ github.com/wfurphy/creative-button-card-templates ]####> 2 | button_landscape: 3 | template: 4 | - state_helper 5 | - style_helper 6 | - actions 7 | - resizable 8 | - interactive 9 | variables: 10 | off_hide_info: true 11 | size: 50px 12 | show_icon: true 13 | show_name: true 14 | state: 15 | - id: cbc_off 16 | styles: 17 | label: 18 | - display: "[[[ return variables.off_hide_info ? 'none' : 'block' ]]]" 19 | styles: 20 | grid: 21 | - grid-template-areas: '"i i n" "i i l"' 22 | - grid-template-columns: 1fr 1fr 4fr 23 | - grid-template-rows: 1fr 1fr 24 | - justify-items: start 25 | - align-items: center 26 | - padding: 4px 27 | card: 28 | - min-height: 80px 29 | - padding: 0 30 | icon: 31 | - justify-self: center 32 | - align-self: center 33 | name: 34 | - justify-self: start 35 | - align-self: end 36 | - text-align: left 37 | label: 38 | - justify-self: start 39 | - align-self: start 40 | - font-size: 80% 41 | - margin-top: 5px 42 | - text-align: left 43 | state: 44 | - justify-self: start 45 | 46 | #########################################################################/ 47 | 48 | -------------------------------------------------------------------------------- /button_mini.yaml: -------------------------------------------------------------------------------- 1 | button_mini: 2 | template: 3 | - style_helper 4 | - state_helper 5 | - actions 6 | - show_only_icon 7 | - resizable 8 | - interactive 9 | variables: 10 | height: 40px 11 | symbol: 12 | symbol_width: 50% 13 | symbol_font_size: 10pt 14 | symbol_color: var( --ha-card-background, var(--card-background-color, white) ) 15 | size: 30px 16 | custom_fields: 17 | symbol: > 18 | [[[ 19 | if (!variables.symbol) return '' 20 | 21 | let sym = String(variables.symbol) 22 | 23 | if (sym.search('mdi:') !== -1) { 24 | return `` 25 | } 26 | 27 | sym = sym.substring(0,1) 28 | return `${sym}` 29 | ]]] 30 | styles: 31 | card: 32 | - min-width: 30px 33 | custom_fields: 34 | symbol: 35 | - width: "[[[ return variables.symbol_width ]]]" 36 | - position: absolute 37 | - justify-self: center 38 | - margin-top: "-25%" 39 | - color: "[[[ return variables.symbol_color ]]]" 40 | - font-size: "[[[ return variables.symbol_font_size ]]]" 41 | - font-weight: bold 42 | 43 | ############| Button Mini - Embeded |###########################> 44 | button_mini_embed: 45 | variables: 46 | width: 30px 47 | template: 48 | - button_mini 49 | - transparent 50 | styles: 51 | card: 52 | - min-width: 10px 53 | 54 | ############| Button Mini + State |###########################> 55 | button_mini_state: 56 | template: 57 | - button_mini 58 | layout: icon_state 59 | entity: input_boolean.air_circulation 60 | show_state: true 61 | # color_type: card 62 | size: 25px 63 | styles: 64 | card: 65 | - height: 40px 66 | - width: 70px 67 | state: 68 | - justify-self: center 69 | - text-align: left 70 | # - margin-left: '-5px' 71 | - font-size: 11pt 72 | icon: 73 | - justify-self: end 74 | - margin-left: 5px 75 | 76 | #########################################################################/ -------------------------------------------------------------------------------- /custom/example.yaml: -------------------------------------------------------------------------------- 1 | ####{ CreativeBC }####| Example Custom Template|####[ github.com/wfurphy/creative-button-card-templates ]####> 2 | 3 | ####| Custom: Blue Title |###############################################> 4 | title_blue: 5 | template: title 6 | variables: 7 | color: var(--primary-background-color) 8 | background_color: rgba(45, 94, 139, 0.3) 9 | show_tab: false 10 | styles: 11 | card: 12 | - padding-right: 20px 13 | - opacity: 1 14 | icon: 15 | - opacity: 1 16 | name: 17 | - opactiy: 0.7 18 | 19 | ####>> WARNING: DO NOT REMOVE THE FOLLOWING 2 LINES (even empty) <<#####/ 20 | ############################################################################/ 21 | -------------------------------------------------------------------------------- /device.yaml: -------------------------------------------------------------------------------- 1 | ####{ CreativeBC }####| Device |####[ github.com/wfurphy/creative-button-card-templates ]####> 2 | device: 3 | template: 4 | - button_landscape 5 | variables: 6 | off_hide_info: true 7 | ## attr @deprecated v0.2 replaced by attributes 8 | attr: [] 9 | attributes: [] 10 | attribute_icon_color: var(--state-icon-color) 11 | __defaults: 12 | id: '' 13 | icon: 'mdi:layers-plus' 14 | state: 15 | units: '' 16 | prefix_units: false 17 | show_state: false 18 | show_label: true 19 | label: > 20 | [[[ 21 | variables.attributes = [...variables.attr, ...variables.attributes] 22 | 23 | if (!variables.attributes || !variables.attributes.length) return '' 24 | 25 | let lab = ` 26 | 37 | ` 38 | 39 | variables.attributes.forEach(function(a,i) { 40 | const at = {...variables.__defaults, ...a} 41 | const state = `${a.state || entity.attributes[at.id]}` 42 | const units = `${at.units}` 43 | 44 | lab += `
45 | ` 46 | 47 | if (a.prefix_units) { 48 | lab += units + state 49 | } else { 50 | lab += state + units 51 | } 52 | 53 | lab += `
` 54 | }) 55 | 56 | return lab 57 | ]]] 58 | state: 59 | - id: cbc_on 60 | styles: 61 | icon: 62 | - color: var(--accent-color) 63 | - id: cbc_off 64 | styles: 65 | label: 66 | - 67 | styles: 68 | grid: 69 | - grid-template-rows: > 70 | [[[ 71 | if (!variables.attributes || variables.attributes.length < 2) return '1fr 1fr' 72 | 73 | return entity.state == 'on' ? '1fr 2fr' : '1fr 1fr' 74 | ]]] 75 | 76 | #########################################################################/ 77 | 78 | -------------------------------------------------------------------------------- /empty.yaml: -------------------------------------------------------------------------------- 1 | ####{ CreativeBC }####| Empty Template |####[ github.com/wfurphy/creative-button-card-templates ]####> 2 | empty: 3 | variables: 4 | __empty: true 5 | 6 | ############################################################################/ 7 | -------------------------------------------------------------------------------- /entity_detail.yaml: -------------------------------------------------------------------------------- 1 | ############| Entity Detail - Detailed information panel for debugging |###########################> 2 | entity_detail: 3 | template: 4 | - no_actions 5 | variables: 6 | do_not_split: [] 7 | show_name: true 8 | show_state: true 9 | color: auto 10 | double_tap_action: 11 | action: toggle 12 | custom_fields: 13 | atts: >- 14 | [[[ 15 | let htmlList = 16 | ` 17 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | ` 69 | 70 | for (let i in entity) { 71 | if (['attributes','context'].includes(i)) continue 72 | 73 | htmlList += `` 74 | } 75 | 76 | htmlList += ` 77 | 78 | ` 79 | 80 | for (let a in entity.attributes) { 81 | const value = String(entity.attributes[a]) 82 | htmlList += `` 99 | } 100 | 101 | return htmlList += `
PropertyValue
${i}${entity[i]}
Attributes
${a}` 83 | const no_split = Array.isArray(variables.do_not_split) ? variables.do_not_split.find(e => e == a) : variables.do_not_split == a 84 | 85 | if (!no_split && value.search(/[\|,]+/) >= 0) { 86 | htmlList += `
    ` 87 | const list = value.split(/[\|,]+/) 88 | 89 | list.forEach(v => { 90 | htmlList += `
  • ${v}
    • ` 91 | }) 92 | 93 | htmlList += `
` 94 | } else { 95 | htmlList += `${value}` 96 | } 97 | 98 | htmlList += `
` 102 | ]]] 103 | styles: 104 | grid: 105 | - grid-template-areas: '"i n" "i s" "atts atts"' 106 | - grid-template-columns: 1fr 3fr 107 | - justify-items: center 108 | - padding: 6px 109 | card: 110 | - opacity: "[[[ return !entity || entity.state == 'unavailable' ? 0.6 : 1 ]]]" 111 | icon: 112 | - height: 80px 113 | - justify-self: center 114 | - margin-left: auto 115 | - margin-right: auto 116 | - padding: 10px 117 | name: 118 | - justify-self: start 119 | - align-self: end 120 | - padding: 10px 121 | state: 122 | - justify-self: start 123 | - align-self: start 124 | - padding: 10px 125 | # - opacity: 0.6 126 | - color: > 127 | [[[ 128 | if (!entity) return '#797592' 129 | 130 | switch (entity.state) { 131 | case 'on': 132 | case 'active': 133 | return '#086038' 134 | case 'off': 135 | return '#9d3042' 136 | case 'unavailable': 137 | return '#797592' 138 | default: 139 | return 'var(--primary-text-color)' 140 | } 141 | ]]] 142 | custom_fields: 143 | atts: 144 | - justify-self: strech 145 | - margin-top: 10px 146 | - max-width: 100% 147 | - white-space: nomral 148 | - word-wrap: break-word 149 | 150 | 151 | #########################################################################/ -------------------------------------------------------------------------------- /gap.yaml: -------------------------------------------------------------------------------- 1 | ####{ CreativeBC }####| Gap Card Template |####[ github.com/wfurphy/creative-button-card-templates ]####> 2 | gap: 3 | template: 4 | - transparent 5 | - resizable 6 | styles: 7 | grid: 8 | - padding: 0 9 | - margin: 0 10 | card: 11 | - opacity: 0 12 | - padding: 0 13 | - margin: 0 14 | 15 | #########################################################################/ 16 | -------------------------------------------------------------------------------- /images/button-action.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfurphy/creative-button-card-templates/4796c4270adfe5936015affc2ed3e8eb7f9eb5ba/images/button-action.gif -------------------------------------------------------------------------------- /images/button-mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfurphy/creative-button-card-templates/4796c4270adfe5936015affc2ed3e8eb7f9eb5ba/images/button-mini.png -------------------------------------------------------------------------------- /images/cbc-samples-animated.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfurphy/creative-button-card-templates/4796c4270adfe5936015affc2ed3e8eb7f9eb5ba/images/cbc-samples-animated.gif -------------------------------------------------------------------------------- /images/cbc-samples-noctis.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfurphy/creative-button-card-templates/4796c4270adfe5936015affc2ed3e8eb7f9eb5ba/images/cbc-samples-noctis.png -------------------------------------------------------------------------------- /images/cbc-samples.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfurphy/creative-button-card-templates/4796c4270adfe5936015affc2ed3e8eb7f9eb5ba/images/cbc-samples.gif -------------------------------------------------------------------------------- /images/device.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfurphy/creative-button-card-templates/4796c4270adfe5936015affc2ed3e8eb7f9eb5ba/images/device.png -------------------------------------------------------------------------------- /images/entity-detail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfurphy/creative-button-card-templates/4796c4270adfe5936015affc2ed3e8eb7f9eb5ba/images/entity-detail.png -------------------------------------------------------------------------------- /images/info-mini.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfurphy/creative-button-card-templates/4796c4270adfe5936015affc2ed3e8eb7f9eb5ba/images/info-mini.gif -------------------------------------------------------------------------------- /images/info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfurphy/creative-button-card-templates/4796c4270adfe5936015affc2ed3e8eb7f9eb5ba/images/info.png -------------------------------------------------------------------------------- /images/light-group.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfurphy/creative-button-card-templates/4796c4270adfe5936015affc2ed3e8eb7f9eb5ba/images/light-group.gif -------------------------------------------------------------------------------- /images/light-motion.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfurphy/creative-button-card-templates/4796c4270adfe5936015affc2ed3e8eb7f9eb5ba/images/light-motion.gif -------------------------------------------------------------------------------- /images/light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfurphy/creative-button-card-templates/4796c4270adfe5936015affc2ed3e8eb7f9eb5ba/images/light.png -------------------------------------------------------------------------------- /images/plug.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfurphy/creative-button-card-templates/4796c4270adfe5936015affc2ed3e8eb7f9eb5ba/images/plug.png -------------------------------------------------------------------------------- /images/template-samples.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfurphy/creative-button-card-templates/4796c4270adfe5936015affc2ed3e8eb7f9eb5ba/images/template-samples.png -------------------------------------------------------------------------------- /images/title-hotdogs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfurphy/creative-button-card-templates/4796c4270adfe5936015affc2ed3e8eb7f9eb5ba/images/title-hotdogs.png -------------------------------------------------------------------------------- /images/value-strips.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfurphy/creative-button-card-templates/4796c4270adfe5936015affc2ed3e8eb7f9eb5ba/images/value-strips.png -------------------------------------------------------------------------------- /info.yaml: -------------------------------------------------------------------------------- 1 | ####{ CreativeBC }####| Info |####[ github.com/wfurphy/creative-button-card-templates ]####> 2 | info_helper: 3 | variables: 4 | __item: > 5 | [[[ 6 | return function(v) { 7 | return {...v, ...v.item} 8 | } 9 | ]]] 10 | __makeHtml: > 11 | [[[ 12 | return function(vars) { 13 | const item = {...vars, ...vars.item} 14 | const out = { 15 | units: String(item.units || entity?.attributes.unit_of_measurement || ''), 16 | tag: item.layout == 'stack' ? 'div' : 'span', 17 | prefix: !!item.prefix_units 18 | } 19 | 20 | if (item.state) { 21 | out.state = item.state 22 | } else if (item.attribute && entity) { 23 | out.state = entity.attributes[item.attribute] 24 | } else { 25 | out.state = entity?.state 26 | } 27 | 28 | if (out.units && ['$', '€'].includes(out.units)) { 29 | out.tag = 'span' 30 | out.state = Number(out.state).toFixed(2) 31 | out.prefix = true 32 | } else if (!isNaN(out.state)) { 33 | out.state = +Number(out.state).toFixed(item.decimals) 34 | } 35 | 36 | if (out.prefix) { 37 | return `<${out.tag} class="cbc-units layout-${out.tag}">${out.units}<${out.tag} class="cbc-state">${out.state}` 38 | } else { 39 | return `<${out.tag} class="cbc-state">${out.state}<${out.tag} class="cbc-units layout-${out.tag}">${out.units}` 40 | } 41 | } 42 | ]]] 43 | 44 | #################( Info Mini )################################> 45 | info_mini: 46 | template: 47 | - button_mini 48 | - no_actions 49 | - info_helper 50 | variables: 51 | group: false 52 | item: {} 53 | __type: mini 54 | spin: false 55 | ####/ layout / string { stack|inline } / default: stack /####> 56 | layout: stack 57 | icon_color: var(--state-icon-color, var(--paper-item-icon-color)) 58 | color: 59 | width: 60px 60 | style: 61 | opacity: 62 | icon: 0.4 63 | __css: | 64 | 74 | show_icon: true 75 | show_state: true 76 | show_name: false 77 | state: 78 | - id: cbc_spin 79 | operator: template 80 | value: "[[[ return variables.__item(variables).spin ]]]" 81 | spin: true 82 | state_display: > 83 | [[[ 84 | return variables.__css + variables.__makeHtml(variables) 85 | ]]] 86 | styles: 87 | grid: 88 | - padding: 6px 89 | card: 90 | - padding: 0 91 | - margin: 0 92 | icon: 93 | - opacity: "[[[ return this.___config.template.includes('transparent') ? 1 : variables.style.opacity.icon ]]]" 94 | - justify-self: center 95 | - align-self: center 96 | - max-height: 200% 97 | - max-width: 200% 98 | - height: 48px 99 | - width: 48px 100 | - margin-top: -3px 101 | - padding: 0 102 | - color: > 103 | [[[ 104 | if(variables.__item(variables).color) { return variables.__item(variables).color } else 105 | if(variables.icon_color && variables.icon_color !== 'var(--state-icon-color, var(--paper-item-icon-color))') { return variables.icon_color } 106 | return this.___config.template.includes('transparent') ? 'var( --ha-card-background, var(--card-background-color, white) )' : 'var(--state-icon-color)' 107 | ]]] 108 | state: 109 | - position: fixed 110 | - justify-self: end 111 | - align-self: end 112 | - font-size: 18px 113 | - margin-top: 0 114 | - margin-bottom: 0 115 | - overflow: visible 116 | 117 | #################( Info Item )################################> 118 | info_item: 119 | template: 120 | - style_helper 121 | - no_actions 122 | - transparent 123 | - info_helper 124 | variables: 125 | group: false 126 | item: {} 127 | icon_color: "var(--state-icon-color, var(--paper-item-icon-color))" 128 | name: '' 129 | attribute: '' 130 | color: 131 | __css: | 132 | 141 | show_state: true 142 | show_name: true 143 | state_display: > 144 | [[[ 145 | return variables.__css + variables.__makeHtml(variables) 146 | ]]] 147 | name: > 148 | [[[ 149 | const item = variables.__item(variables) 150 | if(item.name && String(item.name).length > 0) { 151 | return item.name 152 | } 153 | 154 | let att = String(item.attribute) 155 | return att.length > 0 ? att.replace('_', ' ') : entity?.attributes.friendly_name 156 | ]]] 157 | # styles: 158 | styles: 159 | grid: 160 | - position: relative 161 | - grid-template-areas: '"s s s i" "s s s i" "n n n i"' 162 | - grid-template-columns: max-content 163 | - grid-template-rows: 1fr 1fr 1fr 164 | - overflow: visible 165 | - padding: 6px 166 | card: 167 | - height: 50px 168 | - justify-self: center 169 | - align-self: center 170 | - padding: 2px 2px 6px 2px 171 | - overflow: visible 172 | icon: 173 | - position: absolute 174 | # - margin-left: -10% 175 | - opacity: 0.3 176 | - justify-self: center 177 | - align-self: center 178 | - min-width: 60px 179 | - min-height: 60px 180 | - overflow: visible 181 | - color: "[[[ return variables.__item(variables).color || variables.icon_color ]]]" 182 | name: 183 | - color: var(--secondary-text-color) 184 | - justify-self: end 185 | - align-self: start 186 | - font-size: 12px 187 | - text-justify: right 188 | - overflow: visible 189 | - text-transform: uppercase 190 | state: 191 | - justify-self: end 192 | - align-self: end 193 | - font-size: 20px 194 | - text-justify: right 195 | - overflow: visible 196 | 197 | #################( Info Icon )################################> 198 | info_icon: 199 | icon: "[[[ return variables.__item(variables).icon ]]]" 200 | 201 | #################( Info Card )################################> 202 | info: 203 | template: 204 | - no_actions 205 | variables: 206 | items: [] 207 | mini: false 208 | icon_color: "var(--state-icon-color, var(--paper-item-icon-color))" 209 | show_icon: false 210 | show_name: false 211 | card_size: 1 212 | styles: 213 | grid: 214 | - grid-template-areas: > 215 | [[[ 216 | variables.__qty = variables.items.length 217 | let areas = '\"dts1' 218 | 219 | for(let i = 1; i < variables.__qty; i++) { 220 | areas += ` dts${i+1}` 221 | } 222 | 223 | return areas += '\"' 224 | ]]] 225 | - grid-template-columns: "[[[ return `repeat(${variables.__qty}, 1fr)` ]]]" 226 | - grid-template-rows: 1fr 227 | - justify-items: center 228 | - align-items: center 229 | - text-align: center 230 | - padding: 5px 15px 5px 10px 231 | - height: 50px 232 | card: 233 | - height: 50px 234 | - justify-self: center 235 | - align-self: center 236 | - text-align: center 237 | - padding: 0 238 | - overflow: hidden 239 | custom_fields: 240 | dts1: 241 | - justify-self: center 242 | - align-self: center 243 | - display: "[[[ return variables.__qty >= 1 ? 'block' : 'none' ]]]" 244 | - overflow: visible 245 | - margin: auto 246 | - width: 100% 247 | dts2: 248 | - justify-self: center 249 | - align-self: center 250 | - display: "[[[ return variables.__qty >= 2 ? 'block' : 'none' ]]]" 251 | - overflow: visible 252 | - margin: auto 253 | - width: 100% 254 | dts3: 255 | - justify-self: center 256 | - align-self: center 257 | - display: "[[[ return variables.__qty >= 3 ? 'block' : 'none' ]]]" 258 | - overflow: visible 259 | - margin: auto 260 | - width: 100% 261 | dts4: 262 | - justify-self: center 263 | - align-self: center 264 | - display: "[[[return variables.__qty >= 4 ? 'block' : 'none' ]]]" 265 | - overflow: visible 266 | - margin: auto 267 | - width: 100% 268 | extra_styles: | 269 | button-card { 270 | max-width: 100% !important; 271 | } 272 | custom_fields: 273 | dts1: 274 | card: 275 | type: custom:button-card 276 | template: 277 | - "[[[ return variables.__qty >= 1 && (variables.mini || variables.items[0].mini) ? 'info_mini' : 'info_item' ]]]" 278 | - "[[[ return variables.__qty >= 1 && variables.items[0].icon ? 'info_icon' : 'empty' ]]]" 279 | - transparent 280 | variables: 281 | group: true 282 | icon_color: "[[[ return variables.__qty >= 1 ? variables.icon_color : null ]]]" 283 | item: "[[[ return variables.__qty >= 1 ? variables.items[0] : null ]]]" 284 | entity: "[[[ return variables.__qty >= 1 ? variables.items[0].entity_id : null ]]]" 285 | 286 | dts2: 287 | card: 288 | type: custom:button-card 289 | template: 290 | - "[[[ return variables.__qty >= 2 && (variables.mini || variables.items[1].mini) ? 'info_mini' : 'info_item' ]]]" 291 | - "[[[ return variables.__qty >= 2 && variables.items[1].icon ? 'info_icon' : 'empty' ]]]" 292 | - transparent 293 | variables: 294 | group: true 295 | icon_color: "[[[ return variables.__qty >= 2 ? variables.icon_color : null ]]]" 296 | item: "[[[ return variables.__qty >= 2 ? variables.items[1] : null ]]]" 297 | entity: "[[[ return variables.__qty >= 2 ? variables.items[1].entity_id : null ]]]" 298 | 299 | dts3: 300 | card: 301 | type: custom:button-card 302 | template: 303 | - "[[[ return variables.__qty >= 3 && (variables.mini || variables.items[2].mini) ? 'info_mini' : 'info_item' ]]]" 304 | - "[[[ return variables.__qty >= 3 && variables.items[2].icon ? 'info_icon' : 'empty' ]]]" 305 | - transparent 306 | variables: 307 | group: true 308 | icon_color: "[[[ return variables.__qty >= 3 ? variables.icon_color : null ]]]" 309 | item: "[[[ return variables.__qty >= 3 ? variables.items[2] : null ]]]" 310 | entity: "[[[ return variables.__qty >= 3 ? variables.items[2].entity_id : null ]]]" 311 | 312 | dts4: 313 | card: 314 | type: custom:button-card 315 | template: 316 | - "[[[ return variables.__qty >= 4 && (variables.mini || variables.items[3].mini) ? 'info_mini' : 'info_item' ]]]" 317 | - "[[[ return variables.__qty >= 4 && variables.items[3].icon ? 'info_icon' : 'empty' ]]]" 318 | - transparent 319 | variables: 320 | group: true 321 | icon_color: "[[[ return variables.__qty >= 4 ? variables.icon_color : null ]]]" 322 | item: "[[[ return variables.__qty >= 4 ? variables.items[3] : null ]]]" 323 | entity: "[[[ return variables.__qty >= 4 ? variables.items[3].entity_id : null ]]]" 324 | 325 | 326 | #########################################################################/ 327 | 328 | -------------------------------------------------------------------------------- /light.yaml: -------------------------------------------------------------------------------- 1 | ####{ CreativeBC }####| Light |####[ github.com/wfurphy/creative-button-card-templates ]####> 2 | light: 3 | template: 4 | - button_landscape 5 | variables: 6 | off_hide_info: true 7 | height: 80px 8 | attribute_icon_color: var(--state-icon-color) 9 | _rgb_symbols: 10 | - R 11 | - G 12 | - B 13 | color: auto 14 | show_label: true 15 | styles: 16 | label: 17 | - display: "[[[ return entity.state == 'on' ? 'block' : 'none' ]]]" 18 | - overflow: visible 19 | - text-overflow: visible 20 | label: > 21 | [[[ 22 | const styles = ` 23 | ` 46 | 47 | if (!entity) return styles + `Unavailable` 48 | 49 | if (entity.attributes.effect && entity.attributes.effect !== "none") 50 | return styles + `${entity.attributes.effect}` 51 | 52 | const bpct = Math.round(entity.attributes.brightness / 2.55) 53 | const rgb = String(entity.attributes.rgb_color).split(',') 54 | let clr = ` 55 | 56 | ${variables._rgb_symbols[0]}${rgb[0]} 57 | ${variables._rgb_symbols[1]}${rgb[1]} 58 | ${variables._rgb_symbols[2]}${rgb[2]} 59 | ` 60 | let ci = '' 61 | 62 | if (entity.attributes.color_mode == 'color_temp') { 63 | ci = `` 64 | clr = `${entity.attributes.color_temp_kelvin} K` 65 | // ci = 'mdi:thermometer' 66 | } 67 | 68 | let bi = 'mdi:brightness-2' 69 | if (bpct >= 90) { bi = 'mdi:brightness-7' } else 70 | if (bpct >= 75) { bi = 'mdi:brightness-6' } else 71 | if (bpct >= 50) { bi = 'mdi:brightness-5' } else 72 | if (bpct >= 25) { bi = 'mdi:brightness-4' } else 73 | if (bpct >= 10) { bi = 'mdi:brightness-3' } 74 | 75 | return styles + ` 76 | 77 | ${bpct}% 78 | ${ci}${clr} 79 | 80 | ` 81 | ]]] 82 | 83 | # From when we had to convert the color_temp, now kelvin is standard in HA 84 | # Math.round(1000000/entity.attributes.color_temp, 0) 85 | # °K 86 | #########################################################################/ 87 | -------------------------------------------------------------------------------- /light_group.yaml: -------------------------------------------------------------------------------- 1 | ####{ CreativeBC }####| Light Group |####[ github.com/wfurphy/creative-button-card-templates ]####> 2 | light_group: 3 | template: 4 | - light 5 | color: auto 6 | variables: 7 | items: [] 8 | __defaults: 9 | entity: "[[[ return entity?.entity_id ]]]" 10 | icon: mdi:lightbulb 11 | symbol: 12 | symbol_width: 50% 13 | symbol_font_size: 10pt 14 | symbol_color: var( --ha-card-background, var(--card-background-color, white) ) 15 | display: "none" 16 | styles: 17 | grid: 18 | - grid-template-areas: > 19 | [[[ 20 | if (!Array.isArray(variables.items) || !variables.items.length) { 21 | if(!entity || !entity.attributes?.entity_id || !Array.isArray(entity.attributes.entity_id)) { 22 | throw new Error("You must provide a light group entity or a list of items") 23 | return '' 24 | } 25 | 26 | entity.attributes.entity_id.forEach(function(e,i) { 27 | variables.items.push({ 28 | ...variables.__defaults, 29 | ...{ 30 | entity: e, 31 | symbol: String(i+1) 32 | }}) 33 | }) 34 | } 35 | 36 | variables._qty = variables.items.length > 6 ? 6 : variables.items.length 37 | let pre = '\"i' 38 | let cf = '\"' 39 | let post = '\"' 40 | 41 | for(let i = 0; i < variables._qty; i++) { 42 | const sp = i ? ' ' : '' 43 | pre += i ? ` n` : '' 44 | cf += `${sp}li${i+1}` 45 | post += `${sp}l` 46 | variables.items[i].display = 'block' 47 | variables.items[i] = {...variables.__defaults, ...variables.items[i]} 48 | } 49 | 50 | return pre + '\" ' + cf + '\" ' + post + '\" ' 51 | ]]] 52 | - grid-template-columns: "[[[ return `repeat(${variables._qty}, 1fr)` ]]]" 53 | - grid-template-rows: 1fr 1fr 1fr 54 | - justify-items: center 55 | - align-items: center 56 | - padding: 4px 57 | - position: relative 58 | - max-width: 100% 59 | label: 60 | - justify-self: center 61 | - align-self: start 62 | - text-align: center 63 | - margin-top: -3px 64 | name: 65 | - justify-self: center 66 | - align-self: center 67 | - text-align: left 68 | custom_fields: 69 | li1: 70 | - display: "[[[ return variables.items[0]?.display || 'none' ]]]" 71 | - z-index: 5 72 | - justify-self: center 73 | - align-self: center 74 | li2: 75 | - display: "[[[ return variables.items[1]?.display || 'none' ]]]" 76 | - z-index: 5 77 | - justify-self: center 78 | - align-self: center 79 | li3: 80 | - display: "[[[ return variables.items[2]?.display || 'none' ]]]" 81 | - z-index: 5 82 | - justify-self: center 83 | - align-self: center 84 | li4: 85 | - display: "[[[ return variables.items[3]?.display || 'none' ]]]" 86 | - z-index: 5 87 | - justify-self: center 88 | - align-self: center 89 | li5: 90 | - display: "[[[ return variables.items[4]?.display || 'none' ]]]" 91 | - z-index: 5 92 | - justify-self: center 93 | - align-self: center 94 | li6: 95 | - display: "[[[ return variables.items[5]?.display || 'none' ]]]" 96 | - z-index: 5 97 | - justify-self: center 98 | - align-self: center 99 | custom_fields: 100 | li1: 101 | card: 102 | type: custom:button-card 103 | template: 104 | - button_mini_embed 105 | - actions 106 | entity: "[[[ return variables.items[0]?.entity ]]]" 107 | icon: "[[[ return variables.items[0]?.icon ]]]" 108 | color: auto 109 | variables: 110 | symbol: "[[[ return variables.items[0]?.symbol ]]]" 111 | symbol_width: "[[[ return variables.items[0]?.symbol_width ]]]" 112 | symbol_font_size: "[[[ return variables.items[0]?.symbol_font_size ]]]" 113 | symbol_color: "[[[ return variables.items[0]?.symbol_color ]]]" 114 | li2: 115 | card: 116 | type: custom:button-card 117 | template: 118 | - button_mini_embed 119 | - actions 120 | entity: "[[[ return variables.items[1]?.entity ]]]" 121 | icon: "[[[ return variables.items[1]?.icon ]]]" 122 | color: auto 123 | variables: 124 | symbol: "[[[ return variables.items[1]?.symbol ]]]" 125 | symbol_width: "[[[ return variables.items[1]?.symbol_width ]]]" 126 | symbol_font_size: "[[[ return variables.items[1]?.symbol_font_size ]]]" 127 | symbol_color: "[[[ return variables.items[1]?.symbol_color ]]]" 128 | li3: 129 | card: 130 | type: custom:button-card 131 | template: 132 | - button_mini_embed 133 | - actions 134 | entity: "[[[ return variables.items[2]?.entity ]]]" 135 | icon: "[[[ return variables.items[2]?.icon ]]]" 136 | color: auto 137 | variables: 138 | symbol: "[[[ return variables.items[2]?.symbol ]]]" 139 | symbol_width: "[[[ return variables.items[2]?.symbol_width ]]]" 140 | symbol_font_size: "[[[ return variables.items[2]?.symbol_font_size ]]]" 141 | symbol_color: "[[[ return variables.items[2]?.symbol_color ]]]" 142 | li4: 143 | card: 144 | type: custom:button-card 145 | template: 146 | - button_mini_embed 147 | - actions 148 | entity: "[[[ return variables.items[3]?.entity ]]]" 149 | icon: "[[[ return variables.items[3]?.icon ]]]" 150 | color: auto 151 | variables: 152 | symbol: "[[[ return variables.items[3]?.symbol ]]]" 153 | symbol_width: "[[[ return variables.items[3]?.symbol_width ]]]" 154 | symbol_font_size: "[[[ return variables.items[3]?.symbol_font_size ]]]" 155 | symbol_color: "[[[ return variables.items[3]?.symbol_color ]]]" 156 | li5: 157 | card: 158 | type: custom:button-card 159 | template: 160 | - button_mini_embed 161 | - actions 162 | entity: "[[[ return variables.items[4]?.entity ]]]" 163 | icon: "[[[ return variables.items[4]?.icon ]]]" 164 | color: auto 165 | variables: 166 | symbol: "[[[ return variables.items[4]?.symbol ]]]" 167 | symbol_width: "[[[ return variables.items[4]?.symbol_width ]]]" 168 | symbol_font_size: "[[[ return variables.items[4]?.symbol_font_size ]]]" 169 | symbol_color: "[[[ return variables.items[4]?.symbol_color ]]]" 170 | li6: 171 | card: 172 | type: custom:button-card 173 | template: 174 | - button_mini_embed 175 | - actions 176 | entity: "[[[ return variables.items[5]?.entity ]]]" 177 | icon: "[[[ return variables.items[5]?.icon ]]]" 178 | color: auto 179 | variables: 180 | symbol: "[[[ return variables.items[5]?.symbol ]]]" 181 | symbol_width: "[[[ return variables.items[5]?.symbol_width ]]]" 182 | symbol_font_size: "[[[ return variables.items[5]?.symbol_font_size ]]]" 183 | symbol_color: "[[[ return variables.items[5]?.symbol_color ]]]" 184 | 185 | 186 | #########################################################################/ 187 | 188 | -------------------------------------------------------------------------------- /light_motion.yaml: -------------------------------------------------------------------------------- 1 | ####{ CreativeBC }####| Light associated with a Motion Sensor |####[ github.com/wfurphy/creative-button-card-templates ]####> 2 | light_motion: 3 | template: 4 | - light 5 | color: auto 6 | variables: 7 | motion_entity: 8 | enabled_entity: 9 | timer_entity: 10 | __pauseState: > 11 | [[[ 12 | return function(timer_entity, entity) { 13 | const ps = { 14 | custom_field: 'motion', 15 | timer_state: states[timer_entity]?.state, 16 | display: { 17 | label: 'none', 18 | motion: 'block', 19 | timer: 'none' 20 | } 21 | } 22 | 23 | if (timer_entity && states[timer_entity].state == 'active') { 24 | ps.custom_field = 'timer' 25 | ps.display.motion = 'none' 26 | ps.display.timer = 'block' 27 | } 28 | 29 | if (entity.state == 'on') { 30 | ps.areas = `\"i i n\" \"i i l\" \"i i ${ps.custom_field}\"` 31 | ps.rows = '1fr 1fr 1fr' 32 | ps.display.label = 'block' 33 | } else { 34 | ps.areas = `\"i i n\" \"i i ${ps.custom_field}\"` 35 | ps.rows = '1fr 1fr' 36 | } 37 | 38 | return ps 39 | } 40 | ]]] 41 | styles: 42 | grid: 43 | - grid-template-areas: "[[[ return variables.__pauseState(variables.timer_entity, entity).areas ]]]" 44 | - grid-template-columns: 1fr 1fr 4fr 45 | - grid-template-rows: "[[[ return variables.__pauseState(variables.timer_entity, entity).rows ]]]" 46 | - justify-items: start 47 | - padding: 6px 48 | name: 49 | - line-height: 18px 50 | label: 51 | - display: "[[[ return variables.__pauseState(variables.timer_entity, entity).display.label ]]]" 52 | - align-self: center 53 | custom_fields: 54 | motion: 55 | - justify-self: start 56 | - align-self: start 57 | - text-align: left 58 | - display: "[[[ return variables.__pauseState(variables.timer_entity, entity).display.motion ]]]" 59 | timer: 60 | - justify-self: start 61 | - align-self: start 62 | - text-align: left 63 | - display: "[[[ return variables.__pauseState(variables.timer_entity, entity).display.timer ]]]" 64 | custom_fields: 65 | motion: 66 | card: 67 | type: custom:button-card 68 | template: transparent 69 | entity: "[[[ return variables.motion_entity ]]]" 70 | show_name: false 71 | show_last_changed: true 72 | triggers_update: 73 | - "[[[ return variables.motion_entity ]]]" 74 | - "[[[ return variables.timer_entity ]]]" 75 | - "[[[ return variables.enabled_entity ]]]" 76 | state: 77 | - id: cbc_on 78 | value: "on" 79 | icon: mdi:run-fast 80 | styles: 81 | card: 82 | - opactiy: 0.8 83 | icon: mdi:run 84 | styles: 85 | card: 86 | - overflow: visible 87 | - opacity: 0.4 88 | - margin-left: -2px 89 | - padding: 0 90 | grid: 91 | - grid-template-areas: '"i l"' 92 | - grid-template-columns: 1fr 3fr 93 | - grid-template-rows: 1fr 94 | - padding: 0 95 | label: 96 | - overflow: visible 97 | - justify-self: start 98 | - align-self: center 99 | - font-size: 75% 100 | - margin: 2px 0 0 -2px 101 | - text-align: left 102 | icon: 103 | - width: 18px 104 | - height: 18px 105 | - padding-right: 5px 106 | timer: 107 | card: 108 | type: custom:button-card 109 | template: transparent 110 | entity: "[[[ return variables.timer_entity ]]]" 111 | triggers_update: 112 | - "[[[ return variables.motion_entity ]]]" 113 | - "[[[ return variables.timer_entity ]]]" 114 | - "[[[ return variables.enabled_entity ]]]" 115 | show_state: true 116 | show_name: false 117 | show_icon: true 118 | show_label: true 119 | label: " remaining" 120 | styles: 121 | card: 122 | - overflow: visible 123 | - opacity: 0.6 124 | # - padding: 0 125 | grid: 126 | - grid-template-areas: '"i s l"' 127 | - grid-template-rows: 1fr 128 | label: 129 | - overflow: visible 130 | - justify-self: start 131 | - align-self: center 132 | - font-size: 75% 133 | - margin: 2px 0 0 5px 134 | - text-align: left 135 | state: 136 | - overflow: visible 137 | - justify-self: start 138 | - align-self: center 139 | - font-size: 75% 140 | - margin: 2px 0 0 -2px 141 | - text-align: left 142 | - width: min-content 143 | icon: 144 | - width: 18px 145 | - padding-right: 5px 146 | - color: rgba(254, 190, 110, 1) 147 | 148 | #########################################################################/ 149 | -------------------------------------------------------------------------------- /plug.yaml: -------------------------------------------------------------------------------- 1 | ####{ CreativeBC }####| Plug |####[ github.com/wfurphy/creative-button-card-templates ]####> 2 | plug: 3 | template: device 4 | variables: 5 | attributes: 6 | - id: "current" 7 | icon: "mdi:current-ac" 8 | units: " mA" 9 | - id: voltage 10 | icon: mdi:transmission-tower-import 11 | units: V 12 | 13 | #########################################################################/ 14 | -------------------------------------------------------------------------------- /title.yaml: -------------------------------------------------------------------------------- 1 | ####{ CreativeBC }####| Title |####[ github.com/wfurphy/creative-button-card-templates ]####> 2 | title: 3 | template: 4 | - style_helper 5 | variables: 6 | mirror: false 7 | color: var(--primary-background-color) 8 | background_color: var(--state-icon-color) 9 | show_tab: false 10 | offset: 0 11 | styles: 12 | grid: 13 | - position: relative 14 | - grid-template-areas: > 15 | [[[ return variables.mirror ? '\"i n\"' : '\"n i\"' ]]] 16 | - grid-template-columns: 3fr 1fr 17 | - grid-template-rows: 1fr 18 | - justify-items: start 19 | - align-items: center 20 | - padding: 6px 21 | - overflow: visible 22 | card: 23 | - --mdc-ripple-press-opacity: 0 24 | - opacity: 0.5 25 | - height: 40px 26 | - margin-left: "[[[ return variables.offset ]]]" 27 | - background-color: "[[[ return variables.background_color ]]]" 28 | - box-shadow: none 29 | - border: none 30 | - border-radius: "[[[ return variables.mirror ? '10px 0 0 10px' : '0 10px 10px 0' ]]]" 31 | - border: > 32 | [[[ 33 | if(variables.show_tab) { 34 | return variables.mirror ? `0 5px 0 0 solid ${variables.color}` : `0 0 0 5px solid ${variables.color}` 35 | } 36 | 37 | return 'none' 38 | ]]] 39 | - text-align: "[[[ return variables.mirror ? 'right' : 'left' ]]]" 40 | - padding: 0 41 | name: 42 | - opactiy: 1 43 | - justify-self: "[[[ return variables.mirror ? 'end' : 'start' ]]]" 44 | - text-transform: uppercase 45 | - margin-left: 10px 46 | - letter-spacing: 2px 47 | - line-height: 18px 48 | - font-size: 14px 49 | - text-align: "[[[ return variables.mirror ? 'right' : 'left' ]]]" 50 | - overflow: visible 51 | icon: 52 | - opacity: 1 53 | - position: absolute 54 | - color: "[[[ return variables.color ]]]" 55 | - justify-self: "[[[ return variables.mirror ? 'start' : 'end' ]]]" 56 | - text-align: "[[[ return variables.mirror ? 'left' : 'right' ]]]" 57 | - overflow: visible 58 | - height: 155% 59 | - width: 155% 60 | - max-height: 500% 61 | 62 | #### title_grid ####> 63 | # @deprecated v0.2 to be removed in v0.3 64 | ##/ 65 | title_grid: 66 | template: title 67 | styles: 68 | card: 69 | - margin-top: 40px 70 | - justify-self: center 71 | - align-self: end 72 | 73 | #########################################################################/ 74 | -------------------------------------------------------------------------------- /value_strip.yaml: -------------------------------------------------------------------------------- 1 | #################( Value Strip Item )################################> 2 | value_strip_item: 3 | template: 4 | - transparent 5 | - interactive 6 | variables: 7 | item: 8 | active: false 9 | prefix: 10 | units: '' 11 | value: 100 12 | icon: mdi:bomb 13 | label: 14 | active_color: var(--button-card-light-color, var(--accent-color)) 15 | color: 'var(--paper-item-icon-color)' 16 | show: 17 | icon: true 18 | value: true 19 | fade: true 20 | __css: > 21 | [[[ 22 | return ` 23 | ` 30 | ]]] 31 | name: > 32 | [[[ 33 | variables.__opc = (variables.item.value / 100) + 0.07 34 | variables.__both = variables.show.icon && variables.show.value 35 | 36 | if (variables.item.label) { 37 | return `${variables.__css}${variables.item.prefix}${variables.item.label}` 38 | } 39 | 40 | return `${variables.__css}${variables.item.value}${variables.item.units}` 41 | ]]] 42 | state: 43 | - id: cbc_active 44 | operator: template 45 | value: > 46 | [[[ 47 | return Boolean(entity.state == variables.item.value) 48 | ]]] 49 | styles: 50 | icon: 51 | - color: "[[[ return variables.item.active_color ]]]" 52 | name: 53 | - color: "[[[ return variables.item.active_color ]]]" 54 | icon: "[[[ return variables.item.icon ]]]" 55 | lock: 56 | enabled: "[[[ return variables.__lock = !entity || entity.state == 'unavailable' ]]]" 57 | styles: 58 | grid: 59 | - grid-template-areas: > 60 | [[[ 61 | if (variables.__both) return '\"i\" \"n\"'; 62 | return variables.show.icon ? '\"i\"' : '\"n\"' 63 | ]]] 64 | - grid-template-columns: 1fr 65 | - grid-template-rows: "[[[ return variables.__both ? '1fr 1fr' : '1fr' ]]]" 66 | - justify-items: center 67 | - align-items: center 68 | name: 69 | - display: "[[[ return variables.__both || variables.show.value ? 'inline-flex' : 'none' ]]]" 70 | - opacity: > 71 | [[[ 72 | if (variables.__lock) return 0.2; 73 | return (!variables.show.fade || variables.__opc > 1) ? 0.8 : variables.__opc 74 | ]]] 75 | - color: "[[[ return variables.item.color ]]]" 76 | - font-size: "[[[ return variables.__both ? '14px' : '16px' ]]]" 77 | - align-self: "[[[ return variables.__both ? 'start' : 'center' ]]]" 78 | card: 79 | - height: 40px 80 | - border-radius: 40% 81 | lock: 82 | - opacity: 0 83 | custom_fields: 84 | active_logic: 85 | - width: 0 86 | - height: 0 87 | # - display: none 88 | - visibility: hidden 89 | icon: 90 | - width: "[[[ return variables.__both || variables.show.value ? '18px' : '30px' ]]]" 91 | - display: "[[[ return variables.__both || variables.show.icon ? 'inline-flex' : 'none' ]]]" 92 | - color: "[[[ return variables.item.color ]]]" 93 | - opacity: > 94 | [[[ 95 | if (variables.__lock) return 0.1; 96 | return (!variables.show.fade || variables.__opc > 1) ? 0.9 : variables.__opc 97 | ]]] 98 | 99 | #################( Adaptive Lighting Strip Item )################################> 100 | adaptive_lighting_strip_item: 101 | template: 102 | - value_strip_item 103 | variables: 104 | al_area_id: main_area 105 | item: 106 | value: 100 107 | color: auto 108 | custom_fields: 109 | active_logic: > 110 | [[[ 111 | variables.__al = 'switch.adaptive_lighting_' + variables.al_area_id 112 | variables.__alb = 'switch.adaptive_lighting_adapt_brightness_' + variables.al_area_id 113 | ]]] 114 | lock: 115 | enabled: > 116 | [[[ 117 | return variables.__lock = states[variables.__al].state == 'on' && states[variables.__alb].state == 'on' 118 | ]]] 119 | tap_action: 120 | action: call-service 121 | service: script.al_set 122 | service_data: 123 | area_id: "[[[ return variables.al_area_id ]]]" 124 | brightness: "[[[ return variables.item.value ]]]" 125 | haptic: success 126 | state: 127 | - id: cbc_active 128 | operator: template 129 | value: > 130 | [[[ 131 | return Boolean(variables.item.value == states['input_number.brightness_' + variables.al_area_id].state) 132 | ]]] 133 | 134 | #################( Brightness Strip Item )################################> 135 | brightness_strip_item: 136 | template: value_strip_item 137 | variables: 138 | item: 139 | value: 100 140 | color: auto 141 | tap_action: 142 | action: call-service 143 | service: light.turn_on 144 | service_data: 145 | entity_id: "[[[ return entity.entity_id ]]]" 146 | brightness_pct: "[[[ return variables.item.value ]]]" 147 | haptic: success 148 | state: 149 | - id: cbc_active 150 | operator: template 151 | value: > 152 | [[[ 153 | return Boolean(Math.round(entity.attributes.brightness / 2.55) == variables.item.value) 154 | ]]] 155 | 156 | #################( Cover Strip Item )################################> 157 | cover_strip_item: 158 | template: value_strip_item 159 | variables: 160 | item: 161 | value: 100 162 | state: 163 | - id: cbc_active 164 | operator: template 165 | value: > 166 | [[[ 167 | return Boolean(entity.attributes.current_position == variables.item.value) 168 | ]]] 169 | tap_action: 170 | action: call-service 171 | service: cover.set_cover_position 172 | service_data: 173 | entity_id: "[[[ return entity.entity_id ]]]" 174 | position: "[[[ return variables.item.value ]]]" 175 | haptic: success 176 | 177 | 178 | #################( Value Strip )################################> 179 | value_strip: 180 | show_icon: false 181 | show_value: false 182 | show_state: false 183 | show_name: false 184 | variables: 185 | type: value 186 | al_area_id: null 187 | triggers: [] 188 | items: [] 189 | show: 190 | icon: true 191 | value: true 192 | fade: true 193 | __merge: 194 | value: 0 195 | active: false 196 | prefix: '' 197 | units: '' 198 | icon: 'mdi:cancel' 199 | label: '' 200 | active_color: 'var(--accent-color)' 201 | color: 'var(--paper-item-icon-color)' 202 | __defaults: [] 203 | _defaults_brightness: 204 | - value: 10 205 | units: '%' 206 | icon: mdi:brightness-3 207 | - value: 25 208 | units: '%' 209 | icon: mdi:brightness-4 210 | - value: 50 211 | units: '%' 212 | icon: mdi:brightness-5 213 | - value: 75 214 | units: '%' 215 | icon: mdi:brightness-6 216 | - value: 100 217 | units: '%' 218 | icon: mdi:brightness-7 219 | _defaults_cover: 220 | - value: 0 221 | icon: mdi:blinds 222 | prefix: '' 223 | units: '%' 224 | label: close 225 | - value: 25 226 | icon: mdi:blinds 227 | units: '%' 228 | - value: 50 229 | icon: mdi:blinds-open 230 | units: '%' 231 | - value: 75 232 | icon: mdi:blinds-open 233 | units: '%' 234 | - value: 100 235 | icon: mdi:blinds-open 236 | units: '%' 237 | prefix: '' 238 | label: open 239 | styles: 240 | card: 241 | - clear: > 242 | [[[ 243 | switch (variables.type) { 244 | case 'adaptive_lighting': 245 | variables.__defaults = variables._defaults_brightness 246 | variables.__entity_id = 'light.al_lights_' + variables.al_area_id 247 | variables.triggers = ['switch.adaptive_lighting_' + variables.al_area_id, 'switch.adaptive_lighting_adapt_brightness_' + variables.al_area_id] 248 | break 249 | case 'cover': 250 | variables.__defaults = variables._defaults_cover 251 | variables.__entity_id = entity.entity_id 252 | break 253 | case 'brightness': 254 | case 'value': 255 | default: 256 | variables.__defaults = variables._defaults_brightness 257 | variables.__entity_id = entity.entity_id 258 | break 259 | } 260 | 261 | return 'none' 262 | ]]] 263 | - height: 40px 264 | grid: 265 | - grid-template-areas: '"c1 c2 c3 c4 c5"' 266 | - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 267 | - grid-template-rows: 1fr 268 | - justify-items: center 269 | - align-items: center 270 | - height: 40px 271 | - padding: 5px 272 | - margin-top: 5px 273 | custom_fields: 274 | c1: 275 | - width: 100% 276 | c2: 277 | - width: 100% 278 | c3: 279 | - width: 100% 280 | c4: 281 | - width: 100% 282 | c5: 283 | - width: 100% 284 | custom_fields: 285 | c1: 286 | card: 287 | type: custom:button-card 288 | template: "[[[ return variables.type + '_strip_item' ]]]" 289 | entity: "[[[ return variables.__entity_id ]]]" 290 | triggers_update: "[[[ return variables.triggers ]]]" 291 | variables: 292 | item: "[[[ return {...variables.__merge, ...variables.__defaults[0], ...variables.items[0]} ]]]" 293 | show: "[[[ return variables.show ]]]" 294 | al_area_id: "[[[ return variables.al_area_id ]]]" 295 | c2: 296 | card: 297 | type: custom:button-card 298 | template: "[[[ return variables.type + '_strip_item' ]]]" 299 | entity: "[[[ return variables.__entity_id ]]]" 300 | triggers_update: "[[[ return variables.triggers ]]]" 301 | variables: 302 | item: "[[[ return {...variables.__merge, ...variables.__defaults[1], ...variables.items[1]} ]]]" 303 | show: "[[[ return variables.show ]]]" 304 | al_area_id: "[[[ return variables.al_area_id ]]]" 305 | c3: 306 | card: 307 | type: custom:button-card 308 | template: "[[[ return variables.type + '_strip_item' ]]]" 309 | entity: "[[[ return variables.__entity_id ]]]" 310 | triggers_update: "[[[ return variables.triggers ]]]" 311 | variables: 312 | item: "[[[ return {...variables.__merge, ...variables.__defaults[2], ...variables.items[2]} ]]]" 313 | show: "[[[ return variables.show ]]]" 314 | al_area_id: "[[[ return variables.al_area_id ]]]" 315 | c4: 316 | card: 317 | type: custom:button-card 318 | template: "[[[ return variables.type + '_strip_item' ]]]" 319 | entity: "[[[ return variables.__entity_id ]]]" 320 | triggers_update: "[[[ return variables.triggers ]]]" 321 | variables: 322 | item: "[[[ return {...variables.__merge, ...variables.__defaults[3], ...variables.items[3]} ]]]" 323 | show: "[[[ return variables.show ]]]" 324 | al_area_id: "[[[ return variables.al_area_id ]]]" 325 | c5: 326 | card: 327 | type: custom:button-card 328 | template: "[[[ return variables.type + '_strip_item' ]]]" 329 | entity: "[[[ return variables.__entity_id ]]]" 330 | triggers_update: "[[[ return variables.triggers ]]]" 331 | variables: 332 | item: "[[[ return {...variables.__merge, ...variables.__defaults[4], ...variables.items[4]} ]]]" 333 | show: "[[[ return variables.show ]]]" 334 | al_area_id: "[[[ return variables.al_area_id ]]]" 335 | 336 | 337 | #########################################################################/ 338 | --------------------------------------------------------------------------------