A guide to how it works
Can you confirm a few things first.
Do you have a working rule that will return your button page for the first button screen “10”?
Refresh Event
As soon as you swipe from home, nxpanel will send;
{"page": {"format": 6, "pid": 10, "type": "refresh"}}
meaning, tell me how to draw a “8 Button Screen” (type 6) for that page with id 10.
Your rule (as described above in this thread) should then send the reply refresh message to tell nxpanel how to render the button page, such as;
{"refresh":{"pid":10,"name":"Lounge","format":6,buttons:[{"bid":1,"label":"Movie","type":1,"state":1,"icon":1},{"bid":2,"label":"Lounge","type":1,"state":0,"icon":1},{"bid":3,"label":"Hall","type":2,"icon":6},{"bid":4,"label":"Bedroom","type":10,"next":11,"state":5,"icon":5},{"bid":5,"label":"Temp","type":10,"next":12,"state":9,"icon":9},{"bid":6,"label":"Light","type":1,"icon":3},{"bid":7,"label":"Dimmer","type":10,"next":13,"state":8,"icon":3},{"bid":8,"label":"Status","type":10,"next":17,"state":15,"icon":16}]}}
At this point, you button screen should look fine.
Please confirm you get this far?
You should be clear on how this fundamental process works before continuing.
@Jens_Wensing asked about the status page. In the above example my button 8 links to the status page.
{"bid":8,"label":"Status","type":10,"next":17,"state":15,"icon":16}
This says;
- type: 10, the button is a link to another screen
- next:17, the page it links to has an
idof17 - icon: 16, use the information icon on the label
- state: 15, this is the page type, 15 is the status page
So, when you press this button, if will open the status page for id 17, this again (just like the button page) will make nxpanel send another request how to render that page;
{"page": {"format": 15, "pid": 17, "type": "refresh"}}
It’s asking you backend how to draw the status page for id 17. It’s send the 15 (status page), but it’s more for reference and not needed. You should know your id 17 is a status page and send appropriate json for that, without being told the 15.
Your rule, once again, will be passed in the 17 so it knows what to do, since 17 is a status page your rule will send back the json for that page, which will be something like this;
{"refresh":{"pid":17,"name":"Info Page","status":[{"id":1,"text":"Door","value":"Open"},{"id":2,"text":"Temp","value":"4","icon":3}]}}
This is the process for all pages.
- You move to a page
- NxPanel sends the page id request over mqtt
- You backend rule get the message, via a rule listening to the channel
- Based on the page id, the rule returns the json needed for that specific page to render
Sync event
The below, is for perfomance, you should do it. But make sure you fully understand the above first.
The only slight deviation from that process is the sync event. This is to make things faster. If you move to a screen (button screen) and that screen was last used to render page id (10, for example) and you want the button screen rendered as 10 again. It know that all the labels and icons are correct, so it doesnt need to ask the backend how to refresh the whole page. So instead of send a;
{"page": {"format": 6, "pid": 10, "type": "refresh"}}
It will send a
{"page": {"format": 6, "pid": 10, "type": "sync"}}
This means your backend doesn’t need to send everything about the page. The only things that would be visually different could be the on/off states of the button, so that’s all you’d need to send;
{"sync":{"pid":10,buttons:[{"bid":1,"state":1},{"bid":2,"state":0}]}}
This makes the page faster to sync. You could have just send a refresh like first time. That would have worked. But a sync will make it faster. You can only do this for the button pages as I assumed this would be the important pages. All other pages will never send a ‘sync’ they will always send a refresh so you will send a full refresh back.