Allen Bradley Panelview 800 HMI. Adding Screens and Navigating

hi this is tim today we're going to continue building our hmi program so far in our first video we configured our communications and tags and configured this start stop which was a discrete type of tag then we had one on analog where we pulled the actual drive speed out plus the bus voltage motor voltage and motor amp and we talked about how we could control the drive speed from the hmi and then in the last video we added this trend and then we added the min and max speed also to give us something to give us kind of a go no go gauge now at this point our screen is getting really busy and so you have two options option one is to make everything very small so no one can read it or option number two is to break it up into multiple screens now i hope you feel option number two is the best way because that's what we're going to talk about today and we're not only going to do it because the mainstream is getting really busy we also do it because we only want on the main screen what the operator normally needs to see today i'm going to do a video a little later about screen layouts and at least give some pointers on it but in this video mainly we want to start thinking in our head of okay what do they need to see daily because that's really the big things that need to be there so for this one i'm going to break it into four screens we're going to have our main screen which is really what the operator will look at normally we're going to have an hoa screen where they can go and they could manually operate all the things that are out there and then we're going to have a setting screen that'll have things like that min speed and max speed and finally we're going to have an alarm screen which we haven't talked about yet but we're going to do a video on setting up alarms so i'm going to go ahead and set up that screen while we're at it so the first thing we're going to do is we're going to create our screens so we're just going to right click screens and add screen and we're going to call this screen the hoas and also it's not really clear what this green one was so let's rename it to the main now first if we open up the hoas we notice we have our default background because if you went through our first video i showed you how to change our default background up here on the screens we'll also have a consistent size font and alignment which is just important for you know general called operator happiness now we're going to create another screen and we're going to rename it to settings and finally we're going to add one more and we're going to rename it to alarms now i don't want to give too many details about how screen should look because really that you know this kind of is one of those things that is up to interpretation but the one thing i do see on a lot of screens that makes it difficult on operators is lack of consistency of how to navigate so for every on the main screen maybe we click this go to button to go to the hoa screen so you'd think you'd be looking down here for how to get back but maybe the back button is shoved somewhere up here now the next thing is where should our navigation be and this is the tip that was given to me many years ago and i found it to be very true is your navigation should be at the bottom of the screen then mainly if an operator goes to press the go to button here and they hesitate because they're not sure about something they can still see the entire screen but if we have it right here and then when they go to press it we've obscured their view and it's like and they'll pull back but if they're here it does seem to increase or let's say it decreases their hesitation so i'm going to start building up the navigation actually on the hoa screen just because it's a blank page here so i know my longest text is going to be settings so i'm going to change the text of this one by going to properties actually i don't guess i told you how i got this let's start all the way at the beginning is let's go to our tool box and then let's scroll up and we'll find the go to screen button we'll drag it down and then let's go to the properties event and let's find the text which currently says go to well i'm going to make it say settings and here i would say don't use any shorthand i mean make that thing say what it means to do and the reason i use the longest one is that tells me how wide my button needs to be now first it's still a little cramped for me so i want to give it a little space here so i think that looks pretty nice and also let's go ahead and show our grid and let's let's go ahead and we'll use it to snap that way we can get a little consistency oops went too small there we go i think that looks really nice now that color is definitely not in the tw control scheme so let's go to the properties and let's go up and let's find the background color and we're going to change that and we still have our recent colors down here so i'm going to make that that darker blue all right so we said we were going to have a main setting hoa and alarm screen so we need four of these we're just going to copy and then we're going to paste it three times okay we'll have one way over here and we're gonna call this one alarms and then this one right here will actually be settings and then the next one is going to be hoas and then we're going to have our main all right we still have some real estate over here so i'm going to put a company logo there let's go back to our tool box and let's go to image and drag one of those in and we'll double click it and okay we have tons and tons of images here but mainly we have this import button here and i'm going to grab the tw controls logo and select it and okay so here is what can be considered a problem is i if you notice it came in and it looks black and definitely not exciting and the issue is i chose the png version of my image which has a transparent background well the connected components workbench doesn't do well with transparent backgrounds and at least i've never figured out how to fix this but hold on let's let's at least give it a shot here maybe i haven't given enough time but all right we have an image foreground color yes can i make that just the tw control well that would not work well we would actually want it white but okay i've never found something that actually will fix this so what you need to do is you need to use an image that doesn't have a transparent background so i'm going to delete that i'm going to go back to my toolbox and i'm going to bring in another image and this time i'm going to import the jpeg version of my logo we'll select that and okay so now we see it with a nice white background so we're going to drag that out a little bit there we go that looks kind of nice and then we'll drag it down let's bring it down another notch so we have some extra real estate here and this this little this kind of looks a little clunky here so what i'm going to do now is i'm going to go back to my tool box and i'm going to drag in a rectangle all right and we're going to make this rectangle have a background color of white oops that's not white yeah i clicked this one because it looked close to white but that's not actually what we want we actually want pure white and one we don't actually have to select it i can just backspace all this and if we look up the html color code for white it's going to be ffff now that is white and i'm going to drag this down and then drag it all the way across here okay so all my stuff just disappeared but now i can right click that and i'm going to send it to the back okay and so that looks decent in my opinion now again that that this is an opinion i um this is something that you know i use you can come up with your own but there i just shared how i do it so now we need to make these actually navigate somewhere because you remember i just drag it in and i copied and pasted so let's click the main and we can go to properties and let's find where it says screen under navigation so we're going to make this one navigate to the main screen now we're going to click this one and we're going to make it navigate to the hoa screen and then we're going to click the settings and we're going to make it navigate to the settings screen and finally we have the alarms and we're going to make it navigate to the alarm screen all right so now what i'm going to do is i'm going to press control a since that's all i have on the screen and then i'm going to hit ctrl c and that's going to copy that whole bottom navigation bar and we're on the hoa screen so we're going to go to settings screen and we're going to just hit control v and that's going to paste that whole thing there and then we're going to go to the alarm screen and hit ctrl v okay now the main screen we've got some things in our way so first what i'm going to do is i am just going to highlight everything at the bottom here that is really in the way and i'm just going to drag it up over these trends for now and now we're going to hit ctrl v there all right and you can see my trend is kind of stomping on that so i'm just going to shove it up out of the way for now we're going to we're going to fix all this and pretty it up in a little bit but okay first let's download this program and see how it works also if you're following exactly how i'm doing this you're going to get some warnings at this point because i drug those things over the top of the trend it's okay we're going to fix all that just go ahead with your download okay so we've got our screen downloaded and we know this is our main screen and we click there that's our hoas settings alarms back to main if you notice it's not really clear what screen we're on now as we get more functionality here it'll become a little clearer but we want to make it where you can tell for sure which screen you're on now i could put a big bold title up here that would do it but i can also just change the color of the particular screen button that we're on so let's do that now so right now we're on the main screen here so let's click the properties of it and let's go up and find our background color and let's just change it well since we've been using this one let's just switch over to this one now i'm not particularly jumping at this but i think it'll get our point across actually let's yeah i'm not really excited about that at all let's see here let's just select oh no i like that i don't like that even as much all right so i would actually do some thinking here probably but we'll stick with the do colors we've been using just because you know again this isn't about colors it's all right on our main screen it's going to be this color so now let's go to the hoa screen and we'll select the hoa and go to properties and this time we'll change its background color to that lighter blue and then we'll go to settings and select settings properties change its background color to the lighter blue and finally we'll go to a whoops i was about to mess up there i need to go to the alarm screen then select alarms properties there we go okay now i really do not like this color i know that i don't like this color but we're just proving point here now if you have a particular color you think would be pleasing and it's not shouting in other words i would not make this red i might make it a green but not a bright green and that's what i'm probably thinking right now it's like okay and i mean here's where i'll ask amber later i'll be like okay what color greenish color would go with that that's what i probably would do but um i don't have a lot of sense of style though so i know that color is wrong but it's going to do for now so let's download this program obviously we're on our main program because we know that's what's all here but we can see it here too and now when we press the hoas okay it switches to that settings alarms it mainly gives the operator a really good feel for okay how they're navigating okay so now we already had a few settings that we needed to move over so let's go back to our main screen we have some settings here that we definitely want to put on the settings screen and one i've got hidden and yours probably did too if you follow it along with what i'm doing is there was originally when you created your file there was a go to config here and we drag it up here and then we drug the trend over top of it so let's click our trend and just right click it and send to back and there you go now we got that go to config here and also uh yeah this go to button here that we were using we can go ahead and delete it because we're not going to use that but okay so i'm going to hit the control key and i'm going to select the go to config the min speed setting that min speed text the max speed setting and the max speed text i'm going to hit control x and that's going to cut all those out and now let's get our settings screen and we'll paste those in all right so we have the go to config button here and honestly i can't say i always put that on a screen um because it's rarely needed but i mean if you want it there that's great please don't leave it at the default shouting color i mean make it make it kind of blend in and yeah i would probably just hide it somewhere also i don't really agree with dragging this in really small and making it where it's some obscure blip that somebody accidentally hits either so we'll just let's go to its properties and one we'll go ahead and change that background color and we'll make it exact same as all the rest of them and then let's go and change our font size i believe all the rest of our font is actually 30 maybe it's 25 i can't remember yeah but okay that's i don't want to make it huge so so here is one case where yeah i'd probably make that font a little smaller so let's drop it back to 25. see if that'll get it in there there we go and i don't know where i'd put it right now it'll probably just dance around until we're near the end of writing our program and it ended up somewhere or i would delete it okay so we have a max speed and seven five now at this point this is kind of a setting screen that you know has some text so i don't think it needs all this shouting of buttons and everything now also this is something i don't really like how connected components workbench does is i at least nobody has shown me how yet i can't put a label on this where i could say max speed colon 75 i have to have those separate and that causes two issues is first yeah obviously we've got to make these two blend in a little better but it also makes it where the operator will press on the max speed text trying to change the value so i like to make it where you can touch the entire thing and i haven't figured how to do this in this so maybe somebody could show me how to do it in the comments but in this case i want these to look kind of pleasing kind of the same so one we're going to put max speed colon and also i'm going to left justify these texts and then i'm going to click this now i still want a fairly big field here because i want the operator not have to hit this precisely in other words when i'm done actually let's do it first so i'm going to go to properties and i am going to make my back mainly i'm going to make this background fill style i'm going to make it transparent and then i'm going to make this border style here none so that's what i want now i am going to change my text color because our text color over here is black so we're going to click that and we're going to change its text color to black now if you notice black html hex was zero zero zero zero zero zero so you can just type that in but even now one thing i don't like is i would like to put percent behind this so that would require another piece of text and it really just makes it clunky so i mean there should be a way to put a suffix and a prefix on this but again i don't know how to now i could make just general text in other words i could add back to them there's another way i could do this and i'll go i'll go ahead and go through this but i think this makes editing really tough let's let's go ahead and all right first i'd still want this fairly wide in other words what i don't want to do is i don't want to make this just big enough for the text because that's going to make it difficult on the operator and i'm going to make it you know probably probably something about like that also we're going to left justify that also now i'll bring this and one i probably wouldn't say ma i might would say max speed i don't know it depends on what other texture is but i probably i usually try to spell out exactly what we're talking about so this isn't even actually the maximum speed this is the maximum we're going to call it acceptable because it doesn't it's not actually a limit it's what we used in the trends video just to make the lines on this graph so we'll call that the maximum acceptable speed and let's drag that out away and then we'll figure out where this text ends at all right and so then i'll put the 75 right beside of it now the issue with this is two of those lots of issues with this is one you can only click on this area also that's 75 watts which i don't really like now if i put the percent behind it it really chokes down on the area that you have to actually touch here for the operator touch to enter a value so here is how i really do it especially if it's a smaller screen now again i would love to hear people's suggestions on you know how there's this just seems like they're missing something here but okay what i can actually do is i can take this maximum acceptable speed here i double click on it and i've been editing this i can hit space and then i have number here so i can now select a tag of the maximum speed or the as we have it tag max speed and all right we want it three digits and we want one decimal place and then i can go space percent and so that makes it that's what i really want to see so the issue is you can't actually click on this so what i'll do then is i can click on this one and change it is i will change this one's font to the actual color of the background and i can put this right behind this and now if when we download this you'll see that we can actually see all this neatly and we'll be able to touch on it and change it all right for the minimum speed i'm going to put it the other way because i do think that makes it really difficult if you're actually writing your program because yeah we've got to move that out of the way and remember that we've got something hidden behind it so i wouldn't do this on a bigger screen but that's just something i've been able to do in other hmi programs that i haven't figured out how to do in connected components workbench so help me out put in the comments how we can fix that all right so now we're going to have minimum acceptable speed so first let's just put that minimum adaptable speed colon also make sure even though it looks like it is about the same as the one above it's not this one right here is still set up for alignment of center so let's go for left it only made a small difference but it was a difference and then we'll drag our minimum speed up here we're going to change its properties mainly we're going to make transparent the background and our border style of none then we're going to change that text color to zero zero zero zero zero zero which is black okay now i'm not going to worry about the percent because i showed you how to do it in the other one here we're going to left justify that as well and okay that looks decent obviously it doesn't look exactly the same as above but close enough let's talk about how these two work now so let's go and download this program okay so we'll go to our settings and all right here's our two values now here's the differences if i hit minimum here it does nothing he's going to press harder trying to do something now the trick is you've got to touch the actual 25 right now now the top line i can touch anywhere and bring up bits so that's the difference in the two methods i really like using the top one but it makes it difficult to edit also be really really careful in fact i shouldn't have done this if you notice i'm right towards the edge of this screen nothing that the operator should have to normally touch to be right at the edge because when it's less sensitive here and they'll press harder and they'll actually end up damaging the screen so i should shift this down and shift this over a little bit so yeah we'll just grab this i would just shift it over and down just one and i would start something like there now here is one time is okay settings now now first we haven't talked to really about what screen size you should use but it's not that unusual for settings for there to be and more than you can put on a screen the size so maybe we do need multiple pages so again let's try to make it kind of elegant and easy to see how we're navigating so let's say we needed a settings page too is first okay let's let's create another screen and we're going to call this one settings page 2. and all right so now this one obviously please rename the settings page 1. so let's highlight everything here at the bottom and we're going to copy or ctrl c and we're going to go to settings page 2 and paste that okay so now we have our two settings screens but let's make it a little easier to see where we're navigating so one let's copy the settings button because that kind of shows us where we currently are and let's copy one of the other buttons and again yeah i know i would not use this color and i probably should have changed that early on but we're into this now so don't get on me about my color selection on that light or blue but all right so properties let's change the text on this one well first let's let's change where it goes so this is actually settings page one and then let's go up here to our text and we're gonna change it to page one and then let's select the other one and this goes to settings page 2 and we'll change its text to page 2. now we'll copy those two oops got a little too much copy these two buttons we're gonna go to page one and paste them and now let's change these text colors we'll just swap them because right now we're on page one so we'll go to properties and we're going to change this one's background color to our darker and we're going to change this one's background color to our lighter and let's download that so we can see how it works because this is something i think is left out of a lot of them we have to kind of we'll call it bury things further down in screens okay so now when we go to our settings screen let's see where we are we have page one we can hit page two and when it's clear we flip to page two we'd have more settings then we could flip back up to page one and we could have page three four or five or whatever mainly we could easily index through these okay and i think that is a decently navigable screen so in future videos obviously we've got to configure our alarms we've got an hoa screen we've got to configure uh we have the print command that we um are gonna do yeah i think those are the big three right now unless you have other suggestions feel free to put them in the comments again please take a moment to like this video subscribe to our channel until next time hey this is till and this is amber of tw controls we run the automation store hey thanks for finding our channel here's a playlist with some similar videos and youtube thinks you'll like this video please like our video and subscribe to our channel and if our videos have helped you make some money and you're not using our products please consider supporting us on patreon till next time see ya

Channel: Tim Wilborne

Views: 2,685

Keywords: Manufacturing, Tim Wilborne, Industrial Automation, PLC Programming, PLC Training, Allen Bradley, panelview 800, connected components workbench, graphic terminals, rockwell automation plc training, operator interface panel, panelview design, hmi, operator interface, panelview, rockwell automation, graphic terminal, graphic elements, panelview 800 software free download

Id: ALwVbyyvlU8

Length: 28min 54sec (1734 seconds)

Published: Wed Apr 14 2021