TheTimeWalker / wallpanel-android

WallPanel is an Android application for Web Based Dashboards and Home Automation Platforms
https://wallpanel.xyz
Apache License 2.0
396 stars 41 forks source link

[Doc enhancement] Powerfull ideas using eval() #123

Open JavanXD opened 4 months ago

JavanXD commented 4 months ago

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. https://github.com/TheTimeWalker/wallpanel-android/blob/4c276ba7a2aa10240cdcf029e66c4b4695e9b20c/WallPanelApp/src/main/java/xyz/wallpanel/app/ui/activities/BrowserActivityNative.kt#L213

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 https://github.com/TheTimeWalker/wallpanel-android/issues/50 related to the eval() command which currently blocks this poweruser enhancement.

Originally posted by @JavanXD in https://github.com/TheTimeWalker/wallpanel-android/issues/26#issuecomment-1983407936

JavanXD commented 4 months ago

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'