Learn how easy it is to sync an existing GitHub or Google Code repo to a SourceForge project! See Demo
I'm starting a new branch on my bitbucket account (https://bitbucket.org/rdown/openemr/commits/branch/modern-ui) to make some pretty large UI improvements.
I'm primarily moving a lot of the front end stuff to the Twitter Bootstrap framework. This is a little tougher than just dropping in the bootstrap.css file.
The first big change I made was the UI of the top navbar. From there I've moved to the Administration section. I'd like to knock out that section before moving on.
This is something that will take quite a while and will be done in little chunks.
As I've been going through some files I've noticed that we desperately need to implement some kind of MVC framework, even if we roll our own. There's just way too much business logic going on in the "views."
I'm pondering how to best approach this and maybe I'll put together some kind of visual proposal to be looked at.
Everybody has differing opinions on what MVC framework to use.
knockoutjs is my tool of choice at present, and I've already introduced code that's part of the official OpenEMR build which uses it. The "fee sheet review/enhancement features" use them.
Refactoring the whole project to use MVC (knockout is actually a more specific implementation called MVVM) is not really practical given the level of testing that would be required among other issues.
Updating the UI using knockout is a project I've been working on when I can find the time.
Have you come across a way to avoid hard-coding the version - something like declaring a minimum version in the calling script? It would be great if putting in new release of another project did not involve patching multiple files in this project.
We have the same basic problem with jQuery versions. I don't know of a proper solution.
Also, with jQuery, the issue is actually the "MAXIMUM" version required, not the minimum. Portions of the code which use jQuery plugins (like fancybox) don't work the newer versions.
The fundamental issue is that any change requires testing, and there aren't enough testing resources to go around.
The key with this type of thing (UI Impprovements) is to do it in chunks as Robert plans. Then have developers look through your first chunk to look for potential pitfalls.
Agree on the jquery version issue; no great solution here since each script needs to be tested if we decided to try to force all scripts to use one version (and things would break; it is nothing like upgrading adodb or smarty); if forced this in the entire package in past we would likely still be stuck in jquery-1.2.2 which would then not allowed newer/upgraded scripts to use the features of the newer jqueries.
On the framework and MVC issue, all I can say after years of countless discussions on this subject is that "the grass is always greener on the other side" ...
I have looked extensively at twitter bootstrap.
Many of the UI elements definitely have a better appearance than what is in OpenEMR. It also has a more modern look.
However, there are some negatives. It boxes you in to a particular structure too much. Also, there are some ways that it presents things that look a little awkward.
I think that you need to look at borrowing elements from twitter bootstrap rather than adopting it as a complete library.
There are two major components to Twitter Bootstrap. There are the css files that control how things are displayed and there are the query routines that control how certain elements can interact with the user. My guess is that you are wanting to utilize more of the css display themes than you are incorporating the query.
Either way, the css is very independent of the query in twitter bootstrap.
To incorporate the css interface themes, you don't need to rewrite much in opener. There is already a way to select which css themes to use in the preferences in opener. All you have to do is create a different set of css files.
If css is over your head, it is fairly simple. You can study twitter bootstrap to see how the css works. (I know I am making assumptions, I don't know your background or expertise, I just hope that I am not insulting you.)
If you are trying to overhaul the interface, you really need to learn css, because you can do so much with it, and you don't need to mess with a lot of the core openemr code to do it.
By borrowing elements from twitter bootstrap, and going further with the css than what they do, you can develop an even better interface.
In regards to the other aspect of twitter bootstrap, there are some cool jquery routines in twitter bootstrap. I would incorporate these independently. If you notice, twitter bootstrap is designed to be modular.
I'd like to hear more details of what exactly you are doing, and what twitter bootstrap elements you are trying to create/introduce.
I support this 100%.
With that said, do you have screenshots? I think that's been a key problem in the adaptation and new UI enhancements, or features for that matter, sticking to the community or gaining traction.
It is often cumbersome to download code/install/bug fix/desire to contribute to see what someone is doing. A few jpg images, in my opinion, would help this project greatly with any enhancements. Most of us are not in to the theory, and are often sold by how shiny things are. I like shiny things.
I was away from my computer for a few days - glad to see that this conversation is budding.
I've heard of KnockoutJS (I believe it's similar to AngularJS). I'll definitely read up on it!
Perhaps an MVVM solution is better than MVC (I probably just started world war 3...) but if Kevin has already started using it, then I think we could continue to expand on it.
My biggest concern was just how integrated the view and business logic is. We make queries to the database and on 2 lines later start echo'ing div's.... that just shouldn't happen.
I've noticed we go back and forth a lot between exiting PHP and building the HTML and justing writing a bunch of echo's - I'm working to fix that.
I'll definitely post screenshots as the improvements progress!
As for things like fancybox and other JS things that require very low-level versions of jQuery, I think we should consider ditching them and moving to something that is up to date. I know jQuery has gone through some pretty massive overhauls and it'd be good if we could get up to a recent version. (I know for my modern interface I have to use something rather new as Bootstrap requires it).
Here's a quick screenshot of what I've been working on. The real changes are coming soon, but for now I've really just toned down the left nav bar, put the top and bottom links on separate lines, and tidied up the title screen. (I'll grab another shot later when there's an active patient to show that part of the title screen as well.
I'm using various components of the Twitter Bootstrap CSS and FontAwesome (which if you're unfamiliar with you should google - it's pretty cool).
Here is a wishlist -
I wholeheartedly agree with your search box idea. The current search function is strange.
I'll work on incorporating these features.
One of the great things about refactoring to a bootstrap based UI is we can then make the UI responsive - taking the quality of the user interface to a whole new level for users on tablets. As I rework the admin area I'm using code that is by default responsive.
I think this should be an overarching goal of the UI rework.
Also, Here are some pictures of the general direction I'm working toward. You can see that the refactored UI can be used w/o my modern theme and still be workable (couple of things I need to tweak to make it fully functional, but you get the idea).
To get this incorporated into the official codebase (and to identify potential pitfalls before you spend too many resources on this), suggest tidying up what you have, making it a theme that can be selected(in the globals screen)(if possible), and submitting it for code review. The idea of not killing the current themes (ie. having a modern theme, which is yours) sounds very promising, because this should mean you can do your UI code walk through without stepping on other things.
Since this is going to likely be a rather large project, suggest throwing it up on the Active Projects page (this kind of thing is nice for when we code review; for example, getting newly created scripts to follow your mechanism):
Great, I'll work on your suggestions. What I think will happen (now that I've started to actually work on the project) is there will be 2 different projects. A modern theme (style_modern.css) and the UI overhaul (upgrading/improving the UI w/o breaking current themes. I'll work on separating these projects into 2 different branches on my bitbucket repo (I'll post the links once they're ready to go).
Thanks for the insight.
Do we have any test data that I can import? Right now I only have 1 provider and 2 patients... I'd like to get a more realistic amount of data for testing.
Here's a tool built by Art to make a bunch of patients:
See this thread for more details:
Heads up, I've got a commit ready to view!
Improves the UI of edit_globals.php by implementing some UI features of twitter bootstrap and a very nice jquery plugin called select2 (It's been loaded as a git submodule). This is the direction I'd like to take both the improved UI and my modern theme (which I hope after this process is complete may become the new default theme).
I've attached screenshots for the page for both the default theme and my modern theme.
Just seeing mostly removal of \t\t\t characters on that commit. Guessing it's just the wrong commit link.
https://bitbucket.org/rdown/openemr/commits/bcd6ba299e0ad87fa01a3fe58533803c8d45646f was the original commit, and I forgot to pull the \t's so I did that and pushed, so https://bitbucket.org/rdown/openemr/commits/f441cad8eae98a6049bdcf08e077b3b2ce32e39a is correct. But Internet Explorer is breaking all the twitter bootstrap stuff (surprise, surprise, right?) I did some research and will be dropping in an html5.js file to support IE. That will be in a commit later today.
Work on the facilities page is probably 50% complete, hoping to get at least another 30% completed today.
Ok - noticed an issue, my work on the facilities page was also included in that commit, here's the new URL with that code reverted back to regular implementation.
Here is the commit that fixes the IE issues. I've noticed if you're using IE9 in compatibility mode it still doesn't work right - solution: don't use compatibility mode.
Merge branch 'updated-ui-globals' into updated-ui
Adds compatibility for IE < 9 - Bootstrap.css was all jacked up without this html5shiv file to fix IE, also, added a proper Doctype to the globals page