Freehand Drawing Widget for Layout Based Visit Forms

OpenEMR Development
#1

sunsetsystems wrote on Sunday, July 03, 2016:

This will be useful for docs who want to draw on images of a body or body part to show the location and nature of some ailment. The optional starting image can be stored in the sites/default/images/ directory and is specified for the layout field by putting “image=imagename” in its Description column.

There are 2 commits, the first to bring in the LiterallyCanvas and React JavaScript libraries. Code is here:

https://github.com/sunsetsystems/openemr/commits/draw

The widget itself is demonstrated here:

http://literallycanvas.com/

Rod
http://www.sunsetsystems.com/

#2

bradymiller wrote on Monday, July 04, 2016:

Hi Rod,

This looks very nice. Will need to figure out a way to support translations of the terms in LiterallyCanvas.

-brady
OpenEMR

#3

sunsetsystems wrote on Monday, July 04, 2016:

Oh yes, there’s an API function for that. I’ll figure out what to do with it. Thanks.

Rod
http://www.sunsetsystems.com/

#4

sunsetsystems wrote on Monday, July 04, 2016:

I added a commit for the translations.

Rod
http://www.sunsetsystems.com/

#5

aperezcrespo wrote on Wednesday, March 08, 2017:

@Rod
Well I placed a file (jpg and png) into sites/default/images/ directory in placed “image=imagename” in its Description column in the LBF.
No Image is displayed.
I also tested image=kidney.png, image=kidney.jpg, “image=kidney.png”, “image=kidney.jpg”.

All I find in Apache Error log is this.
Undefined variable: is_lbf in /var/www/openemr/interface/forms/LBF/new.php on line 484, referer: http://localhost/openemr/interface/patient_file/encounter/forms.php
[Wed Mar 08 19:51:48.575920 2017] [:error] [pid 3115] [client 127.0.0.1:55612]
PHP Notice: Undefined variable: is_lbf in /var/www/openemr/interface/forms/LBF/new.php on line 488

Any Idea?

Ubuntu 14.04
OpenEMR 5.0.0(1)

Draw On Image In Form
#6

sunsetsystems wrote on Thursday, March 09, 2017:

You might check the Apache access log while opening the form to see if it’s trying to load the image. Also make sure you’re opening a new form and not an existing one, so it will bring in the default image and not one that may already be in the form data.

No need to put quotes around “image=imagename”.

#7

aperezcrespo wrote on Thursday, March 09, 2017:

Nope still a no go… Here is what I found in the access log. Image is Kidney.jpg. All I get is a is a small white box in the middle of the Literally Canvas app. FYI: And in the white box is where I can draw.
Couple of Questions:
Any Specific file types (jpg,png,bmp…)?
Any Maximum or Minimum file sizes?
Any other file specs?

127.0.0.1 - - [09/Mar/2017:09:50:43 -0400] “GET /openemr/sites/default/images/Kidney.jpg HTTP/1.1” 200 50178 “http://localhost/openemr/interface/patient_file/encounter/load_form.php?formname=LBFKidney” “Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:52.0) Gecko/20100101 Firefox/52.0”
127.0.0.1 - - [09/Mar/2017:09:50:46 -0400] “POST /openemr/library/ajax/dated_reminders_counter.php HTTP/1.1” 200 375 “http://localhost/openemr/interface/main/left_nav.php” “Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:52.0) Gecko/20100101 Firefox/52.0”
127.0.0.1 - - [09/Mar/2017:09:50:46 -0400] “POST /openemr/library/ajax/execute_background_services.php HTTP/1.1” 200 376 “http://localhost/openemr/interface/main/left_nav.php” “Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:52.0) Gecko/20100101 Firefox/52.0”
127.0.0.1 - - [09/Mar/2017:09:50:51 -0400] “GET /openemr/interface/main/daemon_frame.php HTTP/1.1” 200 744 “http://localhost/openemr/interface/main/main_screen.php?auth=login&site=default” “Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:52.0) Gecko/20100101 Firefox/52.0”
127.0.0.1 - - [09/Mar/2017:09:50:53 -0400] “POST /openemr/interface/main/dated_reminders/dated_reminders.php HTTP/1.1” 200 415 “http://localhost/openemr/interface/main/messages/messages.php?form_active=1” “Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:52.0) Gecko/20100101 Firefox/52.0”

#8

sunsetsystems wrote on Thursday, March 09, 2017:

What do you have for width and height in the Size column of the layout? Unlike with other field types, these are image dimensions in pixels.

I think file types supported would be those supported by the browser. Jpeg and PNG should definitely be among those.

#9

aperezcrespo wrote on Thursday, March 09, 2017:

Ooooh…that never even crossed my mind.
So I need to consider image size in both file and LBF.
And speaking in pixels…1296x728 is too large (see attachment).
What would you recommend as sizes go.

#10

sunsetsystems wrote on Thursday, March 09, 2017:

I think the last one I did was 300x400. I’m sure some more improvements could be done for flexibility.

#11

aperezcrespo wrote on Thursday, March 09, 2017:

Ok I’ll test a few…
Thanks a million!

#12

aperezcrespo wrote on Thursday, March 09, 2017:

Ok so 600x400 is adecuate…you can go a bit wider but no much higher.

Next problem…Modified image in LBF does not display. Not in Encounter Summary (Show up as Image not found) less so in Edit.
Where is it stored?

#13

sunsetsystems wrote on Thursday, March 09, 2017:

The form’s data, including images, are stored in the lbf_data table. Look for rows where field_value starts with “data:image/”.

#14

aperezcrespo wrote on Friday, March 10, 2017:

Yup entries are there…
The above screenshot is from chrome, FireFox gives back less. IE (For the same screen shot above) give back an unknow protocol and type not available.

Still haven’t figured it out.
Ubuntu 14.04
PHP 5
OpenEMR 5.0.0(1)

#15

sunsetsystems wrote on Friday, March 10, 2017:

I’m guessing you are running into a size limit with data URLs. That will be browser-dependent. You can confirm that by trying a smaller image.

Probably what needs to happen is a code fix to create a temporary image file for these cases.

#16

I have a PR here that’s a likely fix for these issues:

1 Like
#17

It’s in the master branch now, and I think is a good candidate for the next 5.0 patch.

#18

hi,
Will add it to the next 5.0 patch.
-brady

#19

Is this feature availablein 7.0?