Customer Display using Custom Browser Printer


#63

thank you @emre everything working fine


#64

Rickh and sukasem both said that but I guess Emre has that magic touch where someone just suddenly understands lol

Although Rickh just had terminology backwards :smile:


#65

lol nothing magical. That clearly shows both @marios and me don’t know which one is the forward slash haha…


#66

Emre’s magic word was “Everywhere” !!!

Thank you emre,Rickh and sukasem …


#67

Thanks for the awesome guide. :grinning:

I have managed to set this up with 2 columns (1 Showing Slideshow/Another side transactions as above).
However, I’m stuck in getting it to display the Tendered and Change Due to work.

The number $0 is generated, however it doesnt reflect the true amount.
I use the same {commands} on my Ticket Printer and it works fine.

Also feel free to use the code below and tweak it for your needs.
For all intents and purposes it works fine except for the Change/Tendered.

I would appreciate any help you guys can provide in getting them to work.

Total: {TICKET TOTAL}
{PAYMENTS} Tendered: $ {TENDERED TOTAL}
Change Due: $ {CHANGE TOTAL}

My Printer Template is as below.

> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
> <head>
> 	<title>2 Column Customer Display</title>
> 	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
> 	<meta name="description" content="2 Column Customer Display" />
> 	<meta name="keywords" content="2 Column Customer Display" />
> 	<meta name="robots" content="index, follow" />
> 	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
> 	<style media="screen" type="text/css">
> 	/* <!-- */
> 	/* General styles */
> 	body {
> 		margin:0;
> 		padding:0;
> 		border:0;			/* This removes the border around the viewport in old versions of IE */
> 		width:100%;
> 		background:#f3ecdd;
> 		min-width:600px;    	/* Minimum width of layout - remove line if not required */
> 						/* The min-width property does not work in old versions of Internet Explorer */
> 		font-size:90%;
> 	}
> 	a {
> 		color:#369;
> 	}
> 	a:hover {
> 		color:#fff;
> 		background:#369;
> 		text-decoration:none;
> 	}
> 	h1, h2, h3 {
> 		margin:.8em 0 .2em 0;
> 		padding:0;
> 	}
> 	p {
> 		margin:.4em 0 .8em 0;
> 		padding:0;
> 	}
> 	img {
> 		margin:10px 0 5px;
> 	}
> 	/* Header styles */
> 	#header {
> 		clear:both;
> 		float:left;
> 		width:100%;
> 	}
> 	#header {
> 		border-bottom:1px solid #000;
> 	}
> 	#header p,
> 	#header h1,
> 	#header h2 {
> 		padding:.4em 15px 0 15px;
> 		margin:0;
> 	}
> 	#header ul {
> 		clear:left;
> 		float:left;
> 		width:100%;
> 		list-style:none;
> 		margin:10px 0 0 0;
> 		padding:0;
> 	}
> 	#header ul li {
> 		display:inline;
> 		list-style:none;
> 		margin:0;
> 		padding:0;
> 	}
> 	#header ul li a {
> 		display:block;
> 		float:left;
> 		margin:0 0 0 1px;
> 		padding:3px 10px;
> 		text-align:center;
> 		background:#eee;
> 		color:#000;
> 		text-decoration:none;
> 		position:relative;
> 		left:15px;
> 		line-height:1.3em;
> 	}
> 	#header ul li a:hover {
> 		background:#369;
> 		color:#fff;
> 	}
> 	#header ul li a.active,
> 	#header ul li a.active:hover {
> 		color:#fff;
> 		background:#000;
> 		font-weight:bold;
> 	}
> 	#header ul li a span {
> 		display:block;
> 	}
> 	/* 'widths' sub menu */
> 	#layoutdims {
> 		clear:both;
> 		background:#eee;
> 		border-top:4px solid #000;
> 		margin:0;
> 		padding:6px 15px !important;
> 		text-align:right;
> 	}
> 	/* column container */
> 	.colmask {
> 		clear:both;
> 		float:left;
> 		width:100%;			/* width of whole page */
> 		overflow:hidden;		/* This chops off any overhanging divs */
> 	}
> 	/* common column settings */
> 	.colright,
> 	.colmid,
> 	.colleft {
> 		float:left;
> 		width:100%;
> 		position:relative;
> 	}
> 	.col1,
> 	.col2,
> 	.col3 {
> 		float:left;
> 		position:relative;
> 		padding:0 0 1em 0;
> 		overflow:hidden;
> 	}
> 	/* 2 Column (double page) settings */
> 	
> 	.doublepage .colleft {
> 		right:50%;			/* right column width */
> 		background:#f3ecdd;		/* left column background colour */
> 	}
> 	.doublepage .col1 {
> 		width:46%;			/* left column content width (column width minus left and right padding) */
> 		left:52%;			/* right column width plus left column left padding */
> 	}
> 	.doublepage .col2 {
> 		width:46%;			/* right column content width (column width minus left and right padding) */
> 		left:56%;			/* (right column width) plus (left column left and right padding) plus (right column left padding) */
> 	}
> 	/* Footer styles */
> 	#footer {
> 		clear:both;
> 		float:left;
> 		width:100%;
> 		border-top:1px solid #000;
> 	}
> 	#footer p {
> 		padding:10px;
> 		margin:0;
> 	}
> 	/* --> */
> 	</style>
> </head>
> <body>
> <body bgcolor="#e7e1ce">
> <div id="header">

> 	<p id="layoutdims"><strong>Date:</strong> {DATE} <strong> Time: {TIME} </p>
> </div>
> <div class="colmask doublepage">
> 	<div class="colleft">
> 		<div class="col1">
> 			<!-- Column 1 start -->
> 			
> <html>
> <body bgcolor="#f3ecdd">

>   <head> <br><br><br><br><br><br><br><br><br>
>     <link href="js-image-slider.css" rel="stylesheet" type="text/css" />
>     <script src="js-image-slider.js" type="text/javascript"></script>
>   </head>
>   <body>
>     <div id="sliderFrame">
>         <div id="slider">
>             <img src="slide-1.jpg" />
>             <img src="slide-2.jpg" />
>            <img src="slide-3.jpg" />
>             <img src="slide-4.jpg" />
>             <img src="slide-5.jpg" />
>             <img src="slide-6.jpg" />
>             <img src="slide-7.jpg" />
>             <img src="slide-8.jpg" />
>         </div>
>         <img src="social.png" />
>       
>     </div>
>   </body>
> </html>

> 		
> 			<!-- Column 1 end -->
> 		</div>
> 		<div class="col2">
> 			<!-- Column 2 start -->
> 			[LAYOUT]
> <html>
> <head>
> <title>Chulop</title>
> </head>

> <body style="margin:0px; padding:0px; display:block">
> <center>
> <div style="width:99%; font-size:35px; position:absolute; top:0px; left:0px; background:#a20334; color:#FFFFFF; margin:0px;">
> Total: {TICKET TOTAL} <br> {PAYMENTS} Tendered: $ {TENDERED TOTAL} 
> Change Due: $ {CHANGE TOTAL} 
> </div>
> </center>
> <div style="width:99%; margin:0px; margin-top:35px;">&nbsp;</div>
> <div id="orders" style="background:#f3ecdd; width:99%; margin:0px; font-size:16px; font-family:calibri">{ORDERS}</div>
> </body>
> </html>

> [ORDERS:INDEX:1]
> <br><br><br><br><br>
> <div id="orderline" style="width:99%; font-size:16px; border-top:solid 1px #BBB; padding:3px;">
>   <div id="prodimg" style="width:15%; display:inline-block; vertical-align:middle"><img src="[='{ITEM TAG:ProdImage}' !='' ? '{ITEM TAG:ProdImage}' : 'D:/Programs/POS/images/znoimage-th.jpg']">&nbsp;</div>
>   <div id="prodqty" style="width:5%; display:inline-block; vertical-align:middle">{QUANTITY}</div>
>   <div id="prodname" style="width:45%; display:inline-block; overflow:hidden; vertical-align:middle;color:#FF0000"><b>{NAME}</b></div>
>   <div id="prodprice" style="width:13%; display:inline-block; text-align:right; vertical-align:middle">{PRICE}</div>
>   <div id="prodamount" style="width:15%; display:inline-block; text-align:right; vertical-align:middle">{TOTAL AMOUNT}</div>
> </div>
> <div style="width:99%; text-align:left; font-size:10px;">{SORTED ORDER TAGS}</div>

> [ORDERS]
> <EB>
> <div id="orderline" style="width:99%; font-size:16px; border-top:solid 1px #BBB; padding:3px;">
>   <div id="prodimg" style="width:15%; display:inline-block; vertical-align:middle"><img src="[='{ITEM TAG:ProdImage}' !='' ? '{ITEM TAG:ProdImage}' : 'D:/Programs/POS/images/znoimage-th.jpg']">&nbsp;</div>
>   <div id="prodqty" style="width:5%; display:inline-block; vertical-align:middle">{QUANTITY}</div>
>   <div id="prodname" style="width:45%; display:inline-block; overflow:hidden; vertical-align:middle">{NAME}</div>
>   <div id="prodprice" style="width:13%; display:inline-block; text-align:right; vertical-align:middle">{PRICE}</div>
>   <div id="prodamount" style="width:15%; display:inline-block; text-align:right; vertical-align:middle">{TOTAL AMOUNT}</div>
> </div>
> <DB>
> <div style="width:99%; text-align:left; font-size:10px;">{SORTED ORDER TAGS}</div>

> [SORTED ORDER TAGS]
> <div id="ordertags" style="width:99%; color:#0000FF">
>     <div style="width:15%; display:inline-block; vertical-align:middle">&nbsp;</div>
>     <div style="width:1%; display:inline-block; padding-left:35px; padding-right:3px; vertical-align:middle">{ORDER TAG QUANTITY}</div>
>     <div style="width:35%; display:inline-block; overflow:hidden; vertical-align:middle">{ORDER TAG NAME}</div>
>     <div style="width:1%; display:inline-block; vertical-align:middle">{ORDER TAG PRICE}</div>
>     <div style="width:15%; display:inline-block; text-align:right; vertical-align:middle">[=F(TN('{ORDER TAG QUANTITY}')*TN('{ORDER TAG PRICE}'))]</div>
> </div>

> [SORTED ORDER TAGS GROUP|OTS]

> [SORTED ORDER TAGS GROUP:OTS]
> <div id="ordertags" style="width:99%; color:#0000FF">
>     <div style="width:15%; display:inline-block; vertical-align:middle">&nbsp;</div>
>     <div style="width:60%; display:inline-block; padding-left:35px; padding-right:3px; vertical-align:middle">~~~ ON-THE SIDE ~~~</div>
> </div>




> 			<!-- Column 2 end -->
> 		</div>
> 	</div>
> </div>

> <script type="text/javascript">
> _uacct = "UA-1848067-8";
> urchinTracker();
> </script>

> </body>
> </html>

Transaction template from this thread and slider Code from here : http://www.menucool.com/slider/javascript-image-slider-demo2


Ticket template preview does not work with my V4 Restored database
#68

I guess you should trigger it after a payment made.


#69

Any tips on how I can go about doing that?

Create another Printer and assign it to the same html file ?
and setup automated rules to execute print on payment.

Shall give this a try first :smile:


#70

Nice. Got it working within a minute.

Thanks a lot Emre.

I cloned the ACM Auto Print Action and Rule that we use to auto print my Bill and just changed the Printer and Print job to Customer Display - Orders printer/template.


Ok now onto to Stage 2, I’m trying to figure out how to not display Voided/Cancelled Orders in the transaction list and switch to an empty transaction about 30 secs after we enter the payment screen,


#71

Add a section to your template for Void orders, but leave the format blank. This is standard:

[ORDERS:Void]
-- do not print Orders with Void state

Copy/paste the above into your Template somewhere (i.e. after the normal [ORDERS] section).


  • create a Printer Template containing code to display an “idle” screen. It could simply contain your logo and a message like “Welcome to my Restaurant”.
  • create a Print Job for the “idle” screen using the Browser Printer and the above Template.
  • create an action for Execute Print Job that fires the above job.
  • create an action for Execute Automation Command. Use [:variables] for all parameters, such as [:AMCname], [:AMCvalue], and [:AMCdelay].
  • add the above Execute Automation Command action to the Ticket Payment Check Rule, or clone that Rule and remove the actions from the clone, and add the above action. Set the name of the command (AMCname) to something like Show Idle Display. Set the delay (AMCdelay) to 30.
  • add a Rule to handle the Event for Automation Command Executed using Show Idle Display as a Constraint for Automation Command Name, and in that Rule, fire the Execute Print Job action for your “idle” screen.

#72

Could I make it, so that when a payment is made, it changes from the order screen to another screen that shows something like " THANKS FOR STOPPING BY. DONT FORGET TO FOLLOW OUR SOCIAL MEDIA PAGES"… Then I can get it to fire idle screen after like 30 seconds.?

I’ve already implemented the IDLE screen, I know I have to recreate a new print template, a print job,an action for the print job, but the rule to fire the print job is where I could use some help.


#73

The beauty of SambaPOS is that you can virtually do whatever you want. You may need to study it some more and get a better grasp but possibilities are almost endless. I highly encourage you to mess around with it and try to implement it on your own ask us for help with areas you get lost in or simply cant figure out. Try hard to refrain from giving up and just asking for someone to do it for you and post a tutorial. You will gain a much better knowledge of the system and you will be able to configure it to your own needs much more efficiently and faster in the future.

Use a test database and dont be afraid of breaking things. Try stuff out make mistakes learn from them. Break some things and learn from that.

This investment will boost your business.


#74

Do the same thing as I outlined above, but have 2x Execute Automation Command Actions in the Ticket Payment Check Rule

  • the first Execute Automation Command Action should have a delay of 0 and the [:AMCname] could be Show Thank-you Display
  • the second Execute Automation Command Action should have a delay of 30 and the [:AMCname] would be Show Idle Display
  • then make 2x Rules to handle each of the above Automation Commands, containing the appropriate constraint, and Execute Print Job Action

#75

Hi all!
Here is some useful information: if someone wants to remove these terrible scrollbars from your customer display, so you should add this code to your .CSS file:

html { -ms-overflow-style: -ms-autohiding-scrollbar; }

It’s especially important if you use the slideshow or “Image Slider” from the first post (for the “idle screen” for example).


#76

Wow. @QMcKay thanks for sharing. Literally just copied and pasted your instructions and it works beautifully.


#77

How to display calculation Name, calculation amount and calculation total for discount at customer display

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
<title>Kewarung</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="2 Column Customer Display" />
<meta name="keywords" content="2 Column Customer Display" />
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link type="text/css" rel="stylesheet" href="gaya.css"/>
<style media="screen" type="text/css">
 	</style>
 </head>
 <body bgcolor="#e7e1ce">
 <div id="header">

 	<p id="layoutdims"><strong>Date:</strong> {DATE} <strong> Time: {TIME} </p>
 </div>
 <div class="colmask doublepage" style="background:url(DisplayImage/latar.jpg);">
 	<div class="colleft">
 		<div class="col1">
 			<!-- Column 1 start -->
 			
 <kolom1>
   <br><br><br><br><br><br><br><br><br><br><br>
   <link href="js-image-slider.css" rel="stylesheet" type="text/css" />
   <script src="js-image-slider.js" type="text/javascript"></script>
   
     <div id="sliderFrame">
         <div id="slider">
             <img src="DisplayImage/slide-1.jpg" />
             <img src="DisplayImage/slide-2.jpg" />
             <img src="DisplayImage/slide-3.jpg" />
             <img src="DisplayImage/slide-4.jpg" />
             <img src="DisplayImage/slide-5.jpg" />
             <img src="DisplayImage/slide-6.jpg" />
             <img src="DisplayImage/slide-7.jpg" />
         </div>
     </div>
</kolom1>

 		
			<!-- Column 1 end -->
		</div>
 		<div class="col2" style="height:710px;">
 			<!-- Column 2 start -->
 			[LAYOUT]

 <kolom2 style="margin:0px; padding:0px; display:block;">
 <div id="logokewarung">
   <img src="DisplayImage/Kewarung.jpg" />
 </div>
 <center>
 <div style="width:95%; font-size:30px; position:absolute; top:10px; left:0px; background:#ff0000; color:#FFFFFF; margin:0px;">
 Total: {TICKET TOTAL} <br>
 {DISCOUNTS}
 {CALCULATION NAME} {CALCULATION AMOUNT} %: {CALCULATION TOTAL} <br>
 {PAYMENTS}
 Bayar: {TENDERED TOTAL}
 Kembalian: {CHANGE TOTAL} 
 </div>
 </center>
 
 <div id="orders">
 {ORDERS}
 </div>
 </kolom2>


 [ORDERS:INDEX:1]
 <br><br><br><br><br>
 <div id="orderline" style="width:99%; font-size:16px; border-top:solid 1px #BBB; padding:3px;">
   <div id="prodqty" style="width:5%; display:inline-block; vertical-align:middle">{QUANTITY}</div>
   <div id="prodname" style="width:55%; display:inline-block; overflow:hidden; vertical-align:middle;color:#FF0000"><b>{NAME}</b></div>
   <div id="prodprice" style="width:15%; display:inline-block; text-align:right; vertical-align:middle">{PRICE}</div>
   <div id="prodamount" style="width:20%; display:inline-block; text-align:right; vertical-align:middle">{TOTAL AMOUNT}</div>
 </div>
 <div style="width:99%; text-align:left; font-size:12px;">{SORTED ORDER TAGS}</div>
 [ORDERS]
 <EB>
 <div id="orderline" style="width:99%; font-size:16px; border-top:solid 1px #BBB; padding:3px;">
   <div id="prodqty" style="width:5%; display:inline-block; vertical-align:middle">{QUANTITY}</div>
   <div id="prodname" style="width:55%; display:inline-block; overflow:hidden; vertical-align:middle">{NAME}</div>
   <div id="prodprice" style="width:15%; display:inline-block; text-align:right; vertical-align:middle">{PRICE}</div>
   <div id="prodamount" style="width:20%; display:inline-block; text-align:right; vertical-align:middle">{TOTAL AMOUNT}</div>
 </div>
 <DB>
 <div style="width:99%; text-align:left; font-size:12px;">{SORTED ORDER TAGS}</div>
 [SORTED ORDER TAGS:Discount Item]
 <div id="ordertags" style="width:99%; color:#0000FF">
 	 <div style="width:6%; display:inline-block; text-align:left">&nbsp;</div>
     <div style="width:55%; display:inline-block; overflow:hidden; vertical-align:middle">{ORDER TAG NAME} {ORDER TAG RATE} %</div>
     <div style="width:15%; display:inline-block; text-align:right">{ORDER TAG PRICE}</div>
     <div style="width:20%; display:inline-block; text-align:right; vertical-align:middle">[=F(TN('{QUANTITY}')*TN('{ORDER TAG PRICE}'))]</div>
 </div>
  
 [SORTED ORDER TAGS GROUP|OTS]

 [SORTED ORDER TAGS GROUP:OTS]
 <div id="ordertags" style="width:99%; color:#0000FF">
     <div style="width:15%; display:inline-block; vertical-align:middle">&nbsp;</div>
     <div style="width:60%; display:inline-block; padding-left:35px; padding-right:3px; vertical-align:middle">~~~ ON-THE SIDE ~~~</div>
 </div>




 			<!-- Column 2 end -->
 		</div>
 	</div>
 </div>
 

 </body>
 </html>

Result

and how to make slide show not play begin again every add a order


#78

Given that the page will be refreshing each update it will restart the slide show…
You could try to frame the two sections of the screen with an iframe but not tried cust display myself.
If you hold off and look at the samba API topics I’m pretty sure I’ve seen a new web based customer display method using the new GraphQL API which is a Java based one which updates live rather than triggering page refresh on a local HTML file coming out of a text file printer…


#79

{CALCULATION NAME}, {CALCULATION AMOUNT} and {CALCULATION TOTAL} need to be inside a [DISCOUNTS] part. On your template, you don’t have one.

You should change:

 {DISCOUNTS}
 {CALCULATION NAME} {CALCULATION AMOUNT} %: {CALCULATION TOTAL} <br>
 {PAYMENTS}

to this:

 {DISCOUNTS}
 {PAYMENTS}

Then add this section later in the template:

[DISCOUNTS]
 {CALCULATION NAME} {CALCULATION AMOUNT} %: {CALCULATION TOTAL} <br>

#80

Hi Sylarspock,

great work, thanks for sharing.

i loaded your template. it doesnt appera to like yours. what else i need to install for the slideshow not working it only show fixed picture. i’m using IE 11. also what is standard size of image pix?

Thanks
andy


#81

Hi Sylarspock,

can you explain how the process. i try to find the action and rules to clone.

thanks
andy


#82

Well, his template post has extra > at the front of each line. It will not work if you just copy and paste. You should have knowledge of basic HTML as well.