What do you think it is possible to make theme like this ? https://gvs-deutschland.de/produkte/knx/knx-smart-touch-v40/
2 Likes
Thank you kindly.
I have two nspanel and in both I have the same problem.
Only when I set 21 degrees(not 19, 20, 22, etc… only 21) by nspanl screen(by thermostat page), then I receive by mqtt a wrong json:
MQT: tele/nspanel2/RESULT = {"NSPanel":{"ATCMode":0,"ATCExpect0":21}B}}
But for other values(for example 22) i get a good json:
MQT: tele/nspanel2/RESULT = {"NSPanel":{"ATCMode":0,"ATCExpect0":22}}
How can I fix?
Anyone got any thoughts in minimising TFT file sizes? I’m exporting png files from Photoshop and I reckon they’re as small as I can get them. I tried exporting as jpg but even though the file size is a lot smaller the Nextion editor shows them as bigger.
Fonts and pictures definitely seem to be the two primary suspects in my limited with an NSPanel.
Don’t import image files separately. Create your design in figma for example. Create two image files of your design, active and inactive and use crop image on buttons or touch areas.
This solves font problem as well.
But, but, I want different sized fonts for different pages/etc…
Ok, I need some help here.
This is what I am working on using picq in the nextion editor to image crop a region to do the below
I have been some what randomly finding the regions to crop as I am cropping on angles I need to do multiple crops changing the coordinate 1-2px at a time.
Like this (any idea how to work out the coordinates more eastly to the apply)
n0.val++
if(n0.val==1)
{
picq 179,225,40,50,38
picq 179,224,40,50,38
picq 180,223,30,30,38
picq 180,222,30,30,38
picq 181,221,30,30,38
picq 181,220,30,30,38
picq 182,219,30,30,38
picq 182,218,30,30,38
picq 183,217,30,30,38
picq 183,216,30,30,38
picq 184,215,30,30,38
picq 184,215,30,30,38
picq 185,213,30,30,38
picq 185,212,30,30,38
picq 186,211,30,30,38
picq 187,210,30,30,38
picq 187,209,30,30,38
picq 188,208,30,30,38
picq 188,207,30,30,38
picq 189,206,30,30,38
picq 189,206,30,30,38
picq 190,207,30,30,38
picq 190,207,30,30,38
picq 191,208,30,30,38
picq 191,208,30,30,38
}
if(n0.val==2)
{
picq 165,210,40,50,38
picq 166,209,40,50,38
picq 167,208,30,30,38
picq 168,207,30,30,38
picq 169,206,30,30,38
picq 170,205,30,30,38
picq 171,204,30,30,38
picq 172,203,30,30,38
picq 173,202,30,30,38
picq 174,201,30,30,38
picq 175,200,30,30,38
picq 176,199,30,30,38
picq 177,198,30,30,38
picq 178,197,30,30,38
picq 179,196,30,30,38
picq 180,195,30,30,38
picq 181,194,30,30,38
}
if(n0.val==3)
{
picq 152,189,40,50,38
picq 153,189,40,50,38
picq 154,188,30,30,38
picq 155,188,30,30,38
picq 156,187,30,30,38
picq 157,187,30,30,38
picq 158,186,30,30,38
picq 159,186,30,30,38
picq 160,185,30,30,38
picq 161,185,30,30,38
picq 162,184,30,30,38
picq 163,184,30,30,38
picq 164,183,30,30,38
picq 165,183,30,30,38
picq 166,182,30,30,38
picq 167,182,30,30,38
picq 168,182,30,30,38
}
if(n0.val==4)
{
picq 146,165,40,50,38
picq 147,165,40,50,38
picq 148,165,30,30,38
picq 149,165,30,30,38
picq 150,164,30,30,38
picq 151,164,30,30,38
picq 152,164,30,30,38
picq 153,164,30,30,38
picq 154,163,30,30,38
picq 155,163,30,30,38
picq 156,163,30,30,38
picq 157,163,30,30,38
picq 158,162,30,30,38
picq 159,162,30,30,38
picq 160,162,30,30,38
picq 161,162,30,30,38
picq 162,161,30,30,38
}
if(n0.val==5)
{
picq 145,142,40,50,38
picq 147,142,40,50,38
picq 147,142,30,30,38
picq 147,142,30,30,38
picq 147,142,30,30,38
picq 147,143,30,30,38
picq 147,143,30,30,38
picq 147,143,30,30,38
picq 147,143,30,30,38
picq 147,143,30,30,38
picq 147,143,30,30,38
picq 147,143,30,30,38
picq 147,144,30,30,38
picq 147,144,30,30,38
picq 147,144,30,30,38
picq 147,144,30,30,38
picq 147,144,30,30,38
}
if(n0.val==6)
{
picq 146,117,05,50,38
picq 147,118,05,50,38
picq 148,118,05,30,38
picq 149,118,05,30,38
picq 150,119,05,30,38
picq 151,119,05,30,38
picq 152,119,05,30,38
picq 153,120,05,30,38
picq 154,120,05,30,38
picq 155,120,05,30,38
picq 156,121,05,30,38
picq 157,121,05,30,38
picq 158,121,05,30,38
picq 159,122,05,30,38
picq 160,122,05,30,38
picq 161,122,05,30,38
picq 162,123,05,30,38
picq 163,123,05,30,38
picq 164,123,05,30,38
picq 165,124,05,30,38
picq 166,124,05,30,38
picq 167,124,05,30,38
picq 168,124,05,30,38
picq 169,124,05,30,38
picq 170,124,05,30,38
}
if(n0.val==7)
{
picq 154,94,10,30,38
picq 164,96,2,30,38
picq 166,98,2,30,38
picq 168,100,2,30,38
picq 170,102,2,30,38
picq 172,104,2,30,38
picq 174,106,2,30,38
picq 176,108,2,30,38
picq 178,110,2,30,38
picq 178,112,2,30,38
picq 178,114,2,30,38
}
if(n0.val==8)
{
picq 164,80,10,30,38
picq 174,82,2,30,38
picq 176,84,2,30,38
picq 178,86,2,30,38
picq 180,88,2,30,38
picq 182,90,2,30,38
picq 184,92,2,30,38
picq 186,94,2,30,38
picq 188,96,2,30,38
picq 190,98,2,30,38
picq 192,100,2,30,38
}
if(n0.val==9)
{
picq 164,68,38,30,38
picq 202,68,2,30,38
picq 203,70,2,30,38
picq 204,72,2,30,38
picq 205,74,2,30,38
picq 206,76,2,30,38
picq 207,78,2,30,38
picq 208,80,2,30,38
picq 209,82,2,30,38
picq 210,84,2,30,38
picq 211,86,2,30,38
}
if(n0.val==10)
{
picq 194,61,30,38,38
picq 194,62,30,38,38
picq 194,63,30,38,38
picq 194,64,30,38,38
picq 195,65,30,38,38
picq 195,66,30,38,38
picq 195,67,30,38,38
picq 195,68,30,38,38
picq 195,69,30,38,38
picq 195,70,30,38,38
picq 195,71,30,38,38
picq 196,72,30,38,38
picq 196,73,30,38,38
picq 196,74,30,38,38
picq 196,75,30,38,38
picq 197,76,30,38,38
picq 197,77,30,38,38
picq 197,78,30,38,38
picq 197,79,30,38,38
picq 197,80,30,38,38
}
if(n0.val==11)
{
picq 218,60,30,38,38
picq 218,60,36,1,38
picq 218,61,36,1,38
picq 218,62,36,1,38
picq 218,63,36,1,38
picq 218,64,36,1,38
picq 218,65,35,1,38
picq 218,66,35,1,38
picq 218,66,35,1,38
picq 218,67,35,1,38
picq 218,68,34,1,38
picq 218,69,34,1,38
picq 218,70,34,1,38
picq 218,71,34,1,38
picq 218,72,34,1,38
picq 218,73,34,1,38
picq 218,74,33,1,38
picq 218,75,33,1,38
picq 218,76,33,1,38
picq 218,77,32,1,38
picq 218,78,32,1,38
picq 218,79,32,1,38
picq 218,80,33,1,38
}
Thanks in advance
Yes, that’s what I’m doing. I have, for example, loungeoff.png and loungeon.png.
PNG is about 140k. JPG is about 20k. But in Nextion, the JPG shows as bigger than the png
1 Like
If size is an issue - remember we have 16M to play with, so:
- Create a minimal HMI file
- Flash the minimal HMI file
- Flash your large HMI file
The accepted picture types to import are *.jpg, *.png, non animated *.gif and *.bmp files. When importing a picture, the picture is converted into the 565 16 bit color format used by Nextion
As a test I reduced a PNG to 8bit then imported that (1/3 of the size of original PNG) the file still converts to a same sized 565 file.
Go Figure?
1 Like
Ok so I went the easy route ( but large HMI size route)
I created a large area for the Picq comnand. So instead of drawing the steps. I use the below code to change the whole thermostat wheel image on each change as the value of the number box increases
Code for + below
n0.val++
if(n0.val==0)
{
picq 141,56,200,200,23
}
if(n0.val==1)
{
picq 141,56,200,200,24
}
if(n0.val==2)
{
picq 141,56,200,200,25
}
if(n0.val==3)
{
picq 141,56,200,200,26
}
if(n0.val==4)
{
picq 141,56,200,200,27
}
if(n0.val==5)
{
picq 141,56,200,200,28
}
if(n0.val==6)
{
picq 141,56,200,200,29
}
if(n0.val==7)
{
picq 141,56,200,200,30
}
if(n0.val==8)
{
picq 141,56,200,200,31
}
if(n0.val==9)
{
picq 141,56,200,200,32
}
if(n0.val==10)
{
picq 141,56,200,200,33
}
if(n0.val==11)
{
picq 141,56,200,200,34
}
if(n0.val==12)
{
picq 141,56,200,200,35
}
if(n0.val==13)
{
picq 141,56,200,200,36
}
if(n0.val==14)
{
picq 141,56,200,200,37
}
if(n0.val==15)
{
picq 141,56,200,200,38
}
if(n0.val==16)
{
picq 141,56,200,200,39
}
if(n0.val==17)
{
picq 141,56,200,200,40
}
if(n0.val==18)
{
picq 141,56,200,200,41
}
if(n0.val==19)
{
picq 141,56,200,200,42
}
if(n0.val==20)
{
picq 141,56,200,200,43
}
if(n0.val==21)
{
picq 141,56,200,200,44
}
Code for - below
n0.val--
if(n0.val==0)
{
picq 141,56,200,200,23
}
if(n0.val==1)
{
picq 141,56,200,200,24
}
if(n0.val==2)
{
picq 141,56,200,200,25
}
if(n0.val==3)
{
picq 141,56,200,200,26
}
if(n0.val==4)
{
picq 141,56,200,200,27
}
if(n0.val==5)
{
picq 141,56,200,200,28
}
if(n0.val==6)
{
picq 141,56,200,200,29
}
if(n0.val==7)
{
picq 141,56,200,200,30
}
if(n0.val==8)
{
picq 141,56,200,200,31
}
if(n0.val==9)
{
picq 141,56,200,200,32
}
if(n0.val==10)
{
picq 141,56,200,200,33
}
if(n0.val==11)
{
picq 141,56,200,200,34
}
if(n0.val==12)
{
picq 141,56,200,200,35
}
if(n0.val==13)
{
picq 141,56,200,200,36
}
if(n0.val==14)
{
picq 141,56,200,200,37
}
if(n0.val==15)
{
picq 141,56,200,200,38
}
if(n0.val==16)
{
picq 141,56,200,200,39
}
if(n0.val==17)
{
picq 141,56,200,200,40
}
if(n0.val==18)
{
picq 141,56,200,200,41
}
if(n0.val==19)
{
picq 141,56,200,200,42
}
if(n0.val==20)
{
picq 141,56,200,200,43
}
if(n0.val==21)
{
picq 141,56,200,200,44
}
Still like to know if anyone knows a easy way to workout/define the picq areas easily for non square crops?
3 Likes
Yes, this is what I found so I’ll stick with PNGs. I’ve got almost all my images in their now and my TFT is weighing in at about 1.8mb.
I have updated my github repository with my latest changes. Please feel free to use any part of them for your work. 
- Swipe support! Navigation between pages is now done by swiping the screen left or right. Code prepared for up and down as well. Based on blakadder’s method. A page “Swipe”, id 12, is available to adjust the threshold values and to make the code easily transferable to your custom design. The actual threshold values are stored as global variables in the Program.s-tab in the Nextion Editor.
- The screen will automatically naviagte back to the Home screen if left untouched for a set period of time. Can be disabled from HA, but that also disables dimdown and screensaver.
- Dimdown and screen saver. The screen will dim down after a set period of time if left untouched (30 s). After 30 more seconds (1 min in total), the “screensaver” will go on. This makes the screen all black and turns off the backlight. The function was inspired by masto’s setup, but slightly modified to make GUI development easier and to better work with multiple pages.
- Multiple Lights pages that can be enabled and disabled from ESPHome - even dynamically during runtime if needed.
- QR page added to display QR codes. The page works, but the service is broken. Need to figure out a way to pass the actual data to it. What already works is to manually go to the QR page and to manually set the QR data. The corresponding QR image is then generated.
- Fixed so that the weather symbol for sunny after sunset is clear-night
- Added Home.text1 and Home.text2 with a small font to the lower right corner of the Home page. I use them to display the fuel/charging state and ranges of our cars.
10 Likes
I’m pushing almost 9MB 
Hi @marcfager.
This is great work that adds lots of enhancements.
One Question - how can you stop the page from changing when using a slider?
If I have a slider on a page and change its value (swipe across on the slider) the swipe gesture is picked up and changes the page
Update:
I think I solved it, but not sure if there is a more elegant way
What I did was
-
create a variable called “Dim_moved”
-
create a timer called “dimslide” with “tim” set to 1000 ms
with timer event
if(Dim_moved.val==1)
{
Dim_moved.val=0
}
then on the slider create Touch Press Event
Dim_moved.val=1
dimslide.en=1 // Enable timer to calc down for slider time out
and Touch Move
dim=h0.val # the slider action
Dim_moved.val=1
dimslide.en=1 // Enable timer to calc down for slider time out
and also changed the “tc0” TouchCap to include “&&Dim_moved.val==0” in the if statement
// Touch has ended, x
if(tch0==0&&Dim_moved.val==0)
{
swipec=swipex-tch2
// From Left to Right
if(swipec>swipedx)
{
page Lights
}
}
So now it checks if the dim slider has moved in the last 1 sec and then wont initiate the slide action.
Then if I swipe any other part of the screen after 1 second it will change the page
Any better way you can think of doing it?
I was exceeding 16mb at one point until I realised my fonts were encoded as ISO which made them between 3 and 6mb each. Soon fixed that one!
1 Like
Ok, I now have a weird one. I set up some lights last night and it all seemed to be working fine. I then did something. Not sure what. I think I just recreated my TFT file as I’d left the wake button on the bottom layer.
Now, my buttons and devices are all out of whack.
I have this for example:
- platform: nextion
name: $device_name Sideboard
page_id: 1
component_id: 13
on_press:
then:
- homeassistant.service:
service: light.toggle
data:
entity_id: light.sideboard_lamp
When I look at my Nextion editor, 13 is definitely the button for the lamp on the sideboard. But when I tap it on the display it switches the light with id 12 on and off. All the buttons on that page do the same thing. But they were definitely working.
I’ve tried installing the config file again. I’ve tried uploading the TFT file again. If I change them all to one less than the ID in Nextion, they all work.
Controls IDs depends on Z position (above or below). Controls drown one by one from lower IDs to
higher on top of each other. So bottom components ID is lower. When you bring something on bottom (using dedicated button) it may shift all other IDs up by one.
1 Like
You’re absolutely right but it doesn’t seem to change immediately in Nextion editor.
Maybe you looking in a wrong field? There is a component property “name”, for example “b4”, and there is its ID, which has continuous numbering through all types of components. The name of the object does not change from manipulations, its ID changes.
