FireTV or Android TV as MM client

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…