Hi,
I’m lost /don’t understand the way / options / possibilty to make my display, show a second screen. (I also start to doubt if this is even possible with my display)
I would like to “touch” the screen (GC9A01) and then it will show the 2nd page. Touch it again and it will show 1st page (or after time-out).
Do I need to configure: Touchscreen? If so, how / platform? or are there other / better ways?
I googled a lot, but none seems to fit the questions I have.
thx in advance
This is my current code (and it shows a nice CO2 gauge and value):
# GC9A01 round Display 240x240
# initial version: 16022025
color:
- id: COLOR_RED
red_int: 255
green_int: 0
blue_int: 0
- id: COLOR_GREEN
red_int: 0
green_int: 255
blue_int: 0
- id: COLOR_YELLOW
red_int: 255
green_int: 255
blue_int: 0
- id: COLOR_ORANGE
red_int: 255
green_int: 160
blue_int: 0
font:
- file: "fonts/arial.ttf"
id: font_small
size: 18
- file: "fonts/arial.ttf"
id: font_large
size: 36
- file: "fonts/Roboto-Medium.ttf"
id: roboto_large
size: 32 # Increased from 24 to 48
- file: "fonts/Roboto-Medium.ttf"
id: roboto_medium
size: 56 # Increased from 24 to 48
extras:
- file: "fonts/materialdesignicons-webfont.ttf"
glyphs: [
"\U000F07E4", # mdi-molecule-co2
"\U000F0F55", # mdi-home-thermometer-outline
]
- file: "fonts/Roboto-Medium.ttf"
id: roboto_small
size: 20 # Increased from 12 to 20
- file: "fonts/ds-digi.ttf"
id: font_digital
size: 72 # Increased from 12 to 20
# # SPI-bus voor het GC9A01-display
spi:
clk_pin: 5
mosi_pin: 3
#touchscreens:
# - platform: ??
# display: my_display
# on_touch:
# then:
display:
- platform: ili9xxx
model: GC9A01A
id: my_display
dimensions:
height: 240
width: 240
cs_pin: 7
dc_pin: 9
reset_pin: 11
invert_colors: true
rotation: 0
auto_clear_enabled: false
update_interval: never
data_rate: 40MHz
lvgl:
log_level: INFO
color_depth: 16
bg_color: 0x000000
align: center
pages:
- id: main_page
widgets:
- meter:
height: 240
width: 240
align: center
text_font: montserrat_14
bg_opa: TRANSP
text_color: 0x999999
border_width: 0
pad_all: 4
scales:
- ticks:
width: 2
count: 21
length: 15
color: 0x000000
major:
stride: 5
width: 6
length: 20
color: 0xFFFFFF
label_gap: 20
range_from: 300
range_to: 2300
angle_range: 270
rotation: 135
indicators:
- line:
id: co2_needle
width: 8
color: 0xFF0000
r_mod: -5
- arc: # GREEN
color: 0x00FF00
width: 12
start_value: 300
end_value: 800
- arc: #YELLOW
color: 0xFFDE21
width: 12
start_value: 800
end_value: 1299
- arc: # ORANGE
color: 0xFF7518
width: 12
start_value: 1300
end_value: 1799
- arc: #RED
color: 0xF44336
width: 12
start_value: 1800
end_value: 2300
- obj:
# to cover the middle part of meter indicator line
height: 118
width: 118
radius: 73
align: CENTER
border_width: 0
bg_color: 0x000000
pad_all: 0
- label:
id: co2_text
text_font: roboto_medium
align: center
text_color: 0x999999
bg_opa: TRANSP
y: -35
recolor: true
text: "\U000F07E4"
- label:
id: co2value
text_font: font_digital
align: center
text_color: 0xFFFFFF
bg_opa: TRANSP
y: +12
text: "---"
- label:
id: ppm_text
text_font: montserrat_24
align: center
text_color: 0x999999
bg_opa: TRANSP
y: +90
text: "PPM"
- id: temp_page
widgets:
- obj:
align: TOP_MID
styles: header_footer
widgets:
- label:
text: "A second page"
align: CENTER
text_align: CENTER
text_color: 0xFFFFFF
- label:
id: temperature
text_font: font_digital
align: center
text_color: 0xFFFFFF
bg_opa: TRANSP
y: +90
text: "---°C"