User Interface Renovations

OpenEMR Development
#1

qlcorp wrote on Friday, November 06, 2015:

We have started (yet another) user interface improvement project. We decided that instead of building off the preexisting UI improvement project, we would start over again.

OpenEMR was started prior to many innovations in web technology, and the user interface reflects this.

Like the previous project, our goal is to implement Twitter Bootstrap, but with several additional requirements.

We understand that for all of the desire to refactor the underlying code, but there are many stakeholders that have a lot working knowledge of the code. Additionally, there is a significant amount of business logic that is tied to the UI code. So, our approach is to try to preserve the code base so as not to “throw the baby out with the bath water”, so to speak.

It is the goal of this project not to change the structure of the code or materially alter the function of the system. We will also maintain backwards compatibility with the existing OpenEMR theming system.

You may view the progress of this project at our fork at github at https://github.com/practiceprovider/openemr

We are employing the following methodology, we have created an SCSS stylesheet from the style_oemr.css style, then

  1. Where possible, we are reusing the existing OpenEMR classes by extending the Bootstrap classes.
  2. If needed we apply new classes to the HTML (making sure not to interfere with existing styling)
  3. Worst case scenario we modify the HTML and/or PHP in a way that is backwards compatible with the existing code/theming system, an example of this was the pills in messaging.php

#2

bradymiller wrote on Saturday, November 07, 2015:

Hi,

This looks very promising especially considering the small footprint!

I pointed one of the “up for grabs” demos to this code here:
http://www.open-emr.org/wiki/index.php/Development_Demo#192.168.1.131
(to choose the modernized theme, select Adminstration->Globals->Appearance->Theme->style_bootstrap.css)

John,
I pointed the above demo to the “ui-foundation” branch. But it looks like there is another branch “ui-dev-phase1” that has more recent modifications. Just let me know when I should change the demo target branch, and I’ll gladly do so.

thanks,
-brady
OpenEMR

#3

sapiens110 wrote on Sunday, November 08, 2015:

Hi,

Nice to see this got picked up. Two question though,

  1. Do the community think it’s time to let go of the framesets?
  2. As a web based EMR, It would be nice to make the theme responsive. Have you thought about it? This won’t leave a small foot print in the code though.
#4

qlcorp wrote on Monday, November 09, 2015:

  1. We were planning on saving the framesets for last. The tag is deprecated in HTML5.
  2. We are not currently planning on this.
#5

tmccormi wrote on Monday, November 09, 2015:

There is a project just getting started for Responsive OpenEMR Moblie UI, see:
https://sourceforge.net/p/openemr/discussion/oemr_501c3/thread/95c2bd69/

#6

qlcorp wrote on Thursday, November 12, 2015:

While this is very much still a work in progress and aesthetics are lacking at the moment, a lot of progress has been made. For this who are interested please see GitHub - practiceprovider/openemr: Mirror of official OpenEMR Sourceforge repository

#7

bradymiller wrote on Friday, November 13, 2015:

Hi John,

Is there a specific branch on your repository that we should be looking at? It looks like a new branch is created every several days and unclear which one to test.

thanks,
-brady
OpenEMR

#8

bradymiller wrote on Friday, November 13, 2015:

Hi John,

Wow!

I just tested the most recent branch on your repo (ui-dev-phase1-tables) and directed the following demo to it:
http://www.open-emr.org/wiki/index.php/Development_Demo#192.168.1.131
(to see the new modern theme, select Adminstration->Globals->Appearance->Theme->style_bootstrap.css)

It’s looking really nice.

-brady
OpenEMR

#9

tmccormi wrote on Friday, November 13, 2015:

hmm that URl just gives me a 500 error, something wierd in going on on the wiki

#10

bradymiller wrote on Saturday, November 14, 2015:

Hi Tony,
I just checked and demo and wiki are working now (sourceforge stuff does go down every once in awhile for a couple minutes at a time; guessing that’s what happened to you).
-brady

#11

qlcorp wrote on Saturday, November 14, 2015:

We will be cleaning up the feature branches and will get a definitive branch Monday.

#12

qlcorp wrote on Monday, November 23, 2015:

We have merged the feature branches into the ui-dev-phase1 branch at our fork at GitHub - practiceprovider/openemr: Mirror of official OpenEMR Sourceforge repository I just ask that you look past the hideously vile color scheme for now, we have not been concentrating on that yet.

#13

tmccormi wrote on Monday, November 23, 2015:

Thanks for the comment re the colors, I was getting worried… :slight_smile:

#14

qlcorp wrote on Thursday, December 03, 2015:

Please see branch Branch_ui-dev-02-12-Color-Schemes for latest updates. Some progess has been made with the colors too.

#15

tmccormi wrote on Thursday, December 03, 2015:

That’s starting to really take shape now.

#16

fr4nkie wrote on Friday, December 04, 2015:

Any chance we’ll see the demise of the split-screen frames in this upgrade? My employees who aren’t as tech savvy tend to get tangled up with it. I think Kevin had a tabbed mod going not long ago. That would be a really cool feature to see implemented.

#17

tmccormi wrote on Friday, December 04, 2015:

It’s not the split screen that’s a problem, that can be very useful, it is the fact that it’s HTML frames based which is a HTML method that has long ago been replaced by

for device independence. however, weeding it out of openEMR is hard, the login screen uses 3 frames for no good reason at all … Then there is the title bar and left nav menu that are also frames. Lot’s for status data tracked in the title frame via javascript …
#18

bradymiller wrote on Friday, December 04, 2015:

Looking nice. Directed the following demo to the branch so others can test it:
http://www.open-emr.org/wiki/index.php/Development_Demo#192.168.1.131
(to see the new modern theme, select Adminstration->Globals->Appearance->Theme->style_bootstrap.css)

#19

bradymiller wrote on Friday, December 04, 2015:

Hi Frankie,
There is zero chance that will happen in the next version release :slight_smile:
As Tony describes above, trying to unwrap OpenEMR out of the frames would take a very large amount of resources to complete.
-brady

#20

fr4nkie wrote on Friday, December 04, 2015:

Let’s gather the resources! Perhaps John can start a crowdfunding campaign to work on updating the overall user experience after the bootstrap project. I’d be happy to pledge toward his (and his teams?) effort.

And I certainly didn’t mean to imply something that would be done for a specific release. But I do believe it’s important, if possible, to have a developer focus on UI/UX alongside the rest of the meaningful use work.