title
Kivy Tutorial 2

description
Code & Transcript : https://goo.gl/iBjKjm Best Kivy Book : http://amzn.to/2duPAFD Support me on Patreon : https://www.patreon.com/derekbanas In part 2 of my Kivy tutorial series we'll explore much of what we need to know before we start making apps in the next video. We'll cover creating custom widgets, setting default attributes, and 6 layouts being : Absolute Positioning, Floating Layout, Grid Layout, Box Layout, Stack Layout, and Page Layout. If you missed any of the previous Python videos, the series starts here : https://www.youtube.com/playlist?list=PLGLfVvz_LVvTn3cK5e6LjhgGiSeVlIRwt Thank you to Patreon supports like the following for helping me make this video https://www.facebook.com/cottageindustriesbuild/ @kyleaisho @thetwistedhat vjFaLk

detail
{'title': 'Kivy Tutorial 2', 'heatmap': [{'end': 131.457, 'start': 98.125, 'weight': 0.751}, {'end': 397.038, 'start': 381.153, 'weight': 0.74}], 'summary': 'This kivy tutorial covers kiwi layouts, custom widgets, and button styling, demonstrating various layout techniques including grid layout, box layout, and ui design with detailed explanations and examples for windows and macintosh compatibility, achieving 70% and 50% space allocation for specific widgets, and increasing button sizes from 120 to 200.', 'chapters': [{'end': 136.958, 'segs': [{'end': 40.683, 'src': 'embed', 'start': 0.149, 'weight': 0, 'content': [{'end': 3.831, 'text': 'Well hello internet and welcome to part two of my Kiwi video tutorial.', 'start': 0.149, 'duration': 3.682}, {'end': 7.354, 'text': "In this part of the tutorial I'm going to show you five different Kiwi layouts.", 'start': 3.972, 'duration': 3.382}, {'end': 12.057, 'text': "I'm also going to create custom widgets and how to set default widget attributes.", 'start': 7.434, 'duration': 4.623}, {'end': 16.399, 'text': 'If you missed part one of this tutorial series, in which I showed you how to install everything.', 'start': 12.537, 'duration': 3.862}, {'end': 21.122, 'text': 'there is a link to that in the description, along with all the code from this video,', 'start': 16.399, 'duration': 4.723}, {'end': 28.267, 'text': "and everything in this video is going to work exactly the same on Windows as well as on Macintosh, and I have a lot to do, so let's get into it.", 'start': 21.122, 'duration': 7.145}, {'end': 33.058, 'text': "Alright. so here I am inside of PyCharm and we're going to import Kiwi,", 'start': 29.036, 'duration': 4.022}, {'end': 40.683, 'text': 'require this version of Kiwi and also get our Kiwi app methods and fields and everything else.', 'start': 33.058, 'duration': 7.625}], 'summary': 'Part two of kiwi video tutorial covers five layouts, custom widgets, and default attributes, applicable on windows and macintosh.', 'duration': 40.534, 'max_score': 0.149, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/j9PqNe3J_Cc/pics/j9PqNe3J_Cc149.jpg'}, {'end': 144.039, 'src': 'heatmap', 'start': 98.125, 'weight': 3, 'content': [{'end': 101.547, 'text': "just so that it's nice and easy to use.", 'start': 98.125, 'duration': 3.422}, {'end': 110.21, 'text': "and we're gonna custom widget app and then we are going to call for this guy to run and execute on our screen all, alright.", 'start': 101.547, 'duration': 8.663}, {'end': 111.931, 'text': "so that is all we're gonna need to do.", 'start': 110.21, 'duration': 1.721}, {'end': 118.913, 'text': "now we're gonna jump over into our Kiwi file and just so you can see here I have KiwiTut.py and CustomWidget.kv,", 'start': 111.931, 'duration': 6.982}, {'end': 122.734, 'text': "and now I'm gonna jump over into the KV file or Kiwi file.", 'start': 118.913, 'duration': 3.821}, {'end': 131.457, 'text': "alright. so what we're gonna do here is I'm gonna show you how to set default attributes that are gonna be shared by all of our widgets, and to do that,", 'start': 122.734, 'duration': 8.723}, {'end': 136.958, 'text': "i'm going to call this guy custom button and at button.", 'start': 131.457, 'duration': 5.501}, {'end': 144.039, 'text': "that's what we're going to be modeling everything after, and so this is going to be our own custom button here, and with this guy,", 'start': 136.958, 'duration': 7.081}], 'summary': 'Creating a custom widget app to set default attributes for shared widgets.', 'duration': 45.914, 'max_score': 98.125, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/j9PqNe3J_Cc/pics/j9PqNe3J_Cc98125.jpg'}], 'start': 0.149, 'title': 'Kiwi layouts & custom widgets', 'summary': 'Covers five kiwi layouts, custom widgets, and default widget attributes compatible with windows and macintosh.', 'chapters': [{'end': 136.958, 'start': 0.149, 'title': 'Kiwi layouts & custom widgets tutorial', 'summary': 'Covers five different kiwi layouts, creating custom widgets, and setting default widget attributes with everything being compatible with both windows and macintosh.', 'duration': 136.809, 'highlights': ['The tutorial demonstrates five different Kiwi layouts and how to create custom widgets, ensuring compatibility on both Windows and Macintosh systems.', 'Instructions are provided on setting default widget attributes that will be shared by all widgets.', 'The chapter also includes guidance on importing Kiwi, requiring a specific version, and obtaining Kiwi app methods and fields.', 'The tutorial showcases the process of creating a custom widget, tying it into the Kiwi file, and executing it on the screen.', 'The transcript details the steps of jumping into the Kiwi file and setting default attributes that will be shared by all the widgets.']}], 'duration': 136.809, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/j9PqNe3J_Cc/pics/j9PqNe3J_Cc149.jpg', 'highlights': ['The tutorial demonstrates five different Kiwi layouts and how to create custom widgets, ensuring compatibility on both Windows and Macintosh systems.', 'The chapter also includes guidance on importing Kiwi, requiring a specific version, and obtaining Kiwi app methods and fields.', 'The tutorial showcases the process of creating a custom widget, tying it into the Kiwi file, and executing it on the screen.', 'Instructions are provided on setting default widget attributes that will be shared by all widgets.', 'The transcript details the steps of jumping into the Kiwi file and setting default attributes that will be shared by all the widgets.']}, {'end': 260.25, 'segs': [{'end': 177.914, 'src': 'embed', 'start': 136.958, 'weight': 0, 'content': [{'end': 144.039, 'text': "that's what we're going to be modeling everything after, and so this is going to be our own custom button here, and with this guy,", 'start': 136.958, 'duration': 7.081}, {'end': 146.76, 'text': "you're going to be able to define a whole bunch of different things.", 'start': 144.039, 'duration': 2.721}, {'end': 150.701, 'text': "so one of the things is going to be your font size, so i'll make that 32.", 'start': 146.76, 'duration': 3.941}, {'end': 153.681, 'text': "you're then going to define the color.", 'start': 150.701, 'duration': 2.98}, {'end': 160.343, 'text': 'this is going to be the text color, and the numbers you put inside of here are going to be a percentage of 255..', 'start': 153.681, 'duration': 6.662}, {'end': 164.125, 'text': "That's the way RGB colors work.", 'start': 160.343, 'duration': 3.782}, {'end': 168.347, 'text': "Is it 0 to 255? So if it's 000, that means black.", 'start': 164.465, 'duration': 3.882}, {'end': 170.889, 'text': "And then you're going to have alpha here at the end.", 'start': 168.508, 'duration': 2.381}, {'end': 172.79, 'text': 'So these guys are going to be percentages.', 'start': 171.109, 'duration': 1.681}, {'end': 174.932, 'text': "So it's going to be 0 to 1.", 'start': 172.89, 'duration': 2.042}, {'end': 175.833, 'text': 'And then 1 would be 255.', 'start': 174.932, 'duration': 0.901}, {'end': 177.914, 'text': 'So hopefully that makes sense.', 'start': 175.833, 'duration': 2.081}], 'summary': 'Creating a custom button with font size 32 and defining text color using rgb values.', 'duration': 40.956, 'max_score': 136.958, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/j9PqNe3J_Cc/pics/j9PqNe3J_Cc136958.jpg'}, {'end': 252.882, 'src': 'embed', 'start': 222.792, 'weight': 1, 'content': [{'end': 225.573, 'text': 'And what I did was I just got a gray button.', 'start': 222.792, 'duration': 2.781}, {'end': 226.434, 'text': "Here, I'll show it to you.", 'start': 225.714, 'duration': 0.72}, {'end': 227.354, 'text': 'This guy right here.', 'start': 226.654, 'duration': 0.7}, {'end': 229.075, 'text': 'Background down color.', 'start': 227.855, 'duration': 1.22}, {'end': 230.856, 'text': "So it's just a gray color.", 'start': 229.335, 'duration': 1.521}, {'end': 231.616, 'text': "That's all it is.", 'start': 230.916, 'duration': 0.7}, {'end': 235.478, 'text': "And I'm going to use that as the background whenever the button is in the down position.", 'start': 231.876, 'duration': 3.602}, {'end': 239.28, 'text': "So I'm just going to paste that inside of there just to make sure I get that name right.", 'start': 235.698, 'duration': 3.582}, {'end': 245.795, 'text': "And then, on top of that, what you're going to be able to do is set the background color for both the.", 'start': 239.568, 'duration': 6.227}, {'end': 249.278, 'text': "well, it's going to be just for this background normal part right here.", 'start': 245.795, 'duration': 3.483}, {'end': 252.882, 'text': "And like I said, it's going to be a percentage of 255.", 'start': 249.579, 'duration': 3.303}], 'summary': 'Using a gray button with a background color of 255.', 'duration': 30.09, 'max_score': 222.792, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/j9PqNe3J_Cc/pics/j9PqNe3J_Cc222792.jpg'}], 'start': 136.958, 'title': 'Custom button styling', 'summary': 'Explains how to create a custom button with customizable features including font size, text color, background color, and size using percentage and pixel measurements, and file-based backgrounds.', 'chapters': [{'end': 260.25, 'start': 136.958, 'title': 'Custom button styling', 'summary': 'Explains how to create a custom button with customizable features such as defining font size, text color, background color, and size, using percentage and pixel measurements, and including file-based backgrounds.', 'duration': 123.292, 'highlights': ['The chapter explains how to define font size, text color, and background color for a custom button, using percentage of 255 and pixel measurements for size.', 'It details the process of setting the background color for normal and down states of the button, including the option to use a file-based background.', 'The explanation includes the use of RGB colors with percentages of 255 and alpha values within the range of 0 to 1.']}], 'duration': 123.292, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/j9PqNe3J_Cc/pics/j9PqNe3J_Cc136958.jpg', 'highlights': ['The chapter explains how to define font size, text color, and background color for a custom button, using percentage of 255 and pixel measurements for size.', 'It details the process of setting the background color for normal and down states of the button, including the option to use a file-based background.', 'The explanation includes the use of RGB colors with percentages of 255 and alpha values within the range of 0 to 1.']}, {'end': 381.153, 'segs': [{'end': 287.748, 'src': 'embed', 'start': 260.523, 'weight': 0, 'content': [{'end': 263.786, 'text': "And then I'm going to define my custom widget area.", 'start': 260.523, 'duration': 3.263}, {'end': 267.189, 'text': "And then inside of here, we're going to use our custom buttons.", 'start': 264.006, 'duration': 3.183}, {'end': 271.613, 'text': 'So previously, we would put button inside of here and then define the button.', 'start': 267.269, 'duration': 4.344}, {'end': 277.379, 'text': "Now we're going to use our custom button with all of these attributes that we have set up inside of here.", 'start': 271.894, 'duration': 5.485}, {'end': 284.765, 'text': "So I'm going to come in and define text like we did previously, and I'm just going to say something like random,", 'start': 277.839, 'duration': 6.926}, {'end': 287.748, 'text': "and then I'm going to position this guy.", 'start': 284.765, 'duration': 2.983}], 'summary': 'Creating a custom widget area and using custom buttons with defined attributes.', 'duration': 27.225, 'max_score': 260.523, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/j9PqNe3J_Cc/pics/j9PqNe3J_Cc260523.jpg'}, {'end': 367.146, 'src': 'embed', 'start': 341.35, 'weight': 1, 'content': [{'end': 345.655, 'text': "And let's just come in for this custom button and just call it buttons.", 'start': 341.35, 'duration': 4.305}, {'end': 346.276, 'text': "I don't know.", 'start': 345.875, 'duration': 0.401}, {'end': 350.338, 'text': "You're also going to be able to go and use root Y.", 'start': 346.536, 'duration': 3.802}, {'end': 355.621, 'text': "So let's put this 200 from the left side of the screen and then have this be root Y.", 'start': 350.338, 'duration': 5.283}, {'end': 359.603, 'text': 'And then the more common, this is going to be absolute positioning.', 'start': 355.621, 'duration': 3.982}, {'end': 360.943, 'text': 'This is another layout.', 'start': 359.683, 'duration': 1.26}, {'end': 364.505, 'text': "And actually, I said there's going to be five layout options in this tutorial.", 'start': 361.063, 'duration': 3.442}, {'end': 365.625, 'text': "There's actually going to be six.", 'start': 364.545, 'duration': 1.08}, {'end': 367.146, 'text': 'So I just figured that out.', 'start': 366.126, 'duration': 1.02}], 'summary': 'Tutorial covers six layout options, including absolute positioning.', 'duration': 25.796, 'max_score': 341.35, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/j9PqNe3J_Cc/pics/j9PqNe3J_Cc341350.jpg'}], 'start': 260.523, 'title': 'Custom widget area and button positioning', 'summary': 'Explains defining a custom widget area and positioning custom buttons using exact coordinates in a kiwi program, with six layout options mentioned.', 'chapters': [{'end': 381.153, 'start': 260.523, 'title': 'Custom widget area and button positioning', 'summary': 'Explains how to define a custom widget area and position custom buttons using exact positioning in a kiwi program, with a total of six layout options being mentioned.', 'duration': 120.63, 'highlights': ['The chapter explains how to define a custom widget area and position custom buttons using exact positioning in a Kiwi program It covers the process of defining a custom widget area and positioning custom buttons using exact positioning in a Kiwi program.', 'There are a total of six layout options mentioned in the tutorial The tutorial initially mentions five layout options but later corrects it to six layout options.']}], 'duration': 120.63, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/j9PqNe3J_Cc/pics/j9PqNe3J_Cc260523.jpg', 'highlights': ['The chapter explains how to define a custom widget area and position custom buttons using exact positioning in a Kiwi program.', 'There are a total of six layout options mentioned in the tutorial.']}, {'end': 651.414, 'segs': [{'end': 404.52, 'src': 'heatmap', 'start': 381.153, 'weight': 0.74, 'content': [{'end': 388.496, 'text': "and then, inside of the terminal, if you're on mac, you're going to call for this to execute, And what I do made a little bit of an error.", 'start': 381.153, 'duration': 7.343}, {'end': 389.417, 'text': "Let's fix that.", 'start': 388.536, 'duration': 0.881}, {'end': 394.518, 'text': 'Okay, so I changed this to CustButton and CustButton and CustButton and CustButton.', 'start': 389.857, 'duration': 4.661}, {'end': 396.178, 'text': 'And I indented everything properly.', 'start': 394.678, 'duration': 1.5}, {'end': 397.038, 'text': "And let's save it.", 'start': 396.278, 'duration': 0.76}, {'end': 399.039, 'text': "And let's call this guy to run over here.", 'start': 397.278, 'duration': 1.761}, {'end': 404.52, 'text': 'And there you can see how we went and positioned all those different buttons inside of our window.', 'start': 399.259, 'duration': 5.261}], 'summary': 'Terminal executed code to position multiple buttons in a window.', 'duration': 23.367, 'max_score': 381.153, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/j9PqNe3J_Cc/pics/j9PqNe3J_Cc381153.jpg'}, {'end': 426.095, 'src': 'embed', 'start': 399.259, 'weight': 0, 'content': [{'end': 404.52, 'text': 'And there you can see how we went and positioned all those different buttons inside of our window.', 'start': 399.259, 'duration': 5.261}, {'end': 408.961, 'text': 'And that is how we would use exact positioning inside of Kiwi.', 'start': 404.74, 'duration': 4.221}, {'end': 412.502, 'text': "So now I'm going to jump over and show you a floating layout.", 'start': 409.181, 'duration': 3.321}, {'end': 416.312, 'text': "So we're going to come in here and we're just going to change a couple little things.", 'start': 413.191, 'duration': 3.121}, {'end': 421.654, 'text': "I'm just going to change this to float layout and import float layout.", 'start': 416.852, 'duration': 4.802}, {'end': 426.095, 'text': "We're going to get rid of this this time and just use one class just to keep it nice and simple.", 'start': 421.854, 'duration': 4.241}], 'summary': 'Demonstrating exact positioning and floating layout in kiwi', 'duration': 26.836, 'max_score': 399.259, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/j9PqNe3J_Cc/pics/j9PqNe3J_Cc399259.jpg'}, {'end': 495.677, 'src': 'embed', 'start': 467.148, 'weight': 1, 'content': [{'end': 476.076, 'text': "and to this I'm going to add size hint, and size hint is going to define the widget width again from 0 to 1,", 'start': 467.148, 'duration': 8.928}, {'end': 481.241, 'text': "and that's going to represent a percentage of 100% of the height of the window.", 'start': 476.076, 'duration': 5.165}, {'end': 484.824, 'text': "so I'm going to say that I want this to be 40% and I want it to be 30%.", 'start': 481.241, 'duration': 3.583}, {'end': 495.677, 'text': 'so this is going to be 40% of the total Width of the available window and this is going to be 30% of the total height for our window.', 'start': 484.824, 'duration': 10.853}], 'summary': 'Using size hint to define widget width as 40% and height as 30%.', 'duration': 28.529, 'max_score': 467.148, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/j9PqNe3J_Cc/pics/j9PqNe3J_Cc467148.jpg'}, {'end': 547.784, 'src': 'embed', 'start': 517.975, 'weight': 2, 'content': [{'end': 522.177, 'text': "So I'm going to call this top left and then I'm going to call positioning here.", 'start': 517.975, 'duration': 4.202}, {'end': 526.458, 'text': 'So instead of position, this is going to be position hint.', 'start': 522.517, 'duration': 3.941}, {'end': 535.395, 'text': 'And position hint is going to represent the position using either x, y, left, right, top, bottom, center, center x or center y.', 'start': 527.009, 'duration': 8.386}, {'end': 537.937, 'text': "And I'm going to demonstrate every single one of those.", 'start': 535.395, 'duration': 2.542}, {'end': 547.784, 'text': "So if I want to have this be in the top left corner, I'm going to say that x is going to be 0.", 'start': 538.357, 'duration': 9.427}], 'summary': 'Demonstrating position hint options using x, y coordinates.', 'duration': 29.809, 'max_score': 517.975, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/j9PqNe3J_Cc/pics/j9PqNe3J_Cc517975.jpg'}], 'start': 381.153, 'title': 'Kiwi layouts and positioning', 'summary': 'Demonstrates using exact positioning and floating layout inside of kiwi, including positioning and sizing objects as a percentage of the window size and positioning buttons in different corners and the center of the screen using kiwi layout.', 'chapters': [{'end': 495.677, 'start': 381.153, 'title': 'Kiwi layouts and positioning', 'summary': 'Demonstrates how to use exact positioning and floating layout inside of kiwi, including positioning and sizing objects as a percentage of the window size, with an example of defining widget width and height as a percentage of the available window.', 'duration': 114.524, 'highlights': ['The chapter demonstrates how to use exact positioning and floating layout inside of Kiwi, including positioning and sizing objects as a percentage of the window size.', 'An example of defining widget width and height as a percentage of the available window is provided, with the width set to 40% and the height set to 30%.']}, {'end': 651.414, 'start': 495.938, 'title': 'Positioning buttons in kiwi layout', 'summary': 'Demonstrates how to position buttons in different corners as well as the center of the screen using kiwi layout, with examples of using position hint attributes like x, y, left, right, top, bottom, center, center x, and center y.', 'duration': 155.476, 'highlights': ['Demonstrating different position hint attributes The chapter demonstrates how to use position hint attributes like x, y, left, right, top, bottom, center, center x, and center y to position buttons in different corners as well as the center of the screen.', 'Creating custom buttons and positioning them The chapter explains how to create and position custom buttons in Kiwi layout, with examples of placing buttons in top left, bottom left, top right, bottom left, and center of the screen.', 'Usage of Kiwi layout for mixing and matching different layouts The chapter mentions the common practice in Kiwi layout of mixing and matching different layouts for positioning elements on the screen.']}], 'duration': 270.261, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/j9PqNe3J_Cc/pics/j9PqNe3J_Cc381153.jpg', 'highlights': ['Demonstrates using exact positioning and floating layout inside of Kiwi, including positioning and sizing objects as a percentage of the window size.', 'An example of defining widget width and height as a percentage of the available window is provided, with the width set to 40% and the height set to 30%.', 'Demonstrates how to use position hint attributes like x, y, left, right, top, bottom, center, center x, and center y to position buttons in different corners as well as the center of the screen.', 'Explains how to create and position custom buttons in Kiwi layout, with examples of placing buttons in top left, bottom left, top right, bottom left, and center of the screen.', 'Mentions the common practice in Kiwi layout of mixing and matching different layouts for positioning elements on the screen.']}, {'end': 827.379, 'segs': [{'end': 734.433, 'src': 'embed', 'start': 711.024, 'weight': 0, 'content': [{'end': 720.086, 'text': "And then inside of here what we're going to do is a grid is going to basically put different widgets in a table format.", 'start': 711.024, 'duration': 9.062}, {'end': 722.867, 'text': "that's going to have rows and columns inside of it.", 'start': 720.086, 'duration': 2.781}, {'end': 726.729, 'text': "So let's go columns and say that we want two of those.", 'start': 723.187, 'duration': 3.542}, {'end': 729.791, 'text': "Let's say rows and say we want two of those.", 'start': 726.809, 'duration': 2.982}, {'end': 734.433, 'text': 'Spacing is going to be the spacing between the widgets.', 'start': 730.311, 'duration': 4.122}], 'summary': 'Creating a grid with 2 columns and 2 rows for widget placement.', 'duration': 23.409, 'max_score': 711.024, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/j9PqNe3J_Cc/pics/j9PqNe3J_Cc711024.jpg'}, {'end': 829.94, 'src': 'embed', 'start': 805.056, 'weight': 1, 'content': [{'end': 811.647, 'text': 'and you can see right here how we said here we want the first button to be 200 in width,', 'start': 805.056, 'duration': 6.591}, {'end': 821.798, 'text': "and then automatically the second button that goes inside of there is going to take up the other 80 percent or whatever the other available space that's available inside of there,", 'start': 811.647, 'duration': 10.151}, {'end': 827.379, 'text': 'and we did that also for the third and the fourth, and we can play around with that, use percentages to divide that up,', 'start': 821.798, 'duration': 5.581}, {'end': 829.94, 'text': 'and that is how we use a grid layout.', 'start': 827.379, 'duration': 2.561}], 'summary': 'Utilized grid layout to allocate 200px and 80% widths for buttons, demonstrating flexibility with percentages.', 'duration': 24.884, 'max_score': 805.056, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/j9PqNe3J_Cc/pics/j9PqNe3J_Cc805056.jpg'}], 'start': 651.414, 'title': 'Using grid layout to position widgets', 'summary': 'Explains using a grid layout to position widgets in a table format with rows and columns, creating a simple grid with four buttons and defining their widths and available space.', 'chapters': [{'end': 827.379, 'start': 651.414, 'title': 'Using grid layout to position widgets', 'summary': 'Explains using a grid layout to position widgets in a table format with rows and columns, creating a simple grid with four buttons and defining their widths and available space.', 'duration': 175.965, 'highlights': ['The chapter explains using a grid layout to position widgets in a table format with rows and columns, creating a simple grid with four buttons and defining their widths and available space.', 'The tutorial demonstrates creating a grid layout app and utilizing grid to put different widgets in a table format with rows and columns, specifying spacing and padding.', 'It also showcases defining the width of buttons and automatically allocating available space, using percentages to divide the space.']}], 'duration': 175.965, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/j9PqNe3J_Cc/pics/j9PqNe3J_Cc651414.jpg', 'highlights': ['The tutorial demonstrates creating a grid layout app and utilizing grid to put different widgets in a table format with rows and columns, specifying spacing and padding.', 'It also showcases defining the width of buttons and automatically allocating available space, using percentages to divide the space.', 'The chapter explains using a grid layout to position widgets in a table format with rows and columns, creating a simple grid with four buttons and defining their widths and available space.']}, {'end': 978.24, 'segs': [{'end': 869.792, 'src': 'embed', 'start': 846.868, 'weight': 2, 'content': [{'end': 853.972, 'text': "And basically with a box layout, we're going to arrange widgets in a horizontal or a vertical box.", 'start': 846.868, 'duration': 7.104}, {'end': 857.075, 'text': "So everything's basically going to be the same.", 'start': 854.453, 'duration': 2.622}, {'end': 858.676, 'text': 'Just going to change that to that.', 'start': 857.195, 'duration': 1.481}, {'end': 862.858, 'text': "Let's call this BL app and call this BL app.", 'start': 858.716, 'duration': 4.142}, {'end': 866.481, 'text': "And we'll call this one box layout app.", 'start': 863.399, 'duration': 3.082}, {'end': 869.792, 'text': "keep it nice and simple, and that's all we're going to do there.", 'start': 867.25, 'duration': 2.542}], 'summary': 'Arranging widgets in a horizontal or vertical box layout for bl app.', 'duration': 22.924, 'max_score': 846.868, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/j9PqNe3J_Cc/pics/j9PqNe3J_Cc846868.jpg'}, {'end': 942.762, 'src': 'embed', 'start': 912.276, 'weight': 1, 'content': [{'end': 913.556, 'text': "that's perfectly fine.", 'start': 912.276, 'duration': 1.28}, {'end': 917.038, 'text': "here we're going to define size hint,", 'start': 913.556, 'duration': 3.482}, {'end': 929.009, 'text': 'And size hint is going to define the percentage of space taken on the x-axis and the percentage of space left over by our other widgets that we have on our screen.', 'start': 917.538, 'duration': 11.471}, {'end': 935.335, 'text': "So I'm going to have this be 7, 70%, and then the next one I'm going to have it be 0.5.", 'start': 929.029, 'duration': 6.306}, {'end': 940.48, 'text': "Of course you're going to have to play around with that to figure out what works best for your specific design.", 'start': 935.335, 'duration': 5.145}, {'end': 942.762, 'text': "Here I'm just going to leave this be second.", 'start': 940.86, 'duration': 1.902}], 'summary': 'Defining size hint to take 70% space on x-axis.', 'duration': 30.486, 'max_score': 912.276, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/j9PqNe3J_Cc/pics/j9PqNe3J_Cc912276.jpg'}, {'end': 983.404, 'src': 'embed', 'start': 954.653, 'weight': 0, 'content': [{'end': 956.134, 'text': 'You should have told me about that.', 'start': 954.653, 'duration': 1.481}, {'end': 958.365, 'text': "And we'll save that and run it.", 'start': 956.764, 'duration': 1.601}, {'end': 960.847, 'text': 'And there you can see exactly how that works out.', 'start': 958.786, 'duration': 2.061}, {'end': 963.869, 'text': "Let's open up the Akibi file here though and check it out.", 'start': 960.867, 'duration': 3.002}, {'end': 978.24, 'text': 'And there you can see here that I said that I want this to take up 70% of the available space and then 50% of the space that would be allocated if we were equally dividing between these three widgets.', 'start': 964.15, 'duration': 14.09}, {'end': 980.041, 'text': 'And you can see exactly how that works.', 'start': 978.34, 'duration': 1.701}, {'end': 983.404, 'text': 'And there is the basics of the box layout.', 'start': 980.422, 'duration': 2.982}], 'summary': 'Demonstrating layout allocation: 70% and 50%.', 'duration': 28.751, 'max_score': 954.653, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/j9PqNe3J_Cc/pics/j9PqNe3J_Cc954653.jpg'}], 'start': 827.379, 'title': 'Box layout', 'summary': 'Introduces the basics of using a box layout to arrange widgets in a horizontal or vertical box, with a demonstration of defining orientation, spacing, padding, and size hint, achieving 70% and 50% space allocation for specific widgets.', 'chapters': [{'end': 978.24, 'start': 827.379, 'title': 'Introduction to box layout', 'summary': 'Introduces the basics of using a box layout to arrange widgets in a horizontal or vertical box, with a demonstration of defining orientation, spacing, padding, and size hint, achieving 70% and 50% space allocation for specific widgets.', 'duration': 150.861, 'highlights': ['The chapter introduces the basics of using a box layout to arrange widgets in a horizontal or vertical box.', 'A demonstration of defining orientation, spacing, padding, and size hint is provided.', 'Achieving 70% and 50% space allocation for specific widgets is showcased.']}], 'duration': 150.861, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/j9PqNe3J_Cc/pics/j9PqNe3J_Cc827379.jpg', 'highlights': ['Achieving 70% and 50% space allocation for specific widgets is showcased.', 'A demonstration of defining orientation, spacing, padding, and size hint is provided.', 'The chapter introduces the basics of using a box layout to arrange widgets in a horizontal or vertical box.']}, {'end': 1239.038, 'segs': [{'end': 1050.793, 'src': 'embed', 'start': 1022.292, 'weight': 2, 'content': [{'end': 1026.992, 'text': 'Orientation in this situation is going to be a whole bunch of different things.', 'start': 1022.292, 'duration': 4.7}, {'end': 1032.155, 'text': "What I'm going to say is I want the orientation to be left to right whenever it's laying out the widgets.", 'start': 1027.374, 'duration': 4.781}, {'end': 1034.108, 'text': 'and then top to bottom.', 'start': 1032.627, 'duration': 1.481}, {'end': 1041.73, 'text': "It's also going to be possible for you to say top to bottom, left to right, right to left, top to bottom, top to bottom, right to left, left to right,", 'start': 1034.348, 'duration': 7.382}, {'end': 1044.371, 'text': 'bottom to top and so forth and so on.', 'start': 1041.73, 'duration': 2.641}, {'end': 1050.793, 'text': 'If you want to see all the different options I have, like I said in the description underneath the video, you can take a look at all those.', 'start': 1044.391, 'duration': 6.402}], 'summary': 'Orientation of widgets can be left to right and top to bottom, with various options available.', 'duration': 28.501, 'max_score': 1022.292, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/j9PqNe3J_Cc/pics/j9PqNe3J_Cc1022292.jpg'}, {'end': 1164.879, 'src': 'embed', 'start': 1125.577, 'weight': 0, 'content': [{'end': 1126.437, 'text': 'Changes there.', 'start': 1125.577, 'duration': 0.86}, {'end': 1127.477, 'text': 'And run it.', 'start': 1126.897, 'duration': 0.58}, {'end': 1130.818, 'text': 'And there you can see how they were stretching out on the screen.', 'start': 1127.818, 'duration': 3}, {'end': 1139.323, 'text': "And you can also see, as the window is resized, that it's automatically going to fill the available space and then move everything left to right,", 'start': 1130.998, 'duration': 8.325}, {'end': 1141.985, 'text': 'top to bottom, until everything is on the screen.', 'start': 1139.323, 'duration': 2.662}, {'end': 1146.649, 'text': "Okay, so that's a nice take on how to use the stack layout.", 'start': 1142.365, 'duration': 4.284}, {'end': 1149.931, 'text': "And now I'm going to show you something pretty cool, which is called the page layout.", 'start': 1146.789, 'duration': 3.142}, {'end': 1159.098, 'text': "Now our page layout is used to create multi-page layouts that you're actually going to be able to flip through back and forth between all the different options.", 'start': 1149.991, 'duration': 9.107}, {'end': 1164.879, 'text': 'and of course this is going to be page layouts and page layouts,', 'start': 1159.498, 'duration': 5.381}], 'summary': 'Demonstration of stack layout and multi-page layouts for flexible screen resizing and navigation.', 'duration': 39.302, 'max_score': 1125.577, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/j9PqNe3J_Cc/pics/j9PqNe3J_Cc1125577.jpg'}], 'start': 978.34, 'title': 'Ui layout and design', 'summary': 'Covers stack layout, widget orientation, and page layouts, highlighting the arrangement of widgets, orientation options, and increasing button sizes from 120 to 200. it also includes a tutorial on stack and page layouts for creating multi-page ui designs.', 'chapters': [{'end': 1021.912, 'start': 978.34, 'title': 'Understanding stack layout in ui design', 'summary': 'Introduces the stack layout, explaining how it arranges widgets vertically or horizontally as they best fit onto the screen, and demonstrates the process of implementing stack layout in a ui design.', 'duration': 43.572, 'highlights': ['The stack layout arranges widgets vertically or horizontally as they best fit onto the screen.', 'The chapter demonstrates the process of implementing stack layout in a UI design.', 'The basics of the box layout is briefly mentioned as a foundation for understanding the stack layout.']}, {'end': 1125.477, 'start': 1022.292, 'title': 'Widget orientation and sizing', 'summary': 'Discusses different orientation options for laying out widgets, demonstrating how they work and affect each other, and showcases increasing button sizes from 120 to 200, each taking up 20 more space than the previous.', 'duration': 103.185, 'highlights': ['The chapter demonstrates various orientation options for laying out widgets, including left to right, top to bottom, right to left, and bottom to top.', 'It showcases the increasing button sizes from 120 to 200, each taking up 20 more space than the previous, providing a clear understanding of how they affect each other.', 'The description underneath the video provides all the different orientation options available for reference.', 'The orientation is set to be left to right when laying out the widgets, followed by top to bottom, providing a clear structure for the demonstration.', 'The chapter sets the spacing and padding to be equal to 10 for the demonstration of widget orientation and sizing.']}, {'end': 1239.038, 'start': 1125.577, 'title': 'Stack and page layouts tutorial', 'summary': 'Demonstrates the use of stack layout to automatically fill available space and move elements left to right, top to bottom, followed by a demonstration of page layout for creating multi-page layouts, allowing flipping through different options and usage of buttons.', 'duration': 113.461, 'highlights': ['The stack layout automatically fills available space and moves elements left to right, top to bottom as the window is resized, showcasing a practical approach to using the stack layout.', 'The demonstration of page layout includes the creation of multi-page layouts that can be navigated back and forth, showcasing the usage of buttons and the ability to click and drag to explore different elements within the layout.', 'The tutorial concludes by hinting at the upcoming development of real-world apps and encourages audience engagement through questions and comments.']}], 'duration': 260.698, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/j9PqNe3J_Cc/pics/j9PqNe3J_Cc978340.jpg', 'highlights': ['The demonstration of page layout includes the creation of multi-page layouts that can be navigated back and forth, showcasing the usage of buttons and the ability to click and drag to explore different elements within the layout.', 'The stack layout automatically fills available space and moves elements left to right, top to bottom as the window is resized, showcasing a practical approach to using the stack layout.', 'The chapter demonstrates various orientation options for laying out widgets, including left to right, top to bottom, right to left, and bottom to top.']}], 'highlights': ['The tutorial demonstrates creating a grid layout app and utilizing grid to put different widgets in a table format with rows and columns, specifying spacing and padding.', 'The demonstration of page layout includes the creation of multi-page layouts that can be navigated back and forth, showcasing the usage of buttons and the ability to click and drag to explore different elements within the layout.', 'The stack layout automatically fills available space and moves elements left to right, top to bottom as the window is resized, showcasing a practical approach to using the stack layout.', 'The chapter demonstrates various orientation options for laying out widgets, including left to right, top to bottom, right to left, and bottom to top.', 'The chapter explains how to define a custom widget area and position custom buttons using exact positioning in a Kiwi program.', 'The tutorial demonstrates five different Kiwi layouts and how to create custom widgets, ensuring compatibility on both Windows and Macintosh systems.', 'The chapter also includes guidance on importing Kiwi, requiring a specific version, and obtaining Kiwi app methods and fields.', 'The tutorial showcases the process of creating a custom widget, tying it into the Kiwi file, and executing it on the screen.', 'Instructions are provided on setting default widget attributes that will be shared by all widgets.', 'The transcript details the steps of jumping into the Kiwi file and setting default attributes that will be shared by all the widgets.', 'Demonstrates using exact positioning and floating layout inside of Kiwi, including positioning and sizing objects as a percentage of the window size.', 'An example of defining widget width and height as a percentage of the available window is provided, with the width set to 40% and the height set to 30%.', 'Demonstrates how to use position hint attributes like x, y, left, right, top, bottom, center, center x, and center y to position buttons in different corners as well as the center of the screen.', 'Explains how to create and position custom buttons in Kiwi layout, with examples of placing buttons in top left, bottom left, top right, bottom left, and center of the screen.', 'Mentions the common practice in Kiwi layout of mixing and matching different layouts for positioning elements on the screen.', 'Achieving 70% and 50% space allocation for specific widgets is showcased.', 'A demonstration of defining orientation, spacing, padding, and size hint is provided.', 'The chapter introduces the basics of using a box layout to arrange widgets in a horizontal or vertical box.', 'The chapter explains how to define font size, text color, and background color for a custom button, using percentage of 255 and pixel measurements for size.', 'It details the process of setting the background color for normal and down states of the button, including the option to use a file-based background.', 'The explanation includes the use of RGB colors with percentages of 255 and alpha values within the range of 0 to 1.', 'The tutorial demonstrates using a grid layout to position widgets in a table format with rows and columns, creating a simple grid with four buttons and defining their widths and available space.']}