Trying to use a standard header/footer across all dashboards to make browsing between them effective.
Say my dashboard is effectively 2 dashboards being displayed at the same time (this is in its infancy, so forgive how clunky it looks right now). Everything above my horribly-drawn red line is actually an iframe tile holding a separate dashboard:
I have more logical reasons for needing this, but for simplicity's sake, this same problem will solve all my problems. Say I click on the front door cam in the upper-right. I expect it to expand to the whole screen, however, it only expands within that "dashboard", aka, that iframe. So it currently acts like this - it expands the camera to the red circle. Ideally, I'd like it to expand where I drew the blue box:
The way it's working now is the logical & expected behavior, and I completely understand why it's doing that. That said, anybody have an idea how I can change this behavior? (I'd apply this same logic to my footer, which creates links to all of my other dashboards. Currently, they just open within the footer itself rather than on the main page area).
Hoping this is possible, but my hopes aren't high 
It should be possible, you'd need to construct a link in such a way that you can control the target, being the top level window. I'd need a bit of time to work something out, so hopefully someone else might jump in in the meantime....
I think thats 'Parent' for your onClick.
1 Like
Yeah, that's what I was thinking, just not sure if you get that control when setting up a tile that is a URL link. I've done it with my avatar driver, but seems a bit extreme to include an iFrame inside and iFrame just to achieve this...
how bout this:
<head>
<script>
function abc() {
alert("I went to full screen");
}
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="window.top.abc();" href="#">Click Me</a>
</iframe>
</body>
Thanks for the tips! I'm not home until tonight so can't try this right away. I suspect I'll need to modify the device driver of my iframe. I'm using the "iframe advanced" device driver that I found on github (via this community). That app only allows you to insert the URL of the iframe-embedded content. I'll have a look at the driver, though admittedly I don't know groovy very well. I'm a database developer (aka, "fake programmer" :D)
Admittedly I didn't run a full set of tests on the javascript above - however. I've been toying a lot lately with embeds and css overrides. In html5, you can now put a 'style' and a 'script' pair in body as opposed to in the header section - this opens a world of options!
Recently, I wanted Notifier Tile (from @thebearmay) to be cleaner on my dashboard. To accomplish this I take advantage of the 'class' of a span. You can basically set any css value within the device in this manner, without having to dick with finding the tile number.
I've also done some heavy lifting to get GameTime by @justinL to control some icon sizes and layout handling to fit better for me.
Here's an example right from a driver I modified for Notification Tile:
sendEvent(name:"last5", value:'' +
'.last5 {\n' +
' display: block;\n' +
' color:' + "${existingTileFontColor}" + ';\n' +
' text-align:' + "${existingTileHorzWordPos}" + ';\n' +
' font-size:' + "${existingTileFontSize}" + '%;\n' +
'}\n' +
'\n' +
'')
There are some gotcha's you have to worry about.
- First, HE (I'm biting my tongue) has a 1024 char limit. It may seem like this is a large size, but it's not. I've banged my head on this 10 times in a myriad of fixes.
- Flex and grid are not supported properly due to the minimalistic approach take on dashboard tiles. While it seems like it would work. it doesn't due to some tile header specifics being undefined that can't be reached through a drivers code as they are in the wrapper.
- Be WARY and careful about your encapsulators!!! HTML/SGML is flexible, but groovy gets really confused if you mix and match without closing and opening your sets correctly. I spent 2 hours once on a single quote vs a double quote! EG; in the first line of my code above, note that there are 3 Double Quotes in the concatenation. The closing Double quote is found just inside the Right Paran of the last line of the snippet. You have to parse it really carefully to be sure you open and close in ways Groovy can handle before the string is sent to the browsers.
I'm excitedly waiting for @sburke781 (apologies @csteele) who I believe has been working on a skin or front editor that can help this situation! Also, don't forget that you can add import of libraries to extend your groovy functions...
Hope this helps someone!
1 Like
my bad. it is @sburke781 ... updating my post... thanks!
1 Like
On two side notes, interesting to see another BI specialist here, at least based on one calendar event. The other is that looks like an agenda view of a Google Calendar, is that right? Is that just a straight embed in the dashboard, or were you able to get that to work in Bryan's driver? I tried previously and couldn't get the tweaks to the layout to stick when embedding them....
This is actually not an anchor, it's the behaviour of the modal iFrame that pops up from the advanced iFrame driver, using a button. Slightly different.... We could probably look into the code within it....
For all I can see, this would most likely require "stuff" in both the iFrame header dashboard, like you already have with the camera tile, as well as "stuff" in the parent dashboard, plus some tweaks to the iFrame driver, which I expect would be very specific to your situation.
Long story short, I think it would be simpler to handle the camera tile as part of each dashboard, rather than trying to include it in the header. You could still position it in the same spot, though resizing the dashboard in a browser might not behave too nicely, but in normal operation the effect should be the same as what you were trying to achieve by including it in the header.
Try removing the camera iFrame tile from the header dashboard, adding it to the larger dashboard and position it over the top of the header iFrame.
Looks like I have a lot to reply to here! First off - thanks to everyone for your help!
- Yes! I'm a data engineer! mostly oracle & SQL based for the past 20 years, but I dabble in R & Python as well
- Google Calendar is using the "gCalendar Driver". I'm sure other ways work, but to keep it in agenda mode you just append this to the url: &mode=AGENDA
- So the camera on my dashboard isn't embedded in it's own tile iframe, but it is an image tile within the "header" iframe. The header iframe itslef is the top bar - with clock, weather, thermostats, and said image (by way of Blue Iris).
- I agree that perhaps taking the image off the header and putting it on each dashboard may be the answer, but that was just the use-case I selected. In the grand scheme of things, my bigger problem is the same issue. That problem is that I want a footer (not shown in my images as I haven't built it yet) that is simply 7 or 8 dashboard links. These would be in a reusable footer, aka, iframe that I'd place on each page so I could maintain it once. The issue is, if I click on the dashboard link in this iframe, the dashboard only opens up on the footer. I want it to reload to a different dashboard entirely.
So -
Footer 1 will contain dashboard links to Sonos and HSM, for example.
Dashboard 1 (HSM) would contain Header 1, Body A, and Footer 1.
Dashboard 2 (Sonos) would contain Header 1, Body B, and Footer 1
If I'm on Dashboard 1 (HSM) and I click "Sonos" on Footer 1 - I want the entire "page" to revert to Dashboard 2 - aka:
Header 1, Body B, Footer 1.
Then, if while on Dashboard 2 (Sonos), if I click "HSM" on Footer 1, the entire "page" would revert to:
Header 1, Body A, Footer 1
Hard to describe in text, easy with mouth words 
Essentially. I want header & footer to remain static, and Body (the middle) to change based on what I select on the footer.
Hmmm.... I can see what you mean, not a one-off requirement..... Maybe a small driver could help provide a few more features for a URL link that opens from within an iFrame.....
