Customer Display using Custom Browser Printer

Customer Display using Custom Browser Printer - basic setup.

This is the result of this setup:


Install Custom Printers Module, and restart SambaPOS.


Create a new Printer using Custom Printers > Browser Printer

Set a path and file name to print your HTML content. If left blank, the path and file will default to:

[Documents]\SambaPOS5\CustomerDisplay.html

:exclamation: Be sure to enter a DOT for the Printer Share Name / Port Name to enable this printer.


Printer Template - Orders

We use [ORDERS:INDEX:1] to apply special formatting to the last-added Order, which is shown in Red, above. We also sort the Orders by Last Update Time Desc, so the last-added Order appears at the top.

[LAYOUT]
<html>
<head>
<title>My Restaurant</title>
</head>

<body style="margin:0px; padding:0px; display:block">
<center>
<div style="width:99%; font-size:30px; position:absolute; top:0px; left:0px; background:red; color:#FFFFFF; margin:0px;">
Total: {TICKET TOTAL}
</div>
</center>
<div style="width:99%; margin:0px; margin-top:35px;">&nbsp;</div>
<div id="orders" style="background:#EEEEEE; width:99%; margin:0px; font-size:16px; font-family:calibri">{ORDERS}</div>
</body>
</html>

[ORDERS:INDEX:1]
<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>

Print Job - Orders


Action for Orders Print Job


Rule - Ticket Total Changed


Rule - Order Tagged


Adding Images to the Products

You can add an image using a Custom Product Tag.

Then use this in the Printer Template:

<img src="{ITEM TAG:ProdImage}"/>

P.S. The Printer Template supplied with this Tutorial already has this feature in it.

Here is a “No Image” image that is referenced if an image has not been defined for the Product:

11 Likes

… reserved for updates …

Hi QMcKay,

Thanks for this great tutorial but i have a problem, please see the picture:

Thanks in advance for the reply.

The error message seems fairly clear - cant find the file.
Suggest checking through all the file references and check for typo.
If the template is very long maybe cut and paste into notepad and put sections back in part at a time and check between sections.

1 Like

I localized the problem, even the printer template is blank i have the same problem. when i remove the dot ‘.’ in the printers>Customer Display the problem disappear but then the printer doesn’t print so i have to find how i can recognized the dot like a printer. Thanks for your helps

You need the dot there. The dot is not the issue. So we can help you solve this please show your Printer Settings including the Custom Printer settings, Show us your template as well.

1 Like

@kmurat BTW I see your using WIndows 10. Make sure you to go Control Panel > Add Remove Programs and check Windows Applications and ensure Internet Explorer 11 is installed.

Microsoft Edge will not work with this yet. You need Internet Explorer 11 enabled for it to work.

However please see my post above more than likely it is a template or printer setting issue.

1 Like

Yes, you need the dot.

Did you click Settings link to the right of the Browser Printer and specify a path/filename to use or are you ok with using the default?
Does that path/filename exist (even the default should exist)?

1 Like

Thanks for all, you’re right Kendash, I’m on Windows 10 so I fixed the problem after installing Internet Explorer 11, but i have somes script problem regarding the HTML inside the printer template code.

this line : <img src="[='{ITEM TAG:ProdImage}' !='' ? '{ITEM TAG:ProdImage}' : 'D:/Programs/POS/images/znoimage-th.jpg']">

I’ve tested with windows 7 and the template is working

I think its a problem of compatibility of Internet Explorer between win 7 and Win 10

@kmurat I haven’t added any photos to the tags under products list. However when I do go check that line, I see the same URL. So went to D: then created each folder until it reaches the final folder where it tries to find znoimage-th.jpg. Then I add whatever image I want to display no image and just change znoimage-th.jpg to whatever image file I have there, and tested it and it works :smile:

I do have one question relating to this though. I’m not too familiar with HTML coding so I could use a bit of help. I wanted to add a banner Image at the top, then put like a box around all the orders with the subtotal showing at the bottom, and then the “total” red bar to be just at the bottom of that too. I also wanted to see If I can centralize this and use some white space on the left and right side of the webpage for a background wallpaper, or solid colour or just an advert left and right. Any idea how this can be done?

HTML code used will be just that, HTML, it’s not samba specific so you might get limited help with the code.
Based on your plan I would expect div will be a key aspect for you.
There are a couple of templates people have shared, I would suggest you start with one of those and expand on them.
You will need to nest your divs to give the layout you need.
Google HTML div, there are hundreds of thousands of HTML tutorial websites on the web which will give you all the info you need :smile:
You will get a more positive responce if you try to get going and ask for assistance when you get stuck rather than just asking for some code off the bat.

The template from this tutorial will be a good place to start from.

A very handy tool for any HTML creation is a editor like notepad++ which highlights code and divs etc.

Another very handy tool is something like firebug for Firefox which has an eliments highlighter which when selected will show you the ‘boxes’/outlines of divs/sections etc which will help you understand what’s going where. Also allows live editing within the page so you can narrow down the parts of code which change the part your looking to adjust.

1 Like

I used and understand all the outlines of it, so whatever is showing on the screen, I can identify which area of the code reflects what’s on the page, its just the modifying part that I’m stuck with. Like The total at the top with the red bar goes across the entire page from left to right within the height limit. I wanted to know how to adjust that within the code, from there I may have a better idea and understanding of how to adjust other parts that I wish to adjust, and that’s a start that would lead me onto exploring many different things that I could implement and add :smile:

I’m sorry if I sounded like I wanted all the work to be just given to me. That wasn’t my intention at all. sorry everyone.

2 Likes

Dont be sorry. Truth is a lot of people come to forum and search 1-2 topics then demand us create solution for them. So we as a community get sort of cranky sometimes. We apologize for that its not intentional. Let me look at it and I can provide you some ideas to get started.

1st download an editor like Notepad++ its great for this:

Notice how when I clicked on a div tag it auto highlighted everything inside that div tag this makes it easy to find out what blocks of code you should work with when editing.

2 Likes

In this image I have clicked on the div that contains {TICKET TOTAL} it shows you what is controlling the various formatting for that. notice style, font-size, width etc.

Start experimenting and eventually you will learn what setting does what. Here is another great resource:

http://www.w3schools.com/html/

1 Like

Thanks Kendash. I installed Notepad ++ and am looking at some tutorials online. Yes I can see, it does make editing easier. I will give it a crack and see what I can come up with.

1 Like

Sorry guys just one question. After a payment has been made and ticket is closed, I notice the last order still stays on the customer display screen. how can we make it so as soon as ticket is closed, it clears the display screen ready for next customer?

Make idle template to display when idle and put Execute Idle Print Job in Ticket Closed Event.

1 Like

Sweet. That worked. Thanks :slight_smile: