RasPipC - Cameras on your TV made Easy.

[nayr]

@ruppmeister, demo has been updated with your icons.. Ive got two views with 4 cameras so I need an icon for the 4R page if you can..

cheers thanks, next up multilanguage support.. this is something i'd like out of the gate, at least basic support so you can just language pack it.

ps: can you also flip me #2 sideways, I think I am going to add that layout also since it'll work better on widescreen.. also #3 is upside down from the defaults, the larger frames always on top to begin with.

 

[ruppmeister]

@nayr - I updated the icon set with your requested changes. Let me know if you need anything additional.

View attachment RasPipC_Icons.zip

 

[ruppmeister]

Found a "bug" trying to arrange 7 feeds - can't move the large video feed on the right all the way to the bottom. Looks like the two little ones are stuck at the bottom right, although you can flip them with another one of the small ones. Perhaps it was designed this way, but just wanted to let you know. (using Chrome v. 48.0.2564.97 m)

Edit: also in the 10 feed view, if you place a large window in the bottom right, the one window gets stuck over the top of the large feed (see screen snap).


in the 13 feed view I just started to move the large view around and found that it would go where I wanted it to go at times, and then I lost 2 of the feeds from the screen and got the big one stuck behind another smaller one again (screen snap)


seems that this is common for me to get one stuck and can make it happen with just about any of the layouts with many feed windows.

 

[neilyboy]

Really cool project. Look forward to getting this up and running as things progress on my network setup.
Nice work!!
Neil

 

[bp2008]

Very cool, nayr. Some of the layouts are still a little unpredictable (e.g. cameras overlapping, or where you move a camera and another camera moves also even though it didn't need to). Do you have a good solution for optimizing screen usage when you want to show a bunch of different aspect ratio cameras ... 4:3, 16:9, 9:16 (portrait), 3:4 (portrait)? It looks like your layouts are all optimized for 16:9 (and wider/cropped) cams right now.

 

[ruppmeister]

I found what the problem is with rearranging that I was seeing. If you grab a window and drag it below and to the far right of the layout and let go of the mouse, the window will drop on the bottom right without moving the other windows.

 

[cball]

@cball you got some time to play with your cheap china cams and omxplayer for me?

turn audio back on and see if the following works on your cameras, reading through the code this looks like it will disable audio on a feed!
omxplayer --aidx -1


​if you find success I am adding a new option on configuration page to disable audio incase of problems.

Hi Nayr,
the first test was successful.
I have still the rpisurv running and were just able to change the call of omxplayer in the worker.py
I let it run some time and report back.

 

[nayr]

@bp2008, the aspect ratios of the grids will be whatever your monitor is, got a 16:10 monitor? you got 16:10 grids.. 4:3 monitor, 4:3 grids.. as all I am doing is dividing everything up equally.. ie (resolution width/4 = grid width), and everything is either a grid of 4x4 or 3x3.

You'll be able to letterbox/stretch/zoom-to-fit each camera individually, so if you have any corridor cameras your proabibly going to have to live with whatever's in the middle of frame and use zoom-to-fit.. (it'll crop the top and bottom off to make the width fit w/out stretching) or letterbox em which would look horrid.

perhaps at some point in the future I can add the ability to define a custom grid, but the difficulty of pulling that off will be very high compared to what I am doing now.. so expect me to implement all the other features I have in mind first before I start scoping out that issue.. I am drawing a blank on how to accomplish that without a massive amount of code, that would have to be maintained by only me at this point.

This is a totally free and open source project, contributions are welcome, as it matures who knows where it'll go.. its just a baby right now and were going to raise it right since its a Pi I think it'll catch some talented coders attention for some project I never dreamed of sooner or later.

@ruppmeister, Ive hit that issue too.. havent figured out what the deal is.. I need to double check my default templates, I coulda got some coordinates mucked up.. thanks for all the help.. right now id say fix it back to a normal display or else its not going to render correctly.. JavaScript is a bitch like this, took me a day to squash a similar issue.

@cball awesome, by default now will have all feeds be no-audio, so that should help compatability out alot.. from drop down you can select No Audio/HDMI/Speakers/Both for your choice of audio... you could have one camera playing out the monitor and another camera playing out a remote set of speakers if you liked.

 

[acp_xt]

Thank you for this super project. Some feedback on the webUI: at 100% in Chrome on my 1080p screen, the view does not resize to fit and scrollbars appear vertically. Zooming out to 90% gets rid of the scrollbars and the views fit perfectly.

 

[nayr]

can you do a screenshot? thats odd, I am testing on a monitor less than 1080p and its fine.. a large portion of this app is actually chrome, NodeJS = Chrome JavaScript Engine, AngularJS = Google, and all my work has been via chrome.

Status Update: Its getting really close to being ready for release, mainly squishing bugs and some last minute features/polishing.. mostly onvif support, interacting with omxplayer via d-bus.. both are simple backend tasks that should be easy.

 

[acp_xt]

Hi here's a screenshot. The laptop is a Dell Inspiron 13 7000 series. The screen is 13.3" at 1080p resolution.

 

[ruppmeister]

@nayr - What do you want to do as far as project logo goes? If you have any thoughts and want me to make one for this project, I can make it for us.

What do you think about something like this one, an eye inside a shutter inside a "play" triangle?

 

[nayr]

thats not 1080p, thats 1920x1020 with a big DPI.. your missing about 60 pixels and thats why its cut.

not sure I can do much about that.. thats pretty A-typical I think. I'll play around with it a bit

 

[bp2008]

perhaps at some point in the future I can add the ability to define a custom grid, but the difficulty of pulling that off will be very high compared to what I am doing now.. so expect me to implement all the other features I have in mind first before I start scoping out that issue.. I am drawing a blank on how to accomplish that without a massive amount of code, that would have to be maintained by only me at this point.

3 thoughts.

1) Maybe you just have the user define rigid coordinates in JSON like so:

[
{"rect":"0,0,1280,720"},
{"rect":"1280,0,640,720"},
{"rect":"0,720,640,360"},
{"rect":"640,720,640,360"},
{"rect":"1280,720,640,360"}
]

(that is just an example layout for a 1920x1080 monitor; one 1280x720 cam region, 3x regions along the bottom at 640x360 each (16:9 ratio), and one odd 8:9 ratio region in the upper right)

2) A GUI for the above could work if you make each camera rectangle movable and resizable more or less just like a desktop window (optionally constrained to a certain aspect ratio).

3) Maybe do something like Blue Iris, which lays out the cameras in rows, scaling the cameras of each row so they are all the same height. This creates a fairly clean look with regards to the black space between cameras, but doesn't work very well for small numbers of cameras. Also does not handle one camera being larger or higher priority.

 

[acp_xt]

thats not 1080p, thats 1920x1020 with a big DPI.. your missing about 60 pixels and thats why its cut.

not sure I can do much about that.. thats pretty A-typical I think. I'll play around with it a bit

Hi I am running 1920 x 1080 (double -checked). Its my bad really, the screen shot software I use didn't capture the taskbar, here's a full screen screenshot at 100% zoom.

 

[nayr]

@bp2008 it should be doable with the way I have architected this thing, omxplayer takes direct coordinates just like that and can be changed on the fly via DBUS commands.

the way it works now is every time something changes an AJAX call stores the JSON used to build the gridster array into a simple database.. then when the page loads it calls whatever was last stored for that view, if there is nothing in the database it uses default values from a template file.. when you go to apply the view it runs it through an algorithm based upon the detected screen resolution and calculates coordinates and fires off all the needed commands to build the display.

so what I'd need is a "custom" tablet that instead of defining rows of 3x3 or 4x4 does it instead like 12x12 (divisible by 3 & 4) and then simply allow resizing and add plus/minus buttons for adding/removing elements.. the multiples would still be related to your aspect ratio but with 144 spaces to work with as opposed to a mere 16

damnit, look what you made me do.. now I scoped it out, so its gotta be done.. sigh.. can u code JS by any chance? lol

@ruppmeister, dunno bout logo.. havent put much thought into it.

I have a bootsplash screen that I really like, its a Banksy of a graphitti'd security camera was going to include it in my image.. mebe something like it, http://wallpoper.com/images/00/37/22/50/banksy-cctv_00372250.jpg

 

[cball]

Nayr: even if this is hard to say: "we can wait... as long your are keeping on coding" each:

 

[nayr]

i also found something new while working on the dbus functions.. apparently I can provide coordinates for cropping too.

so add to the list of stuff I want to do, is add a cropping UI that lets you draw a square on the screenshot of your feed and zoom the fucking monitor in on it.. oh but wait, what if I could perform some more wizardry around this and have the f'n ability to digitally zoom on the fly... oh yeah <coolaid man>

see what happens when you dont stick to a plan! this is the trap of coding.. I need to focus on getting a good functional release out so I can fix all the bugs I currently dont know about before I start adding more features and making the bugs even more complicated.. all that's important right now is I have a good idea how I want to do these future features so when the time comes I dont find my self having to rewrite everything to accomplish it.

a self-updating function will make it into the first release.. so adding stuff later on will be painless, hopefully.

 

[nayr]

ive hit an impasse on that drag bug, its a known issue upstream and the "fix" is just making things worse: https://github.com/ManifestWebDesign/angular-gridster/issues/283

so my options are to basically live with it right now, move onto better things.. or abandon the angular-gridster for something entirely different.. such as Packery @ http://packery.metafizzy.co/

its going to be a massive re-working to switch to packery at this point no matter how I cut it, and it could have its own issues once implemented.

so for now I think I am going to live with the issue in angular-gridster and push on, its ugly but its not impossible to work with.. if you experience it, you can clean it up and get it back on track and it wont leave you with a messed up display.

however packery offers some really nice effects, and I think it'll be critical for a custom grid view later on down the line (see the masonry layout demo).. so I am going to keep martching on right now and come back to this later.. could get lucky in the meantime someone might figure out the issue upstream and fix the problem.

Raspipc just got its first bug report, there's a milestone! https://github.com/nayrnet/raspipc/issues/1

 

[ruppmeister]

Packery looks pretty nice but leave some odd shape holes in the layout due to not reconfiguring they layout when a tile is rearranged. Not a huge deal breaker by any means but I like how gridster doesn't require the user the move each and every tile when making the changes to layout.


Sent from my iPhone using Tapatalk