v0.1.1-alpha

It would have been better when i first did my commit before i send out release notes.

Sorry for the inconvenience.

What's Changed

• Update Readme by @cpyarger in #4

New Contributors

• @cpyarger made their first contribution in #4

Full Changelog: https://github.com/nielsnl68/SwitchPlate/commits/tag1

v0.1.1-alpha

This is the first working release of SwitchPlate for esphome.

It allows you to add buttons on the screen hook them up with esphome's switches and control them in you HA installation.

The best way to import this switchplate component is using the external_components: class:

external_components:
  - source: github://pr#3796
    components: [display, animation]
    refresh: 10s
  - source: github://pr#3793
    components: [xpt2046]
    refresh: 10s
  - source: github://nielsnl68/Switchplate
    components: [switchplate, ili9xxx]
    refresh: 10s

As you can see there are a couple of PR's needed to have a good experience with the switchplate component. And the switchplate has only been tested with the ili9341 which is now part as a model of the ili9xxx family and the changed xpt2046 touchscreen driver.

Currently the SwitchPlate supports the Label, 'Button, Imageandpanel` widgets and has also 2 special use case widgets to show the page title and one for showing the current time or date.
This is just a start in the upcoming releases different widget's will be added. Which ones that will be is also depending on you asking for them.

With the following properties you can now setup the switchplate in the YAML config files:

switchplate:
  id: my_plate
  display_id: my_display # Req 
  touchscreen_id: my_toucher
  default_font: my_font
  tabview: true/false
  thema:
     ... 
  pages:
    - id: myButtons
      title: Main buttons
      is_visible: true/false
      is_disabled: true/false
      selectable: true 
      widgets: 
          ...
  header_color: my_color
  header_height: 25
  header:
    - type: pagetitle 
      dimension:
        x: 2
        y: 0
        width: 198
        height: 20
    - type: datetime
      id: theTime
      time_id: the_time
      format: "%X"
      dimension:
        x: 240
        y: 0
        width: 120 
        height: 20
  footer_color: my_color
  footer_height: 25
  footer:
     ....

the following widgets can be set at the current time.
The below settings are for label, pagetitle, datetime and button:

        - type: label
          id: txtHello
          content: "I am your SwitchPlate"
          is_pressed: true/false
          is_visible: true/false
          is_disabled: true/false
          is_selected: true/false
          clickable: true/false 
          selectable: true
          action: noting/home/prev/next
          
          background_color: my_color
          background_color_from: my_color
          background_color_to: my_color
          background_color_direction: horizontal/vertical
          
          border_color: my_color
          border_color_from: my_color
          border_color_to: my_color
          border_color_direction: horizontal/vertical

          text_fond: my_font
          text_align: top left
          text_mode: crop
          text_color_from: my_color
          text_color_to: my_color
          text_color_direction: horizontal/vertical          

          dimension:
            x: 10
            y: 30
            width: 300 
            height: 20

The following properties are for the image widget:

        - type: image
          id: my_image_widget
          is_pressed: true/false
          is_visible: true/false
          is_disabled: true/false
          is_selected: true/false
          clickable: true/false 
          selectable: true/false
          action: noting/home/prev/next
          background_color: my_color
          background_color_from: my_color
          background_color_to: my_color
          background_color_direction: horizontal/vertical
          
          border_color: my_color
          border_color_from: my_color
          border_color_to: my_color
          border_color_direction: horizontal/vertical

          image_id: my_image
          image_shift_x: 0
          image_shift_y: 0
          image_color: my_color
          image_color_from: my_color
          image_color_to: my_color
          image_color_direction: horizontal/vertical          
          dimension:
            x: 10
            y: 30
            width: 300 
            height: 20

When you want to do styling central at on place then you can use the thema: property like:

     thema:
        label: 
           ...
        button:
          ...
        etc.

I love to hear from you when you have testing it. You can post your finding here or ping me on discord at:
https://discord.com/channels/429907082951524364/1019881727159697418
or on my own channel at https://discord.gg/58zKrmypNp

Enjou playing with the current version

Greetings Niels

PS. I like to thank @fvanroie for helping me where he could. Without his work i never started this endeavour. Also i want to thank everyone that helped me while i was stuck with parts of the development. Without them i would ended where i am now.

What's Changed

• Update Readme by @cpyarger in #4

New Contributors

• @cpyarger made their first contribution in #4

Full Changelog: https://github.com/nielsnl68/SwitchPlate/commits/tag0