https://github.com/rocksdanister/lively/wiki/Web-Guide-IV-:-Interaction
https://github.com/rocksdanister/lively/wiki/Web-Guide-V-:-System-Data
これを参考に、コードを書いてhtmlで
Lively Wallpaper Interactive Demo
Based on the Lively Wallpaper documentation you shared, I'll create an HTML wallpaper that demonstrates both user interaction and system data features.
index.html
How This Demo Works
This HTML file creates an interactive wallpaper for Lively Wallpaper with the following features:
Interaction Features (Web Guide IV)
Mouse Interaction:
- Tracks mouse position and displays coordinates
- Particles react to mouse movement (they move away when the mouse gets close)
Keyboard Interaction:
- Detects and displays key presses
- Pressing the spacebar creates a burst of particles
UI Controls:
- Slider to adjust particle count
- Buttons to change background color and reset settings
- Color picker to change particle color
- Checkbox to toggle particle trails
- Dropdown to select particle shape
- Textbox for entering messages
System Data Features (Web Guide V)
The demo simulates Lively Wallpaper's system data access by:
Displaying system information like:
- CPU usage
- Memory usage
- Battery level
- Time and date
- Screen resolution
- Performance metrics
- Implementing a simulated
livelySystemInformationobject that would normally provide real system data - Including a
livelyPropertyListenerfunction that would handle property changes from the Lively Wallpaper application
How to Use This in Lively Wallpaper
- Save this HTML file to your computer
- Open Lively Wallpaper
- Click "Add Wallpaper" and select the HTML file
- The wallpaper will load with interactive elements and simulated system data
Note: In a real Lively Wallpaper environment, the system data would be provided by the application rather than simulated as in this demo.
Lively Wallpaper with Music Information Display
I'll modify the previous HTML code to add a music player UI that displays information about the currently playing music using Lively Wallpaper's system data API.
index.html
How This Music Player Wallpaper Works
I've enhanced the previous wallpaper to include a music player interface that displays currently playing music information. Here's what's new:
Music Player Features
Music Information Display:
- Shows the current song title, artist, and album
- Displays album art
- Shows playback progress with a progress bar
- Displays current time and total duration
Music Controls:
- Play/Pause button
- Previous/Next track buttons
- Volume slider
Music Visualization:
- Audio visualizer that reacts to music (simulated in this demo)
- Customizable visualization style, color, and sensitivity
- Option to use album art as background
Music Notifications:
- Shows a notification when a new track starts playing
System Data Integration
The wallpaper accesses and displays system data including:
Music-specific data:
- Current track information
- Playback status
- Volume level
General system data:
- CPU and memory usage
- Battery level
- Time and date
Lively Wallpaper API Integration
This demo simulates the Lively Wallpaper API for music data:
- livelyAudioListener: In a real implementation, this would receive audio data from Lively Wallpaper to drive the visualizer
- livelySystemInformation: Extended to include music player information
- Music Library: Simulated with sample tracks for demonstration purposes
How to Use in Lively Wallpaper
- Save this HTML file to your computer
- Open Lively Wallpaper
- Click "Add Wallpaper" and select the HTML file
- The wallpaper will load with the music player interface
In a real Lively Wallpaper environment, the music information would be provided by the application through the system data API rather than simulated as in this demo.