UI Improvements

OpenEMR Development
1

robertdown wrote on Wednesday, August 07, 2013:

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.

2

yehster wrote on Wednesday, August 07, 2013:

http://knockoutjs.com/
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.

The biggest difference between knockoutjs and other options like zend or symfony is that it’s client side, and it’s only a single javascript file instead of the big server side packages that PHP based frameworks use, so the installation/maintenance issues are greatly reduced.

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.

3

mdsupport wrote on Wednesday, August 07, 2013:

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.

4

yehster wrote on Wednesday, August 07, 2013:

We have the same basic problem with jQuery versions. I don’t know of a proper solution.

5

yehster wrote on Wednesday, August 07, 2013:

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.

6

bradymiller wrote on Thursday, August 08, 2013:

Hi,

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” …

-brady
OpenEMR

7

deschel wrote on Thursday, August 08, 2013:

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.

David Eschelbacher

8

bgregg wrote on Thursday, August 08, 2013:

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.

9

robertdown wrote on Sunday, August 11, 2013:

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!

10

robertdown wrote on Sunday, August 11, 2013:

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).

11

robertdown wrote on Sunday, August 11, 2013:

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).

12

mdsupport wrote on Monday, August 12, 2013:

Here is a wishlist -

  • Put left_nav entries in database with display-option flag so code becomes less complex. Current left_nav can still be retained to load its output during initialization and reset.
  • Allow reordering of blocks and menu items using drag/drop so each user has their personalized menu.
  • Shortcuts for most commonly used menu items across functions be visible without having to expand a group.
  • Default/Top/Bottom block wastes too much space. It be replaced by floating arrows that are visible on hover and expand and collapse frames. Same with Hide Menu.
  • ‘Popups’ becomes another menu group - same number of clicks but now a standard menu element.
  • Option to turn off the little pictures and adjust font size as user preference.
  • Search box moved to top replacing ‘Add Patient’ and made like google search box - no list of links to click. For every new patient we add, we use search probably 1000 times and with limited screen space on tablets, every click and scroll takes time away from medicine.
  • In ‘Hide Menu’ mode, hover over an area brings up menu and disappears after selecting an item.
13

drkay wrote on Monday, August 12, 2013:

I wholeheartedly agree with your search box idea. The current search function is strange.

14

robertdown wrote on Monday, August 12, 2013:

I’ll work on incorporating these features.

15

robertdown wrote on Monday, August 12, 2013:

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).

16

bradymiller wrote on Monday, August 12, 2013:

Hi Robert,

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.

-brady
OpenEMR

17

bradymiller wrote on Monday, August 12, 2013:

Also,

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):
http://www.open-emr.org/wiki/index.php/Active_Projects

-brady
OpenEMR

18

robertdown wrote on Monday, August 12, 2013:

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.

19

robertdown wrote on Monday, August 12, 2013:

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.

20

robertdown wrote on Tuesday, August 13, 2013:

Heads up, I’ve got a commit ready to view!

https://bitbucket.org/rdown/openemr/commits/f441cad8eae98a6049bdcf08e077b3b2ce32e39a

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.