{"id":28963480,"url":"https://github.com/nerdo/hacs-nerdo-ux","last_synced_at":"2026-04-30T02:34:10.650Z","repository":{"id":299748061,"uuid":"1004058102","full_name":"nerdo/hacs-nerdo-ux","owner":"nerdo","description":"A Home Assistant lovelace press-and-hold button card with visual feedback to safely trigger actions.","archived":false,"fork":false,"pushed_at":"2025-06-18T04:49:04.000Z","size":47,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-18T05:28:36.818Z","etag":null,"topics":["custom-card","hacs","homeassistant","lovelace","press-hold"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nerdo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-18T04:02:50.000Z","updated_at":"2025-06-18T04:48:58.000Z","dependencies_parsed_at":"2025-06-18T05:29:01.370Z","dependency_job_id":"28f23b93-284b-4202-bd1f-7e4f48e10d89","html_url":"https://github.com/nerdo/hacs-nerdo-ux","commit_stats":null,"previous_names":["nerdo/hacs-nerdo-ux"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/nerdo/hacs-nerdo-ux","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nerdo%2Fhacs-nerdo-ux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nerdo%2Fhacs-nerdo-ux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nerdo%2Fhacs-nerdo-ux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nerdo%2Fhacs-nerdo-ux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nerdo","download_url":"https://codeload.github.com/nerdo/hacs-nerdo-ux/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nerdo%2Fhacs-nerdo-ux/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261601528,"owners_count":23183097,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-card","hacs","homeassistant","lovelace","press-hold"],"created_at":"2025-06-24T04:11:18.518Z","updated_at":"2026-04-30T02:34:10.631Z","avatar_url":"https://github.com/nerdo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nerdo UX\n\nA collection of custom Home Assistant Lovelace cards focused on enhancing user experience and preventing accidental actions.\n\n[![HACS Badge](https://img.shields.io/badge/HACS-Default-41BDF5.svg?style=for-the-badge)](https://github.com/hacs/integration)\n[![GitHub Release](https://img.shields.io/github/release/nerdo/hacs-nerdo-ux.svg?style=for-the-badge)](https://github.com/nerdo/hacs-nerdo-ux/releases)\n\n## Cards Included\n\n### Press and Hold Button Card\n\nA customizable Lovelace card that provides press-and-hold functionality for switching entities. Perfect for preventing accidental toggles of important switches by requiring a deliberate hold action.\n\n| Normal State | Press \u0026 Hold Action | Configuration |\n|--------------|-------------------|---------------|\n| ![Normal State](images/button-normal-state.png) | ![Press \u0026 Hold](images/button-press-hold.png) | ![Configuration](images/button-configuration.png) |\n\n**Features:**\n- **Press and Hold**: Requires holding the button for a configurable duration before executing actions\n- **Smart Default Actions**: Automatically detects entity type and executes appropriate default actions\n  - Button entities → Press service (button.press)\n  - Light/Switch entities → Toggle action\n  - Cover entities → Toggle action (open/close)\n  - Other entities → Show more info dialog\n- **Flexible Action System**: Choose from multiple action types:\n  - **Default (Smart)**: Intelligent action based on entity domain\n  - **Toggle**: Force toggle behavior for compatible entities\n  - **More Info**: Show entity details dialog\n  - **Call Service**: Execute custom Home Assistant services with parameters\n- **Custom Service Calls**: Execute any Home Assistant service with JSON parameters\n- **Visual Feedback**: Animated progress ring shows countdown progress with color coding\n- **Configurable Duration**: Set custom hold duration (default 1 second, range 500ms-10s)\n- **Movement Tolerance**: Cancel action if finger/mouse moves too far during hold\n- **Entity Support**: Works with any Home Assistant entity (buttons, switches, lights, covers, etc.)\n- **Customizable Display**: Show/hide name, state, and icon with configurable icon sizes\n- **Responsive Design**: Clean, modern interface that adapts to your theme\n- **TypeScript**: Built with TypeScript for better reliability and development experience\n\n## Installation\n\n### HACS (Recommended)\n\n1. Install HACS if you haven't already\n2. Go to HACS → Frontend\n3. Click the \"+\" button and search for \"Nerdo UX\"\n4. Install the collection\n5. Refresh your browser\n\n### Manual Installation\n\n1. Download `hacs-nerdo-ux.js` from the [latest release](https://github.com/nerdo/hacs-nerdo-ux/releases)\n2. Copy it to your `www` folder in your Home Assistant config directory\n3. Add the resource to your Lovelace configuration:\n\n```yaml\nresources:\n  - url: /local/hacs-nerdo-ux.js\n    type: module\n```\n\n## Configuration\n\n### Press and Hold Button Card\n\n#### Basic Configuration\n\n```yaml\ntype: custom:press-and-hold-button-card\nentity: switch.living_room_lights\nname: \"Living Room Lights\"\n```\n\n#### Advanced Configuration\n\n```yaml\ntype: custom:press-and-hold-button-card\nentity: switch.critical_system\nname: \"Critical System\"\nicon: mdi:alert\nhold_duration: 2000  # 2 seconds\nmovement_tolerance: 15  # pixels\nhold_action: default  # Smart action based on entity type\nshow_name: true\nshow_state: true\nshow_icon: true\nicon_height: 100\ncap_style: rounded\n```\n\n#### Custom Service Configuration\n\n```yaml\ntype: custom:press-and-hold-button-card\nentity: light.living_room\nname: \"Living Room Light\"\nhold_action: call-service\nservice: light.turn_on\nservice_data:\n  brightness: 128\n  color_name: \"blue\"\n  transition: 2\n```\n\n#### Configuration Options\n\n| Name | Type | Default | Description |\n|------|------|---------|-------------|\n| `type` | string | **Required** | `custom:press-and-hold-button-card` |\n| `entity` | string | **Required** | Home Assistant entity ID |\n| `name` | string | Entity name | Display name for the button |\n| `icon` | string | Entity icon | Icon to display (mdi:* format) |\n| `hold_duration` | number | `1000` | Hold duration in milliseconds (500-10000) |\n| `movement_tolerance` | number | `20` | Movement tolerance in pixels before canceling hold |\n| `hold_action` | string | `default` | Action type: `default`, `toggle`, `more-info`, `call-service` |\n| `service` | string | - | Service to call when `hold_action` is `call-service` (e.g., `light.turn_on`) |\n| `service_data` | object | `{}` | Service parameters as JSON object when using `call-service` |\n| `show_name` | boolean | `true` | Whether to show the entity name |\n| `show_state` | boolean | `false` | Whether to show the entity state |\n| `show_icon` | boolean | `true` | Whether to show the entity icon |\n| `icon_height` | number | `80` | Icon height in pixels (20-150) |\n| `cap_style` | string | `rounded` | Progress ring cap style: `rounded` or `none` |\n\n## Usage\n\n### Press and Hold Button Card\n\n#### Basic Operation\n1. **Press and Hold**: Press and hold the button to start the countdown\n2. **Visual Progress**: Watch the progress ring fill up during the countdown\n   - **Green ring**: When turning the entity ON (or executing default action)\n   - **Orange ring**: When turning the entity OFF\n3. **Movement Cancellation**: Moving your finger/mouse beyond the tolerance cancels the action\n4. **Release Early**: Release before completion to cancel the action\n5. **Complete Hold**: Hold until the progress completes to execute the configured action\n\n#### Action Types\n- **Default (Smart)**: Automatically determines the best action based on entity type\n  - Button entities: Calls `button.press` service\n  - Light/Switch/Input Boolean: Toggles the entity\n  - Cover entities: Toggles open/close\n  - Other entities: Shows more info dialog\n- **Toggle**: Forces toggle behavior (works with lights, switches, covers, fans, media players)\n- **More Info**: Opens the entity's more info dialog\n- **Call Service**: Executes a custom Home Assistant service with optional parameters\n\n#### Custom Service Examples\n```yaml\n# Turn on light with specific brightness and color\nhold_action: call-service\nservice: light.turn_on\nservice_data:\n  brightness: 200\n  rgb_color: [255, 0, 0]\n\n# Set thermostat temperature\nhold_action: call-service\nservice: climate.set_temperature\nservice_data:\n  temperature: 72\n\n# Play media on speaker\nhold_action: call-service\nservice: media_player.play_media\nservice_data:\n  media_content_type: \"music\"\n  media_content_id: \"spotify:playlist:37i9dQZF1DX0XUsuxWHRQd\"\n```\n\n## Development\n\n### Prerequisites\n\n- Node.js 16+\n- pnpm\n\n### Building\n\n```bash\n# Install dependencies\npnpm install\n\n# Build for production\npnpm run build\n\n# Development with watch mode\npnpm run dev\n\n# Type checking\npnpm run typecheck\n\n# Linting\npnpm run lint\n\n# Deploy to Home Assistant (requires HA_HOST environment variable)\npnpm run deploy\n```\n\n### Project Structure\n\n```\n├── src/\n│   ├── press-and-hold-button-card.ts        # Press and hold card\n│   └── press-and-hold-button-card-editor.ts # Card configuration editor\n├── dist/\n│   └── hacs-nerdo-ux.js                     # Build output (generated)\n├── hacs.json                                # HACS configuration\n├── info.md                                  # HACS info\n├── package.json                             # Node dependencies\n├── tsconfig.json                            # TypeScript config\n├── rollup.config.js                         # Build configuration\n└── README.md                                # This file\n```\n\n## Contributing\n\n1. Fork the repository\n2. Create a feature branch\n3. Make your changes\n4. Add tests if applicable\n5. Submit a pull request\n\n## Roadmap\n\n- Additional card types focused on UX improvements\n- Enhanced accessibility features\n- More customization options\n- Performance optimizations\n\n## License\n\nMIT License - see LICENSE file for details\n\n## Support\n\nIf you encounter issues or have feature requests, please [open an issue](https://github.com/nerdo/hacs-nerdo-ux/issues) on GitHub.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnerdo%2Fhacs-nerdo-ux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnerdo%2Fhacs-nerdo-ux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnerdo%2Fhacs-nerdo-ux/lists"}