# Cartão fx_medidor: valor do sensor com barra de progresso

> Modelo novo do button-card no estilo Doug Futurista: valor de qualquer sensor com barra que fica vermelha no limite. Bom para consumo, caixa d'água e bateria.

- Tipo: Cartão (yaml)
- Testado no Home Assistant 2026.11
- Arquivo cru: https://dougsmarthome.com.br/api/codigos/cartao-fx-medidor-valor-com-barra-de-progresso/arquivo.yaml
- Página: https://dougsmarthome.com.br/codigos/cartao-fx-medidor-valor-com-barra-de-progresso

## Código

```yaml
# fx_medidor: valor de um sensor com barra de progresso (consumo, caixa d'água, bateria, CPU...).
# Cole embaixo de "button_card_templates:", junto com os outros modelos fx_.
# Variáveis (todas opcionais): titulo, icone, cor, max (valor que enche a barra), alerta (% que deixa a barra vermelha),
# unidade (se vazio, usa a do sensor) e decimais.
fx_medidor:
  variables:
    titulo: Medidor
    icone: mdi:gauge
    cor: '#3cc8ff'
    max: 100
    alerta: 80
    unidade: ''
    decimais: 1
  show_icon: false
  show_name: false
  show_state: false
  tap_action:
    action: more-info
  styles:
    card:
      - padding: 12px 16px
      - border-radius: 18px
      - background: linear-gradient(145deg, rgba(14,34,66,0.78), rgba(8,18,40,0.78))
      - border: 1px solid rgba(60,200,255,0.25)
      - box-shadow: 0 8px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06)
      - backdrop-filter: blur(14px)
      - -webkit-backdrop-filter: blur(14px)
      - color: '#eaf4ff'
    grid:
      - grid-template-areas: '"topo" "barra"'
      - grid-template-columns: 1fr
      - row-gap: 10px
    custom_fields:
      topo:
        - justify-self: start
      barra:
        - justify-self: stretch
        - width: 100%
  custom_fields:
    topo: |
      [[[
        if (!entity) return `<div style="color:#ff9a9a;font-size:13px;text-align:left">entidade não encontrada<br><b>${(this._config && this._config.entity) || '(sem entity)'}</b></div>`;
        const v = parseFloat(entity.state);
        const un = variables.unidade || entity.attributes.unit_of_measurement || '';
        const fmt = (n) => n.toLocaleString('pt-BR', {minimumFractionDigits: variables.decimais, maximumFractionDigits: variables.decimais});
        const txt = isNaN(v) ? 'indisponível' : fmt(v) + (un ? ' ' + un : '');
        return `<div style="display:flex;align-items:center;gap:12px;text-align:left">
          <ha-icon icon="${variables.icone}" style="--mdc-icon-size:28px;color:${variables.cor};filter:drop-shadow(0 0 6px ${variables.cor}88)"></ha-icon>
          <div><div style="font-size:14px;opacity:.8">${variables.titulo}</div>
          <div style="font-size:21px;font-weight:700;white-space:nowrap">${txt}</div></div></div>`;
      ]]]
    barra: |
      [[[
        const v = entity ? parseFloat(entity.state) : NaN;
        const p = isNaN(v) ? 0 : Math.max(0, Math.min(100, v / variables.max * 100));
        const cor = p >= variables.alerta ? '#ff5a6e' : variables.cor;
        return `<div style="height:8px;border-radius:999px;background:rgba(255,255,255,0.08);overflow:hidden">
          <div style="width:${p}%;height:100%;border-radius:999px;background:${cor};box-shadow:0 0 10px ${cor}88;transition:width .6s"></div></div>`;
      ]]]

# Exemplo de uso (num painel, depois de colar o modelo acima):
#
# - type: custom:button-card
#   template: fx_medidor
#   entity: sensor.consumo_agora
#   variables:
#     titulo: Consumo agora
#     icone: mdi:flash
#     cor: '#ffc83c'
#     max: 5000
#     alerta: 70
#     decimais: 0
```

## Como usar

É o cartão criado passo a passo no artigo do vídeo, para mostrar como montar um modelo `fx_` do zero: vidro, grade, variáveis e um `custom_field` por pedaço.

Cole embaixo de `button_card_templates:` e use com `template: fx_medidor`. Variáveis: `titulo`, `icone`, `cor`, `max` (valor que enche a barra), `alerta` (% que deixa a barra vermelha), `unidade` e `decimais`.

Explicado no vídeo: https://dougsmarthome.com.br/videos/tema-futurista-para-o-home-assistant-instalar-personalizar-e-usar-os-cartoes-gra
Artigo: https://dougsmarthome.com.br/artigos/tema-doug-futurista-passo-a-passo-cartoes-fx

## Veja também

- [Cards Incríveis no Home Assistant: Stack-in-Card, Mushroom & Card-Mod](https://dougsmarthome.com.br/videos/cards-incriveis-no-home-assistant-stack-in-card-mushroom-card-mod.md): Personalize sua interface do Home Assistant com Mushroom Template Card e Mushroom Chips! 🚀
- [Sua casa em 3D no Home Assistant: NeonPlan 3D do zero (grátis)](https://dougsmarthome.com.br/videos/sua-casa-em-3d-no-home-assistant-neonplan-3d-do-zero-gratis.md): ⚠️ AVISO IMPORTANTE: o Marketplace nativo chega na versão 2026.11 do Home Assistant, com lançamento estável previsto para 4 de novembro de 2026. Gravei este vídeo na versão beta.…
- [O jogo do seu time no Home Assistant: horário, onde passa e aviso antes da bola rolar](https://dougsmarthome.com.br/videos/o-jogo-do-seu-time-no-home-assistant-horario-onde-passa-e-aviso-antes-da-bola-ro.md): Que horas é o jogo do seu time? No meu Home Assistant está no painel: data, horário, adversário, estádio, campeonato e onde passa, para qualquer time da Série A e da Série B.…
- [Picture Elements Card - Home Assistant](https://dougsmarthome.com.br/videos/picture-elements-card-home-assistant.md): Picture Elements Card - Como configurar no seu Home Assistant
- [Gasto de energia do mês em reais](https://dougsmarthome.com.br/codigos/gasto-de-energia-no-mes-em-reais.md): Utility meter que zera todo mês + tarifa editável na tela + sensor de quanto o mês já custou.
- [Aviso de porta ou janela aberta quando todos saem](https://dougsmarthome.com.br/codigos/aviso-de-porta-ou-janela-aberta-ao-sair.md): Casa vazia por 2 minutos e algo ficou aberto? Chega uma notificação dizendo exatamente o quê.

---
Fonte: Doug Smart Home (https://dougsmarthome.com.br), por Douglas Baptista. Canal no YouTube: https://www.youtube.com/@dougsmarthome