📘 MaterialLab Playground Documentation
Version: v0.0.8-rc
This is a browser-based drag-and-drop widget playground with theme customization and persistent background support.
🎛 UI Elements
add_circle Add Widget: Prompts for a widget type (weather, clock, battery).
upload_file Upload Background: Opens file picker to set a custom background image.
delete Clear Background: Removes the current background and theme palette.
🧩 Widgets
Widgets are draggable elements with headers and content. Supported types:
- Weather: Displays temperature and weather for
Leiden using OpenWeatherMap API.
- Clock: Digital clock that updates every second.
- Battery: Static battery percentage placeholder (future: dynamic status).
🖼 Background Support
Users can upload an image as a full-screen background:
- Image is scaled down for performance (
max 1920x1680).
- Saved in
localStorage as JPEG Data URL.
- Image is styled as
cover with center alignment.
🎨 Dynamic Theme Palette
Based on the uploaded background image:
- Extracts an average color from the image.
- Generates primary, secondary, header, and contrast text colors.
- Applies them via CSS variables:
--primaryColor
--secondaryColor
--onPrimaryColor
--headerColor
Saved to localStorage for persistence.
🖱 Drag & Drop
Widgets can be freely moved around using the drag_indicator icon.
- Position is absolute within the widget container.
- Draggable functionality is initialized on widget creation.
🗑 Remove Widget
Each widget has a delete icon to remove it from the DOM.
💾 Persistence
The following are saved and restored automatically:
backgroundImage (JPEG data URL)themePalette (JSON with color values)
📡 Weather API
Uses OpenWeatherMap to fetch real-time weather.
API Key Required: Replace API_KEY in JavaScript with your own.
🧠Planned Features (Future)
- Live battery status via
navigator.getBattery()
- Widget saving/loading state
- Resizable widgets
- Custom widget types / plugins