FireTV or Android TV as MM client

kayakbabe

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

korey_sed

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;
}
}