Elphel 333 HTML at DVinfo.net

Oscar Spierenburg · February 3rd, 2007, 09:20 AM

Changing the html page to make it better for film making:

So far the most important info has come from Andrey:

<<you can change ccam.cgi but you do not need to do it. It is a binary application that processes HTTP requests in the camera, requests themselves are generated from html+javascript (camvc.html, *.js) files in ftp://<camera_ip>/usr/html/ directory (visible as http://<camera_ip>). This directory resides in JFFS system and is write enabled so you may change/add files there. For experimenting I would recommend using /var/html directory (linked as /usr/html/var) that is in RAM-disk so it is perfectly safe to change data there (will be erased after reboot) - files will be visible as http://<camera_ip>/var/
>>

Oscar Spierenburg · February 3rd, 2007, 07:43 PM

My first ideas are: how can we implement audio recording into the interface? Can we trigger a simple audio software in Linux through the HTML page?

And about the HTML page controlling the camera; can we just skip everything we don't (seem to) need in the current AJAX panel, or does everything depend on one another. If so, perhaps we can make a separate 'tap' in the control panel, with all the buttons we need for film making.

I'd like some suggestions about this.. I'll start experimenting with my camera soon. I'll post the exact HTML code if people are interested.

Andrey Filippov · February 3rd, 2007, 11:55 PM

Quote:

Originally Posted by Oscar Spier

My first ideas are: how can we implement audio recording into the interface? Can we trigger a simple audio software in Linux through the HTML page?

And about the HTML page controlling the camera; can we just skip everything we don't (seem to) need in the current AJAX panel, or does everything depend on one another. If so, perhaps we can make a separate 'tap' in the control panel, with all the buttons we need for film making.

I'd like some suggestions about this.. I'll start experimenting with my camera soon. I'll post the exact HTML code if people are interested.

Oscar,

I don't think I can help much right now - too busy. What I could recommend - make/experiment with a separate (small) application and use the current one for other controls - it is designed to be "nice" - look at the current setting before changing anything.

If you are brave enough to get into my (rather messy - I was learning ajax myself) javascript code - go ahead and try adding/modifying the current one and I'll try to answer particular questions (preferebly in the wiki so others could use it too). Small tip - if you are changing *.js files - clean browser cache each time - just "reload" will not help. This is why in the production software Makefile adds numbers to javascript file names (and edits links to them in html) so browser will not try to use old javascript file from cache.

Matteo Pozzi · February 5th, 2007, 03:15 AM

hi oscar I'm preparing a html page with a new gui ....
I think the best that we can do is something like a layer (like photoshop) with in beckground the classic interface ....when I've got something I'll show you
for audio maybe we can contact the programmer of audacity (http://audacity.sourceforge.net/) maybe they can help us

also have a look at http://wiki.elphel.com/index.php?tit...FAQ#Background I'm making a summary of this project

Oscar Spierenburg · February 5th, 2007, 07:47 AM

Matteo, that's great. I'm doing some tests myself with the camera, but somehow I can't get the page (the original one to start with) to work in the /var directory on the camera. I don't know what files need to be there besides the html file and js files.
Here is a zip file with all the files I use right now:
http://www.degalerie.nl/1/camvc.zip

Matteo Pozzi · February 6th, 2007, 08:19 AM

Hi Oscar I'm not able to help you cause I haven't the camera
but take a look at what I think is the best way to operate! tell me what you think...I'm planning to make also a selectable safe area layout for 16:9, 2,35:1 and 4:3

http://www.webalice.it/teo.poz/elphel_GUI/

I've made it with flash MX but I have found on the web that there is somthing similar for linux ....and open source F4L is the name

http://f4l.sourceforge.net/

Oscar Spierenburg · February 6th, 2007, 07:40 PM

It's very good. Really!
Somehow, this conversation is also going on at the other Elphel thread..
Andrey said it will be impossible to use those transparent buttons, so what I thought would be possible (like Odd says) is to have the controls in a separate frame. I made a quick example with your buttons in Photoshop.

Igor Babic · February 7th, 2007, 02:11 AM

Try to do your buttons on a black background, and that they look more simple. You dont want to make them distractive to your eye, this is camera and primary function is to see picture that records, and not the fancy buttons. Keep all your buttons and pulldowns away from picture like in your last posts. Anyway good work guys.

Oscar Spierenburg · February 7th, 2007, 06:15 AM

Yes, that's a good suggestion. The grey background can be black. I like Matteo's 'fancy' sliders though.
Also very important to note is that the whole left AJAX control panel is unnecessary with the new buttons, so it shouldn't be there.

Matteo, the only thing missing right now is the white balance. In Ajax its controlled by two sliders. When you double click on one of them, it will turn on or off auto balance. It could be made in just one button (balance ON/OFF)

Matteo Pozzi · February 7th, 2007, 06:22 AM

ok I'll try to fix it
one question ....how the two slider work?
you want that the white balance when you press the button you have said
save automatically the new state?

Oscar Spierenburg · February 7th, 2007, 11:16 AM

Yes, because you could easily set the white balance by pointing at a white board, and then press again to 'hold' the setting. If you want to edit the two sliders manually, you could go back to the ajax panel.
So, auto on/off (or hold) would be fine i.m.o.
Maybe others have a different suggestion.

Oscar Spierenburg · February 9th, 2007, 08:09 AM

I like the idea of a separate frame below the ajax interface.
But I wonder how it will work, because the camvc opens in a new window (with a message saying something like: translucent PNG images that are not yet supported by some browsers..etc.) You can select 'no' but then the image flips constantly between different sizes.

Maybe Andrey knows if is possible to get a new frame with the 'film controls' on the bottom of this page.

B.T.W. Is there a list of the HTML commands that the camera uses?

Oscar Spierenburg · February 10th, 2007, 05:37 PM

OK...
I've managed to edit the camcv page a little by putting a 16:9 frame size in the list in the ajax panel. Now I'd like to make it the default size.
I've also (more importantly) made a html page with two frames, the camcv.html on top and a new 'movie frame' on the bottom. So far I just made one link to record the stream, which is important to me because the record button(dvr) in the ajax panel doesn't work.

Here is a screenshot of the new window.

And when you press the REC link:

(B.T.W. I'd like to skip this frame too and go directly to 'record to disc')

Now I'd really like to work with the sliders by Matteo. I think we can easily use the sliders in the html page, but how should they be programmed. I'll try to search in the ajax html source code how the sliders work, but others probably (hopefully) know much more about this than me.
Again, for those who want to take a look at the files:
http://www.degalerie.nl/1/camvc.zip

Matteo Pozzi · February 12th, 2007, 04:09 AM

good news oscar
so did you implement a command in the bottom frame and it work! cool
I'm remaking all the gui in a bottom frame ...all black so no distraction! and
the slider :-) I don't konw how they work in html so I can't help you
I use flash! but all my work can be converted in simple html lenguage converting every buttons in png or animated gif
but for me is better using flash so that the work don't suffer of pixelation cause flash is vectorial! and all the frame is inside only one file!

Oscar Spierenburg · February 12th, 2007, 07:39 AM

That's good, I'm looking forward to the new version. I think flash can be used. We should be able to make html commands on the flash animations, or am I wrong? Flash buttons can have links, but I don't know how sliders work. Maybe somone can have a look at the camcv codes and see how the ajax sliders work?
I posted the files above.

Besides that, it was very easy to save the new files on the camera... I now begin to fully appreciate that Elphel is 'open source'.

February 3rd, 2007, 09:20 AM	#1
Oscar Spierenburg Major Player Join Date: Jan 2005 Location: (The Netherlands - Belgium) Posts: 735	Elphel 333 HTML Changing the html page to make it better for film making: So far the most important info has come from Andrey: <<you can change ccam.cgi but you do not need to do it. It is a binary application that processes HTTP requests in the camera, requests themselves are generated from html+javascript (camvc.html, *.js) files in ftp://<camera_ip>/usr/html/ directory (visible as http://<camera_ip>). This directory resides in JFFS system and is write enabled so you may change/add files there. For experimenting I would recommend using /var/html directory (linked as /usr/html/var) that is in RAM-disk so it is perfectly safe to change data there (will be erased after reboot) - files will be visible as http://<camera_ip>/var/ >>

February 5th, 2007, 03:15 AM	#4
Matteo Pozzi Regular Crew Join Date: Jul 2005 Location: Milan, Italy Posts: 169	hi oscar I'm preparing a html page with a new gui .... I think the best that we can do is something like a layer (like photoshop) with in beckground the classic interface ....when I've got something I'll show you for audio maybe we can contact the programmer of audacity (http://audacity.sourceforge.net/) maybe they can help us also have a look at http://wiki.elphel.com/index.php?tit...FAQ#Background I'm making a summary of this project Last edited by Matteo Pozzi; February 5th, 2007 at 04:06 AM.

February 10th, 2007, 05:37 PM	#13
Oscar Spierenburg Major Player Join Date: Jan 2005 Location: (The Netherlands - Belgium) Posts: 735	OK... I've managed to edit the camcv page a little by putting a 16:9 frame size in the list in the ajax panel. Now I'd like to make it the default size. I've also (more importantly) made a html page with two frames, the camcv.html on top and a new 'movie frame' on the bottom. So far I just made one link to record the stream, which is important to me because the record button(dvr) in the ajax panel doesn't work. Here is a screenshot of the new window. And when you press the REC link: (B.T.W. I'd like to skip this frame too and go directly to 'record to disc') Now I'd really like to work with the sliders by Matteo. I think we can easily use the sliders in the html page, but how should they be programmed. I'll try to search in the ajax html source code how the sliders work, but others probably (hopefully) know much more about this than me. Again, for those who want to take a look at the files: http://www.degalerie.nl/1/camvc.zip Last edited by Oscar Spierenburg; February 10th, 2007 at 06:40 PM.

February 3rd, 2007, 07:43 PM	#2
Oscar Spierenburg Major Player Join Date: Jan 2005 Location: (The Netherlands - Belgium) Posts: 735	My first ideas are: how can we implement audio recording into the interface? Can we trigger a simple audio software in Linux through the HTML page? And about the HTML page controlling the camera; can we just skip everything we don't (seem to) need in the current AJAX panel, or does everything depend on one another. If so, perhaps we can make a separate 'tap' in the control panel, with all the buttons we need for film making. I'd like some suggestions about this.. I'll start experimenting with my camera soon. I'll post the exact HTML code if people are interested.

February 5th, 2007, 07:47 AM	#5
Oscar Spierenburg Major Player Join Date: Jan 2005 Location: (The Netherlands - Belgium) Posts: 735	Matteo, that's great. I'm doing some tests myself with the camera, but somehow I can't get the page (the original one to start with) to work in the /var directory on the camera. I don't know what files need to be there besides the html file and js files. Here is a zip file with all the files I use right now: http://www.degalerie.nl/1/camvc.zip

February 6th, 2007, 08:19 AM	#6
Matteo Pozzi Regular Crew Join Date: Jul 2005 Location: Milan, Italy Posts: 169	Hi Oscar I'm not able to help you cause I haven't the camera but take a look at what I think is the best way to operate! tell me what you think...I'm planning to make also a selectable safe area layout for 16:9, 2,35:1 and 4:3 http://www.webalice.it/teo.poz/elphel_GUI/ I've made it with flash MX but I have found on the web that there is somthing similar for linux ....and open source F4L is the name http://f4l.sourceforge.net/

February 6th, 2007, 07:40 PM	#7
Oscar Spierenburg Major Player Join Date: Jan 2005 Location: (The Netherlands - Belgium) Posts: 735	It's very good. Really! Somehow, this conversation is also going on at the other Elphel thread.. Andrey said it will be impossible to use those transparent buttons, so what I thought would be possible (like Odd says) is to have the controls in a separate frame. I made a quick example with your buttons in Photoshop.

February 7th, 2007, 02:11 AM	#8
Igor Babic Regular Crew Join Date: Dec 2006 Location: Zagreb, Croatia Posts: 171	Try to do your buttons on a black background, and that they look more simple. You dont want to make them distractive to your eye, this is camera and primary function is to see picture that records, and not the fancy buttons. Keep all your buttons and pulldowns away from picture like in your last posts. Anyway good work guys.

February 7th, 2007, 06:15 AM	#9
Oscar Spierenburg Major Player Join Date: Jan 2005 Location: (The Netherlands - Belgium) Posts: 735	Yes, that's a good suggestion. The grey background can be black. I like Matteo's 'fancy' sliders though. Also very important to note is that the whole left AJAX control panel is unnecessary with the new buttons, so it shouldn't be there. Matteo, the only thing missing right now is the white balance. In Ajax its controlled by two sliders. When you double click on one of them, it will turn on or off auto balance. It could be made in just one button (balance ON/OFF)

February 7th, 2007, 06:22 AM	#10
Matteo Pozzi Regular Crew Join Date: Jul 2005 Location: Milan, Italy Posts: 169	ok I'll try to fix it one question ....how the two slider work? you want that the white balance when you press the button you have said save automatically the new state?

February 7th, 2007, 11:16 AM	#11
Oscar Spierenburg Major Player Join Date: Jan 2005 Location: (The Netherlands - Belgium) Posts: 735	Yes, because you could easily set the white balance by pointing at a white board, and then press again to 'hold' the setting. If you want to edit the two sliders manually, you could go back to the ajax panel. So, auto on/off (or hold) would be fine i.m.o. Maybe others have a different suggestion.

February 9th, 2007, 08:09 AM	#12
Oscar Spierenburg Major Player Join Date: Jan 2005 Location: (The Netherlands - Belgium) Posts: 735	I like the idea of a separate frame below the ajax interface. But I wonder how it will work, because the camvc opens in a new window (with a message saying something like: translucent PNG images that are not yet supported by some browsers..etc.) You can select 'no' but then the image flips constantly between different sizes. Maybe Andrey knows if is possible to get a new frame with the 'film controls' on the bottom of this page. B.T.W. Is there a list of the HTML commands that the camera uses?

February 12th, 2007, 04:09 AM	#14
Matteo Pozzi Regular Crew Join Date: Jul 2005 Location: Milan, Italy Posts: 169	good news oscar so did you implement a command in the bottom frame and it work! cool I'm remaking all the gui in a bottom frame ...all black so no distraction! and the slider :-) I don't konw how they work in html so I can't help you I use flash! but all my work can be converted in simple html lenguage converting every buttons in png or animated gif but for me is better using flash so that the work don't suffer of pixelation cause flash is vectorial! and all the frame is inside only one file!

February 12th, 2007, 07:39 AM	#15
Oscar Spierenburg Major Player Join Date: Jan 2005 Location: (The Netherlands - Belgium) Posts: 735	That's good, I'm looking forward to the new version. I think flash can be used. We should be able to make html commands on the flash animations, or am I wrong? Flash buttons can have links, but I don't know how sliders work. Maybe somone can have a look at the camcv codes and see how the ajax sliders work? I posted the files above. Besides that, it was very easy to save the new files on the camera... I now begin to fully appreciate that Elphel is 'open source'.