Help with custom widget creation

Third party integrations HADashboard
1

Hello,

I’m pretty new in programming javascript. I wrote a little .js file that scrapes the live departures of a certain public transport tramway station. It works perfect but I’m struggling to integrate it in HADashboard.

In Hadashboard I just want to display the text in White with transparent background.Tried to import it as an iframe but HADashbaord can’t get access to the file no matter where I put it in the appdaemon folder.

Heres the .html

<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.3.1.min.js"></script>

<title>scrape</title>
</head>
<body background: none transparent >

<script type="text/javascript" src="scrape.js"></script>
<span id ="abfahrt"></span>
</body>
</html>

And here’s the .js file

$.getJSON('http://allorigins.me/get?url=' + encodeURIComponent('http://www.wienerlinien.at/itip/index.php?controller=pjwl&action=pjActionLoadRBLHtml&rbl=2192&linie=31&linie_typ=bim&hotspot_id=&name=Bahnsteggasse&richtung=Stammersdorf&ba=1') + '&callback=?', function(data){
 req = data.contents; 
var points = req.match(/<span class="nichtfett">Abfahrt\: <\/span>in ([A-Za-z0-9]*?) Minuten <br>/g);

document.write(points[0] + "<br>" + points[1] + "<br>" + points[2]); 
window.stop(); 
});

Would be great if somebody would know how to integrate it in HADasboard.

Cheers
Chris

2

you can use the iframe.

you can place your custom html files inside the custom_css dir.
so like:

/your_config_dir/custom_css/test.html

but i prefer to put them together in a subdir like:

/your_config_dir/custom_css/html/test.html

then you can reach them in a browser like:

http://your_dasboard_url:port/custom_css/html/test.html

and that url can be used in an iframe.

3

Hello,

perfect I can access it now from my HADashboard.

However, it still shows that little broken icon in the top left. The debugger console gives me warning that Provisional headers are shown. Any idea on how to get my iframe displayed?

Thank you very much
Chris

4

first try to get it working outside the dashboard in a browser.
if that works it normally should work in the iframe.
and try to avoid external javascripts.
just paste the script inside the html page.

5

Hello Rene,

it works perfect in the browser with the http: path to custom css. I also tried to put in an iframe in another html file and that worked too. I really don’t understand it. I sometimes get this error in the console “Cross-Origin Read Blocking (CORB) blocked cross-origin response” on the HADashboard Panel.

I changed the code slightly heres the new one:
hadashboard yaml:

bim:
  widget_type: iframe
  refresh: 5
  img_list: 
    - http://192.168.0.136:5050/custom_css/scrape/test.html

html file with javascript
`

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="scrape.css">
    <title>scrape</title>

    <script src="jquery-3.3.1.min.js"></script>

    <script type="text/javascript"> 

    $.getJSON('http://allorigins.me/get?url=' + encodeURIComponent('http://www.wienerlinien.at/itip/index.php?controller=pjwl&action=pjActionLoadRBLHtml&rbl=187&linie=41&linie_typ=bim&hotspot_id=&name=Kutschkergasse&richtung=Schottentor%20U&ba=1') + '&callback=?', function(data){
    req = data.contents; 
    var points = req.match(/<span class="nichtfett">Abfahrt\: <\/span>in ([A-Za-z0-9]*?) Minuten <br>/g);
    //var points3 = req.match(/<span class="nichtfett">Abfahrt\: <\/span>in ([A-Za-z0-9]*?) Minuten <br>/)[1];
    //var points2 = req.match(/<span class="nichtfett">Abfahrt\: <\/span><strong>([A-Za-z0-9]*?)<\/strong> <br>/);

    let new1= points[0].replace("<span class=\"nichtfett\">Abfahrt: </span>in" , ""); 
    new1 = new1.replace(" Minuten <br>", " minutes");
    let new2= points[1].replace("<span class=\"nichtfett\">Abfahrt: </span>in" , ""); 
    new2 = new2.replace(" Minuten <br>", " minutes");
    let new3= points[2].replace("<span class=\"nichtfett\">Abfahrt: </span>in" , ""); 
    new3 = new3.replace(" Minuten <br>", " minutes");
    //document.write(new1 + "<br>" + points[1] + "<br>" + points[2]); 
    	//console.log(points2);
    	//console.log(points3);

    	document.getElementById('new1').innerHTML = new1; 
    	document.getElementById('new2').innerHTML = new2; 
    	document.getElementById('new3').innerHTML = new3; 
    });



    </script>
    </head>
    <body>
    <div id="main">

    <p id="new1"></p>
    <p id="new2"></p>
    <p id="new3"></p>
    </div>
    </body>

    </html>
6

i really have no idea, i am absolutely no expert in JS.

i wouldnt go the way you do.
i would scrape the webpage with HA or with an appdaemon app, create sensors out of it and then show the sensors in the dashboard.

there are all kind of problems when you use websites that connect to other websites and then also in javascripts.
its exactly this kind of programming that hackers use, and thats why browsers block it.