[Doc enhancement] Powerfull ideas using eval()

[JavanXD]

Problem description: sending an url takes much time to reload the page, a simple javascript event, would be very fast in navigating on the dashboard.

Use cases: For example I have one tab on my WallPanel showing the cameras, as soon someone rings my doorbell, or as soon as movement is detected by my camera, I want to trigger a wakeup event on the WallPanel as well as navigate to the Camera sub-page.

I tried to do this using something like:

curl --location --request POST 'http://192.168.178.78:2971/api/command' \
--header 'Content-Type: application/json;charset=UTF-8' \
--data-raw '{
    "eval": "document.querySelector("paper-tab[aria-label="Hauseingang"]").dispatchEvent(new MouseEvent("click", {shiftKey: true}));"                        
}';

As you run the webView.evaluateJavascript() method this is definitely a very powerful solution.

wallpanel-android/WallPanelApp/src/main/java/xyz/wallpanel/app/ui/activities/BrowserActivityNative.kt

Line 213 in 4c276ba

webView.evaluateJavascript(js, null)

Anotter use case I had in mind, was when someone rings my doorbell I don't only want to play the doorbell alarm on the WallPanel speaker but also flash a red screen on the screen in case my WallPanel is muted (baby sleeping). Here I wanted to create a red box element and make it visible for a view seconds everything using simple pure javascript, but triggering it using eval().

@TheTimeWalker could you please provide more examples in the documentation as well as fix the timeout bug #50 related to the eval() command which currently blocks this poweruser enhancement.

Originally posted by @JavanXD in #26 (comment)

[JavanXD]

Some template you could provide in the wallpanel documentation:

wallpanel.yaml inside /packages/

rest_command:
  wallpanel_speak:
    url: !secret wallpanel_apipath
    method: POST
    headers:
      accept: 'application/json, text/html'
    payload: "{'speak': '{{ message }}'}"
    content_type:  'application/json; charset=utf-8'
  wallpanel_play_alarm:
    url: !secret wallpanel_apipath
    method: POST
    headers:
      accept: 'application/json, text/html'
    payload: '{"audio": "http://homeassistant.fritz.box:8123/local/images443/polizei.mp3"}'
    content_type:  'application/json; charset=utf-8'
  wallpanel_play_doorbell:
    url: !secret wallpanel_apipath
    method: POST
    headers:
      accept: 'application/json, text/html'
    payload: '{"audio": "http://homeassistant.fritz.box:8123/local/images443/doorbell.mp3"}'
    content_type: 'application/json; charset=utf-8'
  wallpanel_play_nothing:
    url: !secret wallpanel_apipath
    method: POST
    headers:
      accept: 'application/json, text/html'
    payload: '{"audio": ""}'
    content_type:  'application/json; charset=utf-8'
  wallpanel_wakeup:
    url: !secret wallpanel_apipath
    method: POST
    headers:
      accept: 'application/json, text/html'
    payload: '{"wake": true, "wakeTime": 60}'
    content_type:  'application/json; charset=utf-8'
  wallpanel_settings:
    url: !secret wallpanel_apipath
    method: POST
    headers:
      accept: 'application/json, text/html'
    payload: '{"settings": true}'
    content_type:  'application/json; charset=utf-8'
  wallpanel_door:
    url: !secret wallpanel_apipath
    method: POST
    headers:
      accept: 'application/json, text/html'
    payload: '{"url": "http://homeassistant.fritz.box:8123/my-wallpanel/door"}'
    content_type:  'application/json; charset=utf-8'

[aeozyalcin]

If anyone stumbles on this post, here is how I managed to achieve navigating between HA dashboards without reloading the whole page (I'm using MQTT, this should also apply to HTTP API):

action: mqtt.publish
data:
  topic: wallpanel/mywallpanel/command
  payload: >-
    {"eval": "window.history.pushState(null,'','/url/to/other_dashboard');
    window.dispatchEvent(new CustomEvent('location-changed'));"}