Graphical Data Display Question (Audiogram)

OpenEMR Development
1

blatta wrote on Sunday, October 05, 2014:

I’ve been trying to develop a graphical display form for audiometric data. I’ve already managed to generate a form_audiogram table and the associated report, view, save, new, etc. php files with xmlformgen. Furthermore, I’ve managed to edit the forms to give me a generally acceptable report formatted in a tabular array. Ideally, however, my goal is to arrange things such that a graphical grid (attached as pure_tone_grid.png) is displayed in the background and then the necessary symbols (representative examples attached as X.png and O.png, although there are others as well) are printed on top of the underlying grid layer, thus displaying a completed audiogram (attached as audio.pdf).

The above example (audio.pdf) was generated by way of example from the following html code being placed in the localhost/test folder and being opened in Firefox. It displayed correctly in the browser and was printed correctly to the attached pdf file. I am confident that I can ultimately write the code to use php to retrieve my stored audio data and generate a visually acceptable audiogram if only I can solve a few problems. What is most attractive to me is that both the underlay grid and the overlying symbols are effectively printed on different transparent layers in the same screen space. They are both visible secondary to the transparency property of the png files.

Code:

<html>	
<div style="position: absolute; top:0px; left:0px"><img src="pure_tone_grid.png"/></div>
<div style="position: absolute; top:60px; left:50px"><img src="O.png"/></div>
<div style="position: absolute; top:60px; left:78px"><img src="O.png"/></div>
<div style="position: absolute; top:60px; left:276px"><img src="X.png"/></div>
<div style="position: absolute; top:60px; left:304px"><img src="X.png"/></div>
</html>

Unfortunately, if I attempt to edit and incorporate the above code into the end of the audiogram report.php file such as this …

Code:

function audiogram_report($pid, $encounter, $cols, $id) {
    …
    $data = formFetch($table_name, $id);
    if ($data) {
        <html>
        <div style="position: absolute; top:0px; left:0px"><img src=“../../forms/audiogram/images/pure_tone_grid.png"/></div>
        <div style="position: absolute; top:60px; left:50px"><img src="../../forms/audiogram/images/O.png"/></div>
        <div style="position: absolute; top:60px; left:78px"><img src="../../forms/audiogram/images  /O.png"/></div>
        <div style="position: absolute; top:60px; left:276px"><img src="../../forms/audiogram/images/X.png"/></div>
        <div style="position: absolute; top:60px; left:304px"><img src="../../forms/audiogram/images/X.png"/></div>
        </html>
    }
    …
}

… then the graphics print appropriately but in the wrong place (at the top of the window), as shown in Screen Shot 1.jpg.

Modifying the pure_tone_grid.png position attribute to “relative” and leaving the symbols as absolute behaves as expected, dropping the grid graphic into the correct place on the page but leaving the symbols in their original position (Screen Shot 2.jpg).

Finally, changing all the grid and symbol position properties to “relative”, as indicated below, keeps the grid in the desired position on the page but somehow the symbols are dropped even lower, now encroaching on the Patient Encounter section. Furthermore, it appears that their transparent behavior has somehow been affected and they are now printing sequentially lower on the page (Screen Shot 3.jpg).

Code:

function audiogram_report($table_name, $id);
	…
	if ($data) {
		<html>
		<div style="position: relative; top:0px; left:0px"><img src=“../../forms/audiogram/images/pure_tone_grid.png"/></div>
		<div style="position: relative; top:60px; left:50px"><img src="../../forms/audiogram/images/O.png"/></div>
		<div style="position: relative; top:60px; left:78px"><img src="../../forms/audiogram/images/O.png"/></div>
		<div style="position: relative; top:60px; left:276px"><img src="../../forms/audiogram/images/X.png"/></div>
		<div style="position: relative; top:60px; left:304px"><img src="../../forms/audiogram/images/X.png"/></div>
		</html>
	}

What’s going on here? And more importantly, is there anything I can do about it? Thanks for your help.

2

fsgl wrote on Sunday, October 05, 2014:

Graphable forms such LBV, Track Anything & Growth Charts, all display in a separate screen.

If the audiogram doesn’t need to appear in the Encounter form, the layout problem should disappear.

3

blatta wrote on Sunday, October 05, 2014:

In general, I’d like the audiogram to appear in the Encounter form as it simplifies having staff fax the results of all things done to any particular patient on any particular visit to the referring physician. Also, it allows me to easily show the results of an audiogram to a patient while in the office, perhaps on a tablet or iPad.

I have discovered, however, that the “top:” parameter will accept a negative number argument. This allows the symbols to be positioned back up the page on top of the audio grid where they belong. It’s a little more complicated as it appears that each subsequent symbol is displaced an additional 13 pixels lower on the page, and this needs to be taken into account by the display-generating code, but at least I think it’s something that I can work with. After all, if I can convince it to display what it is that I think I want to see then I can probably figure out how to convince the code to tell it how to do the same thing.

4

mabutler573 wrote on Monday, October 06, 2014:

Wrap your divs inside another div with position relative and a fixed height. Absolute positioning is based on the nearest parent that is not positioned statically. The fixed height is to prevent your graph from flowing down over the next form.

<div style="position: relative; height: 240px;">
        <div style="position: absolute; top: 0px; left: 0px;"><img src="http://sourceforge.net/p/openemr/discussion/202506/thread/d98d2752/0f00/attachment/pure_tone_grid.png"></div>
        <div style="position: absolute; left: 50px; top: 60px;"><img src="http://sourceforge.net/p/openemr/discussion/202506/thread/d98d2752/0f00/attachment/O.png"></div>
        <div style="top: 60px; left: 78px;position: absolute;"><img src="http://sourceforge.net/p/openemr/discussion/202506/thread/d98d2752/0f00/attachment/O.png"></div>
        <div style="top: 60px; left: 276px;position: absolute;"><img src="http://sourceforge.net/p/openemr/discussion/202506/thread/d98d2752/0f00/attachment/X.png"></div>
        <div style="position: absolute; top: 60px; left: 304px;"><img src="http://sourceforge.net/p/openemr/discussion/202506/thread/d98d2752/0f00/attachment/X.png"></div>        
</div>
5

blatta wrote on Monday, October 06, 2014:

That’s exactly what I needed. Thank you.

6

blatta wrote on Monday, October 06, 2014:

I spoke too soon. The following code (essentially identical to the code suggested above) produces the attached result, with the graphics once again overwriting the content at the top of the web page.

Code:

<?php
if ($data) {
	echo '<html>';
	echo '<div style=position: relative; height:=235px;>';
	echo '<div style="position: absolute; top:0px; left:0px;"><img src="../../forms/audiogram/images/pure_tone_grid.png"/></div>';
	echo '<div style="position: absolute; top:60px; left:50px"><img src="../../forms/audiogram/images/O.png"/></div>';
	echo '<div style="position: absolute; top:60px; left:76px"><img src="../../forms/audiogram/images/O.png"/></div>';
	echo '<div style="position: absolute; top:60px; left:274px"><img src="../../forms/audiogram/images/X.png"/></div>';
	echo '<div style="position: absolute; top:60px; left:303px"><img src="../../forms/audiogram/images/X.png"/></div>';
	echo '</div>';
	echo '</html>';
} // end if ($data)
?>

It seems that it’s somehow handled differently when contained within a “window within a window”, as it is in the encounter section of OEMR. Or perhaps it’s because it’s called form within a PHP block?

7

mabutler573 wrote on Monday, October 06, 2014:

You’re missing quotes on your first div on line 4.

echo '<div style=position: relative; height:=235px;>';

should be

echo '<div style="position: relative; height: 235px;">';
8

blatta wrote on Monday, October 06, 2014:

God, I’m so embarrassed. I haven’t been doing this a long time but I’ve certainly been doing it long enough to have avoided that particular mistake.

9

fsgl wrote on Tuesday, October 07, 2014:

No ignominy in having only one valedictory after your name.

Educere, to lead out (of oneself). What can be more edifying than self-education.

We assume the problem has been solved.

Perhaps in retirement you may consider helping out in Github.

10

blatta wrote on Tuesday, October 07, 2014:

Once I finish this one “last” project and go live I’d be happy to do that. I remember an old movie (“The Prime of Miss Jean Brodie”) wherein the etymology of the word educate was explained.

11

fsgl wrote on Wednesday, October 08, 2014:

Tons of stuff tatooed on those palpebral conjunctivae, almost like Graphene,

We look forward to your contributions. Thank you.