├── _config.yml ├── googlee0c756da8d34ba50.html ├── images ├── fcc-config-1.png ├── fcc-config-2.png ├── fcc-config-3.png └── fcc-config-4.png ├── index.md ├── hacs.json ├── examples ├── cover │ ├── images │ │ ├── dark_closed.png │ │ ├── dark_open.png │ │ ├── light_open.png │ │ ├── dark_closing.png │ │ ├── dark_open-300.png │ │ ├── light_closed.png │ │ ├── light_closing.png │ │ └── light_closing-300.png │ ├── cover.md │ └── cover.yaml ├── button-lights │ ├── images │ │ ├── dark.png │ │ ├── light.png │ │ ├── dark-300.png │ │ └── light-300.png │ ├── button-lights.md │ └── button-lights.yaml ├── input-controls │ ├── images │ │ ├── dark.png │ │ ├── light.png │ │ ├── dark-300.png │ │ └── light-300.png │ ├── input-controls.md │ └── input-controls.yaml ├── slider-lights │ ├── images │ │ ├── dark.png │ │ ├── light.png │ │ ├── dark-300.png │ │ └── light-300.png │ ├── slider-lights.md │ └── slider-lights.yaml ├── hue-saturation │ ├── images │ │ ├── dark-on.png │ │ ├── dark-off.png │ │ ├── light-off.png │ │ ├── light-on.png │ │ ├── dark-on-300.png │ │ └── light-on-300.png │ ├── hue-saturation.md │ └── hue-saturation.yaml ├── climate-template │ ├── images │ │ ├── dark-fan.png │ │ ├── dark-heat.png │ │ ├── light-fan.png │ │ ├── light-heat.png │ │ ├── dark-heat-300.png │ │ └── light-fan-300.png │ ├── climate.md │ └── climate.yaml ├── batteries-table │ ├── images │ │ ├── dark-charging.png │ │ ├── light-disconnect.png │ │ ├── dark-charging-300.png │ │ └── light-disconnect-300.png │ ├── batteries.md │ └── batteries.yaml ├── media-player-template │ ├── images │ │ ├── large_dark.jpg │ │ ├── small_dark.jpg │ │ ├── large_light.jpg │ │ ├── small_light.jpg │ │ ├── small_dark_300.png │ │ └── small_light_300.png │ ├── media-player.md │ └── media-player.yaml └── temperature-humidity-table │ ├── images │ ├── dark.jpg │ ├── light.jpg │ ├── dark_300.png │ └── light_300.png │ ├── temperature-humidity.md │ └── temperature-humidity.yaml ├── .github ├── ISSUE_TEMPLATE │ ├── config.yml │ └── bug_report.md └── workflows │ ├── auto-assign.yml │ ├── crowdin.yml │ └── release.yml ├── crowdin.yml ├── package.json ├── LICENSE ├── scripts └── build.js ├── src └── localize │ ├── localize.js │ └── lang │ ├── en.json │ ├── pl.json │ └── de.json ├── .gitignore └── README.md /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman 2 | title: Flex Cells Card -------------------------------------------------------------------------------- /googlee0c756da8d34ba50.html: -------------------------------------------------------------------------------- 1 | google-site-verification: googlee0c756da8d34ba50.html -------------------------------------------------------------------------------- /images/fcc-config-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/images/fcc-config-1.png -------------------------------------------------------------------------------- /images/fcc-config-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/images/fcc-config-2.png -------------------------------------------------------------------------------- /images/fcc-config-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/images/fcc-config-3.png -------------------------------------------------------------------------------- /images/fcc-config-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/images/fcc-config-4.png -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Flex Cells Card 4 | --- 5 | 6 | {% include_relative README.md %} 7 | -------------------------------------------------------------------------------- /hacs.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Flex Cells Card", 3 | "filename": "flex-cells-card.js", 4 | "render_readme": true 5 | } 6 | -------------------------------------------------------------------------------- /examples/cover/images/dark_closed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/cover/images/dark_closed.png -------------------------------------------------------------------------------- /examples/cover/images/dark_open.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/cover/images/dark_open.png -------------------------------------------------------------------------------- /examples/cover/images/light_open.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/cover/images/light_open.png -------------------------------------------------------------------------------- /examples/button-lights/images/dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/button-lights/images/dark.png -------------------------------------------------------------------------------- /examples/button-lights/images/light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/button-lights/images/light.png -------------------------------------------------------------------------------- /examples/cover/images/dark_closing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/cover/images/dark_closing.png -------------------------------------------------------------------------------- /examples/cover/images/dark_open-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/cover/images/dark_open-300.png -------------------------------------------------------------------------------- /examples/cover/images/light_closed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/cover/images/light_closed.png -------------------------------------------------------------------------------- /examples/cover/images/light_closing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/cover/images/light_closing.png -------------------------------------------------------------------------------- /examples/input-controls/images/dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/input-controls/images/dark.png -------------------------------------------------------------------------------- /examples/slider-lights/images/dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/slider-lights/images/dark.png -------------------------------------------------------------------------------- /examples/slider-lights/images/light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/slider-lights/images/light.png -------------------------------------------------------------------------------- /examples/button-lights/images/dark-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/button-lights/images/dark-300.png -------------------------------------------------------------------------------- /examples/hue-saturation/images/dark-on.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/hue-saturation/images/dark-on.png -------------------------------------------------------------------------------- /examples/input-controls/images/light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/input-controls/images/light.png -------------------------------------------------------------------------------- /examples/slider-lights/images/dark-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/slider-lights/images/dark-300.png -------------------------------------------------------------------------------- /examples/button-lights/images/light-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/button-lights/images/light-300.png -------------------------------------------------------------------------------- /examples/cover/images/light_closing-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/cover/images/light_closing-300.png -------------------------------------------------------------------------------- /examples/hue-saturation/images/dark-off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/hue-saturation/images/dark-off.png -------------------------------------------------------------------------------- /examples/hue-saturation/images/light-off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/hue-saturation/images/light-off.png -------------------------------------------------------------------------------- /examples/hue-saturation/images/light-on.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/hue-saturation/images/light-on.png -------------------------------------------------------------------------------- /examples/input-controls/images/dark-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/input-controls/images/dark-300.png -------------------------------------------------------------------------------- /examples/input-controls/images/light-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/input-controls/images/light-300.png -------------------------------------------------------------------------------- /examples/slider-lights/images/light-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/slider-lights/images/light-300.png -------------------------------------------------------------------------------- /examples/climate-template/images/dark-fan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/climate-template/images/dark-fan.png -------------------------------------------------------------------------------- /examples/climate-template/images/dark-heat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/climate-template/images/dark-heat.png -------------------------------------------------------------------------------- /examples/climate-template/images/light-fan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/climate-template/images/light-fan.png -------------------------------------------------------------------------------- /examples/climate-template/images/light-heat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/climate-template/images/light-heat.png -------------------------------------------------------------------------------- /examples/hue-saturation/images/dark-on-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/hue-saturation/images/dark-on-300.png -------------------------------------------------------------------------------- /examples/hue-saturation/images/light-on-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/hue-saturation/images/light-on-300.png -------------------------------------------------------------------------------- /examples/batteries-table/images/dark-charging.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/batteries-table/images/dark-charging.png -------------------------------------------------------------------------------- /examples/batteries-table/images/light-disconnect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/batteries-table/images/light-disconnect.png -------------------------------------------------------------------------------- /examples/climate-template/images/dark-heat-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/climate-template/images/dark-heat-300.png -------------------------------------------------------------------------------- /examples/climate-template/images/light-fan-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/climate-template/images/light-fan-300.png -------------------------------------------------------------------------------- /examples/media-player-template/images/large_dark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/media-player-template/images/large_dark.jpg -------------------------------------------------------------------------------- /examples/media-player-template/images/small_dark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/media-player-template/images/small_dark.jpg -------------------------------------------------------------------------------- /examples/temperature-humidity-table/images/dark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/temperature-humidity-table/images/dark.jpg -------------------------------------------------------------------------------- /examples/temperature-humidity-table/images/light.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/temperature-humidity-table/images/light.jpg -------------------------------------------------------------------------------- /examples/batteries-table/images/dark-charging-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/batteries-table/images/dark-charging-300.png -------------------------------------------------------------------------------- /examples/media-player-template/images/large_light.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/media-player-template/images/large_light.jpg -------------------------------------------------------------------------------- /examples/media-player-template/images/small_light.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/media-player-template/images/small_light.jpg -------------------------------------------------------------------------------- /examples/batteries-table/images/light-disconnect-300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/batteries-table/images/light-disconnect-300.png -------------------------------------------------------------------------------- /examples/media-player-template/images/small_dark_300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/media-player-template/images/small_dark_300.png -------------------------------------------------------------------------------- /examples/media-player-template/images/small_light_300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/media-player-template/images/small_light_300.png -------------------------------------------------------------------------------- /examples/temperature-humidity-table/images/dark_300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/temperature-humidity-table/images/dark_300.png -------------------------------------------------------------------------------- /examples/temperature-humidity-table/images/light_300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalowskil/flex-cells-card/HEAD/examples/temperature-humidity-table/images/light_300.png -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: Support 4 | url: https://github.com/michalowskil/flex-cells-card/discussions 5 | about: If you don't want to report a bug but just want to ask a question, click here. 6 | -------------------------------------------------------------------------------- /.github/workflows/auto-assign.yml: -------------------------------------------------------------------------------- 1 | name: Auto Assign Issues 2 | 3 | on: 4 | issues: 5 | types: [opened] 6 | 7 | permissions: 8 | issues: write 9 | 10 | jobs: 11 | assign: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - name: Assign issue to repo owner 15 | uses: actions-ecosystem/action-add-assignees@v1 16 | with: 17 | github_token: ${{ secrets.GITHUB_TOKEN }} 18 | assignees: michalowskil 19 | -------------------------------------------------------------------------------- /examples/climate-template/climate.md: -------------------------------------------------------------------------------- 1 | # Climate (template) 2 | 3 | Another example of an FCC template. Using simple HTML and CSS, you can create cards with any look. 4 | 5 | Add a new card to the dashboard and overwrite its entire configuration with the [climate.yaml](climate.yaml) file (remember to replace the entities with your own). 6 | 7 | ![climate](images/dark-heat.png) 8 | ![climate](images/light-heat.png) 9 | ![climate](images/dark-fan.png) 10 | ![climate](images/light-fan.png) -------------------------------------------------------------------------------- /crowdin.yml: -------------------------------------------------------------------------------- 1 | project_id_env: CROWDIN_PROJECT_ID 2 | api_token_env: CROWDIN_PERSONAL_TOKEN 3 | base_path: . 4 | preserve_hierarchy: true 5 | 6 | files: 7 | # UI (JSON) 8 | - source: /src/localize/lang/en.json 9 | translation: /src/localize/lang/%two_letters_code%.json 10 | type: json 11 | 12 | # Dokumentacja 13 | # - source: /README.md 14 | # translation: /docs/%two_letters_code%/README.md 15 | # - source: /examples/**/*.md 16 | # translation: /docs/%two_letters_code%/%original_path%/%original_file_name% 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flex-cells-card", 3 | "version": "v0.20.0-beta.1", 4 | "description": "A Lovelace card for Home Assistant that lets you add icons, text, entities, attributes, or input controls in flexible cell layouts - fully configurable from a visual editor, so no documentation is required to get started.", 5 | "type": "module", 6 | "scripts": { 7 | "build": "node scripts/build.js", 8 | "watch": "node scripts/build.js --watch" 9 | }, 10 | "devDependencies": { 11 | "esbuild": "^0.25.8", 12 | "lit": "^3.3.1" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International 2 | (CC BY-NC-ND 4.0) 3 | 4 | You are free to: 5 | - Share — copy and redistribute the material in any medium or format 6 | Under the following terms: 7 | - Attribution — You must give appropriate credit. 8 | - NonCommercial — You may not use the material for commercial purposes. 9 | - NoDerivatives — If you remix, transform, or build upon the material, you may not distribute the modified material. 10 | 11 | Full text: https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode 12 | -------------------------------------------------------------------------------- /examples/cover/cover.md: -------------------------------------------------------------------------------- 1 | # Cover 2 | 3 | This is an example similar to [Slider Lights](../slider-lights/slider-lights.md). The buttons for controlling the window blinds were created using custom CSS and icons. 4 | 5 | Add a new card to the dashboard and overwrite its entire configuration with the [cover.yaml](cover.yaml) file (remember to replace the entities with your own). 6 | 7 | ![cover](images/dark_closed.png) 8 | ![cover](images/light_closed.png) 9 | ![cover](images/dark_open.png) 10 | ![cover](images/light_open.png) 11 | ![cover](images/dark_closing.png) 12 | ![cover](images/light_closing.png) -------------------------------------------------------------------------------- /examples/input-controls/input-controls.md: -------------------------------------------------------------------------------- 1 | # Input controls 2 | 3 | This is only a presentation of the appearance of the FCC controls. 4 | 5 | Remember that in addition to the input controls configured in Home Assistant, you can also use the slider and switch (checkbox) on the fly without having to configure them in Home Assistant - ```Attribute editing (service)```. 6 | 7 | Add a new card to the dashboard and overwrite its entire configuration with the [input-controls.yaml](input-controls.yaml) file (remember to replace the entities with your own). 8 | 9 | ![input controls](images/dark.png) 10 | ![input controls](images/light.png) -------------------------------------------------------------------------------- /examples/media-player-template/media-player.md: -------------------------------------------------------------------------------- 1 | # Media player (template) 2 | 3 | Below you'll find an example of using HTML temples in FCC. This example has been updated with the release of version 0.18.0 and no longer requires any additional automation or input_number creation. 4 | 5 | Add a new card to the dashboard and overwrite its entire configuration with the [media-player.yaml](media-player.yaml) file (remember to replace the entities with your own). 6 | 7 | ![media player](images/small_dark.jpg) 8 | ![media player](images/small_light.jpg) 9 | ![media player](images/large_dark.jpg) 10 | ![media player](images/large_light.jpg) -------------------------------------------------------------------------------- /examples/slider-lights/slider-lights.md: -------------------------------------------------------------------------------- 1 | # Slider Lights 2 | 3 | A simple example for managing lighting. The first column turns the lighting on/off, with the background color dependent on the device's state and implemented using dynamic rules. The second column is the name, which, when clicked, displays more information. The third column contains a slider for adjusting the brightness. 4 | 5 | Add a new card to the dashboard and overwrite its entire configuration with the [slider-lights.yaml](slider-lights.yaml) file (remember to replace the entities with your own). 6 | 7 | ![slider lights](images/dark.png) 8 | ![slider lights](images/light.png) -------------------------------------------------------------------------------- /examples/temperature-humidity-table/temperature-humidity.md: -------------------------------------------------------------------------------- 1 | # Temperature/Humidity table 2 | 3 | Simple table divided into three groups, with sorting by the temperature column performed independently in each group. Here you'll find the simplest example of a dynamic rule that changes color to red when the temperature exceeds a specified value. 4 | 5 | Add a new card to the dashboard and overwrite its entire configuration with the [temperature-humidity.yaml](temperature-humidity.yaml) file (remember to replace the entities with your own). 6 | 7 | ![temperature humidity table](images/dark.jpg) 8 | ![temperature humidity table](images/light.jpg) -------------------------------------------------------------------------------- /.github/workflows/crowdin.yml: -------------------------------------------------------------------------------- 1 | name: Crowdin Sync 2 | on: 3 | workflow_dispatch: 4 | 5 | permissions: 6 | contents: write 7 | pull-requests: write 8 | 9 | jobs: 10 | sync: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v4 14 | - name: Sync with Crowdin 15 | uses: crowdin/github-action@v2 16 | with: 17 | upload_sources: true 18 | upload_sources_args: --delete-obsolete 19 | upload_translations: true 20 | download_translations: true 21 | skip_untranslated_strings: true 22 | localization_branch_name: l10n_crowdin 23 | create_pull_request: true 24 | commit_message: "chore: update translations from Crowdin" 25 | env: 26 | CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }} 27 | CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }} 28 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 29 | -------------------------------------------------------------------------------- /examples/hue-saturation/hue-saturation.md: -------------------------------------------------------------------------------- 1 | # Hue & Saturation 2 | 3 | **This example works starting with version 0.20.0, which is currently in pre-release. If you want to test this functionality before the official release, you must manually select v0.20.0-beta in HACS.** 4 | 5 | The hue and saturation sliders are only visible when the lighting is on. Remove the dynamic row rules to make the sliders permanently visible. 6 | 7 | Changing the position of any slider turns on the lighting. 8 | 9 | The colored buttons at the bottom are presets. Tap to turn on the lighting at 5%, double-tap to turn on the lighting at 50%, and hold to turn on the lighting at 100%. 10 | 11 | Tap the icon to turn on the lighting with the last setting or to turn it off. 12 | 13 | Add a new card to the dashboard and overwrite its entire configuration with the [hue-saturation.yaml](hue-saturation.yaml) file (remember to replace the entities with your own). 14 | 15 | ![Hue saturation](images/dark-on.png) 16 | ![Hue saturation](images/light-on.png) 17 | ![Hue saturation](images/dark-off.png) 18 | ![Hue saturation](images/light-off.png) -------------------------------------------------------------------------------- /.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: michalowskil 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 | **Desktop (please complete the following information):** 27 | - OS: [e.g. Windows 11] 28 | - Browser [e.g. Chrome Version 141.0.7390.54 (Official Build) (64-bit)] 29 | - FCC Version [e.g. v0.11.0] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. Motorola Edge 30 Neo] 33 | - OS: [e.g. Android 15] 34 | - Browser [e.g. Chrome 140.0.7339.208] 35 | - CompanionApp [go to Setting->About and make a screenshot] 36 | - FCC Version [e.g. v0.11.0] 37 | 38 | **Card Configuration:** 39 | ``` 40 | Paste your entire FCC configuration here! 41 | ``` 42 | 43 | **Additional context** 44 | Add any other context about the problem here. 45 | -------------------------------------------------------------------------------- /examples/button-lights/button-lights.md: -------------------------------------------------------------------------------- 1 | # Button Lights 2 | 3 | The first three buttons: control the brightness and color of the lighting. The icon color and brightness of the icon depend on the color and brightness of the lighting. A single click on the icon turns the lighting on/off. A double click on the icon sets the brightness to 50%. Holding the icon sets the brightness to 100%. When the lighting is on, it displays the lighting intensity as a percentage instead of the name. Clicking on the name/percentage takes you to "more-info" where you can select the color/brightness. Icons from entities are overridden by dynamic rules and differ depending on the on/off state. 4 | 5 | The remaining buttons: only turn on/off. A single click turns the lighting on/off regardless of whether you click on the icon or the name. The icons are from entities. 6 | 7 | The number of columns in which the buttons are arranged is dynamic and depends on the available width. If you want a fixed number of columns, replace "auto-fit" with any number. 8 | 9 | Add a new card to the dashboard and overwrite its entire configuration with the [button-lights.yaml](button-lights.yaml) file (remember to replace the entities with your own). 10 | 11 | ![button lights](images/dark.png) 12 | ![button lights](images/light.png) -------------------------------------------------------------------------------- /scripts/build.js: -------------------------------------------------------------------------------- 1 | import { build, context } from 'esbuild'; 2 | import fs from 'node:fs'; 3 | import path from 'node:path'; 4 | 5 | const args = new Set(process.argv.slice(2)); 6 | const watch = args.has('--watch'); 7 | 8 | const langDir = path.resolve('src', 'localize', 'lang'); 9 | const locales = {}; 10 | 11 | if (fs.existsSync(langDir)) { 12 | for (const file of fs.readdirSync(langDir)) { 13 | if (!file.toLowerCase().endsWith('.json')) continue; 14 | const code = file.replace(/\.json$/i, '').toLowerCase(); 15 | const raw = fs.readFileSync(path.join(langDir, file), 'utf8'); 16 | const data = JSON.parse(raw); 17 | const normalized = data?.[code] ?? data?.en ?? data; 18 | locales[code] = normalized; 19 | } 20 | } 21 | 22 | const banner = Object.keys(locales).length 23 | ? `globalThis.FCC_LOCALES = ${JSON.stringify(locales)};` 24 | : ''; 25 | 26 | const buildOptions = { 27 | entryPoints: ['src/flex-cells-card.js'], 28 | bundle: true, 29 | format: 'esm', 30 | outfile: 'dist/flex-cells-card.js', 31 | minify: true, 32 | banner: { js: banner }, 33 | }; 34 | 35 | if (watch) { 36 | const ctx = await context(buildOptions); 37 | await ctx.watch(); 38 | console.log('[build] watching for changes...'); 39 | } else { 40 | await build(buildOptions); 41 | console.log('[build] done'); 42 | } 43 | -------------------------------------------------------------------------------- /src/localize/localize.js: -------------------------------------------------------------------------------- 1 | const fallback = 'en'; 2 | const DICTS = {}; 3 | const pending = new Set(); 4 | 5 | // JSON files may have a top-level language key (e.g., { "en": { ... } }). 6 | const unwrap = (lang, code) => 7 | lang?.[code] ?? lang?.[fallback] ?? lang; 8 | 9 | const preloaded = globalThis.FCC_LOCALES; 10 | const hasPreloaded = 11 | preloaded && typeof preloaded === 'object' && Object.keys(preloaded).length; 12 | 13 | if (hasPreloaded) { 14 | for (const [code, data] of Object.entries(preloaded)) { 15 | DICTS[code] = unwrap(data, code); 16 | } 17 | } 18 | 19 | const lookup = (dict, parts) => parts.reduce((n, p) => n?.[p], dict); 20 | 21 | const loadLang = (lang) => { 22 | if (!lang || hasPreloaded || DICTS[lang] || pending.has(lang)) return; 23 | pending.add(lang); 24 | const url = new URL(`./lang/${lang}.json`, import.meta.url); 25 | fetch(url) 26 | .then((r) => (r.ok ? r.json() : null)) 27 | .then((data) => { 28 | if (data) DICTS[lang] = unwrap(data, lang); 29 | }) 30 | .catch(() => {}) 31 | .finally(() => { 32 | pending.delete(lang); 33 | // Let listeners (card) know translations are ready. 34 | window.dispatchEvent( 35 | new CustomEvent('fcc-locales-loaded', { detail: { lang } }), 36 | ); 37 | }); 38 | }; 39 | 40 | // Preload fallback so EN is available first (dev, no build). 41 | loadLang(fallback); 42 | 43 | export function t(hass, key) { 44 | const langCode = (hass?.locale?.language || fallback).toLowerCase(); 45 | const lang = langCode.split('-')[0]; 46 | 47 | loadLang(lang); 48 | 49 | const parts = key.split('.'); 50 | const val = lookup(DICTS[lang], parts); 51 | if (val !== undefined && val !== '') return val; 52 | 53 | const fallbackVal = lookup(DICTS[fallback], parts); 54 | if (fallbackVal !== undefined && fallbackVal !== '') return fallbackVal; 55 | return key; 56 | } 57 | -------------------------------------------------------------------------------- /examples/batteries-table/batteries.md: -------------------------------------------------------------------------------- 1 | # Batteries table 2 | 3 | This example displays battery information for three devices. Let's discuss this column by column. 4 | - **Column 1** - entity icon: 5 | - smartphone: provides the correct icon and color, so nothing needs to be done here, just display it. 6 | - window blind: provides the icon and color, but they are only valid when the device is not charging, so 10 rules are used to override the icon while the device is charging (one rule every 10%). 7 | - temp sensor: provides the correct icon and color, nothing needs to be done here, just display it. 8 | - **Column 2** - device name, these are static strings. 9 | - **Column 3** - additional information: 10 | - smartphone: there are two dynamic rules, the first displays the time elapsed since the charger was disconnected (last_changed), the second overwrites the "full" string with the "disconnect!" string in red (when the charge level is 100% and the charger is still connected). 11 | - window blind: there are three dynamic rules here. The first displays the time elapsed since the charger was disconnected (last_changed). The second rule overwrites the "on" string with the "charging" string. The third displays the "disconnect!" string in red (when the charge level is 100% and the charger is still connected). 12 | - Temp sensor: This is a battery-powered device without charging capabilities, so we don't display anything here. 13 | - **Column 4** - displays the battery charge level. 14 | 15 | Note that different devices can have different states. For example, a smartphone can have "uncharging/charging/full" and a window blind can have "on/off." 16 | 17 | Add a new card to the dashboard and overwrite its entire configuration with the [batteries.yaml](batteries.yaml) file (remember to replace the entities with your own). 18 | 19 | ![batteries table](images/dark-charging.png) 20 | ![batteries table](images/light-disconnect.png) -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # Snowpack dependency directory (https://snowpack.dev/) 45 | web_modules/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Optional stylelint cache 57 | .stylelintcache 58 | 59 | # Optional REPL history 60 | .node_repl_history 61 | 62 | # Output of 'npm pack' 63 | *.tgz 64 | 65 | # Yarn Integrity file 66 | .yarn-integrity 67 | 68 | # dotenv environment variable files 69 | .env 70 | .env.* 71 | !.env.example 72 | 73 | # parcel-bundler cache (https://parceljs.org/) 74 | .cache 75 | .parcel-cache 76 | 77 | # Next.js build output 78 | .next 79 | out 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and not Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # vuepress v2.x temp and cache directory 95 | .temp 96 | .cache 97 | 98 | # Sveltekit cache directory 99 | .svelte-kit/ 100 | 101 | # vitepress build output 102 | **/.vitepress/dist 103 | 104 | # vitepress cache directory 105 | **/.vitepress/cache 106 | 107 | # Docusaurus cache and generated files 108 | .docusaurus 109 | 110 | # Serverless directories 111 | .serverless/ 112 | 113 | # FuseBox cache 114 | .fusebox/ 115 | 116 | # DynamoDB Local files 117 | .dynamodb/ 118 | 119 | # Firebase cache directory 120 | .firebase/ 121 | 122 | # TernJS port file 123 | .tern-port 124 | 125 | # Stores VSCode versions used for testing VSCode extensions 126 | .vscode-test 127 | 128 | # yarn v3 129 | .pnp.* 130 | .yarn/* 131 | !.yarn/patches 132 | !.yarn/plugins 133 | !.yarn/releases 134 | !.yarn/sdks 135 | !.yarn/versions 136 | 137 | # Vite logs files 138 | vite.config.js.timestamp-* 139 | vite.config.ts.timestamp-* 140 | 141 | git_tag_message.md 142 | zrob-release.bat -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Build & Release 2 | 3 | on: 4 | push: 5 | tags: 6 | - 'v*' 7 | release: 8 | types: [published] 9 | 10 | permissions: 11 | contents: write 12 | 13 | jobs: 14 | build: 15 | runs-on: ubuntu-latest 16 | steps: 17 | - uses: actions/checkout@v4 18 | with: 19 | fetch-depth: 0 20 | 21 | - uses: actions/setup-node@v4 22 | with: 23 | node-version: '22' 24 | cache: 'npm' 25 | 26 | - name: Install deps 27 | run: npm ci 28 | 29 | - name: Build 30 | run: npm run build 31 | 32 | # Pobierz treść adnotacji taga przez GitHub API (działa zawsze) 33 | - name: Read tag annotation via GitHub API 34 | id: tagbody 35 | if: github.event_name == 'push' 36 | uses: actions/github-script@v7 37 | with: 38 | script: | 39 | const tag = context.ref.replace('refs/tags/', ''); 40 | const { owner, repo } = context.repo; 41 | 42 | // ref -> typ obiektu pod tagiem 43 | const ref = await github.rest.git.getRef({ owner, repo, ref: `tags/${tag}` }); 44 | const type = ref.data.object.type; // 'tag' (annotated) lub 'commit' (lightweight) 45 | core.setOutput('annotated', String(type === 'tag')); 46 | 47 | if (type === 'tag') { 48 | const t = await github.rest.git.getTag({ owner, repo, tag_sha: ref.data.object.sha }); 49 | core.setOutput('body', t.data.message || ''); 50 | core.info(`Annotated tag: message length ${ (t.data.message || '').length }`); 51 | } else { 52 | core.info('Lightweight tag: no annotation message.'); 53 | } 54 | 55 | # Jeśli release publikujesz ręcznie → tylko dołącz asset 56 | - name: Upload asset to existing release 57 | if: github.event_name == 'release' 58 | uses: softprops/action-gh-release@v2 59 | with: 60 | files: dist/flex-cells-card.js 61 | 62 | # Utwórz release z body z adnotacji (annotated tag) 63 | - name: Create release (annotated tag) 64 | if: github.event_name == 'push' && steps.tagbody.outputs.annotated == 'true' 65 | uses: softprops/action-gh-release@v2 66 | with: 67 | tag_name: ${{ github.ref_name }} 68 | prerelease: ${{ contains(github.ref_name, '-beta') }} 69 | body: ${{ steps.tagbody.outputs.body }} 70 | generate_release_notes: true 71 | files: dist/flex-cells-card.js 72 | 73 | # Utwórz release bez body (lightweight tag) – tylko auto-notes 74 | - name: Create release (lightweight tag) 75 | if: github.event_name == 'push' && steps.tagbody.outputs.annotated != 'true' 76 | uses: softprops/action-gh-release@v2 77 | with: 78 | tag_name: ${{ github.ref_name }} 79 | prerelease: ${{ contains(github.ref_name, '-beta') }} 80 | generate_release_notes: true 81 | files: dist/flex-cells-card.js 82 | -------------------------------------------------------------------------------- /examples/temperature-humidity-table/temperature-humidity.yaml: -------------------------------------------------------------------------------- 1 | rows: 2 | - cells: 3 | - type: string 4 | value: "" 5 | align: left 6 | style: 7 | text_transform: "" 8 | - type: string 9 | value: "" 10 | align: right 11 | - type: string 12 | value: Temperatura 13 | align: right 14 | - type: string 15 | value: Wilgotność 16 | align: right 17 | style: 18 | text_transform: "" 19 | - cells: 20 | - type: icon 21 | value: mdi:sofa-outline 22 | align: left 23 | style: 24 | text_transform: "" 25 | - type: string 26 | value: Salon 27 | align: left 28 | style: 29 | text_transform: "" 30 | - type: entity 31 | value: sensor.atc_salon_temperature 32 | align: right 33 | use_entity_unit: true 34 | precision: 1 35 | - type: entity 36 | value: sensor.atc_salon_humidity 37 | align: right 38 | use_entity_unit: true 39 | precision: 1 40 | - cells: 41 | - type: icon 42 | value: mdi:fridge-outline 43 | align: left 44 | style: 45 | text_transform: "" 46 | - type: string 47 | value: Kuchnia 48 | align: left 49 | style: 50 | text_transform: "" 51 | - type: entity 52 | value: sensor.atc_kuchnia_temperature 53 | align: right 54 | use_entity_unit: true 55 | precision: 1 56 | - type: entity 57 | value: sensor.atc_kuchnia_humidity 58 | align: right 59 | use_entity_unit: true 60 | precision: 1 61 | - cells: 62 | - type: icon 63 | value: mdi:shower-head 64 | align: left 65 | style: 66 | text_transform: "" 67 | - type: string 68 | value: Łazienka 69 | align: left 70 | style: 71 | text_transform: "" 72 | - type: entity 73 | value: sensor.kabina_prysznicowa_temperature 74 | align: right 75 | use_entity_unit: true 76 | precision: 1 77 | - type: entity 78 | value: sensor.kabina_prysznicowa_humidity 79 | align: right 80 | use_entity_unit: true 81 | precision: 1 82 | - cells: 83 | - type: icon 84 | value: mdi:bed-outline 85 | align: left 86 | style: 87 | text_transform: "" 88 | - type: string 89 | value: Sypialnia 90 | align: left 91 | style: 92 | text_transform: "" 93 | - type: entity 94 | value: sensor.atc_sypialnia_temperature 95 | align: right 96 | use_entity_unit: true 97 | precision: 1 98 | - type: entity 99 | value: sensor.atc_sypialnia_humidity 100 | align: right 101 | use_entity_unit: true 102 | precision: 1 103 | - type: separator 104 | separator: 105 | color: "#d0d7de" 106 | background: "" 107 | style: dashed 108 | thickness: 1.5 109 | length: 100% 110 | align: stretch 111 | opacity: 1 112 | margin_top: 0 113 | margin_bottom: 0 114 | cells: [] 115 | - cells: 116 | - type: icon 117 | value: mdi:sun-thermometer-outline 118 | align: left 119 | style: 120 | text_transform: "" 121 | - type: string 122 | value: Prognoza 123 | align: left 124 | style: 125 | text_transform: "" 126 | - type: entity 127 | value: weather.forecast_dom 128 | align: right 129 | use_entity_unit: false 130 | precision: 1 131 | attribute: attributes.temperature 132 | unit: °C 133 | - type: entity 134 | value: weather.forecast_dom 135 | align: right 136 | use_entity_unit: false 137 | precision: 1 138 | attribute: attributes.humidity 139 | unit: "%" 140 | - cells: 141 | - type: icon 142 | value: mdi:balcony 143 | align: left 144 | style: 145 | text_transform: "" 146 | - type: string 147 | value: Balkon 148 | align: left 149 | style: 150 | text_transform: "" 151 | - type: entity 152 | value: sensor.balkon_na_zewnatrz_temperature 153 | align: right 154 | use_entity_unit: true 155 | precision: 1 156 | - type: entity 157 | value: sensor.balkon_na_zewnatrz_humidity 158 | align: right 159 | use_entity_unit: true 160 | precision: 1 161 | - type: separator 162 | separator: 163 | color: "#d0d7de" 164 | background: "" 165 | style: dashed 166 | thickness: 1.5 167 | length: 100% 168 | align: stretch 169 | opacity: 1 170 | margin_top: 0 171 | margin_bottom: 0 172 | cells: [] 173 | - cells: 174 | - type: icon 175 | value: mdi:laptop 176 | align: left 177 | style: 178 | text_transform: "" 179 | - type: string 180 | value: Laptop 181 | align: left 182 | style: 183 | text_transform: "" 184 | - type: entity 185 | value: sensor.szafka_pod_biurkiem_temperature 186 | align: right 187 | use_entity_unit: true 188 | precision: 1 189 | style: 190 | text_transform: "" 191 | - type: entity 192 | value: sensor.szafka_pod_biurkiem_humidity 193 | align: right 194 | use_entity_unit: true 195 | precision: 1 196 | - cells: 197 | - type: icon 198 | value: mdi:television-classic 199 | align: left 200 | style: 201 | text_transform: "" 202 | - type: string 203 | value: Szafka TV 204 | align: left 205 | style: 206 | text_transform: "" 207 | - type: entity 208 | value: sensor.szafka_pod_tv_temperature 209 | align: right 210 | use_entity_unit: true 211 | precision: 1 212 | dyn_color: 213 | - entity: sensor.szafka_pod_tv_temperature 214 | attr: "" 215 | op: ">=" 216 | val: "20" 217 | bg: "" 218 | fg: red 219 | overwrite: "" 220 | overwrite_entity: "" 221 | overwrite_attr: "" 222 | - type: entity 223 | value: sensor.szafka_pod_tv_humidity 224 | align: right 225 | use_entity_unit: true 226 | precision: 1 227 | column_count: 4 228 | card_padding: 0 229 | overflow_x: true 230 | header_from_first_row: true 231 | zebra: true 232 | narrow_breakpoint: "" 233 | text_size: "" 234 | cell_padding: 235 | top: 4 236 | right: 8 237 | bottom: 4 238 | left: 7 239 | custom_template_enabled: false 240 | custom_template_html: "" 241 | type: custom:flex-cells-card 242 | column_widths: 243 | - 40px 244 | - auto 245 | - auto 246 | - 100px 247 | zebra_ignore_separators: true 248 | hide_on_narrow: [] 249 | sort_columns: 250 | - 3 251 | hide_separators_on_sort: false 252 | sort_desc: false 253 | -------------------------------------------------------------------------------- /examples/cover/cover.yaml: -------------------------------------------------------------------------------- 1 | rows: 2 | - cells: 3 | - type: entity 4 | value: cover.roleta_w_sypialni 5 | align: center 6 | style: 7 | text_transform: "" 8 | background: var(--divider-color) 9 | use_entity_unit: true 10 | attr_edit: 11 | enabled: false 12 | service: "" 13 | field: "" 14 | control: slider 15 | checked: true 16 | unchecked: false 17 | entity_display: icon 18 | custom_css_enabled: true 19 | custom_css: | 20 | td { 21 | border-radius: 20px; 22 | height: 30px; 23 | } 24 | - type: entity 25 | value: cover.roleta_w_sypialni 26 | align: left 27 | use_entity_unit: true 28 | attr_edit: 29 | enabled: false 30 | service: "" 31 | field: "" 32 | control: slider 33 | checked: true 34 | unchecked: false 35 | datetime_format: Sypialnia 36 | style: 37 | font_size: 14px 38 | custom_css_enabled: true 39 | custom_css: | 40 | td { 41 | font-weight: 450; 42 | } 43 | - type: entity 44 | value: cover.roleta_w_sypialni 45 | align: center 46 | use_entity_unit: true 47 | attr_edit: 48 | enabled: false 49 | service: "" 50 | field: "" 51 | control: slider 52 | checked: true 53 | unchecked: false 54 | style: 55 | color: var(--label-badge-grey) 56 | font_size: 14px 57 | dyn_color: 58 | - conditions: 59 | - entity: cover.roleta_w_sypialni 60 | attr: "" 61 | op: "=" 62 | val: opening 63 | val2: "" 64 | - entity: cover.roleta_w_sypialni 65 | attr: "" 66 | op: "=" 67 | val: closing 68 | val2: "" 69 | match: any 70 | bg: "" 71 | fg: "" 72 | overwrite: entity 73 | overwrite_entity: "" 74 | overwrite_attr: state 75 | - type: icon 76 | value: mdi:arrow-up-bold-circle 77 | align: center 78 | style: 79 | background: var(--secondary-background-color) 80 | custom_css_enabled: true 81 | custom_css: |- 82 | td { 83 | border-radius: 10px 84 | } 85 | tap_action: 86 | action: perform-action 87 | perform_action: cover.open_cover 88 | target: 89 | entity_id: cover.roleta_w_sypialni 90 | dyn_color: 91 | - conditions: 92 | - entity: cover.roleta_w_sypialni 93 | attr: "" 94 | op: "=" 95 | val: open 96 | val2: "" 97 | - entity: cover.roleta_w_sypialni 98 | attr: current_position 99 | op: "=" 100 | val: "100" 101 | val2: "" 102 | match: all 103 | bg: "" 104 | fg: var(--divider-color) 105 | overwrite: "" 106 | overwrite_entity: "" 107 | overwrite_attr: "" 108 | - conditions: 109 | - entity: cover.roleta_w_sypialni 110 | attr: "" 111 | op: "=" 112 | val: opening 113 | val2: "" 114 | match: all 115 | bg: "" 116 | fg: var(--divider-color) 117 | overwrite: "" 118 | overwrite_entity: "" 119 | overwrite_attr: "" 120 | - type: icon 121 | value: mdi:stop 122 | align: center 123 | style: 124 | text_transform: "" 125 | background: var(--secondary-background-color) 126 | custom_css_enabled: true 127 | custom_css: |- 128 | td { 129 | border-radius: 10px; 130 | } 131 | tap_action: 132 | action: perform-action 133 | perform_action: cover.stop_cover 134 | target: 135 | entity_id: cover.roleta_w_sypialni 136 | - type: icon 137 | value: mdi:arrow-down-bold-circle 138 | align: center 139 | style: 140 | text_transform: "" 141 | background: var(--secondary-background-color) 142 | custom_css_enabled: true 143 | custom_css: |- 144 | td { 145 | border-radius: 10px 146 | } 147 | tap_action: 148 | action: perform-action 149 | perform_action: cover.close_cover 150 | target: 151 | entity_id: cover.roleta_w_sypialni 152 | dyn_color: 153 | - conditions: 154 | - entity: cover.roleta_w_sypialni 155 | attr: "" 156 | op: "=" 157 | val: closed 158 | val2: "" 159 | - entity: cover.roleta_w_sypialni 160 | attr: "" 161 | op: "=" 162 | val: closing 163 | val2: "" 164 | - entity: cover.roleta_w_sypialni 165 | attr: current_position 166 | op: "=" 167 | val: "0" 168 | val2: "" 169 | match: any 170 | bg: "" 171 | fg: var(--divider-color) 172 | overwrite: "" 173 | overwrite_entity: "" 174 | overwrite_attr: "" 175 | - cells: 176 | - type: entity 177 | value: cover.roleta_w_sypialni 178 | align: left 179 | style: 180 | text_transform: "" 181 | font_size: 12px 182 | use_entity_unit: false 183 | attr_edit: 184 | enabled: true 185 | service: cover.set_cover_position 186 | field: position 187 | control: slider 188 | min: 0 189 | max: 100 190 | step: 1 191 | checked: true 192 | unchecked: false 193 | attribute: attributes.current_position 194 | custom_css_enabled: true 195 | custom_css: |- 196 | td .ctrl-wrap, 197 | td .ctrl-range { 198 | width: 100%; 199 | } 200 | .ctrl-value { 201 | width: 35px; 202 | text-align: right; 203 | } 204 | show_control_value_right: true 205 | unit: "%" 206 | - type: string 207 | value: "" 208 | align: right 209 | - type: string 210 | value: "" 211 | align: right 212 | - type: string 213 | value: "" 214 | align: right 215 | - type: string 216 | value: "" 217 | align: right 218 | - type: string 219 | value: "" 220 | align: right 221 | merge_columns: true 222 | column_count: 6 223 | card_padding: 5 224 | overflow_x: true 225 | header_from_first_row: false 226 | zebra: false 227 | narrow_breakpoint: "" 228 | text_size: "" 229 | cell_padding: 230 | top: 4 231 | right: 0 232 | bottom: 4 233 | left: 0 234 | custom_template_enabled: true 235 | custom_template_html: | 236 | 242 | 243 | type: custom:flex-cells-card 244 | column_widths: 245 | - 40px 246 | - auto 247 | - auto 248 | - 40px 249 | - 40px 250 | - 40px 251 | -------------------------------------------------------------------------------- /examples/slider-lights/slider-lights.yaml: -------------------------------------------------------------------------------- 1 | rows: 2 | - cells: 3 | - type: entity 4 | value: light.zarowka_hue_sypialnia 5 | align: center 6 | style: 7 | text_transform: "" 8 | background: var(--divider-color) 9 | use_entity_unit: true 10 | attr_edit: 11 | enabled: false 12 | service: "" 13 | field: "" 14 | control: slider 15 | checked: true 16 | unchecked: false 17 | entity_display: icon 18 | custom_css_enabled: true 19 | custom_css: | 20 | td { 21 | border-radius: 20px; 22 | height: 30px; 23 | } 24 | tap_action: 25 | action: toggle 26 | dyn_color: 27 | - conditions: 28 | - entity: "" 29 | attr: "" 30 | op: "=" 31 | val: "on" 32 | val2: "" 33 | match: all 34 | bg: "#ff980033" 35 | fg: "" 36 | overwrite: "" 37 | overwrite_entity: "" 38 | overwrite_attr: "" 39 | - type: entity 40 | value: light.zarowka_hue_sypialnia 41 | align: left 42 | style: 43 | font_size: 14px 44 | text_transform: "" 45 | custom_css_enabled: true 46 | custom_css: | 47 | td { 48 | padding-left: 10px !important; 49 | } 50 | use_entity_unit: true 51 | attr_edit: 52 | enabled: false 53 | service: "" 54 | field: "" 55 | control: slider 56 | checked: true 57 | unchecked: false 58 | datetime_format: Sypialnia 59 | - type: entity 60 | value: light.zarowka_hue_sypialnia 61 | align: right 62 | use_entity_unit: false 63 | attr_edit: 64 | enabled: true 65 | service: light.turn_on 66 | field: brightness 67 | control: slider 68 | min: 0 69 | max: 255 70 | step: 1 71 | checked: true 72 | unchecked: false 73 | attribute: attributes.brightness 74 | scale_in_min: 0 75 | scale_out_min: 0 76 | scale_in_max: 255 77 | scale_out_max: 100 78 | unit: "%" 79 | precision: 0 80 | style: 81 | font_size: 12px 82 | custom_css_enabled: true 83 | custom_css: | 84 | td .ctrl-wrap, 85 | td .ctrl-range { 86 | width: 100%; 87 | } 88 | .ctrl-value { 89 | width: 40px; 90 | } 91 | - cells: 92 | - type: entity 93 | value: light.zarowka_hue_salon 94 | align: center 95 | style: 96 | text_transform: "" 97 | background: var(--divider-color) 98 | use_entity_unit: true 99 | attr_edit: 100 | enabled: false 101 | service: "" 102 | field: "" 103 | control: slider 104 | checked: true 105 | unchecked: false 106 | entity_display: icon 107 | custom_css_enabled: true 108 | custom_css: | 109 | td { 110 | border-radius: 20px; 111 | height: 30px; 112 | } 113 | tap_action: 114 | action: toggle 115 | dyn_color: 116 | - conditions: 117 | - entity: "" 118 | attr: "" 119 | op: "=" 120 | val: "on" 121 | val2: "" 122 | match: all 123 | bg: "#ff980033" 124 | fg: "" 125 | overwrite: "" 126 | overwrite_entity: "" 127 | overwrite_attr: "" 128 | - type: entity 129 | value: light.zarowka_hue_salon 130 | align: left 131 | style: 132 | font_size: 14px 133 | text_transform: "" 134 | custom_css_enabled: true 135 | custom_css: | 136 | td { 137 | padding-left: 10px !important; 138 | } 139 | use_entity_unit: true 140 | attr_edit: 141 | enabled: false 142 | service: "" 143 | field: "" 144 | control: slider 145 | checked: true 146 | unchecked: false 147 | datetime_format: Salon 148 | - type: entity 149 | value: light.zarowka_hue_salon 150 | align: right 151 | use_entity_unit: false 152 | attr_edit: 153 | enabled: true 154 | service: light.turn_on 155 | field: brightness 156 | control: slider 157 | min: 0 158 | max: 255 159 | step: 1 160 | checked: true 161 | unchecked: false 162 | attribute: attributes.brightness 163 | scale_in_min: 0 164 | scale_out_min: 0 165 | scale_in_max: 255 166 | scale_out_max: 100 167 | unit: "%" 168 | precision: 0 169 | style: 170 | font_size: 12px 171 | custom_css_enabled: true 172 | custom_css: | 173 | td .ctrl-wrap, 174 | td .ctrl-range { 175 | width: 100%; 176 | } 177 | .ctrl-value { 178 | width: 40px; 179 | } 180 | - cells: 181 | - type: entity 182 | value: light.led_biurko 183 | align: center 184 | style: 185 | text_transform: "" 186 | background: var(--divider-color) 187 | use_entity_unit: true 188 | attr_edit: 189 | enabled: false 190 | service: "" 191 | field: "" 192 | control: slider 193 | checked: true 194 | unchecked: false 195 | entity_display: icon 196 | custom_css_enabled: true 197 | custom_css: | 198 | td { 199 | border-radius: 20px; 200 | height: 30px; 201 | } 202 | tap_action: 203 | action: toggle 204 | dyn_color: 205 | - conditions: 206 | - entity: "" 207 | attr: "" 208 | op: "=" 209 | val: "on" 210 | val2: "" 211 | match: all 212 | bg: "#ff980033" 213 | fg: "" 214 | overwrite: "" 215 | overwrite_entity: "" 216 | overwrite_attr: "" 217 | - type: entity 218 | value: light.led_biurko 219 | align: left 220 | style: 221 | font_size: 14px 222 | text_transform: "" 223 | custom_css_enabled: true 224 | custom_css: | 225 | td { 226 | padding-left: 10px !important; 227 | } 228 | use_entity_unit: true 229 | attr_edit: 230 | enabled: false 231 | service: "" 232 | field: "" 233 | control: slider 234 | checked: true 235 | unchecked: false 236 | datetime_format: Biuro 237 | - type: entity 238 | value: light.led_biurko 239 | align: right 240 | use_entity_unit: false 241 | attr_edit: 242 | enabled: true 243 | service: light.turn_on 244 | field: brightness 245 | control: slider 246 | min: 0 247 | max: 255 248 | step: 1 249 | checked: true 250 | unchecked: false 251 | attribute: attributes.brightness 252 | scale_in_min: 0 253 | scale_out_min: 0 254 | scale_in_max: 255 255 | scale_out_max: 100 256 | unit: "%" 257 | precision: 0 258 | style: 259 | font_size: 12px 260 | custom_css_enabled: true 261 | custom_css: | 262 | td .ctrl-wrap, 263 | td .ctrl-range { 264 | width: 100%; 265 | } 266 | .ctrl-value { 267 | width: 40px; 268 | } 269 | column_count: 3 270 | card_padding: 4 271 | overflow_x: true 272 | header_from_first_row: false 273 | zebra: false 274 | narrow_breakpoint: "" 275 | text_size: "" 276 | cell_padding: 277 | top: 4 278 | right: 0 279 | bottom: 4 280 | left: 0 281 | custom_template_enabled: true 282 | custom_template_html: |- 283 | 289 | 290 | 291 | type: custom:flex-cells-card 292 | column_widths: 293 | - 40px 294 | - auto 295 | - auto 296 | -------------------------------------------------------------------------------- /examples/input-controls/input-controls.yaml: -------------------------------------------------------------------------------- 1 | rows: 2 | - cells: 3 | - type: string 4 | value: "" 5 | align: left 6 | style: 7 | text_transform: "" 8 | color: "" 9 | background: "" 10 | object_fit: scale-down 11 | image_width: 100px 12 | image_refresh_interval: "" 13 | image_height: "" 14 | dyn_color: [] 15 | - type: string 16 | value: input control 17 | align: center 18 | - type: string 19 | value: value 20 | align: center 21 | - cells: 22 | - type: string 23 | value: number 24 | align: left 25 | style: 26 | text_transform: "" 27 | bold: true 28 | color: "" 29 | underline: false 30 | background: var(--divider-color) 31 | dyn_color: [] 32 | show_control: true 33 | - type: entity 34 | value: input_number.fcc_volume_b 35 | align: center 36 | use_entity_unit: true 37 | style: 38 | underline: false 39 | text_transform: "" 40 | show_control: true 41 | attr_edit: 42 | enabled: false 43 | service: "" 44 | field: "" 45 | control: slider 46 | checked: true 47 | unchecked: false 48 | - type: entity 49 | value: input_number.fcc_volume_b 50 | align: center 51 | use_entity_unit: true 52 | style: 53 | underline: false 54 | text_transform: "" 55 | - cells: 56 | - type: string 57 | value: number 58 | align: left 59 | style: 60 | text_transform: "" 61 | bold: true 62 | color: "" 63 | underline: false 64 | background: var(--divider-color) 65 | dyn_color: [] 66 | show_control: true 67 | - type: entity 68 | value: input_number.fcc_volume_a 69 | align: center 70 | use_entity_unit: true 71 | style: 72 | underline: false 73 | show_control: true 74 | attr_edit: 75 | enabled: false 76 | service: "" 77 | field: "" 78 | control: slider 79 | checked: true 80 | unchecked: false 81 | - type: entity 82 | value: input_number.fcc_volume_a 83 | align: center 84 | use_entity_unit: true 85 | style: 86 | underline: false 87 | text_transform: "" 88 | - cells: 89 | - type: string 90 | value: boolean 91 | align: left 92 | style: 93 | text_transform: "" 94 | bold: true 95 | color: "" 96 | background: var(--divider-color) 97 | dyn_color: [] 98 | - type: entity 99 | value: input_boolean.wilgotnosc_powiadomienia 100 | align: center 101 | use_entity_unit: true 102 | style: 103 | underline: false 104 | show_control: true 105 | - type: entity 106 | value: input_boolean.wilgotnosc_powiadomienia 107 | align: center 108 | use_entity_unit: true 109 | style: 110 | underline: false 111 | background: "" 112 | color: "" 113 | dyn_color: [] 114 | attr_edit: 115 | enabled: false 116 | service: "" 117 | field: "" 118 | control: slider 119 | checked: true 120 | unchecked: false 121 | - cells: 122 | - type: string 123 | value: select 124 | align: left 125 | style: 126 | text_transform: "" 127 | bold: true 128 | background: var(--divider-color) 129 | dyn_color: [] 130 | - type: entity 131 | value: input_select.radio_station 132 | align: center 133 | use_entity_unit: true 134 | style: 135 | underline: false 136 | show_control: true 137 | - type: entity 138 | value: input_select.radio_station 139 | align: center 140 | use_entity_unit: true 141 | style: 142 | underline: false 143 | attr_edit: 144 | enabled: false 145 | service: "" 146 | field: "" 147 | control: slider 148 | checked: true 149 | unchecked: false 150 | - cells: 151 | - type: string 152 | value: datetime 153 | align: left 154 | style: 155 | text_transform: "" 156 | bold: true 157 | background: var(--divider-color) 158 | dyn_color: [] 159 | - type: entity 160 | value: input_datetime.testowy_datetime_b 161 | align: center 162 | use_entity_unit: true 163 | style: 164 | underline: false 165 | show_control: true 166 | - type: entity 167 | value: input_datetime.testowy_datetime_b 168 | align: center 169 | use_entity_unit: true 170 | style: 171 | underline: false 172 | attr_edit: 173 | enabled: false 174 | service: "" 175 | field: "" 176 | control: slider 177 | checked: true 178 | unchecked: false 179 | - cells: 180 | - type: string 181 | value: datetime 182 | align: left 183 | style: 184 | text_transform: "" 185 | bold: true 186 | background: var(--divider-color) 187 | dyn_color: [] 188 | - type: entity 189 | value: input_datetime.testowy_datetime_c 190 | align: center 191 | use_entity_unit: true 192 | style: 193 | underline: false 194 | show_control: true 195 | - type: entity 196 | value: input_datetime.testowy_datetime_c 197 | align: center 198 | use_entity_unit: true 199 | style: 200 | underline: false 201 | attr_edit: 202 | enabled: false 203 | service: "" 204 | field: "" 205 | control: slider 206 | checked: true 207 | unchecked: false 208 | - cells: 209 | - type: string 210 | value: datetime 211 | align: left 212 | style: 213 | text_transform: "" 214 | bold: true 215 | background: var(--divider-color) 216 | dyn_color: [] 217 | - type: entity 218 | value: input_datetime.testowy_datetime_a 219 | align: center 220 | use_entity_unit: true 221 | style: 222 | underline: false 223 | show_control: true 224 | - type: entity 225 | value: input_datetime.testowy_datetime_a 226 | align: center 227 | use_entity_unit: true 228 | style: 229 | underline: false 230 | text_transform: "" 231 | color: "" 232 | attr_edit: 233 | enabled: false 234 | service: "" 235 | field: "" 236 | control: slider 237 | checked: true 238 | unchecked: false 239 | - cells: 240 | - type: string 241 | value: button 242 | align: left 243 | style: 244 | text_transform: "" 245 | bold: true 246 | background: var(--divider-color) 247 | dyn_color: [] 248 | - type: entity 249 | value: input_button.test_button_a 250 | align: center 251 | use_entity_unit: true 252 | style: 253 | underline: false 254 | show_control: true 255 | tap_action: 256 | action: perform-action 257 | perform_action: input_button.press 258 | target: 259 | entity_id: input_button.test_button_a 260 | - type: entity 261 | value: input_button.test_button_a 262 | align: center 263 | use_entity_unit: true 264 | style: 265 | underline: false 266 | dyn_color: [] 267 | attr_edit: 268 | enabled: false 269 | service: "" 270 | field: last_changed 271 | control: slider 272 | checked: true 273 | unchecked: false 274 | - cells: 275 | - type: string 276 | value: text 277 | align: left 278 | style: 279 | text_transform: "" 280 | bold: true 281 | background: var(--divider-color) 282 | dyn_color: [] 283 | - type: entity 284 | value: input_text.test_text1 285 | align: center 286 | use_entity_unit: true 287 | style: 288 | underline: false 289 | show_control: true 290 | - type: entity 291 | value: input_text.test_text1 292 | align: center 293 | use_entity_unit: true 294 | style: 295 | underline: false 296 | attr_edit: 297 | enabled: false 298 | service: "" 299 | field: "" 300 | control: slider 301 | checked: true 302 | unchecked: false 303 | column_count: 3 304 | card_padding: 0 305 | overflow_x: true 306 | header_from_first_row: true 307 | zebra: false 308 | narrow_breakpoint: "" 309 | text_size: "" 310 | cell_padding: 311 | top: 4 312 | right: 8 313 | bottom: 4 314 | left: 8 315 | custom_template_enabled: false 316 | custom_template_html: "" 317 | type: custom:flex-cells-card 318 | grid_options: 319 | rows: auto 320 | -------------------------------------------------------------------------------- /src/localize/lang/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor": { 3 | "appearance": "Appearance & Style (cell)", 4 | "appearance_row": "Appearance & Style (row)", 5 | "card_title": "Flex Cells card configuration", 6 | "columns_count": "Columns", 7 | "text_size_global": "Text size (default)", 8 | "card_padding": "Card padding", 9 | "cell_padding_top": "Cell padding - top", 10 | "cell_padding_right": "Cell padding - right", 11 | "cell_padding_bottom": "Cell padding - bottom", 12 | "cell_padding_left": "Cell padding - left", 13 | "widths_label": "Column widths (px/%/rem/auto), e.g. \"80px, auto, 25%, 12rem\"", 14 | "hide_cols_label": "Columns to hide below breakpoint (e.g. 1,4)", 15 | "sort_cols_label": "Sort rows by columns (e.g. \"5,2,3\")", 16 | "sort_desc_label": "Reverse sort", 17 | "sort_hide_separators_label": "Hide separators when sorting is enabled", 18 | "sort_hint_grouped": "If you add a separator it splits your rows into groups. Each group is sorted independently.", 19 | "breakpoint": "Breakpoint (px)", 20 | "overflow_x": "Horizontal scroll (overflow-x)", 21 | "header_from_first": "Use first row as header", 22 | "zebra": "Zebra stripes", 23 | "zebra_skip_separators": "Skip separators in zebra pattern", 24 | "row": "Row", 25 | "header_suffix": " - header", 26 | "tab_first": "Column 1", 27 | "merge_all_columns": "Merge all columns", 28 | "copy": "Copy configuration", 29 | "paste": "Paste configuration", 30 | "clipboard_empty": "Clipboard empty", 31 | "copy_paste_section": "Copy & Paste configuration (row & cell)", 32 | "copy_row_group": "Row operations", 33 | "copy_cell_group": "Cell operations", 34 | "copy_row": "Copy row", 35 | "paste_row": "Paste row", 36 | "copy_row_appearance": "Copy row appearance", 37 | "paste_row_appearance": "Paste row appearance", 38 | "copy_row_rules": "Copy row dynamic rules", 39 | "paste_row_rules": "Paste row dynamic rules", 40 | "copy_cell": "Copy cell", 41 | "paste_cell": "Paste cell", 42 | "copy_cell_appearance": "Copy cell appearance", 43 | "paste_cell_appearance": "Paste cell appearance", 44 | "copy_cell_rules": "Copy cell dynamic rules", 45 | "paste_cell_rules": "Paste cell dynamic rules", 46 | "copy_cell_actions": "Copy tap/hold actions", 47 | "paste_cell_actions": "Paste tap/hold actions", 48 | "copy_multi_cell_group": "Multi-cell operations", 49 | "paste_cell_column": "Paste cell into entire column", 50 | "paste_cell_row": "Paste cell into entire row", 51 | "paste_cell_appearance_column": "Paste cell appearance into entire column", 52 | "paste_cell_appearance_row": "Paste cell appearance into entire row", 53 | "paste_cell_rules_column": "Paste cell dynamic rules into entire column", 54 | "paste_cell_rules_row": "Paste cell dynamic rules into entire row", 55 | "paste_cell_actions_column": "Paste tap/hold actions into entire column", 56 | "paste_cell_actions_row": "Paste tap/hold actions into entire row", 57 | "clipboard_row_label": "Row clipboard", 58 | "clipboard_cell_label": "Cell clipboard", 59 | "clipboard_scope_full": "Full", 60 | "clipboard_scope_appearance": "Appearance", 61 | "clipboard_scope_rules": "Dynamic rules", 62 | "clipboard_scope_actions": "Tap/Hold actions", 63 | "align": "Alignment", 64 | "unit_from_entity": "Use unit from entity", 65 | "precision": "Precision", 66 | "show_control": "Show control", 67 | "show_value_on_right": "Show value on right", 68 | "attr_edit_title": "Attribute editing (service)", 69 | "attr_edit_enable": "Enable editing for this attribute", 70 | "attr_edit_hint": "Reads the attribute value and calls the service with {entity_id, [field]: value}. Choose the control type explicitly.", 71 | "attr_edit_service": "Service (domain.service)", 72 | "attr_edit_service_field": "Service field", 73 | "attr_edit_control_type": "Control type", 74 | "attr_edit_control_slider": "Slider", 75 | "attr_edit_control_color": "Color slider (hue)", 76 | "attr_edit_control_color_sat": "Color slider (saturation)", 77 | "attr_edit_control_switch": "Switch", 78 | "attr_edit_min": "Min (slider/number)", 79 | "attr_edit_max": "Max (slider/number)", 80 | "attr_edit_step": "Step", 81 | "attr_edit_checked": "Checked value", 82 | "attr_edit_unchecked": "Unchecked value", 83 | "attr_edit_color_hint": "Hue slider; calls the service with hs_color=[hue,sat]. Leave paths empty to use the entity's hs_color.", 84 | "attr_edit_color_sat_hint": "Saturation slider; keeps hue from the entity and sends hs_color=[hue,sat]. Leave paths empty to use hs_color.", 85 | "attr_edit_color_hue_path": "Hue attribute path (optional)", 86 | "attr_edit_color_sat_path": "Saturation attribute path (optional)", 87 | "attr_edit_color_sat_fallback": "Saturation fallback (0-100)", 88 | "press": "Press", 89 | "entity_display_label": "Entity display", 90 | "entity_display_option_value": "Entity/metadata value", 91 | "entity_display_option_icon": "Entity icon", 92 | "entity_display_option_icon_value": "Icon and value", 93 | "background_color": "Background color", 94 | "content_color": "Content color", 95 | "text_color": "Text color", 96 | "text_size": "Text size", 97 | "text_transform": "Text transform", 98 | "letter_spacing": "Letter spacing", 99 | "icon_color": "Icon color", 100 | "icon_size": "Icon size", 101 | "add_row": "Add row", 102 | "add_separator": "Add separator", 103 | "custom_template": "Custom template", 104 | "custom_template_hint": "Use any HTML and the tag to insert a cell from a table, or to insert an entire row. If you want to use global CSS, do this: .", 105 | "delete_row": "Delete row", 106 | "separator_title": "Separator", 107 | "separator_appearance": "Separator appearance", 108 | "separator_color": "Separator color", 109 | "separator_background": "Background color", 110 | "separator_color_picker": "Color picker", 111 | "separator_style": "Line style", 112 | "separator_style_solid": "Solid", 113 | "separator_style_dashed": "Dashed", 114 | "separator_style_dotted": "Dotted", 115 | "separator_thickness": "Thickness (px)", 116 | "separator_length": "Length / width", 117 | "separator_align": "Alignment", 118 | "separator_align_full": "Full width", 119 | "separator_align_center": "Center", 120 | "separator_align_left": "Left", 121 | "separator_align_right": "Right", 122 | "separator_opacity": "Opacity", 123 | "separator_margin_top": "Margin top (px)", 124 | "separator_margin_bottom": "Margin bottom (px)", 125 | "separator_zero_hint": "If you set the separator thickness to zero it will be invisible but it still divides rows into groups that are used when sorting.", 126 | "column": "Column", 127 | "drag_to_reorder": "Drag to reorder", 128 | "move_left": "Move left", 129 | "move_right": "Move right", 130 | "up": "Move up", 131 | "down": "Move down", 132 | "toggle": "Collapse/Expand", 133 | "delete_column": "Delete column", 134 | "cell_type": "Cell type", 135 | "entity_label": "Entity", 136 | "string_label": "Text", 137 | "icon_label": "Icon", 138 | "tap_action": "Tap action", 139 | "hold_action": "Hold action", 140 | "double_tap_action": "Double-tap action", 141 | "advanced": "Tap & Hold Actions (cell)", 142 | "custom_css": "Custom CSS", 143 | "actions_hint": "If any action is set, the default 'more-info' for an entity will be disabled.", 144 | "scale_title": "Rescale", 145 | "scale_in_min": "Input min", 146 | "scale_in_max": "Input max", 147 | "scale_out_min": "Output min", 148 | "scale_out_max": "Output max", 149 | "scale_hint": "Map a numeric value from one range to another (e.g., 0-255 → 0-100).", 150 | "dynamic_title": "Dynamic Rules (cell): Color & Content Overrides", 151 | "dynamic_row_title": "Dynamic Rules (row): Color & Row Hiding", 152 | "dynamic_hint": "Evaluate rules from top to bottom, the last match wins.", 153 | "datetime_format": "Date/Time format & Text override", 154 | "available_tokens": "Available tokens: RAW, YYYY, YY, MM, M, DD, D, HH, H, hh, h, mm, m, ss, s, MMMM, REL (elapsed time), REL_SHORT (short elapsed time), [literals in brackets]", 155 | "value": "Value" 156 | }, 157 | "placeholder": { 158 | "entity": "Select entity", 159 | "string": "Text to display", 160 | "icon": "mdi:icon-name", 161 | "datetime_format": "e.g. H:mm:ss, YYYY-MM-DD H:mm, REL [ago], REL_SHORT [ago] or [Custom text]", 162 | "attribute_path": "Metadata path (e.g. a.b[0].c)" 163 | }, 164 | "dynamic": { 165 | "operator": "Operator", 166 | "match": "Condition logic", 167 | "match_all": "All conditions (AND)", 168 | "match_any": "Any condition (OR)", 169 | "add_rule": "Add rule", 170 | "add_condition": "Add condition", 171 | "delete_rule": "Delete", 172 | "delete_condition": "Delete condition", 173 | "op_between": "between", 174 | "op_contains": "contains", 175 | "op_not_contains": "does not contain", 176 | "min": "Min", 177 | "max": "Max", 178 | "bg": "Background color", 179 | "fg": "Content color", 180 | "overwrite_label": "Overwrite content", 181 | "overwrite_hide": "Hide", 182 | "overwrite_text": "Overwrite with text", 183 | "overwrite_icon": "Overwrite with icon", 184 | "overwrite_entity_metadata": "Overwrite with entity/metadata", 185 | "visibility_label": "Visibility", 186 | "visibility_visible": "Visible", 187 | "visibility_hidden": "Hidden", 188 | "text": "Text" 189 | }, 190 | "align": { 191 | "left": "left", 192 | "center": "center", 193 | "right": "right" 194 | }, 195 | "precision": { 196 | "two": "two decimals", 197 | "one": "one decimal", 198 | "int": "integer" 199 | }, 200 | "style": { 201 | "bold": "bold", 202 | "italic": "italic", 203 | "underline": "underline", 204 | "strike": "strikethrough" 205 | }, 206 | "card": { 207 | "no_rows": "No rows to display." 208 | } 209 | } 210 | -------------------------------------------------------------------------------- /src/localize/lang/pl.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor": { 3 | "appearance": "Wygląd i styl (komórka)", 4 | "appearance_row": "Wygląd i styl (wiersz)", 5 | "card_title": "Konfiguracja karty Flex Cells", 6 | "columns_count": "Liczba kolumn", 7 | "text_size_global": "Rozmiar tekstu (domyślny)", 8 | "card_padding": "Padding karty", 9 | "cell_padding_top": "Padding komórki - góra", 10 | "cell_padding_right": "Padding komórki - prawa", 11 | "cell_padding_bottom": "Padding komórki - dół", 12 | "cell_padding_left": "Padding komórki - lewa", 13 | "widths_label": "Szerokości kolumn (px/%/rem/auto), np. \"80px, auto, 25%, 12rem\"", 14 | "hide_cols_label": "Kolumny do ukrycia poniżej breakpointu (np. 1,4)", 15 | "sort_cols_label": "Kolumny do sortowania wierszy (np. 5,2,3)", 16 | "sort_desc_label": "Odwróć sortowanie", 17 | "sort_hide_separators_label": "Ukryj separatory gdy sortowanie jest włączone", 18 | "sort_hint_grouped": "Jeśli użyjesz separatora, podzieli on twoje wiersze na grupy. Każda grupa jest sortowana indywidualnie.", 19 | "breakpoint": "Breakpoint (px)", 20 | "overflow_x": "Poziomy scroll (overflow-x)", 21 | "header_from_first": "Użyj pierwszego wiersza jako nagłówka", 22 | "zebra": "Zebra stripes", 23 | "zebra_skip_separators": "Nie uwzględniaj separatora", 24 | "row": "Wiersz", 25 | "header_suffix": " - nagłówek", 26 | "tab_first": "Kolumna 1", 27 | "merge_all_columns": "Scal wszystkie kolumny", 28 | "copy": "Kopiuj konfigurację", 29 | "paste": "Wklej konfigurację", 30 | "clipboard_empty": "Schowek pusty", 31 | "copy_paste_section": "Kopiuj/Wklej konfigurację (wiersz i komórka)", 32 | "copy_row_group": "Operacje na wierszu", 33 | "copy_cell_group": "Operacje na komórce", 34 | "copy_row": "Kopiuj wiersz", 35 | "paste_row": "Wklej wiersz", 36 | "copy_row_appearance": "Kopiuj wygląd wiersza", 37 | "paste_row_appearance": "Wklej wygląd wiersza", 38 | "copy_row_rules": "Kopiuj reguły wiersza", 39 | "paste_row_rules": "Wklej reguły wiersza", 40 | "copy_cell": "Kopiuj komórkę", 41 | "paste_cell": "Wklej komórkę", 42 | "copy_cell_appearance": "Kopiuj wygląd komórki", 43 | "paste_cell_appearance": "Wklej wygląd komórki", 44 | "copy_cell_rules": "Kopiuj reguły komórki", 45 | "paste_cell_rules": "Wklej reguły komórki", 46 | "copy_cell_actions": "Kopiuj akcje tap/hold", 47 | "paste_cell_actions": "Wklej akcje tap/hold", 48 | "copy_multi_cell_group": "Operacje na wielu komórkach", 49 | "paste_cell_column": "Wklej komórkę dla wszystkich komórek w tej kolumnie", 50 | "paste_cell_row": "Wklej komórkę dla wszystkich komórek w tym wierszu", 51 | "paste_cell_appearance_column": "Wklej wygląd komórki dla wszystkich komórek w tej kolumnie", 52 | "paste_cell_appearance_row": "Wklej wygląd komórki dla wszystkich komórek w tym wierszu", 53 | "paste_cell_rules_column": "Wklej reguły komórki dla wszystkich komórek w tej kolumnie", 54 | "paste_cell_rules_row": "Wklej reguły komórki dla wszystkich komórek w tym wierszu", 55 | "paste_cell_actions_column": "Wklej akcje tap/hold komórki dla wszystkich komórek w tej kolumnie", 56 | "paste_cell_actions_row": "Wklej akcje tap/hold komórki dla wszystkich komórek w tym wierszu", 57 | "clipboard_row_label": "Schowek (wiersz)", 58 | "clipboard_cell_label": "Schowek (komórka)", 59 | "clipboard_scope_full": "Cała", 60 | "clipboard_scope_appearance": "Wygląd", 61 | "clipboard_scope_rules": "Reguły dynamiczne", 62 | "clipboard_scope_actions": "Akcje tap/hold", 63 | "align": "Wyrównanie", 64 | "unit_from_entity": "Jednostka z encji", 65 | "precision": "Precyzja", 66 | "show_control": "Pokaż kontrolkę", 67 | "show_value_on_right": "Pokaż wartość po prawej", 68 | "attr_edit_title": "Edycja atrybutu (usługa)", 69 | "attr_edit_enable": "Włącz edycję tego atrybutu", 70 | "attr_edit_hint": "Odczytuje wartość atrybutu i wywołuje usługę z {entity_id, [pole]: wartość}. Typ kontrolki ustaw ręcznie.", 71 | "attr_edit_service": "Usługa (domena.usługa)", 72 | "attr_edit_service_field": "Pole usługi", 73 | "attr_edit_control_type": "Typ kontrolki", 74 | "attr_edit_control_slider": "Suwak", 75 | "attr_edit_control_color": "Suwak koloru (hue)", 76 | "attr_edit_control_color_sat": "Suwak nasycenia", 77 | "attr_edit_control_switch": "Przełącznik", 78 | "attr_edit_min": "Min (suwak/liczba)", 79 | "attr_edit_max": "Max (suwak/liczba)", 80 | "attr_edit_step": "Krok", 81 | "attr_edit_checked": "Wartość dla zaznaczonego", 82 | "attr_edit_unchecked": "Wartość dla odznaczonego", 83 | "attr_edit_color_hint": "Suwak ustawia hue; wywołuje usługę z hs_color=[hue,sat]. Puste ścieżki użyją domyślnego hs_color z encji.", 84 | "attr_edit_color_sat_hint": "Suwak nasycenia; używa hue z encji i wysyła hs_color=[hue,sat]. Puste ścieżki użyją hs_color z encji.", 85 | "attr_edit_color_hue_path": "Ścieżka atrybutu hue (opcjonalnie)", 86 | "attr_edit_color_sat_path": "Ścieżka atrybutu nasycenia (opcjonalnie)", 87 | "attr_edit_color_sat_fallback": "Domyślne nasycenie (0-100)", 88 | "press": "Wciśnij", 89 | "entity_display_label": "Wyświetlanie encji", 90 | "entity_display_option_value": "Wartość encji/metadanych", 91 | "entity_display_option_icon": "Ikona encji", 92 | "entity_display_option_icon_value": "Ikona i wartość", 93 | "background_color": "Kolor tła", 94 | "content_color": "Kolor zawartości", 95 | "text_color": "Tekst kolor", 96 | "text_size": "Tekst rozmiar", 97 | "text_transform": "Tekst transformacja", 98 | "letter_spacing": "Odstępy między literami", 99 | "icon_color": "Ikona kolor", 100 | "icon_size": "Ikona rozmiar", 101 | "add_row": "Dodaj wiersz", 102 | "add_separator": "Dodaj separator", 103 | "custom_template": "Własny szablon", 104 | "custom_template_hint": "Użyj dowolnego HTML oraz tagu aby wstawić komorkę z tabeli, lub aby wstawić cały wiersz. Jeśli chcesz użyć globalnego CSS to zrób tak: .", 105 | "delete_row": "Usuń wiersz", 106 | "separator_title": "Separator", 107 | "separator_appearance": "Wyglad separatora", 108 | "separator_color": "Kolor separatora", 109 | "separator_background": "Kolor tła separatora", 110 | "separator_color_picker": "Wybierz kolor", 111 | "separator_style": "Styl linii", 112 | "separator_style_solid": "Ciągła", 113 | "separator_style_dashed": "Przerywana", 114 | "separator_style_dotted": "Kropkowana", 115 | "separator_thickness": "Grubość (px)", 116 | "separator_length": "Długość / szerokość", 117 | "separator_align": "Wyrównanie", 118 | "separator_align_full": "Pełna szerokość", 119 | "separator_align_center": "Środek", 120 | "separator_align_left": "Lewo", 121 | "separator_align_right": "Prawo", 122 | "separator_opacity": "Przezroczystość", 123 | "separator_margin_top": "Margines górny (px)", 124 | "separator_margin_bottom": "Margines dolny (px)", 125 | "separator_zero_hint": "Jeśli ustawisz grubość separatora na zero, separator będzie niewidoczny, ale nadal podzieli wiersze na grupy brane pod uwagę przy sortowaniu.", 126 | "column": "Kolumna", 127 | "drag_to_reorder": "Przeciągnij, aby zmienić kolejność", 128 | "move_left": "Przenieś w lewo", 129 | "move_right": "Przenieś w prawo", 130 | "up": "Przenieś w górę", 131 | "down": "Przenieś w dół", 132 | "toggle": "Zwiń/Rozwiń", 133 | "delete_column": "Usuń kolumnę", 134 | "cell_type": "Typ komórki", 135 | "entity_label": "Encja", 136 | "string_label": "Tekst", 137 | "icon_label": "Ikona", 138 | "tap_action": "Akcja po kliknięciu", 139 | "hold_action": "Akcja po przytrzymaniu", 140 | "double_tap_action": "Akcja po dwukliku", 141 | "advanced": "Akcje dotknięcia i przytrzymania (komórka)", 142 | "custom_css": "Własny CSS", 143 | "actions_hint": "Jeśli ustawisz jakąkolwiek akcję, domyślne 'more-info' dla encji zostanie wyłączone.", 144 | "scale_title": "Przeskalowanie", 145 | "scale_in_min": "Wejście min", 146 | "scale_in_max": "Wejście max", 147 | "scale_out_min": "Wyjście min", 148 | "scale_out_max": "Wyjście max", 149 | "scale_hint": "Mapuj wartość z jednego zakresu na inny (np. 0-255 → 0-100).", 150 | "dynamic_title": "Reguły dynamiczne (komórka): kolor i nadpisywanie treści", 151 | "dynamic_row_title": "Reguły dynamiczne (wiersz): kolor i ukrywanie wiersza", 152 | "dynamic_hint": "Reguły sprawdzane są od góry do dołu, ostatnia dopasowana wygrywa.", 153 | "datetime_format": "Format daty/czasu i nadpisanie tekstu", 154 | "available_tokens": "Dostępne tokeny: RAW, YYYY, YY, MM, M, DD, D, HH, H, hh, h, mm, m, ss, s, MMMM, REL (czas, który upłynął), REL_SHORT (skrót czasu), [literały w nawiasach]", 155 | "value": "Wartość" 156 | }, 157 | "placeholder": { 158 | "entity": "Wybierz encję", 159 | "string": "Tekst do wyświetlenia", 160 | "icon": "mdi:nazwa-ikony", 161 | "datetime_format": "np. H:mm:ss, YYYY-MM-DD H:mm, REL [temu], REL_SHORT [temu] lub [dowolny tekst]", 162 | "attribute_path": "Ścieżka metadanych (np. a.b[0].c)" 163 | }, 164 | "dynamic": { 165 | "operator": "Operator", 166 | "match": "Logika warunków", 167 | "match_all": "Wszystkie (AND)", 168 | "match_any": "Dowolny (OR)", 169 | "add_rule": "Dodaj regułę", 170 | "add_condition": "Dodaj warunek", 171 | "delete_rule": "Usuń", 172 | "delete_condition": "Usuń warunek", 173 | "op_between": "pomiędzy", 174 | "op_contains": "zawiera", 175 | "op_not_contains": "nie zawiera", 176 | "min": "Min", 177 | "max": "Max", 178 | "bg": "Kolor tła", 179 | "fg": "Kolor zawartości", 180 | "overwrite_label": "Nadpisz zawartość", 181 | "overwrite_hide": "Ukryj", 182 | "overwrite_text": "Nadpisz tekstem", 183 | "overwrite_icon": "Nadpisz ikoną", 184 | "overwrite_entity_metadata": "Nadpisz encją/metadanymi", 185 | "visibility_label": "Widoczność", 186 | "visibility_visible": "Widoczny", 187 | "visibility_hidden": "Ukryty", 188 | "text": "Tekst" 189 | }, 190 | "align": { 191 | "left": "lewo", 192 | "center": "środek", 193 | "right": "prawo" 194 | }, 195 | "precision": { 196 | "two": "dwa miejsca", 197 | "one": "jedno miejsce", 198 | "int": "liczba całkowita" 199 | }, 200 | "style": { 201 | "bold": "pogrubienie", 202 | "italic": "kursywa", 203 | "underline": "podkreślenie", 204 | "strike": "przekreślenie" 205 | }, 206 | "card": { 207 | "no_rows": "Brak wierszy do wyświetlenia." 208 | } 209 | } 210 | -------------------------------------------------------------------------------- /src/localize/lang/de.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor": { 3 | "appearance": "Aussehen & Stil (Zelle)", 4 | "appearance_row": "Aussehen & Stil (Zeile)", 5 | "card_title": "Flex Cells card konfigurieren", 6 | "columns_count": "Spalten", 7 | "text_size_global": "Textgröße (Standard)", 8 | "card_padding": "Kartenabstand", 9 | "cell_padding_top": "Zellenabstand - oben", 10 | "cell_padding_right": "Zellenabstand - rechts", 11 | "cell_padding_bottom": "Zellenabstand - unten", 12 | "cell_padding_left": "Zellenabstand - links", 13 | "widths_label": "Spaltenbreite (px/%/rem/auto), z. B. \"80px, auto, 25%, 12rem\"", 14 | "hide_cols_label": "Spalten, die unterhalb des Breakpoints ausgeblendet werden (z. B. 1,4)", 15 | "sort_cols_label": "Spalten zum Sortieren der Zeilen (z. B. 5,2,3)", 16 | "sort_desc_label": "Sortierung umkehren", 17 | "sort_hide_separators_label": "Separatoren beim Sortieren ausblenden", 18 | "sort_hint_grouped": "Wenn du einen Separator einfügst, teilt er deine Zeilen in Gruppen. Jede Gruppe wird separat sortiert.", 19 | "breakpoint": "Breakpoint (px)", 20 | "overflow_x": "Horizontaler Scroll (overflow-x)", 21 | "header_from_first": "Erste Zeile als Kopfzeile verwenden", 22 | "zebra": "Zebrastreifen", 23 | "zebra_skip_separators": "Separatoren auslassen", 24 | "row": "Zeile", 25 | "header_suffix": " - Kopfzeile", 26 | "tab_first": "Spalte 1", 27 | "merge_all_columns": "Alle Spalten zusammenfuehren", 28 | "copy": "Konfiguration kopieren", 29 | "paste": "Konfiguration einfügen", 30 | "clipboard_empty": "Zwischenablage leer", 31 | "copy_paste_section": "Kopieren & Einfügen (Zeile & Zelle)", 32 | "copy_row_group": "Zeilenaktionen", 33 | "copy_cell_group": "Zellenaktionen", 34 | "copy_row": "Zeile kopieren", 35 | "paste_row": "Zeile einfügen", 36 | "copy_row_appearance": "Zeilenstil kopieren", 37 | "paste_row_appearance": "Zeilenstil einfügen", 38 | "copy_row_rules": "Zeilenregeln kopieren", 39 | "paste_row_rules": "Zeilenregeln einfügen", 40 | "copy_cell": "Zelle kopieren", 41 | "paste_cell": "Zelle einfügen", 42 | "copy_cell_appearance": "Zellenstil kopieren", 43 | "paste_cell_appearance": "Zellenstil einfügen", 44 | "copy_cell_rules": "Zellenregeln kopieren", 45 | "paste_cell_rules": "Zellenregeln einfügen", 46 | "copy_cell_actions": "Tap/Hold-Aktionen kopieren", 47 | "paste_cell_actions": "Tap/Hold-Aktionen einfügen", 48 | "copy_multi_cell_group": "Mehrzellen-Aktionen", 49 | "paste_cell_column": "Zelle in gesamte Spalte einfügen", 50 | "paste_cell_row": "Zelle in gesamte Zeile einfügen", 51 | "paste_cell_appearance_column": "Zellenstil in gesamte Spalte einfügen", 52 | "paste_cell_appearance_row": "Zellenstil in gesamte Zeile einfügen", 53 | "paste_cell_rules_column": "Zellenregeln in gesamte Spalte einfügen", 54 | "paste_cell_rules_row": "Zellenregeln in gesamte Zeile einfügen", 55 | "paste_cell_actions_column": "Tap/Hold-Aktionen in gesamte Spalte einfügen", 56 | "paste_cell_actions_row": "Tap/Hold-Aktionen in gesamte Zeile einfügen", 57 | "clipboard_row_label": "Zwischenablage (Zeile)", 58 | "clipboard_cell_label": "Zwischenablage (Zelle)", 59 | "clipboard_scope_full": "Vollständig", 60 | "clipboard_scope_appearance": "Aussehen", 61 | "clipboard_scope_rules": "Dynamische Regeln", 62 | "clipboard_scope_actions": "Tap/Hold-Aktionen", 63 | "align": "Ausrichtung", 64 | "unit_from_entity": "Einheit der Entität verwenden", 65 | "precision": "Genauigkeit", 66 | "show_control": "Steuerelement anzeigen", 67 | "show_value_on_right": "Wert rechts anzeigen", 68 | "attr_edit_title": "Attribut bearbeiten (Service)", 69 | "attr_edit_enable": "Bearbeitung dieses Attributs aktivieren", 70 | "attr_edit_hint": "Liest den Attributwert und ruft den Service mit {entity_id, [Feld]: Wert} auf. Steuerungstyp explizit wählen.", 71 | "attr_edit_service": "Service (domain.service)", 72 | "attr_edit_service_field": "Service-Feld", 73 | "attr_edit_control_type": "Steuerungstyp", 74 | "attr_edit_control_slider": "Slider", 75 | "attr_edit_control_color": "Farbschieber (Hue)", 76 | "attr_edit_control_color_sat": "Farbschieber (Sättigung)", 77 | "attr_edit_control_switch": "Schalter", 78 | "attr_edit_min": "Min (Slider/Zahl)", 79 | "attr_edit_max": "Max (Slider/Zahl)", 80 | "attr_edit_step": "Schritt", 81 | "attr_edit_checked": "Wert für \"an\"", 82 | "attr_edit_unchecked": "Wert für \"aus\"", 83 | "attr_edit_color_hint": "Regler setzt Hue und ruft den Service mit hs_color=[hue,sat] auf. Leere Pfade nutzen hs_color aus dem Entity.", 84 | "attr_edit_color_sat_hint": "Sättigungsregler; übernimmt Hue aus dem Entity und sendet hs_color=[hue,sat]. Leere Pfade nutzen hs_color aus dem Entity.", 85 | "attr_edit_color_hue_path": "Hue-Attributpfad (optional)", 86 | "attr_edit_color_sat_path": "Sättigungs-Attributpfad (optional)", 87 | "attr_edit_color_sat_fallback": "Fallback-Sättigung (0-100)", 88 | "press": "Drücken", 89 | "entity_display_label": "Entitaetsdarstellung", 90 | "entity_display_option_value": "Entitaets-/Metadatenwert", 91 | "entity_display_option_icon": "Entitaetssymbol", 92 | "entity_display_option_icon_value": "Symbol und Wert", 93 | "background_color": "Hintergrundfarbe", 94 | "content_color": "Inhaltsfarbe", 95 | "text_color": "Textfarbe", 96 | "text_size": "Textgröße", 97 | "text_transform": "Textumwandlung", 98 | "letter_spacing": "Buchstabenabstand", 99 | "icon_color": "Iconfarbe", 100 | "icon_size": "Icongröße", 101 | "add_row": "Zeile hinzufügen", 102 | "add_separator": "Separator hinzufuegen", 103 | "custom_template": "Eigenes Template", 104 | "custom_template_hint": "Nutze beliebiges HTML und den Tag um eine Tabellenzelle einzufügen, oder um die vollständige Zeile einzufügen. Wenn Sie globales CSS verwenden möchten, gehen Sie wie folgt vor: .", 105 | "delete_row": "Zeile löschen", 106 | "separator_title": "Separator", 107 | "separator_appearance": "Separator Darstellung", 108 | "separator_color": "Separatorfarbe", 109 | "separator_background": "Separator-Hintergrundfarbe", 110 | "separator_color_picker": "Farbauswahl", 111 | "separator_style": "Linienstil", 112 | "separator_style_solid": "Durchgezogen", 113 | "separator_style_dashed": "Gestrichelt", 114 | "separator_style_dotted": "Gepunktet", 115 | "separator_thickness": "Linienstaerke (px)", 116 | "separator_length": "Laenge / Breite", 117 | "separator_align": "Ausrichtung", 118 | "separator_align_full": "Volle Breite", 119 | "separator_align_center": "Zentriert", 120 | "separator_align_left": "Links", 121 | "separator_align_right": "Rechts", 122 | "separator_opacity": "Deckkraft", 123 | "separator_margin_top": "Oberer Abstand (px)", 124 | "separator_margin_bottom": "Unterer Abstand (px)", 125 | "separator_zero_hint": "Wenn du die Dicke auf Null setzt, bleibt der Separator unsichtbar, trennt aber weiterhin Zeilengruppen, die beim Sortieren berücksichtigt werden.", 126 | "column": "Spalte", 127 | "drag_to_reorder": "Zum Umordnen ziehen", 128 | "move_left": "nach links schieben", 129 | "move_right": "nach rechts schieben", 130 | "up": "Nach oben", 131 | "down": "Nach unten", 132 | "toggle": "Ein-/ausklappen", 133 | "delete_column": "Spalte löschen", 134 | "cell_type": "Zellentyp", 135 | "entity_label": "Entität", 136 | "string_label": "Text", 137 | "icon_label": "Icon", 138 | "tap_action": "Tippen-Aktion", 139 | "hold_action": "Aktion bei Halten", 140 | "double_tap_action": "Doppeltippen-Aktion", 141 | "advanced": "Tippen & Halten Aktionen (Zelle)", 142 | "custom_css": "Benutzerdefiniertes CSS", 143 | "actions_hint": "Wenn eine Aktion gesetzt ist, wird das Standard-\"more-info\" für die Entität deaktiviert.", 144 | "scale_title": "Skalieren", 145 | "scale_in_min": "Eingabe min", 146 | "scale_in_max": "Eingabe max", 147 | "scale_out_min": "Ausgabe min", 148 | "scale_out_max": "Ausgabe max", 149 | "scale_hint": "Numerischen Wert von einem Bereich in einen anderen abbilden (z. B. 0-255 → 0-100).", 150 | "dynamic_title": "Dynamische Regeln (Zelle): Farb- & Inhalts-Übersteuerung", 151 | "dynamic_row_title": "Dynamische Regeln (Zeile): Farben und Zeilenausblenden", 152 | "dynamic_hint": "Regeln von oben nach unten prüfen, die letzte Übereinstimmung gewinnt.", 153 | "datetime_format": "Datums-/Zeitformat & Textüberschreibung", 154 | "available_tokens": "Verfügbare Tokens: RAW, YYYY, YY, MM, M, DD, D, HH, H, hh, h, mm, m, ss, s, MMMM, REL (verstrichene Zeit), REL_SHORT (kompakte Zeit), [Literale in Klammern]", 155 | "value": "Wert" 156 | }, 157 | "placeholder": { 158 | "entity": "Entität auswählen", 159 | "string": "Anzuzeigender Text", 160 | "icon": "mdi:icon-name", 161 | "datetime_format": "z. B. H:mm:ss, YYYY-MM-DD H:mm, REL [vor], REL_SHORT [vor] oder [eigener Text]", 162 | "attribute_path": "Metadatenpfad (z. B. a.b[0].c)" 163 | }, 164 | "dynamic": { 165 | "operator": "Operator", 166 | "match": "Bedingungslogik", 167 | "match_all": "Alle Bedingungen (UND)", 168 | "match_any": "Beliebige Bedingung (ODER)", 169 | "add_rule": "Regel hinzufügen", 170 | "add_condition": "Bedingung hinzufügen", 171 | "delete_rule": "Löschen", 172 | "delete_condition": "Bedingung löschen", 173 | "op_between": "zwischen", 174 | "op_contains": "enthält", 175 | "op_not_contains": "enthält nicht", 176 | "min": "Min", 177 | "max": "Max", 178 | "bg": "Hintergrundfarbe", 179 | "fg": "Inhaltsfarbe", 180 | "overwrite_label": "Inhalt überschreiben", 181 | "overwrite_hide": "Ausblenden", 182 | "overwrite_text": "Mit Text überschreiben", 183 | "overwrite_icon": "Mit Icon überschreiben", 184 | "overwrite_entity_metadata": "Mit Entitaet/Metadaten ueberschreiben", 185 | "visibility_label": "Sichtbarkeit", 186 | "visibility_visible": "Sichtbar", 187 | "visibility_hidden": "Versteckt", 188 | "text": "Text" 189 | }, 190 | "align": { 191 | "left": "links", 192 | "center": "zentriert", 193 | "right": "rechts" 194 | }, 195 | "precision": { 196 | "two": "zwei Dezimalstellen", 197 | "one": "eine Dezimalstelle", 198 | "int": "Ganzzahl" 199 | }, 200 | "style": { 201 | "bold": "fett", 202 | "italic": "kursiv", 203 | "underline": "unterstrichen", 204 | "strike": "durchgestrichen" 205 | }, 206 | "card": { 207 | "no_rows": "Keine Zeilen zum Anzeigen." 208 | } 209 | } 210 | -------------------------------------------------------------------------------- /examples/hue-saturation/hue-saturation.yaml: -------------------------------------------------------------------------------- 1 | rows: 2 | - cells: 3 | - type: entity 4 | value: light.led_wyspa 5 | align: center 6 | style: 7 | text_transform: "" 8 | background: var(--divider-color) 9 | use_entity_unit: true 10 | attr_edit: 11 | enabled: false 12 | service: "" 13 | field: "" 14 | control: slider 15 | checked: true 16 | unchecked: false 17 | hue_path: "" 18 | sat_path: "" 19 | entity_display: icon 20 | custom_css_enabled: true 21 | custom_css: | 22 | td { 23 | border-radius: 20px; 24 | height: 30px; 25 | } 26 | tap_action: 27 | action: toggle 28 | dyn_color: 29 | - conditions: 30 | - entity: "" 31 | attr: "" 32 | op: "=" 33 | val: "on" 34 | val2: "" 35 | match: all 36 | bg: "#ff980033" 37 | fg: "" 38 | overwrite: "" 39 | overwrite_entity: "" 40 | overwrite_attr: "" 41 | - type: entity 42 | value: light.led_wyspa 43 | align: left 44 | style: 45 | font_size: 14px 46 | text_transform: "" 47 | custom_css_enabled: true 48 | custom_css: | 49 | td { 50 | padding-left: 10px !important; 51 | } 52 | use_entity_unit: true 53 | attr_edit: 54 | enabled: false 55 | service: "" 56 | field: "" 57 | control: slider 58 | checked: true 59 | unchecked: false 60 | datetime_format: Wyspa 61 | - type: entity 62 | value: light.led_wyspa 63 | align: right 64 | use_entity_unit: false 65 | attr_edit: 66 | enabled: true 67 | service: light.turn_on 68 | field: brightness 69 | control: slider 70 | min: 1 71 | max: 255 72 | step: 1 73 | checked: true 74 | unchecked: false 75 | hue_path: "" 76 | sat_path: "" 77 | attribute: attributes.brightness 78 | scale_in_min: 2 79 | scale_out_min: 1 80 | scale_in_max: 255 81 | scale_out_max: 100 82 | unit: "%" 83 | precision: 0 84 | style: 85 | font_size: 12px 86 | text_transform: "" 87 | custom_css_enabled: true 88 | custom_css: | 89 | .ctrl-value { 90 | width: 40px; 91 | } 92 | dyn_color: [] 93 | show_control_value_right: false 94 | - type: entity 95 | value: light.led_wyspa 96 | align: right 97 | use_entity_unit: false 98 | attr_edit: 99 | enabled: false 100 | service: "" 101 | field: "" 102 | control: slider 103 | checked: true 104 | unchecked: false 105 | hue_path: "" 106 | sat_path: "" 107 | attribute: brightness 108 | unit: "%" 109 | style: 110 | font_size: 12px 111 | scale_in_min: 0 112 | scale_in_max: 255 113 | scale_out_min: 0 114 | scale_out_max: 100 115 | precision: 0 116 | dyn_color: 117 | - conditions: 118 | - entity: light.led_wyspa 119 | attr: "" 120 | op: "=" 121 | val: "off" 122 | val2: "" 123 | match: all 124 | bg: "" 125 | fg: "" 126 | overwrite: text 127 | overwrite_entity: "" 128 | overwrite_attr: "" 129 | text: 0 % 130 | custom_css_enabled: true 131 | custom_css: | 132 | tr { 133 | display: table-row !important; 134 | } 135 | - cells: 136 | - type: entity 137 | value: light.led_wyspa 138 | align: left 139 | style: 140 | text_transform: "" 141 | use_entity_unit: true 142 | attr_edit: 143 | enabled: true 144 | service: light.turn_on 145 | field: hs_color 146 | control: color 147 | checked: true 148 | unchecked: false 149 | hue_path: "" 150 | sat_path: "" 151 | show_control_value_right: true 152 | dyn_color: [] 153 | - type: string 154 | value: "" 155 | align: right 156 | - type: string 157 | value: "" 158 | align: right 159 | - type: string 160 | value: "" 161 | align: right 162 | merge_columns: true 163 | dyn_row_rules: 164 | - conditions: 165 | - entity: light.led_wyspa 166 | attr: "" 167 | op: "=" 168 | val: "off" 169 | val2: "" 170 | match: all 171 | bg: "" 172 | fg: "" 173 | visibility: hidden 174 | - cells: 175 | - type: entity 176 | value: light.led_wyspa 177 | align: left 178 | style: 179 | text_transform: "" 180 | use_entity_unit: true 181 | attr_edit: 182 | enabled: true 183 | service: light.turn_on 184 | field: hs_color 185 | control: color_sat 186 | min: 1 187 | max: 100 188 | step: 1 189 | checked: true 190 | unchecked: false 191 | hue_path: "" 192 | sat_path: "" 193 | - type: string 194 | value: "" 195 | align: right 196 | - type: string 197 | value: "" 198 | align: right 199 | - type: string 200 | value: "" 201 | align: right 202 | merge_columns: true 203 | dyn_row_rules: 204 | - conditions: 205 | - entity: light.led_wyspa 206 | attr: "" 207 | op: "=" 208 | val: "off" 209 | val2: "" 210 | match: all 211 | bg: "" 212 | fg: "" 213 | visibility: hidden 214 | - cells: 215 | - type: icon 216 | value: mdi:circle 217 | align: center 218 | style: 219 | text_transform: "" 220 | color: "#ff9800" 221 | icon_size: 20px 222 | tap_action: 223 | action: perform-action 224 | perform_action: light.turn_on 225 | target: 226 | entity_id: light.led_wyspa 227 | data: 228 | rgb_color: 229 | - 255 230 | - 184 231 | - 0 232 | brightness_pct: 5 233 | double_tap_action: 234 | action: perform-action 235 | perform_action: light.turn_on 236 | target: 237 | entity_id: light.led_wyspa 238 | data: 239 | rgb_color: 240 | - 255 241 | - 184 242 | - 0 243 | brightness_pct: 50 244 | hold_action: 245 | action: perform-action 246 | perform_action: light.turn_on 247 | target: 248 | entity_id: light.led_wyspa 249 | data: 250 | rgb_color: 251 | - 255 252 | - 184 253 | - 0 254 | brightness_pct: 100 255 | - type: icon 256 | value: mdi:circle 257 | align: center 258 | style: 259 | text_transform: "" 260 | color: "#F44336" 261 | icon_size: 20px 262 | tap_action: 263 | action: perform-action 264 | perform_action: light.turn_on 265 | target: 266 | entity_id: light.led_wyspa 267 | data: 268 | rgb_color: 269 | - 255 270 | - 0 271 | - 0 272 | brightness_pct: 5 273 | double_tap_action: 274 | action: perform-action 275 | perform_action: light.turn_on 276 | target: 277 | entity_id: light.led_wyspa 278 | data: 279 | rgb_color: 280 | - 255 281 | - 0 282 | - 0 283 | brightness_pct: 50 284 | hold_action: 285 | action: perform-action 286 | perform_action: light.turn_on 287 | target: 288 | entity_id: light.led_wyspa 289 | data: 290 | rgb_color: 291 | - 255 292 | - 0 293 | - 0 294 | brightness_pct: 100 295 | - type: icon 296 | value: mdi:circle 297 | align: center 298 | style: 299 | text_transform: "" 300 | color: "#2196F3" 301 | icon_size: 20px 302 | tap_action: 303 | action: perform-action 304 | perform_action: light.turn_on 305 | target: 306 | entity_id: light.led_wyspa 307 | data: 308 | rgb_color: 309 | - 4 310 | - 0 311 | - 255 312 | brightness_pct: 5 313 | double_tap_action: 314 | action: perform-action 315 | perform_action: light.turn_on 316 | target: 317 | entity_id: light.led_wyspa 318 | data: 319 | rgb_color: 320 | - 4 321 | - 0 322 | - 255 323 | brightness_pct: 50 324 | hold_action: 325 | action: perform-action 326 | perform_action: light.turn_on 327 | target: 328 | entity_id: light.led_wyspa 329 | data: 330 | rgb_color: 331 | - 4 332 | - 0 333 | - 255 334 | brightness_pct: 100 335 | - type: string 336 | value: unused hidden cell 337 | align: center 338 | style: 339 | text_transform: "" 340 | icon_size: "" 341 | dyn_row_rules: [] 342 | column_count: 4 343 | card_padding: 16 344 | overflow_x: true 345 | header_from_first_row: false 346 | zebra: false 347 | narrow_breakpoint: "" 348 | text_size: "" 349 | cell_padding: 350 | top: 4 351 | right: 0 352 | bottom: 4 353 | left: 0 354 | custom_template_enabled: true 355 | custom_template_html: |- 356 | 385 | 386 |
387 | 388 |
389 | type: custom:flex-cells-card 390 | column_widths: 391 | - 40px 392 | - auto 393 | - auto 394 | - 40px 395 | -------------------------------------------------------------------------------- /examples/batteries-table/batteries.yaml: -------------------------------------------------------------------------------- 1 | rows: 2 | - cells: 3 | - type: entity 4 | value: sensor.samsung_galaxy_battery_level 5 | align: left 6 | style: 7 | text_transform: "" 8 | use_entity_unit: false 9 | entity_display: icon 10 | - type: string 11 | value: Smartphone 12 | align: left 13 | style: 14 | text_transform: "" 15 | - type: entity 16 | value: sensor.samsung_galaxy_battery_state 17 | align: right 18 | use_entity_unit: true 19 | style: 20 | text_transform: "" 21 | dyn_color: 22 | - entity: "" 23 | attr: "" 24 | op: "=" 25 | val: discharging 26 | bg: "" 27 | fg: "" 28 | overwrite: entity 29 | overwrite_entity: sensor.samsung_galaxy_battery_state 30 | overwrite_attr: last_changed 31 | conditions: 32 | - entity: "" 33 | attr: "" 34 | op: "=" 35 | val: discharging 36 | val2: "" 37 | match: all 38 | overwrite_datetime_format: REL_SHORT 39 | - conditions: 40 | - entity: "" 41 | attr: "" 42 | op: "=" 43 | val: full 44 | val2: "" 45 | - entity: sensor.samsung_galaxy_battery_level 46 | attr: "" 47 | op: "=" 48 | val: "100" 49 | val2: "" 50 | match: all 51 | bg: "" 52 | fg: red 53 | overwrite: text 54 | overwrite_entity: "" 55 | overwrite_attr: "" 56 | text: disconnect! 57 | - type: entity 58 | value: sensor.samsung_galaxy_battery_level 59 | align: right 60 | use_entity_unit: true 61 | style: 62 | text_transform: "" 63 | - cells: 64 | - type: entity 65 | value: sensor.roleta_w_sypialni_battery 66 | align: left 67 | style: 68 | text_transform: "" 69 | use_entity_unit: false 70 | entity_display: icon 71 | dyn_color: 72 | - conditions: 73 | - entity: binary_sensor.roleta_w_sypialni_charging_status 74 | attr: "" 75 | op: "=" 76 | val: "on" 77 | val2: "" 78 | - entity: "" 79 | attr: "" 80 | op: ">=" 81 | val: "100" 82 | val2: "" 83 | match: all 84 | bg: "" 85 | fg: "" 86 | overwrite: icon 87 | overwrite_entity: "" 88 | overwrite_attr: "" 89 | icon: mdi:battery-charging 90 | - conditions: 91 | - entity: binary_sensor.roleta_w_sypialni_charging_status 92 | attr: "" 93 | op: "=" 94 | val: "on" 95 | val2: "" 96 | - entity: "" 97 | attr: "" 98 | op: <= 99 | val: "99" 100 | val2: "" 101 | match: all 102 | bg: "" 103 | fg: "" 104 | overwrite: icon 105 | overwrite_entity: "" 106 | overwrite_attr: "" 107 | icon: mdi:battery-charging-100 108 | - conditions: 109 | - entity: binary_sensor.roleta_w_sypialni_charging_status 110 | attr: "" 111 | op: "=" 112 | val: "on" 113 | val2: "" 114 | - entity: "" 115 | attr: "" 116 | op: <= 117 | val: "90" 118 | val2: "" 119 | match: all 120 | bg: "" 121 | fg: "" 122 | overwrite: icon 123 | overwrite_entity: "" 124 | overwrite_attr: "" 125 | icon: mdi:battery-charging-90 126 | - conditions: 127 | - entity: binary_sensor.roleta_w_sypialni_charging_status 128 | attr: "" 129 | op: "=" 130 | val: "on" 131 | val2: "" 132 | - entity: "" 133 | attr: "" 134 | op: <= 135 | val: "80" 136 | val2: "" 137 | match: all 138 | bg: "" 139 | fg: "" 140 | overwrite: icon 141 | overwrite_entity: "" 142 | overwrite_attr: "" 143 | icon: mdi:battery-charging-80 144 | - conditions: 145 | - entity: binary_sensor.roleta_w_sypialni_charging_status 146 | attr: "" 147 | op: "=" 148 | val: "on" 149 | val2: "" 150 | - entity: "" 151 | attr: "" 152 | op: <= 153 | val: "70" 154 | val2: "" 155 | match: all 156 | bg: "" 157 | fg: "" 158 | overwrite: icon 159 | overwrite_entity: "" 160 | overwrite_attr: "" 161 | icon: mdi:battery-charging-70 162 | - conditions: 163 | - entity: binary_sensor.roleta_w_sypialni_charging_status 164 | attr: "" 165 | op: "=" 166 | val: "on" 167 | val2: "" 168 | - entity: "" 169 | attr: "" 170 | op: <= 171 | val: "60" 172 | val2: "" 173 | match: all 174 | bg: "" 175 | fg: "" 176 | overwrite: icon 177 | overwrite_entity: "" 178 | overwrite_attr: "" 179 | icon: mdi:battery-charging-60 180 | - conditions: 181 | - entity: binary_sensor.roleta_w_sypialni_charging_status 182 | attr: "" 183 | op: "=" 184 | val: "on" 185 | val2: "" 186 | - entity: "" 187 | attr: "" 188 | op: <= 189 | val: "50" 190 | val2: "" 191 | match: all 192 | bg: "" 193 | fg: "" 194 | overwrite: icon 195 | overwrite_entity: "" 196 | overwrite_attr: "" 197 | icon: mdi:battery-charging-50 198 | - conditions: 199 | - entity: binary_sensor.roleta_w_sypialni_charging_status 200 | attr: "" 201 | op: "=" 202 | val: "on" 203 | val2: "" 204 | - entity: "" 205 | attr: "" 206 | op: <= 207 | val: "40" 208 | val2: "" 209 | match: all 210 | bg: "" 211 | fg: "" 212 | overwrite: icon 213 | overwrite_entity: "" 214 | overwrite_attr: "" 215 | icon: mdi:battery-charging-40 216 | - conditions: 217 | - entity: binary_sensor.roleta_w_sypialni_charging_status 218 | attr: "" 219 | op: "=" 220 | val: "on" 221 | val2: "" 222 | - entity: "" 223 | attr: "" 224 | op: <= 225 | val: "30" 226 | val2: "" 227 | match: all 228 | bg: "" 229 | fg: "" 230 | overwrite: icon 231 | overwrite_entity: "" 232 | overwrite_attr: "" 233 | icon: mdi:battery-charging-30 234 | - conditions: 235 | - entity: binary_sensor.roleta_w_sypialni_charging_status 236 | attr: "" 237 | op: "=" 238 | val: "on" 239 | val2: "" 240 | - entity: "" 241 | attr: "" 242 | op: <= 243 | val: "20" 244 | val2: "" 245 | match: all 246 | bg: "" 247 | fg: "" 248 | overwrite: icon 249 | overwrite_entity: "" 250 | overwrite_attr: "" 251 | icon: mdi:battery-charging-20 252 | - conditions: 253 | - entity: binary_sensor.roleta_w_sypialni_charging_status 254 | attr: "" 255 | op: "=" 256 | val: "on" 257 | val2: "" 258 | - entity: "" 259 | attr: "" 260 | op: <= 261 | val: "10" 262 | val2: "" 263 | match: all 264 | bg: "" 265 | fg: "" 266 | overwrite: icon 267 | overwrite_entity: "" 268 | overwrite_attr: "" 269 | icon: mdi:battery-charging-10 270 | attr_edit: 271 | enabled: false 272 | service: "" 273 | field: "" 274 | control: slider 275 | checked: true 276 | unchecked: false 277 | - type: string 278 | value: Window blinds 279 | align: left 280 | style: 281 | text_transform: "" 282 | - type: entity 283 | value: binary_sensor.roleta_w_sypialni_charging_status 284 | align: right 285 | use_entity_unit: true 286 | dyn_color: 287 | - entity: "" 288 | attr: "" 289 | op: "=" 290 | val: "off" 291 | bg: "" 292 | fg: "" 293 | overwrite: entity 294 | overwrite_entity: binary_sensor.roleta_w_sypialni_charging_status 295 | overwrite_attr: last_changed 296 | conditions: 297 | - entity: "" 298 | attr: "" 299 | op: "=" 300 | val: "off" 301 | val2: "" 302 | match: all 303 | overwrite_datetime_format: REL_SHORT 304 | - entity: "" 305 | attr: "" 306 | op: "=" 307 | val: "on" 308 | bg: "" 309 | fg: "" 310 | overwrite: text 311 | overwrite_entity: "" 312 | overwrite_attr: "" 313 | text: charging 314 | conditions: 315 | - entity: "" 316 | attr: "" 317 | op: "=" 318 | val: "on" 319 | val2: "" 320 | match: all 321 | - conditions: 322 | - entity: "" 323 | attr: "" 324 | op: "=" 325 | val: "on" 326 | val2: "" 327 | - entity: sensor.roleta_w_sypialni_battery 328 | attr: "" 329 | op: "=" 330 | val: "100" 331 | val2: "" 332 | match: all 333 | bg: "" 334 | fg: red 335 | overwrite: text 336 | overwrite_entity: "" 337 | overwrite_attr: "" 338 | text: disconnect! 339 | - type: entity 340 | value: sensor.roleta_w_sypialni_battery 341 | align: right 342 | use_entity_unit: true 343 | - cells: 344 | - type: entity 345 | value: sensor.balkon_na_zewnatrz_battery 346 | align: left 347 | style: 348 | text_transform: "" 349 | use_entity_unit: false 350 | entity_display: icon 351 | - type: string 352 | value: Temp sensor 353 | align: left 354 | style: 355 | text_transform: "" 356 | - type: string 357 | value: "" 358 | align: right 359 | - type: entity 360 | value: sensor.balkon_na_zewnatrz_battery 361 | align: right 362 | use_entity_unit: true 363 | column_count: 4 364 | card_padding: "" 365 | overflow_x: true 366 | header_from_first_row: false 367 | zebra: false 368 | narrow_breakpoint: "" 369 | text_size: "" 370 | cell_padding: 371 | top: 4 372 | right: 0 373 | bottom: 4 374 | left: 0 375 | custom_template_enabled: false 376 | custom_template_html: "" 377 | type: custom:flex-cells-card 378 | zebra_ignore_separators: false 379 | column_widths: 380 | - 30px 381 | - auto 382 | - auto 383 | - 70px 384 | sort_columns: [] 385 | sort_desc: false 386 | hide_on_narrow: [] 387 | -------------------------------------------------------------------------------- /examples/media-player-template/media-player.yaml: -------------------------------------------------------------------------------- 1 | rows: 2 | - cells: 3 | - type: string 4 | value: Salon 5 | align: left 6 | style: 7 | text_transform: "" 8 | - cells: 9 | - type: entity 10 | value: media_player.spotify_lukasz 11 | align: center 12 | use_entity_unit: true 13 | style: 14 | text_transform: uppercase 15 | - cells: 16 | - type: entity 17 | value: media_player.spotify_lukasz 18 | attribute: media_title 19 | align: left 20 | use_entity_unit: true 21 | style: 22 | text_transform: "" 23 | - cells: 24 | - type: entity 25 | value: media_player.spotify_lukasz 26 | attribute: media_artist 27 | align: left 28 | use_entity_unit: true 29 | style: 30 | text_transform: "" 31 | - cells: 32 | - type: icon 33 | value: mdi:skip-previous 34 | align: center 35 | tap_action: 36 | action: call-service 37 | service: media_player.media_previous_track 38 | data: 39 | entity_id: media_player.spotify_lukasz 40 | - cells: 41 | - type: icon 42 | value: mdi:play 43 | align: center 44 | style: 45 | color: "#ffffff" 46 | tap_action: 47 | action: call-service 48 | service: media_player.media_play_pause 49 | data: 50 | entity_id: media_player.spotify_lukasz 51 | dyn_color: 52 | - entity: media_player.spotify_lukasz 53 | attr: "" 54 | op: "=" 55 | val: playing 56 | bg: "" 57 | fg: "" 58 | overwrite: icon 59 | overwrite_entity: "" 60 | overwrite_attr: "" 61 | icon: mdi:pause 62 | - cells: 63 | - type: icon 64 | value: mdi:skip-next 65 | align: center 66 | tap_action: 67 | action: call-service 68 | service: media_player.media_next_track 69 | data: 70 | entity_id: media_player.spotify_lukasz 71 | - cells: 72 | - type: icon 73 | value: mdi:volume-high 74 | align: center 75 | - cells: 76 | - type: entity 77 | value: media_player.spotify_lukasz 78 | style: 79 | min_width: 150px 80 | text_transform: "" 81 | align: center 82 | use_entity_unit: false 83 | attr_edit: 84 | enabled: true 85 | service: media_player.volume_set 86 | field: volume_level 87 | control: slider 88 | min: 0 89 | max: 1 90 | step: 1 91 | checked: true 92 | unchecked: false 93 | attribute: volume_level 94 | scale_in_min: 0 95 | scale_in_max: 1 96 | scale_out_min: 0 97 | scale_out_max: 100 98 | unit: "%" 99 | - cells: 100 | - type: icon 101 | value: mdi:repeat-off 102 | align: left 103 | style: 104 | text_transform: "" 105 | tap_action: 106 | action: perform-action 107 | perform_action: media_player.repeat_set 108 | target: 109 | entity_id: 110 | - media_player.spotify_lukasz 111 | data: 112 | repeat: all 113 | dyn_color: 114 | - entity: media_player.spotify_lukasz 115 | attr: repeat 116 | op: "=" 117 | val: "off" 118 | bg: "" 119 | fg: "" 120 | overwrite: icon 121 | overwrite_entity: "" 122 | overwrite_attr: "" 123 | icon: mdi:repeat-off 124 | - entity: media_player.spotify_lukasz 125 | attr: repeat 126 | op: "!=" 127 | val: "off" 128 | bg: "" 129 | fg: "" 130 | overwrite: hide 131 | overwrite_entity: "" 132 | overwrite_attr: "" 133 | dyn_row_rules: [] 134 | - cells: 135 | - type: icon 136 | value: mdi:repeat 137 | align: left 138 | style: 139 | text_transform: "" 140 | icon_size: "" 141 | tap_action: 142 | action: perform-action 143 | perform_action: media_player.repeat_set 144 | target: 145 | entity_id: 146 | - media_player.spotify_lukasz 147 | data: 148 | repeat: one 149 | dyn_color: 150 | - entity: media_player.spotify_lukasz 151 | attr: repeat 152 | op: "=" 153 | val: all 154 | bg: "" 155 | fg: "" 156 | overwrite: icon 157 | overwrite_entity: "" 158 | overwrite_attr: "" 159 | icon: mdi:repeat 160 | - entity: media_player.spotify_lukasz 161 | attr: repeat 162 | op: "!=" 163 | val: all 164 | bg: "" 165 | fg: "" 166 | overwrite: hide 167 | overwrite_entity: "" 168 | overwrite_attr: "" 169 | - cells: 170 | - type: icon 171 | value: mdi:repeat-once 172 | align: left 173 | style: 174 | text_transform: "" 175 | tap_action: 176 | action: perform-action 177 | perform_action: media_player.repeat_set 178 | target: 179 | entity_id: 180 | - media_player.spotify_lukasz 181 | data: 182 | repeat: "off" 183 | dyn_color: 184 | - entity: media_player.spotify_lukasz 185 | attr: repeat 186 | op: "=" 187 | val: one 188 | bg: "" 189 | fg: "" 190 | overwrite: icon 191 | overwrite_entity: "" 192 | overwrite_attr: "" 193 | icon: mdi:repeat-once 194 | - entity: media_player.spotify_lukasz 195 | attr: repeat 196 | op: "!=" 197 | val: one 198 | bg: "" 199 | fg: "" 200 | overwrite: hide 201 | overwrite_entity: "" 202 | overwrite_attr: "" 203 | - cells: 204 | - type: entity 205 | value: media_player.spotify_lukasz 206 | align: left 207 | style: 208 | text_transform: "" 209 | use_entity_unit: true 210 | attribute: repeat 211 | dyn_color: [] 212 | tap_action: 213 | action: none 214 | - cells: 215 | - type: entity 216 | value: media_player.spotify_lukasz 217 | align: left 218 | style: 219 | text_transform: "" 220 | use_entity_unit: true 221 | attribute: attributes.media_playlist 222 | dyn_color: 223 | - entity: "" 224 | attr: "" 225 | op: "=" 226 | val: n/a 227 | bg: "" 228 | fg: "" 229 | overwrite: hide 230 | overwrite_entity: "" 231 | overwrite_attr: "" 232 | - cells: 233 | - type: icon 234 | value: mdi:shuffle 235 | align: left 236 | style: 237 | text_transform: "" 238 | tap_action: 239 | action: perform-action 240 | perform_action: media_player.shuffle_set 241 | data: 242 | shuffle: false 243 | target: 244 | entity_id: media_player.spotify_lukasz 245 | dyn_color: 246 | - entity: media_player.spotify_lukasz 247 | attr: attributes.shuffle 248 | op: "!=" 249 | val: "true" 250 | bg: "" 251 | fg: "" 252 | overwrite: hide 253 | overwrite_entity: "" 254 | overwrite_attr: "" 255 | - cells: 256 | - type: string 257 | value: "" 258 | align: left 259 | style: 260 | text_transform: "" 261 | attribute: attributes.shuffle 262 | dyn_color: 263 | - entity: media_player.spotify_lukasz 264 | attr: attributes.shuffle 265 | op: "=" 266 | val: "true" 267 | bg: "" 268 | fg: "" 269 | overwrite: text 270 | overwrite_entity: "" 271 | overwrite_attr: "" 272 | text: "on" 273 | - cells: 274 | - type: string 275 | value: "" 276 | align: left 277 | style: 278 | text_transform: "" 279 | attribute: attributes.shuffle 280 | dyn_color: 281 | - entity: media_player.spotify_lukasz 282 | attr: attributes.shuffle 283 | op: "=" 284 | val: "false" 285 | bg: "" 286 | fg: "" 287 | overwrite: text 288 | overwrite_entity: "" 289 | overwrite_attr: "" 290 | text: "off" 291 | - cells: 292 | - type: icon 293 | value: mdi:shuffle-disabled 294 | align: left 295 | style: 296 | text_transform: "" 297 | tap_action: 298 | action: perform-action 299 | perform_action: media_player.shuffle_set 300 | data: 301 | shuffle: true 302 | target: 303 | entity_id: media_player.spotify_lukasz 304 | dyn_color: 305 | - entity: media_player.spotify_lukasz 306 | attr: attributes.shuffle 307 | op: "!=" 308 | val: "false" 309 | bg: "" 310 | fg: "" 311 | overwrite: hide 312 | overwrite_entity: "" 313 | overwrite_attr: "" 314 | - cells: 315 | - type: entity 316 | value: media_player.spotify_lukasz 317 | align: left 318 | style: 319 | text_transform: "" 320 | use_entity_unit: true 321 | attribute: attributes.media_album_name 322 | dyn_color: [] 323 | - cells: 324 | - type: string 325 | value: "Playlist:" 326 | align: left 327 | style: 328 | text_transform: "" 329 | dyn_color: 330 | - entity: media_player.spotify_lukasz 331 | attr: attributes.media_playlist 332 | op: "=" 333 | val: "" 334 | bg: "" 335 | fg: "" 336 | overwrite: hide 337 | overwrite_entity: "" 338 | overwrite_attr: "" 339 | - cells: 340 | - type: string 341 | value: "" 342 | align: left 343 | style: 344 | text_transform: "" 345 | dyn_color: 346 | - entity: media_player.spotify_lukasz 347 | attr: "" 348 | op: "=" 349 | val: idle 350 | bg: "" 351 | fg: "" 352 | overwrite: text 353 | overwrite_entity: "" 354 | overwrite_attr: "" 355 | text: "display: none;" 356 | column_count: 1 357 | card_padding: 0 358 | overflow_x: true 359 | header_from_first_row: false 360 | zebra: false 361 | narrow_breakpoint: "" 362 | text_size: "" 363 | cell_padding: 364 | top: 0 365 | right: 0 366 | bottom: 0 367 | left: 0 368 | custom_template_enabled: true 369 | custom_template_html: |- 370 | 469 |
470 |
471 |
472 | 473 | 474 | 475 | 476 | 477 | 478 |
"> 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | Album: 487 | 488 | 489 | 490 | 491 | 492 | 493 |
494 |
495 | 496 |
"> 497 |
498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 |
508 |
509 | 510 | 511 | 512 | 513 | 514 | 515 |
516 |
517 |
518 | 519 | 520 | 521 | 522 | repeat: 523 | 524 | 525 |
526 |
527 | 528 | 529 | 530 | shuffle: 531 | 532 | 533 | 534 |
535 |
536 |
537 |
538 |
539 | type: custom:flex-cells-card 540 | hide_separators_on_sort: false 541 | sort_desc: false 542 | zebra_ignore_separators: false 543 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Forum](https://img.shields.io/badge/dynamic/json?style=flat&label=Forum&color=41BDF5&logo=homeassistant&logoColor=white&suffix=%20posts&url=https://community.home-assistant.io/t/new-lovelace-card-flex-cells-card/919780.json&query=$.posts_count)](https://community.home-assistant.io/t/new-lovelace-card-flex-cells-card/919780) 2 | [![GitHub Discussions](https://img.shields.io/github/discussions/michalowskil/flex-cells-card?logo=github&logoColor=white&label=Discussions)](https://github.com/michalowskil/flex-cells-card/discussions) 3 | [![Downloads](https://img.shields.io/github/downloads/michalowskil/flex-cells-card/total?label=Downloads&logo=github)](https://github.com/michalowskil/flex-cells-card/releases) 4 | [![Latest release downloads](https://img.shields.io/github/downloads/michalowskil/flex-cells-card/latest/total?label=Latest%20downloads&logo=github)](https://github.com/michalowskil/flex-cells-card/releases/latest) 5 | 6 | # Flex Cells Card 7 | 8 | A Lovelace card for Home Assistant that lets you add **icons**, **text**, **entities**, **attributes**, or **input controls** in flexible cell layouts — fully configurable from a **visual editor**, so **no documentation is required** to get started. 9 | 10 | If you like this card, please consider giving it a ⭐ on GitHub: [![Star on GitHub](https://img.shields.io/github/stars/michalowskil/flex-cells-card.svg?style=social)](https://github.com/michalowskil/flex-cells-card/stargazers) 11 | 12 | ## Features 13 | - Mix cells with **Icon / Text / Entity / Metadata / Input Control** 14 | - **Dynamic Rules**: Color & Content Overrides 15 | - **Sorting** by one or more columns in one or more **groups** 16 | - Using **icons and colors assigned to entities by the system** 17 | - **Per-cell actions:** tap, hold, double-tap (mobile-friendly) 18 | - Per-cell **alignment**, **text transform**, **color**, **size**, **letter spacing** 19 | - Entities with unit handling and optional precision 20 | - Visual editor, drag-and-drop rows/columns, zebra rows, responsive columns 21 | - **HTML templates** thanks to which the card can look exactly as you want (HTML and CSS knowledge required) 22 | - Each cell and row allows you to configure **custom CSS**, you don't need to use "card_mod" for this 23 | 24 | ## Installation 25 | 26 | ### HACS – Custom repository 27 | 28 | 1. HACS → ⋮ → **Custom repositories** → add: 29 | `https://github.com/michalowskil/flex-cells-card` (Type: **Dashboard**) or just click the button below to do the same: 30 | [![Open your Home Assistant instance and add this repository to HACS](https://my.home-assistant.io/badges/hacs_repository.svg)](https://my.home-assistant.io/redirect/hacs_repository/?owner=michalowskil&repository=flex-cells-card&category=plugin) 31 | 2. Install **Flex Cells Card**. 32 | 3. Resource is added automatically as `/hacsfiles/flex-cells-card/flex-cells-card.js`. 33 | 4. Reload browser cache or refresh resources in HA if needed. 34 | 35 | ### Manual 36 | 37 | 1. Download `flex-cells-card.js` from the latest release and place it under 38 | `config/www/flex-cells-card/flex-cells-card.js`. 39 | 2. Add a resource in **Edit Dashboard → ⋮ → Manage resources**: 40 | `/local/flex-cells-card/flex-cells-card.js` (type: **JavaScript module**). 41 | 3. Hard refresh the browser. 42 | 43 | ## Usage 44 | Add the card in the UI and configure everything from the visual editor. 45 | 46 | ## Video 47 | 48 | Olli from the YouTube channel [@smarterkram](https://www.youtube.com/@smarterkram) recorded a video explaining this card. If you know German, I encourage you to watch it https://www.youtube.com/watch?v=oh36grjbPDQ 49 | 50 | ## Tips & Tricks 51 | 52 | - How sorting works 53 | - Sorting works "after applying" dynamic rules, meaning what's visible is sorted. 54 | - Sorting works even if the column being sorted is hidden (breakpoint). 55 | 56 | - Dynamic rules 57 | - If you see the value "null" for an attribute in developer tools and want to use it in dynamic rules, don't enter "null" but leave value input empty. Empty means "null". 58 | 59 | - Available colors 60 | - You can specify colors in various formats, one of which is variables, for example "var(--state-active-color)". You can find a list of variables at this link https://github.com/home-assistant/frontend/blob/dev/src/resources/theme/color/color.globals.ts 61 | 62 | - Search & Replace 63 | - If you want to perform the same action on multiple rows/cells, use the code editor and the "search & replace" function - to see additional options press Ctrl + F in code editor. For example, if you want to remove all underlines, search for "underline: true" and replace it with "underline: false". 64 | 65 | ## Templates 66 | - Templates, in addition to standard HTML tags, support their own tag: 67 | `` - inserts the selected cell 68 | `` - inserts the selected row 69 | `` - inserts the entire table, which looks the same as without templates. This allows you to write custom CSS for the entire table: 70 | 71 | ```html 72 | 75 | 76 | ``` 77 | - If you want a non-fcc-table element to be dynamic (for example, `
`), you can use the `mode="text"` attribute (alias `as="text"`) for a text-type cell. For example, you can set a dynamic rule like this: 78 | 79 | ```yaml 80 | - cells: 81 | - type: string 82 | value: "display: none;" 83 | align: left 84 | style: 85 | text_transform: "" 86 | dyn_color: 87 | - entity: light.hue_bulb 88 | attr: "" 89 | op: "=" 90 | val: "on" 91 | bg: "" 92 | fg: "" 93 | overwrite: text 94 | overwrite_entity: "" 95 | overwrite_attr: "" 96 | text: "display: flex;" 97 | ``` 98 | to use this cell like this: 99 | 100 | ```html 101 |
102 | test 103 |
104 | ``` 105 | - The appearance and rules assigned to cells/rows should work in templates. 106 | 107 | ## Examples 108 | - [Temperature/Humidity](https://github.com/michalowskil/flex-cells-card/blob/main/examples/temperature-humidity-table/temperature-humidity.md) - a simple table divided into three groups, with sorting by the temperature column performed independently in each group. Here you'll find the simplest example of a dynamic rule that changes color to red when the temperature exceeds a specified value. [Read more...](https://github.com/michalowskil/flex-cells-card/blob/main/examples/temperature-humidity-table/temperature-humidity.md) 109 | 110 | ![Temperature/Humidity](examples/temperature-humidity-table/images/dark_300.png) 111 | ![Temperature/Humidity](examples/temperature-humidity-table/images/light_300.png) 112 | - [Media Player (template)](https://github.com/michalowskil/flex-cells-card/blob/main/examples/media-player-template/media-player.md) - FCC template example (HTML, CSS). [Read more...](https://github.com/michalowskil/flex-cells-card/blob/main/examples/media-player-template/media-player.md) 113 | 114 | ![Media Player template](examples/media-player-template/images/small_dark_300.png) 115 | ![Media Player template](examples/media-player-template/images/small_light_300.png) 116 | - [Batteries](https://github.com/michalowskil/flex-cells-card/blob/main/examples/batteries-table/batteries.md) - displaying the device's battery status. An example of using dynamic rules to overwrite an icon when an entity doesn't provide it correctly. [Read more...](https://github.com/michalowskil/flex-cells-card/blob/main/examples/batteries-table/batteries.md) 117 | 118 | ![Batteries](examples/batteries-table/images/dark-charging-300.png) 119 | ![Batteries](examples/batteries-table/images/light-disconnect-300.png) 120 | - [Slider Lights](https://github.com/michalowskil/flex-cells-card/blob/main/examples/slider-lights/slider-lights.md) - brightness control, on/off, display more-info (custom CSS). [Read more...](https://github.com/michalowskil/flex-cells-card/blob/main/examples/slider-lights/slider-lights.md) 121 | 122 | ![Slider Lights](examples/slider-lights/images/dark-300.png) 123 | ![Slider Lights](examples/slider-lights/images/light-300.png) 124 | - [Cover](https://github.com/michalowskil/flex-cells-card/blob/main/examples/cover/cover.md) - window blind control (custom CSS). [Read more...](https://github.com/michalowskil/flex-cells-card/blob/main/examples/cover/cover.md) 125 | 126 | ![Cover](examples/cover/images/dark_open-300.png) 127 | ![Cover](examples/cover/images/light_closing-300.png) 128 | - [Climate template](https://github.com/michalowskil/flex-cells-card/blob/main/examples/climate-template/climate.md) - another example of an FCC template (HTML, CSS). [Read more...](https://github.com/michalowskil/flex-cells-card/blob/main/examples/climate-template/climate.md) 129 | 130 | ![Climate template](examples/climate-template/images/dark-heat-300.png) 131 | ![Climate template](examples/climate-template/images/light-fan-300.png) 132 | - [Button lights](https://github.com/michalowskil/flex-cells-card/blob/main/examples/button-lights/button-lights.md) - turning on/off lighting, setting color/brightness (custom CSS). [Read more...](https://github.com/michalowskil/flex-cells-card/blob/main/examples/button-lights/button-lights.md) 133 | 134 | ![Button lights](examples/button-lights/images/dark-300.png) 135 | ![Button lights](examples/button-lights/images/light-300.png) 136 | - [Input controls](https://github.com/michalowskil/flex-cells-card/blob/main/examples/input-controls/input-controls.md) - this is only a presentation of the appearance of the FCC controls. [Read more...](https://github.com/michalowskil/flex-cells-card/blob/main/examples/input-controls/input-controls.md) 137 | 138 | ![Input controls](examples/input-controls/images/dark-300.png) 139 | ![Input controls](examples/input-controls/images/light-300.png) 140 | - [Hue and saturation](https://github.com/michalowskil/flex-cells-card/blob/main/examples/hue-saturation/hue-saturation.md) - an example of using sliders to control hue and saturation. It also demonstrates how to use presets for lighting. [Read more...](https://github.com/michalowskil/flex-cells-card/blob/main/examples/hue-saturation/hue-saturation.md) 141 | 142 | ![Hue saturation](examples/hue-saturation/images/dark-on-300.png) 143 | ![Hue saturation](examples/hue-saturation/images/light-on-300.png) 144 | 145 | ## Translations 146 | If you'd like to help translate FCC editor, or improve an existing translation, please do so! You don't have to translate everything - just one string will do - and it's not difficult. 147 | 148 | Quick start for translators: 149 | - [Open the Crowdin project](https://crowdin.com/project/flex-cells-card/) and log in. 150 | - Pick your language (or request it if it's missing - note that the ```Request New Language``` button **doesn't work**, so you have to let me know via [forum](https://community.home-assistant.io/t/new-lovelace-card-flex-cells-card/919780) or [GitHub](https://github.com/michalowskil)). 151 | - Translate a few strings in any language and save - partial translations are welcome. 152 | - Finally, **apply the "Unsaved Translations" filter to each edited language, and if anything displays there, save it. Any unsaved translations will not be included in the project!** 153 | 154 | ## Changelog 155 | - v0.20.0-beta (Pre-release) — 156 | - Added **sliders for hue and saturation**. 157 | - Integrating FCC with crowdin.com. 158 | - v0.19.0 — 159 | - Added proper ***ha-card wrapper*** and removed the custom border so the card behaves like a normal Lovelace card (e.g., looks correct inside vertical-stack-in-card). Kept the "card" class intact, so any existing CSS targeting it should still work. 160 | - Added ***RAW token*** to "Date/Time format & Text override" so you can inject the unformatted value; e.g., set the format to "[light is: ]RAW" to render "light is: on". 161 | - Fixed FCC template parsing to only consider "mode/as" attributes for "text" mode and accept row/column values ​​in single quotes. 162 | - v0.18.0 — 163 | - Added **attribute editing using slider and switch**. 164 | - v0.17.0 — 165 | - **Added "AND/OR" logical operators** in dynamic rules. 166 | - Added new fields in dynamic cell rules for the "Overwrite with entity/metadata" option: Date/Time format & Text override, Entity display, Rescale. 167 | - Fixed an issue related to changing the number of columns and the disappearance of unsaved dynamic rules. 168 | - Fixed an issue related to the column width for the "auto" value. 169 | - v0.16.0 — 170 | - Added **advanced copy and paste** of table configuration. 171 | - v0.15.0 — 172 | - Added **custom HTML templates**. 173 | - Added **custom CSS** for cells and rows (also works in templates), "card_mod" is no longer needed! 174 | - Added **new domains**. The existing list of domains (input_boolean, input_number, input_select, input_button, input_datetime, input_text) that the editor considers as "input controls" has been expanded with new ones: **switch, number, select, button, datetime, date, time, text**. 175 | - Added **REL and REL_SHORT tokens** in the "Date/Time format & Text override" field, they return a localized description of the time elapsed (full and short). 176 | - Added support for "mode" variable for input_number. Now you can render a box in addition to the slider. 177 | - Added ability to hide values next to the slider (input_number). 178 | - Improved "Nothing" behavior in "Tap & Hold Actions". 179 | - Fixed separator width when breakpoint hides column. 180 | - Improved clickable area on "Show control" and "Use unit from entity" labels. 181 | - v0.14.0 — 182 | - Added **column merging**. 183 | - Added entity/metadata overrides. 184 | - v0.13.0 — 185 | - Added **separators** and **sorting by groups**. 186 | - Added **dynamic rules for the entire row**. 187 | - v0.12.0 — 188 | - Added **metadata** (instead of attributes), now we have access to all data. 189 | - Improved "_Text size (default)_" in the main settings, it no longer affects icon size. 190 | - Added icon size settings (entity-derived icon). 191 | - Changed "_Date/Time format_" to "_Date/Time format & Text override_". Now we can override the entity value even if it doesn't contain a date/time. 192 | - Minor visual improvements. 193 | - v0.11.0 — 194 | - Added use of **system-assigned icons and colors** for entities. 195 | - Changed the decimal separator to use the system settings. 196 | - Disabled the default underline for entities. 197 | - v0.10.0 — 198 | - Added **dynamic sorting by single or multiple columns**. 199 | - Added a "tips & tricks" section to the readme.md. 200 | - Fixed the dropdown list display in dynamic rules. 201 | - v0.9.0 — 202 | - Added **German translation**, thanks to [Olli](https://community.home-assistant.io/u/olli.dev/summary) and [Thomas](https://github.com/tmycgn). 203 | - Added displaying an icon on the input_button if configured. 204 | - Added ability to select a background color without the need for dynamic rules. 205 | - v0.8.0 — 206 | - Added **formatting for input_datetime**. 207 | - v0.7.0 — 208 | - Added **controls for input types**: boolean, number, select, button, datetime, text. 209 | - Added "Appearance & Style" section in the card editor for easier navigation. 210 | - v0.6.0 — 211 | - Added **dynamic icons**. 212 | - v0.5.0 — 213 | - Added **dynamic coloring/hiding/masking**. 214 | - Minor visual improvements. 215 | - v0.4.0 — 216 | - Added **entity attributes** with per-attribute **rescaling** (Input/Output min/max). 217 | - Fixed tap & hold so secondary actions (e.g., setting brightness) work alongside the primary action. 218 | - Fixed header/last row background overflow when card padding is set to `0`. 219 | - v0.3.0 — 220 | - Added **inline color picker** with live preview. 221 | - v0.2.0 — 222 | - Added per-cell actions: **tap / hold / double-tap**. 223 | - v0.1.x — 224 | - First basic release of the card. 225 | 226 | ## Screenshots 227 | 228 | ![Flex Cells Card](images/fcc-config-1.png) 229 | ![Flex Cells Card](images/fcc-config-2.png) 230 | ![Flex Cells Card](images/fcc-config-3.png) 231 | ![Flex Cells Card](images/fcc-config-4.png) 232 | 233 | ## Example YAML 234 | ```yaml 235 | type: 'custom:flex-cells-card' 236 | ``` -------------------------------------------------------------------------------- /examples/button-lights/button-lights.yaml: -------------------------------------------------------------------------------- 1 | rows: 2 | - cells: 3 | - type: entity 4 | value: light.zarowka_hue_sypialnia 5 | align: left 6 | style: 7 | text_transform: "" 8 | use_entity_unit: true 9 | attr_edit: 10 | enabled: false 11 | service: "" 12 | field: "" 13 | control: slider 14 | checked: true 15 | unchecked: false 16 | dyn_color: 17 | - conditions: 18 | - entity: "" 19 | attr: "" 20 | op: "=" 21 | val: "on" 22 | val2: "" 23 | match: all 24 | bg: "" 25 | fg: "" 26 | overwrite: icon 27 | overwrite_entity: "" 28 | overwrite_attr: "" 29 | icon: mdi:desk-lamp-on 30 | - conditions: 31 | - entity: "" 32 | attr: "" 33 | op: "=" 34 | val: "off" 35 | val2: "" 36 | match: all 37 | bg: "" 38 | fg: "#9e9e9e" 39 | overwrite: icon 40 | overwrite_entity: "" 41 | overwrite_attr: "" 42 | icon: mdi:desk-lamp 43 | tap_action: 44 | action: toggle 45 | hold_action: 46 | action: perform-action 47 | perform_action: light.turn_on 48 | target: 49 | entity_id: light.zarowka_hue_sypialnia 50 | data: 51 | brightness_pct: 100 52 | double_tap_action: 53 | action: perform-action 54 | perform_action: light.turn_on 55 | target: 56 | entity_id: light.zarowka_hue_sypialnia 57 | data: 58 | brightness_pct: 50 59 | - type: entity 60 | value: light.zarowka_hue_sypialnia 61 | align: right 62 | use_entity_unit: false 63 | attr_edit: 64 | enabled: false 65 | service: "" 66 | field: "" 67 | control: slider 68 | checked: true 69 | unchecked: false 70 | dyn_color: 71 | - conditions: 72 | - entity: light.zarowka_hue_sypialnia 73 | attr: state 74 | op: "=" 75 | val: "off" 76 | val2: "" 77 | match: all 78 | bg: "" 79 | fg: "" 80 | overwrite: text 81 | overwrite_entity: "" 82 | overwrite_attr: "" 83 | text: Lampka 84 | attribute: brightness 85 | scale_in_min: 0 86 | scale_in_max: 255 87 | scale_out_min: 0 88 | scale_out_max: 100 89 | unit: "%" 90 | precision: 0 91 | - cells: 92 | - type: entity 93 | value: light.zarowka_hue_salon 94 | align: left 95 | style: 96 | text_transform: "" 97 | use_entity_unit: true 98 | attr_edit: 99 | enabled: false 100 | service: "" 101 | field: "" 102 | control: slider 103 | checked: true 104 | unchecked: false 105 | dyn_color: 106 | - conditions: 107 | - entity: "" 108 | attr: "" 109 | op: "=" 110 | val: "on" 111 | val2: "" 112 | match: all 113 | bg: "" 114 | fg: "" 115 | overwrite: icon 116 | overwrite_entity: "" 117 | overwrite_attr: "" 118 | icon: mdi:lamp 119 | - conditions: 120 | - entity: "" 121 | attr: "" 122 | op: "=" 123 | val: "off" 124 | val2: "" 125 | match: all 126 | bg: "" 127 | fg: "#9e9e9e" 128 | overwrite: icon 129 | overwrite_entity: "" 130 | overwrite_attr: "" 131 | icon: mdi:lamp-outline 132 | tap_action: 133 | action: toggle 134 | double_tap_action: 135 | action: perform-action 136 | perform_action: light.turn_on 137 | data: 138 | brightness_pct: 50 139 | target: 140 | entity_id: light.zarowka_hue_salon 141 | hold_action: 142 | action: perform-action 143 | perform_action: light.turn_on 144 | target: 145 | entity_id: light.zarowka_hue_salon 146 | data: 147 | brightness_pct: 100 148 | - type: entity 149 | value: light.zarowka_hue_salon 150 | align: right 151 | use_entity_unit: false 152 | attr_edit: 153 | enabled: false 154 | service: "" 155 | field: "" 156 | control: slider 157 | checked: true 158 | unchecked: false 159 | dyn_color: 160 | - conditions: 161 | - entity: light.zarowka_hue_salon 162 | attr: state 163 | op: "=" 164 | val: "off" 165 | val2: "" 166 | match: all 167 | bg: "" 168 | fg: "" 169 | overwrite: text 170 | overwrite_entity: "" 171 | overwrite_attr: "" 172 | text: Lampka 173 | attribute: brightness 174 | scale_in_min: 0 175 | scale_in_max: 255 176 | scale_out_min: 0 177 | scale_out_max: 100 178 | unit: "%" 179 | precision: 0 180 | - cells: 181 | - type: entity 182 | value: light.led_biurko 183 | align: left 184 | style: 185 | text_transform: "" 186 | use_entity_unit: true 187 | attr_edit: 188 | enabled: false 189 | service: "" 190 | field: "" 191 | control: slider 192 | checked: true 193 | unchecked: false 194 | dyn_color: 195 | - conditions: 196 | - entity: "" 197 | attr: "" 198 | op: "=" 199 | val: "on" 200 | val2: "" 201 | match: all 202 | bg: "" 203 | fg: "" 204 | overwrite: icon 205 | overwrite_entity: "" 206 | overwrite_attr: "" 207 | icon: mdi:led-on 208 | - conditions: 209 | - entity: "" 210 | attr: "" 211 | op: "=" 212 | val: "off" 213 | val2: "" 214 | match: all 215 | bg: "" 216 | fg: "#9e9e9e" 217 | overwrite: icon 218 | overwrite_entity: "" 219 | overwrite_attr: "" 220 | icon: mdi:led-off 221 | tap_action: 222 | action: toggle 223 | double_tap_action: 224 | action: perform-action 225 | perform_action: light.turn_on 226 | target: 227 | entity_id: light.led_biurko 228 | data: 229 | brightness_pct: 50 230 | hold_action: 231 | action: perform-action 232 | perform_action: light.turn_on 233 | target: 234 | entity_id: light.led_biurko 235 | data: 236 | brightness_pct: 100 237 | - type: entity 238 | value: light.led_biurko 239 | align: right 240 | use_entity_unit: false 241 | attr_edit: 242 | enabled: false 243 | service: "" 244 | field: "" 245 | control: slider 246 | checked: true 247 | unchecked: false 248 | dyn_color: 249 | - conditions: 250 | - entity: light.led_biurko 251 | attr: state 252 | op: "=" 253 | val: "off" 254 | val2: "" 255 | match: all 256 | bg: "" 257 | fg: "" 258 | overwrite: text 259 | overwrite_entity: "" 260 | overwrite_attr: "" 261 | text: Biurko 262 | attribute: brightness 263 | scale_in_min: 0 264 | scale_in_max: 255 265 | scale_out_min: 0 266 | scale_out_max: 100 267 | unit: "%" 268 | precision: 0 269 | - cells: 270 | - type: entity 271 | value: light.oswietlenie_w_salonie 272 | align: left 273 | style: 274 | text_transform: "" 275 | use_entity_unit: true 276 | attr_edit: 277 | enabled: false 278 | service: "" 279 | field: "" 280 | control: slider 281 | checked: true 282 | unchecked: false 283 | tap_action: 284 | action: toggle 285 | entity_display: icon 286 | dyn_color: 287 | - conditions: 288 | - entity: "" 289 | attr: "" 290 | op: "=" 291 | val: "off" 292 | val2: "" 293 | match: all 294 | bg: "" 295 | fg: "#9e9e9e" 296 | overwrite: "" 297 | overwrite_entity: "" 298 | overwrite_attr: "" 299 | - type: entity 300 | value: light.oswietlenie_w_salonie 301 | align: right 302 | use_entity_unit: true 303 | attr_edit: 304 | enabled: false 305 | service: "" 306 | field: "" 307 | control: slider 308 | checked: true 309 | unchecked: false 310 | tap_action: 311 | action: toggle 312 | datetime_format: Salon 313 | - cells: 314 | - type: entity 315 | value: light.oswietlenie_w_kuchni 316 | align: left 317 | style: 318 | text_transform: "" 319 | use_entity_unit: true 320 | attr_edit: 321 | enabled: false 322 | service: "" 323 | field: "" 324 | control: slider 325 | checked: true 326 | unchecked: false 327 | tap_action: 328 | action: toggle 329 | entity_display: icon 330 | dyn_color: 331 | - conditions: 332 | - entity: "" 333 | attr: "" 334 | op: "=" 335 | val: "off" 336 | val2: "" 337 | match: all 338 | bg: "" 339 | fg: "#9e9e9e" 340 | overwrite: "" 341 | overwrite_entity: "" 342 | overwrite_attr: "" 343 | - type: entity 344 | value: light.oswietlenie_w_kuchni 345 | align: right 346 | use_entity_unit: true 347 | attr_edit: 348 | enabled: false 349 | service: "" 350 | field: "" 351 | control: slider 352 | checked: true 353 | unchecked: false 354 | tap_action: 355 | action: toggle 356 | datetime_format: Kuchnia 357 | style: 358 | text_transform: "" 359 | - cells: 360 | - type: entity 361 | value: light.oswietlenie_w_przedpokoju 362 | align: left 363 | style: 364 | text_transform: "" 365 | use_entity_unit: true 366 | attr_edit: 367 | enabled: false 368 | service: "" 369 | field: "" 370 | control: slider 371 | checked: true 372 | unchecked: false 373 | tap_action: 374 | action: toggle 375 | entity_display: icon 376 | dyn_color: 377 | - conditions: 378 | - entity: "" 379 | attr: "" 380 | op: "=" 381 | val: "off" 382 | val2: "" 383 | match: all 384 | bg: "" 385 | fg: "#9e9e9e" 386 | overwrite: "" 387 | overwrite_entity: "" 388 | overwrite_attr: "" 389 | - type: entity 390 | value: light.oswietlenie_w_przedpokoju 391 | align: right 392 | use_entity_unit: true 393 | attr_edit: 394 | enabled: false 395 | service: "" 396 | field: "" 397 | control: slider 398 | checked: true 399 | unchecked: false 400 | tap_action: 401 | action: toggle 402 | datetime_format: Przedpokój 403 | - cells: 404 | - type: entity 405 | value: light.oswietlenie_w_lazience 406 | align: left 407 | style: 408 | text_transform: "" 409 | use_entity_unit: true 410 | attr_edit: 411 | enabled: false 412 | service: "" 413 | field: "" 414 | control: slider 415 | checked: true 416 | unchecked: false 417 | tap_action: 418 | action: toggle 419 | entity_display: icon 420 | dyn_color: 421 | - conditions: 422 | - entity: "" 423 | attr: "" 424 | op: "=" 425 | val: "off" 426 | val2: "" 427 | match: all 428 | bg: "" 429 | fg: "#9e9e9e" 430 | overwrite: "" 431 | overwrite_entity: "" 432 | overwrite_attr: "" 433 | - type: entity 434 | value: light.oswietlenie_w_lazience 435 | align: right 436 | use_entity_unit: true 437 | attr_edit: 438 | enabled: false 439 | service: "" 440 | field: "" 441 | control: slider 442 | checked: true 443 | unchecked: false 444 | tap_action: 445 | action: toggle 446 | datetime_format: Łazienka 447 | - cells: 448 | - type: entity 449 | value: light.oswietlenie_w_sypialni 450 | align: left 451 | style: 452 | text_transform: "" 453 | use_entity_unit: true 454 | attr_edit: 455 | enabled: false 456 | service: "" 457 | field: "" 458 | control: slider 459 | checked: true 460 | unchecked: false 461 | tap_action: 462 | action: toggle 463 | entity_display: icon 464 | dyn_color: 465 | - conditions: 466 | - entity: "" 467 | attr: "" 468 | op: "=" 469 | val: "off" 470 | val2: "" 471 | match: all 472 | bg: "" 473 | fg: "#9e9e9e" 474 | overwrite: "" 475 | overwrite_entity: "" 476 | overwrite_attr: "" 477 | - type: entity 478 | value: light.oswietlenie_w_sypialni 479 | align: right 480 | use_entity_unit: true 481 | attr_edit: 482 | enabled: false 483 | service: "" 484 | field: "" 485 | control: slider 486 | checked: true 487 | unchecked: false 488 | tap_action: 489 | action: toggle 490 | datetime_format: Sypialnia 491 | - cells: 492 | - type: entity 493 | value: light.oswietlenie_glowne_bez_lampki_i_gesi 494 | align: left 495 | style: 496 | text_transform: "" 497 | icon_size: "" 498 | use_entity_unit: true 499 | attr_edit: 500 | enabled: false 501 | service: "" 502 | field: "" 503 | control: slider 504 | checked: true 505 | unchecked: false 506 | tap_action: 507 | action: toggle 508 | entity_display: icon 509 | dyn_color: 510 | - conditions: 511 | - entity: "" 512 | attr: "" 513 | op: "=" 514 | val: "off" 515 | val2: "" 516 | match: all 517 | bg: "" 518 | fg: "#9e9e9e" 519 | overwrite: icon 520 | overwrite_entity: "" 521 | overwrite_attr: "" 522 | icon: mdi:lightbulb-group-off 523 | - type: entity 524 | value: light.oswietlenie_glowne_bez_lampki_i_gesi 525 | align: right 526 | use_entity_unit: true 527 | attr_edit: 528 | enabled: false 529 | service: "" 530 | field: "" 531 | control: slider 532 | checked: true 533 | unchecked: false 534 | tap_action: 535 | action: toggle 536 | datetime_format: Główne 537 | column_count: 2 538 | card_padding: 0 539 | overflow_x: true 540 | header_from_first_row: false 541 | zebra: false 542 | narrow_breakpoint: "" 543 | text_size: "" 544 | cell_padding: 545 | top: 0 546 | right: 0 547 | bottom: 0 548 | left: 0 549 | custom_template_enabled: true 550 | custom_template_html: |- 551 | 619 | 620 | type: custom:flex-cells-card 621 | -------------------------------------------------------------------------------- /examples/climate-template/climate.yaml: -------------------------------------------------------------------------------- 1 | rows: 2 | - cells: 3 | - type: entity 4 | value: climate.samsung_ac 5 | align: left 6 | style: 7 | text_transform: "" 8 | icon_size: 30px 9 | use_entity_unit: true 10 | attr_edit: 11 | enabled: false 12 | service: "" 13 | field: "" 14 | control: slider 15 | checked: true 16 | unchecked: false 17 | entity_display: icon 18 | dyn_color: 19 | - conditions: 20 | - entity: "" 21 | attr: "" 22 | op: "=" 23 | val: "off" 24 | val2: "" 25 | match: all 26 | bg: var(--divider-color) 27 | fg: "" 28 | overwrite: icon 29 | overwrite_entity: "" 30 | overwrite_attr: "" 31 | icon: mdi:air-conditioner 32 | - conditions: 33 | - entity: "" 34 | attr: "" 35 | op: "=" 36 | val: fan_only 37 | val2: "" 38 | match: all 39 | bg: "#06AEC333" 40 | fg: "" 41 | overwrite: icon 42 | overwrite_entity: "" 43 | overwrite_attr: "" 44 | icon: mdi:air-conditioner 45 | - conditions: 46 | - entity: "" 47 | attr: "" 48 | op: "=" 49 | val: heat 50 | val2: "" 51 | match: all 52 | bg: "#FF6F2233" 53 | fg: "" 54 | overwrite: icon 55 | overwrite_entity: "" 56 | overwrite_attr: "" 57 | icon: mdi:air-conditioner 58 | - conditions: 59 | - entity: "" 60 | attr: "" 61 | op: "=" 62 | val: cool 63 | val2: "" 64 | match: all 65 | bg: "#2196F333" 66 | fg: "" 67 | overwrite: icon 68 | overwrite_entity: "" 69 | overwrite_attr: "" 70 | icon: mdi:air-conditioner 71 | - cells: 72 | - type: entity 73 | value: climate.samsung_ac 74 | align: left 75 | style: 76 | text_transform: "" 77 | color: "#b0b0b0" 78 | font_size: "" 79 | use_entity_unit: false 80 | attr_edit: 81 | enabled: false 82 | service: "" 83 | field: "" 84 | control: slider 85 | checked: true 86 | unchecked: false 87 | attribute: current_temperature 88 | unit: °C 89 | precision: 1 90 | dyn_color: [] 91 | - cells: 92 | - type: entity 93 | value: climate.samsung_ac 94 | align: left 95 | style: 96 | text_transform: "" 97 | font_size: 14px 98 | use_entity_unit: false 99 | attr_edit: 100 | enabled: true 101 | service: climate.set_temperature 102 | field: temperature 103 | control: slider 104 | min: 16 105 | max: 30 106 | step: 1 107 | checked: true 108 | unchecked: false 109 | unit: °C 110 | show_control_value_right: true 111 | - cells: 112 | - type: entity 113 | value: climate.samsung_ac 114 | align: center 115 | style: 116 | text_transform: "" 117 | use_entity_unit: true 118 | attr_edit: 119 | enabled: false 120 | service: "" 121 | field: "" 122 | control: slider 123 | checked: true 124 | unchecked: false 125 | dyn_color: 126 | - conditions: 127 | - entity: "" 128 | attr: "" 129 | op: "!=" 130 | val: fan_only 131 | val2: "" 132 | match: all 133 | bg: var(--divider-color) 134 | fg: "#9e9e9e" 135 | overwrite: icon 136 | overwrite_entity: "" 137 | overwrite_attr: "" 138 | text: Fan 139 | icon: mdi:fan 140 | - conditions: 141 | - entity: "" 142 | attr: "" 143 | op: "=" 144 | val: fan_only 145 | val2: "" 146 | match: all 147 | bg: "#06AEC333" 148 | fg: "" 149 | overwrite: icon 150 | overwrite_entity: "" 151 | overwrite_attr: "" 152 | text: Fan 153 | icon: mdi:fan 154 | tap_action: 155 | action: perform-action 156 | perform_action: climate.set_hvac_mode 157 | target: 158 | entity_id: climate.samsung_ac 159 | data: 160 | hvac_mode: fan_only 161 | - cells: 162 | - type: entity 163 | value: climate.samsung_ac 164 | align: center 165 | style: 166 | text_transform: "" 167 | use_entity_unit: true 168 | attr_edit: 169 | enabled: false 170 | service: "" 171 | field: "" 172 | control: slider 173 | checked: true 174 | unchecked: false 175 | dyn_color: 176 | - conditions: 177 | - entity: "" 178 | attr: "" 179 | op: "!=" 180 | val: cool 181 | val2: "" 182 | match: all 183 | bg: var(--divider-color) 184 | fg: "#9e9e9e" 185 | overwrite: icon 186 | overwrite_entity: "" 187 | overwrite_attr: "" 188 | text: Cool 189 | icon: mdi:snowflake 190 | - conditions: 191 | - entity: "" 192 | attr: "" 193 | op: "=" 194 | val: cool 195 | val2: "" 196 | match: all 197 | bg: "#2196F333" 198 | fg: "" 199 | overwrite: icon 200 | overwrite_entity: "" 201 | overwrite_attr: "" 202 | text: Cool 203 | icon: mdi:snowflake 204 | tap_action: 205 | action: perform-action 206 | perform_action: climate.set_hvac_mode 207 | target: 208 | entity_id: 209 | - climate.samsung_ac 210 | data: 211 | hvac_mode: cool 212 | - cells: 213 | - type: entity 214 | value: climate.samsung_ac 215 | align: center 216 | style: 217 | text_transform: "" 218 | use_entity_unit: true 219 | attr_edit: 220 | enabled: false 221 | service: "" 222 | field: "" 223 | control: slider 224 | checked: true 225 | unchecked: false 226 | dyn_color: 227 | - conditions: 228 | - entity: "" 229 | attr: "" 230 | op: "!=" 231 | val: heat 232 | val2: "" 233 | match: all 234 | bg: var(--divider-color) 235 | fg: "#9e9e9e" 236 | overwrite: icon 237 | overwrite_entity: "" 238 | overwrite_attr: "" 239 | text: Heat 240 | icon: mdi:fire 241 | - conditions: 242 | - entity: "" 243 | attr: "" 244 | op: "=" 245 | val: heat 246 | val2: "" 247 | match: all 248 | bg: "#FF6F2233" 249 | fg: "" 250 | overwrite: icon 251 | overwrite_entity: "" 252 | overwrite_attr: "" 253 | text: Heat 254 | icon: mdi:fire 255 | tap_action: 256 | action: perform-action 257 | perform_action: climate.set_hvac_mode 258 | target: 259 | entity_id: 260 | - climate.samsung_ac 261 | data: 262 | hvac_mode: heat 263 | - cells: 264 | - type: entity 265 | value: climate.samsung_ac 266 | align: center 267 | style: 268 | text_transform: "" 269 | use_entity_unit: true 270 | attr_edit: 271 | enabled: false 272 | service: "" 273 | field: "" 274 | control: slider 275 | checked: true 276 | unchecked: false 277 | dyn_color: 278 | - conditions: 279 | - entity: "" 280 | attr: "" 281 | op: "!=" 282 | val: "off" 283 | val2: "" 284 | match: all 285 | bg: var(--divider-color) 286 | fg: "#9e9e9e" 287 | overwrite: icon 288 | overwrite_entity: "" 289 | overwrite_attr: "" 290 | text: "Off" 291 | icon: mdi:power 292 | - conditions: 293 | - entity: "" 294 | attr: "" 295 | op: "=" 296 | val: "off" 297 | val2: "" 298 | match: all 299 | bg: "#9E9E9E" 300 | fg: white 301 | overwrite: icon 302 | overwrite_entity: "" 303 | overwrite_attr: "" 304 | text: "Off" 305 | icon: mdi:power 306 | tap_action: 307 | action: perform-action 308 | perform_action: climate.set_hvac_mode 309 | target: 310 | entity_id: 311 | - climate.samsung_ac 312 | data: 313 | hvac_mode: "off" 314 | - cells: 315 | - type: string 316 | value: Swing 317 | align: left 318 | style: 319 | text_transform: "" 320 | attr_edit: 321 | enabled: false 322 | service: "" 323 | field: "" 324 | control: slider 325 | checked: true 326 | unchecked: false 327 | tap_action: 328 | action: perform-action 329 | perform_action: climate.set_swing_mode 330 | target: 331 | entity_id: climate.samsung_ac 332 | data: 333 | swing_mode: swing 334 | dyn_color: 335 | - conditions: 336 | - entity: climate.samsung_ac 337 | attr: swing_mode 338 | op: "=" 339 | val: swing 340 | val2: "" 341 | match: all 342 | bg: var(--state-icon-color) 343 | fg: var(--text-primary-color) 344 | overwrite: "" 345 | overwrite_entity: "" 346 | overwrite_attr: "" 347 | dyn_row_rules: [] 348 | - cells: 349 | - type: string 350 | value: Stop 351 | align: left 352 | style: 353 | text_transform: "" 354 | attr_edit: 355 | enabled: false 356 | service: "" 357 | field: "" 358 | control: slider 359 | checked: true 360 | unchecked: false 361 | tap_action: 362 | action: perform-action 363 | perform_action: climate.set_swing_mode 364 | target: 365 | entity_id: climate.samsung_ac 366 | data: 367 | swing_mode: stop 368 | dyn_color: 369 | - conditions: 370 | - entity: climate.samsung_ac 371 | attr: swing_mode 372 | op: "=" 373 | val: stop 374 | val2: "" 375 | match: all 376 | bg: var(--state-icon-color) 377 | fg: var(--text-primary-color) 378 | overwrite: "" 379 | overwrite_entity: "" 380 | overwrite_attr: "" 381 | - cells: 382 | - type: entity 383 | value: climate.samsung_ac 384 | align: left 385 | style: 386 | text_transform: "" 387 | color: "#b0b0b0" 388 | use_entity_unit: false 389 | attr_edit: 390 | enabled: false 391 | service: "" 392 | field: "" 393 | control: slider 394 | checked: true 395 | unchecked: false 396 | attribute: current_humidity 397 | precision: 0 398 | unit: "%" 399 | - cells: 400 | - type: string 401 | value: Quiet 402 | align: left 403 | style: 404 | text_transform: "" 405 | attr_edit: 406 | enabled: false 407 | service: "" 408 | field: "" 409 | control: slider 410 | checked: true 411 | unchecked: false 412 | dyn_color: 413 | - conditions: 414 | - entity: climate.samsung_ac 415 | attr: fan_mode 416 | op: "=" 417 | val: quiet 418 | val2: "" 419 | match: all 420 | bg: "#d16500" 421 | fg: var(--text-primary-color) 422 | overwrite: "" 423 | overwrite_entity: "" 424 | overwrite_attr: "" 425 | attribute: fan_mode 426 | tap_action: 427 | action: perform-action 428 | perform_action: climate.set_fan_mode 429 | target: 430 | entity_id: climate.samsung_ac 431 | data: 432 | fan_mode: quiet 433 | - cells: 434 | - type: string 435 | value: Low 436 | align: left 437 | style: 438 | text_transform: "" 439 | attr_edit: 440 | enabled: false 441 | service: "" 442 | field: "" 443 | control: slider 444 | checked: true 445 | unchecked: false 446 | dyn_color: 447 | - conditions: 448 | - entity: climate.samsung_ac 449 | attr: fan_mode 450 | op: "=" 451 | val: low 452 | val2: "" 453 | match: all 454 | bg: "#d16500" 455 | fg: var(--text-primary-color) 456 | overwrite: "" 457 | overwrite_entity: "" 458 | overwrite_attr: "" 459 | attribute: fan_mode 460 | tap_action: 461 | action: perform-action 462 | perform_action: climate.set_fan_mode 463 | target: 464 | entity_id: climate.samsung_ac 465 | data: 466 | fan_mode: low 467 | - cells: 468 | - type: string 469 | value: Med 470 | align: left 471 | style: 472 | text_transform: "" 473 | attr_edit: 474 | enabled: false 475 | service: "" 476 | field: "" 477 | control: slider 478 | checked: true 479 | unchecked: false 480 | dyn_color: 481 | - conditions: 482 | - entity: climate.samsung_ac 483 | attr: fan_mode 484 | op: "=" 485 | val: med 486 | val2: "" 487 | match: all 488 | bg: "#d16500" 489 | fg: var(--text-primary-color) 490 | overwrite: "" 491 | overwrite_entity: "" 492 | overwrite_attr: "" 493 | attribute: fan_mode 494 | tap_action: 495 | action: perform-action 496 | perform_action: climate.set_fan_mode 497 | target: 498 | entity_id: climate.samsung_ac 499 | data: 500 | fan_mode: med 501 | - cells: 502 | - type: string 503 | value: High 504 | align: left 505 | style: 506 | text_transform: "" 507 | attr_edit: 508 | enabled: false 509 | service: "" 510 | field: "" 511 | control: slider 512 | checked: true 513 | unchecked: false 514 | dyn_color: 515 | - conditions: 516 | - entity: climate.samsung_ac 517 | attr: fan_mode 518 | op: "=" 519 | val: high 520 | val2: "" 521 | match: all 522 | bg: "#d16500" 523 | fg: var(--text-primary-color) 524 | overwrite: "" 525 | overwrite_entity: "" 526 | overwrite_attr: "" 527 | attribute: fan_mode 528 | tap_action: 529 | action: perform-action 530 | perform_action: climate.set_fan_mode 531 | target: 532 | entity_id: climate.samsung_ac 533 | data: 534 | fan_mode: high 535 | - cells: 536 | - type: string 537 | value: Turbo 538 | align: left 539 | style: 540 | text_transform: "" 541 | attr_edit: 542 | enabled: false 543 | service: "" 544 | field: "" 545 | control: slider 546 | checked: true 547 | unchecked: false 548 | dyn_color: 549 | - conditions: 550 | - entity: climate.samsung_ac 551 | attr: fan_mode 552 | op: "=" 553 | val: turbo 554 | val2: "" 555 | match: all 556 | bg: "#d16500" 557 | fg: var(--text-primary-color) 558 | overwrite: "" 559 | overwrite_entity: "" 560 | overwrite_attr: "" 561 | attribute: fan_mode 562 | tap_action: 563 | action: perform-action 564 | perform_action: climate.set_fan_mode 565 | target: 566 | entity_id: climate.samsung_ac 567 | data: 568 | fan_mode: turbo 569 | - cells: 570 | - type: string 571 | value: Auto 572 | align: left 573 | style: 574 | text_transform: "" 575 | attr_edit: 576 | enabled: false 577 | service: "" 578 | field: "" 579 | control: slider 580 | checked: true 581 | unchecked: false 582 | dyn_color: 583 | - conditions: 584 | - entity: climate.samsung_ac 585 | attr: fan_mode 586 | op: "=" 587 | val: auto 588 | val2: "" 589 | match: all 590 | bg: "#d16500" 591 | fg: var(--text-primary-color) 592 | overwrite: "" 593 | overwrite_entity: "" 594 | overwrite_attr: "" 595 | attribute: fan_mode 596 | tap_action: 597 | action: perform-action 598 | perform_action: climate.set_fan_mode 599 | target: 600 | entity_id: climate.samsung_ac 601 | data: 602 | fan_mode: auto 603 | column_count: 1 604 | card_padding: 8 605 | overflow_x: true 606 | header_from_first_row: false 607 | zebra: false 608 | narrow_breakpoint: "" 609 | text_size: "" 610 | cell_padding: 611 | top: 0 612 | right: 0 613 | bottom: 0 614 | left: 0 615 | custom_template_enabled: true 616 | custom_template_html: |- 617 | 701 | 702 |
703 |
704 |
705 | 706 |
707 |
708 |
709 |
710 | Living room 711 |
712 | 713 | ⸱ 714 | 715 |
716 |
717 |
718 |
719 |
720 |
721 | 722 | 723 | 724 | 725 |
726 |
727 | 728 |
729 |
730 |
731 |
732 |
733 |
734 | 735 | 736 |
737 |
738 | 739 | 740 | 741 | 742 | 743 | 744 |
745 |
746 | type: custom:flex-cells-card 747 | --------------------------------------------------------------------------------