Open a web page behind the dashboard

Third party integrations HADashboard
1

I have a button on my dashboard that uses the IFTTT Webhooks to trigger a switch by opening a web page. It works fine, but the web page opens on top of my dashboard. How can I get the new page to either open the page behind the dashboard, or open the page and close it right away?

2

i guess you have created a custom widget?
because i dont know any button that triggers a switch except the switch widget.

matbe you like to share what you are actually doing, so i can help?

3

I’m pretty new at this so I’ll try to explain the best I can…

I set up a weblink in HA that goes to a “maker.ifttt.com/trigger…” page. Whenever that page is accessed, it triggers a generic low voltage wifi inching relay (that uses the ewelink app) to activate my garage door opener.

Then I set up a navigate widget in HADashboard that, when pressed, opens that URL, which in turn activates my garage door opener.

The problem is, when i press the widget, it opens the new page in the same browser tab as my dashboard. So I guess what I really need is some way to either:

  1. go back to the dashboard automatically
  2. open the page in a new tab/window and close it right away
    or
  3. open it BEHIND the dashboard and just leave it there.
4

ah oke, now i understand what you are doing.

if you cant find a more convienient way to integrate your switch in HA it will be hard to do. but maybe not impossible.

what you could try is the following:
create a new dashboard with only 1 iframe widget on it that shows your page.
in your original dashboard change the navigate to go to the new dashboard.
and specify timeout (set it to 1 sec) and return (your original dashboard.
it then would look something like:

triggerpage:
    widget_type: navigate
    title: switch
    dashboard: ifttttriggerdash
    args:
      timeout: 1
      return: originaldash
5

You could also try to just load the page with an XMLHttpRequest. That way the page won’t load at all, you would just be reading the page into memory. Not sure if it would work in your case, but it seems worth trying.

From javascript, it would look something like:

var xhr = new XMLHttpRequest() 
url = "http://your_url"
xhr.open("GET", url, false)
xhr.send()
6

thats not something easy to do with a dashboard

7

when I click the button on the dashboard, the first thing it does is go to the web page. Is there a way to use javascript in a widget without accessing the page first?

8

you would need to use the javascript widget.
and there would be 2 options that i can think of:

  1. turn the total code to 1 single command and use that as command for the javascript widget or
  2. create a function in the head from a skin and call that function from the javascript widget.

both way more difficult then my solution.

9

i just thought of 1 other possible solution.
create a html page with an url or button that loads the page with a script like tjintomas showed and open that html page in an iframe.

even more easy:
create a webpage with only that url
open it in an iframe that has a short refreshrate.

your trigger would be opened in the iframe and after the refreshtime it will go back to the page with your url.

10

The javascript widget just does an eval on the command so you would be able to make the script one line.

command: 'var xhr = new XMLHttpRequest(); url = "http://your_url"; xhr.open("GET", url, false);xhr.send();'

and use the javascript widget.

1 Like
11

tjntomas, That works exactly how I want it to. Thank you!

Here’s what I’ve got in my .dash file:

javascript:
  widget_type: javascript
  title: Garage Door
  command: 'var xhr = new XMLHttpRequest(); url = "https://maker.ifttt.com/trigger/ACTION/with/key/MYKEY"; xhr.open("GET", url, false);xhr.send();'

If I wanted to add another device the same way, with javascript, can I just start adding numbers to the end of the first line? eg: javascript1: and javascript2: etc.

12

Sure, that would work. You can try using yaml folded style to make it easier to read:

javascript:
  widget_type: javascript
  title: Garage Door
  command: > var xhr = new XMLHttpRequest();
             url = "https://maker.ifttt.com/trigger/ACTION/with/key/MYKEY";
             xhr.open("GET", url, false);
             xhr.send();'
             Here goes the rest of your code;
1 Like
13

you can call it anything you like.
so i wouldnt use javascript 1 2 and 3 but just a name that tells which switch it is.

14

Gotchya. Thank you!