Skip to content

HMI

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History
 
 

HMI

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
US
US
 
 
code_gen
code_gen
 
 
fonts
fonts
 
 
n2t-out-visual
n2t-out-visual
 
 
n2t-out
n2t-out
 
 
README.md
README.md
 
 
icon-cheatsheet.html
icon-cheatsheet.html
 
 
nspanel.HMI
nspanel.HMI
 
 
nspanel.tft
nspanel.tft
 
 

README.md

NSPanel Lovelace UI

The HMI Project of this project is only used to display stuff, navigation ist mostly up to the backend. This allows to be way more flexible.

Messages to the Panel can be send through the Command CustomSend, which is implemented in the berry driver. You can issue this command through MQTT by sending messages to the cmnd/XXX/CustomSend Topic. Messages from the Panel are send to the tele/XXX/RESULT Topic, encoded in json {"CustomRecv":"message_from_screen"}

Table of contents

Startup

On startup the panel will send {"CustomRecv":"event,startup,39,eu"} every few seconds.

event,   #Every message from the screen will start with `event`
startup, #Startup Event
39,      #Current HMI Project Version
eu       #Current HMI Project Model

You can answer this message in many different ways, but in general the goal is to navigate way from the startup page. In the following example we will navigate to the screensaver page.

Send the following messages to the CustomSend Topic. (You can also send them on tasmota console for testing)

Some preperation before we are acually navigating away:

Send this every minute: time~18:17

Send this at least once at midnight: date~Donnerstag, 25. August 2022

Send theese message once after receiving the startup event (parameters will be explained later):

timeout~20

dimmode~10~100~6371

Navigate from the startup page to the screensaver, by sending this command to the CustomSend Topic.

pageType~screensaver

After sending this command you should already see the time and date. To also show weather data you have to send them with weatherUpdate, but we will skip this for now.

Exit Screensaver

Touching the panel on the screensaver will result in this MQTT Message on the result topic:

event,buttonPress2,screensaver,bExit,1

You can answer this by sending theese commands to the CustomSend Topic.

pageType~cardEntities

entityUpd~test~~button~navigate.prev~<~65535~~~button~navigate.next~>~65535~~~~light~light.schreibtischlampe~X~17299~Schreibtischlampe~0~text~sensor.server_energy_power~Y~17299~Server ENERGY Power~155 W~shutter~cover.rolladenfenster_cover_1~Z~17299~Fenster Eingang~A|B|C|disable|enable|enable~switch~switch.bad~D~63142~Bad~1

Messages to Nextion Display

General Commands, implemented on all pages

set brightness of screensaver and active-brightness:

dimmode~0~100 - (screen off)

dimmode~100~100 - (screen on with full brightness)

set current time:

time~22:26

set current date:

date~Di 24. Februar

set screensaver timeout (set time in sec~ max 65):

timeout~15 - timeout after 15 seconds

timeout~0 - disable screensaver

change the page type:

pageType~pageStartup

pageType~cardEntities

pageType~cardThermo

pageType~cardMedia

pageType~popupLight~Schreibtischlampe~light.schreibtischlampe

pageType~popupNotify

pageType~screensaver

screensaver page

Parameter Number Category Location Type Field Addional Information
0 instruction instruction weatherupdate
1 Main Icon Entity Definition type ignored
2 intNameEntity ignored
3 icon
4 iconColor
5 displayName ignored
6 optionalValue
7 First Forecast Icon Entity Definition type ignored
8 intNameEntity ignored
9 icon
10 iconColor
11 displayName
12 optionalValue
13 Second Forecast Icon Entity Definition type ignored
14 intNameEntity ignored
15 icon
16 iconColor
17 displayName
18 optionalValue
19 Third Forecast Icon Entity Definition type ignored
20 intNameEntity ignored
21 icon
22 iconColor
23 displayName
24 optionalValue
25 Fourth Forecast Icon Entity Definition type ignored
26 intNameEntity ignored
27 icon
28 iconColor
29 displayName
30 optionalValue
31 Alternative Layout Icon Entity Definition type ignored
32 intNameEntity ignored
33 icon
34 iconColor
35 displayName ignored
36 optionalValue

color~background~tTime~timeAMPM~tDate~tMainText~tForecast1~tForecast2~tForecast3~tForecast4~tForecast1Val~tForecast2Val~tForecast3Val~tForecast4Val~bar~tMainTextAlt2~tTimeAdd

Parameter Number Category Location Type Field Addional Information
0 instruction color
1 background
2 tTime
3 timeAMPM
4 tDate
5 tMainText
6 tForecast1
7 tForecast2
8 tForecast3
9 tForecast4
10 tForecast1Val
11 tForecast2Val
12 tForecast3Val
13 tForecast4Val
14 bar
15 tMainTextAlt2
16 tTimeAdd

notify~heading~text

statusUpdate~icon1~icon1Color~icon2~icon2~icon2color~icon1font~icon2font

cardEntities Page

Structure (Category): entityUpd~title~[navigation]~[entity_information] Example with 4 Entities:

entityUpd~LightTest~button~navigate.prev~<~65535~~~button~navigate.next~>~65535~~~light~light.bed_light~A~17299~Bed Light~0~light~light.ceiling_lights~B~52231~Ceiling Lights~1~switch~switch.ac~C~17299~AC~0~switch~switch.decorative_lights~D~65222~Decorative Lights~1

Possible entities on cardEntities/cardGrid:

~light~light.entityName~1~17299~Light1~0

~shutter~cover.entityName~0~17299~Shutter2~iconUp|iconStop|iconDown

~delete~~~~~

~text~sensor.entityName~3~17299~Temperature~content

~button~button.entityName~3~17299~bt-name~bt-text

~switch~switch.entityName~4~17299~Switch1~0

~number~input_number.entityName~4~17299~Number123~value|min|max

~input_sel~input_select.entityName~3~17299~sel-name~sel-text

Number Category Location Type Field Addional Information
0 instruction instruction entityUpd
1 title title title title
2 Navigation Upper Left Icon Entity Definition type (ignored)¹
3 intNameEntity
4 icon
5 iconColor
6 displayName ignored
7 optionalValue ignored
8 Upper Right Icon Entity Definition type (ignored)¹
9 intNameEntity
10 icon
11 iconColor
12 displayName ignored
13 optionalValue ignored
14 Entities First Entity Entity Definition type
15 intNameEntity
16 icon
17 iconColor
18 displayName
19 optionalValue
20 Second Entity Entity Definition type
21 intNameEntity
22 icon
23 iconColor
24 displayName
25 optionalValue
26 Thrid Entity Entity Definition type
27 intNameEntity
28 icon
29 iconColor
30 displayName
31 optionalValue
32 Forth Entiry Entity Definition type
33 intNameEntity
34 icon
35 iconColor
36 displayName
37 optionalValue
38 Fifth Entiy (US Portrait   Version) Entity Definition type
39 intNameEntity
40 icon
41 iconColor
42 displayName
43 optionalValue
44 Sixth Entiy (US Portrait   Version) Entity Definition type
45 intNameEntity
46 icon
47 iconColor
48 displayName
49 optionalValue

cardGrid Page

cardGrid is using the exact same messageformat like cardEntities does. The only difference is, it ignores the information supplied in optionalValue, because it isn't needed for cardGrid.

Parameter   Number Category Location Type Field Addional Information
0 instruction instruction entityUpd
1 title title title title
2 Navigation Upper Left Icon Entity Definition type (ignored)¹
3 intNameEntity
4 icon
5 iconColor
6 displayName ignored
7 optionalValue ignored
8 Upper Right Icon Entity Definition type (ignored)¹
9 intNameEntity
10 icon
11 iconColor
12 displayName ignored
13 optionalValue ignored
14 Entities First Entity Entity Definition type
15 intNameEntity
16 icon
17 iconColor
18 displayName
19 optionalValue ignored
20 Second Entity Entity Definition type
21 intNameEntity
22 icon
23 iconColor
24 displayName
25 optionalValue ignored
26 Thrid Entity Entity Definition type
27 intNameEntity
28 icon
29 iconColor
30 displayName
31 optionalValue ignored
32 Forth Entiry Entity Definition type
33 intNameEntity
34 icon
35 iconColor
36 displayName
37 optionalValue ignored
38 Fifth Entiy (US Portrait   Version) Entity Definition type
39 intNameEntity
40 icon
41 iconColor
42 displayName
43 optionalValue ignored
44 Sixth Entiy (US Portrait   Version) Entity Definition type
45 intNameEntity
46 icon
47 iconColor
48 displayName
49 optionalValue ignored

cardMedia

Example without icons in bottom row: entityUpd~Kitchen~button~navigation.up~U~65535~~~delete~~~~~~media_player.kitchen~I'm a Hurricane~~Wellmess~~100~A~64704~B~media_pl~media_player.kitchen~C~17299~Kitchen~

Parameter   Number Category Location Type Field Addional Information
0 instruction instruction entityUpd
1 title title title title
2 Navigation Upper Left Icon Entity Definition type (ignored)¹
3 intNameEntity
4 icon
5 iconColor
6 displayName ignored
7 optionalValue ignored
8 Upper Right Icon Entity Definition type (ignored)¹
9 intNameEntity
10 icon
11 iconColor
12 displayName ignored
13 optionalValue ignored
14 cardMedia specific cardMedia specific intNameEntity
15 1st text row title
16 titleColor
17 2nd text row author
18 authorColor
19 slider volume 0-100
20 icon middle playPauseIcon
21 icon right side onOffBtn "disable" or color
22 icon left side iconShuffle "disable" or icon
23 Entities upper left corner media   icon Entity Definition type
24 intNameEntity
25 icon
26 iconColor
27 displayName only used for popups
28 optionalValue ignored
29 First Entity Entity Definition type
30 intNameEntity
31 icon
32 iconColor
33 displayName only used for popups
34 optionalValue ignored
35 Second Entity Entity Definition type
36 intNameEntity
37 icon
38 iconColor
39 displayName only used for popups
40 optionalValue ignored
41 Thrid Entity Entity Definition type
42 intNameEntity
43 icon
44 iconColor
45 displayName only used for popups
46 optionalValue ignored
47 Forth Entiry Entity Definition type
48 intNameEntity
49 icon
50 iconColor
51 displayName only used for popups
52 optionalValue ignored
53 Fifth Entiy Entity Definition type
54 intNameEntity
55 icon
56 iconColor
57 displayName only used for popups
58 optionalValue ignored

cardThermo

Serial Protocol of cardThermo is about to change; table will be completed later

Parameter Number Location Type Field Addional Information
0 instruction entityUpd
1 title title title
2 Upper Left Icon Entity Definition type (ignored)¹
3 intNameEntity
4 icon
5 iconColor
6 displayName ignored
7 optionalValue ignored
8 Upper Right Icon Entity Definition type (ignored)¹
9 intNameEntity
10 icon
11 iconColor
12 displayName ignored
13 optionalValue ignored
14 intNameEntity
15 2nd text box currentTemp
16 target temperature dstTemp multiplied by 10
17 Text 4th Box Left Side status
18 Min Temp minTemp multiplied by 10
19 Max Temp maxTemp multiplied by 10
20 Temperature Steps tempStep multiplied by 10
21 bottom hvac_action 1 Hvac Action icon
22 iconColorActive
23 buttonState
24 intName
25 bottom hvac_action 2 Hvac Action icon
26 iconColorActive
27 buttonState
28 intName
29 bottom hvac_action 3 Hvac Action icon
30 iconColorActive
31 buttonState
32 intName
33 bottom hvac_action 4 Hvac Action icon
34 iconColorActive
35 buttonState
36 intName
37 bottom hvac_action 5 Hvac Action icon
38 iconColorActive
39 buttonState
40 intName
41 bottom hvac_action 6 Hvac Action icon
42 iconColorActive
43 buttonState
44 intName
45 bottom hvac_action 7 Hvac Action icon
46 iconColorActive
47 buttonState
48 intName
49 bottom hvac_action 8 Hvac Action icon
50 iconColorActive
51 buttonState
52 intName
53 Currently Label 1th Text Box tCurTempLbl
54 State Label 3th Text Box tStateLbl
55 tALbl deprecated; ignored
56 Temperature Unit (Celcius/Farhenheit) tCF
57 Second Destination Tempature (Heat/Cool) second temp ; multiplied by 10
58 additonal detail button to open another page btDetail "1" to hide

cardAlarm

Parameter Number Category Location Type Field Addional Information
0 instruction instruction entityUpd
1 title title title title
2 Navigation Upper Left Icon Entity Definition type (ignored)¹
3 intNameEntity
4 icon
5 iconColor
6 displayName ignored
7 optionalValue ignored
8 Upper Right Icon Entity Definition type (ignored)¹
9 intNameEntity
10 icon
11 iconColor
12 displayName ignored
13 optionalValue ignored
14 cardAlarm specific card intNameEntity intNameEntity
15 1st button right side displayName
16 intId
17 2nd button right side displayName
18 intId
19 3rd button right side displayName
20 intId
21 4th button right side displayName
22 intId
23 icon next to code display icon
24 iconColor
25 numpad numpadStatus "disable" or "enable"
26 flashing of icon next to code flashing status "enable" or "disable"
27 button bottom left corner icon
28 iconColor
29 intNameEntity

cardQR

Example: entityUpd~Guest Wifi~button~navigate.prev~<~65535~~~button~navigate.next~>~65535~~~WIFI:S:test_ssid;T:WPA;P:test_pw;;~text~iText.test_ssid~���~17299~Name~test_ssid~text~iText.test_pw~���~17299~Password~test_pw

Parameter   Number Category Location Type Field Addional Information
0 instruction instruction entityUpd
1 title title title intNameEntity
2 Navigation Upper Left Icon Entity Definition type (ignored)¹
3 intNameEntity
4 icon
5 iconColor
6 displayName ignored
7 optionalValue ignored
8 Upper Right Icon Entity Definition type (ignored)¹
9 intNameEntity
10 icon
11 iconColor
12 displayName ignored
13 optionalValue ignored
14 cardQR specific qrcode text
15 Entities 1st Entity Entity Definition type
16 intNameEntity
17 icon
18 iconColor
19 displayName
20 optionalValue
21 2nd Entity Entity Definition type
22 intNameEntity
23 icon
24 iconColor
25 displayName
26 optionalValue

cardPower

entityUpd~PowerTest~x~navUp~A~65535~~~delete~~~~~~text~sensor.power_consumption~B~17299~Power consumption~100W~1~text~sensor.power_consumption~C~17299~Power consumption~100W~1~text~sensor.today_energy~D~17299~Total energy 1~5836.0kWh~0~delete~~~~~~0~text~sensor.today_energy~E~17299~Total energy 1~5836.0kWh~-30~delete~~~~~~0~text~sensor.today_energy~F~65504~Total energy 1~5836.0kWh~90~text~sensor.today_energy~G~17299~Total energy 1~5836.0kWh~10

Parameter Number Location Type Field Addional Information
0 instruction entityUpd
1 title title title
2 Upper Left Icon Entity Definition type (ignored)¹
3 intNameEntity
4 icon
5 iconColor
6 displayName ignored
7 optionalValue ignored
8 Upper Right Icon Entity Definition type (ignored)¹
9 intNameEntity
10 icon
11 iconColor
12 displayName ignored
13 optionalValue ignored
14 Home Icon / Value below Home Icon Entity Definition type ignored
15 intNameEntity ignored
16 icon
17 iconColor
18 displayName
19 optionalValue
20 speed ignored
21 Value above Home Icon Entity Definition type ignored
22 intNameEntity ignored
23 icon ignored
24 iconColor ignored
25 displayName ignored
26 optionalValue
27 speed ignored
28 1st Item Upper Left Entity Definition type ignored
29 intNameEntity ignored
30 icon
31 iconColor
32 displayName
33 optionalValue
34 speed numbers (between -120 and 120)
35 2nd Item Middle Left Entity Definition type ignored
36 intNameEntity ignored
37 icon
38 iconColor
39 displayName
40 optionalValue
41 speed numbers (between -120 and 120)
42 3rd Item Bottom Left Entity Definition type ignored
43 intNameEntity ignored
44 icon
45 iconColor
46 displayName
47 optionalValue
48 speed numbers (between -120 and 120)
49 4th Item Upper Right Entity Definition type ignored
50 intNameEntity ignored
51 icon
52 iconColor
53 displayName
54 optionalValue
55 speed numbers (between -120 and 120)
56 5th Item Middle Right Entity Definition type ignored
57 intNameEntity ignored
58 icon
59 iconColor
60 displayName
61 optionalValue
62 speed numbers (between -120 and 120)
63 6th Item Bottom Right Entity Definition type ignored
64 intNameEntity ignored
65 icon
66 iconColor
67 displayName
68 optionalValue
69 speed numbers (between -120 and 120)

cardChart Page

entityUpd~heading~navigation~color~yAxisLabel~yAxisTick:[yAxisTick]*[~value[:xAxisLabel]?]*

entityUpd~Chart Demo~~button~navigate.prev~<~65535~~~button~navigate.next~>~65535~~~~6666~Gas [kWh]~20:40:60:80:100~10~7^2:00~7~6^4:00~6~7^6:00~0~7^8:00~5~1^10:00~1~10^12:00~5~6^14:00~8

popupLight Page

entityUpdateDetail~entityName~*ignored*~*iconColor*~*buttonState*~*sliderBrightnessPos*~*sliderColorTempPos*~*colorMode*~*color_translation*~*color_temp_translation*~*brightness_translation*

entityUpdateDetail~1~17299~1~100~78~enable

entityUpdateDetail~1~17299~1~100~disable

popupShutter Page

entityUpdateDetail~entityName~*sliderPos*~2ndrow~textPosition~icon1~iconUp~iconStop~iconDown~iconUpStatus~iconStopStatus~iconDownStatus~textTilt~iconTiltLeft~iconTiltStop~iconTiltRight~iconTiltLeftStatus~iconTiltStopStatus~iconTiltLeftStatus~tiltPos

entityUpdateDetail~1~77

popupNotify Page

entityUpdateDetail~*internalName*~*tHeading*~*tHeadingColor*~*b1*~*tB1Color*~*b2*~*tB2Color*~*tText*~*tTextColor*~*sleepTimeout*~*font*~*alt_icon*~*altIconColor*

exitPopup

popupThermo Page

entityUpdateDetail~{entity_id}~{icon_id}~{icon_color}~{heading}~{mode}~mode1~mode1?mode2?mode3~{heading}~{mode}~mode1~mode1?mode2?mode3~{heading}~{mode}~mode1~mode1?mode2?mode3~

popupInSel Page (input_select detail page)

entityUpdateDetail2~*entity_id*~~*icon_color*~*input_sel*~*state*~*options*

options are ? seperated

popupTimer

editable is 0 or 1

action fields are in the answer on the button press

in case action is empty the button will be hidden

entityUpdateDetail~{entity_id}~~{icon_color}~{entity_id}~{min_remaining}~{sec_remaining}~{editable}~{action1}~{action2}~{action3}~{label1}~{label2}~{label3}

Messages from Nextion Display

event,buttonPress2,pageName,bNext

event,buttonPress2,pageName,bPrev

event,buttonPress2,pageName,bExit,number_of_taps

event,buttonPress2,pageName,sleepReached

startup page

event,startup,version,model

screensaver page

event,buttonPress2,screensaver,exit - Touch Event on Screensaver

event,screensaverOpen - Screensaver has opened

cardEntities Page

event,*eventName*,*entityName*,*actionName*,*optionalValue*

event,buttonPress2,internalNameEntity,up

event,buttonPress2,internalNameEntity,down

event,buttonPress2,internalNameEntity,stop

event,buttonPress2,internalNameEntity,OnOff,1

event,buttonPress2,internalNameEntity,button

popupLight Page

event,pageOpenDetail,popupLight,internalNameEntity

event,buttonPress2,internalNameEntity,OnOff,1

event,buttonPress2,internalNameEntity,brightnessSlider,50

event,buttonPress2,internalNameEntity,colorTempSlider,50

event,buttonPress2,internalNameEntity,colorWheel,x|y|wh

popupShutter Page

event,pageOpenDetail,popupShutter,internalNameEntity

event,buttonPress2,internalNameEntity,positionSlider,50

popupNotify Page

event,buttonPress2,*internalName*,notifyAction,yes

event,buttonPress2,*internalName*,notifyAction,no

cardThermo Page

event,buttonPress2,*entityName*,tempUpd,*temperature*

event,buttonPress2,*entityName*,hvac_action,*hvac_action*

cardMedia Page

event,buttonPress2,internalNameEntity,media-back

event,buttonPress2,internalNameEntity,media-pause

event,buttonPress2,internalNameEntity,media-next

event,buttonPress2,internalNameEntity,volumeSlider,75

cardAlarm Page

event,buttonPress2,internalNameEntity,actionName,code

Custom Protocol

55 BB [payload length] [payload length] [payload] [crc] [crc]

Payload length contains the number of bytes of the payload.

CRC is "CRC-16 (MODBUS) Big Endian" calculated over the whole message

This protocol does not try to implement broken JSON Commands with a specified type (lol). Instead the commands are plain text commands with parameters.

Example for valid Message

This message has to be generated for the Message "1337" (1337 is not a valid command~ this is just an example)

55 BB  04 00  31 33 33 37  5F 5B