Webcam, sliders, collapsible containers and youtube integration

webcam integration is first. And what I need to do is enable the webcam in my browser by default, a browser is going to block access to your webcam so that it can’t be used against you, I guess. So, and this is stored in your browser settings. And when an application is trying to use your webcam, it’ll prompt you with a dialog. What I’m going to do is, I’m going to manage this and go into my Chrome settings. Let me reload the page here. I’m going to choose, I always allow. I think I have to reload again. Usually it’ll pop up and ask you and then you click allow and it’ll start. But because I was playing with it before the demo, it started to block it after I removed it. So, here you can see that on the left there’s a live view. And on the right is where I can capture. So, I’m going to hold a hand up and capture the image. The bright snowy day outside, so I have a bit of a silhouette going on. Now, what I’m going to do is play with some of the settings. So, you can see I can mirror, take a mirror image. I can also mess with the quality .01. So, now you can see the poor J-Pike quality. So, it’s really quite simple. Take you into the browser and show you how this works. The webcam component is available through the Web Package Manager. If you drag it onto your form, you’ll see that it’s pretty simple. There’s a callback that you want to hook up. It’s called getBase64Data. And this hooks up to an event. I’ll show it to you in the slide. There’s something going on with the clip so I can see that probably I should restart it. But it basically calls it and passes in the data. The same is true. When you click the capture image, there’s a method. You just call capture. You can pass in the options. I have the code examples in the slide. So, we’ll get a chance to see it. The other demo that we want to do is the YouTube video and better. So, I’m going to go back to my sample gallery here and under specialized components. It’s right below it. And this allows you to embed any YouTube content that you want right into your application. It’s pretty simple. You give it a URL. You can give it some options as well. So, you can see that what I put in here, I watched that Falcon Heavy SpaceX launch yesterday. And I thought it was pretty cool that there’s a Tesla Roadster floating around in space right now. I have a live feed from that. So, I put that in here to have a little bit of fun. But as I play with the options here, you can see that I’ve disabled a full screen. I can choose to enable or disable auto play. So, now, if I disable auto play, I have to go and click on it. I could also disable the control panel so even if it’s playing, I can choose any of the controls. Also, some options about showing related videos at the end, etc. This is, again, pretty easy to set up. You just drag the component onto the form. And then you start, you can just play with the properties. You could set the URL and set the options. In designer, it looks like this. We put the component on the form. You could put the URL in as a property straight away. And some of those settings as well, but you can also work with them programmatically, which is what I was doing when I bound them to these switch boxes here. If we go in and look at the code, geez, why is this happening now? It looks like none of the code any clips is showing. I think it must do to go to meeting because it was just working right before I started broadcasting. Let me do a refresh in the navigator. No, it’s not working. I have code samples in the slides. We’ll move on. So the next demo that we wanted to show was the new slider components. I’ll come in the common components here in my micro samples and go down to slider. This is a new component, which is neat. It gives you the option to do one or two values. You can see that right here I have two input fields that are bound to two form variables. Typically, a slider only binds to one variable. You can see that in the top example here, it’s changing the lower bound. This slider, you can bind to two variables, upper bound, and a lower bound. If I go on the second one, you can see I’m changing the min and the max. That’s nice in particular for things like filters. If you want to have a min price max price date or something like that, it’s good to have an upper bound and a lower bound option. You can see in the third slide bar here, we have a value list, which is tied to a tick interval. As I slide through, I can display values for different break points. The next slider here does something interesting. It can change the color of the slide based on the value. There’s a way you can plug in a function to change the slide value. You might want to have the slider go from green to red or something as you get into a higher value. or something like that. It’s fully customizable via CSS. You can see the lower one, we’ve changed the slider image and then some of the colors and sizes of the ticks. Over here on the right, it’s just showing some of the values that you can set. You can set these directly on the component design time where you can programmatically set them as well. For example, I could make the upper bound something like 150. It’s not hooking up right now. It was working. You can, I mean, these are working. That’s interesting. As you change these, you can try it out on the demo site yourself. You can show on hide ticks. You can change the interval. Anything you can do at design time you can do programmatically through the API. Of course, you can invert your slider and make it vertical. I’m going to assume that I still have the same problem when I try to show code here. I don’t know why that’s happening. We have code samples in the slides and I’ll restart a clip while I’m taking questions so that if we want to dive into the code, we can do that. One more demo that I wanted to show you is under containers in the micro samples here. We’ve added collapsible containers. These are containers that can have collapsible content inside of them. In the simplest form, you have collapsible cards, which is just a collapsible object with some mark-up content inside of it. You’ll notice that there’s this Cording mode here too. If I don’t have that on, you can see that I can have, sorry, if I don’t have that on, only one component is collapsible time. If I think now I have to turn it off. Sorry, if I don’t have it on both are expandable at the same time, but if you do have it in a Cording mode, then only one can be expanded at a time, working like an according container. Over here in the next sample, it’s essentially the same thing, except for we’re doing a bit of CSS with the mark-up. These are again, just static cards inside. You can see that we’ve applied a bit of styling to change the look and feel. Also down here, I’m going to handle the click event with a function, and I’m just showing a dialogue here. You can handle a callback when a card is clicked and then take some action. Cards are for showing static content, but the collapsibles can also contain real forms. On the third example here, you can see this is a form that’s just been designed and has a button inside. We have another version of that form, some static markup that we put in there, but that again is mixed in with the forms. You can do cards which essentially containers for markup, and you just inject the markup right into the card, or you can actually take a form and design it, and that way you can handle all the logic inside the form. You can also programmatically build these things, so you can drag them on a form, but if you want to put a collapsible on your form, and then dynamically start adding content to it, you can. It doesn’t have to be all laid out at the beginning. I am going to jump over and do a quick recap of what we saw, and in the meantime I’m going to restart my IDE so that if we want to, we can get into some of the code, because I don’t know what was going on with the display of the source code. Just a quick recap of these four demos. We started with webcam integration. The first thing you want to do when you’re using it is to allow access. Now, we made it easy because it just prompts for that when the component shows, so there’s not much you have to do as a developer, other than train your users to say, yes, otherwise it’s not going to work. We added this because we had some some use cases like someone is checking people entering a facility, and they want to, they want to compare their picture with something that was in the database, and if they don’t have that picture, they want to take the picture right there, so that was one of the use cases for this component. It’s really easy to use. You have these options, you can set them programmatically. When you want to capture the image, you can just pass in the options, and then you can call this event, or this method called capture. You can see at the design time we handled the callback which passes the data back, and you can put that directly into an image data provider if you want to see it on the screen, or you can store it to a database column. It’s really just the one method to capture with some options, and then handling the callback, and then you can do what you want with the data. For the YouTube video and better, that one was also really simple. It really just does it by URL. We showed some of the options that you have. You can enable or disable full screen auto play controls, branding, and related videos. The options you can just put in one by one. You get code complete on all that stuff, so it’s really self-explanatory, and then you can change the URL just by setting the URL. So you can set all that stuff up at design time, or you can change it programmatically. The slider was a little bit more complicated, so we offer data binding between one or two values. If you just set one, it’s the min value, then that’s the only value. If you set a second value that becomes the max, you can orient it horizontal or vertical. There is an option to bind a value list to break point labels, and I’ll go back to the code here and show you that. There’s a way to do numeric formatting or day formatting on the actual values. You can programmatically change the color of the slide bar depending on the values. The custom item is with CSS. There’s a lot of options in there in terms of what you can and can’t do that you saw on the right of that demo screen. There’s also callbacks for when data change events. I’m going to try to do that, a code example on the slider for you again because if we look at, for example, the value list option, you can see that over here on the designer, there is somewhere. I lost it. You can see that the, oh, that one doesn’t have a data provider. This one does. You can see that there’s two data providers bound to this one, whereas this one only has one data provider. On the value list one, there’s a step value list here. If we take a look at this value list, you can see that it’s just really a mapping of the numeric value and the display value. Of course, you can use any value list you want here, so it could be data driven. You could have I18N, etc. This one was interesting because it was changing colors as we slide back and forth. If we look at the color bar function, it’s really just a text that you put into it. The reason that this is just in plain text and not selecting a function right from your JavaScript files is because this is something that’s going to be evaluated client-side. You don’t want to have a callback as the user sliding to change the color. We’re just going to pass in a simple function that handles the min value and the max value returns a color by name or by hex code. That’s evaluated client-side and that’s why we do it here right in the text editor. You can do a gradient if you want, so you can have it fade from one color to the other. This one also had numeric formatting and I think that’s up here. Again, this is done client-side, so you can pass in a function which will give you the value and the type. You can format that however you want. You’ll notice in the demo that we actually just made it formatted with a decimal and added K to represent number of thousands. So, custom CSS, this is really nothing special just that there’s a style class set here. And if you were to go into that style class, which I think is, let me try a slider demo. There we go. If you were to go into that and what was the name of that class, custom slider. And that’s right on top. So, there’s all the settings here for custom slider. So, there’s an example of how to do this on the project home, but you basically go in and override those classes and you can do whatever you want to change your slider. Then, let’s take a look at the collapsible stuff too in the designer. This is the very basic one. And so, the component here is the collapse container. And you can see that it has this array of collapsibles over here in the properties where you can look at them right here and select them individually. So, these are the objects that were collapsing. And every collapsible can contain a form or cards. And in this case, we just had cards and the cards really just are having static content. So, this was saying card 1.1, card 1.2, etc. So, that was the really simple example. In the more complex example here, we were doing a bit of styling. So, if we look at the collapsibles there, you could see that there is some markup. And this, you can just inject CSS right from one of the stylesheet that you’ve included. So, that the header, demo header and demo text is coming out of a, let’s say collapse CSS, like it’s Bell. And demo, better. So, this is where you can see that that styling is coming from. So, just to see a CSS that you got to include, and then you can bind it right right in the markup there. And that’s, again, these are just static cards. Now, you may remember that on the middle one here there was a callback when I clicked on the card. So, that’s actually on the collapsible container itself. You can see that there’s three events. And then here’s where I was checking if it was the new loan card, then I was just showing a dialog. But it passes in the card, the collapsible and the index in both of those. So, you can handle any part of that that you want. The third one, instead of using cards, was using the forms. So, you can see that in the collapsible here, it has the contained form. And you can just go in and get a form chooser here. And this form was nothing special, just a form with a button on it. So, and I believe you can mix content because I think the last one was just again a card. Or not even a card, it’s just the collapsible with no cards inside, it’s just the header. So, you can mix and match cards and forms however you want. If we look at the one that was built programmatically, I believe this was on build with API. So, you can just see that on that component, we’re just calling create collapsible and we’re passing in these collapse of objects. Inside the collapse of objects, we’re creating cards. So, a little bit more work, but if you were, you can imagine an example where you’re really just, you know, looping over records or something and building out a collapsible object, this is probably a lot more likely scenario than just building it all at design time. Okay. I think that we covered most of this here. Again, that accordion mode is nice because you can determine which one, what’s going to happen when you click on multiple ones, just collapse the ones that are already showing or just leave them while expanded. This was the callback event. We had to look at that. Just so you know the, this is really coming in two projects, there is the Servoy extra components. So, right now we just released number five. So, if you were to go into your project and download it and install it with a web package manager, you’ll see if it loads. There we go. You’ll see, there’s the bottom. Servoy extra components has been updated one dot five. And so that has three of the components we looked at. It has the YouTube and better, the slider and the collapsible container. The webcam has its own project and that’s available here. So, you just have to, if you haven’t done this before, all you have to do is click the plus button and it’ll, it’ll add it to your project and then it’ll show up in the palette and you can drag it on the form and get going. I’m going to leave up these links and I’m going to, oops, this is hard to do by yourself. I’m going to take this over to some questions. Give me a second here. I’m going to expand this. All right. Most of them are about how you didn’t see my screen at the beginning. And, is it only YouTube or can you watch videos from custom link with custom properties to mention stream rate? Right now this is only YouTube. So, if you’re looking at a YouTube video, there’s always the option to get the YouTube in bed link. So, it’s not the URL of the video. There’s a separate URL that looks very similar, that is for embedding the component. So, yeah, it’s only YouTube. Can the cards collapse sideways instead of up and down? I don’t think that that’s possible, but we could look into it. And, can the collapsibles be done in response of the answers? Yes, you can also do the collapsible containers in response of layout. There is a responsive height, in height, I think it is, for any of the content there, so you can set what the response of height is going to be. Okay. Well, that handles all of our questions. We’ll be back again in two weeks. Next, we’re going to try to announce more of the topics in advance. It’s kind of hard to plan all of this, but we’re working hard on it. So, two weeks from now, we’re going to meet again, and we hope to be able to show you something we’ve been working on, which allows you to do browser-to-deathtop integration. So, things that are formally impossible in a browser, like access to the file system, access to hardware, printers, scanners, comports, that kind of thing, those are typically impossible to get to from a browser. We have a mechanism for doing that, and we’re going to show that to you in two weeks. So, thanks everyone. Again, we record this. We’re going to post it on our website, and we will post all of the content, the links, the slides, on the forum channel that we have dedicated for this, and I hope that you post questions and feedback there. Thanks, everyone. Goodbye. you

Close