Project - Modernize Styling and User Interface

Google Summer of Code
, ,
#1

OpenEMR recently completed a very large code refactor to support Bootstrap 4 (BS4). There is still much to do including replacing as much CSS/SASS with BS4 as possible, removing unneeded CSS/SASS, decreasing reliance on the !important tag, migrating the navbar to BS4, migrating inline stylesheets to external stylesheets, improving responsive behavior of the gui, ironing out bugs in the current themes, and improving the current themes and the overall gui experience.

Selected Student:
@stu01509

Mentors:
@tywrenn (primary)
@robert.down
@brady.miller

3 Likes
GSoC 2020 proposal review and feedback
#2

Hi, its vasu here wants to contribute in this idea. I have good knowledge and experience with Bootstrap along with CSS. I think its a great idea switching to bootstrap as it will help in overall GUI experience. Thanks.

1 Like
#3

Hello!

My name is Kwasi, I’m an informatics pharmacist, and I’d like to get more involved with this project as well. I’m still a beginner programmer, but maybe I can be useful as a UX tester/designer/subject matter expert for some for the GUI improvements

1 Like
#4

Hello !
My name is Surendra, I am a Computer Science Master’s student at University of Georgia, GA, USA. I have good knowledge of user interface development with more than 3 years of experience in CSS, Bootstrap 4 and JavaScript. I am highly interested in this project. It would be great migrating to bootstrap to improve responsiveness and many other aspects of UI.

1 Like
#5

hi @vasujain314 , @kagyeman , and @surendrap720 ,

I’m guessing @tywrenn will weigh in here soon considering all the interest. I can provide some background and places to start since there is so much interest in this project.

Recommend checking out the recently completed BS4 migration issue and PR just to get an idea of the scale of that project (as stated in my post above, though, there is still lots to do):
Update to newest Bootstrap 4 · Issue #2807 · openemr/openemr · GitHub
https://github.com/openemr/openemr/pull/2832

The scss/css files can be found in interface/themes/
There are 4 main theme categories:
Light - This was considered OpenEMR’s main theme and existed prior to the BS4 upgrade.
Colors (a bunch of different colored themes) - These existed prior to the BS4 upgrade.
Dark - This was designed during the BS4 upgrade.
Superhero - this was designed during the BS4 upgrade
(also, if you have keen eyes, you will notice Manila which is a legacy theme that has been kept around and maintained)

The sass processing can be seen in the gulpfile.js

Something to note is that OpenEMR maintains RTL (right-to-left) support which complicates things a bit.

I’d recommend participating on OpenEMR’s github repo and working on a simple mini-project (such as a simple bug fix or simple feature) to interact with the OpenEMR developers and learn how PR’s and code reviews work. There is a current jquery-ui removal project with a bunch of issues that would be related to this project and provide hands on experience in OpenEMR’s gui (or pick or create another issue you’d like to look into). Another option would be to test out the different themes to start to identify problem areas.

-brady

1 Like
#6

Thank you so much for the information Brady.

#7

Hello everyone – i’m Tyler and i’m a senior at George Mason University majoring in Information Technology and concentrating in Web Development. My specialty is Bootstrap and UI/UX design and I have been working with Bootstrap ever since I was 13 years old. As Brady stated, I recently took on the massive project of replacing Bootstrap 3 with Bootstrap 4. After doing so, I noticed there is still a ton of work to be done and a ton of code can still be replaced. In OpenEMR there are tables and pages that are not responsive, inline and internal CSS that shouldn’t be there, and a lack of documentation of what CSS/SASS class/id does what. This project will require participants to critically examine code and use Bootstrap 4 to make OpenEMR as responsive as possible. If anyone has any questions don’t hesitate to PM me or reply to this thread.

1 Like
#8

Hello Tyler,
Thank you for the information ! I am setting up openEMR locally. Looking forward to contribute and learn.

#9

@tywrenn I installed docket, i have also forked and cloned the openemr repository. According to step 3 in contributing.md docker-compose up doesn’t work. should I create create an image of openemr using dockerfile ? Can you please help me with setting up the project ?

#10

@surendrap720 I’ll pm you

#11

Hi, @tywrenn can you help me set it up locally, I am facing some problem. When I execute this command docker-compose up it is showing this msg “Couldn’t connect to Docker daemon - you might need to run docker-machine start default Preformatted text.”, I tried further step but it did not help.

#12

hi @ahmadkhan242 ,
Just checking that you got this issue worked out. If not, what do you see for:

docker ps -a
#13

@brady.miller Got this response
error during connect: Get https://192.168.99.100:2376/v1.40/containers/json?all= 1: dial tcp 192.168.99.100:2376: connectex: A connection attempt failed because the connected party did not properly respond after a period of time, or establis hed connection failed because connected host has failed to respond.

#14

hi @ahmadkhan242 ,
Just so we don’t bring in lots of posts into this forum, are you able to get into OpenEMR’s Slack chat?

There’s also a telegram chat there if that is better.

#15

@brady.miller yes, I just joined the chat.

1 Like
#16

Hello Brady
We are a group from Sri Lanka from the University of Kelaniya, Faculty of Medicine. Have been using OpenEMR with modifications the drugs, classification/coding (ICPC-2) in our university family practice centre. We are now making OpenEMR available for GPs/FPs using a cloud-based option where the clinician will not have to worry about the infrastructure of maintaining hardware etc.
We are very happy with the functionality which we are using less than 25%.
However we feel that the user interface can be improved. We were going to start on a project to make a simple interface for the more than 90% of our GPs who will have a consultation time of about 5-6 minutes. We would like to help in this project, but the programming expertise we have is extremely limited and is limited to a Sri Lankan PhD student in NY. _Kumara

#17

Hi @kmendis ,
Very exciting information. This GSoC project will likely result in a markedly improved interface. Sounds like your goal is more workflow optimization so the GPs/FPs are not slowed down in their 5-6 minute visits. If that is case, then recommend creating another thread title workflow optimization or something like that, and then can go through workflow goals to see how to improve things (this is akin to the eye form where the author of that form, who was an ophthalmologist, developed it with the goal to be as fast as paper charting). This would be helpful to OpenEMR since a core use is likely by primary care providers. thanks, -brady

#18

Hi @tywrenn @robert.down
I am Aaryan from India. I am a Computer Science student. I feel switching to bootstrap is a great idea. I have good experience with Bootstrap and CSS. I want to contribute in this idea.

2 Likes
#19

Hello everyone! My name is Anastasios Liolios and I am a 21 year old student. I am Greek and I am presently studying at the department of Electrical and Computer Engineering of the Aristotle University of Thessaloniki .I am in the 4th year of a 5 year study and during my studies I opted towards a software programming direction. So far, I have followed courses in the field of web developing.I consider myself to be an ambitious young code developer and I love programming especially in the area of web development where I became acquainted during my studies.Can you help me how to start contributing in this idea
?

#20

hi @aaryantyagi and @tasoslio and welcome to the OpenEMR project!
Check out my posts above for background and starting points on this project. I’d recommend participating on OpenEMR’s github repo and working on a simple mini-project (such as a simple bug fix or simple feature) to interact with the OpenEMR developers and learn how PR’s and code reviews work.