Chrome is not supported. There is a much better display that you can use any browser with. It’s called QMX designed by QmCKay.
2 Likes
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
1 Like
@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>
1 Like
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…
1 Like
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
Template:
<!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>
2 Likes
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 ?
1 Like
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;">
2 Likes
AWESOME! thank you very much for your help
Hi Leader,
I done the setup and its working when ticket tag is updated.
And how can I change to when ticket opening itself.
And the next one is the html page is opening in the main screen itself not only in the customer display. How can I change to only in the customer display ?
hi .i know how to html convert …
guide me the steps in sambapos
To learn HMTL you should use Google and find a good training source.
1 Like
You can find sample designs is here ;
3 Likes