...

View Full Version : Printing dialog box



copes
06-16-2008, 02:04 PM
Hello,

I'm creating a web application for a takeaway company. My problem refers to the part of the application that will only run on their systems (i am quite aware of the exploits it would cause on random websites.)

Basically the interface where new orders appear there is a button to print. This button actually opens up a new window, with a formatted receipt (they use a STAR SP200 receipt printer.)

and has this function excute on load:


function win(){
window.print();
window.opener.location.href="<? echo $file ?>";
setTimeout('window.close()',2);
window.focus();
//-->
}

However the client doesn't like the print dialog box, and using touch screens to operate this application those two print/cancel buttons are quite small and close together.

I've been reading various methods for old versions of IE and a method for Firefox, however neither of these are any good to me as i'm having to use opera due to very poor driver support from the receipt printer with xp.

We have full control of the system which this application will be running, Any application/plugin/exploits etc can be installed or used to help with removing the print dialog box.

The only thing that i can't seeminly change is using the browser opera.

Any help would be much appreciated.

rnd me
06-17-2008, 07:29 AM
javascript alone cannot overcome this problem, as a security precaution. we all know how annoying sound ads are, think how bad it would be to have your printer fire up and spit one out...
ie and ff (and likely others) are designed to force a print button click by the user.


so the question now becomes: what's the easiest way of getting this done?

it's an interesting problem, and i doubt you are alone.

i want to help solve this, but i have a few questions to facilitate an apropos solution.



do you have access to an http server?
-write permissions on that server?
is this the only thing the printer will be used for?
do you prefer firefox or IE?

im thinking that something like saving the receipt using ajax, and using a simple .exe to send it to the printer would work. you could use a unique file extension for the html file, and associate that with the autoprint exe.

copes
06-17-2008, 11:57 AM
Hello,

As regards to the server, Yes we have our own dedicated server.

As regards to the printer, It is used to print out from another system apart from the one we are creating. It is a STAR SP200 which is a specialist receipt printer.

As regards to browser preference, The only browser that prints out from html correctly is Opera 9. IE7 prints out incorrectly, and firefox doesn't print anything! This is due to the printer being very old and not having xp/vista drivers supplied.

We have full control over the "till" computer, to install or change anything we want as long as it works in the end.

I'm currently using php for the backend of the application, and javascript for the printing functions and a few other ui tweaks.

I've never used Ajax before, or really know alot about it.

rnd me
06-17-2008, 09:53 PM
you mention that ie prints it out incorectly.
i made a working .exe last night that uses IE.
it runs, opens the same url every time (which can be over-written from the client), prints without asking, and closes.


i can tell you however, that it is not likely a print driver problem,
but browser incompatibilities that produce the printing effects you note.
if you can print from opera, you SHOULD (hehe) be able to print from any browser.
different browsers render pages differently.



i would be willing to bet that you could achieve a uniform look using CSS formatting.
there is a way to use separate css for the print version.
i believe that css is what you should be formatting.
often i see css being used to layout the screen, and recycled for printing, which usually doesn't work very well.

here is an example of using conditional styles.
you should probably strip out all the css and just use the media sections to make a customized version.

when printed, it makes forms look more like the hand-filled forms many business use.





<style type='text/css'>




/*view and print styles*/
input { font-size: 120&#37;; padding: .2em; background: transparent; }
label { padding-right: 1em; }
select { font-size: 120%; padding: .2em; background: transparent; width: 10em;}


/*view only styles*/
@media screen {

input {margin: .3em; -moz-border-radius : 3px; }
select {margin: .3em; -moz-border-radius : 3px; }
a:focus {-moz-outline: activecaption solid 4px; -moz-outline-radius: 9px;background-color: white; color: black ; padding: 4px; font-size: 130%; background-image:url('/pub/fade22.gif'); }
input:focus {opacity: 1.0; filter: alpha(opacity=100); -moz-outline: #7f7 solid 4px; -moz-outline-radius: 6px; background-image:url('/pub/fade22.gif') }
select:focus {opacity: 1.0; filter: alpha(opacity=100); -moz-outline: #7f7 solid 4px; -moz-outline-radius: 6px; background-image:url('/pub/fade22.gif') }
}

@media screen, print{
body { background-color:buttonface; font-family: verdana; font-size: 12pt; color: Black;
overflow:hidden;padding: 5px; margin: 0px; }
ul {line-height: 150%; list-style-type: none; }
input { border: 2px solid windowframe ; background: white; color: black; margin-left: .66em; }
.noscreen { display: none; }
} /* end of screen styles*/

@media print{
.noscreen { display: block; }
.noprint { display: none; }
h1 {font-size: 30%: }
input { border: 0px; border-bottom: 2px solid black; padding-bottom: .2em; margin-bottom: -.2em;
width: 5em; text-align: center; font-family: "courier new", serif; background: transparent; }
select { border: 0px; border-bottom: 2px solid black;
width: 7em; text-align: center; font-family: "courier new", serif; }
.sig u { font-size: 35pt; }
hr {margin: 2em;}

} /* end of print styles*/

</style>


<!--[if IE]>
<style type='text/css'>
a:active{-moz-outline: activecaption solid 4px; -moz-outline-radius: 9px;background-color: white; color: black ; padding: 4px; font-size: 130%; background-image:url('/pub/fade22.gif'); }
input:active{opacity: 1.0; filter: alpha(opacity=100); -moz-outline: #7f7 solid 4px; -moz-outline-radius: 6px; background-image:url('/pub/fade22.gif') }
select:active{opacity: 1.0; filter: alpha(opacity=100); -moz-outline: #7f7 solid 4px; -moz-outline-radius: 6px; background-image:url('/pub/fade22.gif') }
</style>
<![endif]-->






if you can play around with the css and get it to work in ie, i would be happy to share the exe and source ( simple vb6) of my autoprinter.

copes
06-18-2008, 12:03 PM
Hello again,

Thanks for your help.

This is the example receipt which i am trying to print.

http://www.aligeez.co.uk/receipt.html

It doesn't have any formatting apart from the table layout.

The actual layout works fine in IE, the problem with IE is it makes everyline a double line whether it be <td></td>, <br> or <p></p> and it adds random spaces in between letters, e.g 'HE LLO'

The actual receipt i haven't used css to format in font terms because the printer only prints in a single device-font.

rnd me
06-18-2008, 07:31 PM
hmmm.
if it is a fixed-font, it might be best to convert the table into text.
that should print more consistently.
spaces can be used to justify.


i will do some research about the printer and get back to you.

copes
06-20-2008, 04:26 PM
Okay.

I'm still thinking it may be easier to bypass the print dialog box in opera, than work out how to print correctly in IE, but i may be wrong.

copes
06-23-2008, 05:05 PM
I've tried today to get IE printing correctly.

I've also tried printing with IE6 which had the exact same results.

If its any consulation i've actually managed to get IE6/7 printing without the dialog box using some vbscript. However, this is useless as the IE prints are incorrect!

If only i could find a way to get opera printing!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum