New UI facelift anyone?

stevie · (This post was last modified: 2018-01-31, 01:50 PM by stevie.)

Hello,

wondering is there is any interest here for a new theme for nextpvr? im not talking about just skin color, a complete overhaul of the UI.

i have started to make some changes and created some new interface pages that is easier to browse and easier to find things. problem with the normal UI is it's not every good for lots of channels and requires lots of scrolling (i have like 500 channels).

this is what the "Now" page looks like.

from this page you'll be able to either select a channel by clicking its icon and taking you to a list of everything that is being aired on that channel. similar to the guide, but rather a horizontal layout, it will be a vertical layout. the listing will be separated into days.. this will allow you to go into a channel and view everything for that channel for whatever amount of days of data are available. from here you'll be able to quickly add a recording. from here you'll also be able to play the channel (just like the Now page) by clicking a dot menu of some sorts that will give other options (such as set it to record as well).

anyway, i have experience in designing layout, colors, etc.. but i could use some help in javascript, as im a bit inexpeirenced with it. my strenths is with php (im a former developer) and the colors and style of this new UI that im working on is inspired by a previous site of mine. i love making simple UIs that uses nothing but colors, borders and gradients rather than littered with images and crap.

all im looking for is someone to give a hand in pulling some information that i need and some javascript math for things like finding how much time is left on listing, etc.. so i can add some more features to it.

there isn't much activity here, but perhaps there is still some life here left? Wink

***sub*** · 2017-10-09, 12:36 AM

Sure, I'd say we'd be interested in including improvements to design of the web app. Myself and UJB are the first to admit we're a bit challenged when it comes to web design.

I'd probably reserve judgement on whether the gradient styling looks good until I'd seen it on another page, like the TV Guide. It looks ok in that screenshot. Hard to know if it might look a bit heavy with lots going on, or on a smaller screen.

stevie · 2017-10-09, 04:21 AM

yeah, it might look a bit heavy on some of the gradient border, i will tweak them more. aiming to get the channels to look kind of like cards with a bit of 2D pop using just a bit of css.

the guide i want to add depth as well, so it's easier to read and thicker blocks helps. down side is some more area used up, but i think the benifits out weigh. i'd also like to increase the spacing between each hour slot on the top of the guide. i think hours are too close together, maybe shorten the guide to only show 24 hours

at the top of the guide maybe put the days for the week ahead, simply click each day to take you to that day. can leave the drop down menu for those that still prefer it Wink

would look some thing like this:

Code:
Sun      Mon      Tues      Wed      Thurs      Fri      Sat        

 8        9        10       11        12         13      14

7:00 am                   7:30 am                          8:00 am                      9:00 am                      9:30 am      

----------------------------------------------------------------------------------------------------------------------------------------------

Show number 1              |  Show number 2                                              | Show number 3

----------------------------------------------------------------------------------------------------------------------------------------------

maybe even put the episode name below the show number in small font, if it's available.

just some ideas for now. i will tweak some of the other pages such as recording list, etc. and then i'll post the ui theme.

also, the colors aren't in stone and they can be change.. maybe even make two of the same and one blue and another the orginal colors with the new stuff/layout.

***sub*** · 2017-10-09, 04:28 AM

Generally that looks pretty good. It'd be nice if you could make those scroll bars look a little nicer (even if only for browser that support changing the appearance of the scrollbars)

Remember to keep in mind smaller screens, like mobiles/tablets etc, in mind, so that content works ok there too. It should be ok.

It'd obviously be nice to fix those could of things that don't line up properly (like the bottom timeline needing to be hard against the bottom of the page) etc.

stevie · 2017-10-09, 04:31 AM

bar that shows the time line progress of the show to add to channel grid live TV listing. i guess it's a matter of getting the program start time and comparing local time and formulating a 0-100% to that on the bar... something like that anyway. something for you in the future, out of my JS area.

the hamburger menu (or 3 dots dunno what the correct term is Wink

it will open a small popup menu to maybe select record or watch channel

***sub*** · 2017-10-09, 06:34 AM

Looks good.

scJohn · (This post was last modified: 2017-10-10, 07:08 PM by scJohn.)

You will need to have an understanding of JavaScript but I think a very good understanding of CSS will be more important. Picking a good CSS framework will make your job much easier.

"Remember to keep in mind smaller screens, like mobiles/tablets etc, in mind, so that content works ok there too. It should be ok. "

I would primarily design for a 1080P TV screen (not sure if existing frameworks are designed to scale to 4K). IF your framework is 'responsive' then you should be all set for TV, tablet, and mobile. For mobile, I would just make sure that it works(is functional). I think the vast majority of users will be TV. tablet. But I could/may be wrong.

2leftfeet · 2017-10-09, 08:57 PM

scJohn Wrote:You will need to have an understanding of JavaScript but I think a very good understanding of CSS will be more important. Picking a good CSS framework will make your job much easier.

"Remember to keep in mind smaller screens, like mobiles/tablets etc, in mind, so that content works ok there too. It should be ok. "

I would primarily design for a 1080P TV screen (not sure if existing frameworks are designed to scale to 4K). IF your framework is 'progressive' then you should be all set for TV, tablet, and mobile. For mobile, I would just make sure that it works(is functional). I think the vast majority of users will be TV. tablet. But I could/may be wrong.

all good ideas, but please keep in mind that the EPG of whatever design should be viewable from a distance ~10 feet or so, unlike Kodi Krypton (where I have to modify the xml's so that I can read the EPG listings, including descriptions)

UncT · 2017-10-10, 04:58 PM

WOW this is really cool. Just remember that some of us old people like white backgrounds.

stevie · (This post was last modified: 2017-10-10, 06:59 PM by stevie.)

scJohn Wrote:You will need to have an understanding of JavaScript but I think a very good understanding of CSS will be more important. Picking a good CSS framework will make your job much easier.

"Remember to keep in mind smaller screens, like mobiles/tablets etc, in mind, so that content works ok there too. It should be ok. "

I would primarily design for a 1080P TV screen (not sure if existing frameworks are designed to scale to 4K). IF your framework is 'progressive' then you should be all set for TV, tablet, and mobile. For mobile, I would just make sure that it works(is functional). I think the vast majority of users will be TV. tablet. But I could/may be wrong.

thing is, i don't think a CSS framework is really needed unless building many web apps/pages or if you're really really new to CSS and need to put some quick pages together.

a lot has changed over the last few years where 5 lines of css now would of required 20 lines to get it formatted correctly with lots of workarounds before. i've never used bootstrap, and even i find that confusing and a bit tedious to work around. i think a lot of their css formatting is overly complicated.. especially with things like formatting divs and columns. i think even for new users, you're better off learning to build your own mini-framework. probably take less time than learning to tweak their framework to work with the layout you want to make.

although right now i'm mostly just tweaking the existing pages in the modern UI, and maybe fixing a few issues like the scrollbar in the guide having a gap.

the colors might appear dark, it's easy on the eyes, much better than white for sure. more contrast and stuff stands out better i think. you'll see Wink