Skip to content

Commit 123efe5

Browse files
author
MakkarLabs
committed
Fixed print sheet image sizes to original using SVG, scaling images that have greater than 96dpi as workaround for canvas default behavior
1 parent 79319e2 commit 123efe5

File tree

3 files changed

+848
-879
lines changed

3 files changed

+848
-879
lines changed

‎create.html

Lines changed: 124 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,124 @@
1-
<!DOCTYPE HTML>
2-
<html>
3-
<head>
4-
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css">
5-
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css" type="text/css">
6-
<link rel="stylesheet" href="bootstrap/css/head.css" type="text/css">
7-
<link rel="stylesheet" href="bootstrap/css/createfonts.css" type="text/css">
8-
9-
<style>
10-
canvas {
11-
border: 1px solid #9C9898;
12-
margin-left:auto;
13-
margin-right:auto;
14-
}
15-
.canvas-container { margin-left:auto; margin-right:auto; }
16-
.font-dropdown { width: 150px}
17-
.colorbox { width:20px}
18-
.positionbox { width:150px; }
19-
#customize input,#customize .btn-group,#customize select,#customize a,#customize button { margin-left:4px;margin-right:4px; }
20-
#toolbox { width:1000px; border-radius:5px; border:1px solid gray; position:fixed; bottom:0; margin-left:70px; }
21-
22-
#minimizedtoolbox { background-color:whitesmoke; height:30px; margin-bottom:5px; right:0; margin-right:10px; width:50px; border-radius:5px; border:1px solid gray; position:fixed; bottom:0;}
23-
</style>
24-
<script src="resources/js/jquery.js"></script>
25-
<script src="bootstrap/js/bootstrap.js"></script>
26-
<script src="resources/js/jquery.qrcode.js"></script>
27-
<script src="resources/js/qrcode.js"></script>
28-
<script src="resources/js/fabric.js"></script>
29-
<script src="resources/js/jquery-csv.js"></script>
30-
<script src="resources/js/fonts.js"></script>
31-
<script src="resources/js/zip.js"></script>
32-
<script src="resources/js/create.js"> </script>
33-
<script src="resources/js/analytics.js"></script>
34-
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
35-
</head>
36-
<body>
37-
<div id="headerContainer">
38-
<header>
39-
<h1 id="title-large">Badge it</h1>
40-
<div style="float:right;">
41-
<ul class="nav nav-pills">
42-
<li><a href="home.html">Home</a></li>
43-
<li class="active"><a href="#">Create</a></li>
44-
<li><a href="faq.html">FAQ</a></li>
45-
<li><a href="tutorial.html">Tutorial</a></li>
46-
<li><a href="about.html">About</a></li>
47-
<li><a href="contact.html">Contact Us</a></li>
48-
</ul>
49-
</div>
50-
<div class="clr">
51-
</header>
52-
</div>
53-
54-
<div class="container">
55-
56-
<div id="canvasnbox">
57-
<div id="canvasholder" style="margin-top:30px; margin-bottom:100px;">
58-
<canvas id='canvas' width='canvasWidth()' height='canvasHeight()'></canvas>
59-
<div class="clr"></div>
60-
</div>
61-
<div class="clr"></div>
62-
<div id="minimizedtoolbox" hidden="hidden">
63-
<a href="" style="margin-left:20px;" id ="maximizetoolbox" ><i class="icon-chevron-up"></i></a>
64-
</div>
65-
66-
<div id="toolbox" class="well">
67-
<div class="form-inline">
68-
69-
<select id="comp-select" style="width:150px; margin-bottom:10px;margin-left:5px;"></select>
70-
<a href="" style="float:right; margin-top:-15px;" id ="minimizetoolbox" rel="tooltip" title="Minimize toolbox"><i class="icon-chevron-down"></i></a>
71-
<div id="customize">
72-
</div>
73-
<span id="genimages">
74-
<button style="width:70px; margin-top:18px; margin-left:462px; " class="btn btn-primary" id="save" title="Click to create all badges">Next</button>
75-
<progress id="gen" value="1" hidden='true' ></progress>
76-
</span>
77-
78-
<button class="btn btn-primary" rel="tooltip" title="Create a Zip compressed file of all badges" style="margin-left:466px;display:none;" hidden="hidden" id="zip">Zip Files</button>
79-
<progress id="zipprogress" hidden='true'></progress>
80-
<div hidden="true" style="margin-top:10px;margin-left:452px;margin-bottom:-15px;" id="ziplink"><a class="btn btn-success" id='download'>Download Zip</a></div>
81-
<br>
82-
<button id="print" class="btn btn-primary" rel="tooltip" title="View all badges tiled, opens in a new tab" hidden="hidden" style="display:none; margin-left:402px; margin-top:10px" onclick="window.open('./print.html')">Tile Badges</button>
83-
<button id="back" class="btn btn-danger" rel="tooltip" title="Go back to customize the badges" hidden="hidden" style="margin-left: 5px; margin-top:10px; float: left; display:none">Back</button>
84-
<button class="btn btn-danger" rel="tooltip" title="Exit the applications. Clears local application data" hidden="hidden" style="float:right; margin-top:-30px; display:none;" id ="finish">Exit</button>
85-
<div class="clr"></div>
86-
</div>
87-
</div>
88-
<div class="clr"></div>
89-
<div id="badges"></div>
90-
<br>
91-
<div id='qrcode' hidden='true'></div>
92-
</div>
93-
<div id="thanks" hidden>
94-
<h2 style="font-family: OvertheRainbow; font-size: 48px; margin-top: 210px; text-align:center; color: #08C;">
95-
You are awesome!<br/><br/>Thanks for using BadgeIt :D
96-
</h2>
97-
<g:plusone></:plusone>
98-
</div>
99-
</div>
100-
101-
<span id="fontloaderfix" style="">
102-
<span style="font-family: Capriola;transparency: white; opacity:0">M</span>
103-
<span style="font-family: Italiana;opacity: 0;">a</span>
104-
<span style="font-family: Marmelad;opacity:0">k</span>
105-
<span style="font-family: Michroma;opacity:0">k</span>
106-
<span style="font-family: Miniver;opacity:0">a</span>
107-
<span style="font-family: Nunito;opacity:0">r</span>
108-
<span style="font-family: OverlockSC;opacity:0">L</span>
109-
<span style="font-family: OvertheRainbow;opacity:0">a</span>
110-
<span style="font-family: Quando;opacity:0">b</span>
111-
<span style="font-family: Rochester;opacity:0">s</span>
112-
<span style="font-family: Rancho;opacity:0">1</span>
113-
<span style="font-family: Sail;opacity:0">2</span>
114-
</span>
115-
116-
<footer class="footer">
117-
<div class="container">
118-
<p> <a target="_blank" href="http://makkarlabs.in">Makkar Labs</a>, 2012</p>
119-
<p> Customized for Google Chrome (Version 13.0+)</p>
120-
<p> <a target="_blank" href="https://github.com/makkarlabs/badgeit">Code</a> is Licensed under <a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>.</p>
121-
</div>
122-
</footer>
123-
</body>
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css">
5+
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css" type="text/css">
6+
<link rel="stylesheet" href="bootstrap/css/head.css" type="text/css">
7+
<link rel="stylesheet" href="bootstrap/css/createfonts.css" type="text/css">
8+
9+
<style>
10+
canvas {
11+
border: 1px solid #9C9898;
12+
margin-left:auto;
13+
margin-right:auto;
14+
}
15+
.canvas-container { margin-left:auto; margin-right:auto; }
16+
.font-dropdown { width: 150px}
17+
.colorbox { width:20px}
18+
.positionbox { width:150px; }
19+
#customize input,#customize .btn-group,#customize select,#customize a,#customize button { margin-left:4px;margin-right:4px; }
20+
#toolbox { width:1000px; border-radius:5px; border:1px solid gray; position:fixed; bottom:0; margin-left:70px; }
21+
22+
#minimizedtoolbox { background-color:whitesmoke; height:30px; margin-bottom:5px; right:0; margin-right:10px; width:50px; border-radius:5px; border:1px solid gray; position:fixed; bottom:0;}
23+
</style>
24+
<script src="resources/js/jquery.js"></script>
25+
<script src="bootstrap/js/bootstrap.js"></script>
26+
<script src="resources/js/jquery.qrcode.js"></script>
27+
<script src="resources/js/qrcode.js"></script>
28+
<script src="resources/js/fabric.js"></script>
29+
<script src="resources/js/jquery-csv.js"></script>
30+
<script src="resources/js/fonts.js"></script>
31+
<script src="resources/js/zip.js"></script>
32+
<script src="resources/js/create.js"> </script>
33+
<script src="resources/js/analytics.js"></script>
34+
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
35+
</head>
36+
<body>
37+
<div id="headerContainer">
38+
<header>
39+
<h1 id="title-large">Badge it</h1>
40+
<div style="float:right;">
41+
<ul class="nav nav-pills">
42+
<li><a href="home.html">Home</a></li>
43+
<li class="active"><a href="#">Create</a></li>
44+
<li><a href="faq.html">FAQ</a></li>
45+
<li><a href="tutorial.html">Tutorial</a></li>
46+
<li><a href="about.html">About</a></li>
47+
<li><a href="contact.html">Contact Us</a></li>
48+
</ul>
49+
</div>
50+
<div class="clr">
51+
</header>
52+
</div>
53+
54+
<div class="container">
55+
56+
<div id="canvasnbox">
57+
<div id="canvasholder" style="margin-top:30px; margin-bottom:100px;">
58+
<canvas id='canvas' width='canvasWidth()' height='canvasHeight()'></canvas>
59+
<div class="clr"></div>
60+
</div>
61+
<div class="clr"></div>
62+
<div id="minimizedtoolbox" hidden="hidden">
63+
<a href="" style="margin-left:20px;" id ="maximizetoolbox" ><i class="icon-chevron-up"></i></a>
64+
</div>
65+
66+
<div id="toolbox" class="well">
67+
<div class="form-inline">
68+
69+
<select id="comp-select" style="width:150px; margin-bottom:10px;margin-left:5px;"></select>
70+
<a href="" style="float:right; margin-top:-15px;" id ="minimizetoolbox" rel="tooltip" title="Minimize toolbox"><i class="icon-chevron-down"></i></a>
71+
<div id="customize">
72+
</div>
73+
<span id="genimages">
74+
<button style="width:70px; margin-top:18px; margin-left:462px; " class="btn btn-primary" id="save" title="Click to create all badges">Next</button>
75+
<progress id="gen" value="1" hidden='true' ></progress>
76+
</span>
77+
78+
<button class="btn btn-primary" rel="tooltip" title="Create a Zip compressed file of all badges" style="margin-left:466px;display:none;" hidden="hidden" id="zip">Zip Files</button>
79+
<progress id="zipprogress" hidden='true'></progress>
80+
<div hidden="true" style="margin-top:10px;margin-left:452px;margin-bottom:-15px;" id="ziplink"><a class="btn btn-success" id='download'>Download Zip</a></div>
81+
<br>
82+
<button id="print" class="btn btn-primary" rel="tooltip" title="View all badges tiled, opens in a new tab" hidden="hidden" style="display:none; margin-left:402px; margin-top:10px" onclick="window.open('./print.html')">Tile Badges</button>
83+
<button id="back" class="btn btn-danger" rel="tooltip" title="Go back to customize the badges" hidden="hidden" style="margin-left: 5px; margin-top:10px; float: left; display:none">Back</button>
84+
<button class="btn btn-danger" rel="tooltip" title="Exit the applications. Clears local application data" hidden="hidden" style="float:right; margin-top:-30px; display:none;" id ="finish">Exit</button>
85+
<div class="clr"></div>
86+
</div>
87+
</div>
88+
<div class="clr"></div>
89+
<div id="badges"></div>
90+
<br>
91+
<div id='qrcode' hidden='true'></div>
92+
</div>
93+
<div id="thanks" hidden>
94+
<h2 style="font-family: OvertheRainbow; font-size: 48px; margin-top: 210px; text-align:center; color: #08C;">
95+
You are awesome!<br/><br/>Thanks for using BadgeIt :D
96+
</h2>
97+
<g:plusone></:plusone>
98+
</div>
99+
</div>
100+
101+
<span id="fontloaderfix" style="">
102+
<span style="font-family: Capriola;transparency: white; opacity:0">M</span>
103+
<span style="font-family: Italiana;opacity: 0;">a</span>
104+
<span style="font-family: Marmelad;opacity:0">k</span>
105+
<span style="font-family: Michroma;opacity:0">k</span>
106+
<span style="font-family: Miniver;opacity:0">a</span>
107+
<span style="font-family: Nunito;opacity:0">r</span>
108+
<span style="font-family: OverlockSC;opacity:0">L</span>
109+
<span style="font-family: OvertheRainbow;opacity:0">a</span>
110+
<span style="font-family: Quando;opacity:0">b</span>
111+
<span style="font-family: Rochester;opacity:0">s</span>
112+
<span style="font-family: Rancho;opacity:0">1</span>
113+
<span style="font-family: Sail;opacity:0">2</span>
114+
</span>
115+
116+
117+
<footer class="footer">
118+
<div class="container">
119+
<p> <a target="_blank" href="http://makkarlabs.in">Makkar Labs</a>, 2012</p>
120+
<p> Customized for Google Chrome (Version 13.0+)</p>
121+
<p> <a target="_blank" href="https://github.com/makkarlabs/badgeit">Code</a> is Licensed under <a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>.</p>
122+
</div>
123+
</footer>
124+
</body>

‎print.html

Lines changed: 35 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,35 @@
1-
<html>
2-
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css">
3-
<style>
4-
body {
5-
margin: 0px;
6-
padding: 0px;
7-
}
8-
canvas {
9-
border: 1px solid #9C9898;
10-
position: absolute;
11-
margin:2px;
12-
}
13-
img {
14-
padding: 4px;
15-
border: 1px dashed black;
16-
}
17-
</style>
18-
<script src="resources/js/jquery.js"></script>
19-
<script src="bootstrap/js/bootstrap.js"></script>
20-
21-
<script>
22-
$(document).ready(function () {
23-
$('#printModal').modal('show');
24-
//Image Dimensions
25-
var badges = +$('#badgenum').val();
26-
var sheets = Math.ceil(localStorage['numentries']/badges);
27-
var sheetXsize, sheetYsize, badgeXsize, badgeYsize;
28-
var badgecounter=0, sheetcounter=0;
29-
if($('#orient').val()=='L')
30-
{
31-
sheetXsize = 1110;
32-
sheetYsize = 780;
33-
}
34-
else
35-
{
36-
sheetXsize = 780;
37-
sheetYsize = 1100;
38-
}
39-
badgeXsize = sheetXsize/$('#row').val();
40-
badgeYsize = sheetYsize/$('#col').val();
41-
42-
$('#print').append("<canvas id='canvas"+sheetcounter+"' width='"+sheetXsize+"' height='"+sheetXsize+"'/>");
43-
var persheetcounter = 0;
44-
var xpos=0, ypos=0, colcounter=0;
45-
function printsheet(badgecounter){
46-
var canvas = $("#canvas"+sheetcounter)[0];
47-
var context = canvas.getContext("2d");
48-
var imageObj = new Image();
49-
imageObj.onload = function() {
50-
context.drawImage(imageObj, xpos, ypos, badgeXsize, badgeYsize);
51-
if(++colcounter % $('#col').val()==0)
52-
{
53-
xpos = 0;
54-
ypos+=badgeYsize;
55-
colcounter = 0
56-
}
57-
else
58-
{
59-
xpos+=badgeXsize;
60-
}
61-
};
62-
63-
imageObj.src = 'filesystem:http://makkarlabs.in/temporary/badges/badge'+badgecounter+'.jpeg';
64-
setTimeout(500);
65-
if(++persheetcounter == sheets)
66-
{
67-
persheetcounter = 0;
68-
sheetcounter++;
69-
$('#print').append("<canvas id='canvas"+sheetcounter+"' width='"+sheetXsize+"' height='"+sheetXsize+"'/>");
70-
}
71-
if(++badgecounter < localStorage['numentries'])
72-
printsheet(badgecounter);
73-
}
74-
75-
76-
});
77-
78-
79-
</script>
80-
81-
<body>
82-
<div class="modal" id="printModal" tabindex="-1" role="dialog" aria-labelledby="printModalLabel" aria-hidden="true">
83-
<div class="modal-header">
84-
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
85-
<h3 id="printModalLabel">Print Settings</h3>
86-
</div>
87-
<div class="modal-body" style="margin-left:auto;margin-right:auto;">
88-
<form oninput="(+row.value)*(+col.value)">
89-
<label>Rows per sheet</label><input id='row' name='row' type='text' placeholder='2' value='2'/>
90-
<label>Colums per sheet</label><input id='col' name='col' type='text' placeholder='2' value='2'/>
91-
<label>Badges per sheet</label><input id='badgenum' type='text' placeholder='4' value='4'/>
92-
<label>Page orientation</label>
93-
<select id='orient'>
94-
<option selected="selected" value="L">Landscape</option>
95-
<option value="P">Potrait</option>
96-
</select>
97-
<label>Paper size</label>
98-
<select id='papersize'>
99-
<option selected="selected" value="A4">A4</option>
100-
<option value="A3">A3</option>
101-
</select>
102-
</form>
103-
</div>
104-
<div class="modal-footer">
105-
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
106-
<button class="btn btn-primary" onclick="printsheet(1);">Print</button>
107-
</div>
108-
</div>
109-
110-
<div id="print"></div>
111-
</body>
112-
</html>
113-
1+
<html>
2+
<style>
3+
body {
4+
margin: 0px;
5+
padding: 0px;
6+
}
7+
img {
8+
padding: 1px;
9+
}
10+
</style>
11+
<script src='resources/js/jquery.js'></script>
12+
<script>
13+
14+
$(document).ready(function () {
15+
//Image Dimensions
16+
var dimensions = localStorage['dimensions'].split(",");
17+
for(var j=0; j<dimensions.length; j++) { dimensions[j] = +dimensions[j]; }
18+
function printsheet(i){
19+
var url = 'filesystem:http://makkarlabs.in/temporary/svgs/badge_svg'+i+'.svg';
20+
$("div").append("<span><img src ='" +url+ "'/></span>");
21+
if(++i < localStorage['numentries'])
22+
printsheet(i);
23+
}
24+
printsheet(1);
25+
$('img').css({width:dimensions[2]*72+'pt', height:dimensions[3]*72+'pt'});
26+
window.print();
27+
28+
});
29+
30+
</script>
31+
32+
<body>
33+
<div id="print"></div>
34+
</body>
35+
</html>

0 commit comments

Comments
 (0)