Add alternate spinbox climate controls, climate mode control, and switch/light toggle

[jantman]

This PR is based off of my code in #10. Really just opening this for discussion and to see if there's any interest in me cleaning this code up a bit, documenting it, and merging it.

This PR introduces a number of new controls:

• spinbox-based climate temperature control, which I find much easier to use on a touchscreen than sliders or arcs; I have this in wide, wide half-height, wide half-height icon-right, and square tiles.
• Off/Heat/Cool HVAC mode button toggle, square only.
• Toggle (light/switch) control, square

Note: I edited out the cursor highlight in the spinbox components; I still haven't figured out how to get rid of it for real...

Example YAML config:

substitutions:
  # -----------------------
  # ADJUST DEVICE NAME HERE
  # -----------------------
  device_name: "homedicator"
  device_friendly_name: "homedicator"

  # ---------------------------------------------------------------------------------
  # ENTER API AND OTA KEY HERE
  # Add the keys to your secret file or change them here if you want individual keys.
  # ---------------------------------------------------------------------------------
  api_key: ""
  ota_key: ""

  # ------------------------------
  # ADJUST YOUR WLAN SETTINGS HERE
  # ------------------------------
  wifi_ssid: ""
  wifi_password: ""
  wifi_domain: ".example.com"
  wifi_reboot_timeout: "1min"

  # ----------------------------------------------------------------------------------------------------
  # ADJUST TOTAL NUMBER OF PAGES HERE
  # Is used to generate navigation dots and their logic (set it to your pages + 1 for the settings page)
  # ----------------------------------------------------------------------------------------------------
  total_pages: "2"
  
  # --------------
  # OTHER SETTINGS
  # --------------
  page_transition_time: 150ms # How long to animate the transition between pages.
  user_interface_debug_mode: "false" # Draws borders around objects and labels for layouting

packages:
  HomeDicator: !include HomeDicator/device/sdl.yaml

logger:
  level: DEBUG

sensor:
  # ----------------------------------------------------------------------
  # ADD YOUR SENSORS HERE
  # Because of the way ESPHOME works lights, thermostats, etc also go here
  # They need to be included here in order for display to update values.
  # ----------------------------------------------------------------------
  - !include 
      file: HomeDicator/core/templates/sensor.yaml
      vars:
        hass_sensor_id: "avgtempbasement" # You can ommit the "sensor."
  - !include
      file: HomeDicator/core/templates/spinbox_climate_sensor.yaml
      vars:
         hass_climate_id: "testthermostat" # You can ommit the "climate."
  - platform: uptime
    name: Uptime

text_sensor:
  - !include
      file: HomeDicator/core/templates/mode_climate_sensor.yaml
      vars:
         hass_climate_id: "testthermostat" # You can ommit the "climate."
  - !include
      file: HomeDicator/core/templates/switch_sensor.yaml
      vars:
         hass_domain: "light"
         hass_entity_id: "officelight_light" # You can ommit the "switch." or "light."
         icon_on: "\U000F0335" # mdi:lightbulb
         icon_off: "\U000F0336" # mdi:lightbulb-outline

binary_sensor:
  # ---------------------
  # ADD YOUR SENSORS HERE
  # ---------------------

switch:
  # ----------------------
  # ADD YOUR SWITCHES HERE
  # ----------------------

lvgl:  
  pages:
    # ----------------------------
    # ADD / ADJUST YOUR PAGES HERE
    # ----------------------------
    - id: second_page
      bg_opa: TRANSP
      widgets:
        - !include
            file: HomeDicator/user_interface/templates/page_title.yaml
            vars:
              title: "Basement" # CHANGE PAGE TITLE HERE
        - obj:
            styles: content_container
            layout: 
              type: FLEX
              flex_flow: ROW_WRAP
              flex_align_main: LV_FLEX_ALIGN_START
              flex_align_cross: CENTER
            widgets:
              - !include
                  file: HomeDicator/user_interface/templates/tiles/sensor/square.yaml
                  vars:
                    color: 0xeebf41
                    hass_sensor_id: "avgtempbasement"
                    icon: "\U000F1C21"
                    unit: "°F"
                    title: "Basement"
              - !include
                  file: HomeDicator/user_interface/templates/tiles/switch/square.yaml
                  vars:
                    color: 0xeebf41
                    hass_domain: "light"
                    hass_entity_id: "officelight_light" # You can ommit the "switch." or "light."
                    hass_action: "light.toggle"
                    icon_on: "\U000F0335" # mdi:lightbulb
                    icon_off: "\U000F0336" # mdi:lightbulb-outline
                    title: "Office Light"
              - !include
                  file: HomeDicator/user_interface/templates/tiles/thermostat/spinbox_square.yaml
                  vars:
                    color: 0xeebf41
                    hass_climate_id: "testthermostat"
                    min_value: 40
                    max_value: 90
                    unit: "°F"
                    title: "Basement Setpoint"
                    icon: "\U000F1C21"
              - !include
                  file: HomeDicator/user_interface/templates/tiles/thermostat/mode_square.yaml
                  vars:
                    color: 0xeebf41
                    hass_climate_id: "testthermostat"
                    title: "Basement Mode"
                    icon: "\U000F1C21"

[warner83]

Great PR, just installed on my display!