I have set up the customer display.
works great.
however is it possible to change the order the items are displayed on the customer display.
at the moment all new entries I make are added to the top of the list.
can I change that so all new entries I make is added to the bottom of the list.
can anyone help me create this code?
I have no experience in coding.
thank you
Yes, change the Sort Order parameter in the Template. This is mentioned and shown in the very first post of this Topic.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="fotos/11.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="fotos/4.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="fotos/3.jpg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="fotos/10.jpg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="fotos/5.jpg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="fotos/6.jpg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="fotos/7.jpg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="fotos/8.jpg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="fotos/SHOALA.jpg" alt="New york" style="width:100%; position: fixed; bottom: 0;">
</div>
</div>
</div>
</div>
</body>
</html>
this is what I did full screen image, u can change change the image , and path its a bootstrap carousel, change the first image path to your restaurant name, and use rest of the images as promotions or products full screen images.
its a slider so java script should be enabled.
IDLES SCREEN.pdf (48.1 KB)
I don’t know how to add Html code in forum.
I edited your post to wrap the html in a code block using triple back-ticks. It is done like this:
3 backticks to start code block
``` put all your code here ```
3 backticks to end code block
Thank you, was trying to quote the html code many times. Then I made it to pdf and uploaded 
@QMcKay
Hi, is there any option to use browser as chrome? because IE is not good enough to showcase using bootstrap?
I tried to open the html page using chrome but the problem I had to make chrome reload in seconds.
Chrome is not supported. There is a much better display that you can use any browser with. It’s called QMX designed by QmCKay.
I have followed through and have it working perfectly thank you!
however is there any way to change the background which is currently just plain “white” into an actual still image file (shops logo) ?
You will need to modify the sections indicated:
The style attribute of the <body> tag would need to contain a reference to an image (your logo), possibly with some dimensions (width and height percentages) so that it grows and shrinks.
The style attribute of the orders DIV needs to have the background property removed, or changed to be transparent, or changed to be a semi-transparent color (recommended) using an rgba() value.
RGBA values are specified as rgba(red,green,blue,alpha), where red, green, blue are values ranging from 0 to 255 and alpha sets the transparency from 0 (completely transparent) to 1 (no transparency). Something like 0.5 for alpha to start, and adjust up or down until you get what you want.
<html>
<head>
<title>My Restaurant</title>
</head>
<body style="margin:0px; padding:0px; display:block; background:url(images/bg.jpg) no-repeat center center fixed; background-size:cover;">
<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;"> </div>
<div id="orders" style="background:rgba(200,200,200,0.5); width:99%; margin:0px; font-size:16px; font-family:calibri;">{ORDERS}</div>
</body>
</html>
So you have this in the <body> tag:
background:url(images/bg.jpg) no-repeat center center fixed; background-size:cover;
That ^ is a relative path to a JPG image. Create a folder called “images” in the same path as your HTML file, and put an image file in that folder named “bg.jpg”.
You have this in the orders DIV:
background:rgba(200,200,200,0.5);
That ^ will give a near-white background color to the Order Lines, but with the alpha set to 0.5 you should be able to “see through” it to the background image.
That should give you a starting point.
little confused here. which html file?
The html file specified in the Printer Configuration. If you did not specify a file name, it will create by default a file here:
[Documents]\SambaPOS5\CustomerDisplay.html
@QMcKay followed through but for some reason image is still not being displayed as background.
below are screen shots.
YOUR TEMPLATE COPY AND PASTED
FILE NAME LEFT BLANK THEREFORE DEFAULT FOLDER IS USED
CREATED IMAGES FOLDER IN SAME LOCATION AS HTML FILE
MOVED LOGO TO IMAGES FOLDER AND RENAMED TO bg.jpg
BELOW IS THE OUTCOME, THE ORDER LINES WORK PERFECTLY, ONLY THE BACKGROUND IMAGE DOES NOT DISPLAY.
Hmm… try moving the image specification from the <body> tag up into the <html> tag, like this:
<html style=" background:url(images/bg.jpg) no-repeat center center fixed; background-size:cover;">
<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;"> </div>
<div id="orders" style="background:rgba(200,200,200,0.5); width:99%; margin:0px; font-size:16px; font-family:calibri;">{ORDERS}</div>
</body>
</html>
does the exact same thing as above.
order line ok but background image not displayed
Ok, I will need to install this myself to figure out what is going wrong. Please stand by…
The problem is that IE11 is too stupid to render the image if you renamed it with a different extension.
So if you had an image named bg.png and you renamed it to bg.jpg then it won’t render the image.
The solution is to leave the image extension alone, and change the Template to use whatever you have. For example, I used a PNG image, not JPG, so I changed the template to reflect that.
Also, make sure your image file name is actually correct, because it looks to me like you are hiding file extensions for common file types (ie. you have a file named “log” which is actually named “log.txt”, and your file “CustomerDisplay” is actually “CustomerDisplay.html”). Personally, I never hide file extensions.
NOT THIS:
bg.png.png
THIS:
bg.png
<!DOCTYPE html>
<html style=" background:url(images/bg.png) no-repeat center center fixed; background-size:cover;">
<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;"> </div>
<div id="orders" style="background:rgba(200,200,200,0.75); width:99%; margin:0px; font-size:16px; font-family:calibri;">{ORDERS}</div>
</body>
</html>
Works Beautifully! thank you.
one last thing if you have a minute, I’ve noticed on your display there is no scroll bar. can I also remove the scroll bar from IE 11 or even make it smaller/thinner so its less noticeable ?
ok I found a way to make it thinner through windows display settings, is there anyway to get rid of it completely ?
Modify the style on the <body> tag …
<body style="margin:0px; padding:0px; display:block; max-height:100%;max-width:100%;overflow:hidden;">