C-More Micro HMI -- How To Demo: Bottling Plant 5: Shift Keys, Menus for touch screen display

This project uses a SHIFT Key to get access to extra screens, and it does it in a unique way that allows you to change the function key graphics between the shifted and non-shifted function keys like this. Notice that all of these graphics are changing each time I hit a shift key. Using the normal Function Object method doesn’t allow you to change graphics between the shifted and non-shifted version. Let’s see how this is done. Normally you would use the Function Object to create a shift key. You would take one key, let’s take F1, make him the shift key, and then all of the other keys can be screen change keys to go to any screen you want. When you hit that shift key it brings up keys F6 through F10 and you can assign them to be screen changes or pick one to be a shift key to get you back to the original set of function keys. You don’t really need to do that because once you select one of these function keys the system automatically bumps you back to F1 through F5. The problem with using this function object is you can’t use graphics – and graphics REALLY help the user navigate the project. – you can’t even cover the function object with a graphic – it is always on top like this. You can see that down here – even though the Function Object is selected, the tools to raise and lower that object in the graphical hierarchy aren’t even available. If I highlight a button, those tools are available, so I can raise it to the top, but I can’t raise it above the function object – the function object is always on top. So how do you implement a graphical shift key without using the Function Object? Here’s the trick: We have two copies of the home screen, screen 1 and screen 2. They are identical, both using the same background screen but using different graphics for the shifted and non-shifted versions. The actual functionality of the home screen is up here at screen 15. Here’s our main screen that leaves our bottom area blank. If we go back to screen 1, we see that he has selected screen 15 as his background screen right here. So the only functionality on this screen is the function keys. Likewise, screen 2 is also using screen 15 as a background, so the only thing on screen 2 is these function key graphics. Do screen 1 is just a bitmap sitting on top of a screen change button – not a Function Button – and that screen change has F1 assigned to take us to Screen 2. Likewise, all of these guys are just bitmaps sitting on top of screen change buttons. The beauty of using this method is this screen change is going to take us to screen 2 … Screen 2 is the exact same screen, but now he gets to use different graphics for what appears to be the shifted version of the keys. So this button – the “shift” button – didn’t really shift anything it just took us to screen 2. The screen 2 shift button will take us back to screen 1. So if we go back to our simulator and check this out, when I hit the shift key, all that really did was take us to screen 2 which looks identical to screen 1 except it swapped out the graphics so now our shifted function keys can use graphics than the original function keys. We know these are really just bitmaps sitting on top of screen change buttons. Speaking of screen changes – take a look at shifted F2 which is a menu button. This screen gives us a menu of all of the screens in the project. We can scroll down through the various screens, and then jump to any screen directly. Let’s see how to do that. Notice that the menu screen doesn’t exist anywhere in our project – that’s because it is a special function. If we look at the function key – let’s move this bitmap out of the way – we expect this to be a Screen Change button. If we look at it, we see it is actually a screen selector button. This is a special function you have in the C-More Micro software. Here we can tell it we want the user to see both the screen number and screen name. Over here we select which screens the user gets to see. Using the Add and Delete buttons we can move these back and forth. These are all the screens the user won’t see – the available screens – and these are all the screens we selected to appear in that menu. So once we put this thing in place, put our project back together, and go back and look at our simulator, and we go to that menu screen, then we see the list of all the screens we selected in that screen selector dialog. We can simply scroll down through them and go directly to any screen in the project. This is a really nice feature to provide for the user that doesn’t want to have to navigate their way through a large project just to get to one screen. That’s it for this video – be sure to check out the other videos in this series. And as always, please send us any topics you would like to see covered – or - any other comments for that matter – we appreciate the feedback