FPP UI design

[rickerd]

Is there a team or people to make the design or website friendler? Like put it in a 2020 theme or use modern javascript frameworks?

Just a question. It's a big thing to do but would be so nice if people would be dedicated to work on the design also instead of the "backend".

.. I do love this open source project so don't get me the wrong way please.

[ghormann]

We are aware that there some UI issues on mobile platforms, but I don't believe there is any active project underway to redesign the UI. Proposals are welcome (start with a Mockup please) though there would be some constraints. The constraints that initially come to mind are:

1) Initially it should run as an "optional" UI under a sub path (/newUI or something) to give folks time to adjust. 2) Should leverage the existing server side API vs proposing a whole new API. 3) Must be something that is easy for other developers to maintain. (No super complex frameworks) 4) Needs a clear path for supporting current Plugins. 5) Given the size of the dev team, it is really hard to be a Frontend Only developer. Anybody who wants to contribute to the UI, will need to do some backend work too.

Others devs can add on to things I may have missed.

[rickerd]

Thanks for the quick reply @ghormann that's a good and clear answer. Building something new is best to have it in a separate directory, I agree.

A design would be best. In my opinion every item should be a component. Reusable and extendable. There are some ways of accomplishing that. Frameworks like Angular, React and Vue are easy to make and handle components. But it requires some "skill" to develop with these libraries. VanillaJS is way better but you'll be falling easily for frameworks like jQuery to handle ajax calls and animations.

I don't know what you devs can handle and prefer of learning. Nowadays it's almost standard to have a taskrunner to simplify front end developing. Grabbing files together, using variables in css (scss).

I love open source and if I can i would like to contribute to FPP. My goal is not to change everything but to make it better a notch. Small steps maybe and overall communicate between people for the direction that FPP wants to go with the FE.

[drew8n]

@rickerd I've had the same thoughts as well, mainly from the usability of the current UI on a mobile phone. I found myself wanting to make changes to my FPP setup and struggling to do that on a phone a lot of the time.

I've started on some mock-ups for an updated UI and was planning on sharing for feedback when ready (I didn't fancy putting in the full effort just to have a PR rejected). After looking at a few older posts on the forum around this topic (and to address the plugin issue), I found myself noting similar constraints to what @ghormann mentioned and not going for anything too radical at this stage in terms of frameworks.

I assume there are more people out there that are keen on enhancing the UI as well and we could combine our efforts into this.

[rickerd]

Especially combining efforts! It's not a one persons job. If there is something to be done you all have to agree. And maybe some disagree...

I personally use these techniques on my lottery website;

• twig template engine (php)
• gulp (taskrunner to compile css and javascript, like ES6)
• stimulus (javascript framework)

It seems like much but it isn't really. With just plain jquery and css it difficult to maintain overview of components. @drew8n can you share the mockups?

[rickerd]

I was tinkering along since my install of FPP was running for quite a while. My designs are always made in Sketch. This was the homepage/dashboard view. I tried to put all the device and current show info into the block on the left. It's handy to have that information with you at all times.

[cpinkham]

I'm going to add one more big requirement. It has to run well on a single core Pi/BBB while not slowing down development too much. A lot of people are using the latest and greatest Pi 4 or even a 3, but the UI needs to be able to run well on a BBB or Pi Zero as well. I think that sometimes this comes at the expense of having to compile or build the UI code for every little change, but that to me can be a hindrance to development time. I hope we can find a happy medium. I'm also not shy about admitting that I'm not a UI developer, so will welcome any help we can get to make things more modern, as long as they are still supportable and able to be modified by Dan and myself which are not web UI guys.

[rickerd]

I don’t know how to develop for this project. With every release a compiled version should be there.

Normally gulp is very lightweight and runs in nodejs. The more libraries we use the bigger everything gets and slower. Also things should be well documented how to use it. The same as the backend the frontend needs a team. Maybe some people have more experience and other have less. But with more people we all can develop the frontend well I think.

In my opinion really old things can be dropped. It’s the same with old Windows or php versions. But the main goal is to support all old devices. Second is bringing a great new UI.

[rickerd]

First of all Happy New 2021 everyone.

Should we maybe "meet" somewhere online with a video call to maybe kickoff or start this journey of the new UI? I made a concept design but nobody really looked at it or reacted to it haha.

[rickerd]

Hi all,

I've made a simple startup in a PR for the new ui. https://github.com/FalconChristmas/fpp/pull/949

A said before and accepting your requirements;

• No fancy framework like Angular or ReactJS/VueJS
• Simple to add/edit. It's written in PHP and has the power of Twig template engine. (used by Symfony and millions or users)
• It's located in a seperate folder so users don't have to bother the new ui yet.

[cpinkham]

We'd like to setup a zoom or other conference call sometime to discuss as a group. Currently all the core developers are spread across United States time zones and evenings are best, but we may have to figure out a weekend time to work best for an international call. We could also look at inviting you to join our slack to make it easier to discuss things back and forth.

We would like to see a few more mockups to see what kind of ideas you have. You already posted one example of the main status screen, a few others that might make sense would be the scheduler, channel input/output, and settings UIs.

[rickerd]

Great! Zoom, slack. I have it all. I’m located in the CET timezone. Just tell me some dates. Most of the time I can go online. I work in a bakery so sometimes I begin very early 06:00 CET. The night before I go to bed at 22:00 CET.

The ideas could be cool for a scheduler but it also has to be developed. At first I don’t think any outrages or something is coming in my mind. Just a cleaner UI with inputs. But I can certainly design something and upload it. The link for the mock-up is the same always, I just work on the document and hit the cloud upload button.

thanks guys. I really like it if I can built something cool with you.

[drew8n]

Hi all, got round to uploading these screenshots and video of what I had so far.

Instead of introducing a new framework I was more focused on keeping the existing PHP as-is for the most part. This would allow a gradual migration of controls should that be required.

This uses bootstrap with some material design styling.

Happy to join in conversations to work out a plan for the UI project and split up tasks.

https://user-images.githubusercontent.com/59148062/104087271-6465f280-5256-11eb-9e66-3495d8f66903.mp4

[rickerd]

We'd like to setup a zoom or other conference call sometime to discuss as a group. Currently all the core developers are spread across United States time zones and evenings are best, but we may have to figure out a weekend time to work best for an international call. We could also look at inviting you to join our slack to make it easier to discuss things back and forth.

We would like to see a few more mockups to see what kind of ideas you have. You already posted one example of the main status screen, a few others that might make sense would be the scheduler, channel input/output, and settings UIs.

[adamcoulombe]

@drew8n is your fork with the UI changes up to date? I'd like to see what changes you made to incorporate bootstrap, etc.

[drew8n]

@drew8n is your fork with the UI changes up to date? I'd like to see what changes you made to incorporate bootstrap, etc.

I was originally working on a separate mockup project, I've published that here: https://github.com/drew8n/fpp-ui-mockup

I've thrown together some of the styling into my fork (https://github.com/drew8n/fpp) to show what's possible. Very rough proof of concept at the moment instead of polished UI or code!

[adamcoulombe]

Hey all, Firstly thanks @rickerd for starting up the conversation on this and posting some cool ideas. It seems like the state of the front-end has been somewhat on the radar for at least a little awhile https://github.com/FalconChristmas/fpp/issues/493
... https://github.com/FalconChristmas/fpp/projects/5#card-31813334 . I have been wanting to spend some time to clean up the ui and make it mobile friendly.

I wanted to share some design updates I had been working on within fpp from my end.

I am just deving on my BBB via sftp, and so far what I've done is completely remove the stock CSS and have been rebuilding a new stylesheet from the ground up with a more modern approach and just seeing what can be accomplished with vanilla css and nothing fancy.

I added some commits to my own fork, including design files if interested. I plan to keep plugging away and cleaning up the other pages in there.

[drew8n]

How do we go about moving the UI work forward in a coordinated way, add everyone to the slack channel? I'm keen to get helping but needs to be on the right stuff.

Thanks

[rickerd]

Nice @adamcoulombe!

@drew8n I suggest use something like Taiga.io to make stories on a backlog and start working from there. Working on a branch that is branched from master and making feature branches that are merged to the main feature branch. In that way we can keep branches the same as master and avoid conflicts in the future.

Also the guys from FFP need to make a plan or dicission which way to go. Murdock had a plan to incorporate my design with the existing code. He came pretty far.

[adamcoulombe]

@rickerd I saw your PR which is using twig. I really do like twig a lot, but I think after spending time working with the code that exists, its going to be a pretty big job to rewrite everything into a template framework (it also looks like someone started to do this, but didnt get very far; see the new-ui branch, which was started with VueJS+Laravel). My personal opinion is that effort would be better spent working with the existing PHP code and creating a much more modern UI on top of that, instead of trying to retrofit into frameworks. Even though the current code doesn't have a framework, its really not that difficult to work with. That is just my opinion though :)

[rickerd]

Hey Adam, yes I use twig and other languages to separate logic.

The current code base is pretty old and to just give it a bit of paint with css and move some of the php to me is just not done. I know it’s a big project, that’s why I would like a team of people to work on it instead just me.

murdock has fixed something in the new-ui that makes it possible to implement the new-ui with the old codebase. From that point it could be done that every page gets updated to the new-ui and the rest just keeps on working.

I don’t want to rewrite php code. It’s most of it just endpoints and using the fppjson.php That file is untouched by me. It’s just html, scss and JavaScript that I work on. Endpoints are already there.

Join the slack, maybe we can team up.

[adamcoulombe]

I applaud your ambition, but I personally don't think a complete rewrite of the entire front end is the only way of achieving a more user friendly UI. Yes the code is old, but it does everything it needs to actually pretty well. The problem as I see it is that is has a dated design with a lot of oldschool markup (ie tables) that does not lend itself well to a responsive experience. These are things that can be updated relatively easily without completely having to rewrite all the actual js code or completely restructuring.

[rickerd]

Thanks! Strucured code, responsive, only endpoints (rest api) it's a bigegr thing then only the frontend.

Yes a lot things can be done with the current codebase but it still feels like polishing an old car.

I don't wana sound cocky or something, that is so not me. Easy fixes makes it in the end still the same but different. There is a group call coming up and I also don't know what we're going to do in the end. I hope the new UI with twig, stimulus and scss. But maybe they choose for something else....

Let them invite you to the slack, 2 frontenders is better than 1.

[adamcoulombe]

@rickerd I definitely understand your point of view and don't think it comes across cocky :) Also I am not trying to stifle anyone's enthusiasm; I will definitely be keeping an eye on your PR as it certainly is a much cleaner way to dev - I would not hesitate one bit to go this route if we were discussing building a brand new app from scratch. If it progresses to the point where I can be helpful, I will certainly pitch in. But to be realistic about things, I personally don't have anywhere near the amount of time needed to commit to such a complete refactor. And I still think a lot of what has already been developed by the main dev team is still very much usable.

[adamcoulombe]

Also yes, how do I go about getting in on the slack?

[rickerd]

@cpinkham could you arrange something for the frontend devvers

[patdelaney]

Adam please send me your email address

[patdelaney]

done

On Wed, Jan 20, 2021 at 1:17 PM Adam Coulombe notifications@github.com wrote:

Adam please send me your email address @patdelaney https://github.com/patdelaney: me@adam.co

Thanks :)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/FalconChristmas/fpp/issues/938#issuecomment-763872663, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB6FEA6AMXYOMCIFWDLQELDS24T3RANCNFSM4VNXHVFQ .