[solved] Navigate & changing views not working since installing v2021.5

Configuration Frontend
1

Hi guys

Upgrade to 2021.5 went OK, except for controlling HA on a RPi with touchscreen running Raspbian.
I have a HMTL file with tabs and 1 of them is HA with multiple views.
This HTML file opens in kiosk mode in Chromium; this was working until installing this version.
When opening HA directy, without the use of that tabbed HTML file, switching views works.

Any idea what has changed in HA that causes this and/or how to solve it?

Thanks for helping!
N

2

Anyone?

Forgot to mention that the views are selected (at least the title is underlined) but the contents of the default/first view is displayed.

3

Not meant disrespectful, but have you asked yourself, what information you are willing to share, that someone can jump in and help?

You are offering a nice text with zero information, not one piece of code (eg. the HTML page…) and expect someone to know all specific changes, that have been made in the last release. I very much doubt, that even the Admins do know all changes. :wink:

What I’m saying is this: for you it is self explaining what you’re doing (or trying to do), for everybody else it is not. You, as an experienced user of this forum should know how this works. The more information you give, the sooner you get help here in this very forum… :smiley:

If it would be my question, I’d share at least the code of the HTML page.

That being said, I’d suspect some collision between your “tab” menu and some scripts from HA. My first look would be the changed files in this release (find it on Github), everything that is remotely connected to Lovelace or frontend.

1 Like
4

Hi @paddy0174, thanks for picking this up!

Don’t worry about that disrespect (don’t see it that way anyhow); the fact that you are pointing this out gives you a lot of credit. :wink:

Sorry, you are right that I should have shared the HTML code right away, which I have puzzled it together from various sources (not an experience HTML coder) and didn’t think it would be of much importance in this issue - although of course being the main reason for my post.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 4px 26px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 26px 12px;
  
  border-top: none;
}
</style>

<script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script>

</head>

<body>

<!-- Tab links -->
<div class="tab">
 <button class="tablinks" onclick="openPage(event, 'HomeAssistant')">HA</button>
 <button class="tablinks" onclick="openPage(event, 'Music')">Music</button>
 <button class="tablinks" onclick="openPage(event, 'pCP')">pCP</button>
</div>

<!-- Tab content -->
<div id="HA" class="tabcontent">
  <iframe src="http://172.16.0.5:8123/lovelace/index.htm" style="position:fixed; top:40px; left:0; bottom:10px; right:0; width:100%; height:95%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"></iframe>
</div>

<div id="Music" class="tabcontent">
  <iframe src="http://172.16.0.100:9000/material/index.htm" style="position:fixed; top:40px; left:0; bottom:10px; right:0; width:100%; height:93%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"></iframe>
</div>

<div id="pCP" class="tabcontent">
  <iframe src="http://172.16.0.22/cgi-bin/main.cgi" style="position:fixed; top:40px; left:0; bottom:10px; right:0; width:100%; height:93%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"></iframe>
</div>

<script>
function openPage(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>

</body>
</html>
1 Like
5

Hmm, tbh I had hoped for something obvious to stick out…too bad it doesn’t. :wink: :slight_smile: But I’m not a lovelace or frontend expert at all, so maybe someone else sees something totally wrong. :slight_smile:

I’d start with the “normal” search for errors, as dump as that may be… :astonished: What does the browser console say, are there any errors? You get there with the page open and pressing “F12”. Maybe the JS console has some errors to report?

Maybe you could change the page to show the HA views in an iframe, but without the tabcontrol script? This way you could rule out the iframe as culprit and/or see, if he tabcontrol script is doing any harm to the page. Something along the way like this:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 4px 26px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 26px 12px;
  
  border-top: none;
}
</style>

<script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script>

</head>

<body>

<!-- Tab links -->
<div class="tab">
 <button class="tablinks" onclick="openPage(event, 'HomeAssistant')">HA</button>
</div>

<!-- Tab content -->
<div id="HA" class="tabcontent">
  <iframe src="http://172.16.0.5:8123/lovelace/index.htm" style="position:fixed; top:40px; left:0; bottom:10px; right:0; width:100%; height:95%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"></iframe>
</div>

</body>
</html>

On first try, I’d leave jquery in, if the error persists, try removing jquery as well.

Let’s see what comes up, as I said, maybe someone else sees something, or we can narrow this down. :slight_smile:

1 Like
6

Thanks Patrick, tried this with and without the jquery script.
The tab is visible but nothing happens when clicked upon…

7

Another observation: I have a lovelace button to navigate to another page which doesn’t work either anymore since installing v2021.5

8

Anyone?

With the advice to use the developer tools (thanks @paddy0174) I found something that might explain what is wrong but cannot make much of it.
This doesn’t seem to be a problem linked the RPi but also occurs on my desktop with multiple browsers.

When rolled back to 2021.4.3 tabs are accessible again so something has changed in the 2021.5 release that causes this.

Error in console:

Uncaught DOMException: Blocked a frame with origin "http://172.16.0.5:8123" from accessing a cross-origin frame.
    at n (http://172.16.0.5:8123/frontend_latest/app.780f338b.js:849:134869)
    at HTMLElement.value (http://172.16.0.5:8123/frontend_latest/chunk.625dfb042e2450e9da81.js:502:3424)
    at HTMLElement.value (http://172.16.0.5:8123/frontend_latest/chunk.625dfb042e2450e9da81.js:502:4282)
    at g.handleEvent (http://172.16.0.5:8123/frontend_latest/app.780f338b.js:849:122562)
    at HTMLElement.__boundHandleEvent (http://172.16.0.5:8123/frontend_latest/app.780f338b.js:849:121929)
    at HTMLElement.fire (http://172.16.0.5:8123/frontend_latest/app.780f338b.js:849:31183)
    at HTMLElement._itemActivate (http://172.16.0.5:8123/frontend_latest/chunk.08c8b2270d481b1a6a28.js:2:10192)
    at HTMLElement._activateHandler (http://172.16.0.5:8123/frontend_latest/chunk.08c8b2270d481b1a6a28.js:2:10123)
    at HTMLElement._activateHandler (http://172.16.0.5:8123/frontend_latest/chunk.08c8b2270d481b1a6a28.js:2:4083)
    at HTMLElement._activateHandler (http://172.16.0.5:8123/frontend_latest/chunk.cf05955316588addb2e4.js:258:2270)
n @ app.780f338b.js:12797
value @ chunk.625dfb042e2450e9da81.js:3500
value @ chunk.625dfb042e2450e9da81.js:3500
handleEvent @ app.780f338b.js:12797
__boundHandleEvent @ app.780f338b.js:12797
fire @ app.780f338b.js:12797
_itemActivate @ chunk.08c8b2270d481b1a6a28.js:1
_activateHandler @ chunk.08c8b2270d481b1a6a28.js:1
_activateHandler @ chunk.08c8b2270d481b1a6a28.js:1
_activateHandler @ chunk.cf05955316588addb2e4.js:1000
(anonymous) @ app.780f338b.js:12797
R @ app.780f338b.js:12797
F @ app.780f338b.js:12797
click @ app.780f338b.js:12797
L @ app.780f338b.js:12797
9

Damn it, that sounds like a security protection from browser side.

This normally is a security feature, so you can’t access content in an iFrame outside of the original page. Normally every good application, that is reachable over the internet should have that. I wouldn’t know an eas way around it, as these things nowadays are handled in the browser. I’m not even sure diasbling is still possible in modern browsers.

Sorry, but we may be stuck here with this way.

But maybe we could try to change your settings, so you could still have what you want.

If I understand it right, you have three tabs, one for HA (with it’s own tabs), one for music and one for pCP?

Can’t you set these two pages inside HA? Maybe that would work. Or even better, can’t you use HA for these things?

Let me know, what you think, it would be a shame if we couldn’t figure out a way to get this working one way or another. :slight_smile:

1 Like
10

Thank you for thinking with me! :+1:

Yes, the music tab is the webUI of my Logitech Media Server and pCP is for accessing the webUI of one of the players that has some hiccups now and then.
I have seen posts about integrating things that have nothing to do with home automation and find it a bit odd but maybe I have to bend my thinking.
The advantage of having these controls outside of HA is that they are more accessible/less relying on something else.

I tried your suggestion with the iframe integration which works (didn’t know about that integration so thank you for pointing that out) :clap:
Controlling from HA is not an option, it’s way to limited for my LMS.

1 Like
11

I have the same issue using Organizr and there is already an issue reported for the frontend:

1 Like
12

Thank you @jalsing for pointing this out! :+1:

13

@paddy0174: the iframe in HA is not an option, LMS is not responsive enough this way.
Let’s hope it gets fixed.

14

The 2021.6 update solved the iFrame problem I had!

1 Like