Skip to content

Commit 0913c61

Browse files
nodebloxnodeblox
committed
init
0 parents  commit 0913c61

File tree

8 files changed

+978
-0
lines changed

8 files changed

+978
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.env

‎LivelyInfo.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"AppVersion": "0.9.6.0",
3+
"Title": "Minimalistic",
4+
"Desc": "Minimalistic Wallpaper with integrated audio visualizer, clock and date.",
5+
"Author": "Nodeblox",
6+
"License": null,
7+
"Contact": "https://github.com/nodeblox/lively-minimalistic",
8+
"Type": 1,
9+
"FileName": "index.html",
10+
"Arguments": "--audio --pause-event true --system-nowplaying",
11+
"IsAbsolutePath": false
12+
}

‎LivelyProperties.json‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
{
2+
"visualizerToggle": {
3+
"type": "checkbox",
4+
"value": true,
5+
"text": "Show Audio Visualizer"
6+
},
7+
"visualizerOpacity": {
8+
"type": "slider",
9+
"value": 0.5,
10+
"min": 0,
11+
"max": 1,
12+
"step": 0.01,
13+
"text": "Audio Visualizer Opacity"
14+
},
15+
"visualizerHeight": {
16+
"type": "slider",
17+
"value": 1,
18+
"min": 0.1,
19+
"max": 3,
20+
"step": 0.01,
21+
"text": "Audio Visualizer Height Scale"
22+
},
23+
"visualizerColorMode": {
24+
"type": "dropdown",
25+
"value": 0,
26+
"items": [
27+
"Album Cover Colors",
28+
"White Illusion",
29+
"Spectrum",
30+
"Based on Value",
31+
"Custom Color"
32+
],
33+
"text": "Audio Visualizer Color Mode"
34+
},
35+
"visualizerCustomColor": {
36+
"type": "color",
37+
"value": "#FFFFFF",
38+
"text": "Audio Visualizer Custom Color"
39+
},
40+
"nowPlayingToggle": {
41+
"type": "checkbox",
42+
"value": true,
43+
"text": "Show Now Playing"
44+
},
45+
"nowPlayingOpacity": {
46+
"type": "slider",
47+
"value": 0.8,
48+
"min": 0,
49+
"max": 1,
50+
"step": 0.01,
51+
"text": "Now Playing Opacity"
52+
},
53+
"nowPlayingSize": {
54+
"type": "slider",
55+
"value": 1,
56+
"min": 0.5,
57+
"max": 3,
58+
"step": 0.1,
59+
"text": "Now Playing Size"
60+
},
61+
"nowPlayingCoverToggle": {
62+
"type": "checkbox",
63+
"value": true,
64+
"text": "Show Album Cover in Now Playing"
65+
},
66+
"nowPlayingCoverSize": {
67+
"type": "slider",
68+
"value": 1,
69+
"min": 0.5,
70+
"max": 3,
71+
"step": 0.1,
72+
"text": "Album Cover Size in Now Playing"
73+
},
74+
"backgroundToggle": {
75+
"type": "checkbox",
76+
"value": true,
77+
"text": "Show Album Cover related Background Colors"
78+
},
79+
"backgroundOpacity": {
80+
"type": "slider",
81+
"value": 0.25,
82+
"min": 0,
83+
"max": 1,
84+
"step": 0.01,
85+
"text": "Background Colors Opacity"
86+
},
87+
"backgroundSaturation": {
88+
"type": "slider",
89+
"value": 0.5,
90+
"min": 0,
91+
"max": 1,
92+
"step": 0.01,
93+
"text": "Background Colors Saturation"
94+
},
95+
"debugMode": {
96+
"type": "checkbox",
97+
"value": false,
98+
"text": "Enable Debug Mode"
99+
}
100+
}

‎README.md‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
# Minimalistic Audio Visualizer Wallpaper
2+
3+
A dynamic Lively Wallpaper that responds to music playback with audio visualization and album cover color extraction.
4+
5+
## Features
6+
7+
### 🎵 Audio Visualizer
8+
9+
- Real-time audio visualization with 128 frequency bars
10+
- Multiple color modes:
11+
- **Album Cover Colors**: Horizontal gradient using colors extracted from the current album cover
12+
- **White Illusion**: Random light colors for a subtle effect
13+
- **Spectrum**: Rainbow gradient across the visualizer
14+
- **Based on Value**: Dynamic colors based on audio intensity (blue → cyan → green → yellow → red)
15+
- **Custom Color**: Choose your own color
16+
- Adjustable height scaling
17+
- Adjustable opacity
18+
- Toggle on/off
19+
20+
### 🎨 Background Colors
21+
22+
- Automatic color extraction from album artwork (using color.js)
23+
- Smooth transitions when album cover changes (1.5s fade)
24+
- Radial gradient with subtle blur effects
25+
- Adjustable saturation (desaturation slider)
26+
- Adjustable opacity
27+
- Toggle on/off
28+
29+
### 🎤 Now Playing Display
30+
31+
- Shows current track information (Title, Artist, Album)
32+
- Auto-hides when no music is playing
33+
- Adjustable opacity
34+
- Adjustable size scaling
35+
- Toggle on/off
36+
37+
### 🔧 Advanced Features
38+
39+
- **Adaptive Audio Scaling**: Visualizer intensity is calculated relative to the average maximum loudness over the last 60 seconds, ensuring consistent visualization regardless of track volume
40+
- **Smooth Color Transitions**: Album cover color changes fade smoothly over 1.5 seconds
41+
- **Debug Mode**: View real-time statistics including:
42+
- Average loudness
43+
- Current max loudness (60s rolling average)
44+
- Number of extracted colors
45+
- Background saturation level
46+
- Playback type
47+
- Color swatches with RGB values (top-left corner)
48+
49+
## Technical Details
50+
51+
### Color Extraction
52+
53+
Uses [color.js](https://github.com/luukdv/color.js/) to extract the 5 most prominent colors from album artwork. Colors are sampled and grouped for optimal visual results. - IMPORTANT: color.js is licensed under the MIT License by Luuk de Vlieger.
54+
55+
### Audio Processing
56+
57+
- Receives 128-band frequency data (0-255 values)
58+
- Tracks rolling maximum loudness over 60 seconds
59+
- Calculates relative intensity for adaptive visualization
60+
61+
### Color Desaturation
62+
63+
Custom RGB desaturation algorithm that interpolates between original colors and their grayscale equivalents based on the saturation slider (0 = grayscale, 1 = full saturation).
64+
65+
### Performance
66+
67+
- Uses HTML5 Canvas for rendering
68+
- Efficient gradient caching for album cover color mode
69+
- RequestAnimationFrame for smooth color transitions
70+
- Responsive to window resize events
71+
72+
## Customization Options
73+
74+
All settings are available through Lively Wallpaper's customization panel:
75+
76+
| Setting | Type | Default | Range | Description |
77+
| ----------------------------- | -------- | ----------- | ------- | ------------------------------------- |
78+
| Show Audio Visualizer | Toggle | On | - | Enable/disable visualizer |
79+
| Audio Visualizer Opacity | Slider | 0.5 | 0-1 | Transparency of visualizer bars |
80+
| Audio Visualizer Height Scale | Slider | 1.0 | 0.1-3.0 | Scale factor for bar heights |
81+
| Audio Visualizer Color Mode | Dropdown | Album Cover | - | Color scheme selection |
82+
| Audio Visualizer Custom Color | Color | #FFFFFF | - | Custom color (when mode = Custom) |
83+
| Show Now Playing | Toggle | On | - | Enable/disable track info |
84+
| Now Playing Opacity | Slider | 0.8 | 0-1 | Transparency of track info |
85+
| Now Playing Size | Slider | 1.0 | 0.5-3.0 | Scale factor for track info |
86+
| Show Background Colors | Toggle | On | - | Enable/disable album color background |
87+
| Background Colors Opacity | Slider | 0.25 | 0-1 | Transparency of background |
88+
| Background Colors Saturation | Slider | 0.5 | 0-1 | Color saturation (0=gray, 1=full) |
89+
| Enable Debug Mode | Toggle | Off | - | Show debug information |
90+
91+
## Files Structure
92+
93+
```
94+
minimalistic/
95+
├── index.html # Main HTML structure
96+
├── style.css # Styling and layout
97+
├── wallpaper.js # Main application logic
98+
├── color.js # Color extraction library
99+
├── LivelyInfo.json # Lively Wallpaper metadata
100+
├── LivelyProperties.json # Customization settings
101+
└── README.md # This file
102+
```
103+
104+
## Browser Compatibility
105+
106+
- Requires HTML5 Canvas support
107+
- Uses ES6+ JavaScript features
108+
- Tested with Chromium-based browsers (Edge, Chrome)
109+
110+
## Credits
111+
112+
- **Color Extraction**: [color.js](https://github.com/luukdv/color.js/) by Luuk de Vlieger
113+
- **Platform**: [Lively Wallpaper](https://rocksdanister.com/lively/) by Dani John
114+
115+
## License
116+
117+
This wallpaper is free to use and modify for personal use.

‎color.js‎

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Wallpaper</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<canvas class="background"></canvas>
11+
<canvas class="audio-visualizer"></canvas>
12+
<div class="now-playing">
13+
<div class="now-playing-cover"></div>
14+
<div class="now-playing-text"></div>
15+
</div>
16+
<div class="debug-console"></div>
17+
<div class="debug-colors"></div>
18+
<script src="color.js"></script>
19+
<script src="wallpaper.js"></script>
20+
</body>
21+
</html>

‎style.css‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body,
8+
html {
9+
width: 100%;
10+
height: 100%;
11+
overflow: hidden;
12+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
13+
background-color: #000000;
14+
color: #ffffff;
15+
z-index: -1;
16+
}
17+
18+
.background {
19+
position: absolute;
20+
top: 0;
21+
left: 0;
22+
width: 100%;
23+
height: 100%;
24+
display: block;
25+
z-index: 1;
26+
background-color: transparent;
27+
transition: opacity 0.5s ease-in-out;
28+
}
29+
30+
.audio-visualizer {
31+
position: absolute;
32+
top: 0;
33+
left: 0;
34+
width: 100%;
35+
height: 100%;
36+
display: block;
37+
z-index: 2;
38+
background-color: transparent;
39+
}
40+
41+
.now-playing {
42+
position: absolute;
43+
bottom: 20px;
44+
left: 20px;
45+
color: #ffffff;
46+
font-size: 1.2em;
47+
z-index: 3;
48+
transform-origin: bottom left;
49+
}
50+
51+
.now-playing-text .now-playing-title {
52+
font-weight: bold;
53+
font-size: 1.05em;
54+
}
55+
56+
.now-playing-cover {
57+
transform-origin: bottom left;
58+
}
59+
60+
.now-playing-cover img {
61+
width: 150px;
62+
height: 150px;
63+
object-fit: cover;
64+
vertical-align: middle;
65+
margin-right: 10px;
66+
border-radius: 5px;
67+
margin-bottom: 10px;
68+
}
69+
70+
.debug-console {
71+
position: absolute;
72+
top: 20px;
73+
right: 20px;
74+
background-color: rgba(0, 0, 0, 0.5);
75+
padding: 10px;
76+
border-radius: 5px;
77+
font-size: 0.9em;
78+
color: #00ff00;
79+
display: none;
80+
white-space: pre-line;
81+
max-height: min(80%, 800px);
82+
overflow-y: auto;
83+
z-index: 4;
84+
}
85+
86+
.debug-colors {
87+
position: absolute;
88+
top: 20px;
89+
left: 20px;
90+
display: none;
91+
z-index: 4;
92+
}

0 commit comments

Comments
 (0)