From ff5d8290e04c91b554bfe46d8814398bd0137e0e Mon Sep 17 00:00:00 2001
From: joBr99 <29555657+joBr99@users.noreply.github.com>
Date: Fri, 11 Mar 2022 20:27:32 +0100
Subject: [PATCH] Update README.md

---
 HMI/README.md | 687 ++++++++++++++++----------------------------------
 1 file changed, 214 insertions(+), 473 deletions(-)

diff --git a/HMI/README.md b/HMI/README.md
index a2be2fd8..8bade4ed 100644
--- a/HMI/README.md
+++ b/HMI/README.md
@@ -1,473 +1,214 @@
-// data available
-if(usize>1)
-{
-  bufferPos=0
-  while(bufferPos<usize)
-  {
-    // check for 0x55 0xBB - Command Init Secuence
-    if(u[bufferPos]==187&&u[bufferPos-1]==85)
-    {
-      //remove garbage at the start of the buffer if there's any to free buffer for command
-      if(u[bufferPos]!=1)
-      {
-        udelete bufferPos-1
-      }
-      //instruction is now aligned with buffer, because we deleted garbage before instrcution
-      //get length after init sequence (check if there are more than to bytes in buffer)
-      if(2<usize)
-      {
-        // check if serial buffer has reached the announced length
-        payloadLength=u[2]
-        // we are only checking payload length so we have to skip first 3 bytes (init+payload length) (-1 because of < instead of <=)
-        payloadLength+=2
-        // payload length does also not contain crc, so we are adding another 2 bytes for crc
-        payloadLength+=2
-        if(payloadLength<usize)
-        {
-          // calculate crc
-          crcrest 1,0xFFFF
-          // u[2] contains payload legth at 3rd pos in buffer, we are calculating crc from 3rd pos with number of bytes from payload length
-          //crcputu 3,u[2]
-          // u[2] cotnains payload length, we are calculating a crc over the whole message, so we have to add 3 to the length from u[2]
-          crcputu 0,u[2]+3
-          // get recived crc to be able to compare it
-          ucopy recvCrc,u[2]+3,2,0
-          // compare crc with recived value
-          if(crcval==recvCrc)
-          {
-            // crc is okay
-            // here is the location where acual code should be
-            // write command to variable strCommand
-            ucopy strCommand.txt,3,u[2],0
-            // write instruction to tInstuction (debug output, but used as variable here, ui elements will be disabled by default)
-            spstr strCommand.txt,tInstruction.txt,",",0
-            if(tInstruction.txt=="entityUpdHeading")
-            {
-              spstr strCommand.txt,tHeading.txt,",",1
-            }
-            if(tInstruction.txt=="entityUpd")
-            {
-              // command format: entityUpd,id,icon,name,type,optionalValue
-              // write id to tId (debug output, but used as variable here, ui elements will be disabled by default)
-              spstr strCommand.txt,tId.txt,",",1
-              // id 1
-              if(tId.txt=="1")
-              {
-                // get Type
-                spstr strCommand.txt,type1.txt,",",2
-                // get internal name
-                spstr strCommand.txt,entn1.txt,",",3
-                if(type1.txt=="delete")
-                {
-                  vis bUp1,0
-                  vis bStop1,0
-                  vis bDown1,0
-                  vis btOnOff1,0
-                  vis tEntity1,0
-                  vis tIcon1,0
-                  vis bText1,0
-                }else
-                {
-                  // change icon
-                  spstr strCommand.txt,tTmp.txt,",",4
-                  covx tTmp.txt,sys0,0,0
-                  substr pageIcons.tIcons.txt,tIcon1.txt,sys0,1
-                  vis tIcon1,1
-                  // set name
-                  spstr strCommand.txt,tEntity1.txt,",",5
-                  vis tEntity1,1
-                }
-                if(type1.txt=="shutter")
-                {
-                  vis bUp1,1
-                  vis bStop1,1
-                  vis bDown1,1
-                  vis btOnOff1,0
-                  vis bText1,0
-                }
-                if(type1.txt=="light")
-                {
-                  vis bUp1,0
-                  vis bStop1,0
-                  vis bDown1,0
-                  vis btOnOff1,1
-                  vis bText1,0
-                  // get Button State (optional Value)
-                  spstr strCommand.txt,tTmp.txt,",",6
-                  covx tTmp.txt,sys0,0,0
-                  btOnOff1.val=sys0
-                }
-                if(type1.txt=="switch")
-                {
-                  vis bUp1,0
-                  vis bStop1,0
-                  vis bDown1,0
-                  vis btOnOff1,1
-                  vis bText1,0
-                  // get Button State (optional Value)
-                  spstr strCommand.txt,tTmp.txt,",",6
-                  covx tTmp.txt,sys0,0,0
-                  btOnOff1.val=sys0
-                }
-                if(type1.txt=="text")
-                {
-                  vis bUp1,0
-                  vis bStop1,0
-                  vis bDown1,0
-                  vis btOnOff1,0
-                  vis bText1,1
-                  tsw bText1,0
-                  bText1.pco=65535
-                  bText1.pco2=65535
-                  // get Text (optional Value)
-                  spstr strCommand.txt,bText1.txt,",",6
-                }
-                if(type1.txt=="button")
-                {
-                  vis bUp1,0
-                  vis bStop1,0
-                  vis bDown1,0
-                  vis btOnOff1,0
-                  vis bText1,1
-                  tsw bText1,1
-                  bText1.pco=1374
-                  bText1.pco2=1374
-                  // get Text (optional Value)
-                  spstr strCommand.txt,bText1.txt,",",6
-                }
-              }
-              // id 2
-              if(tId.txt=="2")
-              {
-                // get Type
-                spstr strCommand.txt,type2.txt,",",2
-                // get internal name
-                spstr strCommand.txt,entn2.txt,",",3
-                if(type2.txt=="delete")
-                {
-                  vis bUp2,0
-                  vis bStop2,0
-                  vis bDown2,0
-                  vis btOnOff2,0
-                  vis tEntity2,0
-                  vis tIcon2,0
-                  vis bText2,0
-                }else
-                {
-                  //change icon
-                  spstr strCommand.txt,tTmp.txt,",",4
-                  covx tTmp.txt,sys0,0,0
-                  substr pageIcons.tIcons.txt,tIcon2.txt,sys0,1
-                  vis tIcon2,1
-                  // set name
-                  spstr strCommand.txt,tEntity2.txt,",",5
-                  vis tEntity2,1
-                }
-                if(type2.txt=="shutter")
-                {
-                  vis bUp2,1
-                  vis bStop2,1
-                  vis bDown2,1
-                  vis btOnOff2,0
-                  vis bText2,0
-                }
-                if(type2.txt=="light")
-                {
-                  vis bUp2,0
-                  vis bStop2,0
-                  vis bDown2,0
-                  vis btOnOff2,1
-                  vis bText2,0
-                  // get Button State (optional Value)
-                  spstr strCommand.txt,tTmp.txt,",",6
-                  covx tTmp.txt,sys0,0,0
-                  btOnOff2.val=sys0
-                }
-                if(type2.txt=="switch")
-                {
-                  vis bUp2,0
-                  vis bStop2,0
-                  vis bDown2,0
-                  vis btOnOff2,1
-                  vis bText2,0
-                  // get Button State (optional Value)
-                  spstr strCommand.txt,tTmp.txt,",",6
-                  covx tTmp.txt,sys0,0,0
-                  btOnOff2.val=sys0
-                }
-                if(type2.txt=="text")
-                {
-                  vis bUp2,0
-                  vis bStop2,0
-                  vis bDown2,0
-                  vis btOnOff2,0
-                  vis bText2,1
-                  tsw bText2,0
-                  bText2.pco=65535
-                  bText2.pco2=65535
-                  // get Text (optional Value)
-                  spstr strCommand.txt,bText2.txt,",",6
-                }
-                if(type2.txt=="button")
-                {
-                  vis bUp2,0
-                  vis bStop2,0
-                  vis bDown2,0
-                  vis btOnOff2,0
-                  vis bText2,1
-                  tsw bText2,1
-                  bText2.pco=1374
-                  bText2.pco2=1374
-                  // get Text (optional Value)
-                  spstr strCommand.txt,bText2.txt,",",6
-                }
-              }
-              // id 3
-              if(tId.txt=="3")
-              {
-                // get Type
-                spstr strCommand.txt,type3.txt,",",2
-                // get internal name
-                spstr strCommand.txt,entn3.txt,",",3
-                if(type3.txt=="delete")
-                {
-                  vis bUp3,0
-                  vis bStop3,0
-                  vis bDown3,0
-                  vis btOnOff3,0
-                  vis tEntity3,0
-                  vis tIcon3,0
-                  vis bText3,0
-                }else
-                {
-                  //change icon
-                  spstr strCommand.txt,tTmp.txt,",",4
-                  covx tTmp.txt,sys0,0,0
-                  substr pageIcons.tIcons.txt,tIcon3.txt,sys0,1
-                  vis tIcon3,1
-                  // set name
-                  spstr strCommand.txt,tEntity3.txt,",",5
-                  vis tEntity3,1
-                }
-                if(type3.txt=="shutter")
-                {
-                  vis bUp3,1
-                  vis bStop3,1
-                  vis bDown3,1
-                  vis btOnOff3,0
-                  vis bText3,0
-                }
-                if(type3.txt=="light")
-                {
-                  vis bUp3,0
-                  vis bStop3,0
-                  vis bDown3,0
-                  vis bText3,0
-                  vis btOnOff3,1
-                  // get Button State (optional Value)
-                  spstr strCommand.txt,tTmp.txt,",",6
-                  covx tTmp.txt,sys0,0,0
-                  btOnOff3.val=sys0
-                }
-                if(type3.txt=="switch")
-                {
-                  vis bUp3,0
-                  vis bStop3,0
-                  vis bDown3,0
-                  vis bText3,0
-                  vis btOnOff3,1
-                  // get Button State (optional Value)
-                  spstr strCommand.txt,tTmp.txt,",",6
-                  covx tTmp.txt,sys0,0,0
-                  btOnOff3.val=sys0
-                }
-                if(type3.txt=="text")
-                {
-                  vis bUp3,0
-                  vis bStop3,0
-                  vis bDown3,0
-                  vis btOnOff3,0
-                  vis bText3,1
-                  tsw bText3,0
-                  bText3.pco=65535
-                  bText3.pco2=65535
-                  // get Text (optional Value)
-                  spstr strCommand.txt,bText3.txt,",",6
-                }
-                if(type3.txt=="button")
-                {
-                  vis bUp3,0
-                  vis bStop3,0
-                  vis bDown3,0
-                  vis btOnOff3,0
-                  vis bText3,1
-                  tsw bText3,1
-                  bText3.pco=1374
-                  bText3.pco2=1374
-                  // get Text (optional Value)
-                  spstr strCommand.txt,bText3.txt,",",6
-                }
-              }
-              // id 2
-              if(tId.txt=="4")
-              {
-                // get Type
-                spstr strCommand.txt,type4.txt,",",2
-                // get internal name
-                spstr strCommand.txt,entn4.txt,",",3
-                if(type4.txt=="delete")
-                {
-                  vis bUp4,0
-                  vis bStop4,0
-                  vis bDown4,0
-                  vis btOnOff4,0
-                  vis tEntity4,0
-                  vis tIcon4,0
-                  vis bText4,0
-                }else
-                {
-                  //change icon
-                  spstr strCommand.txt,tTmp.txt,",",4
-                  covx tTmp.txt,sys0,0,0
-                  substr pageIcons.tIcons.txt,tIcon4.txt,sys0,1
-                  vis tIcon4,1
-                  // set name
-                  spstr strCommand.txt,tEntity4.txt,",",5
-                  vis tEntity4,1
-                }
-                if(type4.txt=="shutter")
-                {
-                  vis bUp4,1
-                  vis bStop4,1
-                  vis bDown4,1
-                  vis btOnOff4,0
-                  vis bText4,0
-                }
-                if(type4.txt=="light")
-                {
-                  vis bUp4,0
-                  vis bStop4,0
-                  vis bDown4,0
-                  vis bText4,0
-                  vis btOnOff4,1
-                  // get Button State (optional Value)
-                  spstr strCommand.txt,tTmp.txt,",",6
-                  covx tTmp.txt,sys0,0,0
-                  btOnOff4.val=sys0
-                }
-                if(type4.txt=="switch")
-                {
-                  vis bUp4,0
-                  vis bStop4,0
-                  vis bDown4,0
-                  vis bText4,0
-                  vis btOnOff4,1
-                  // get Button State (optional Value)
-                  spstr strCommand.txt,tTmp.txt,",",6
-                  covx tTmp.txt,sys0,0,0
-                  btOnOff4.val=sys0
-                }
-                if(type4.txt=="text")
-                {
-                  vis bUp4,0
-                  vis bStop4,0
-                  vis bDown4,0
-                  vis btOnOff4,0
-                  vis bText4,1
-                  tsw bText4,0
-                  bText4.pco=65535
-                  bText4.pco2=65535
-                  // get Text (optional Value)
-                  spstr strCommand.txt,bText4.txt,",",6
-                }
-                if(type4.txt=="button")
-                {
-                  vis bUp4,0
-                  vis bStop4,0
-                  vis bDown4,0
-                  vis btOnOff4,0
-                  vis bText4,1
-                  tsw bText4,1
-                  bText4.pco=1374
-                  bText4.pco2=1374
-                  // get Text (optional Value)
-                  spstr strCommand.txt,bText4.txt,",",6
-                }
-              }
-            }
-            if(tInstruction.txt=="pageType")
-            {
-              //command format pageType,specialPageName
-              //write name of speical page to tId
-              spstr strCommand.txt,tId.txt,",",1
-              //save second arg if there's one
-              spstr strCommand.txt,tTmp.txt,",",2
-              if(tId.txt=="cardEntities")
-              {
-                //yay, we are already on the correct page
-              }else
-              {
-                //we are going to exit this page with this command, so we have to clear the buffer, so we are not getting into a stupid loop ...
-                udelete u[2]+3
-                bufferPos=0
-              }
-              if(tId.txt=="popupLight")
-              {
-                pageIcons.tTmp1.txt=tTmp.txt
-                page popupLight
-              }
-              if(tId.txt=="cardThermo")
-              {
-                page cardThermo
-              }
-              if(tId.txt=="cardMedia")
-              {
-                page cardMedia
-              }
-              if(tId.txt=="pageStartup")
-              {
-                page pageStartup
-              }
-            }
-            if(tInstruction.txt=="time")
-            {
-              // get set time to global variable
-              spstr strCommand.txt,screensaver.vaTime.txt,",",1
-            }
-            if(tInstruction.txt=="date")
-            {
-              // get set date to global variable
-              spstr strCommand.txt,screensaver.vaDate.txt,"?",1
-            }
-            if(tInstruction.txt=="dimmode")
-            {
-              // get value
-              spstr strCommand.txt,tTmp.txt,",",1
-              covx tTmp.txt,dimValue,0,0
-            }
-            if(tInstruction.txt=="timeout")
-            {
-              // set timeout to global var
-              spstr strCommand.txt,tTmp.txt,",",1
-              covx tTmp.txt,sleepTimeout,0,0
-            }
-            // end of user code
-            udelete u[2]+3
-            bufferPos=0
-          }
-        }
-      }
-    }
-    // next character
-    bufferPos++
-  }
-  if(bufferPos==usize)
-  {
-    // copy whole buffer to t1.txt, for debugging
-    //ucopy t2.txt,0,usize,0
-    // ucopy n2.val,0,usize,0
-    // clear whole buffer
-    //code_c
-    //bufferPos=0
-  }
-}
+# NSPanel Lovelance UI
+
+The general idea is that the Nextion Display cycles though a page counter and the esp32 tells the display what to do.
+If you are changeing the page the nextion display will send and event to the esp32 and it has to answer with the messages, that will update the current page with it's desired components. This enables easy changes, without touching the HMI Project.
+
+# Message Flow
+
+HomeAssistant / NodeRed -- MQTT -- Tasmota -- Nextion Screen
+
+See the following picture to get an Idea for the messages send and recived from the screen during cycling though pages.
+
+![message_flow](../doc-pics/message-flow.png)
+
+
+# Custom Protocol
+```
+55 BB [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  31 33 33 37  5F 5B
+```
+## Messages to Nextion Display
+
+The following message should be implemented on all pages
+
+wake screen:
+
+wake
+
+set brightness of screensaver:
+
+dimmode,0 - (screen off)
+dimmode,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 ms limited from 50 to 65535:
+
+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
+
+### screensaver page
+
+weatherUpdate,? tMainIcon? tMainText? tMRIcon? tMR? tForecast1? tF1Icon? tForecast1Val? tForecast2? tF2Icon? tForecast2Val
+
+weatherUpdate,?0?2,3 C?0?0 mm?Mi?0?9,3 C?Do?0?11,5 C
+
+### cardEntities Page
+
+The following message can be used to update the content on the cardEntities Page
+
+entityUpdHeading,heading1337
+
+entityUpd,*id*,*type*,*internalNameEntity*,*iconId*,*displayNameEntity*,*optionalValue*
+
+entityUpd,1,light,light.entityName,1,Light1,0
+
+entityUpd,2,shutter,cover.entityName,0,Shutter2
+
+entityUpd,3,delete
+
+entityUpd,4,text,sensor.entityName,3,Temperature,content
+
+entityUpd,4,button,button.entityName,3,bt-name,bt-text
+
+entityUpd,1,switch,switch.entityName,4,Switch1,0
+
+### popupLight Page
+
+entityUpdateDetail,*buttonState*,*sliderBrightnessPos*,*sliderColorTempPos*
+
+entityUpdateDetail,1,100,78
+
+entityUpdateDetail,1,100,disable
+
+### popupShutter Page
+
+entityUpdateDetail,*ignored*,*sliderPos*
+
+entityUpdateDetail,1,77
+
+### cardThermo Page
+
+entityUpd,*internalNameEntiy*,*heading*,*currentTemp*,*destTemp*,*status*,*minTemp*,*maxTemp*,*stepTemp*
+
+### cardMedia Page
+
+entityUpd,|*internalNameEntiy*|*heading*|*icon*|*title*|*author*|*volume*|*playpauseicon*
+
+## Messages from Nextion Display
+
+### startup page
+
+event,startup,version
+
+### screensaver page
+
+event,screensaverOpen
+
+### cardEntities Page
+
+event,*eventName*,*PageNumber*,*PageHeading*,*entityName*,*buttonId*,*actionName*,*optionalValue*
+
+event,pageOpen,0
+
+event,buttonPress,1,tHeading,internalNameEntity,1,up
+
+event,buttonPress,1,tHeading,internalNameEntity,1,down
+
+event,buttonPress,1,tHeading,internalNameEntity,1,stop
+
+event,buttonPress,1,tHeading,internalNameEntity,1,OnOff,1
+
+event,buttonPress,1,tHeading,internalNameEntity,1,button
+
+### popupLight Page
+
+event,pageOpenDetail,popupLight,internalNameEntity
+
+event,buttonPress,D,nameEntity,internalNameEntity,1,OnOff,1
+
+event,buttonPress,D,nameEntity,internalNameEntity,1,brightnessSlider,50
+
+event,buttonPress,D,nameEntity,internalNameEntity,1,colorTempSlider,50
+
+### popupShutter Page
+
+event,pageOpenDetail,popupShutter,internalNameEntity
+
+event,buttonPress,D,nameEntity,internalNameEntity,1,positionSlider,50
+
+### cardThermo Page
+
+event,pageOpen,0
+
+event,tempUpd,*pageNumber*,*entityName*,*temperature*
+
+### cardMedia Page
+
+event,buttonPress,1,tHeading,internalNameEntity,1,media-back
+
+event,buttonPress,1,tHeading,internalNameEntity,1,media-pause
+
+event,buttonPress,1,tHeading,internalNameEntity,1,media-next
+
+event,buttonPress,1,tHeading,internalNameEntity,1,volumeSlider,75
+
+# Icons IDs
+
+ID | Icon
+-- | ----
+0  | ![window-open](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/window-open.svg)
+1  | ![lightbulb](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/lightbulb.svg)  
+2  | ![thermometer](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/thermometer.svg)
+3  | ![gesture-tap-button](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/gesture-tap-button.svg)
+4  | ![flash](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/flash.svg)
+5  | ![music](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/music.svg)
+6  | ![check-circle-outline](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/check-circle-outline.svg)
+7  | ![close-circle-outline](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/close-circle-outline.svg)
+8  | ![pause](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/pause.svg)
+9  | ![play](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/play.svg)
+10  | ![palette](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/palette.svg)
+11  | ![alert-circle-outline](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/alert-circle-outline.svg)
+12  | ![weather-cloudy](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/weather-cloudy.svg)
+13  | ![weather-fog](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/weather-fog.svg)
+14  | ![weather-hail](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/weather-hail.svg)
+15  | ![weather-lightning](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/weather-lightning.svg)
+16  | ![weather-lightning-rainy](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/weather-lightning-rainy.svg)
+17  | ![weather-night](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/weather-night.svg)
+18  | ![weather-partly-cloudy](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/weather-partly-cloudy.svg)
+19  | ![weather-pouring](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/weather-pouring.svg)
+20  | ![weather-rainy](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/weather-rainy.svg)
+21  | ![weather-snowy](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/weather-snowy.svg)
+22  | ![weather-snowy-rainy](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/weather-snowy-rainy.svg)
+23  | ![weather-sunny](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/weather-sunny.svg)
+24  | ![weather-windy](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/weather-windy.svg)
+25  | ![weather-windy-variant](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/weather-windy-variant.svg)
+26  | ![water-percent](https://raw.githubusercontent.com/Templarian/MaterialDesign-SVG/0aeb4d612644d80d9d1fe242f705f362985de5dc/svg/water-percent.svg)
+
+# Design Guidelines for Nextion HMI Project
+
+Background Color is 
+- RGB565: 6371 [18e3] (HEX: #1C1C1C, RGB: 28,28,28)
+
+Source for Icons is the Material Design Font, used by HASPone
+https://github.com/HASwitchPlate/HASPone