12 cameras in Full Screen (f11)

akeilox commented 4 years ago

how to show all 12 in full screen mode without scrollbars ? Referred : #4

firsttris commented 4 years ago

theoretically yes. its just a question if the layout can adjust this way automatically. what settings have you configured for columns ? try to set columns to 6 in settings. then the grid should create a row with 6 columns.

please give feedback.

firsttris commented 4 years ago

you can play arround with other column settings as well

akeilox commented 4 years ago

thank you for the prompt reply. I wish to use 3 columns, and 4 rows total 12 cameras. I had this view in other camera app, but trying to replicate this view with this extension in a TV connected to chrome view.

firsttris commented 4 years ago

can you post some screenshots with columns set to 3 and colums set to 6 for you 12 cams ? so i better understand whats missing.

akeilox commented 4 years ago

when columns set to 3, the 4th row shows cropped in full screen view (f11, 100% html height) so it becomes not visible in the TV view (scroll bars become visible, where user expected to scroll down to view it). As its a tv view with no mouse attached, i just want all 3x4 fit into the 100% height of the html view when user in full screen (f11).

firsttris commented 4 years ago

okay i could replicate your issue. will get back to you

akeilox commented 4 years ago

i tried on simple html with <body style="margin: 0; padding: 0; background-color: black; overflow: hidden"> not sure if that is any indication.

firsttris commented 4 years ago

i investigated why it is that way, because i actually did not remember at first.

the cam images will be aligned horizontally to fill the screen, but the vertical size of an image is then accordingly to its horizontal size - to not lose the aspect ratio.

it would still be possible to strech or to squeeze those images onto one full hd screen. BUT we would lose the aspect ratio of the image - means it would probably look shitty.

one solution would be to provide more columns - like 4 for 12 cams it would be 4 4 4 4 4 4 4 4 4 4 4 4 and would probably fit on an HD screen.

second solution would be to create an settings option to lose aspect ratio and strech or squeeze to make it fit not matter what.

akeilox commented 4 years ago

Thank you Tristan for sharing the detailed study.

I agree with you. Regardless it looks shitty there are instances where the user wants it that way. I think it would be best if the extension will have the "stretch"' option so users in same situtation can opt to go with this option. For instance there are cases user just wants to add "one more" camera, so this will still span to 4th row 4 4 4 4 4 4 4 4 4 4 4 4 4

akeilox commented 4 years ago

I would like to add, when I had the html sample of similar page I added keypad support, so the user can press 3 on keypad to make the 3rd item full screen, and backspace to return back to grid view. This helped to 'zoom-in' on the feed and easily return back to grid view. If you imagine a HD tv with a mini pc behind, and a USB key-pad attached, it becomes a somewhat useful feature.

I am sharing the snippet here in case it might be assistive in some way to someone with similar need;

`$(document).on("keyup", function (e) { // use e.which // key codes for USB keypad // 97 1 98 2 99 3 100 4 101 5 102 6 103 7 104 8 105 9 // 111 / // 106 * // 109 - // 107 + // 8 bkspc 13 enter // 110 del // 144 num lock // 37 < 38 up 39 > 40 down 9 // 36 (home 7) 33 pgup 34 pgdown 35 end 45 ins 46 del // 105 5 center (num lock off)

let key = Number(e.key)
var keys = [96,97,98,99,100,101,102,103,104,105,106];
var keyCode = event.which;
console.log(" keyCode: " + keyCode + " e.key: " + e.key)

switch (keyCode) {
case 8: 
    $("#c" + active).css("width", "").css("height", "").siblings("img").show();
    break;
case 106: 
    key='v';
    $("#c" + key).siblings("img").css("width", "").css("height", "");
    $("#c" + key).show().css("width", "100%").css("height", "90%").siblings("img").hide();
    active = key;
    break;
case 96: case 97: case 98: case 99: case 100: case 101: case 102: case 103: case 104: case 105: case 106:
    $("#c" + key).siblings("img").css("width", "").css("height", "");
    $("#c" + key).show().css("width", "100%").css("height", "90%").siblings("img").hide();
    active = key;
default:
    event.preventDefault();
}`

akeilox commented 4 years ago

Hi Tristan, any updates on this?

firsttris commented 4 years ago

hey @akeilox sorry, to be honest i had so much work todo that i already forgot about it.

do you have the skills to work on this? i could support you, the app is very simply

akeilox commented 4 years ago

i can do html but have not dealt with any chrome plugin development, not sure how to go about it

firsttris commented 4 years ago

that's perfect it's mainly html javascript and css. i used this VueJs framework.

but that app is very small very easy.

i think the parts you need to adjust could be only solved with html and css.

i think you need nodejs, for installing the project but thats it

here are some instructions how you can setup the project: https://github.com/firsttris/chrome.ipcamviewer#development--contribution

akeilox commented 4 years ago

thanks for the pointers, i have loaded up the developer extension. Which file I should be fiddling with to change the grid layout ?

firsttris commented 4 years ago

https://github.com/firsttris/chrome.ipcamviewer/blob/master/src/components/Multiview.vue

there's method getLayout()

we are using the bootstrap grid layout

https://getbootstrap.com/docs/4.0/layout/grid/

firsttris commented 4 years ago

we need to add something like

    if (this.columns === '4') {
      return 'col-3';
    }

for 4 columns

but you also need to extend the settings page to be able to choose 4 columns

firsttris commented 4 years ago

its basically like this, one bootstrap row has 12 columns so if you say one colum has like 3 it will be like 12 / 3 = 4 columns see bootstrap docs for more info

akeilox commented 4 years ago

got it, thanks Tristan. I'll study and play with it

firsttris commented 4 years ago

if you have any questions don't hesitate to ask.

the git flow to create a contribution is like this:

you fork the project (github/web)
you clone your fork (terminal)
do the changes for a feature (better contribute one feature at a time, not all at once, easier for review)
commit your changes and push them to your fork (terminal)
click the pull-request button (github/web)

firsttris commented 4 years ago

@akeilox any success ? :)

firsttris / chrome.ipcamviewer

12 cameras in Full Screen (f11) #10