added print layout

This commit is contained in:
Florian 2014-02-17 20:52:36 +01:00
parent 20cf774b3a
commit bfb380a11d
3 changed files with 45 additions and 8 deletions

24
css/print.css Normal file
View File

@ -0,0 +1,24 @@
#page {
width: 800px;
}
#camImage {
position: absolute;
top: 0px;
left: 0px;
}
#metaContainer {
position: absolute;
top: 0px;
left: 700px;
}
#textContainer {
position: absolute;
top: 500px;
left: 0px;
}

View File

@ -11,6 +11,9 @@
//
// This Software is licensed under the GPL Version 3, 29 June 2007
var popen = '<p id="text">',
pclose = '</p>';
//create event which is triggered when DOM is ready
window.onDomReady = initReady;
@ -28,7 +31,8 @@ function initViewer() {
//load contents from localStorage
var display = document.getElementById("camImage"),
page = document.getElementById("page"),
meta = document.getElementById("metaContainer"),
text = document.getElementById("textContainer"),
formName = localStorage.getItem("formName"),
formDate = localStorage.getItem("formDate"),
formAnalysis1 = localStorage.getItem("formAnalysis1"),
@ -43,12 +47,12 @@ function initViewer() {
//display loaded data
if (stor) {
display.setAttribute("src", stor);
page.innerHTML += '<p>' + formName + '</p>';
page.innerHTML += '<p>' + formDate + '</p>';
page.innerHTML += '<p>Kamera ' + camera + '</p>';
page.innerHTML += '<p>' + formAnalysis1 + '</p>';
page.innerHTML += '<p>' + formAnalysis2 + '</p>';
page.innerHTML += '<p>' + formAnalysis3 + '</p>';
meta.innerHTML += popen + formName + pclose;
meta.innerHTML += popen + formDate + pclose;
meta.innerHTML += popen + 'Kamera ' + camera + pclose;
text.innerHTML += popen + formAnalysis1 + pclose;
text.innerHTML += popen + formAnalysis2 + pclose;
text.innerHTML += popen + formAnalysis3 + pclose;
}
//commented out for debugging and layouting purposes

View File

@ -2,12 +2,21 @@
<head>
<script src="js/print.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/print.css">
</head>
<body>
<div id="page">
<img src="about:blank" id="camImage">
<div id="imageContainer">
<img src="about:blank" id="camImage">
</div>
<div id="metaContainer">
</div>
<div id="textContainer">
</div>
</div>