Hi, can I know the codings to do the receipt as above? The table number, time and so on…
Probably going to need to use html template.
Circles might be tricky, not sure how well templates handle layering or if supports say div backgrounds.
If your expecting someone to just create template would sugest an add for paid support or speak paid support from samba themselves or a reseller
1 Like
I was bored, so I played around with this for a while. I’m starting to think its not possible or a couple reasons.
- It appears that we can’t use border-radius in the print templates.
- It doesn’t seem that we can apply background images to divs or table cells.
I put this HTML/CSS together really quick to test. You only get square boxes. I also noticed the inline Divs don’t work but that’s not a big deal (could use a table). You could always do something like it with boxes, just doesn’t appear you can do circles/radius.
<div style="width: 100%; height: 10px;"> </div>
<div style="text-align:center; width:225px;">
<div style="text-align:center; border: 1px black solid; height:50px;width:50px;border-radius:25px; display:inline-block; line-height: 1em;">
<span style="font-size:8px">2020</span><br />
<span style="font-size:14px">21:49</span><br />
<span style="font-size:8px">Dec 24</span><br />
</div>
<div style="text-align:center; border: 1px black solid; height:50px;width:50px;border-radius:25px; display:inline-block; line-height: 1em;">
<span style="font-size:8px">Table</span><br />
<span style="font-size:14px">59</span><br />
<span style="font-size:8px">'ico'</span><br />
</div>
<div style="text-align:center; border: 1px black solid; height:50px;width:50px;border-radius:25px; display:inline-block; line-height: 1em;">
<span style="font-size:8px">Pax</span><br />
<span style="font-size:14px">3</span><br />
<span style="font-size:8px">'ico'</span><br />
</div>
<div style="text-align:center; border: 1px black solid; height:50px;width:50px;border-radius:25px; display:inline-block; line-height: 1em;">
<span style="font-size:8px">Server</span><br />
<span style="font-size:14px">Joe R</span><br />
<span style="font-size:8px">'ico'</span><br />
</div>
</div>
<div style="width: 100%; height: 10px;"> </div>
<div style="Text-Align: Center; background: white; color: black; border: 1px black solid; border-radius:5px; width: 225px; font-family:'Helvetica'; font-size:12px; font-weight:normal;line-height: 1.6em;">Guest</div>
<div style="border-bottom: 1px black solid; text-align: left; width: 225px; font-family:'Helvetica'; font-size:12px; font-weight:normal; line-height: 1.6em;">
<table width="100%">
<tr>
<td style="font-family:'Helvetica'; font-size:12px;">285 Chicken Burger Special</td>
<td style="font-family:'Helvetica'; font-size:12px; text-align:right;">[] 1x</td>
</tr>
</table>
</div>
<div style="width: 100%; height: 10px;"> </div>
<div style="Text-Align: Center; background: white; color: black; border: 1px black dashed; border-radius:5px; width: 225px; font-family:'Helvetica'; font-size:12px; font-weight:normal;line-height: 1.6em;">'ico' WIFI E4B178</div>
2 Likes
I think Document printer provides some additional control that HTML cant. I dont know much about it though.
Nice try, have never had the need to use html, stuck to simple pos templates so don’t know the answer.
Can you overlay divs? Rather than background could the image of circles be in a div with child divs over it. Obviously doable in proper website but again question is if templates support it.
Unfortunately, no. When you try overlay a div it kicks the text outside of the image or doesn’t show it (depending on what the position tag is set to). Either way, I would never implement image style containers on the ticket. Its just more data for the template the process.
I was curious if we could make it happen. Maybe there is a way, but the most obvious would be the border-radius. So rather than try and put something together it makes sense to just let it be. The other solution is square boxes.
I’m looking at the Document Printer now. I’m not sure what my receipt printer will handle, but it seems like the options are endless. I’m just throwing stuff into a printer template to see what comes out…
1 Like
I didn’t post up the adjusted template. The one above was showing how it would produce in a browser, not the template. I made some changes for the last one. I just overwrote it. Let me see if I can put it back together easily.
Thank you very much. It’ll be really helpful for me. Appreciate it🙌🏻
The one with circles was html outside samba, didnt work in samba, preview with squares was in samba.
update decided to change our own ticket format to this style. Its much easier for customers to read. Might reduce the padding, but overall its better.
In setting this up, I noticed that bottom-border also doesn’t work. Had to use underscore for the single lines.
[LAYOUT]
<div style="padding: 5px; text-align: Center; background-color: #000000 black; color: #ffffff; border: 1px black solid; width: 225px; font-family:'Helvetica'; font-size:12px; font-weight:normal;line-height: 1.6em;">113 E Holly St<Br/>Bellingham, WA 98226<Br />(360) 933-4301</div>
<div style="padding: 5px; text-align: Center; background-color: #ffffff black; color: #000000; border: 1px black solid; width: 225px; font-family:'Helvetica'; font-size:12px; font-weight:normal;line-height: 1.6em;">Order Online @ Horseshoecafe.com</div>
<div style="width: 100%; height: 10px;"> </div>
<table>
<tr>
<td>
<div style="text-align:center; border: 1px black solid; font-family:'Helvetica';">
<div style="height: 10px; font-size:10px;padding:5px;">{DATE:yyyy}</div>
<div style="height: 20px; font-size:14px;padding:2px;">{TIME}</div>
<div style="height: 10px; font-size:10px;padding:5px;">{DATE:MMM} {DATE:dd}</div>
</div>
</td>
<td>
<div style="text-align:center; border: 1px black solid; font-family:'Helvetica';">
<div style="height: 10px;font-size:10px;padding:5px;">Table</div>
<div style="height: 20px;font-size:14px;padding:2px;">{ENTITY NAME:Table}</div>
<div style="height: 10px;font-size:10px;padding:5px;">*icon*</div>
</div>
</td>
<td>
<div style="text-align:center; border: 1px black solid; font-family:'Helvetica';">
<div style="height: 10px;font-size:10px;padding:5px;">Ticket</div>
<div style="height: 20px;font-size:14px;padding:2px;">{TICKET NO}</div>
<div style="height: 10px;font-size:10px;padding:5px;">*icon*</div>
</div>
</td>
<td>
<div style="text-align:center; border: 1px black solid; font-family:'Helvetica';">
<div style="height: 10px;font-size:10px;padding:5px;">Server</div>
<div style="height: 20px;font-size:14px;padding:2px;">{USER NAME}</div>
<div style="height: 10px;font-size:10px;padding:5px;">*icon*</div>
</td>
</tr>
</table>
<div style="width: 100%; height: 10px;"> </div>
<div style="padding: 5px; text-Align: center; border: 1px black solid; font-family:'Helvetica'; font-size:12px; font-weight:normal;line-height: 1.6em;">Welcome, [='{ENTITY NAME:Customer}'==''?'Guest':'{ENTITY NAME:Customer}']</div>
<div style="width: 100%; height: 10px;"> </div>
{ORDERS}
{DISCOUNTS}
[<J10>Total Gift:|{ORDER STATE TOTAL:Gift}]
{SERVICES}
<table><tr>
<td width="275" align="center">___________________________________________</td>
</tr></table>
<table>
<tr>
<td width="225"><span style="text-align:left; font-family:'Helvetica'; font-size:14px;">Tax:</span></td>
<td width="75"><span style="text-align:right; font-family:'Helvetica'; font-size:14px;">{TAX TOTAL}</span></td>
</tr>
</table>
{PAYMENTS}
<div style="width: 100%; height: 10px;"> </div>
<div style="padding: 5px; text-Align: center; border: 1px black solid; font-family:'Helvetica'; font-size:12px; font-weight:normal;line-height: 1.6em;">Thank you for Visiting the 'Shoe<br /> We'll see you next time<Br />Horseshoe Cafe Est. 1886</div>
<div style="width: 100%; height: 10px;"> </div>
<div style="padding: 5px; text-Align: left; border: 1px black solid; font-family:'Helvetica'; font-size:12px; font-weight:normal;line-height: 1.6em;">
<table>
<tr><td align=center><span style="text-align:center; font-family:'Helvetica'; font-size:14px;">*Voluntary* Health Contact Info<Br /></span></td></tr>
<tr><td><span style="text-align:left; font-family:'Helvetica'; font-size:14px;">Name: ___________________________________</span></td></tr>
<tr><td><span style="text-align:left; font-family:'Helvetica'; font-size:14px;">Phone: ___________________________________</span></td></tr>
<tr><td><span style="text-align:left; font-family:'Helvetica'; font-size:14px;">E-mail: ___________________________________<Br /></span></td></tr>
<tr><td><span style="text-align:left; font-family:'Helvetica'; font-size:10px;">If we learn you may have been exposed to COVID-19 during your visit, we will only share this information with public health officials. We will not use your info for any other purpose.</span></td></tr>
</table>
</div>
[DISCOUNTS]
<J30>{CALCULATION NAME} %{CALCULATION AMOUNT}|{CALCULATION TOTAL}
[SERVICES]
-- <J10>{CALCULATION NAME}|{CALCULATION TOTAL}
[PAYMENTS]
<table>
<tr>
<td width="225"><span style="text-align:left; font-family:'Helvetica'; font-size:14px;">{PAYMENT NAME}</span></td>
<td width="75"><span style="text-align:right; font-family:'Helvetica'; font-size:14px;">{PAYMENT AMOUNT}</span></td>
</tr>
</table>
[ORDERS]
<table>
<tr>
<td width="25"><span style="text-align:left; font-family:'Helvetica'; font-size:14px;">- {QUANTITY}</span></td>
<td width="200"><span style="text-align:left; font-family:'Helvetica'; font-size:14px;">{NAME}</span></td>
<td width="30"><span style="text-align:right; font-family:'Helvetica'; font-size:14px;">{TOTAL PRICE}</span></td>
</tr>
{ORDER TAGS}
</table>
[ORDERS:Gift]
-- Format for gifted orders
<table>
<tr>
<td width="25"><span style="text-align:left; font-family:'Helvetica'; font-size:14px;">- {QUANTITY}</span></td>
<td width="200"><span style="text-align:left; font-family:'Helvetica'; font-size:14px;">**COMP** {NAME}</span></td>
<td width="30"><span style="text-align:right; font-family:'Helvetica'; font-size:14px;">{TOTAL PRICE}</span></td>
</tr>
{ORDER TAGS}
</table>
[ORDER TAGS]
-- Format for order tags
<tr>
<td width="25"><span style="text-align:left; font-family:'Helvetica'; font-size:14px;"> {ORDER TAG QUANTITY}</span></td>
<td width="200"><span style="text-align:left; font-family:'Helvetica'; font-size:14px;">* {ORDER TAG NAME} </span></td>
<td width="30"><span style="text-align:right; font-family:'Helvetica'; font-size:14px;">[=F(TN('{ORDER TAG PRICE}')*TN('{ORDER TAG QUANTITY}')*TN('{QUANTITY}'),'#.00')]</span></td>
</tr>
Document printer will give you greater control. I have been meaning to learn how to build a nice template with it but I do not have the time.
FYI, I did try Document Printer with throwing a bunch of commands on a print template. All I did was change my printer to Document Printer and it printed perfectly. So… you could have circles, but I think the boxes are just as good. Here is a pic, HTML printer on the left and Document Printer on the right.
Document Printer Object Info:
Center Text in a WPF XAML Shape: Paul Sheriff's Blog for the Real World - Centering Text on a WPF Shape
WPF Shapes and Basic Drawing: Shapes and basic drawing overview - WPF .NET Framework | Microsoft Learn
XAML Syntax: XAML Syntax In Detail - WPF .NET Framework | Microsoft Learn
2 Likes
Great Work!! 
This is awesome. Thank you once again!
Hi, I couldn’t insert the logo and icons. Can advise on this?
You can insert images into single lines by using <BMP>Image location
For inline icons I think <img src="location"> should work or you can use text/symbols. Start by getting your logo to print at the top and go from there.
My logo is loaded into the printer memory for increases the speed of the print. Logos really depend on how you set it up.
Yup I tried this bmp method but it’s only supporting for esc/pos printer type. I’m using html type.
Can you share your printer template? I’m pretty sure <BMP> works with HTML Printing as long as its on its own line.
[LAYOUT]
113 E Holly St
Bellingham, WA 98226
(360) 933-4301
Bellingham, WA 98226
(360) 933-4301
Order Online @ Horseshoecafe.com
C:\Users\Shalini\Pictures\Classic 12.bmp
|
{DATE:yyyy}
{TIME}
{DATE:MMM} {DATE:dd}
|
Table
{ENTITY NAME:Table}
*icon*
|
Ticket
{TICKET NO}
*icon*
|
Server
{USER NAME}
*icon*
|
Welcome, [='{ENTITY NAME:Customer}'==''?'Guest':'{ENTITY NAME:Customer}']
{ORDERS}
{DISCOUNTS}
[Total Gift:|{ORDER STATE TOTAL:Gift}]
{SERVICES}
| ___________________________________________ |
| Tax: | {TAX TOTAL} |
Thank you for Visiting the 'Shoe
We'll see you next time
Horseshoe Cafe Est. 1886
We'll see you next time
Horseshoe Cafe Est. 1886
| *Voluntary* Health Contact Info |
| Name: ___________________________________ |
| Phone: ___________________________________ |
| E-mail: ___________________________________ |
| If we learn you may have been exposed to COVID-19 during your visit, we will only share this information with public health officials. We will not use your info for any other purpose. |
[DISCOUNTS]
{CALCULATION NAME} %{CALCULATION AMOUNT}|{CALCULATION TOTAL}
[SERVICES]
– {CALCULATION NAME}|{CALCULATION TOTAL}
[PAYMENTS]
| {PAYMENT NAME} | {PAYMENT AMOUNT} |
[ORDERS]
{ORDER TAGS}| - {QUANTITY} | {NAME} | {TOTAL PRICE} |
[ORDERS:Gift]
– Format for gifted orders
| - {QUANTITY} | **COMP** {NAME} | {TOTAL PRICE} |
[ORDER TAGS]
– Format for order tags