[NEW UI] Feedback

[gysmo38]

Not an issue. Just use this issue to get feedback from new UI. What i want/will add:

• Pagination for SD card files
• Selection for SD card files (to delete or download)
• Manage configuration save (download/upload)
• Configuration page to reset config files (copy .dist to .conf)
• login page. I already try but manage session break my brain...
• multi view page to watch others Dafang hack cams
• add theme color. css are already there, I just need to finish cookie part

I don't known if I will found time to do all of thoses. I spend a lot of time doing the new UI. I will take a break.

Just give me feeback, if you enjoy it, find bugs or have new ideas.

I hope, it could become the new default UI and maybe delete the old one :)

[jmtatsch]

Love the amount of configuration that can be done via the web interface now. Personally I would love to see more options for viewing/ managing the sd card files. Second would be changing the base color of the theme. How about a nice light blue that is easy on the eyes like #45a1ff? or a more vibrant #00afb5 and #00c4cc to highlight the selection?

[gysmo38]

@jmtatsch PR #1449 add theme color selection. I hope you will find one good for yours eyes :) For SDCard files, I will try to add mass download/delete, pagination and sort.

[PasteurPT]

Hi,

How can I test this new UI? In beta branch?

Default UI (master branch) should have an option in "Camera Controls" to enable save videos to sd card. In this menu we have "Motion - Snapshots" (save snapshots to sd card), so maybe it's a good option to create "Motion - Videos".

For me, it algo will be nice if we have an option in UI to enable save o FTP... maybe you could create these options in your new UI.

[gysmo38]

@PasteurPT Yes you need to update to beta branch. After update go footer page and click New ui link :) I think all you want is already in the new ui. Give me feeback if something missing.

[pfefferle]

@gysmo38 are there any plans when to merge the new UI into master?

[Combie81]

UI looks good - is there a dark theme as I prefer dark backgrounds. Can the reboot option also act similarly to the update reboot where it auto-redirects to the main page after reboot?

[PasteurPT]

@PasteurPT Yes you need to update to beta branch. After update go footer page and click New ui link :) I think all you want is already in the new ui. Give me feeback if something missing.

Yeahhh! Everything is in this new UI. I suggest to hide passwords (e.g. FTP password). You are hidding SMTP Authentication password, so don't forget to do the same for other password inputs if possible. I'll test this new UI and give you some feedback.

Thanks!

[jmtatsch]

Love the new image management ui. Can we get thumbnails for the 10 images pagination? Looks like a great main ui.

[jmtatsch]

Or a viewer were we could click through from image to image.

[gysmo38]

@pfefferle don't knwon. I hope soon . @Combie81 Yes I will add dark theme. Also yes for reboot I will add it. @PasteurPT :) I will correct password input @jmtatsch I will try to find something for images. I also try embeded video viewer but the codec not work with browsers.

[jmtatsch]

maybe this as viewer https://fengyuanchen.github.io/viewerjs/ ?

[PasteurPT]

It's not related to this new IU, but "/system/sdcard/config/cameraposition" file is always with 0 in x and y axis. Is it only wrong for me?

[Combie81]

When clicking on download I get 404 error - it looks to be a path issue??

[Combie81]

Feature request: config entry for rows to display so it can always be 100/50/all/xxx by default

[gysmo38]

@Combie81 Your lighttp.conf is not updated. In ssh do cp /system/sdcard/config/lighttpd.conf.dsit /system/sdcard/config/lighttpd.conf

[Combie81]

It's up to date - I just compared the 2 files and they are the same - with the exception that I've turned off https - Could this be the cause?

[gysmo38]

@Combie81 strange I have same error when my lighttpd conf miss viewer part. Is URL https://IP/viewer/ work for you? You should saw list of files.

[Combie81]

I see the file list - just can't download. My URL is http://IP/viewer...........

[gysmo38]

@Combie81 OK I will check

[gysmo38]

@Combie81 I am not manage to reproduce on mine. Do you you an ip address or an hostname?

[Combie81]

I'm using IP address

[jmtatsch]

The control/services icon is not very intuitive imho. Do you have other options for that?

[gysmo38]

@jmtatsch I can replace them by toggle button for control and auto start?

[OneOfTheInfiniteMonkeys]

First thoughts (well you asked, though I keep in mind UI is hard, very hard and if I don't like it I can change it): Windows 10, Firefox 76.0.1

Overall the UI feels clean and snappy, roll overs work as anticiapted and the font is clear.

Setting the colour does not affect the background, only the bars. As a result the white background tends to wash out the image for example. I prefer the default dark theme of the default software in this respect.

I think the image update rate is smoother for the main image in this release.

Drop down menu fold out is nice as you roll accross the top line icons however I would prefer text in the drop down menu occupy one line for each item or have seperator lines. As otherwise it tends to make it harder to identify if the long menu items are multiple items or long descriptions.

Home icon - use causes a "flash" on both pieces of UI software which I find unpleasant

Settings icon - see comment on menu seperator lines

Menu icon - I feel the icon should use thinner lines and not have the dots in the lines Preferred style would be https://fontawesome.com/icons/bars?style=solid

Information icon - uses odd terminology i.e. "Informations", again lack of sperators makes it harder to understand functionality of the horizontal menu. Additionally when selecting between items the menu and lower bar "jump" about.

Notifications (Alarm Bell) text with smilly face perhaps better with "No notifications", "Everything OK :)" might infer the system is OK when it's not the purpose of the menu item (I assume).

Text in the About box is a little strange: i.e. Back main UI

I could spend a lot longer on the UI, however the high light - SD card management. Motion "Loading your files" - propose use "Loading" only and needs an activity indicator When selecting a file it loose the UI !! Could do with pop up thumb nails, otherwise YES! :-) Would prefer to be able to multi select and no confirmation box option Downloading opens the image in the current session, we have to press the back button! Does delete work at this point, possibly not. For No File Found perhaps size to the same as the header so things don't 'jump about' the screen.

As I said UI is hard, I hope the feedback is helpfull and is intended as supportive and positive not negative.

[gysmo38]

@OneOfTheInfiniteMonkeys Thank for the feedback. I will try to made change according your feedback. I am working on the image gallery for sdcard :)

[jmtatsch]

Just looked at the icon options in fontawesome. Not too many great options for controls or services. How would you like the https://fontawesome.com/icons/tools?style=solid icon?

[jmtatsch]

Ah i think there is a misunderstanding. I mean this icon is difficult to see services and controls behind it:

But it would look awesome if these would toggle and be colored by the theme:

[gysmo38]

ok :) I will change services and control icon. In fact start and stop button change color according the state of the service. I can change it by a toggle button. I will try it.

[PasteurPT]

The control/services icon is not very intuitive imho. Do you have other options for that?

I have the same opinion. I like services/control icons in default UI, but it's only my opinion.

[gysmo38]

New PR. I really try to improve according all your feedback. Feedback is really appreciated :) I need to re work the About modal, Picture integration.

[jmtatsch]

Impressive improvements.

Here it is hard to discern the difference between on and off statuses. Can you make off autostart toggles grey out?

[OneOfTheInfiniteMonkeys]

If I may, "my two penneth here" is that the gray surround is not the optimal solution. Typically such a switch has the background colour of the switch change (to gray possibly), leaving the document background in place. Probably easier to implement as well.

The Proposal is based on the design of the physical item these slide switches were based on. The switch comprsed typically a peg (round or square) into a flat back plate which was painted with two colours, one on each half. The relevant colour was revealed when the switch was moved accross.

Possibly increasing the size of the slide switches and if I recall, increased spacing from the left border may also asssit.

Look forward to see what's implemented.

[PasteurPT]

First of all, thanks for your effort @gysmo38.

Just my 2 cents:

• Services sliders are better IMHO. But could slider backgorund became green if service is enable and grey (or no color) if disable?

• "Camera Controls" button can appear in main menu? Now it's only accessible in camera image. In this option, slider can be green if option is enable? I think you could add more options to this menu: Video like Snapshots to sdcard; Video and Snap to FTP; Send Matrix;

• I don't like "Other Update Otions" in a different "section". IMO all options should appear at same time and no one shouldn't be "hide";

• In "Software auto night setting" last "table" (ISP exposure log2 id, ISP WB Temp, ISP Iridix strength) is larger than main frame. At least for me...;

Thanks!

[gysmo38]

@OneOfTheInfiniteMonkeys and @PasteurPT Thank you for feedback.

I will work on sliders.

Green color for slider appear for me a good solution :) It is easier for me :p

For camera controls, I will see if I can add another button but I am not fan of two paths for going on same page. Yes it is a good idea to add more sliders on it. I have not found the time to do it.

I like Other update options :) In fact it show you the button you should use other are only for emergency. So I think it's better to hide them a little.

For Software auto night settings, you are right. In fact I just copy/paste previous html code. This page need some work.

[jmtatsch]

Could you add a recording button left of the move and option button on the image triggering the record service?

[gysmo38]

@jmtatsch Yes we can :+1:

[PasteurPT]

Updated and sliders are good for me (maybe you can use same green as "play"). Thanks @gysmo38

[Combie81]

A weird issue I've noticed on the Control System page is that even when the service is enabled the "Control" column doesn't seem to highlight/reflect the current status correctly with the exception of auto-night, ftp and rtsp-h264.

Do ignore the autostart column - it's not how I normally run - it was just to test what services started on reboot.

[gysmo38]

@Combie81 Thanks. This is a bug for all autostart configured with new UI. I forgot an 's' on controlscripts directory ;) With last PR #1460, it should work now.

For RTSP h264 and mjpeg, both can not run same time. I would prefer to have a variable in rtsp config file to say it we use mjpeg or rtsp. After we can have only one rtsp service on the webpage and start the good one according the configuration.

@nik0 I am not sure if there is impact of doing this.

[OneOfTheInfiniteMonkeys]

More feedback. Really like the new interface, its proving easy to move around.

Not sure if there have been fixes in the bakground, I assumes so, Video recording is now recording as expetcted. Though I did accidently have the capture zone outside the video image somehow.

The picture preview is nice for the snapshot images. The SD management is also nice.

Would like ideally a multi select option for deleting files, possibly delete everything older than a certain date / time or number of days / hours.

To all involved thanks.

[Combie81]

@gysmo38 Yeah - I only ever start one (h264) and use it, this was just for showith that indicators didn't match :)

I've also noticed if you save on motion page it wipes out all comments and a lot of the settings that were originally there. I'm working on motion.cgi now and will paste it in here shortly for you to double check and add to your next pull if it's correct :)_

[jmtatsch]

Can you please make the on/off toggle a little bit larger and center everything vertically in the row? Also, can you please make the start/stop button toggle as well and use the colors of the theme? Then please make this the new default UI for the beta branch.

[gysmo38]

@jmtatsch Ok i will made change. For UI, I make it the new UI or clean previous UI from the repo.

[Combie81]

Then please make this the new default UI for the beta branch.

Looking forward to this :) I'd say remove it IMHO to save the space..... (also means less files for me to kill spaces in :P)

[gysmo38]

I am agree and I try to get things somplest to manage. All pages have 3 files: page.html for html code, js/page.js for javascript code and cgi-bin/page.cgi for bash script

[jmtatsch]

@gysmo38 I would say remove previous ui from the repo to remove complexity.

[gysmo38]

:) I will also try to put third part javascript in a different directory

[PasteurPT]

@gysmo38 any new feature in this new UI to test?

[gysmo38]

@PasteurPT I add a menu in System to take config snapshot and restore it :) You can also download it. It is not possible to upload it at this this. I also push a PR to made this UI the new default UI.

[jmtatsch]

@gysmo38 can you please have a look at that again?

Can you please make the on/off toggle a little bit larger and center everything vertically in the row? Also, can you please make the start/stop button toggle as well and use the colors of the theme? Then please make this the new default UI for the beta branch.