Customer Display using Custom Browser Printer

But it have many people on forum who don’t have idea about programming, so it means we can’t implement customer display?

Ok so how?
Could you please give me a starting point?

Study HTML period…

Html period what?
As I tell you I don’t know about html.

on my customer display i use wall papers for adverts as at the moment im not displaying the ticket conent. I use customer display as an extended display and then using wallpaper settings i change images every 10 seconds from one particular folder. To add more adverts i only have to add more images to that folder.

Found this to be very basic way to run adverts with zero coding.

2 Likes

There is no built in turn key support for customer display. You will have to learn how to implement the tutorial. You dont need to study Javascript you can look at the examples and work it to your needs. This is not hard, start by following tutorial exactly and using samples provided once you get that working then try modifying it for your own needs. HTML is not hard and none of us are programmers except Emre.

Acting like your a fish out of water and have no clue what you are doing will not result in much help from community. You must put some effort in.

3 Likes

@Faisal you have been using SambaPOS for long enough now to know that samba is not an out of the box solution and some things require a bit of time to learn and understand.
If this wasnt the case it would be something fix and hard coded by emre and you would be stuck with the exact solution everyone else has of whatever emre decided to code.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

I already did some html coding in the printer template but only looking here n there.
Yesterday I was studying and come with this!
But m stuck on how html would read a image? Like in logo we used <BMP>c:/logo.BMP
So where is the path?

But this wallpaper won’t display to pos screen?

0ityY
<img src="./images/logo.png">

In this tutorial we have a file name index.html in a customer display folder. So according to the picture on top if we use this code it will take the image from that html root folder wherever it is. Right?

<!DOCTYPE html>
<html>
<body>

<h2>Using a Relative File Path</h2>
<img src="/images/picture.jpg" alt="Mountain" style="width:300px">

</body>
</html>

So the final code would be like this?
Correct me if m wrong?

it does but i have sambapos running in the foreground on my main screen and on the customer facing display they get to see my adverts as wallpapers

I can probably share a video if u want on how it looks.

Yes it would be great!

forgot to ask what version of windows are you running. while im uploading a video

Windows 10 …

You can see the two screens and how to set it up here.

I’m still uploading a video on youtube to show you this in action. I’ll share the link as soon as its ready.

1 Like

Yeah i get it. Thanks

Did u still want the video

I tried my way but its not working.
atleast give me a starting point or point me in a right direction.

The starting point is the Tutorial.

There is no way to dynamically swap images in HTML other than using something like Javascript.

If you want to do something different or change something, then you need to start by showing us what you changed.

Don’t know what that is or what that means. You need to post your Template (do not post an image of your Template), and some screenshots of your Print setup.


P.S., this is the correct way to refer to an image. It is relative to the root folder where your HTML file is located:

<img id="myimage" src="/images/picture.jpg" alt="Mountain" style="width:300px">

That image will be static and will not change. To make it change dynamically, you need to use Javascript to replace the src attribute with a new value. This is done like this:

<script>
// get the element ID and update the SRC attribute with a new value
document.getElementById('myimage').setAttribute('src','/images/picture2.jpg');
</script>

Obviously, you don’t want that to just happen immediately, which is what that code will do. Instead you need to invoke a timer that runs through an array of image names and swaps out the SRC attribute every x seconds.

<!DOCTYPE html>
<html>
<body>

<h2>Using a Relative File Path</h2>
<img src="/images/picture.jpg" alt="picture" style="width:300px">

</body>
</html>

This is my template and its giving me this result when m closing the ticket:

I alreading made a rule for displaying this after ticket closing.
Now I only want to display a image in a template, so I will put delays and make different templates containing single pictures.