New web interface with Bootstrap

[andybotting]

The current web interface is functional, but a little hard on the eyes. I've been working on adding the Bootstrap CSS styles to the fang hacks pages, and I think it's a nice improvement.

Here's a couple of work-in-progresses:

This is purely cosmetic, with no functional changes at this stage.

I'm happy to continue this work and get a pull request up if there is sufficient interest in this to get it accepted.

[Protocol-IRK]

Please continue this! Whilst my CSS and web dev skills suck. I'll lend encouragement!!

[blautob]

Looks gorgeous

[andybotting]

OK thanks guys. I'm super busy right now, but will hopefully have something available soon

[samtap]

I'm planning to create a page to control a bunch of video settings (brightness, auto-focus, rgb-gain, awb basically anything that can be controlled by snx_isp_ctl and/or items in /proc). Could you provide some kind of skeleton for adding new pages? I know html/css/js to some degree but I just dislike writing it and chasing down annoying layout issues ;-).

Also I'm ditching boa webserver. The next release will use httpd (included by busybox) which supports authentication, and stunnel to access it over https. This seems to work as is (without any changes to the current cgi scripts), but you might want to have a look to see if httpd provides any other features we can use to our advanrage, if the cgi api is any different compared to boa etc. I'd be surprised if there're any issues since bootstrap is just css/js that runs client-side, but it's worth a try since httpd is already included in the sd image anyway. If you want to try with stunnel let me know, I can provide the binary + config I've been using for testing.

[andybotting]

Hey @samtap - your plan sounds great. I was thinking about looking into a page for at least setting resolution/quality of the video too. Is that something you were going to tackle as part of that work?

Auth on the web server is a good idea. I'd be keen to test your scripts, but as you say, I can't image it'll make any difference to the bootstrap stuff as it is all client side.

Now that I know you're keen, I'll have to clean up my butchering of your code :) I'm going to probably write a few function scripts to save duplicating the HTML. I'll get something semi-respectable up soon.

[andybotting]

@samtap Have a look at https://github.com/andybotting/fang-hacks/commit/2816a9b20a3b086318fbe7e0b173caaefe834807

I've moved the cgi-bin scripts into their own directory, and added a css and a js directory, and symlink as appropriate from fang_hacks.sh (untested).

I've added header.tpl and footer.tpl files into the cgi-bin directory and included them in status and scripts as examples.

It's all very basic, and the HTML probably needs more love, but might give you an idea about what I was thinking.

[samtap]

Looks good to me, I'll try to merge some of your stuff soon. For future changes I would prefer if you use git to move files around instead of deleting and checking in new files (makes the diff more clear). Resolution and quality settings can't be changed on-the-fly and are apply to rtsp server config. So that would probably be a different page. Video settings like I mentioned earlier would also apply when using the cloud apps to view the video. Besides allowing changes through the webif, we also need something to persist changes and apply them after a reboot. And there's a bunch of settings in /proc/isp that I have no idea what they do yet...

[andybotting]

Yeah, I moved them with git mv, but looks like status and scripts have changed too much for git to realise and diff them properly along with them also being moved.

Don't merge that commit yet. Let me finish updating those other pages, and I'll send up a PR once I'm done.

I liked the idea of https://github.com/samtap/fang-hacks/pull/200 to configure the rtsp settings, but I'm not a fan of the implementation. I was planning on making something a bit nicer, but to achieve a similar result later on.

Also wanted to thank you for your hard work on this. My folks live down the street from me and we have a p-t-p wifi link between our places. They've just had a litter of puppies, and this camera has been perfect for me to monitor them from my place and shoot around if I need to. reet from me and we have a p-t-p wifi link between our places. They've just had a litter of puppies, and this camera has been perfect for me to monitor them and shoot around if I need to.

[samtap]

For rtsp server parameters I think it should work like this (but I'm happy to change my mind if someone has a better approach):

• All params at the top of the rtsp-server shell-script (param="value"), used when it starts the server i.e. ./xf_rtsp_server -param "$param". The script should also probably do some sanity checks to catch illegal (combination of) params.
• A webpage that allows to change settings. It would have a bunch of controls for all parameters
• A button to apply the params to the running rtsp server (using a control-pipe, i.e. echo "format=1920x1080x30" > /tmp/xf_control)
• A button to save the params by rewriting key="value" stuff in the rtsp server script so it gets applied on reboot or when restarting the rtsp server.

For video settings (anything that can be applied on the fly, by writing to /proc/isp or running snx_isp_ctrl etc, doesn't require to re-initialize the video-hw and works with any application (cloud apps, rtsp server)

• Create some kind of .ini file to store all settings
• Create a script to apply stored settings at boot
• Create a web page with a bunch of controls for all settings, populated by reading the current value directly from /proc/isp or whatever other source (not the ini file)
• Use ajax requests when users change a settings to immediately apply the change
• Provide a save button to persist current settings to .ini file.

[andybotting]

This issue is getting wayyy off-topic, but have you ever used OpenWRT/LEDE. It's a really clean, well designed system. Obviously, it would take a huge amount of work to port the cam to it, but it could well be worth looking at leveraging some of their tooling around config management, web interface and package management on top of what you have now.

Web interface (does ajax stuff): https://github.com/openwrt/luci/wiki

Config management: https://wiki.openwrt.org/doc/uci (and https://wiki.openwrt.org/doc/techref/uci#usage_outside_of_openwrt)

Package management: https://wiki.openwrt.org/doc/techref/opkg

I guess it just depends on how serious you want to get with this.

[samtap]

I know openwrt as a user, so it would take a lot of effort. It's been suggested before but I have no plans to spend work on it. If there's somebody else I'd be happy to contribute of course. Some have said they would but then disappeared never to be heard of again ;)

What would be interesting is creating a 'generic' OpenWRT flavor suitable for multiple brands/models of cheap china camera's. They could all more or less share the same web-interface, busybox, ssh etc. just a different rtsp binary, kernel.

[Pandry]

I really like the concept, but I would prefer the actions as buttons, wouldn't u?

Crappy concept:

[andybotting]

Yeah, I like it. I've been tied up lately, but I'm hoping to get some time to work on this again soon.

[timsayshey]

Nice work @andybotting! Looking forward to this

[samtap]

I've started on a new webif myself using Foundation. I'm a bit occupied with but I'll commit some stuff asap...

[andybotting]

@samtap Should I put the brakes on then?

[samtap]

@andybotting That's up to you. I can't promise I'll get anything finished, but trying to work on features as described in previous comments. I'll commit what I have next week so hopefully we'll be able to work together from then.