ALERT - Major UI Changes - Work in Progress

Previous development branch now released as 1.36
Locked
User avatar
knight-of-ni
Posts: 2404
Joined: Thu Oct 18, 2007 1:55 pm
Location: Shiloh, IL

ALERT - Major UI Changes - Work in Progress

Post by knight-of-ni »

I just pushed a new events view to our master branch. It's still a work in progress, and needs a ton of testing. These changes will show in our nightly builds in a day or two.

NOTE: We have noticed that a browser cache reset has been needed in some cases to pick up the latest changes, so before you report something isn't working, please reset your browser cache.

Some of the new new features:
- better pagination
- search bar
- column show/hide
- thumbnail magnifies on hover
- full screen button

The table toolkit we are using is modular and has extensions. You can see them here:
https://examples.bootstrap-table.com/#e ... drbar.html

If there is an extension that would benefit the events view, then please request it.

Please go here to report all new UI related issues:
https://github.com/ZoneMinder/zoneminder/issues/2991

Please read the first post. It contains a list of punchlist items. If the item of concern is not listed in that first post, then please post to the bottom of the thread.

Please do not create a new issue for every button or other minor UI related problem.
Visit my blog for ZoneMinder related projects using the Raspberry Pi, Orange Pi, Odroid, and the ESP8266
All of these can be found at https://zoneminder.blogspot.com/
User avatar
bkjaya1952
Posts: 282
Joined: Sat Aug 25, 2018 3:24 pm
Location: Sri Lanka

Re: New Events view WIP

Post by bkjaya1952 »

New features are looking great !

Thank you for adding modern features.

I have tested all the buttons . All are working properly

Screenshot from 2020-08-17 18-34-22.png
Screenshot from 2020-08-17 18-34-22.png (143.57 KiB) Viewed 47489 times
User avatar
knight-of-ni
Posts: 2404
Joined: Thu Oct 18, 2007 1:55 pm
Location: Shiloh, IL

Re: New Events view WIP

Post by knight-of-ni »

Awesome thanks. See how it says "loading please wait" across the screen? That's a bug I just fixed this morning.

Oh, and hover over the thumbnails... it should magnify and stream the video.
Visit my blog for ZoneMinder related projects using the Raspberry Pi, Orange Pi, Odroid, and the ESP8266
All of these can be found at https://zoneminder.blogspot.com/
User avatar
iconnor
Posts: 2860
Joined: Fri Oct 29, 2010 1:43 am
Location: Toronto
Contact:

Re: New Events view WIP

Post by iconnor »

I find that thumbnail width at 80 works pretty well. On my system the thumbnail column is 95px. 80px for the thumbnail is a round divisor of most common widths.
DVB Hardware
Posts: 201
Joined: Thu Jan 01, 2015 5:12 pm
Location: Rhode Island

Re: New Events view WIP

Post by DVB Hardware »

I like it, mouse over thumbnail video preview works here
Dark theme needs some font color adjustment ..see pic
What would be nice is a list of the css tags that control the font sizes to tweak them a little larger. I have not tried it yet



Jimmy
Attachments
z1.jpg
z1.jpg (47.78 KiB) Viewed 47447 times
Linux Mint 21 Cinnamon Mariadb 10.6.x using Master 1.37.x latest always

DVB stands for Digital VIdeo Broadcasting , retired satellite downlink supplier
User avatar
knight-of-ni
Posts: 2404
Joined: Thu Oct 18, 2007 1:55 pm
Location: Shiloh, IL

Re: New Events view WIP

Post by knight-of-ni »

Font sizing is part of the style sheet for the dark skin, which is here:
https://github.com/ZoneMinder/zoneminde ... k/skin.css

The contents of this file override the default css which is here:
https://github.com/ZoneMinder/zoneminde ... e/skin.css

The css files are organized by class. You'll need to open your browser debug console and hover over the element in the console to see what class each html element belongs to.

Due to the many css layers, it takes a little practice and some trial & error to get the results you want.
Visit my blog for ZoneMinder related projects using the Raspberry Pi, Orange Pi, Odroid, and the ESP8266
All of these can be found at https://zoneminder.blogspot.com/
User avatar
iconnor
Posts: 2860
Joined: Fri Oct 29, 2010 1:43 am
Location: Toronto
Contact:

Re: New Events view WIP

Post by iconnor »

Given the # of people who like dark theme and also the modern prevalence of dark mode...

we should probably spend a little more time testing/improving the dark skin. Has been on the todo list for a while but since I don't use it, it isn't on my consciousness.

Maybe this is something that someone could take on. The layout should just inherit from base, just need to add colour overrides for various things.
DVB Hardware
Posts: 201
Joined: Thu Jan 01, 2015 5:12 pm
Location: Rhode Island

Re: New Events view WIP

Post by DVB Hardware »

I agree the dark theme just needs very little tweaking and it is done.
A tiny more detail in the title of what each controls would be great.

Example: In my above image( start time, end time etc) is black font. I spent 2 days trying to find it, the only thing I can guess it is a default and not assigned in the css. Using dev tools debug console in chrome and firefox shows td but nothing listed. And I see the same black font on other pages so it may change all others.
I know only very little css and I mean very little

Still on it !
UPDATE: I found it ( .table color #212529 ) still looking where to change it.
image attached
table.jpg
table.jpg (6.42 KiB) Viewed 47315 times

Aparently I needed to add the below to the dark skin.css to override the default

.table {
width: 100%;
margin-bottom: 1rem;
color: pink;
}

Challenging but satisfying..on to the next one

Jimmy
Linux Mint 21 Cinnamon Mariadb 10.6.x using Master 1.37.x latest always

DVB stands for Digital VIdeo Broadcasting , retired satellite downlink supplier
User avatar
knight-of-ni
Posts: 2404
Joined: Thu Oct 18, 2007 1:55 pm
Location: Shiloh, IL

Re: New Events view WIP

Post by knight-of-ni »

Thanks for doing the work.

The style change affects all tables, rather than a specific table(s). Can you verify that this change does not negatively affect other tables, such as the main console and/or the Options view?

I'll merge your changes once I hear back from you. Thanks!

PS: It's the first change or two that takes the longest. Once you past that hump, further changes go quicker.
Visit my blog for ZoneMinder related projects using the Raspberry Pi, Orange Pi, Odroid, and the ESP8266
All of these can be found at https://zoneminder.blogspot.com/
DVB Hardware
Posts: 201
Joined: Thu Jan 01, 2015 5:12 pm
Location: Rhode Island

Re: New Events view WIP

Post by DVB Hardware »

This only effects the following, I'll give you a image to see exactly jpg name depicts page/location I went through all the tables I could find
I'll use weird colors to stand out in image, change the color to what you feel acceptable

.table {
width: 100%;
margin-bottom: 1rem;
color: pink;
}

events-zm.jpg
events-zm.jpg (113.15 KiB) Viewed 47275 times
console-zm.jpg
console-zm.jpg (47.57 KiB) Viewed 47275 times
audit-events-report-zm.jpg
audit-events-report-zm.jpg (56.07 KiB) Viewed 47275 times
Jimmy
Linux Mint 21 Cinnamon Mariadb 10.6.x using Master 1.37.x latest always

DVB stands for Digital VIdeo Broadcasting , retired satellite downlink supplier
DVB Hardware
Posts: 201
Joined: Thu Jan 01, 2015 5:12 pm
Location: Rhode Island

Re: New Events view WIP

Post by DVB Hardware »

This effects the same 3 images above
events-zm
console-zm
audit-events-report-zm

In original when event is highlighted with your mouse text. Start Time, End Time, Duration etc. font changes black

/* Highlight event table line */
.table-hover>tbody>tr:hover {
background-color: orange;
}

Jimmy
Last edited by DVB Hardware on Wed Aug 26, 2020 3:15 am, edited 2 times in total.
Linux Mint 21 Cinnamon Mariadb 10.6.x using Master 1.37.x latest always

DVB stands for Digital VIdeo Broadcasting , retired satellite downlink supplier
Johnny1337
Posts: 14
Joined: Tue Oct 15, 2019 11:22 am

Re: New Events view WIP

Post by Johnny1337 »

Looks very nice. Would be great if the video could be in centre of the screen when hoovering events. :)
User avatar
knight-of-ni
Posts: 2404
Joined: Thu Oct 18, 2007 1:55 pm
Location: Shiloh, IL

Re: New Events view WIP

Post by knight-of-ni »

Good idea, but the video cannot appear in a place such that the mouse is no longer over it. The center of the video cannot be too far away from the thumbnail. If it is, you get a ping pong effect of cycling zoom unzoom.

Could possibly do that with a click, but at the moment I like the effect occurring on hover.
Visit my blog for ZoneMinder related projects using the Raspberry Pi, Orange Pi, Odroid, and the ESP8266
All of these can be found at https://zoneminder.blogspot.com/
Johnny1337
Posts: 14
Joined: Tue Oct 15, 2019 11:22 am

Re: New Events view WIP

Post by Johnny1337 »

Aha ok, then I understand. Great work!
DVB Hardware
Posts: 201
Joined: Thu Jan 01, 2015 5:12 pm
Location: Rhode Island

Re: New Events view WIP

Post by DVB Hardware »

I like the thumbnail / video on the console page directly below the monitor name.
On the event page it is far right, looks like you are splitting up the table real estate being in the middle of the table.
Do you think a better position for the thumbnail between monitor & cause keeping eye focus in one area rather than looking left and right.
Just a thought.

Jimmy
Linux Mint 21 Cinnamon Mariadb 10.6.x using Master 1.37.x latest always

DVB stands for Digital VIdeo Broadcasting , retired satellite downlink supplier
Locked