Table of Contents
Join Dane Whitcomb in this 2 part FastTrac Series on Touch Screen Management setup.
Touch Screen Management Part 1
Summary
In part 1, Dane reviews the initial touchscreen setup, including creating layers and switching between them.
Video
Transcript
Dane Whitcomb 0:05
In this video, we're going to be going over creating a touchscreen, this is going to be all built out within touchscreen management within RecTrac. So to get things started, we're gonna go into that Screen. And when you open up touchscreen management, this is the initial Screen you'll get into. And these are the different areas that we could have a Touch POS Screen within RecTrac. So you'll see there's global sales, the SuperGrid touchscreen, area one. So whatever changes we make within each one of these would be where it's reflected. So kind of the main area that we think about when we say Touch POS is processing within this Touch POS area, obviously, it can be done within global sales of the SuperGrid. But this is just dedicated to touch Screen. So we're going to be going over setting it up in this area in this video. So in that case, I'm going to be opening up touchscreen, area one. And you might have a whole bunch of layers down the left side, if you've already been using Touch POS. If not, you might have something similar to mine, or you might not even have a layer here.
Dane Whitcomb 1:08
So I've created this main layer, but I don't have any buttons on it. So I'm at a pretty clean slate as far as where I'm starting. So I'm gonna just select my layer. If you don't have a main layer in there, you're just clicking an add layer, and you're giving it you know, main you can call it or whatever it may be concessions wherever you want it to be. And you Click Save. And that will create a new layer. In this example, I'm going to have a kind of main POS area called My main layer with a few buttons, I'm going to have a concessions Button that's going to take me into its own concessions Touch POS buttons. So that's going to be a separate layer I'll get to creating. So first things first, whenever you want to add a Button and Touch POS, you right Click on the Screen, and then you get a few options here. So add a Button. And in Touch POS management, there's a whole whole bunch of different Type of buttons, you can add, and they all kind of serve a different purpose, there's a few main ones that I definitely want to go over.
Dane Whitcomb 2:11
The first one that kind of pops up in this scenario is the switch Button, that's allowing you to when you Click the Button, it's going to take you from one layer to another. And while I'm saying that we need to actually have that new layer we're clicking into created. So I want to create another concessions layer. So I'm going to hit Add, and then I'm gonna do concessions. And it's going to be a normal layer Type. And so there's that second layer that's created again with no buttons. But now I can use my switch Button to say, take me from the main layer to my concessions layer. So that's kind of what I'm doing now. So this is going to be switch. And then you're entering in the layer that you want to that you want to go to when you Click on that switch Button. So I want to take me to that concessions layer there, and then the label of my Button.
Dane Whitcomb 3:11
So you'll see in that preview area down below, it's actually going to update, kind of as I go through these styling settings, there will be a separate video on styling your buttons in a little more detail. For this example, we'll just switch the background color a little bit so we can see it on our canvas. And we'll Click save, you can Click and kind of drag your Button to where you want it, you can make it bigger. But again, we'll get into more of that in our next video. And making text bigger and those kinds of things. So there's our switch Button. So if I were actually in touchscreen management, when I save this, if I clicked on this concessions layer, it would bring me to this layer that I now have selected, but no buttons on it. So the next step is kind of adding some buttons of items you might sell. So I'm going to right Click and add a Button. And this is going to bring us into our purchase Type Button.
Dane Whitcomb 4:03
So this is probably one of the most common buttons, this is how you're going to sell pretty much everything and Touch POS is through a purchase Button. So our Button Type is going to be purchase. And these buttons are pretty easy to set up. So there's just gonna be a few dropdowns here. The first one being what module, the item is the item you're selling in. So are you doing an activity enrollment, are you doing a past membership sale. This is more of a concessions example here. So we're going to be doing an inventory item. So I'm selecting POS inventory. And then I'm selecting that item within that module that I actually want to link the Button to. So let's take a look at our list. Let's just say this is a bottle of water. And then it's already going to pull in my description of the item as my Button name there so I can leave that you can set the default quantity when you Click the item of how many you're selling.
Dane Whitcomb 5:03
So I just want one there. And let's just give this one a different color also. So there's my bottle of water. Add one more, just so there's more than one Button on this Screen. Again, you'll want to add all your, your concession items or activity items you want on there for that one layer all at once, so you don't have to Click into different layers to get to them. So we'll go with our purchase Button again. And we're going to do our inventory which 30 on there. And let's do a bacon cheeseburger. And this will be a different color.
Dane Whitcomb 6:04
So now our kind of flow is we've, whenever you're open Touch POS, you're gonna start on this Screen here, the main layer, and if you want to get into concessions, I'm going to Click it. And that's going to bring you to the Screen with two buttons, obviously, you'd have your whole lineup of concession items you might sell. The next thing I'm gonna go over is creating what we call a keypad layer. So these are going to be what we also known as a fixed layer. So it's going to be buttons that show up on each layer no matter when you switch into a different one. So these are usually things like setting up discount buttons, maybe you have some sort of a pop jour Button or household lookup Button. So to do this, we're going to create a separate layer just for that. So I'm gonna hit Add layer. And we'll call it our keypad layer. And that can be a normal one right there. And there's a few different buttons that you you would probably want in here, I'll go through a few.
Dane Whitcomb 7:06
One is a switch Button again. So for example, if you're in that concessions layer, you want a way to get back to that home layer, you don't want to be stuck in there. So putting a switch Button on the keypad will allow you to always get back to the home main touchscreen. So I like to just call it home, you can call it main, whatever makes the most sense. And you always want to going back to that main layer. And let's just say these are, this one's going to be red. And I recommend putting the keypad layer on the bottom, or all the way on the top, I would usually say the bottom just somewhere that won't overlap other buttons, since this keypad layer is is always going to be on all layers. So it would show up here, just so make sure it's not overlapping any buttons that are on your main either concessions layer, you know, past sales layer or something like that.
Dane Whitcomb 8:08
So there's a return to home Button that will always show. Let's go through a few more Button types. Let's say maybe you've got a cash drawer linked up. So you want to pop drawer Button when you Click it, the drawer opens. There's one for that. So pop cash drawer. And we'll say pop drawers, the label. As long as your cash drawer is set up in RecTrac, then it would pop the drawer. Again, we'll put that just kind of in a row here with a keypad, add a new Button there. And let's do a discount Button. So we've got a Type for that discount. So you can create different levels of discounts. Let's say this is a 25% off discount. So we'll give it a label. And we'll say this is 25. And it's going to be a percent.
Dane Whitcomb 9:14
So the way this Button works is you can either have it be a percent or an amount. So since I chose percent, and I have 25 in here, whatever the item is, I'm selling it'll take 25% off. If you had an amount Field, this would just act as $1. So it's a take $25 off whatever the amount is. So it can really work however you want. If it's more based off a percentage or just an amount or discount option, it's going to be on selected items. So that would just mean you select the items first and then you're hitting that discount Button and it's going to take the discount off. So we're going to Click Save and there's my discount buttons. So in theory, you can have, you know, a 25% discount Button, a 10%, discount Button, and all those kinds of preset discounts that might make things a little quicker when you're going through sales.
Dane Whitcomb 10:14
Another one you could do is a household lookup Button. A lot of the times when you're going through Touch POS, you might be selling it to a guest household. But there are certain items like an activity enrollment, or a pass membership sale, where you would need to be signing it to a actual household account. So it might be good to do a household lookup Button in there. Just give the label household lookup. So you can really just keep going across with with buttons you might need for the keypad layer.
Dane Whitcomb 11:00
If you Click add a Button, that drop down I've been working on the first drop down is all available Button types we have. So you can definitely do a lot of testing and scrolling through the list and seeing if there's any more you need to add. For example, there's an empty cart Button will just be a quick way to Click that Button and clear out your cart. Let's see here. They're helpful buttons here, there's a Payment Button, which could just be a quick way to process the payment. So you could say if it's always going to be a cash sale, or credit card or check. to cash in my example, you're using the payment, pay code and then it's gonna be a Payment Type Button and we'll say this is a cash Button. And then you can leave the amount zero to always, when you hit that payment Button, it's going to pay the full amount. And if you have the skip payment Screen on, it's going to Toggle full pay.
Dane Whitcomb 12:01
If you have the skip payment Screen on, it's not even gonna bring you to that payment Screen with options like email receipt or changing the payment date and all those sort of settings it's going to just be a quick process of of just selling the item straight up as a cash sale. So that that might be something that would speed up the process. Also, you could have that as a one of your hot buttons in the keypad layer. So once you really get it how you want it, obviously, you probably want to style it so all the colors are the same. Again, we'll go over that in our next video, you can Click Done. And this Screen is always gonna ask you if you want to publish the changes you made later published. Now if you want to see the changes right away and want them to go into effect, you're definitely gonna want to publish it now. It's only going to take a minute. There it is process is complete. So now as long as my Touch POS Screen is linked to my Profile man, which we'll go over in one of our next videos, you'll see the changes there.
Dane Whitcomb 13:00
So I'm in my main layer. I haven't linked my keypad layer yet, but that's okay, I can still at least see my other buttons. So I've got my bottle of water and my bacon cheeseburger. So when I Click on my bottle of water, it's a guest sale so I've got to fill out some guests info there that's a few of them are required someone just put in my name and you'll see the item get added to the cart. So that's just a quick example of setting up a Touch POS Screen obviously you'd be able to get into more modules if you wanted to do activity enrollments or pass membership sales and things like that or ticket sales that can all be done within touchscreen management through those purchase buttons. Make sure to tune in for the next video where we're going to be going over styling of the buttons and changing text and color and all good things like that.
Touch Screen Management Part 2
Summary
In Part 2, Dane reviews how to style your touch screens and add some design to your button elements.
Video
Transcript
Dane Whitcomb 0:05
In this video, we're going to be going over styling our touchscreen within touchscreen management. So in our last video, we went over creating a main layer, a concessions layer, and then also what we call our keypad layer, we added in some basic buttons. So in today's video, we're just going to be going over, making our touchscreen look a little more visually appealing and changing the colors and that sort of thing. So if you remember, I wanted to touch Screen management, and I'm going to Click Edit on our touch Screen area one. And this, these are the three layers, I was just talking about the main layer, our keypad in our concessions. So obviously, in my case, our main layer only has one Button. So as far as styling on this Button, we can just Click on it and hit change to this Button. So it's gonna load up that same Screen where we can select, you know, it's a switch Button where we want it to go. But as far as styling, it's kind of the rest of these fields here.
Dane Whitcomb 1:04
So you can choose the background color, let's say we actually want this to be a darker blue. And since it is darker, now we can adjust our font color here to a white. And then you also can change font family. So if you want a different text option, leave it on Arial there, and then you also get a font size. I always like to change this to pixels, sometimes it's a little easier to work in. So I'm going to do something like 16 pixels just kind of converts more over to what like a Microsoft Word would use for font sizing. So let's say this is going to be 30 pixels, font weight, so you can make it normal or bold. So let's say these are going to be bold. And then you can also choose to center that text on the Button, which usually makes it look a lot better.
Dane Whitcomb 1:59
As far as center and goes, you can add a border to your buttons. So this would just be what do you want the border color to B. So let's say it's going to be let's do do a red border and our border width, we can do three, and you'll see that's just making the border around it bigger, you can even see it a little more when I make that size bigger. And then border style, you have some options. There is a good one down here that a lot of people like called outset. And that's just going to kind of give your Button almost a 3d effect that makes it pop a little more from the Screen. And then border radius is just, if you Type in a value here, it's gonna kind of give it a curved effect on the edges there. So those are all options, and then advanced font options. So this is just you know, different options for the text. So if you want to cross things out, if you want to underline you can, but we'll just leave that as none.
Dane Whitcomb 3:04
A text shadow color. So if you want to add some, you know, fancy styling to your text. I like it without any of those stylings. So I'm going to put those all on zero. Advanced background setting, so you can add images also to your buttons, the image would need to be stored on the server. And you'd be entering in the image path in this Field. So in my case, I don't really have any images on my touch Screen. So I'm going to skip over this area and go right into the padding settings. If I adjust these padding settings like if I put a five here, you can see it's adding more space to the top of my Button. So in my case, I'm just going to leave them on zero, this would just be a way to, you know, if you want to create a little more room on the bottom, you could but most of the time, it looks kind of good centered there. You can also quickly adjust it right from this area.
Dane Whitcomb 4:04
So that's an easy way to adjust the Button size rather than using the size settings here. So you'll see these kind of change as I adjust my Button, but usually it's a lot easier just to adjust the Button size in here, instead of plugging in values right there. So let's say that's how I want my Button to look. So I'll Click Save. And I've actually got to adjust it here. And now I can just you know I've only got one Button here to take me to a new layer. Ideally when this touchscreen is probably all done and set up. I might have three buttons here that will take me to different layers, but for now we'll just center it. And let's switch over to our concessions layer since we have two buttons on here. This is kind of a good talking point as far as you might have, like, let's say 15 to 20 or even more buttons on one Screen. or like a concession style setup. And one of the concerns might be do I have to go in and style all of the buttons to match each other, you can just style one and then copy and paste the styling of one onto all your buttons.
Dane Whitcomb 5:13
So I'm going to go over styling just this bottle water, and then copying that over to the bacon cheeseburger Button. So I'm going to go into the styling of the bottle of water. And I'm going to say, These buttons are all going to be lets choose a, let's choose a red, we'll make our font color white again. And our font family will match the main Screen of Arial. I think we did something like 30 pixels on the other one, match it. That looks a little big. So maybe we'll we'll do 20 on these buttons. And we'll say it's bold, we can make our Button a little bigger here, so it doesn't drop down to the next line, we're going to center our text.
Dane Whitcomb 6:10
And we'll do another border of I think a blackboard or on this Button would probably look pretty good. So I'm gonna choose a black border, put in my border radius of five. And I'll give it that 3d effect here of the outset. And then I did do a little radius here to make the edges curved. Say I don't want any of the advanced font options on there. So I'm going to zero those out. And I'm not going to do any of those background settings, or the size. So I'm going to say that all looks good. And I'm gonna Click save, you can see this Button definitely looks a little more visually catching, then just kind of a square plain Button over on the right. Obviously, you can style the buttons to kind of how you want but once you have one configured, you select this Button and hit Copy Button.
Dane Whitcomb 7:09
And if you select your bacon cheeseburger Button, you can right Click on that now that I've copied and under paste, you can either paste the Button theme or paste the Button dimension. So you might want to do both. So I'm going to paste the Button theme first. And you'll see that's going to change. And actually when you do paste the Button theme, it looks like it does adjust the dimensions for that. So just adjust the size to kind of match and make sure everything fits. But that's just a much quicker way of then going into the bacon cheeseburger and trying to match your styling settings. So that's definitely what I recommend. As far as getting everything to match in terms of each layer, you probably want the sound to look similar. So now we can just go to our main layer, or sorry, our keypad layer, let's do on the one we haven't really styled yet. And we'll just do something similar real quick for those.
Dane Whitcomb 8:03
So I'm gonna hit Change Button on the HOME home switch Layer Button. And we'll say for a keypad layer, we want maybe a smaller text, since they're all along the bottom, we'll say we want those to all just be this color here. And our fonts going to be do black on that. And then we'll do maybe only 15 pixels for these. Keep them bold, center text and we'll do our Arial font to match all of our other layers. And we'll still do our border radius, but maybe a smaller one since these are smaller buttons here. And once we get it how we want we can Click Save. And let's drag these all down a bit to make some room.
Dane Whitcomb 9:06
So there's our home Button how we want it and as far as that copy and pasting the styling again. So we're gonna hit Copy Button. And now we can actually hold down our control a Button on our keyboard. And actually, let's Click out of that one, hold down our control Button and we can select all four of these buttons and actually paste the Button theme to all four at once. So you don't even have to paste to them one at a time. You can also paste the all the buttons so it's really just the styling one Button and pasting all of them to match. I'm going to line up my buttons here. This is again my keypad layer so these buttons are going to stay on all the screens I Click through Again, you could have as many of these buttons on the bottom as you really need. For my example, I'm gonna say that looks good. And I'm going to hit Publish now.
Dane Whitcomb 10:12
And let's go take a look at what it looks like. So if we go to Touch POS, it might be kind of one of those back and forth where you look at it a few times, and see what changes you need to make. So as you can see, I'm on my main layer, have my keypad layer, although it does look like one of my buttons missing, so maybe we can go quickly figure out what that is. So that's my pop drawer Button. So I think I mentioned that in the last video, that buttons only going to show if you have a drawer, a cash drawer set up. So maybe in my case, I put that Button at the end because I don't have a drawer set up. And if you if some users had a drawer and some then depending on where they're logging in from, you might want it to be at the end, so you don't get a blank gap in the middle of your buttons. Instead, it's just the gap at the end. So that's expected that we don't see that Button there because I don't have a physical drawer linked up to my workstation.
Dane Whitcomb 11:12
But as far as my buttons here, this is my switch layer. For now I can sell my bottle of water, I can do my household lookup using these keypad buttons. So I can really do everything I need to through Touch POS and it's a much quicker way of selling items. I can do my discounts. So see if I so if I go to my concessions, select my bottle of water. Do my discount, oops, do my discount. It's gonna take 25% off that bottle of water. So really handy buttons to have on the bottom. And that's why we kind of put them in the keypad layer, and so they'd stay there and all the screens. So that's just kind of a quick overview of styling buttons and touchscreen management. In our next video we're gonna go over linking different Touch POS layers to different users. So that way everybody's using the right touchscreen when they head into touchscreen management and Touch POS