POST THE CODE- NOT AN IMAGE.
If you post the code using code tags, we can try to reproduce your problem.
And perhaps you will need to upload tree.png
{"page":0,"comment":"Page 0"}
{"id":7,"obj":"btn","action":{"down": "page prev"},"x":30,"y":390,"w":120,"h":60,"radius":20,"bg_color":"#2C3E50","text":"\uE141","text_color":"#FFFFFF"}
{"id":8,"obj":"btn","action":{"down": "page 1"},"x":180,"y":390,"w":120,"h":60,"radius":20,"bg_color":"#2C3E50","text":"\uE2DC","text_color":"#FFFFFF"}
{"id":9,"obj":"btn","action":{"down": "page next"},"x":330,"y":390,"w":120,"h":60,"radius":20,"bg_color":"#2C3E50","text":"\uE142","text_color":"#FFFFFF"}
{"page":1,"id":0,"prev":3}
{"page":3,"id":0,"next":1}
{"page":1,"comment":"Page 1"}
{"id":1,"obj":"btn","x":30,"y":30,"w":180,"h":90,"radius":20.5}
{"id":2,"obj":"btn","x":270,"y":30,"w":180,"h":90,"radius":20.5}
{"id":3,"obj":"btn","x":30,"y":150,"w":180,"h":90,"radius":20.5}
{"id":4,"obj":"btn","x":270,"y":150,"w":180,"h":90,"radius":20.5}
{"id":5,"obj":"btn","x":30,"y":270,"w":180,"h":90,"radius":20.5}
{"id":6,"obj":"btn","x":270,"y":270,"w":180,"h":90,"radius":20.5}
{"page":2,"comment":"Page 2"}
{"id":1,"obj":"slider","x":60,"y":150,"w":390,"h":60,"min":0,"max":280}
{"id":2,"obj":"slider","x":60,"y":300,"w":390,"h":60,"min":0,"max":280}
{"id":8,"obj":"label","x":90,"y":90,"w":300,"h":60,"align":"center","text":"LIVING ROOM"}
{"id":9,"obj":"label","x":90,"y":240,"w":300,"h":60,"align":"center","text":"DINING ROOM"}
{"page":3,"id":1,"obj":"img","src":"L:/tree.png","auto_size":1,"w":50}
1 Like
I dont know if the forum has a method of file transfers. All I could do with your image is to copy it as a JPG then use Photoshop to convert it to PNG. If there is something wrong with your source image, I would need the actual file. You can use any of these services for transferring the actual file:
- Google Drive - Offers 15 GB of free storage.
- Dropbox Basic - Provides 2 GB of free storage.
- OneDrive - Comes with 5 GB of free storage.
- WeTransfer - Allows you to send files up to 2 GB for free.
- Jumpshare - Offers 2 GB of free storage and allows you to share files and screenshots.
- MediaFire - Provides 10 GB of free storage.
- pCloud - Offers 10 GB of free storage.
- Zippyshare - Allows you to upload and share files for free.
- DropSend - Provides 4 GB of free storage.
- file.io - Super simple file sharing with no sign-up required.
Your configuration is good, with one modification. I don’t know what resolution that is your original PNG file, but my photoshopped image is 360x360 pixels, so I changed the w: parameter to 360. Here is the modified configuration and the result.
{
"page":9,
"id": 1,
"obj":"img",
"src":"L:/tree.png",
"auto_size":1,
"w":150
}
1 Like
you are correct it is 360x360 pixels and it is a png file. I Copied your code and changed the page to 3 for mine and it didnt work. could it be because i have buttons on page 0 i dont know if it would effect it.
google drive for png
Yes it could be page 0 giving it a problem. Try without the page 0 stuff, then add them back in.
this is the code i was trying and it didnt work
{“page”:1,“comment”:“Page 1”}
{“id”: 1,“obj”:“img”,“src”:“L:/tree.png”,“auto_size”:1,“w”:360,“h”:360}
No. page 0 is properly formatted.
Your PNG file is the problem. It looks like someone just renamed a JPG file as PNG. It won’t work. Mediainfo says that this is a JPEG file.
1 Like
yep,
tree.png: JPEG image data, JFIF standard 1.01, aspect ratio, density 1x1, segment length 16, progressive, precision 8, 360x360, components 3
Rename it to tree.jpg then use the standard convert utility
mv tree.png tree.jpg
convert tree.jpg tree.png
Standard where? Imagemagick?
If the OP doesn’t have Photoshop, there is Photopea.com- a photoshop-similar editor. Free if you don’t mind ads.
Yes
Never used it- now I will. Thanks.
It sounds more straightforward than running Photoshop and exporting the png.
Sure is!!
Has anyone tried this gadget?
4 Inch ESP32-S3 IPS Touch Screen 86 Box Central Control Panel Monitor WiFi BT RS485 Chip Optional Temperature Humidity Sensor
It also includes temperature, humidity and modbus. I ordered one, can’t wait to receive it.
also try irfranview…great for batch altering of piccies!
yes, I have one here, just starting to figure out how to scale ‘stuff’ properly…most of the demo code and things you find are 320x240 or similar, not 480x480.
my advice, practice with the screen looking a little strange,
once you figure out the automations, integratinos etc, then spend time making it look awesome!
Hello everyone!
I am looking for a new project for the holidays and found this screen.
Will this one work? And in case what Nightly Development Build should I go for when it screen and the holiday arrives?
or:
BR.
Hi lads. I have this device for a few weeks now, and I went to ESPhome. I tried OpenHASP first, but I didn’t like it’s limitations, and the native integration with HA is a must for me. Not to mention that the performance of the display is way better with EPShome than OpenHASP. So, this is what I have now, still improving day by day. At the moment it’s a massive ~2500 lines in ESPhome.
Here is a demo video, and I’m sharing the code if someone looking for inspirations. The background pics and weather icons are might be under licence, that’s the reason why I’m not sharing them, so find your own.
1 Like
That looks awesome Imre!
And despite the 2500 lines of code, by the look of the video, operations seem to be smooth/fluent. If there were any lags, it would become difficult / annoying to operate it on a daily basis. I looked at your code too, it seems that you’ve cracked the nut by getting it both the display and touchscreen properly functional. Great job!
I’ve one lying around for somewhat of a year now, but did not manage to get it properly functioning. With your code, I think I can get it tuned up to my needs !
Thanks!!!
Hi Roger.
I have done few changes since my post, and still I’ll have to improve/finish few things, but yes, my code could be a good starting point. Be aware, some parts are not working as expected (yet): blind controls, alarm page (the code not even finished yet).
Of course, if you have any idea, or implementation, I’d like to see 