Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add own background image upload #3596

Merged
merged 2 commits into from
Jan 14, 2024
Merged

Add own background image upload #3596

merged 2 commits into from
Jan 14, 2024

Conversation

w00000dy
Copy link
Contributor

This adds the feature to upload your own background image.
If you select an image, it will be base64 encoded and then set as the background url.
grafik

Limitations:
The maximum size of the image depends on the maximum size of your browser's local storage. Usually browsers can store up to 5 MiB of local storage. If you try to use an image that is too large, you will get this error:
grafik

@blazoncek
Copy link
Collaborator

I'll share this image from @dosipod as I am not sure storing image in browser local storage is good or not, but I can't find the justification for increased file/code size.
I hope he doesn't object.

image

@w00000dy
Copy link
Contributor Author

The code size increased by 176 Bytes.
Before:

RAM:   [==        ]  22.2% (used 72784 bytes from 327680 bytes)
Flash: [========  ]  82.4% (used 1295721 bytes from 1572864 bytes)

Now:

RAM:   [==        ]  22.2% (used 72784 bytes from 327680 bytes)
Flash: [========  ]  82.4% (used 1295897 bytes from 1572864 bytes)

In the picture, the image was stored on the ESP’s filesystem. Given the limited space available on the ESP’s filesystem, it can only accommodate very small images. Therefore, I believe that utilizing localStorage for storing the image would be a more efficient approach compared to the ESP’s filesystem.

As far as I’m aware, there are no significant drawbacks to storing an image in localStorage. The only potential issue is that the wledUiCfg JSON file might become quite large. However, if you need to inspect this JSON file, you can simply remove the background image beforehand. This should make the file more manageable.

@blazoncek
Copy link
Collaborator

blazoncek commented Jan 10, 2024

In last 30 days we added almost 12kB into UI alone.
10.12.2023
const uint16_t PAGE_index_L = 32764;
10.1.2023
const uint16_t PAGE_index_L = 44491;

@w00000dy
Copy link
Contributor Author

We moved simple UI to index page, this increased the size a lot.
On the other hand we have saved a lot by eliminating duplicate code in simple UI.
But I'll leave it up to you whether we merge this PR or not. 😁

@blazoncek
Copy link
Collaborator

True, and iro and color picker too.

Copy link
Member

@Aircoookie Aircoookie left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I really like this as it allows for custom backgrounds without utilizing very limited ESP resources or having to host and download the image from some external server!
Merging.

@Aircoookie Aircoookie merged commit 3f21b4a into wled:0_15 Jan 14, 2024
12 checks passed
@w00000dy
Copy link
Contributor Author

Thanks! Another point that came to my mind: Also, when using WLED in AP mode, you can't download the image from an external server because you don't have Internet access. So now you can also set your own background image in AP mode.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants