FireTV or Android TV as MM client

OldSunGuy

@sdetweil Right. There are different hardware devices: Wikipedia Chromecast

kayakbabe

@OldSunGuy That’s because the browser software itself built into older TV’s and (even firestick, chromecast, appletv if they aren’t ever updated by their owners ) etc might not be compliant with the full newer html spec.

You also can find the situation where a web browser app on one of those older devices might have newer software insdie the app so it can display a website, that the builtin browser of the tv itself can’t display.

If that old TV/app/computer is running a really old browser software, it isn’t going to be able to execute the newer javascript versions.

So using the built in browser on older equipment is a crap shoot at best - especially with older televisions and old hardware that can’t be updated.

In those cases “casting” the output from the hardware running the serverside and clientside software over to the television is the only way to get it on the tv. The quality of the “casting” device is going to matter a LOT. Hardwiring with direct cables is always going to be the best.

But screen casting is really good now days. That said if you device only casts 720 and you have a 4k computer output and a 4k monitor it will look like crap. The screencast device can’t push the 4k info through it and will downgrade the signal to 720.
If you get a casting setup that matches the computer and monitor, it will look a lot better.

My old screen cast device looked horrible on my new 4k tv. So I gave it away and got a newer J5create screencast device that matches the output display on my pi and the capabilities of my best tv.
I can cast anything I want to the tv and it looks good.

many Chromecast /roku/hulu type devices are capable of recieving… but you might need a dongle added to your computer to send to it. I don’t use chromecast,firestick, etc.
Becuase I run the same software locally on my laptop and I just use the J5create to send the screen to my tv.

OldSunGuy

@kayakbabe I am not casting to my TV.

My MM does not screencast. I have MM setup to accept connections from the local WiFi network. The TV Bro app is just a browser installed on a dongle, that is connected to my TV.

kayakbabe

@OldSunGuy Thats really cool! I’ll have to check that device out.

korey_sed

@OldSunGuy Thanks.

I played with my setup some more and realized that it is the animation in MMM-Background that was causing most of my issues. Once i stopped that, it seems to work fine with the exception of the fonts being too big. Did you run into that latter issue as well?

Also took a look at Chromecast with GoogleTV. Looks like a better alternative to an official device that may last longer. I could not find specs on it, but I hope it can handle the animations.

TV Bro is also good but just in case you are interested, I was looking at Fully Kiosk Browser since it is also controllable from Home Assistant although i have not looked into it just yet.

OldSunGuy

@korey_sed Fonts were adjusted via CSS and/or (un)zoom.

The following was copied from Google Store

Length: 6.4 in (162 mm)
Width: 2.4 in (61 mm)
Height: 0.5 in (12.5 mm)
Weight: 1.9 oz (55 g)
Colors: Snow, Sunrise, Sky
Connectivity: Wi-Fi 802.11ac (2.4 GHz / 5 GHz); Bluetooth®

Operating System: Android TV OS
Resolution: Up to 4K HDR, 60 FPS
Supports resolutions up to 4K and high dynamic range (HDR)
Video Formats
Dolby Vision, HDR10, HDR10+ for stunning picture quality.
1Ports
HDMI to plug directly into the TV
USB Type-C power

korey_sed

@OldSunGuy

Thanks again. I did look into the hardware specs and it seems to run a Amlogic S905D3G (4x ARM Cortex-A55 @ 1.9 GHz). so it really is not much better than the device I currently use which makes me doubt if it can handle the animations.

As for the font size, it is a little more complicated than that.

Zoom out is not possible (seems to already be at the min)
Changing font size works but then line size, etc, also needs to be adjusted to fix it all, so a little more involved.
If I fix it for this, then I will most likely have issues with it on normal displays (e.g. using rpi as a client). This is not meant to be the only client.

Regarding the last point, is it possible to serve different CSS based on user agent string?

sdetweil

@korey_sed no, but… there is support for loal overrides in chrome browser

see this post
https://forum.magicmirror.builders/topic/17190/seperate-config-for-web-access/4?_=1662987708966

u might also be able to do settings in case based on screen size…

in another system I do

:root{
  --scale-factor: 1;  /* set default scaling in case we have partial window, debug or in vm terminal window */
  --design-width: 1920px;
  --design-height: 1080px;
}

@media screen and (orientation: landscape) {
    :root{
        --scale-factor: var(width) / var(--design-width);
     };
 }
 @media screen and (orientation: portrait) {
    :root{
        --scale-factor: var(width) / var(--design-height);
     };
 }

/* for example */
h1 {
    font-size:  calc( 120px * var(--scale-factor));
}

edit: updated css

korey_sed

@sdetweil
thanks. this is great. will try it.

kayakbabe

@korey_sed Another css tip is not to use “fixed” sizes for things like fonts and widths of div containers or images.

I prefer to use units which are relative in size like em and vh and vw which are relative size units. so 1em on a phone versus 1em on a high rez computer screen will be different sizes relative to the media display. better than pixels which are a fixed size and do not scale with the display.

For instance, I use vw and vh for images, because i actually move my pi around to different size monitors. vw is view height and vh is view width. So for my module that shows an random image (that can change from portrait or landscaped and size everyday), I set the css up for max-width: 50vw which translates to 50% of the view port size and 30vh. (vh is view height.) That way an image in that module will never be bigger than 50% of the width or 30% height of the screen. I find relative sizing really useful for websites that have to support a lot of different devices looking at it. No beans about it, MagicMirror is definitely a website.

You might want to google about relative css units. here is a links to get you started if you want to try it.

https://www.freecodecamp.org/news/css-unit-guide/