FireTV or Android TV as MM client

[korey_sed]

I want to run the MM server on my PC and use FireTV or Android TV connected to my TV to display it. So far I tried getting a cheapo Android TV off of amazon and use Chrome to display MM but the experience is very bad. The Text is way too big (sure I may be able to fix with CSS) and the refresh/layout is just not right.

is Fire TV Stick 4K Max a better option?
is there a way to do this on the Roku 4K sticks?
Has anyone done this before?

The ultimate goal is to use Fully Kiosk Browser so it displays in full screen but I thought FireTV maybe too locked down and the Android TV boxes I tried are not good at all.

Any suggestions?

Background: given that rpi is hard to find and if found 3x the price, I want to use go down this route. Also casting is not an option I am looking at.

Thanks

[sdetweil]

@korey_sed I haven’t tried the built in browsers on the smart tvs

now I have

it gets the title of the page, but no content

says javascript is enabled but doesn’t act like it… np keyboard other than on screen so any checkout any debug options

[OldSunGuy]

The built-in browser on my older LG smart TV doesn’t display MM, but I loaded the TV Bro app on my Google’s chromecast with Google TV and it looks pretty good.

P.S. ‘Chromecast with Google TV’ is a Google branded user interface on Android TV in a chromecast capable dongle.

[sdetweil]

@OldSunGuy my Chromecast does have any externally accessible function. only cast to.

[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/

[korey_sed]

@kayakbabe Thanks. this is good advice. I am hoping the MM core CSS already does this and it is only my custom CSS I have to worry about, but will find out soon. Waiting on my Chromecast with GoogleTV to arrive.

[sdetweil]

@korey_sed core tries to be adjustable… but add on modules may not

[korey_sed]

So it turned out to be very easy.

Fully kiosk browser told me that the resolution is 1920 x 1080 even on a 4K TV so I just had to change the body. For some reason setting it to 100% causes issues but. this works and nothing else needs to change.

@media screen and (max-width: 1920px) {
body {
height: 1080px;
width: 1920px;
}
}

[sdetweil]

@korey_sed said in FireTV or Android TV as MM client:

the resolution is 1920 x 1080 even on a 4K TV

depends on the hdmi port support,
pi3 is 1920x1080,
pi4 is 3840/2160, MAX, but could be lower,
i don’t remember the pi02w…
pi0w is 1920
odroid xu4 is 1920,
jetson nano is 3840,
both of my chromebox models support 3840

[korey_sed]

@sdetweil this is different.

chromecast itself has the HDMI wire attached and I can watch TV shows in 4K, however when I open a web browser (Fully Kiosk Browser) , it is at 1080. I guess it could be the app, but I got the same results with different browsers.

[sdetweil]

@korey_sed so they are not making the 4k support available to outside (their function) users…