RasPipC - Cameras on your TV made Easy.

[nayr]

those demos are all working with different size objects so its kinda hard to imagine how its going to work for this.. I probably should prototype a simple grid where all the objects are the same dimensions and then I think it'll work much like gridster does.

gridster uses simple defined blocks, sizeY = 2, sizeX = 2 makes a square 2x2 grid, so that works with my current implementation of griding out the display and calculating coordinates.

Packery uses objects with actual defined sizes and so they can all be unique slightly and it still does its best to fit them all into the same space using advanced sorting algorithms.. thats how it can do that masonry type layout.

moving to packery will open up the option for custom grid design to be extremely flexible with all sorts of shapes and sizes which will be great for corridor cams and a mix of 16:9 and 4:3 cams.. however it'll make things vastly more complicated to compute the layout and display the same thing on a monitor that could be any size or resolution.

implementing packery at this point would probably be a whole development cycle focused specifically on it, but as a consequence custom drawable view would be implemented.. so its a bit out right now, I have a a major release planned (inital release) followed by a few bursts of bugfixes before moving on to the next major version with new features.. so summer maybe heh, new version of Packery came out and none of the AngularJS wrappers picked it up yet and I am not keen on writing one this fresh into Angular so hopefully that gap fills in soon too.

 

[nayr]

Translations are checked in, here is the translation files: https://github.com/nayrnet/raspipc/tree/master/public/language

Preferably I would like people to submit pull requests against that on github, that way it'll track you contributions and also lay blame if someone slips me something offensive

its pretty easy, just get a GitHub account, fork the project, modify that file, and it'll ask you if you want to submit it back upstream when u go back to your fork on GitHub.. then you can delete your fork.. I think you can all do it via browser for simple file edits.. It will make it easier for you to maintain your language as I inevitably add more dialog.

When you provide translations let me know if your a native speaker or just ran it through some bablefish in your ear, just so I can judge accuracy.

I did a quick google translate to french, if you set your browser to french the demo should all be in another language

 

[bp2008]

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

Hahaha. We'll see how things go. Yes, I can write JS. I've never used AngularJS or NodeJS, but I am quite familiar with jQuery.

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

Sometimes when I run into bugs like this, it is easier to just scrap the whole 3rd-party library and write my own replacement which does exactly what I need in a fraction of the code. I actually wrote a similar grid dragging thing for work some years ago, but all the tiles were the same size by design which makes that job a whole lot simpler.

 

[bp2008]

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.

View attachment 9111

Unless nayr wants to make the camera grid area automatically scale itself up and down to fit the browser better (which can be a very complex task), your best bet is to either reduce your system-wide DPI scaling or just run that page at 90% zoom

I tried the easy option of adding a css "zoom" style to the body element, but the grid dragging library being used there does not handle it right.

 

[acp_xt]

Unless nayr wants to make the camera grid area automatically scale itself up and down to fit the browser better (which can be a very complex task), your best bet is to either reduce your system-wide DPI scaling or just run that page at 90% zoom

Hi thanks for the reply. The DPI scaling is the default that Dell has set to make text legible on such a small screen at this high resolution I guess. If it's difficult to make the elements responsive, of course I can always zoom out Just wondering though wouldn't this sort of scenario be more common with more and more small sized high res devices being sold?

Sent from my SM-A500F using Tapatalk

 

[cball]

4b. ahh the sound issue, omxplayer needs a --no-audio switch.. I may have to implement this my self so you dont have to disable audio streams on your cams.. you just wont get sound on the monitor if you cant find a compatible encoding type.

I havent tested it but it should work with MJPG via CGI, omxplayer will play MJPG or H264 files off HTTP/RSTP and even FTP.. It'll even do MPEG-2 and VC-1 if you buy a license for it.

$ for codec in H264 MPG2 WVC1 MPG4 MJPG WMV9 ; do echo -e "$codec:\t$(vcgencmd codec_enabled $codec)" ; done
H264:    H264=enabled
MPG2:    MPG2=disabled
WVC1:    WVC1=disabled
MPG4:    MPG4=enabled
MJPG:    MJPG=enabled
WMV9:    WMV9=disabled

If you have an old MPEG2 camera then you'll need this to unlock the hardware decoder (~$3.50USD): http://www.raspberrypi.com/mpeg-2-license-key/

Hi NAYR,

I got my MPEG2 licence totay and new even my 12 your old cams work again!!

AWESOME!!!

 

[nayr]

@bp2008, I actually started off with Node to replace my dependency on php.. and it just knida evolved and this is actually my first foray with a MEAN stack (Mongo/Express/Angular/Node), its not truly mean because I am not using mongo, just seemed like overkill and mongo is not supported on armv7 due to 32bit.. so I am using neDB instead since its more suitable, but its calls are very Mongoish..

This is the first thing UI wise I have done in a long time, and the only reason I am finding such quick success is building on other peoples libraries heh.. I am kinda keen on sticking with standard libraries so its easier to maintain support as browsers continue to evolve.. Gridster worked perfectly for my original prototyping, but as I added views and grids thats when the issue appeared. The alternate I am looking into right now is highly popular, and most people have to pay for a license, since the developers get paid for it I have a feeling bugs actually get fixed in a timely manner.. since this is a foss project I get to use its GPL-3 license.

I will be able to detect if someone has a mucked up grid layout when they go to apply it to the display, if so I can just throw an error, try to fix the layout (probably just reset it to default) and force a refresh.

@acp_xt, your setup is very uncommon, I believe when I switch grid engines I will have the ability to scale the grid correctly for smaller screen devices.. until then just play with the zoom.

@cball, awesome.. glad you got em working, thats a really good indicator that most people will be able to get a stream displayed.. one way or another.. Have not encountered many cameras that wont give you either h264 over rstp or mpeg2 over http.. I might create a UI on the about page showing the serial # and inputting license key just so the non-linux folk dont get shy of a root console.

*edit*
NEW: About page now lists Video Codec Support and HW Serial Number

 

[cball]

Translations are checked in, here is the translation file: https://github.com/nayrnet/raspipc/blob/master/public/js/translations.js

Hi Nayr,
sorry, but I think posting a translation here is right now the faster way and I hope you can live with it:

 // German Translation
  $translateProvider.translations("de", {
    "DISPLAY": "Display",
    "SETTINGS": "Einstellungen",
    "TIP": "Tip: "Drag and Drop" um die Kameras neu anzuordnen",
    "IPCAMERAS": "IP Kameras",
    "CONFIGURE": "Kamera Einstellungen",
    "CFGNOTICE": "H264 und MJPEG nur über RSTP/HTTP (TCP)",
    "CFGMPG2": "MPEG2 erfordert Lizenz",
    "SCAN": "Scan",
    "ADDCAMERA": "Kamera hinzufügen",
    "NAME": "Name",
    "FEEDURI": "Stream URL",
    "JPEGURI": "JPEG URL",
    "ASPECTRATIO": "Seitenverhältnis",
    "FILL": "ausfüllen",
    "STRETCH": "strecken",
    "LETTERBOX": "Letterbox",
    "AUDIOOUTPUT": "Soundausgabe",
    "NONE": "kein Sound",
    "HDMI": "Monitorlautsprecher (HDMI)",
    "SPEAKER": "Externer Lautsprecher",
    "BOTH": "Beides",
    "DISCOVERY": "Discovery",
    "HOST": "Host/IP",
    "USERNAME": "Benutzername",
    "PASSWORD": "Passwort",
    "QUERYCAM": "Suche Kamera",
    "DELETE": "Löschen",
    "CANCEL": "Abbrechen",
    "SAVE": "Speichern",
    "HOMEPAGE": "Projekt Webseite",
    "VERSION": "Version",
    "HWINFO": "Raspberry Pi Hardware Details",
    "VIDINFO": "Hardware Video Support",
    "CPUSERIAL": "Serien Nummer Raspberry",
    "BUYLICENSE": "Lizenzschlüssel erwerben",
    "ENABLED": "ein",
    "DISABLED": "aus",
    "SUPPORT": "Support",
    "HELP": "Hilfe (Wiki)",
    "SOURCE": "Quellcode (GitHub)",
    "POWERED": "Unterstützt von",
    "AUTHORED": "Geschrieben von",
    "THANKS": "Vielen Dank an",
    "LICENSE": "Lizenz",
    "TMDISCLAIMER": "Alle erwähnten Produkt- und Firmennamen sind Marken bzw. registrierte Marken ® der jeweiligen Eigentümer.",
  });

The only word I'm not realy happy with is "Display" because I don't know the function jet.

When you put it in, I'll double check - I beleave this looks a little different in the screen.

 

[nayr]

Display would be a verb, to Display this layout on your Monitor/TV.

Awesome, im going to commit it right now!

Demo supports german now, it looks like the translator is escaping UTF8 characters.. I'll see if I can fix that.

 

[cball]

"DISPLAY": "Anzeige ändern"

I found a little error in the Camera dialog



edited:
found some minor errors with the translation:
When you add a new camera the name gets always English "New Camera"
The settingsbutton and the dustbin also have only English mouse over text

I would present the Tipp only the settings-site.
On the single Cams where you have added the numbers of the cams, you should add a text "Cameranumber" in German "Kameranummer"

 

[nayr]

caught that too, fixed and fixed.

 

[cball]

Need another translation:
"Camera": "Kamera",

edited: Does it make sense to add the word "OR" between the Stream URL and JPG URL to make clear, that it is ether one?
"or":"oder",

 

[nayr]

no jpeg url is for the WebUI to show an image instead of that dummy camera image, if you have both you should provide both.. I am working on implementing that right now.

I am thinking of adding the ability to also upload a screenshot, incase cameras dont support a jpeg url.

I cant find a missing translation of Camera, screenshot?

Perhaps I should label it, Screenshot URL?

 

[cball]

OK. Not bugging you any more.

The cross with the arrows helps alot - just seen it.

I would change "Scan" even in English to "Network Scan":"Netzwerk Scan",

edited: here:


You should explain label it, but screenshot url doesn't explain it ether ... no idea right now.

and you lost this one:
The settingsbutton and the dustbin (remove widget) also have only English mouse over text.
When removing cam - no dialog "do you really want to delete?"

Sorry but timeout for me now...

 

[nayr]

here is what it looks like when you give it a JPEG URI

 

[cball]

Preview URI

good Night

 

[nayr]

demo now updated with random images from around the internet, feel free to add more but dont wipe em out.. pls

status: very close, just a couple days away from a release candidate.. should become fully functional very soon.

 

[Razer]

Tested the demo site in Edge and it seemed to work fine, I had no issues that I could see anyway. I could drag and rearrange the names of the cameras fine but when I put them on screen they would revert back to how they originally were. So if I moved powers to 11 for example, then went to see them 11 would still be what it was before.

My only other thought was maybe having a popup tooltip on the camera numbers at the bottom so you could refresh your memory on which was which without going back to settings? Looks good though and running well from what I could tell at least. Can I setup rotations and the like? Save say three quad views and then set the system to rotate between the views at 10 second intervals? That would be a great addition.

 

[pbc]

This looks like a really cool project. Was originally going to get a Pi to try out Kodi, but was hoping they'd come out with a 4K version, which even the 3 is not. Maybe they're saying it for the "Pi 4"!

This may give me a reason to try one out anyhow. Wanted to have a small monitor on the kitchen counter to show the video feeds all the time that isn't overly intrusive in size. Was going to use a tablet, but an always on small monitor may work better.

BTW, where did you get the board to attach the pi to your monitor? Looks like a perfectly fitting circuit board, which I can't imagine you found. Did you cut it out from something else?

 

[Razer]

Well, I am not him but they do make mounts specifically for this I know.

https://www.adafruit.com/products/986

Is an example at least of a product that will work that I am aware of. I have a few Pis but not a 3 as of yet anyway though I am sure it will be coming....