# Sensor.yaml
# Built-in layouts for the Sensor widget.
# This file is part of Reactor. Copyright (c) 2020-2025 Patrick H. Rigney, All Rights Reserved.
---
version: 25011
revision: 1
defaultlayout: binary-default
layouts:
  binary-default:
    content: |
      <h1 class='widget-title' data-bind='data(`title`);entity.name;#[sensor]'></h1>
      <h2 class='widget-value' data-bind='{{value}};bool(entity.primary_value);#---'></h2>
    styles: |
      $.active .widget-value { color: red !important; }
    active_expression: bool(entity.primary_value)

  binary-large:
    content: |
      <h1 class='widget-title' data-bind='data(`title`);entity.name;#[sensor]'></h1>
      <h2 class='widget-value' data-bind='{{value}};bool(entity.primary_value);#---'></h2>
    styles: |
      $.active .widget-value { color: red !important; }
    active_expression: bool(entity.primary_value)

  binary-check:
    content: |
      <div class="ff" style="height: 100%; display: flex; flex-wrap: wrap;">
          <h1 class="widget-title" data-bind='data("title");entity.name;#[light]'></h1>
          <h2 class="widget-value" data-bind='{{active}};bool(entity.primary_value) ? "Tripped!" : "Untripped"'></h2>
      </div>
      <div class="widget-body"><i class="bi"></i></div>
    # not active f633 check-lg
    # active f338 exclamation-triangle
    styles: |
      $ i { font-size: 3rem; }
      $:not(.active) i::before { content: "\f633"; }
      $.active i { color: red !important; }
      $.active i::before { content: "\f33b"; }
      $.update-pending { background-color: var(--color1) !important; color: var(--color1-text); }
      $ h1.widget-title { width: 100%; font-size: 1rem; font-weight: normal; text-align: center; padding-top: 0.33rem; }
      $ h2.widget-value { width: 100%; font-size: 1rem; font-weight: normal; text-align: center; margin-top: auto; padding-bottom: 0.33rem; }
      $ div.widget-body { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
    active_expression: bool(entity.primary_value)

  value-default:
    content: |
      <h1 class='widget-title' data-bind='data(`title`);entity.name;#[sensor]'></h1>
      <h2 class='widget-value' data-bind='{{value}};round(entity.primary_value,1)+(entity.attributes.value_sensor?.units??"");#---'></h2>
    styles: |
      $.active .widget-value { color: red !important; }
    active_expression: 'false'

  value-large:
    content: |
      <h1 class='widget-title' data-bind='data(`title`);entity.name;#[sensor]'></h1>
      <div class="widget-body">
        <div class="lv" data-bind='{{value}};round(entity.primary_value,1)+upper(entity.attributes.value_sensor?.units??"");#---'></div>
      </div>
    styles: |
      $ div.lv { font-size: 6vw; line-height: 1.25em; text-align: center; }
      $.active .widget-value { color: red !important; }
      $ h1.widget-title { width: 100%; font-size: 1rem; font-weight: normal; text-align: center; padding-top: 0.33rem; }
      $ h2.widget-value { width: 100%; font-size: 1rem; font-weight: normal; text-align: center; margin-top: auto; padding-bottom: 0.33rem; }
      $ div.widget-body { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
    active_expression: 'false'

  primary-default:
    content: |
      <h1 class='widget-title' data-bind='data(`title`);entity.name;#[sensor]'></h1>
      <h2 class='widget-value' data-bind='{{value}};entity.primary_value;#---'></h2>
    styles: |
      $.active .widget-value { color: red !important; }
    active_expression: 'false'

  primary-large:
    content: |
      <h1 class='widget-title' data-bind='data(`title`);entity.name;#[sensor]'></h1>
      <div class="widget-body">
        <div class="widget-value" data-bind='{{value}};round(entity.primary_value*data(`scale`,1.0), data(`round`,1))+(data(`units`,``));#---'></div>
      </div>
    styles: |
      $ div.widget-value { font-size: 5vw; line-height: 1.15em; text-align: center; }
      $.active .widget-value { color: red !important; }
      $ h1.widget-title { width: 100%; font-size: 1rem; font-weight: normal; text-align: center; padding-top: 0.33rem; }
      $ h2.widget-value { width: 100%; font-size: 1rem; font-weight: normal; text-align: center; margin-top: auto; padding-bottom: 0.33rem; }
      $ div.widget-body { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
    active_expression: 'false'

  primary-elastic:
    content: |
      <h1 class='widget-title' data-bind='data(`title`);entity.name;#[sensor]'></h1>
      <div class="widget-body">
        <div class="widget-value text-size-elastic" data-bind="{{value}};entity.primary_value;#---"></div>
      </div>
    styles: |
      $ div.widget-value { font-size: 5vw; line-height: 1.15em; text-align: center; text-wrap: wrap; overflow-wrap: break-word; margin-left: 2px; margin-right: 2px; }
      $.active .widget-value { color: red !important; }
      $ h1.widget-title { width: 100%; font-size: 1rem; font-weight: normal; text-align: center; padding-top: 0.33rem; }
      $ h2.widget-value { width: 100%; font-size: 1rem; font-weight: normal; text-align: center; margin-top: auto; padding-bottom: 0.33rem; }
      $ div.widget-body { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
    active_expression: 'false'
