Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cheerlights/cheerlights-javascript-widgets
https://github.com/cheerlights/cheerlights-javascript-widgets
cheerlights javascript widgets
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/cheerlights/cheerlights-javascript-widgets
- Owner: cheerlights
- License: mit
- Created: 2022-04-07T13:35:54.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-30T17:41:02.000Z (about 2 months ago)
- Last Synced: 2024-10-30T18:26:00.134Z (about 2 months ago)
- Topics: cheerlights, javascript, widgets
- Language: HTML
- Size: 7.81 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CheerLights JavaScript Widgets
CheerLights JavaScript Widgets are a collection of embeddable widgets that display the current CheerLights color on web pages. They leverage the CheerLights JavaScript library to fetch the current color and display it. You can find the CheerLights JavaScript library on [GitHub](https://github.com/cheerlights/cheerlights-javascript).
## Solid Color Background
This widget displays the background color set to the latest CheerLights color.
> [Solid Color Background CheerLights Widget](https://widgets.cheerlights.com/color.html)
## CheerLights Logo
This widget displays the CheerLights logo with a background color that changes to the current CheerLights color.
> [CheerLights Logo CheerLights Widget](https://widgets.cheerlights.com/logo.html)
## FearLights Logo
This widget displays the FearLights logo with a background color that changes to the current CheerLights color. This is a Halloween-themed widget.
> [FearLights Logo CheerLights Widget](https://widgets.cheerlights.com/fearlights.html)
## Snow
This widget displays falling snowflakes using the CheerLights JavaScript library.
> [Snow CheerLights Widget](https://widgets.cheerlights.com/snow.html)
## Lanterns
This widget displays lanterns using the CheerLights JavaScript library.
> [Lanterns CheerLights Widget](https://widgets.cheerlights.com/lanterns.html)
## Leaves
This widget displays falling leaves using the CheerLights JavaScript library.
> [Leaves CheerLights Widget](https://widgets.cheerlights.com/leaves.html)
## Aurora
This widget displays a dynamic aurora inspired by the current CheerLights color.
> [Aurora CheerLights Widget](https://widgets.cheerlights.com/aurora.html)
## Particle
This widget displays a particle effect inspired by the current CheerLights color. Move your mouse over the widget to interact with it.
> [Particle CheerLights Widget](https://widgets.cheerlights.com/particle.html)
## Digital Clock
This widget displays a 7-segment digital clock with a background color that changes to the current CheerLights color.
> [Digital Clock CheerLights Widget](https://widgets.cheerlights.com/clock.html)
## Embed CheerLights Widgets on a Home Assistant Dashboard
To embed CheerLights widgets on a Home Assistant dashboard, follow these steps:
1. **Open Home Assistant:**
Open your Home Assistant instance in a web browser.
2. **Navigate to the Dashboard:**
Go to the dashboard where you want to add the CheerLights widget.
3. **Edit the Dashboard:**
Click on the three dots menu in the top right corner and select "Edit Dashboard".
4. **Add a New Card:**
Click on the "Add Card" button to add a new card to your dashboard.
5. **Select the "Webpage" Card:**
Scroll down and select the "Webpage" card option. This allows you to embed a webpage.
6. **Enter the Widget URL:**
Enter the URL of the CheerLights widget you want to embed (e.g. https://widgets.cheerlights.com/snow.html).
7. **Save the Card:**
Click on the "Save" button to save the new card to your dashboard.
## Embed CheerLights Widgets on a WordPress Site
To embed CheerLights widgets on a WordPress site, follow these steps:
1. Add a new block
2. Search for “Shortcode”
3. Copy iframe code and adjust the src, width, and height as needed