Skip to content

Instantly share code, notes, and snippets.

@clydebarrow

clydebarrow/animation.yaml

Last active October 15, 2025 09:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save clydebarrow/565251df8221f9045cd013dbc7faa3bf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save clydebarrow/565251df8221f9045cd013dbc7faa3bf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
animation.yaml
substitutions:
friendly_name: JC3248W535 with AXS15231
name: jc3248w535
esphome:
name: ${name}
friendly_name: ${friendly_name]
esp32:
board: esp32-s3-devkitc-1
framework:
type: esp-idf
external_components:
- source: github://clydebarrow/esphome@lvgl-animations
components: [ lvgl ]
logger:
wifi: !include wifi.yaml
psram:
mode: octal
speed: 80MHz
spi:
id: display_qspi
type: quad
clk_pin: 47
data_pins: [21,48,40,39]
power_supply:
id: backlight_id
pin: 1
enable_on_boot: true
i2c:
sda: 4
scl: 8
frequency: 400kHz
display:
- platform: mipi_spi
id: jc_display
model: jc3248w535
rotation: 90
touchscreen:
- platform: axs15231
id: jc_touch
display: jc_display
update_interval: 30ms
interrupt_pin: GPIO3
transform:
mirror_x: false
mirror_y: true
swap_xy: true
image:
- file: four-leaf-clover-159210.svg
id: sunny_png
type: RGB565
resize: 100x100
transparency: alpha_channel
lvgl:
bg_color: white
animations:
- id: logo
duration: 5s
timing:
- type: gravity
acceleration: 25.0
widgets:
- id: unit_id
x:
from: !lambda return random_uint32() % 400;
to: !lambda return random_uint32() % 400;
text_color:
from: blue
to: red
- id: other_id
y:
from: 10
to: 200
x:
from: 0
to: 300
text_color:
from: green
to: aqua
- id: image_id
transform_angle:
from: 0
to: 360
widgets:
- image:
src: sunny_png
align: center
id: image_id
transform_pivot_x: 50%
transform_pivot_y: 50%
- button:
x: 20
y: 20
id: value_id
on_click:
- lvgl.animation.start: logo
widgets:
- label:
text: Start animation
- label:
x: 20
y: 100
id: unit_id
text_font: montserrat_20
text: "A Label"
pad_bottom: 2
- label:
x: 50
y: 100
id: other_id
text_font: montserrat_20
text: "Other Label"
pad_bottom: 2
Display the source blob
Display the rendered blob
Raw
four-leaf-clover-159210.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="0 0 610 610"
version="1.1"
id="svg2"
sodipodi:docname="four-leaf-clover-159210.svg"
inkscape:version="1.3.2 (091e20e, 2023-11-25)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2" />
<sodipodi:namedview
id="namedview2"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="1.4180328"
inkscape:cx="305"
inkscape:cy="305"
inkscape:window-width="1392"
inkscape:window-height="1212"
inkscape:window-x="2240"
inkscape:window-y="25"
inkscape:window-maximized="0"
inkscape:current-layer="svg2" />
<path
d="m294.02 58.721c-16.15 0.62225-37.95 9.6233-55.045 46.54-55.391-49.262-99.441 8.3157-99.579 8.5858-23.415 45.808 21.504 112.69 88.506 158.4-81.065-26.732-153.93-18.885-174.52 29.689-0.9553 2.2526-20.74 48.691 46.62 75.025-45.794 58.291 14.326 98.735 14.604 98.857 45.863 20.017 107.68-25.733 149.25-92.357-27.674 79.247-21.232 150.93 26.239 172.52 2.2273 1.0129 48.091 21.966 76.148-44.694 57.094 47.278 99.049-11.761 99.178-12.036 21.878-46.806-25.873-112.52-94.925-155.83 79.328 28.708 151.48 23.132 173.56-24.313 1.0324-2.2184 22.359-47.908-44.052-76.55 47.777-56.677-10.88-99.207-11.153-99.338-43.307-20.708-103.4 18.537-146.92 79.278 24.678-72.619 18.581-137.36-25.276-159.2-0.95823-0.47724-10.067-5.0577-22.628-4.5737z"
fill="#4a0"
fill-rule="evenodd"
id="path2" />
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment