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.
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
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.
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.
Last edit: sapiens110 2015-11-08
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
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 https://github.com/practiceprovider/openemr
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
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.
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)
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
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
We have merged the feature branches into the ui-dev-phase1 branch at our fork at https://github.com/practiceprovider/openemr I just ask that you look past the hideously vile color scheme for now, we have not been concentrating on that yet.
Last edit: John Carbone 2015-11-23
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
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.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
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 <DIV> 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 ...
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Hi Frankie,
There is zero chance that will happen in the next version release :)
As Tony describes above, trying to unwrap OpenEMR out of the frames would take a very large amount of resources to complete.
-brady
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
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.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
I began undertaking a similar project earlier this year and felt that there wasn't enough energy from the community to really continue pushing through, I"m excited to see forward progress. I have an up-for-grabs with my work, although it's a bit out of date, I'll try to get what I have pushed asap.
John can we engage via email? robertdown@live.com
I attached a screenshot of my most recent changes from my local instance
Very nice screen shot Robert. I am not very sure of my programming skills and I don't want to break anything but I do think we can improve the interface. It will take real programming skill and dollars but with MU 1-6, maybe a stepwise approach will work. Seems there is alot that can be done through style sheets as Robert's jpg suggests. Working from within the closed walls of the eye form I built a menu system (twitter bootstrap if I recall) that works within the framed architecture of openEMR. Maybe this would be useful to others who are starting to consider the frameless version for the future?
Ray
John,
How are thing going on this? It would be good to get the bootstrap based code in place so we can merge Yehster's iframe code base as well, he removed all the frameset code already.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
What branch should the developers test. I took a guess and set the up for grabs demo to the 'Branch_frameset-replacement' branch. Can be tested here: 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)
Looks nice, but there appears to be quite a bit of buggy behavior on my quick testing.
Also, what do you mean by remote the framesets? (I ask this because many of the things that required the frames to "communicate" with each other are now broken)
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
Last edit: John Carbone 2015-11-07
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
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.
Last edit: sapiens110 2015-11-08
Last edit: John Carbone 2015-11-09
There is a project just getting started for Responsive OpenEMR Moblie UI, see:
https://sourceforge.net/p/openemr/discussion/oemr_501c3/thread/95c2bd69/
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 https://github.com/practiceprovider/openemr
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
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
hmm that URl just gives me a 500 error, something wierd in going on on the wiki
Last edit: Tony McCormick 2015-11-13
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
We will be cleaning up the feature branches and will get a definitive branch Monday.
We have merged the feature branches into the ui-dev-phase1 branch at our fork at https://github.com/practiceprovider/openemr I just ask that you look past the hideously vile color scheme for now, we have not been concentrating on that yet.
Last edit: John Carbone 2015-11-23
Thanks for the comment re the colors, I was getting worried... :-)
Please see branch Branch_ui-dev-02-12-Color-Schemes for latest updates. Some progess has been made with the colors too.
Last edit: John Carbone 2015-12-03
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)
That's starting to really take shape now.
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.
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 <DIV> 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 ...
Hi Frankie,
There is zero chance that will happen in the next version release :)
As Tony describes above, trying to unwrap OpenEMR out of the frames would take a very large amount of resources to complete.
-brady
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.
I began undertaking a similar project earlier this year and felt that there wasn't enough energy from the community to really continue pushing through, I"m excited to see forward progress. I have an up-for-grabs with my work, although it's a bit out of date, I'll try to get what I have pushed asap.
John can we engage via email? robertdown@live.com
I attached a screenshot of my most recent changes from my local instance
Last edit: Robert Down 2015-12-28
Very nice screen shot Robert. I am not very sure of my programming skills and I don't want to break anything but I do think we can improve the interface. It will take real programming skill and dollars but with MU 1-6, maybe a stepwise approach will work. Seems there is alot that can be done through style sheets as Robert's jpg suggests. Working from within the closed walls of the eye form I built a menu system (twitter bootstrap if I recall) that works within the framed architecture of openEMR. Maybe this would be useful to others who are starting to consider the frameless version for the future?
Ray
style sheet test: https://www.youtube.com/watch?v=XdznPRs6L8U
Menu example: https://www.youtube.com/watch?v=mE6ct4qBRDE
Last edit: Ray Magauran 2016-01-01
Dear all,
We are enterting the final phases of this project. At this time work is being performed to remote the framesets.
Also, I'd like to reach out to the community to get feedback and bug reports.Any help in this regard would be greatly appreciated. Thank you.
Kind regards,
John.
John,
How are thing going on this? It would be good to get the bootstrap based code in place so we can merge Yehster's iframe code base as well, he removed all the frameset code already.
Hi,
What branch should the developers test. I took a guess and set the up for grabs demo to the 'Branch_frameset-replacement' branch. Can be tested here:
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)
Looks nice, but there appears to be quite a bit of buggy behavior on my quick testing.
Also, what do you mean by remote the framesets? (I ask this because many of the things that required the frames to "communicate" with each other are now broken)
-brady
OpenEMR