Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kivy-garden/frostedglass
FrostedGlass is a widget with translucent frosted glass effect, that creates a context with the background behind it.
https://github.com/kivy-garden/frostedglass
acrylic blur frosted-effect frosted-glass glass glassmorphism kivy overlay python
Last synced: 3 months ago
JSON representation
FrostedGlass is a widget with translucent frosted glass effect, that creates a context with the background behind it.
- Host: GitHub
- URL: https://github.com/kivy-garden/frostedglass
- Owner: kivy-garden
- License: mit
- Created: 2021-10-03T13:48:18.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-28T16:09:08.000Z (over 1 year ago)
- Last Synced: 2024-10-01T08:24:06.105Z (3 months ago)
- Topics: acrylic, blur, frosted-effect, frosted-glass, glass, glassmorphism, kivy, overlay, python
- Language: Python
- Homepage:
- Size: 12.5 MB
- Stars: 42
- Watchers: 6
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# FrostedGlass
**FrostedGlass** is a widget with translucent frosted glass effect, that
creates a context with the background behind it.The effect created is based on the widget/layout passed in as the background.
You can control the blur size, saturation, luminosity, overlay color, noise
opacity, border radius and the outline (color and width).![](https://github.com/kivy-garden/frostedglass/blob/main/doc/images/example_1.png?raw=true)
![](https://github.com/kivy-garden/frostedglass/blob/main/doc/images/example_2.gif?raw=true)[![Github Build Status](https://github.com/kivy-garden/frostedglass/workflows/Garden%20flower/badge.svg)](https://github.com/kivy-garden/frostedglass/actions)
[![PyPI](https://img.shields.io/pypi/v/kivy_garden.frostedglass?)](https://pypi.org/project/kivy-garden.frostedglass/)## Install
pip install kivy_garden.frostedglass## Import
**_python_ import:**
from kivy_garden.frostedglass import FrostedGlass
**or _kvlang_ import:**
#: import FrostedGlass kivy_garden.frostedglass
## Usage
*FrostedGlass* will apply the effect to the background passed to it. Make sure you assign the correct id of the widget/layout that is behind *FrostedGlass* to the `background` property.
## Example:
```kvlang
Image:
id: bg_image
pos_hint: {'center_x': 0.5, 'center_y': 0.5}
source: 'kivy_logo.png'FrostedGlass:
pos_hint: {'center_x': 0.5, 'center_y': 0.5}
size_hint: (None, None)
size: (180, 130)
background: bg_image
blur_size: 20
saturation: 1.0
luminosity: 1.5
overlay_color: "#FFB9008C"
noise_opacity: 0.15
border_radius: dp(0), dp(100), dp(0), dp(100)
outline_color: "#000000"
outline_width: 1.2
Label:
text: 'FrostedGlass'
pos_hint: {'center_x': 0.5, 'center_y': 0.5}
bold: True
color: 'black'
font_size: dp(25)
```
## FrostedGlass Showcase:
**You can find the source code in the 🔷[examples folder](https://github.com/kivy-garden/frostedglass/tree/main/examples)🔷**
https://user-images.githubusercontent.com/73297572/214139558-f995ac2c-77bb-4952-a82b-212e2f31d65f.mp4
## Overview of *FrostedGlass* creation process
To reach the final result of the **FrostedGlass** widget, the steps described in the image below are followed:
![](https://github.com/kivy-garden/frostedglass/blob/main/doc/images/FrostedgGlass_overview.png?raw=true)
## Features
FrostedGlass is efficient and makes internal optimizations to deliver the best performance while maintaining the quality of the effect, regardless of implementation, for all platforms supported by Kivy.
Overview:
- Automatic effect update, with auto bind to background properties.
- Updates effect only when needed. The effect update will only occur when some background or FrostedGlass property requires the update.
- Avoid unnecessary computation of the effect. If any FrostedGlass widget is not visible, it will not be updated.
- Full control over FrostedGlass properties. The widget is not limited to the frosted glass effect, it can be used simply as an option to achieve gaussian blur of some "background".
## Guidelines
The FrostedGlass widget is designed to update the effect whenever there is a change to its properties or background properties that requires an effect update, to keep the effect in sync with the background.
But if it doesn't, you can call the `update_effect()` method manually to update the effect.
If calling the `update_effect()` method did not update the effect, you may need to call the `refresh_effect()` method.
---
## **API**
background
> Target widget/layout that will be used as a background to **FrostedGlass**.
> The recomended way to pass the widget is through the widget/layout **id**.
>
> `background` is defaults to `None`.
blur_size
> Size of the gaussian blur aplied to the background.
❗️*Note: Do not pass relative values such as **dp** or **sp**. **FrostedGlass** already
manages this automatically, according to the device's screen density.*> `blur_size` is defaults to `25`.
saturation
> Saturation boost that will be aplied to the background.
>
> `saturation` is defaults to `1.2`.
luminosity
> Luminosity boost that will be aplied to the background.
>
> `luminosity` is defaults to `1.3`.
overlay_color
> Color/tint overlay that will be aplied over the background.
>
> `overlay_color` is defaults to `[0.5, 0.5, 0.5, 0.35]`.
noise_opacity
> Opacity of the noise texture layer.
>
> `noise_opacity` is a defaults to `0.08`.
border_radius
> Specifies the radius used for the rounded corners clockwise:
> top-left, top-right, bottom-right, bottom-left.
>
> `border_radius` is defaults to `[0, 0, 0, 0]`.
outline_color
> Outline color.
>
> `outline_color` is defaults to `[1, 1, 1, 1]`.
outline_width
> Outline width.
>
> `outline_width` is defaults to `1`.
update_effect()
> Updates the effect only once with each method call.
❗️*Note: Use this method to update the effect only if **FrostedGlass** doesn't update automatically.*
refresh_effect()
> Updates the effect only once with each method call. Sould be used as an alternative, when `update_effect()` doesn't update the effect totally.
❗️*Note: Use this method to update the effect only if **FrostedGlass** doesn't update automatically and `update_effect()` was not enough to update the effect.*
---
CI
--Every push or pull request run the [GitHub Action](https://github.com/kivy-garden/flower/actions) CI.
It tests the code on various OS and also generates wheels that can be released on PyPI upon a
tag. Docs are also generated and uploaded to the repo as well as artifacts of the CI.Contributing
--------------Check out our [contribution guide](CONTRIBUTING.md) and feel free to improve the FrostedGlass flower.
🔴 If you have a bug or an idea, create a report to help us improve or suggest an idea for this project by opening an issue
🔴 Every contribution is welcome and appreciated!!!
License
---------This software is released under the terms of the MIT License.
Please see the [LICENSE.txt](LICENSE.txt) file.