The Jupyter Interactive Widget Ecosystem | SciPy 2018 Tutorial | Matt Craig

well good good afternoon and welcome to the Jupiter widgets tutorial if you're not here for the Jupiter widgets tutorial we won't be offended if you go out either door my name is Matt Craig I teach physics and astronomy at Minnesota State University Moorhead a small University in Northwest Minnesota my involvement in Python is primarily through the Astro PI package and then my first Sipe I five years ago I think I went to what was the first tutorial on ipython notebooks and got introduced to widgets and have been hooked since I've got two other presenters who are here today Jason grout and Martin Bret olds and the way we have things set up well we've each got a block of the of the Detroit before I forget we should have a break around 2:30 but if it gets to two 30 to 40 and we haven't had a break yet somebody should raise their hand and interrupt us the food's only out from 2:30 to 4:00 and I don't want to miss the food so we if you run into we've got some post-its coming around there in the back of the room now soon you'll have a blue blueish post-it and an orange post-it if you have a problem during the tutorial stick the orange posted up on your computer or raise your hand there'll be a couple times when we're working on exercises that we ask you to put up the blue post it when you're done so we know how far along people are okay so let's get started well before I go any further does everybody have the notebooks open okay so I'll be running the the tutorial and in Jupiter lab most of the widgets interface works just fine and Jupiter lab there will be a couple things that I'll point out when we get to them that aren't working in Jupiter lab yet but the fairly minor all of it works in the classic notebook so the idea of widgets is to make it easier for you to interact with your data so a you know standard use of a term memo might look something like this you want to know a 1999 Stein's million nine times nine is you enter it you get a result you want to do this for several different number maybe see write a function and then to test the function you pass it a value and see if you get the result that you expect widgets give you away fairly easily of taking a function you've already written so we didn't modify our function f right it's just straightforward Python function give the interact function from I PI widgets a little bit of information about what values we want the argument to have and then it wires up a gooeys so that as you change the slider the value of X is updated that's passed into the function and the result is printed out on in the browser interact behind the scenes is generating some widgets for you and what we're going to spend a fair bit of time in this first 45 minutes of the tutorial is going through the base widgets that are included in I pipe widgets that the building blocks from which you can build something more interesting the so one type of widget is a float slider widget we'll see there's several different varieties on this for any of these widgets you can have more than one instance of it running in the browser window and they are two different views onto the same underlying model so if I move one of the sliders the other one moves you can get the values of widgets from the Python side and you can set the value of a widget from the Python side so one of the things excited me about widgets initially my very first sort of public example of programming was in middle school in the mid-1980s and I told the librarian sure I'll write you a video game for the trs-80 you know in those days you you made things on the screen by poking values into memory and the the big display of the game ended up being a bunch of people watching me mutter under my breath as I typed at a keyboard and desperate wish I'd never said yes and so when I saw that when I saw widgets and I was like wait you mean I can just write Python and I can make GUI elements I got just absurdly excited that I could do all this without having to learn any JavaScript or anything complicated so you can customize these customize what happens when you do something with a a widget so you can define a function that the widget observes so here I've written a function handle change that when it gets a change event from the widget updates the value of a variable we're gonna be coming back to each of these pieces in a little bit so we're going to more detail then let's see so right now the slider value was set to 8 so I should get 64 when I Square and I do if I go back up just the slider square it's been updated finally you can link widgets together so I've got two widgets now the text widget down here and the slider and I've linked the two of them together so that when I change one the other changes and it works in both directions right so there's a limit when we decide we're going to define this slider it went from minimum five to maximum of 10 so when I try setting a value of 15 the slider stop to ten so as I'm going to go to the next notebook now and you can either follow along with these from this index page or if you look in a files view we've named all of the files so that they should be presented and they order we're going to go through them so I did a version of this tutorial about five five and a half weeks ago at my institution there's a faculty member there who teaches astronomy and a couple of students and they in our department in our intro astronomy classes there are a lot of flash-based Interactive's that we used that we used flashes going away and we wanted to replace those and so is sort of motivation and and to set the the scale for where we expect you to be in five weeks the and because it's a nice illustration of what you can do with widgets even though each of the individual pieces is fairly simple this is a single widget that combines several pieces to it so there's a three-dimensional view of this binary star system in the upper left corner using the package pi3 j/s a plot that changes I'll show you an animated version of this in a moment as the Stars orbit around each other the plot gets updated and using the graph as though using the plot oh sorry using the package PQ plot and all of the controls you see down towards the bottom are let me get this up in a full-screen are from playing I pie widgets so one of the things that's included in I pie widgets is a play widget the way we have this set up is you adjust the what's called the inclination the angle of the orbit you get different views of the binary star system and the light curve is updated in the upper right as you as you move the star you can change properties of the stars we've set things up so that the display doesn't update until you let go over the control so you have some flexibility and how often your your model gets in or updated and you know can I find the right there we go right so what I want to include this because what surprised me a little bit was that the goal for the summer for the folks I did this with was to write three or four Interactive's this binary star simulator was on there say well if we get to the end of the summer and we have some time we'll put this together but they got through everything's okay we missed the we missed the electrical socket that's what I was watching it's like okay no they sorry I get so excited about widgets and I just can't control myself yeah so it's you know what I'm looking forward to is is seeing what you guys do with this in a month or two months so want to spend five ten minutes here showing you first about a tool called interact that lets you construct and display a widget interface without having to do to write any low-level would you code yourself so if you could get to this notebook and let's see so let's go through the imports here so interact as a function that's part of I PI widgets thank you probably I guess that maybe should just ask for a straw so interact lets you take a function that you've written and if you give it some hints about what type of variable the argument is then it will generate for you a widget and by default it prints out the return value of the function so you passin was the first argument to interact the function that you want it to generate the UI for if you say something about what the argument is by setting a default value then it will use that to guess what kind of widget you want so in this case it's on integer is the argument guessed he wandered an integer site if you go along with that if we'd said X was a boolean it would generate a check box if X was a string then it would generate a text field right that updates in real time you can also use interact as a decorator so the syntax is exactly the same as before in that the controls are generated by the default values that you pass in in this case we've passed in a floating-point numbers we get a floating point slider out of it it is possible to set specific values and and keep those values fixed as you're modifying the other arguments to the function by adding a fixed keyword so now as we change P as the first argument uses the second argument as we change the value of P that updates in the display but the value of Q is kept fixed did one to you my PhD work was in cosmology so when I see these the first thing I think was okay so if we're gonna set the Hubble constant the expansion rate of the universe and see what happens if we change the density of the universe this is perfect for that case what we've seen so far is have essentially been abbreviations for widgets you could if you wanted to instead of saying interact F and then just saying x equals 10 which is what we've done before you could pass in what I PI widgets behind the scenes substituted for that integer slider so you could set the min value and the maximum value and the step will see it at a easier tune tax for doing that in a moment like we said a couple minutes ago the type of the keyword argument is what determines the type of GUI element that's generated so I find myself using interact not infrequently in the classroom or what I want to be able to do is show a graph of something and demonstrate how the graph responds if I change something and I don't start out with at the base level making a box away and then I graph and then let slider widget and putting all those together I write the function and I use interact so in a couple minutes we'll see some graph examples using interact two questions at this point yes so the question was if you have something like interact that you're using in a script that runs in a notebook is there a something you can do so that the user will get a warning if they try running it outside of a notebook so for the recording the answer to the question was if I pair which is not installed an error will get raised at that point if you try to import it we think that there should be an error thrown if you at the stage where the widget tries to send a message to the colonel and the colonel doesn't exist in practice I haven't run into that too much because the most of the widget you know most of this kind of stuff I'm doing in a notebook and so I can't run the notebook from the command line other questions okay so right if all you want to do is change the minimum and maximum values of a slider would be a pain to have to type out inside or yadda yadda yadda and so there are shortcuts for that if you give two values those are used as the min and the max if you give three it's min max and step and if you want to give a min Max and a step and also specify the default value or the starting value then you can do that using the decorator this way so in the decorator you're saying what you want the bounds of the slider to be in the step and then in the function definition you're providing the default value you can also do drop-down widgets this way and you can set up drop down widgets so that there's difference between the value that's displayed in the drop-down and the value that's sent back to Python so in this case if you select one the number 10 is being sent to our function f what that function did was multiplied by 3 so we get 30 out if you change it to 2 we get 60 M okay so interactive is similar to interact but returns a widget so we haven't displayed it quite yet we'll get there in a moment so what we got back from W is a widget it turns out that when you have something with several pieces to it and in what we've seen so far there really been two or three widgets involved so if I back up to this drop down there at least three widgets here there's the drop down itself there's a widget that holds the output from the function and both of those are put together inside of a box oh it's alright yeah yeah I switched when I did the YouTube video and forgot to switch back how's that okay great right so if you look at the children we can see what the children are oh oh yeah yeah right we haven't displayed this one yet to display the widget you can do one of two things you can display or just type with W by itself is the last thing in the in the cell and so this widget right the top one top our first child is an integer slider that goes from minus ten to thirty second one integer slider that goes from minus one to two sixty the difference is that now we have an object that is this widget so we can get the values of the of the keyword arguments out of the widget we can get the result of the function out of the widget and so what the interactive gives you over in Iraq is a widget that you could if you wanted to take and embed in some other widget so if I wanted to do back to my expansion in the universe example if I wanted to have two tabs one that showed them a Hubble constant of expansion rate of the universe of 50 and one that said a hundred I could generate two interactive plots with two different values of the this Hubble constant using interactive save those two widgets and put them into a tablet right that's the other advantage is now once you have this you can go in and change things so if I wanted to change the minimum value of the first child which is an integer slider to ten whoops oh yeah yeah I have a typing expansion program on and W is with thanks now the moment of truth yes so you can write that is the other advantage you can modify the widget once you have it so let's do a quick interactive plot so we're writing a function of that plots a straight line using matplotlib so it's using the normal map plot libe commands here you're familiar with if that's the package you use for graphing and to make the plot interactive we just feed it into as a function you know into interactive this work with the interact also and we get out a graph where you can adjust the slope adjust the intercept and watch it change in real time is anybody as you adjust these sliders in on your computer or any of you seeing some lag between when you move the slider and when yeah so that that's one difference I've noticed between Jupiter lab and the classic notebook is in the classic notebook the updates take a really long time in Jupiter lab they don't if you make the function more complicated or the better way say it's the more complicated the function is longer it's gonna take to update so you even have it in Jupiter lab if I drop in complicated enough function I'll see in a most comical amount of lag sometimes as I adjust the slider and then get five minutes of watching it update yep thank you for mentioning that so it is possible to set up the widget so that instead of the widget updating continuously so what's happening up here is that as I drag this every time the value of the slope of the line changes a message is sent to my function my function updates the plot what you can do instead is disable those continuous updates and there's two ways of doing that so for this demonstration we've got a function that doesn't do a whole lot except sleep which on a warm Texas day after a nice big clay pit lunch is mighty appealing but so if you use interact manual instead of interact then you get the usual user interface event so in this case we had one argument that we're setting to a float slider nothing gets run until you push the run interactive button so in interactive you can do the same thing the details of how you do it are a little bit different you pass in a dictionary it's a second argument and say that manual is true the other way of handling this is to use a special keyword on the float slider widget you can set continuous update to false and the way this works is that I can move the widget around all I want a event won't trigger and call my function until I let go I'm personally I prefer this to the run interact thing because I forget to push run to interact but in the binary star simulator for example that I showed you a couple minutes ago continuous update is set to false because it takes some time to recalculate each of the models and so you wait till the user is has set the parameters they want and then then it goes it's a good point okay so small exercise here what I want you to do is we want to modify this plotting widget so that the values only update when you release the mouse so it's maybe going to be easier as a first step here if we add a cell above and then display right here so take a couple minutes I've got the line of code here already that that set continuous update for the first trial the slope slider here to false so please go ahead and make the second slider behave the same way there's not a lot that you're intended to type in here and once you're done with it if you could stick your blue-green and post it onto your computer and if you don't have a Bluegreen postive raise your hand so if you've got a question while you're working just raise your hand or check somebody here you know when you've got so the fix here is the if we look back up at the widget first child is the slope second child is the y-intercept and so if we want to set the check in second child's continuous update to false we just need to change the index of into children and then it should only update when you release the sliders yep yes you can and there is a hasn't been released as I pie MPL been released yet what is it that you want the plots to pander you just want to keep writing on top of the same plot okay go one level deeper than interact oh good question so the question was so suppose we save this notebook we push up to github is it going to be interactive on github no do you want to come up in so it does rain down on and be fewer but github doesn't do it because of security issues so I don't see that changing soon and be gone forward does that work so we to to render so if you have saved this notebook will it render on github no security issues it does render on MV view or right yeah I use that actually yeah it does it's interactive in the sense that the if it's only front-end interaction but if you need some Python to execute in it that part doesn't work you would need to use say my binder or something yes sir towards the end we'll come back to how do you present widgets to users some users are okay with download the repo and go to the command line some aren't so other questions yep I don't so the question was does it work with dass got it yeah I don't know why you wouldn't yep III mean it so using more resources in the sense that yeah some JavaScript there is a new view created by the amount of but essentially no and the amount of used resources we're using any way for these widgets compared to what you would see if you went to a YouTube page it's fairly small so other questions okay let's go to the next notebook we've already seen at least roughly what widgets are and what they can be used for there's a couple new things that we want to show you and here so let's do the import so the two ways to display a widget one is to take advantage of the fact that the way the notebooks work is that the representation of whatever the last line of code is in a code cell is displayed in the cell below if that object has a particular method defined for for a representation in the notebook and so one way to show a widget is just to have it the last thing of the notebook like typing in interactive plot there is a command display that lets you a little bit more flexible about where in the cell you you make the display happen we've already seen that if you display the same widget more than one time you're making more than one view of it on the the reason this works is that on a python side there's one widget object that you created when you define the widget the JavaScript side there's a model of that widget that's created and then you can have as many views of that model as you want to in the notebook you can close the widget by using close and if we remake the widget again we can get in set values the useful thing to know about is that each widget has a bunch of keys defined and the keys are the things that you can pass back and forth from the front-end JavaScript to Python the keys that are available depend on the type of the widget but you can always get that list by looking at the keys property so this is a slider so there's a continuous update property we've already talked about a description we'll come back to in a minute disable does what you think it would do if you set disabled equals true then you can't interact with the slider will be talking quite a bit about layout in a little bit max and then we've already seen and so because I don't have the widgets documentation open in front of me at all times it's not infrequent I use this feature not infrequently to remind myself what can I do with this widget it is possible to add things to this so without having to do any JavaScript side coding so if you want to add other traits that widgets have that can be synced across widgets it is possible to do that without too much trouble right so you can set values to some of those properties when you create the widget I'm in this case we're sending the value and whether or not it's disabled so I can't type as with the way let me modify this a little bit okay I can change weather control is disabled programmatically another settle now we can edit change it back you can link to widgets together so here we've got a float text and a slider widget and there's a function two functions for linking one called link and one called Jail Inc j/s link makes a link happen on the client side and the JavaScript so if you were to upload this notebook to github but then look at it an NB viewer it would render the widgets and as you dragged one widget you down here you'd see the textbox update or if you change the text box you'll see the slider update in a couple minutes well probably after the break we'll come back to just plain language doesn't link in the Python side and then unless you're connected to a computer that's running Python in the background the links aren't going to work and you can also unlink them programmatically questions okay so next notebook up is a list of a bunch of widgets although I could read all of this to you it would get a little painful so but it's just we do instead just take your green sticky off if you have your green sticky take the next five or ten minutes run through the notebook here execute each of the cells see what the different widget types look like there will be a couple places where I want to say something but take five ten minutes run through the cells let us know when you have questions also if you're having any installation issues if things aren't working for you please raise your hand so we can get that solved now okay so if you've made it all the way through this notebook and you're ready to move on slap on the green sticky there's a couple things I want to point out you can see in this notebook what gets displayed if you have run in notebook you've made widgets you save the notebook you close down the kernel a day later you open the notebook back up you don't at least by default see the widgets you see a text short text saying there was a widget here essentially let me go through here so there are a variety of sliders we got a question during the working time where was it that's coming up there ah okay here's a good example well maybe it's it's not the best to notice this this label on sliders cut off I'm in Texas so the by default out of the box each of the labels has a fixed width we'll come back in a in a couple notebooks to how you change that the advantage of it if you're using short labels is that automatically all the labels are are aligned and all the controls are aligned but it is it is changeable maybe so let me say something about the text widgets because there four of them so the text and text area are intended to be input areas the text for for short text the text area for longer text labels are intended to be short pieces of text that you're going to put next to some sort of control if you have paragraphs and paragraphs of text we'd recommend to use the HTML or HTML math for rendering those buttons and okay so output we're gonna talk about a fair bit so questions about any of the widgets leading up to output yep question was can you use an image with a button I think the answer is no you cannot decorate a button with an image if we have some time at the end I wrote this little package that may be a very bad idea called IP events that would let you would let you make a image clickable yeah so part of the answer here is you if you know any JavaScript then you can do anything whether or not it's advisable yes said there is a there is a package called IP events that lets you attach events to widgets that can be a really slow way to process browser events so so depending on what you need it might work but so other questions before we get to the albergue widget sure so there's let me find that there we go so quick answer your question if we change we set the style to this then we're seeing the full string now the downside is that this space for the label has come at the expense of the space for the slider when we get to the styling notebook we'll talk about how to break those two apart and give the label its own widget the slider its own widget and put them next to each other other questions okay so what the output widget does is let you capture the output that would normally go to the notebook so unlike some other widgets when you first display an out widget there is nothing in the browser if I execute this set of print statements instead of going to the cell underneath it goes to the output widget anything that you can display in a Jupiter notebook can be displayed inside of the output widget so if you get if this tutorial is moving a little bit too slowly you can start playing last year's tutorials and bump it up to double speed with YouTube and there are some changes coming up though so don't go too far ahead see we'll come back and talk more about the output widget in a moment the animation the play widget essentially provides a loop for you looping over integers that you can then feed into another widget so in this case we're using the play widget to drive a slider controllers not working right right okay so in principle you can you can link to a game controller also in practice don't try that over bluetooth at the last minute a couple widgets which will be handy later once we start writing our own custom widgets are the Box H box and V box each of which is intended to be a container that holds other widgets h boxes it's by default lays things out horizontally V box lays them out vertically so in this case we've got two V boxes one with 0 and 1 one with two and three and then we've put those two V boxes into an H box there's an accordion widget so inside of this you can put any other widget you want to and a tab which at which again can have whoops widgets inside of it and you can put them aside of each other even if you want to you can control programmatically which tab is selected so if I change this to 0 I get the zero tab with the accordion you can set it to none selected if you want everything to start out closed you can nest them this particular example doesn't do a whole lot except show that you can have accordions sided tabs and I think in principle you can do tabs inside of inside of accordions questions yep so clear the output from an output widget yes it is and let me add a cell back up here by the upward widget yep so it's out doc clear output okay I should say this just in case so you probably you may already all know this but in the notebook you can tab complete so I almost never even if I remember yeah you can clear I almost never remember what the command is so I just hit tab and let the notebook tell me what to do questions yeah it certainly looks like it's milliseconds my guess is it's a requestanimationframe so it has a lower bound of about 16 long seconds 16 16 milliseconds so it doesn't update faster than the refresh rate of your screen other questions okay so let's I'm thinking let's do the output widget and then break and then do exercises okay sure yeah that works okay it's a little bit more about the output widget so in this case you've added a border to the output widget and we'll come back after the break and talk more about widget styling and as we saw before you can dump output in there we've already seen both of these so you can put widgets inside of output widgets so we just added this slider so this next I'll I'm gonna run is not going to work in Jupiter lab it does work in classic notebook if you are looking for something to do this weekend and we'll be at the sprints then this would make a great sprint project so if you're classic notebook then you should have seen you would have seen output here but not in Jupiter lab yet oh great question about clear output you can also use in output decorator to capture what comes out of a function so one of the things you'll run into as you once you start writing more widgets and you're trying to debug what's going on as you're as you're handling events is any errors that are raised inside of an event handler don't make it into the notebook and this gives you a way of doing that so we wrote a function that printed something and raised an exception in a decorated with this output capture and so back up in the output widget here's our print statement and our exception we'll come back to later okay so let's run this so we've got three integer slider sliders rather a function that prints their values and as you adjust the sliders the output is getting captured about the output widget and displayed yeah so like I mentioned a moment ago for debugging errors in callbacks output is really nice um I don't think I can say out loud how many two hours I've spent remembering that oh right the errors don't get printed so um actually or not let me take this out first because I have done this so many times so I'm writing a widget and I have a button I want something to happen when I click the button and so in this case I'm supposed to get an exception you know maybe I was trying to do something more productive and my callback function didn't seem to be doing anything so I'm like I know I'll raise an exception inside the callback function surely that will break things know that this is happening behind the scenes as the kernel talks to the front end by adding in the capture widget then when I click the button ah Thank You hours telling you we get the exception so I guess we don't get in multiple times uh-uh thank you right now I'm truly exceptional sorry you can use it you can also use the output widget if you use Python logging to capture log messages but not in Jupiter lab there you go so I won't hit shift return yeah what's not working as the output of pending right questions okay so let's take a look at the exercises so okay let me show you one thing so with each of the exercises we have solutions available so if you're at a point where you want to see what or one way to do this uncomment the load run that that'll drop a solution into the notebook style then you'll have to run the cell again to see the solution so I think with that start working on the exercises we'll gather back together out 15 minutes 20 minutes all right so so move or any other questions all right so what we'll do is we'll move on now I'm gonna go ahead and maximize this to give us a little more room it's full screen okay actually I can take off the toolbar there we go now we have even more room um so every one of the of the widgets that comes with I hide widgets these standard controls widgets has two properties that are useful for changing the styling and the layout of these widgets so one property is the layout attribute and the other property is the style attribute so the layout attribute what it does is it essentially exposes to you a lot of the CSS so CSS is the way too late it's the style things in a browser and and what the layout attribute does is is exposes CSS essentially to you so you can control the look and feel of these widgets and in particular what the layout property does is it lets you control sort of the outer box for the widgets so how wide the widget is how tall it is a border the background color sort of the container that the widget lives inside of so there's a bunch of attributes like height width max height max width min height min width whether it's visible overflow controls whether there's a scrollbar for example if you have a box do you want the box to only go so so big and then have a scrollbar to to access anything else in the box the border the margin the padding so how many people here have experience with CSS in a browser okay so a fair number of people so this is just trying to give you some of the capabilities that you would expect with a browser based I think we use we embed the flexbox layout attributes and just recently as in not yet released but in the pre-release that we released last week and in the soon-to-be-released release okay let me put some numbers with that in 7.2 point one which is the current and released we we just have flexbox and 7.3 which is a release that will release probably next week and the pre release is out already we also have the CSS grid layout attributes okay so let's skip through a bunch of these and just go straight to the examples I think things will be a little more explanatory so the idea here is that for every widget you have an attribute called the layout attribute and you can give it a layout widget and layout widget is just a widget that has all these properties with Heights border etc and these properties are literally just the CSS you know do you just put the string that you would put in CSS there so if you want to look up what should be in there look up the CSS spec for border or the CSS spec for height you can do it in pixels and percentages e/m which is basically anything the browser supports so in this case I have a button the description is of course what's in the middle the layout it's 50% which means 50% of my window here the height is 80 pixels the border is 2 pixels dotted blue and it's very easy to set those CSS properties one of the things that gets a little annoying sometimes to create a layout object so you can't just pass a dict as well and it works just fine too so you could just give it curly braces if you want and it'll automatically convert that dict into a layout widget and then assign the layout widget to the widget you can I so let's go ahead and put it back to the layout you can assign the same layout to multiple widgets it's an easy way to get consistent look and feel across many widgets so here I'm thinking another button but I'm giving it the layout that's the same layout as the first widgets and now if I set and and because it's a widget I can set the attributes and there automatically communicated so I can set the border to be one pixel solid red and because this layout is shared between both both property in both widgets have their layouts changed so because the layout is a widget itself I can change its properties and those properties are automatically communicated and changed so you can dynamically change these layouts as you wish questions okay the description so we talked a little bit about this too the description you know sometimes it's too long for the thing again with the standard set of reference controls that came with IPA widgets we tried to be pretty opinionated about how they looked and how they fit together and in particular we we were opinionated about how they should stack nicely next to each other instead of forcing you to make a grid and all this kind of stuff we tried to make them all sort of uniform size so that you could just put them right on top of each other and it looks like they're all nice and a line and everything and so in particular that said that meant it our like our labels are all the same width and so they stack up really nicely and line up really nicely without you having to do any extra work but sometimes that you know cuts off this description here and so it's very easy for you to to adjust this here's two ways to do it one way is to sort of deconstruct this widget it sort of has a label on the left-hand side and the slider on the right-hand side is sort of smashed together in a single widget and you can deconstruct that and make a label that says that's just a specific label widget and then an insider and you end up with something like this you'll notice that this slider is a full width slider here and a full width label so that's one way to do it you kind of mess up the nice stacking layout that you have but it gives you the description that's as long as you want or you can change what we call the style this is the second attribute that exists on all the widgets layout is about controlling the CSS of sort of the box of the widget and style lets you drill down in this specific properties of the widget and so in this case any widget that has a description property also has a style attribute that and the style attribute has a description width attribute in the description width again is the CSS width initial is a CSS keyword that just says do whatever you would normally do CSS like don't pay attention to any other people saying to make you a certain width etc and what CSS typically does for four boxes i have texas to size them to however big the text is and so setting the description with to initial is telling the browser make this as wide as you need for that particular text whatever the text is and so what happens here is i have a slider i've set the style attribute of this slider and in the style attribute it has an attribute called the description width and the description width i've said make that the CSS value initial which means use as much space as you want which means that the tire in the the whole width of the widget stays the same because we're opinionated still about the whole widget being i think 300 pixels wide we've reached in and we said description can be as wide as at once which means the rest of the widget sort of is crammed over on the side so you can pick your battles and and you know decide what you want of course you could say you know I want the layout to be more than 300 pixels I want it to be 400 pixels and so you can make the entire widget bigger if you want to compensate for the description being bigger if you'd like and so these are the trade-offs you have to decide as you're laying out your widgets style itself is a widget just like layout is you can for convenience specify it in the in the initial construction of who would with a dictionary or you can actually create a style widget but you can see here that let's give this a name so is my slider and here's the well I guess it doesn't here's the style and in particular I can set this description with to be again you know whatever 30 pixels and and then it automatically syncs that description with back and forth to the widget so it's sort of widgets all the way down you've got your insider widget and it has two sub widgets style widget and a layout widget each one of those has some properties layout which is about controlling the sort of overall size and dimension and look and feel of the widget and the style is very specific to the widget and lets you reach into different parts of the widget and control different properties of the of the particular widget and both of those have attributes that can sync back and forth and I can use the style like I can use the same style widget for all of my widgets and have the same description with for every one just like I can with layout okay questions about the style we'll see a few more style examples at the bottom of this worksheet alright so each box and V box H box for horizontal box V box for vertical box it's just a way of laying out your widgets so in this case I've set up an H box that has two V boxes and inside the V boxes I have the particular buttons that I'm making and so I end up with this just nice grid this is a very typical thing to sort of deconstruct your layout into H boxes and V boxes for long long vertical boxes up until seven point three which hasn't been released you know up until now H boxes and V boxes were sort of the best we could do if you're trying to arrange a grid there's a very powerful capabilities coming in seven point three don't let you get a real grid a 2d grid instead of just trying to match up you know sort of 1d H boxes inside of E boxes inside of H boxes let's see the label widget also does math of course the number formatting you when you when you have a readout field you can specify the readout format using a the Python format language okay so flexbox there's a bunch of text in here in it and essentially so this is this is this worksheet is essentially from the ipad widgets documentation it was taken from with permission from the complete guide for flexbox if you want to really try to understand this flexbox system for browsers for laying out things I read that guide here's just a brief overview that might get you started we'll just get down to the examples to get an idea and we'll talk through some of the things in the examples how many people have dealt with flexbox in the browser before okay great so let's do some examples so we can see okay so what's this doing I'm constructing some layout widgets here the width is auto so I the the button default is the certain number of pixels wide and I'm just gonna let it grow however wide the container is here and in this layout I'm gonna make it a flex layout it's gonna be a column so it means things are stacked on top of each other the line item stretch means I want everything inside the box to fill the box you know horizontally and the border swallowed the width is 50% so I'm trying to set the size of the box and then I'm saying everything in there should fill fill the size and and I end up with the buttons that that fill the size and you know the box is 50% of my width here I can have proportional sizing so this is a little bit more advanced use of the flexbox layout parameters essentially what's happening here is I'm trying to say these buttons should have different widths sort of weighted with respect to each other the bottom one is the easier one to see essentially what it's saying is this button think about each of these buttons as being zero sized and this button should have three times you know every time I'm trying to portion out space this button should have three times the amount of space that these do and so you end up with a button that's I think three times as big as these two buttons and you get that from this right here actually right clicked here's the weights right here the one three and one and again if you read the CSS inspector the flexbox layout guides you can get pretty complicated you can do some really cool stuff with it you can apportion sizes of things you can have things sort of naturally flow and layout next to each other here I'm saying on the bottom on the bottom rows I'm saying this middle buttons should be sort of three times the size of the other buttons a weight of three on the top row what's happening is this Auto means that each button has sort of a natural width and and so think about sort of the total space that I have each button has a natural width that's going to be automatically determined I think by the the text inside of it and then I'm going to take the space left over and take the space left over I'm gonna Porsche it out three times as much space to this guy is as to these two people so so basically you can think about flexbox is really about laying things out like they should be and then taking the space left over and apportioning it to the children according to this weights and the reason why it works so nicely in this case is we're explicitly saying each of these buttons is has takes up no with no width and so there's all the space left over and now apportion all of that space left over with a weight of 3 here and a weight of one to each of the side buttons this can get really complicated you know you could do a lot of powerful stuff with it read the the flexbox layout guide either either here this the summary of the article or or the original article and I think things will help out a little more here's a here's a bigger example in this example we are again saying I want to flex layout column so I want to stack things here's the boarder a line item stretched means just I want to fill things from the edge to the edge here so that's why these widgets aren't a specific width there they're all filling the entire box horizontally and here in that and what I'm doing is I'm as portioning a space in between anyway there's a lot of parameters here I don't wanna get too far into into the flexbox layout because it is really complicated spec but you can do some examples and we put some examples here to try to help you understand at least how to do some simple stuff here's something that does help you always here's one more example here I'm setting a row layout so instead of stacking them vertically we're stacking it horizontally and here I'm using a particular height and you know here's a particular width and so with this particular width for the box there's gonna be some scrollbar here so again lots of possibilities to lay things out here lots of control for each widget to say how how much space it should take up and the idea behind the Flex layout is you want to you want to layout that can be responsive to how wide the notebook is how short how small the notebook is how big your screen is etc and flex tries to give you an algorithm and give you parameters to naturally resize things to fit whatever space your that's available this is actually a really nice example this basically goes I mean trying to get the whole example onto basically one page this gives you a way to play with all the flexbox layout parameters and just get an idea of how that what the layout looks like here so for example you know I can set the Flex direction to be column and I can set the border and it's changing things in in in real time so here's the flex flow it was just how things were are being laid out it's column now and this particular example is giving you the actual code that you would need to write to get that particular layout so you can play with this quite a bit to try to understand better how the flexbox parameters are are affecting things very simply though we tried to make very opinionated choices with the stock default controls so that things will look nice without having to do a lot of the flexbox stretch and weights and all sorts of stuff that things look fairly nice just stacking them right on top of each other possibly changing the description whit's if you need to have a little bit more room for your descriptions so we try to be opinionated so it's very easy to come up with something that looks okay and then if you want to go deep this can go pretty deep alright styles so a button in particular has several different styles danger warning this just changes some values in the in those button styling you can and you can also set things from this specific style attribute and here's where I promised that we would come back and look at some of the Styles for some of the different widgets so we saw up above how basically any widget that has a description out to the left-hand side has a style parameter that tells you give lets you control the width of that description buttons have a button color parameter in their style attribute so you can change it to be whatever color you want and these are CSS colors so I guess you could do something like this you can get all the style attributes for a particular button or a particular control by doing that keys so we also have a font weight style attribute and we're adding these attributes as people sort of request them and want them we try to be somewhat judicious about using attributes that a lot of people will want but somebody said well we want the font weight attributes okay you know we'll add essentially the you know the ability to control the font weight inside the button it's a specific style attribute and again like we said above the style is as a widget it's a sub widget have your button widget in this case and so you can assign it to other buttons as well and sign it to other values as well and another style attribute that we have is the color of the slider handle and then I guess we have a list of all the style attributes you can run this oh right some nice person went through this is still brick some really nice person went through all of the widgets and all their names and figured out all the properties and made this nice tabular crosstab things so so here's all the attributes and here's all the widgets and the X's if that widget has that attribute and here's all the Styles the styles so well this is the these are still keys okay there's the style case yep so almost everything has a description with because we tried to have we tried to make every which I have a description attribute that you can that you can control all the sliders have a handle color so I mean these these come through inheritance so basically all the widgets that have a description inherit from the single based description widget class all the sliders inherit from something that has this handle color style so we have font weights and and and that's about it I guess right now okay questions about styles or layouts yes his wife Oh No you'll notice that the the where is it the button where it was the button styles here it is this actually came from bootstrap we originally were the widgets originally were written with bootstrap and we've moved away from bootstrap but for backwards compatibility we kept some of these these names and tried to mimic the bootstrap styles but but the short answer is no but there's still some effect from one who previously didn't have bootstrap styling other questions layouts and Stanley yes good question so the question was is this going in direction Erica and maybe if I can rephrase your question just a little bit would it be possible in the future to have a CSS file where each widget has a particular ID and your CSS file controls those controls those IDs okay so the answer is slightly different than the than what the question was asked the problem with using IDs is that you can only have one ID on a page at a time but you can have multiple widgets that are representing the same underlying model on the page at a time so IDs it's not the way to do that but classes is the way to do that and you can assign classes to a button or rich it to any widget let's take this button for example so you can assign add class and give it a class and now that button has that class applied to it and now if you want to separately put some CSS on the page that Styles things with that particular class you're more than welcome to so that's so that's the way you can sort of have an escape hatch to do whatever you want with the CSS styling and then you can reach down the the caveat with that is that the Dom structure of these widgets is explicitly not a public API and not something that we support as a stable API and so so if you're messing with things like inside the widget that's explicitly tied to the Dom structure of the widget then then it might break on an update that's why we have sort of a very constrained style property that lets you those that's the public API that we maintain going forward as a stable API but certainly you can add a class and you can put CSS on the page if you need an escape hatch did I answer your question yeah that's a good question again this is an escape hatch please don't do this unless you really need to like it's it's there you can do it yeah so if you were embedding widgets on a standard HTML page you have control over what CSS is on that HTML page so if you wanted to make like a dashboard or a web app you can put CSS on a page doing a percent HTML and then style blah blah blah blah be careful with that sort of thing because like in Jupiter lab you might have two notebooks open and if you're applying styling to an entire page you might be affecting the other notebook so you got to be careful with how you're putting styling on the page but there's there's some there's some ways to get styling on the page of Jupiter lab you could write an extension or put it in the theme or something like that in the classic notebook Oh interesting in the classic notebook you know you can also use the percent percent HTML to put some styling on the page I think you maybe have a presence CSS you can at least do a percent HTML to put some styling on the page your questions actually technically you could use an HTML widget to put styling on the page if you really wanted to if you wanted to keep it with just all the way down ok so I think there's there's some exercises for the widget layouts so I meant do you want to describe these and then we're going through the movie events right so within the next hour we'll have written a simple password generator this is actually more complicated than what's shown in this gif is is more complicated than what we're going to end up doing there are a series of exercises here which have you go through practicing some of these layout things so I think we'd set in 10 minutes for this you'll probably want to have the styling notebook open also and each of the exercise boxes I've tried to mark where it is that you need to change things so go ahead and start and raise your hands from your questions as our approach to this was rather than reading you the really long style document it made more sense to us to put together some exercises that would force you to digest it a little bit more so maybe take down the green things from your computer and then I put it back up when you're done and of course the orange thing is if you have a question so a lot of you may be confused that you're not seeing very much effect again flexbox is about taking the space left over and apportioning that out how you're asking to so if your width is constrained so that there's no space left over then you won't see much of a difference so if you want to see sort of how it's trying to space things out make your make your browser window wider etc to to really see how it's spacing things out okay we'll probably give it another minute we're running just a few minutes behind so so give it another minute or so ask for questions and then and then move on believe me you can spend months of your life tweaking layouts we've done it and I've seen many people do it all right let's move on we have solutions to all of those so you should be able to peek at the solution if you want to move forward faster or or keep trying if you want to probably remember the solution better we want to cover events though but first any any questions that came up from the layout stuff okay we have a question for you it sounds like a professor yeah yeah okay if you don't have a question for me I've got one for you so we could with some amount of effort modify that was it the styling demo widget where is that it's not in here anymore girls pretend that didn't happen so with some effort this could be turned into a widget where you so you've got your widget that you're defining we could change this so that you can attach that widget to these controls adjust the layout interactively and then copy and paste Python out at the top would that be help really helpful thumbs up or yeah whatever or don't bother okay so the people who are responding or saying yes I'd like that okay thanks thanks for participating in our user survey okay so let's move on to widget events so that was about setting up things and this is about actually imparting activity interaction to the widgets so I guess this is for Python too okay so there's a couple of different ways to add actions based on widget events the button is a little bit specific and and and different in this way you with a button you can do something when you click and you can do that by registering it on click handler here's the documentation for it essentially the the you register it by giving it the function and you can say remove equals true in order to actually remove the registration so here's an example so click me what you'll notice here is that you let me comment this out so that you can see what happens here here if I click me it appears that nothing's happening in the classic notebook you'll actually see the the stuff printed out this is one difference between the classic notebook and Jupiter lab in joopa and Jupiter lab we're a little more correct with how we do things and we insist that you capture any output inside of an output widget so here I'm displaying the button and the output would you can't see the output widget we can there now you can see the output widget and now as you click it the output widget is capturing the print that's happening in that button handler so that's that's how to get a function run when the button is clicked I'm an easier way to do this in both iPad would in both the classic notebook and in Jupiter lab is to use that decorator output dot capture there we go and this also works as well so you could register a function to be run whenever buttons clicked and if you want to print something then make sure you're capturing that output and an output widget for most of the widgets though it's not as a specific click function that you're registering most of the widgets what we have is anytime this particular value changes run this other function and so this is using the observe the observe function method of on a widget and basically the observed method takes a handler it takes a list of attributes that we're going to listen to and it takes an event type that we're going to listen to and right now there's basically one event type called the change event so the type right now is mainly for forward compatibility if we decide to have more different at different types of events but what we'll often use is the handler that's the actual function we're going to run when a value changes and then the names saying which attributes of a widget to listen to you so let's do an example so here what we're gonna do is we're creating an insider and an output widget we're capturing the print statement so we can actually see when this function is running and we're saying the nth slider we're gonna observe little bit kind of a maze here we're gonna observe this particular attribute of the insider and when this attribute changes we're going to call this function and so what you'll see here is as we change the value of the slider the function is called then the function is appending something to this output widget I'll point out that this is run if it changes on the front end but it also is run if it's changed on the back end and so if I change the value here the functions still run so as a as something observing the widget you can't tell whether or not the user clicked it or if it was programmatically changed but the idea is that all you care about is that the state of that widget changed the particular value that you're listening to changed and then you can react to those changes so observe your Handler and the attributes that you're actually listening to your handlers given this change object this change object has a couple of properties and it's listed in this documentation here other couple properties are the the type of notification the owner so you get a handle on the actual widget that was changing the old value the new value and the name of the attribute that changed and you can you can actually use the dictionary syntax or you can just do it like this to change new for convenience okay questions about how to hook up a handler to a change event okay oh yeah value is the attribute of this slider that I'm listening to so in this in this case the value is wherever the slider handle this I could listen to the max of the slider what's going on okay so here I'm listening to the max and if I change the value notice nothing happens but if I change the max you have you have some autocorrect on your computer if I change the max then the handlers triggered and you could just eliminate this and that would listen to any change on any attribute of that widget so so that's it sort of the the sledgehammer way of interacting to any change in the widget sometimes what you want to do is just synchronize widgets so like your handler is just setting the value of another widget to make sure that the values stay in sync and this is what the link does we saw the link before just real quick again the link function takes a widget and an attribute and another widget and it's attribute and it just registers basically change line lauren each widget saying when that value changes when that attribute changes set that set this attribute on this other widget and vice versa and so what's happening here is that these two sliders are synchronized now what's literally happening is slider one is changing in JavaScript its value is getting synced back to python colonel this link is seeing that value change and it's running in python to set the other values the other widgets value and then that other widgets value is getting synced back to javascript and then updating the slider so there's sort of a round-trip to the kernel happening here d link is a one directional link it says when the source attribute value changes set the target value to that to whatever the value was for the source attribute but it doesn't go that the the direction so in this case the source changes the target but the target doesn't change the source and when it's different then as soon as I change the source that handler runs in it sinks back up again you can unlink these things which just D registers to change notifications these are just convenience functions you could do this with registering to change notifications on a change in notification on each widget it's just convenient to be able to just say link make sure these two values stay the same all right so we have a bunch of attributes that are passed in to this change handler like the new and you can do a bunch of stuff with it so here I I'm changing the value here I'm not just linking the two values I'm actually doing some programmatic changing of this text value you know if the new is less than zero then set this other things value to be one string or another string and so I could be a little bit smarter about these change notifications I said before when you do a link it's actually a round-trip from the front end where you're interacting back to the Python side where actually the sync is happening and then the value sent back that's great and all but it's a little bit of latency to do that round-trip and if you end up putting his widgets on a web page without a kernel then you don't get that interact and you don't get that syncing and so we provided an different way of syncing these widgets the j/s link function basically syncs them in JavaScript so in this case as I change range one in JavaScript the range to slider is actually listening to the range one slider and values and so there's no round-trip to the kernel instead as I change range one range two in JavaScript is listening to it and it changes and then both independently sync back to the kernel and so the the syncing happened happens in JavaScript and the sync and then each independently communicate their their value back to the Python sign and jsd link is the same but directional linking to like the Python directional linking and you can unlink those as well and then we already talked about continuous updates so this is an example that illustrates the continuous updates for these first two I've said continuous update false for the second - I said continuous update true and then I linked everything together everything - aids value so you can see nothing updates as I change a because it's continuous update false so I said essentially it's not communicating its update until I let go of the slider and then everything updates and same thing here as I'm typing in the number nothing changes until I press Enter or move outside of the textbox and then the change is communicated as opposed to these where as I'm dragging the slider the change is communicated in real time or here see I'm chained the change is communicated in in real time okay so there's a short overview of how to hook up changes in widgets but really the the philosophy here is each widget has state the values of the attributes and you react to changes on those states and except for the button click where it's actually an action that you're reacting to almost always in the widgets the philosophy is you react to changes in the state of the widget get questions yes so yeah good question why do you not use the JavaScript way of linking why do you use link instead of always using JSI yeah Martin Avaya have had this conversation quite a bit sometimes in the implementation of the widget so for example when you have the Select drop-down what's actually synced over to the you have a bunch of convenience attributes that are on the Python side that aren't on the JavaScript side so when you have a drop-down and you select the value you have a dot value on the Python side but you don't have a dot value on the JavaScript side instead what Sam what happens in JavaScript is we just keep track of the actual index number and so so you can't do a j/s link for the value in a drop down yeah thank you for writing about that and other questions okay so we have another exercise about password generation and the caveat with all of these things is please don't use this as a real password generator we did use the Python secrets library but remember the syncing is happening in plain text between your kernel and your browser so don't actually use this as a password generator but it's a nice small constrained UI that you can build so question in this in our schedule we've got about these exercises will take about thirty minutes and then a break the food goes away at four o'clock so you could we could if you prefer we can take a break now okay well good well good and do break now this is your last chance for food with us did the afternoon and let's be back by 4:00 all right let's get started back up we are going to spend the next 15 minutes or so writing password generator as Jason indicated please don't go out and use that in the real world to generate your passwords so we want the password generator to look like this once we're done with it um the first step here tell you what I think in the interests of time yeah what so there's a bunch of widget libraries you want to show off here what I'd like to practice is some of the event stuff so rather than having you construct the widgets just go ahead and load the solution here to get right yeah right Susan the import with our imports I'll up at the very top you have to run and then uncomment the solutions to bad paths paths past 1 widgets or whatever it is so that you've got a widget that looks like this in the browser so it won't generate a password yet but we've got the controls in place so we've provided a function in the next cell here to calculate a password and it needs a couple things you need to do so the first is add a line at the end of the function that will set the value of the widget password text so the value will be calculated in the function put into the the put into the variable password and we want to use that to set the value of this of the password text widget which is the one up here okay so when we run this it doesn't do anything we haven't called the function yet okay so somebody remind me what I want to have happen is I drag the slider and the password value updates so if I wanted to do something in response to the slider changing which object do I start with the slider widget that the password widget which which one of those okay so I start with the slider which was called password length and then what method is I've got what is it that I want to do yep I want to observe the password length slider and when something happens I want to call my function calculate password and so now that's disappointing oh yeah I do have to give it a name don't I am that's a positional argument so you can you don't have to dis a name sequels you can just do the function comma names [Music] yes I am that's fun question let's take a look Simmons what I have word for word how about decorating fresh there might be some extra widgets that are not the widgets that are there etc okay there we go okay I have no idea what happened there I could see I change absolutely no code and just rerun the cells you define a widget you set up a function and then you read to find the widget like you've run the cell again and so now you've created a new widget but the function has a handle on the old widget and not the new into it and cm to redefine the function again too so that it's paying attention to the current global with it yeah so we haven't mentioned it yet but one of the most useful features of notebooks as we start and run all cells oh it's especially true with widget programming well but you were at the Jupiter lab tutorial this morning and so you know you can write your own keyboard shortcut for that okay so this was a except for the order of execution problem we had fairly easy to set up this straightforward password generator we're gonna do another run through with this and the idea with our next run-through is going to be it would be nice to start to separate a little bit the logic of generating the password from the widgets so you can imagine if we're making a real password generator you might want to test the password generator in an automated way not in a browser with a whole bunch of different possible settings right now the way we've written this you can because if you try to run the calculate password function it's going to expect there to be a password text widget somewhere that's been defined it has a value property so our next notebook is going to end up with exactly the same same widget now we're trying to separate out the logic from the rest of the widget and so we've written a function that just calculates a password given the length and so this you could put into an automated test or whatever you want to do with it right under the command line make sure it gives you the results you're expecting the GUI code so far is the same as what we had before so we've got the same controls again and now we'll write a function that updates the value of the password text whenever the password length is changed so we start at the bottom so when the password length is changed where that's what we're observing we're gonna call our update password function the update password function calls calculate password to get the new password and then sets that value and so once again we've got a password generator so the change for the last time the only change from the last time really is that the pastor calculation has been factored out into a separate function that you could have changed and test it whenever you want to with it the other nice thing is that way in I pi widgets 10 when there's some change to the Python API you don't have to update your password calculating part of the code I think I'm gonna skip the interact stuff actually in this case you could do the widget the way we have it just using interact so there's a third way to do this and there's a couple of new features in here that we haven't described yet that I want I want to make sure we had so this in this approach where you end up with the same password generators before we're gonna have one class that we define for the widget so that somebody could or for the graphical part of it so that somebody conceivably input the import that widget and use it like a box or a slider or whatever a separate class for handling the logic and then a class to bring the two of them together did I run yes I did okay so most of the code here is the same GUI code we had before it's just I'm putting it inside the init of a class I'm creating the helpful text and the password text and password length as attributes of the class and I'm sub-classing from widgets feed box so that everything will be laid out vertically so so far so good I can move the slider nothing happens yet it would be nice if this had a value so you can imagine that if you're using this past gen widget that were writing you'd like to be able to do past gen value because all the other widgets have values and so it'd be nice to pull out the value as a password you maybe don't want the user to be able to set a password and so in this next I'll have added a property for the values so that you can get the value out but you can't set it because I don't want the user to bypass my fancy password generator that's ultra secure by just setting their password to ABC or something so now I'm and this feels a little bit like overkill in this case I'm making a class to simply calculate the password and calculating the password it's just generating a random string there is one new thing in here a couple new things in here so where I'm going with this class is I want the class to have traits that I can link till the widget properties so that when I connect these two together I don't have to write function callbacks I'll take a trait from the logic class a trait from the GUI class and just link those together and then when one of them changes the other one gets updated without me having to do anything and so my password generator I'm in a subclass subclass from has traits which is from trait 'lets which is a class that provides the things that you link together and you define your traits here as help they have to be defines class up attributes not instant instance attributes and then I can observe for changes in the length and whenever that changes the length happens that this method gets called and oh I have to execute the cell so when I run that I get a generated password so in this first example I've had to just print the generated password to the screen in a moment we'll do that in a slightly different way so what we're gonna do instead is we're going to make a trade for holding the password so and and what the calculate password method will do is when length changes calculate password gets called calculate password finds a new password and saves it in this logic classes password field oops again have to run heads so if we do that and I set the length to 110 and print out the password I get 110 character password great unfortunately I can set a negative length password which is not so desirable I'm told from the security point of view and so one other thing you can do is validate the value of a trait and there's a decorator from trail it's for doing that so I want to validate the trait length and the way you do that is you define a method it doesn't matter what you call the method the method will get an argument proposal that's a dictionary that contains the new value you go through and put in whatever logic you want for deciding whether or not the trade is valid if it's not valid you raise an exception a particular type of exception otherwise you return the good value so in that binary star simulation that I showed you at the beginning for example you don't want a negative math star and now if we try setting a negative value we get a trade error okay so now we've got two pieces we've got a class for the graphical interface that we call pass genui we've got a class for the logic that we call pass gen logic and I'm going to make one more class to tie those together so all this sub classing from the GUI so this will behave like the password generator that we're interacting interacting with I make a instance of the model to hold my password and then all I'm doing to connect the model up to the widgets is a couple of links and so now when the password length slider changes here that will be linked to the model password length when the password length changes in the model that triggers the observe to update the password the password is updated in the model in this past gen logic class and that password is linked back to the GUI element in our widget and so right you have to execute the cell don't just talk about so so there we go so this last way of doing things is maybe a little bit easier if you're going to provide fairly extensive widgets where it's nice you got some complicated logic like modeling a binary start you have some complicated user interface you'd like to be able to test that interface without it what without worrying about testing logic at the same time and then tie them together in a straightforward way questions okay so are you what you're switching computers now so my name is Martin petals and [Music] is this large enough yeah perfect so what you saw until now were basically the basic widgets that come with I buy widgets but it's not just buttons and sliders it's a framework on which they're built using this framework you can build like new widgets on top of this and and that's actually how I got into I PI widgets I had a like visualization like library or a piece of JavaScript and you could push data to it but it was not like interactive it wouldn't send data back I wanted to have buttons sliders and you don't want to reinvent the wheel so I started like creating a widget library called iPad folium on there and demonstrators later and then it basically ties all together so you can put in the sliders etc so let me let me show some of that so if you want to build your own widget after this on the iPad widget website there's a tutorial there's a more in-depth tutorial this medium article and you can use cookie cutters to to set everything up so you don't have much boilerplate to worry about so let's start with big Q plot so big Q plot was developed at Bloomberg you can think of it as an interactive widget library for for visualization bridging d3 so many of the ideas are come from the grammar of graphics as you'll see now so there are actually two interfaces one that I really like which is that like the high level plotting interface which looks like matplotlib and a lower level which is a basically a library of all the widgets so just some imports and generating some data so we import the pie plot interface this looks like map la flip but instead of getting a static image you have an interactive visualization so you have line plots scatter plots and also this one it's interactive or histograms but every component is a widget so let's make a similar plot but now using the nothing high level but the lower level API so using the grammar of graphics you have to define what the scale is which basically translates from data to like visual properties could be coordinates or colors some data create lines axes and the figure which is build up which basically builds the whole figure you have this data set and line is a weighted sum line is this thing and if you modify the trades like with any widget it updates it so it's really like a live live plot same with the scatter plot and everything is animated and that's really useful if you want to see what the effect is of like changing a parameter and you see the data changing that's way more useful than then basically seeing the image suddenly changed so that can be really useful so also the XS which is a scale so let me go back so this is a linear scale so the minimum is not set so it's computed from the data but if we set it or set it to none again then it computes it from the data so every property can be changed so also the x axis if you change the label it's directly reflected in the in the plot so let's build let's go a bit quickly this plot where you can have a selector so this is really nice lecture where the height gives you the with in a location you say you want to select this region and because it's widget the the selections of what you selected get synchronized to the colonel so we can access this or maybe we need to cheat a little bit and say well this looks much better they're tools for well it could also be useful to draw sometimes a function like it's difficult to express in a function but you know how to draw it it's it's pretty easy and you can then access but I've drawn and input this into your model or whatever and some one of the examples we're going to move points around so this is a demo where you can take a point and move it and the line shows the meaning of this so you can you can use it for instance if you have a model so what's the influence of this particular data point on whatever you are computing so this is also pretty nice feature so another library built on on top of iPad which is called PI 3GS so it is a bit of a low-level library so PI 3j s basically is built on three J's which is a like a sing-off library for doing that GL rendering so let's let's make a rendering and as you see you need to set up a lot so you need to create a mesh camera a light a scene and a renderer and then you have any control to move this and again all of them are widgets so if we change something we can change them from the kernel change all the properties so this is a nice example of a surface where you can select points on this surface and this is using WebGL suits and the performance is really great and again you can change everything because it's a it's a widgets okay so using the same library 3GS but it's an iPad volume is also using three.js but I by volume is more like a plotting library so it's similar to the 3d plotting of MA plot lip so just import a Python numpy I buy widgets and it looks pretty similar to the PI plot interface of my plot lip so you create a figure a scatter and you show it and so now we have the interactive 3d plot so if you happen to own a Google cardboard you could even do like stereo rendering so you may be wondering okay but how do I get this on my phone so an iPad volume it's pretty easy to create a standalone HTML file so let's say you you created your like a nice plot you want to show to a colleague you want to bring this on your tablet you just save it to an HTML file yeah okay well trust me this usually works that's taken it's the standalone unit 70 kilobytes so it's not so large yeah so this is something you can render on your phone putting your Google cardboard and you can see it in in fear you can also do quaver plots so this shows the directional so if you have like a vector field you want to visualize let me make this a bit smaller and again because it's well that's basically the reason to implement it in AI pi widgets is we I don't have to create sliders because they're already built and I can easily link them together so if I want to link the size of the quiver to a slider it's just one line so now you can change these using sliders I have a color picker so you don't have to reinvent all the wheels just a few you have a nice link just a few lines of code so there's animation supporting I pie volume so that's all happening on the on the client so you just send a piece of data like a set of time series and what you see here what you saw probably before was the diplay widget so let's play this and if you look at this slider so the time step is pretty large but because everything is interpolated like every if you change something it takes the old value new failure interpolates it looks pretty smooth so these are just 14 time steps but it looks really smooth so you can get away with a really coarse time step so that your files also not become become too large if you want to show this on a tablet so everything's interpolated it's also the sizes and colors so this is the same but now for each point there's a color and a size so you see this wave this the sizes are changing the colors are changing and they're all interpolated yeah you can do it fullscreen as well okay doesn't want to exit okay let me stop this yeah so shortly on iPad leaflet Jason will say bit more about it so I buy leaflet this build on leaflet it's a it's a met weight in widget so interactive as well and of course you can again it's a widget so any property can be changed so you can change the zoom level using a slider if you prefer that or using this interface so Jason will say say a bit more about this so why I was interested in these libraries and build this new library which was the reason for that and I need to change to the classical notebook for this was the library I created called facts which is a library that gives you out of core data frames so it's a bit like pandas but for larger larger data sets and one of the things it does is visualization I wanted to these to be like interactive so what I have here is the New York taxi data set for 2015 so it contains the drop-off and the pickup locations for in this case hundred fifty million taxi trips 23 gigabytes so it's 23 gigabytes but it's using memory mapping so it doesn't matter how many times you open it etc basically does everything lazy and using I believe that you can overlay an image so what it does it every time you change so I'm basically observing the changes of the of the iPad leaflet map and average every time something changes I calculate like a density map do some coloring make an image and overlay this on top I'm using well I do not all that all only the data that's necessary yeah so this is a nice view of the the airport JFK Airport so let's take a darknet assimilation so this is 120 million rows so here you don't want to overlay it on a map so here I'm using a big Q plot and again each time you zoom in its way it's a little bit recompute so so the previous library which I showed you were like new I PI widget libraries built on top of iPad widget and this is a library that's using these components to build applications and one of the things why I built is 3d library was that we can now use in volume rendering display this huge data sets also in 3d so now you see it here in 3d so this is basically creating a density in 3d and visualizing that using volume rendering and and what you can now do is if you want to zoom in weights a little bit computes it you can zoom in to really large data sets and really go into the into the detail you wanna wanna get that so all this work was basically for the guide data set and that's 1.7 billion rows so and that works not on my laptop but on a computer and we had takes about half a second to to visualize all of that okay oh we can talk later yeah okay let's see if we can get this working what did I miss something okay so there's another library called iPad what and WebRTC which is a library that exposes the WebRTC capabilities of the browser and that's something that Google kind of pushed to get Google Hangouts into the browser but it also caused Edie I should have said a new API the media media stream API that kind of puts weight I should also do this from the classical notebook so if you read this using master bill no you have to use master and that's in this environment okay so you can have a let's skip the video use the camera twice so hi everybody and I pie folium can take a media stream which could be a camera or a video in this case twice the camera because I don't know why the video is and you can put this into high volume which is because the browser sits a powerful platform you can just like pass if anything for a texture and this happens to be like the camera which is a medium stream but also the canvas itself is a media stream so at some moment I was like does this work like can I do this yeah you can plot itself on itself it was like okay the browser is pretty nice platform so you can create these like really psychedelic thanks but what it's actually made for is video conferencing so let's try that out yeah these are connected over Wi-Fi using the web RTC they basically try to find find ways to to find each other okay and it's all this and again this this is a media stream this thing on the right so I I can also plot this on here and then you can like do crazy things as well and maybe you think oh man I need to record this so also the a media stream can be recorded so we can take this record this stop this let's see if it worked yeah so we can make this recording and download this etc and actually I did this to make like a to record a 180 degrees movie for so I'll give a talk on Friday yeah and I'll show you how I created like a 3d well not a 3d movie for displaying on an adult okay okay that's all I wanted to say do you want to continue yeah next I'll switch to Chrome cuz I can maximize better in Chrome okay so I just want to emphasize again everything you saw there was using I PI widgets to synchronize between the front end in the back end and the power of that so we were teaching you some tools for interacting with changes with I pi widgets for listening to changes to you know running your own stuff and affecting other things and you know setting values that would then be propagated to the front end etc and well it seems kind of like we're playing a little tiny sandbox you know with the you know I changing a slider and I set a value of a text box and stuff like that the real power like the real cool parts of this come when you have a library like BQ plot or I pay volume or PI through Jas or something like this where you have you know a graph and the selection is being communicated to the back end and you can listen to whenever that selection changes and when the selection changes you rend another model and you affect the 3d plot over here etc and so you can have these totally dynamic interfaces the the reference controls the sliders and text boxes and stuff like that are just really sort of pretty standard minimal reference controls for user interactions but IP volume and PQ plot and some of these other tools are really trying to push forward you know what's possible if you can interact with your data and have those interactions then spawn further calculations that then come back and are visualized in other ways etc and it's really exciting to see not just the the hi widgets sliders and checkboxes and things like that being used to design interfaces but to see each one of these tools that sort of is participating in a common framework to be used together so you have a slider that controls the PQ plot and the BQ plot so you can select and the beak plot and that controls the selection and a visualization in the 3d which then controls a map etc like everyone's participating in the same framework so each person sort of brings together a powerful platform makes a powerful platform okay so I just wanted to show real briefly some interesting things you can do in jupiter lab with AI pi widgets some of the capabilities of jupiter lab gives you and use as a demonstration platform the i pi leaflet library how many people work with geographic data seismology yes and USGS people etc okay so so so I'll show you some of the work that's been done recently Martin I think you've worked on this and Sylvan worked on this I worked on it and the other people that you've worked on it right I PI leaflet no okay you might work on it eventually okay and Sullivan's worked on it so a bunch of people have worked on this library and tried to push it forward the nice thing about this is that is that there's a ton of people investing a ton of time and expertise in designing nice libraries in JavaScript for the browser and what we're doing is we're we're building on top of those shoulders to just wrap they're nice 3d 3d libraries to wrap the nice you know WebGL or the the WebRTC API is to wrap the nice plotting libraries or the the geographic libraries and and just expose those to this sort of interactive computation platform that we have okay so let me open up this example again I'll make this a little bit bigger and collapse the sidebar okay so this is don't want to do that quite yet so this is a the iPad leaflet map that that Martin presented so one thing you can do is you know put the map right here and you're in your notebook and then as you do stuff with the map you know like zoom on it this was makes it interactive slider automatically okay that changed the map a little bit I can you know clear the layers so that sort of blank again I can add another another tile map on top of it I can you know print or whatever the current interactive state of this map is but you can see pretty soon I'm getting to the point where you know it's scrolling up and I'm trying to do interactive stuff to this this thing that's like living way up there and so it'd be nice if I could sort of pull that output out so that I can have it sitting over on the side while I interactively work with that particular output and Jupiter that makes this really easy users right click create new view for output and what this does is it copies this output to a new tab and it's exactly the same output it's exactly the same mod it's a new view for this for the model so it's like rendering that map in two different outputs except it's in a new tab instead so you can see as I change one the others automatically affected because they're both talking to the same model so the nice thing about this in Jupiter lab though is I can put it out beside it and then I can keep working here and you know as I work with it I add a marker so there's my marker that I added I can change the opacity using a slider etc and now I really have this interactive feel here I can pull it out keep it over to the side and start working with it kind of like you would do like a map pot lid plot if you were doing the interactive map pot lid plots or many other sort of workflows where I pull it off to the side and now you're gonna sort of work with that object all throughout your notebook so that's one way to do it to do this right click create new view for output another thing that Sylvan correlate recently did was to make a new widget called a sidecar widget so in Jupiter lab we have these side bars there's a left side bar the right sidebar you can't see it's nothing's in it but basically you took a output widget and instead of putting the output widget in the output area of a notebook is it threw it over to the sidebar and so as an example of this let's go back up here here's this import from this new sidecar widget so what i'm doing here is i'm creating a sidecar yep is that better okay so I'm creating a sidecar and giving it a title let's do that in one cell and what it does pop it over here on the right sidebar so this is very specific to the Jupiter lab interface and and this is an output widget so anything I could do with output widgets anything I can print or capture errors or whatever appear now and the right-hand side and I can clear the output it's it's literally just an output which it that ends up appearing over on the right-hand side and so let's see I already ran that line so I can make a slider and I can display that slider and it appears on the sidecar so this is similar to that create a new view for the output and have a tab I can move around but it just throws it over there I can create a new sidecar sidecar output too and it just appears on a tab over here so I can switch between the two alphabets here and here's another one with another slider etc so again this is a very nice easy way and it doesn't have to be sliders right I can it's a normal output widget so was SC print hi I could put any output I went down there let's see that went to this one right here so it's really an output widget I can log errors I can do whatever I want and it throws it over to the sidebar and then of course I can collapse the sidebar just by clicking on the tab there okay so this becomes really powerful again when I'm working with something like a map or an interactive widget where I have something some output that I want to keep on the screen as I work through the notebook and so for example here I'm gonna create this map put it over in the sidecar let's let's close some of these other sinaitic cards by clicking on the X's there's my mouth and notice the map actually resizes to be the full size of the sidecar and again I can interact and you see that it's changing the actual sidecar there are the layers add a layer I can get information from the map and if the person changes the map I can get the new information the new center the newsroom etc okay so now we're going to show you some things that you can do with the eye PI leaflet but in this nice framework where I have this map over on the side so I create a marker I can change the interact I can change the opacity just by programmatically changing the marked opacity or iPad leaflet has a nice feature where it's kind of like the interact feature in ipad widgets where it can automatically make a GUI for any particular attribute so here I'm making a GUI for the opacity attribute for this marker I can make a pop up so here's an HTML pop-up I'm gonna add it to the add it to that particular mark and now when I click on that mark nice little pop-up I got a cluster marker cluster so if there's a ton of markers on the map if there's a ton of markers on the map you know if there's too many markers it just gets overwhelming and so if you zoom out a lot it sort of combines markers into this sort of cluster object and then I can click on the cluster object and it zooms and lets me see the see the actual markers and I can pull those off the map let's see I can overlay an image hi python interactive computing this is i think essentially how the VEX works where you overlay a heat map for it okay here's a polyline okay so a polyline is a you know do some drawings that I'm doing on the map I could set the fill opacity etc I can take it back off the map so I can really sort of enter definitely work with this map programmatically work with this map notice here what I'm doing is I'm making a polygon for the bounds of the current map so then I can zoom out so I can see exactly what people are looking at and pull it off another example a rectangle it's Ramallah you can see the rectangle was at the balance of the map a circle here again I'm making an interact interactive control for this particular circle so let's zoom back in so there's my circle and I can change the weight change the opacity so you get the idea and I can query stuff from that circle there's a bigger idea associated with the circle I can pull it off I can look examine the map see what kind of layers I have on the map I look at the circle let's see circle marker so you did lots of lots of marks on the map I think you get that idea you do more than just programmatically put marks on the map though let's go to this example all right so let's pull this map off and let's get that sidecar code from over here okay so here's my map and here's my zoom level okay so what I want to do is I want to instead of programmatically add stuff to the map I want to actually draw on the map so I'm gonna add a draw control so you see I have a standard polygons lines etc and then as I draw on this map so yeah you know really want to investigate this or I wanted to somehow interact with this so there's a polygon and now this DC thing this draw control is a widget and I can hear you know see aquaria what the last action was and I can actually get the coordinates of that drawing point and I can listen to the drawing points as well so if you want to trigger something anytime somebody draws on the map you get the coordinates and you can do all sorts of analysis etc you can clear any sort of polygons or anything that's on the map you can draw you can you can synchronize the two things so here I'm drawing whatever I draw on the one map now I'm creating a new map and putting that same polygon on this map etc so again I have interactive controls for for geographic information and I'll show you one more yes question yes yeah good question good question I'm not sure but we can find out we can find out as in can I pick a specific longitude and latitude here without just like eyeballing it for mine that could good question since you can programmatically also do things you might be able to pick something and then translate that in Python like do that calculation in Python and then programmatically put the put the line or something that you want on the map like you have the full power of your Python libraries to be able to deal with this interaction but good question and let's let's let's let's hook you up with the people that understand the mapping part of this better than idea to see what's possible I'll just show one more cuz it's a pretty demo so this is adding a velocity map so here I have a map and let's go ahead and create a new view for this map so that we see it over to the side all right maybe down below alright and I'm just gonna open up a velocity field and woohoo insect I'll replace my notebook with that because it's so beautiful yeah so again I buy widgets edited a velocity map and and I gotta just stare at it memory mesmerised for a while so again the emphasis here is like when we say interactive controls and we talk about a framework for having user interaction automatically synced up to kernel side state and actions running triggered based on state changes there and reflected back to the user interface like really you know go wild and and you know let your dreams come true as far as like any sort of interaction we're talking about here not just sliders and text boxes or anything like that anything where it's interesting you have an interesting user interface where you can interact push those changes to python automatically do whatever computations you one triggered from those interactions and the push changes back to be visualized on the browser side okay questions all right what's next Matt oh yes right so next is what if you want to do this stuff outside of the notebook and we've got you covered here there are a couple notebooks you seen up here that are not in the repository they were stuff that we didn't know would be ready if it were ready to share or not we will get those uploaded later this week so so the basically comes back to the question you had for the for rendering it's rendering a notebook so they're actually two parts so let me go get back to this on the spot that I showed you before actually let me first do this to make sure that we don't have to so this is the same plot so I have here the defectors and the sliders what you can do in a classical notebook it's not yet in took the lab you go to widgets and bed widgets copy to clipboard so that's let me show this again so this is an HTML snippet that contains the whole state of is of the witches that you see copy that to clipboard paste this into an HTML file save it you have it here so I showed you programmatically an eye by volume you can do this but they're like ways to do this this way as well in the classical notebook and what you can also do if you do widgets save notebook widget state now the widget state is embedded in a notebook so you can already do this you upload this to say github and I just [Music] which is this one so you see github doesn't render this for security reasons but if you go to mb fewer and this is the URL of the notebook you see that it renders the notebook in but this does not have a back-end I'll connect it to it so the example that I showed you with the map with the taxi data this is really short what what's important is that in the end you have a Python script and it has a variable called map and that's the final widget that we're going to display so you if you use let me increase the font size no that doesn't work so if you still I PI widget server this is the module name and this is the widget variable name it starts up a special kind of Jupiter notebook like server that has a special kernel that cannot execute arbitrary code just that piece of code and show you the the widget so you go to local hosts and hope that it works yep and now the example that we had in a notebook you can have this in on a real server that's that's that's running and you can like of course change the HTML etc so just to show that are like ways to get get it out of the notebook so there's another project that I've started using a flask there's not as mature as this but if people are interested in that let me know so question yeah so you mean this so with this let me do another example import so now you have a let me close something which is server dot PI which is a Python module that can be imported if you're in the same directory widget underscore serve now you run iPad widget server the module name which in this case is widget server without the dot pi and then slider yes some exception apparently not so important then you can render any widget and this widget couldn't be an H box or a fee box it can be a whole user interface but now there's a connected kernel so it's really key you can execute Python code like basically what you have in a notebook but without the whole notebook interface and what's important is you cannot execute arbitrary code unless a special value of this will do RM minus RF still nice or something but you really have to do like actively make it execute code and that disk or not can't do it so it's pretty safe yeah so it may be that your administrators or the hardline and say no really that's a question so what in I buy widgets itself or Jupiter widgets I should shade like the front end code for all of this there as far as we know there's no way to execute arbitrary code so it's it we don't do like evil and like people can like put something in the text box so it should be pretty safe but good more question yes well I mean it's really nice actually that there that there's quite some competition between browsers so I think they're they're really like everybody's trying to catch up with each other and I think now Firefox has a lead I think that the main browsers are all like fine I didn't see at least from the performance point of view I didn't see any major major issues maybe you have some more to say about this yeah chrome works actually everything that I usually use Chrome for development and if I try it out on my phone it's I believe it's the same codebase so everything seems to work yeah at least on Android with chrome you know so about the dashboarding so there is and it's Thursday really this time okay there's a birds of a feather session on dashboarding so if you're interested in that one too like brainstorm feel free to join like used a lot in peace icon visualisations are they targets interactions and like fun chart so so the question was about like filtering and and if I understand correctly so you have a plot you do some selection here and how to show that so I think there's some work to be done on this so let me show I hope this works so does this work yeah so in iPad folium you can do like selections so now it's left at ease and [Music] let me show you so that actually gives you an array of the indices well it's actually a double rate as a bug is my development version but you can link this so let me continue so now I have the same so I have a 2d plot and a 3d plot with the same data okay I didn't import it is here for some reason and you can link here I do a d-link which is directional link so anything that's my selected in the scatter 3d get synced to the scatter the 2d scatter selected this one so in the d-link you also have a transform method that takes like this data set you could that's the advantage of the doing the linking also on the front end is that you can do a calculation with it so you can do some transformation so I converted to a list because BQ plot actually wants it to be a in this case and now I can do selections and these are synchronized between the two I think there's more work did this I think this needs to be we need to define like how to do this also in the front-end so it can all be done in the front-end so once you have like save this to a static HTML on your tablet you can do selections and it works and it doesn't have to go through a front-end and we also need to define okay like hovering picking so if I click on a particular value I also want to show it and if I hover over a particular point I also want to see it in all the other plots and also plotly just recently I'm not sure if they converted but they at least embraced widgets and they probably have their own way as well they put some energy into defining how to do this and it would be nice if all the libraries would like have some common API or our format to communicate this in the front-end yeah there's some work to be done on this but but it's already possible now I mean should be something in BQ Potter's option I think there's a hover handler and BQ plot I didn't show you okay we didn't show you the example in IPA leaflet that lets you catch the coordinates the mouse is hovering over and you can react to those like in real time they're sent back to the backend and I pay events is your escape hatch should we advertise this or not I don't know so so in January Matt and another person called kyuh kyuh decided that they wanted the full JavaScript interaction paradigm all JavaScript events available kind of like you know we let you set classes and that you could push whatever javascript or css you went over so Matt and kaya made a widget that lets you register a handler for any JavaScript event including including hover right Mouse events okay mouse move events you can hover over something in BQ plot and have it change and I think you get that value in the backend so it's certainly possible right any interaction paradigm you have in the front-end you could push to the back end question is you know how much do you want to push through the backend the back end stuff in some libraries let you do that like I've had leaflet I'm pretty sure if you plot and I think Matt's widget essentially allows you to tap into the Mouse events over anything over is it possible to get like okay that's gonna show you his escape axe here so it's not clear this is actually a good idea but I will say you have problems with the browser and key events and focus right the browser won't you you have to you have to worry about focus issues and when you're dealing with key events and events in general in the browser so so we're limited by whatever the browser allows obviously do you have an example why you know just in case this happened I made sure to load up this page and I'll upload this later let me write so this was originally written for the purpose of being able to mouse over an astronomical image zoom in and out of it get pixel locations off and transform those into positions on the sky in that kind of thing it hasn't worked out so well yet but so I made a novichok widget called the event widget and the event widget can watch for Dom events of browser events on another widget so in this example I've got a label that you will be able to interact with by clicking or pushing a key down or when the mouse enters the widget space and I've got a HTML widget to display the event info so if I mouse or this is awkward that's not working oh I didn't I didn't include that didn't install the lab extension let me flip it to classical there we go so when I click I described all of all of the events that the browser normally returns or all of the attributes that the browser do normally returns get returns as a Python dictionary back to Python you get different information for keypresses than you do for Mouse events that doesn't make any sense to have a pixel location for a mouse event for example ya keyboard event rather if you add a new view then if I press a key in that view I get the event set back to my widget and you and you update the value you get a list of the available events turns out for Mouse events there are several different versions of coordinates that can be returned I don't honestly understand all of them they were there why not return them it was harder to take them out I've got a link to to information about them you do need to be careful with this sort of stuff so you'd think okay I want to catch a double click event a double click event is a series of several events in the browser so you have to be a little bit careful what you're watching for cuz if you're watching for clicks and double clicks you're gonna get to click events and a double click for every double click today ya see there's some explanation of what the different types are so this is the one that really drives people crazy you can turn off default interactions so for example let me go back up here so one of the keyboard shortcuts in a jupiter notebook i'll just overwrite it is that if i push the a button it gives me a new style not anymore if you're over the widget it doesn't do that so that I felt that was necessary because you don't want to accidentally push didi over your over your widget that you interacting with it with and have it disappear because the notebook interpreted that keyboard a keyboard shortcut you can turn off some of the context menu stuff at least in classic notebook and Jupiter lab it doesn't work but and all right well maybe I'm is it it's about 5:25 anyway so well it's 5:00 to is 5:20 so we wanted to make sure we leave some time at the end for whatever questions you have or if you want to play with any of the stuff you see in the last hour 4 4 in the next 10 minutes and ask us questions you get to the point with this where the question is whether it's easier just to write the JavaScript and write a new widget and write the JavaScript to do what you want and and package that up versus trying to push all of your code from JavaScript over to Python to handle off your interaction yeah yeah if it's simple interactions like you want to be able to click on an image or you click on some widget in your interface and have something happen you do that this is useful it's turning out not to be that useful for an image browser if you're doing all of the calculation on Python and have to keep pushing images back and forth other questions yep got there okay so what yeah okay so there are updates coming iPad widget 7.3 is we held off on releasing so we didn't want to like destabilize everything for this week so a 7.3 is in pre-release right now and the one of the big things that has as a grid box control to lay things out in a grid but you asked about something specific a synchronous would just what do you mean by asynchronous widgets so you can there's various strategies for handling separate threads and widgets there's a notebook and the documentation for some patterns for handling separate threads with widgets we're in a sense fighting some issues with the with the notebook itself and dealing with threading and output and things like that but but those are avoidable hey we can overcome some of the issues that were fighting with there but you should be able to do some at least some of what you're thinking of right now I'm not sure if we're gonna be able to do the full aspect but I we keep my guess is we could do what you're describing right now and and check out the documentation for the asynchronous widgets documentation page release everything shift thread shape so you can change traits from any threat right its thread safe because we have a global interpreter lock in Python so everything starts safe there we're yes we're pure Python so we're good none particularly but we're interested in having conversations with whoever wants to talk to us about it more questions it looks like you got something working out well I mean yeah I copied the image file over so you click and you get the mouse coordinates of the click event back you can also get and you click again get those back as properties and it's possible to monitor the mouse me see if I have it open no I don't you can also monitor the mouse position and return that as you as you move also so so I think just to wrap up we have the birds of feather a session on Thursday for dashboarding and web apps we have several talks dealing with widgets like martin pointed out his talk on friday there's several other talks about widgets that you're welcome to come to will be around during the conference if we wanted to stop by and chat about widgets and another great time to get together is Jupiter Khan Jupiter Khan's August 21st through 25th in New York City and a lot of Jupiter people will be there and there's Sprint's this weekend if you want to work on widgets or you want to work on some project you know based on widgets or whatever work on your own projects and are you gonna be there so Matt will be here for the Sprint so is there anything else sorry we don't officially until 5:30 we'll be here till 5:30 but rather than trying to cram three more examples into into your brain in the next seven minutes we'll just stop now and if you want to play around with stuff and ask questions we're here if you want to ask when is dinner like that's a great question we can go or whatever yeah all right enjoy the conference you

Channel: Enthought

Views: 10,754

Keywords: python, Jupyter, Widgets, SciPy 2018

Id: NBZBjEjN-rU

Length: 183min 16sec (10996 seconds)

Published: Thu Jul 12 2018