thank you @emre everything working fine
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 
3 Likes
lol nothing magical. That clearly shows both @marios and me donāt know which one is the forward slash hahaā¦
5 Likes
Emreās magic word was āEverywhereā !!!
Thank you emre,Rickh and sukasem ā¦
1 Like
Thanks for the awesome guide. 
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;"> </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']"> </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']"> </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"> </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"> </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 : Demo 2 - Image Slider with Thumbnails
I guess you should trigger it after a payment made.
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
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,
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 Templatecontaining code to display an āidleā screen. It could simply contain your logo and a message like āWelcome to my Restaurantā. - create a
Print Jobfor the āidleā screen using the Browser Printer and the above Template. - create an action for
Execute Print Jobthat 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 Commandaction to theTicket Payment CheckRule, 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 likeShow Idle Display. Set the delay (AMCdelay) to30. - add a Rule to handle the Event for
Automation Command ExecutedusingShow Idle Displayas aConstraintforAutomation Command Name, and in that Rule, fire theExecute Print Jobaction for your āidleā screen.
3 Likes
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.
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.
2 Likes
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 CommandAction should have a delay of0and the[:AMCname]could beShow Thank-you Display - the second
Execute Automation CommandAction should have a delay of30and the[:AMCname]would beShow Idle Display - then make 2x Rules to handle each of the above
Automation Commands, containing the appropriate constraint, andExecute PrintJob Action
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).
4 Likes
Wow. @QMcKay thanks for sharing. Literally just copied and pasted your instructions and it works beautifully.
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"> </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"> </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
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ā¦
{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>
2 Likes
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
Hi Sylarspock,
can you explain how the process. i try to find the action and rules to clone.
thanks
andy
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.