Customer Display with Advertisement

JohnS · May 25, 2014, 12:21am

@Emre,
Is it possible to have another demo printer, but for Internet Explorer, Chrome or FireFox ?

emre · May 25, 2014, 9:31am

Hello John. I’ve searched possibilities and I found something called Live.js. We can setup something with that.

First of all we’ll need IIS Express. This is a lightweight server to serve html pages. You can learn more about iis express here http://www.iis.net/learn/extensions/introduction-to-iis-express/iis-express-overview and if you don’t have it already you can download it from http://www.microsoft.com/web/gallery/install.aspx?appid=IISExpress.
Next create a directory on your PC. It should be somewhere SambaPOS can write files. Create an empty index.html file. Type some test html in it and save that.
Open command prompt. Go to IIS Express folder with cd \Program Files\IIS Express. Start IIS Express with iisexpress /path:c:\your path\ /port:9980. You need to change your path with folder path where index.html exists and set a suitable port. (eg 9980)
Navigate to http://localhost:9980 with your browser and check if it displays your test html content.
Go to http://livejs.com/, download live.js file and save it next to index.html file. This javascript file periodically checks changes on index.html (and related css files) and refreshes browser if file changes. This is how it appears for me.

Switch to SambaPOS and Setup your Ticket printer as a demo printer and enter file path as printer share name.

When I print it saves content to Index.html and live.js will automatically refresh browser.

Finally Setup your printer template to display content. Be sure it includes live.js file.

<pre> tag is useful to keep whitespace formatting.

You’ll notice I’ve added <l> tag behind html tags. If you don’t use <l> tag SambaPOS will strip out html tags.

If needed you can edit Live.js file to change interval.

Remaining part is HTML & CSS work.

Hope it helps…

JohnS · May 26, 2014, 2:00am

This is so cool.
I have created a Customer Display using a 7" USB LCD screen. Complete with advertising down the bottom.

allmixedup · May 27, 2014, 9:02pm

@JohnS

Can you please put the details step how to do this customer display with Advertisement? it may help full to everyone.

JohnS · May 27, 2014, 10:38pm

When I have available time, I will put together a guide.

JohnS · May 27, 2014, 11:22pm

Part 1 - Customer Display Setup.

Install IIS Express from here http://www.microsoft.com/web/gallery/install.aspx?appid=IISExpress

Create a new directory c:\IIS

Download live.js and save to c:\IIS. Edit live.js and change interval = 1000 to interval = 50

I am using Google Chrome for this display, so download and install Chrome - DO NOT make Chrome the default browser.

Open Chrome and set http://localhost:9980 as the default page. Move Chrome to the second screen and maximize. Then close Chrome. Windows will now open Chrome on the second screen by default.

The screen I use is WVGA (800x480 resolution), but I am using it in Portrait so the screen is actually 480 wide by 800 high.

Place the following files into the c:\IIS directory

index.html

<html>
<frameset rows="*,200" frameborder=0>
  <frame src="main.html">
  <frame src="bottom.html">
</frameset> 
</html>

main.html

<html>
<body>
Test Screen
</body>
</html>

bottom.html

<html>
<script type="text/javascript">
var slideimages=new Array()
function slideshowimages()
{
     for (i=0;i<slideshowimages.arguments.length;i++){
         slideimages[i]=new Image()
         slideimages[i].src=slideshowimages.arguments[i]
    }
}
</script>

<body bgcolor="#DADAC8">
<center><img src="images/image1.jpg" name="slide" border=0 height=90%></center>
<script type="text/javascript">
slideshowimages("images/image1.jpg","images/image2.jpg","images/image3.jpg","images/image4.jpg","images/image5.jpg")
var slideshowspeed=3000
var whichimage=0
function slideit()
{
     if (!document.images)
           return
     document.images.slide.src=slideimages[whichimage].src
     if (whichimage<slideimages.length-1)
              whichimage++
     else
              whichimage=0
      setTimeout("slideit()",slideshowspeed)
}
 slideit()
</script>
</body>
</html>

Set slideshowspeed=3000 to what ever speed you want between images. 1000 = 1 second.
Create a directory in c:\IIS called images, and place your images in here. Name them image1.jpg, image2.jpg, etc. Image size is ideally 480x200.
To add or remove images to display, update slideshowimages("images/image1.jpg","images/image2.jpg","images/image3.jpg","images/image4.jpg","images/image5.jpg") line in the bottom.html file to list the images that you want to display…

Now create a file on your desktop called CustomerDisplay.bat with the following contents

@echo off
start /MAX "Chrome" chrome --new-window --start-fullscreen
"C:\Program Files (x86)\IIS Express\iisexpress.exe" /path:C:\IIS\ /port:9980

Run CustomerDisplay.bat. A window should open called IISExpress, and Chrome should also open displaying Test Screen and images should be displayed down the bottom of the screen and change every few seconds.

Part 2 - Configure SambaPOS.

I will complete this later.

If you want to have a go, follow @Emre’s setup above, changing the Printer Share Name from C:\Users\Emre\Desktop\asd\index.html to c:\IIS\main.html

JohnS · May 28, 2014, 12:30pm

Part 2 - SambaPOS Setup.

I use a logo image at the top of the Customer Display screen. This image is 600x268 pixels and is called cbc.jpg and is in the c:\IIS directory.

Create a new Printer called Second Screen. I have set Line Count to 10 so the screen does not have scroll bars for large orders. Line Character Count is set to 55 which is a good width for my setup.

Next create 3 printer Templates
1… Second Screen - Closed

<l><html>
<l><head>
<l><script src="live.js#html"></script>
<l></head>
<l><body>
<l><center><img src="cbc.jpg" width=100% border=1></center>
<l><br><br>
<l><center><font size="7" color="red"><B>THIS</B></font></center>
<l><br>
<l><center><font size="7" color="red"><B>AREA</B></font></center>
<l><br>
<l><center><font size="7" color="red"><B>IS</B></font></center>
<l><br>
<l><center><font size="7" color="red"><B>CLOSED</B></font></center>
<l></body>
<l></html>

2… Second Screen - Idle

<l><html>
<l><head>
<l><script src="live.js#html"></script>
<l></head>
<l><body>
<l><center><img src="cbc.jpg" width=100% border=1></center>
<l><br><br><br><br><br><br>
<l><center><font size="4"><B>Welcome to</B></font></center>
<l><br>
<l><center><font size="6"><B>Culcairn Bowling &</B></font></center>
<l><center><font size="6"><B>Recreation Club Ltd</B></font></center>
<l></body>
<l></html>

3… Second Screen - Ticket

[LAYOUT]
-- General layout
<l><html>
<l><head>
<l><script src="live.js#html"></script>
<l></head>
<l><body>
<l><center><img src="cbc.jpg" width=100% border=1></center>
<l><pre><center><B><font size="6">Total         $ {TICKET TOTAL}</font>
<L00>----------------------- Items -------------------------
<L>
{ORDERS}
<L>
[<L00>----------------------- Notes -------------------------
<L>
{NOTE}
<L>]
[<L00>-------------------------------------------------------
[<J00>Rounding|${CALCULATION TOTAL:Auto Round Up}]
[<J00>Rounding|${CALCULATION TOTAL:Auto Round Down}]
<J00>Amount Tendered|${TENDERED TOTAL}
<J00>Change Due|${CHANGE TOTAL}]
<F>-
<C00>T H A N K   Y O U
<l></center></pre>
<l></body>
<l></html>


[ORDERS]
-- Default format for orders
<J00>{QUANTITY}x {NAME}|${TOTAL AMOUNT}
{ORDER TAGS}

[ORDERS:Gift]
-- Format for gifted orders
<J00>{QUANTITY}x {NAME}|**GIFT**
{ORDER TAGS}

[ORDERS:Void]
-- Nothing will print for void lines

[ORDER TAGS]
-- Format for order tags
<C00>{ORDER TAG NAME} - RRP ${PRICE}

Now we create Print Jobs, Actions & Rules. All Rules have default mappings.

Screen shots of setup.

Import File - CustomerDisplay.zip (1.7 KB)

emre · May 29, 2014, 8:54am

Wow it is great to see how a simple .js file helped us. Awesome implementation John. I’m tagging it as a tutorial and changing post title.

JohnS · May 29, 2014, 11:52am

The live.js file was a great find. It really made this a lot easier and the result (even though it is a simple design) turned out superb. The client loves it.

QMcKay · May 29, 2014, 1:45pm

This is a fantastic setup! I’m sorry I wasted money on a 2x20 Pole Display. @JohnS, can you tell us for the display you used: Brand, Model, Price, Purchase Location?

JohnS · May 29, 2014, 2:42pm

@QMcKay I bought it from Jaycar Australia. It has been since discontinued.
This is the listing in the NZ Jaycar store http://www.jaycar.co.nz/productView.asp?ID=QM3748.
Amazon have a similar monitor http://www.amazon.com/MIMO-UM-710S-Powered-Swivel-Display/dp/B002RMPASG.

Any monitor will work. I picked this one as it is USB powered and plug & play - perfect for a laptop or small form factor PC.

sid_collins · May 29, 2014, 7:42pm

This looks brilliant emre. Will try this in the future.

If people do their adverts in flash, they can animate them too.

As well as the pub, we have a digital signage company that we’re currently running trials with Heineken in the UK, brilliantly we can now display the digital signage adverts on a display along with the receipt.

sid_collins · May 29, 2014, 7:57pm

This is an example of what I intend to try and achieve.

Now all I need to do is find a screen.

QMcKay · May 30, 2014, 2:49pm

I still can’t get over how fantastic this idea is! These displays cost about the same as a dumb Pole Display. I’m seriously going to order one (or 2 or 3) of these displays, perhaps in different sizes… I see some on Amazon that are 16-inch for less than the 7-inch!

Are we only limited by the number of available USB ports on the host computer? Could we use one for a Kitchen Display and another for the Customer-facing display?

JohnS · May 30, 2014, 11:38pm

Because the live.js file poles the IIS Express at a fast rate to make sure it captures every change to the main.html file, multiple displays may increase CPU loading in the PC.
Plus the monitors get their power through the USB, so you need to be careful plugging to many in as it may cause issues.
Larger displays may require an external power supply, these should be ok to use multiple.

@QMcKay, these are non-touch, so how do you plan on using it as a kitchen display ? If your using an Entity Screen for the kitchen display, then it’s not practical to have the display also running on a pos terminal. SambaPOS runs only on one screen.

Hasa · September 25, 2014, 5:09am

Hey guys,
Im trying to get this working by using the second extensive tutorial in this post. I got everything working besides a few bugs.

When I start samba page says this area is closed.
Then I login and right away shows welcome to culcairn…rec club ltd.
All was fine until here now i enter order item and it shows up right away but the format is all messed up it all shows in single line until theres no more room in which it then continues to the next line.
Also however now at this point nothing updates ( so live.js stops doing it job for some reason) I add items and they dont update until I hit the refresh button.
I then go back to login screen refresh chrome and everything updates fine automatically again soon as i login it shows the welcome screen. I then enter another item and the same thing happens. Rinse and repeat to get it fixed.

Thank You for your time.

Okay so I think the issue is my printer template for second screen ticket. I just copied what was above exactly:
[LAYOUT]
– General layout

Total $ {TICKET TOTAL}
----------------------- Items -------------------------

{ORDERS}

[----------------------- Notes -------------------------

{NOTE}
]
[-------------------------------------------------------
[Rounding|${CALCULATION TOTAL:Auto Round Up}]
[Rounding|${CALCULATION TOTAL:Auto Round Down}]
Amount Tendered|${TENDERED TOTAL}
Change Due|${CHANGE TOTAL}]
-
T H A N K   Y O U

[ORDERS]
– Default format for orders
{QUANTITY}x {NAME}|${TOTAL AMOUNT}
{ORDER TAGS}

[ORDERS:Gift]
– Format for gifted orders
{QUANTITY}x {NAME}|GIFT
{ORDER TAGS}

[ORDERS:Void]
– Nothing will print for void lines

[ORDER TAGS]
– Format for order tags
{ORDER TAG NAME} - RRP ${PRICE}

Hasa · September 25, 2014, 5:47am

@Jesse Do you know how I can fix this error?

Thanks

sukasem · September 25, 2014, 7:04am

I think you need to use <L00>, <J00> or <C00> in the template

3WAYNE8 · November 18, 2014, 7:59am

Hello Sid_collins,
Really love your design, would you mind show me how making it.
Thanks

Hasa · November 19, 2014, 12:04am

Its actually not difficult his is pretty simple. All you would need is some html code to insert an image which he has displayed and scale it to size. Then you could put the text under and format it with css. I am currently working on a much more advanced setup for advertising on a second screen that involves html or flash animations to show ads. I will release my project within a months time as I am very busy until mid december.

Follow the tuturial on this thread and you should be able to accomplish what he has above with some additional html manipulation. Also learn some basic html and css on youtube, it will help alot.