PI based ROv utilising..Node.Js..socket.io and HTML5 canvas

Anything to do with the Raspberry Pi
perfo
Posts: 151
Joined: Jan 27th, 2015, 12:05 am

PI based ROv utilising..Node.Js..socket.io and HTML5 canvas

Post by perfo »

Well the title states it all really, This is my latest idea on the control system for my PI based ROV.

I've been getting a lot of help from chaps on this forum as I haven't fiddled with any of the above software before starting this project...
Moki has been particularly helpful and has a goo working example of what I hope to achieve (in his own thread).
Why don't I just copy Moki's you ask ?
Well he has offered to let me use it and it does do most of what I want to do ,,, but I'm just one of those people that like to know how things work so used this project as opportunity to learn new stuff..
Please go and read Moki's post on his PI based ROV as it is pretty good and answers many of the questions you may have if doing it yourself..


Anyway I've reached a stumbling block that if anyone can shed some light on it would be appreciated.. Incidentally if I get mine working then I will post it on GIT hub and follow Moki's lead and left any one that wants to use it or get bits from it...

So my problem

I've been beavering away drawing lines and stuff whilst learning html canvas.
I can click on buttons on the keyboard or screen of a networked PC and turn on / off an LED connected to my PI using socket.io
I've learnt enough of HTML and java script to place a nice viewport showing the stream from my IPCam in the middle of my web page and pan/tilt it from my joy stick or on screen buttons... All is good I though until I tried to put them together.

I had hoped I'd make my screen a canvas and place the ip cam stream in the middle, I would then be free to put any sort of graphics anywhere around the Cam stream and get it looking like I want. After loads of google searching and trial and error I can't seem to find a way of putting my stream on the canvas... I can put a webcam connected to the client PC on the canvas but that's not much use.
I'm guessing this is such a common thing to want to do it can't be that difficult but alas I can't find out how to do it...

Thanks in anticipation for anyone that can help
rossrov
Posts: 383
Joined: Feb 28th, 2013, 5:01 pm
Location: Australia

Re: PI based ROv utilising..Node.Js..socket.io and HTML5 can

Post by rossrov »

Hi perfo. I used window.open to give 2 browser windows side-by-side. Just tried to see if my IP cam would work live in 2 windows, a bigger with a smaller one laid on top. No worries. Did this manually in Chrome. Your can tell the browser to size and position the windows, and also remove the browser address bar.
Edit: Forgot to see what happened if I clicked the outside window. I guess that might make the inner disappear, which wouldn't be much use. Depends on what controls you will be using and how they affect the browser. Inelegant, but if you cannot avoid that happening then maybe 4 windows bordering the centre one.
User avatar
Moki
Posts: 119
Joined: Oct 21st, 2014, 2:19 am
Location: The Netherlands

Re: PI based ROv utilising..Node.Js..socket.io and HTML5 can

Post by Moki »

Why put the camera image on the canvas?

I think, you should put your camera image behind the canvas. And use the canvas as an overlay.
Play with the Z axis of the canvas a bit.
User avatar
olegodo
Posts: 222
Joined: Aug 30th, 2013, 9:47 am
Location: Bergen, Norway

Re: PI based ROv utilising..Node.Js..socket.io and HTML5 can

Post by olegodo »

Is it possible to make the ROV web page in full screen and transparent in any way? That way you can use it as an overlay over a separate video feed. In that way even people using analog video can use this software easily.

My reason for asking this is that I have noticed a delay problem when viewing my ip cam in a web browser. Seems fine at first, but randomly it starts to lag with delays up to 3-5 seconds or even more.
However if I use one of the "onvif" programs to see my video stream i experience no delay. (ONVIF Device Manager for example)
If I'm not totally wrong, these programs use the RTSP address for to the video stream and this is something that is not easily implemented in to a html page.
perfo
Posts: 151
Joined: Jan 27th, 2015, 12:05 am

Re: PI based ROv utilising..Node.Js..socket.io and HTML5 can

Post by perfo »

Thanks for the ideas...
Rethinking it I don't need to actually imbed it an over lay will do perfect thanks..... I hadn't really realised the Z order of things but now I'm reading up on It, it does indeed look like I may be able to have the Iframe set behind the canvas and still. I shall have a play...

I've done one during my VBA phase that utilise an invisible bit of a VBA form and during that time I have learn the take the boarders and menu bars off the screen . If you make it fill the screen it's not easy to click off it. I forget the key presses but you have to click ctrl and something to get back to your desk top...

However using a html canvas is almost the same thing in that you make the canvases fill your html page and hopefully it will be invisible to things on the web page beneath the canvases and thus you can draw on top of the video stream...

I still think there will be a away of using a direct ipcam stream in a canvas maybe by using three.js or something but for my purposes this over lay idea will work for me...
perfo
Posts: 151
Joined: Jan 27th, 2015, 12:05 am

Re: PI based ROv utilising..Node.Js..socket.io and HTML5 can

Post by perfo »

z orders did the trick... thanks

My next head ache is sizing... my ipcam is 640 X 480 so my iframe is 640 X 480. But I want this to be in the middle of the screen so that if the screen being used is smaller or bigger then the ipcam output is still normally size/ratio. I can auto size the canvas as this will always be set to fill the screen but sizing the iframe is proving tricky...
perfo
Posts: 151
Joined: Jan 27th, 2015, 12:05 am

Re: PI based ROv utilising..Node.Js..socket.io and HTML5 can

Post by perfo »

Answer was simple enough in the end. I'm trying to keep everything resizable so it'll look right on any size screen but this is limited to the 640X480 cam picture as there's not much point trying to view it much smaller than this..
I'm beavering away at my front screen now and even if I say so myself it is looking good..

I've decided to go for depth, heading and internal pressure as the only sensor data to show on the screen. The pitch roll and stuff is interesting but does anyone actually use it for anything?
a_shorething
Posts: 289
Joined: Sep 10th, 2013, 5:26 pm
Location: New Jersey Shore

Re: PI based ROv utilising..Node.Js..socket.io and HTML5 can

Post by a_shorething »

Perfo,

That sounds really cool. You're like a dog with a bone, you just don't give up!

For the pitch/yaw/roll, I wasn't going to do that either but I was thinking about it and there are times (in my local waters anyway) when I've been on the way down or back up when there was no point of reference and I imagine a video screen would make it even worse.

It might be good to have some way to at least know if your ROV is listing or pitched down more than 20-30 degrees when you don't have any video reference except murky water with the lights shining into it.

YMMV, and you could make a case that if you can't see well you wouldn't be sending it down anyway. Just my .02.
perfo
Posts: 151
Joined: Jan 27th, 2015, 12:05 am

Re: PI based ROv utilising..Node.Js..socket.io and HTML5 can

Post by perfo »

Ha as long as I get there in the end I'm happy... Life work and stuff do get in the way so I can certainly see why the scientists in days of old locked themselves in basements for weeks at a time...

You could also argue if you have the other sensor data on board then why not show it.. But it would still potentially be interest only. My craft is hopefully going t be balanced so any pitch or roll that doesn't right it self means I've got a serious problem somewhere. Hmmm maybe an accelerator reading helps in terms of feed back ie max thrust and no movement means your stuck on something or props have fallen off etc ... this may be handy knowing before you flatten the batteries..
Maybe version 2 will have a little instrument panel...
This javascript being case sensitive is a pain though....
a_shorething
Posts: 289
Joined: Sep 10th, 2013, 5:26 pm
Location: New Jersey Shore

Re: PI based ROv utilising..Node.Js..socket.io and HTML5 can

Post by a_shorething »

perfo wrote:Ha as long as I get there in the end I'm happy... Life work and stuff do get in the way so I can certainly see why the scientists in days of old locked themselves in basements for weeks at a time...

You could also argue if you have the other sensor data on board then why not show it.. But it would still potentially be interest only. My craft is hopefully going t be balanced so any pitch or roll that doesn't right it self means I've got a serious problem somewhere. Hmmm maybe an accelerator reading helps in terms of feed back ie max thrust and no movement means your stuck on something or props have fallen off etc ... this may be handy knowing before you flatten the batteries..
Maybe version 2 will have a little instrument panel...
This javascript being case sensitive is a pain though....
Ha ha. Yeah, I'm still transitioning to a much more 'finicky' language than I'm used to as well.

varNum1 is different from Varnum1. Sometimes hard to see when you're cruising through the code.
Post Reply