Update application note for ESP-NOW bridge to include data models.

This commit is contained in:
Zhang Wei
2023-09-05 09:46:20 +08:00
committed by Hrishikesh Dhayagude
parent 1c45b08917
commit 8a4907d55d
4 changed files with 554 additions and 1 deletions
+4
View File
@@ -6,6 +6,10 @@ In the ESP-NOW part, it acts as a responder whereas a ESP-NOW switch is an initi
In the Matter part, it creates a Color Temperature Light device and an aggregator device using the ESP Matter data model. When binding with an ESP-NOW switch is complete, it also creates a dynamic OnOff Switch device that works like a normal Matter switch. When unbind from the ESP-NOW switch, the dynamic switch device is removed.
This diagram gives a simplistic view of the data models involved in the interaction.
![data model](./docs/esp-now-bridge-datamodel.drawio.svg)
See the [docs](https://docs.espressif.com/projects/esp-matter/en/main/esp32/developing.html) for more information about building and flashing the firmware.
## 1. Additional Environment Setup
@@ -0,0 +1,401 @@
<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="931px" height="443px" viewBox="-0.5 -0.5 931 443" content="&lt;mxfile&gt;&lt;diagram id=&quot;VM5iPjwFEODIstKqTkxk&quot; name=&quot;Page-1&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;">
<defs/>
<g>
<rect x="220" y="1" width="430" height="440" rx="64.5" ry="64.5" fill="#00cc00" stroke="#00cc00" stroke-width="3" pointer-events="all"/>
<rect x="244" y="41" width="180" height="380" rx="27" ry="27" fill="none" stroke="#cc99ff" stroke-width="3" stroke-dasharray="9 9" pointer-events="all"/>
<rect x="444" y="41" width="180" height="380" rx="27" ry="27" fill="none" stroke="#99ffff" stroke-width="3" stroke-dasharray="9 9" pointer-events="all"/>
<rect x="450" y="71" width="170" height="130" rx="19.5" ry="19.5" fill="#ccffff" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 136px; margin-left: 451px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
<b>
Endpoint
</b>
1
<br/>
<b>
Device Type
</b>
: Color Temperature Light
<br/>
<br/>
<br/>
<br/>
</div>
</div>
</div>
</foreignObject>
<text x="535" y="140" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Endpoint 1...
</text>
</switch>
</g>
<rect x="450" y="211" width="170" height="40" rx="6" ry="6" fill="#ccffff" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 231px; margin-left: 451px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
<b>
Endpoint
</b>
2
<br/>
<b>
Device Type
</b>
: Aggregator
</div>
</div>
</div>
</foreignObject>
<text x="535" y="235" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Endpoint 2...
</text>
</switch>
</g>
<rect x="450" y="261" width="170" height="140" rx="21" ry="21" fill="#ccffff" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 331px; margin-left: 451px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
<b>
Dynamic Endpoint
</b>
n
<br/>
<b>
Device Type
</b>
:
<br/>
- Bridged Node
<br/>
- On/Off Light Switch
<br/>
<br/>
<br/>
<br/>
</div>
</div>
</div>
</foreignObject>
<text x="535" y="335" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Dynamic Endpoint n...
</text>
</switch>
</g>
<rect x="460" y="341" width="150" height="50" rx="7.5" ry="7.5" fill="#ff9999" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 148px; height: 1px; padding-top: 366px; margin-left: 461px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
<b>
Cluster Client
</b>
: On/Off
<br/>
<b>
Commands
</b>
: On, Off, Toggle
</div>
</div>
</div>
</foreignObject>
<text x="535" y="370" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Cluster Client: On/Off...
</text>
</switch>
</g>
<path d="M 400 141 L 341.37 141" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 336.12 141 L 343.12 137.5 L 341.37 141 L 343.12 144.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<rect x="270" y="81" width="130" height="120" rx="18" ry="18" fill="#cc99ff" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 141px; margin-left: 271px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
ESP-NOW Responder
<br/>
<br/>
<br/>
</div>
</div>
</div>
</foreignObject>
<text x="335" y="145" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
ESP-NOW Responder...
</text>
</switch>
</g>
<rect x="274" y="141" width="120" height="40" rx="6" ry="6" fill="#66b2ff" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 161px; margin-left: 275px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
ESP-NOW Attributes
</div>
</div>
</div>
</foreignObject>
<text x="334" y="165" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
ESP-NOW Attributes
</text>
</switch>
</g>
<path d="M 329 181.5 L 339 181.5 L 339 361 L 443.5 361 L 443.5 354.5 L 459.5 366 L 443.5 377.5 L 443.5 371 L 339 371 Q 329 371 329 361 Z" fill="#ffffff" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 443.5 361 L 443.5 354.5 L 459.5 366 L 443.5 377.5 L 443.5 371" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="flat" stroke-miterlimit="4" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 296px; margin-left: 335px;">
<div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">
Mapping of ESP-NOW Attributes to
<br/>
Cluster Attributes/Commands
</div>
</div>
</div>
</foreignObject>
<text x="335" y="299" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">
Mapping of ESP-NOW Attributes to...
</text>
</switch>
</g>
<rect x="450" y="41" width="60" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 56px; margin-left: 451px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Matter
</div>
</div>
</div>
</foreignObject>
<text x="480" y="60" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Matter
</text>
</switch>
</g>
<rect x="264" y="41" width="60" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 56px; margin-left: 265px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
ESP-NOW
</div>
</div>
</div>
</foreignObject>
<text x="294" y="60" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
ESP-NOW
</text>
</switch>
</g>
<rect x="248" y="11" width="146" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 144px; height: 1px; padding-top: 26px; margin-left: 249px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
<b>
ESP-NOW Matter Bridge
</b>
</div>
</div>
</div>
</foreignObject>
<text x="321" y="30" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
ESP-NOW Matter Bridge
</text>
</switch>
</g>
<rect x="460" y="141" width="150" height="50" rx="7.5" ry="7.5" fill="#ff9999" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 148px; height: 1px; padding-top: 166px; margin-left: 461px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
<b>
Cluster Server
</b>
: On/Off
<br/>
<b>
Attributes
</b>
: OnOff
</div>
</div>
</div>
</foreignObject>
<text x="535" y="170" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Cluster Server: On/Off...
</text>
</switch>
</g>
<rect x="0" y="51" width="160" height="160" rx="24" ry="24" fill="#4c8ecd" stroke="#4c8ecd" pointer-events="all"/>
<rect x="15" y="81" width="130" height="120" rx="18" ry="18" fill="#cc99ff" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 141px; margin-left: 16px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
ESP-NOW Initiator
<br/>
<br/>
<br/>
</div>
</div>
</div>
</foreignObject>
<text x="80" y="145" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
ESP-NOW Initiator...
</text>
</switch>
</g>
<rect x="20" y="141" width="120" height="40" rx="6" ry="6" fill="#66b2ff" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 161px; margin-left: 21px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
ESP-NOW Attributes
</div>
</div>
</div>
</foreignObject>
<text x="80" y="165" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
ESP-NOW Attributes
</text>
</switch>
</g>
<rect x="15" y="51" width="105" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 103px; height: 1px; padding-top: 66px; margin-left: 16px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
<b>
Coin Cell Button
</b>
</div>
</div>
</div>
</foreignObject>
<text x="68" y="70" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Coin Cell Button
</text>
</switch>
</g>
<path d="M 140.5 166 L 140.5 156 L 254.5 156 L 254.5 145.5 L 273.5 161 L 254.5 176.5 L 254.5 166 Z" fill="#ffffff" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="720" y="41" width="210" height="180" rx="27" ry="27" fill="#ffb872" stroke="#4c8ecd" pointer-events="all"/>
<rect x="740" y="68.5" width="170" height="130" rx="19.5" ry="19.5" fill="#ccffff" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 134px; margin-left: 741px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
<b>
Endpoint
</b>
1
<br/>
<b>
Device Type
</b>
: Color Temperature Light
<br/>
<br/>
<br/>
<br/>
</div>
</div>
</div>
</foreignObject>
<text x="825" y="137" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Endpoint 1...
</text>
</switch>
</g>
<rect x="750" y="136" width="150" height="50" rx="7.5" ry="7.5" fill="#ff9999" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 148px; height: 1px; padding-top: 161px; margin-left: 751px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
<b>
Cluster Server
</b>
: On/Off
<br/>
<b>
Attributes
</b>
: OnOff
</div>
</div>
</div>
</foreignObject>
<text x="825" y="165" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Cluster Server: On/Off...
</text>
</switch>
</g>
<rect x="730" y="43.5" width="90" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 59px; margin-left: 731px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
<b>
Matter Light
</b>
</div>
</div>
</div>
</foreignObject>
<text x="775" y="62" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Matter Light
</text>
</switch>
</g>
<path d="M 610.5 371 L 610.5 361 L 675 361 L 675 166 Q 675 156 685 156 L 730.5 156 L 730.5 145.5 L 749.5 161 L 730.5 176.5 L 730.5 166 L 685 166 L 685 361 Q 685 371 675 371 Z" fill="#ffffff" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 730.5 156 L 730.5 145.5 L 749.5 161 L 730.5 176.5 L 730.5 166" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="flat" stroke-miterlimit="4" pointer-events="all"/>
<path d="M 610.5 371 L 610.5 361 L 675 361 L 675 171 L 629.5 171 L 629.5 181.5 L 610.5 166 L 629.5 150.5 L 629.5 161 L 675 161 Q 685 161 685 171 L 685 361 Q 685 371 675 371 Z" fill="#ffffff" stroke="rgb(0, 0, 0)" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 629.5 171 L 629.5 181.5 L 610.5 166 L 629.5 150.5 L 629.5 161" fill="none" stroke="rgb(0, 0, 0)" stroke-linejoin="flat" stroke-miterlimit="4" pointer-events="all"/>
</g>
<switch>
<g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
<a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
<text text-anchor="middle" font-size="10px" x="50%" y="100%">
Text is not SVG - cannot display
</text>
</a>
</switch>
</svg>

After

Width:  |  Height:  |  Size: 31 KiB

@@ -0,0 +1,136 @@
<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="581px" height="291px" viewBox="-0.5 -0.5 581 291" content="&lt;mxfile&gt;&lt;diagram id=&quot;DAblD5_kl-jGel3urDzV&quot; name=&quot;Page-1&quot;&gt;7VlNk6M2EP01Pi4FAgw+jsfjzSGbTNWkajdHATJWrUAEhM3k16cF4huPGYd1Nlvrgy21pJb0Xj9awivzMSo+pjg5fuIBYSukB8XK3K0QMgy0gR9pea0sro4qQ5jSQHVqDS/0b6KMurLmNCBZr6PgnAma9I0+j2Pii54Npyk/97sdOOvPmuCQjAwvPmZj62caiKPaBXJa+y+Ehsd6ZmOtNhzhurPaSXbEAT93TObTynxMORdVKSoeCZPg1bhU4/YXWpuFpSQWcwaY1YATZrna2wqtGQzdeimUQlm6bDlwmAU2IV4VMuu/cl43fMhK3h6gg+EmRTVMtdeOPmEhCLjV99hLqV/7hfVWruvpUG8WBHsAqqGyBfwSafQZz2FL2/ORCvKSYF8azxB9YDuKiEHNgCJmNIxld4AH5oWFUsYeOeNp6dgMMHEPvvQrUv6VdFrWvku8Q7OYLsIK9BNJBSk6JoX4R8IjItJX6KJakaPYV+FvuKp+boPJqmP92AkktFFGrAI4bHy3HENB0TxNuTVB+QDfDmJyVxQi/1fsEfbMMyoolwh6XAgeTUHKZM8t9r+GKc/joIPhofx0nD6osYInDea1oNAUC7ru6nu94r3SjawEODuSQFXqiIiKUD58NMozR6PwJMg0JpH0cuYtQ6Nl9mlE6zGNCGnuFI+a8++JtH8SuRCRttEj0tzcl0jnJ5HLEGm7fUXC6u5KpDsi8unl+cNvv38G4xZOMnCqGBKLs6Q6oRxoIRHbJiSlMLEkbqfy3HNrejOZXaZAZtMOaRZynO12XmTIoeoEZpQRAMmVxuEfMkB2JhhoVJ6W6t8djULAiVEPvqkXwfcpgcy+rwDQslO4UBYdkI2msuhEErUWyKGb64ptzyjXziTDCFgAG0MfYOPYI2zsCWzsBbCpDy7fBpzRA8iCg5m/FGzGMKTGsJkTsJlLwGbMgC0OHuT1pTzw4iyjfh8tUlDxpVP+U8pfs1VtV6inQVl5rSsxLPRLt9IZJavtsLJWj7sId8bz1Cc9nQichkT0npEk6F2xxpSkhGFBT/0b1xTAaugzp+VlpKZyPUwFG83uO6kWqsZ170gDV+i6q2qDI1cl582e5oUBeiOHjG9ikEVBEOBg79E4gJ88rgrDyAG4ywMDjEkJ3MywVzbpV1LK8FwQ0SBg5E0dQpIPKGnzTUAOOGdiOmT6F3W1qFVzPZ4h3dlxMluIU3fi9wqxEZVmmGggLP2atMpaJ+k3on2vtmdp1B1r1LqPRk3rwnHtvQq1rjlaUJ/j63PzEqMR4/9EfOb3Jz70zbKgc1satGx0i1pvVZ5zJ+XZA8E4tyrvmqPllFdHwg+gPPQdpr3JV8ELKM+YKTtNt6y+9AzzpkR5q/TsO0lv8NbQGr7TnS29a44WlN6Pk/TQf5/0oNr+wVOx0f5NZj79Aw==&lt;/diagram&gt;&lt;/mxfile&gt;">
<defs/>
<g>
<path d="M 272.5 72.5 C 190.5 72.5 170 145 235.6 159.5 C 170 191.4 243.8 261 297.1 232 C 334 290 457 290 498 232 C 580 232 580 174 528.75 145 C 580 87 498 29 426.25 58 C 375 14.5 293 14.5 272.5 72.5 Z" fill="#dae8fc" stroke="#6c8ebf" stroke-miterlimit="10" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 408px; height: 1px; padding-top: 145px; margin-left: 171px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
<br/>
<br/>
<font style="font-size: 18px;">
Matter Fabric
</font>
</div>
</div>
</div>
</foreignObject>
<text x="375" y="149" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Matter Fabric...
</text>
</switch>
</g>
<path d="M 338.4 109.7 L 338.4 105.19 C 338.4 102.82 337.28 100.59 335.39 99.17 C 331.63 96.54 330 91.77 331.37 87.38 C 332.75 82.99 336.81 80 341.4 80 C 345.99 80 350.05 82.99 351.42 87.38 C 352.8 91.77 351.17 96.54 347.4 99.17 C 345.51 100.59 344.4 102.82 344.4 105.19 L 344.4 109.7 Z" fill="rgb(255, 255, 255)" stroke="#0080f0" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 341.4 92.55 L 341.4 106.69 M 338.4 106.69 L 344.4 106.69" fill="rgb(255, 255, 255)" stroke="#0080f0" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
<ellipse cx="341.4" cy="91.65" rx="0.900592495062541" ry="0.9025526742301458" fill="none" stroke="#0080f0" stroke-width="2" pointer-events="all"/>
<path d="M 359.4 239.7 L 359.4 235.19 C 359.4 232.82 358.28 230.59 356.39 229.17 C 352.63 226.54 351 221.77 352.37 217.38 C 353.75 212.99 357.81 210 362.4 210 C 366.99 210 371.05 212.99 372.42 217.38 C 373.8 221.77 372.17 226.54 368.4 229.17 C 366.51 230.59 365.4 232.82 365.4 235.19 L 365.4 239.7 Z" fill="rgb(255, 255, 255)" stroke="#0080f0" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 362.4 222.55 L 362.4 236.69 M 359.4 236.69 L 365.4 236.69" fill="rgb(255, 255, 255)" stroke="#0080f0" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
<ellipse cx="362.4" cy="221.65" rx="0.900592495062541" ry="0.9025526742301458" fill="none" stroke="#0080f0" stroke-width="2" pointer-events="all"/>
<path d="M 488.4 149.7 L 488.4 145.19 C 488.4 142.82 487.28 140.59 485.39 139.17 C 481.63 136.54 480 131.77 481.37 127.38 C 482.75 122.99 486.81 120 491.4 120 C 495.99 120 500.05 122.99 501.42 127.38 C 502.8 131.77 501.17 136.54 497.4 139.17 C 495.51 140.59 494.4 142.82 494.4 145.19 L 494.4 149.7 Z" fill="rgb(255, 255, 255)" stroke="#0080f0" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 491.4 132.55 L 491.4 146.69 M 488.4 146.69 L 494.4 146.69" fill="rgb(255, 255, 255)" stroke="#0080f0" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
<ellipse cx="491.4" cy="131.65" rx="0.900592495062541" ry="0.9025526742301458" fill="none" stroke="#0080f0" stroke-width="2" pointer-events="all"/>
<image x="179.5" y="99.5" width="40" height="40" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAuMDMyIiBoZWlnaHQ9IjEwMC4wMzIiIHZpZXdCb3g9IjAgMCA3NSA3NSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvdmVyZmxvdz0idmlzaWJsZSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjMiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+PGNpcmNsZSByPSIzNy41IiBjeD0iMzcuNSIgY3k9IjM3LjUiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiIgZmlsbD0iIzhkYzUzZiIvPjxwYXRoIGQ9Ik01MS40MTcgMzQuOGwxMC43MzQgMTEuOC0xMC42OCAxMi4wNC0zLjM2OC0yLjk4NSA2LjAxOC02Ljc4NUgxNC4zMjR2LTQuNUg1NC4wNGwtNS45NTItNi41NHpNMjUuMDU4IDEzLjM5NGwtMTAuNzM0IDExLjggMTAuNjggMTIuMDQgMy4zNjgtMi45ODUtNi4wMTgtNi43ODVINjIuMTV2LTQuNUgyMi40MzVsNS45NTItNi41NHoiIGRvbWluYW50LWJhc2VsaW5lPSJhdXRvIiBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4="/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 150px; margin-left: 200px;">
<div data-drawio-colors="color: #4277BB; background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(66, 119, 187); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">
ESP-NOW Bridge
</div>
</div>
</div>
</foreignObject>
<text x="200" y="162" fill="#4277BB" font-family="Helvetica" font-size="12px" text-anchor="middle">
ESP-NO...
</text>
</switch>
</g>
<ellipse cx="25" cy="120" rx="25" ry="25" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<ellipse cx="25" cy="120" rx="15" ry="15" fill="rgb(255, 255, 255)" stroke="#4c8ecd" pointer-events="all"/>
<path d="M 50 120 L 173.63 120" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 178.88 120 L 171.88 123.5 L 173.63 120 L 171.88 116.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 121px; margin-left: 116px;">
<div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">
ESP-NOW
<br/>
control/bind/unbind
</div>
</div>
</div>
</foreignObject>
<text x="116" y="124" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">
ESP-NOW...
</text>
</switch>
</g>
<path d="M 220 120 L 326.79 96.37" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 331.92 95.24 L 325.84 100.17 L 326.79 96.37 L 324.33 93.33 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 108px; margin-left: 277px;">
<div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">
Matter control
</div>
</div>
</div>
</foreignObject>
<text x="277" y="111" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">
Matter control
</text>
</switch>
</g>
<path d="M 217.89 128.94 L 473.63 133.32" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 478.88 133.41 L 471.82 136.79 L 473.63 133.32 L 471.94 129.79 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 132px; margin-left: 349px;">
<div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">
Matter control
</div>
</div>
</div>
</foreignObject>
<text x="349" y="135" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">
Matter control
</text>
</switch>
</g>
<path d="M 214.14 134.14 L 346.49 210.82" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 351.04 213.45 L 343.22 212.97 L 346.49 210.82 L 346.73 206.91 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 175px; margin-left: 284px;">
<div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">
Matter control
</div>
</div>
</div>
</foreignObject>
<text x="284" y="178" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">
Matter control
</text>
</switch>
</g>
</g>
<switch>
<g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
<a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
<text text-anchor="middle" font-size="10px" x="50%" y="100%">
Text is not SVG - cannot display
</text>
</a>
</switch>
</svg>

After

Width:  |  Height:  |  Size: 14 KiB

@@ -2,7 +2,19 @@
## Overview
This application note describes the application of controlling the ESP-NOW Matter bridge using the ESP-NOW coin cell button, focusing on the power saving aspect of the application. Please refer to this [Application Note](https://github.com/espressif/esp-now/tree/master/examples/coin_cell_demo/switch/docs/button_in_matter_bridging.md) for the coin cell button part of the application note. For general ESP-NOW bridge application description, please refer to the [README](../README.md).
This document outlines the application of controlling the ESP-NOW Matter bridge through the use of ESP-NOW coin cell button. Please refer to this [Application Note](https://github.com/espressif/esp-now/tree/master/examples/coin_cell_demo/switch/docs/button_in_matter_bridging.md) for the coin cell button part of the application note. For general ESP-NOW bridge application description, please refer to the [README](../README.md).
## Data Models
The diagram below gives an overview of the interactions between various devices in this application.
![bridge overview](./esp-now-bridge-overall.drawio.svg)
This diagram gives a simplistic view of the data models involved in the interaction.
![data model](./esp-now-bridge-datamodel.drawio.svg)
The coin cell button binds to the ESP-NOW Matter bridge so that it is able to send ESP-NOW controls to the bridge, then the bridge controls the Matter light through ONOFF Cluster.
## Power Saving