 Good here we clicked go Live yeah, we're shows as live on YouTube. We should be good there Okay, so here we go. Let me put the chats back on top and then we are ready to jump in So hello to everyone. Good afternoon. Good evening. Happy Friday. My name is Tim This is the deep dive program. This is a weekly live stream program where we are working on things related to circuit Python Sometimes in the circuit Python core last week. We were working on a bug in the core of display Oh, sometimes work on libraries or infrastructure or projects or other associated things. Oh Talking it's not what we want. Well, we want but we don't want to be talking to where we can hear it during the deep dive Weekly live stream we're working on circuit Python stuff If you're brand new to this or if you're catching the VOD and you don't know what that is This is the main website for the project circuit Python org Basically, this is an implementation of Python that runs on tiny computers called microcontrollers And it allows you to essentially run Python code on These little computers there are little there are excuse me There are pictures of them over here on the downloads page So there's lots of different ones of these microcontrollers They come in many different shapes and sizes and capabilities And the thing that ties together all of the 413 ones that are on the downloads page here is that they all support circuit Python So with all of these devices you can load circuit Python onto it And then you'll be able to connect it to your computer modify a code pie file on there And then the chip on the device here will execute the Python code that you put inside of it In particular today, I will be working mostly with this device which is a feather RP2040 DVI output and it technically has a plug that is Looks like HDMI or whatever you can plug an HDMI cable into it and most TVs and stuff I guess that support HDMI will allow this to output to it. It's not a full HD You know, it's not 1080p or anything like that But it is an HDMI plug you can plug an HDMI cable into it and get it to display Onto a screen. So that's the device that we are working with today But like I said back on that downloads page There are a number of different devices that all support circuit Python and all of them come with different Capabilities, so this is the only one I'm aware of with the HDMI Port on it, but there are lots of different other devices with different kinds of displays be it LCDs or e-Inks or LED matrices so on and so forth Plus a whole plethora of devices without displays and different capabilities instead How's it going? DJ Devon as well as ping pin penguin and pingoo. Excuse me pin pingoo So if you like I said circuit python org, I think I said CircuitPython.org if you want to learn more, this is a good place to do it The other thing you could do if you want to learn more is join us over on the discord Which is linked down below a da fru.it slash discord on the Adafruit discord. There is a Circuit Python channel for development as well as a help with circuit Python channel as well as many other channels unrelated to circuit Python if you'd like to come join us there you can Introduce yourself get involved say hi ask for help, you know, whatever you want to do You can Over on the discord you can join us there to do that if you're interested in circuit Python or anything surrounding it Circuit Python is an open-source project. Anyone is allowed to use it. Anyone is allowed to port it to their own microcontrollers You don't have to like pay a licensing fee to add support to circuit Python for your device You don't have to do anything like that Third-party manufacturers are allowed to add support to their own devices So, you know devices that are made completely outside of Adafruit are allowed to support circuit Python No one has to pay anyone for it Adafruit is the company though that is paying the developers who are actually working on circuit Python project So there's a team of folks who work on the project full-time There are other folks like me who work on the project part-time in Adafruit does pay us To do that. So huge. Thank you to Adafruit Of course for making that possible and making circuit Python a reality and a thing that we can all play with and enjoy And then of course thank you to anybody who wants to head over to adafruit.com and purchase hardware from there By buying hardware from them. You are of course helping them keep the whole machine running Which is helping them be able to pay the folks working on circuit Python. So thank you to everybody for that. I Am jumping straight in today today's topic As the title says we are going to be doing essentially a bunch of display IO Example scripts, but I figured since it is the month of June, which is kind of like a pride month celebrated throughout Different portions of the US and worldwide. I believe I figured it instead of just picking random display IO Examples why don't I make something that has meaning and is Contemporaneous so the thing that made a lot of sense was the different pride flags. There are lots of different pride flags with lots of different meanings They are Oftentimes made from relatively basic shapes. This does not hold true across the board. There is one with an axe on it There is one with some lipstick a heart, which is arguably a basic shape, but a little bit more complex a pie Symbol so some of these are a little bit more challenging than others in terms of like actually making the graphics for them But lots of them are relatively basic and I thought they would serve as a good sample set to make examples from so that's what we're going to be doing and a Little bit different than normal. I'm not just trying to make one thing and then be done with it The the whole idea today is going to actually be to try to bust out as many of these as I can in as many Different ways as I can so we'll even be making the same flag multiple times in multiple different ways in some cases You know, obviously we wouldn't need to do that for a real project But the point here is to gather the example code that shows all these different possible ways to do stuff as well As of course to highlight the flags themselves So eventually once this is done, I'll push this into a repo if anybody else is interested in adding more flags to it I'd be happy to have pull requests and stuff like that to add new examples or new flags or anything like that. So I Am going to jump right in with one of the I think easier ones. I think we'll start with the Sort of plain six-stripe rainbow flag This one is one of the ones that should not have too much in the way of Difficult graphics to draw and there's a bunch of different ways we can do this Pico DVI and display. Oh, yeah. Yep. Yep. So. Oh, yeah, let me show how we're outputting So what I have is the oops, I should not have done that. Okay. Here we go. Yep. I have the RP 2040 feather and I have it hooked up through a USB HDMI Input adapter thing. So we have this window here And this window is the HDMI that is coming out of that DVI feather So this is where we'll see the output, but of course we could plug this straight into a display And it would show up there as well DVI and circuit Python is so good. Yeah, this is actually my first time playing with it I've seen a bunch of the cool examples and stuff. I Missed out on the first batch of the the DVI feathers I didn't get I didn't get mine in the first batch, but they came back in stock at some point. I ordered it It came in I think a couple of weeks back And I had not cracked the package yet So I got that out got it hooked up made sure it would do this and I figured this would be a fun way to Play with that device. So the First one I'm gonna go is like super low hanging fruit We're actually gonna show it with the image right because circuit Python can display images This is perhaps one of the most easiest ways that we could do this But seems like a good place to start so we can of course take our image We'll want to do a little bit of formatting on it We want to get it to the right shape and the right size and the right format In our case we have what we have We have 320 by 240 and Then it's gonna get doubled after that, but we don't need to worry about the doubling We just need to make our canvas 320 by 240. Let's double-check that as well. I do have this open with to we can do import board We can do board Display Yeah, all right 320 by 240 perfect. So we can scale this Which we do with the scale tool which is that of this one I Will see what our aspect ratio is here. So we got 320 by 198 so our aspect ratio is not exact Due to the nature of the design we could probably cheat a little bit If we want it to be you know quote-unquote full-screen for what we've got we could probably just Do this is that gonna make the in-betweens a little messed up? It did kind of you know what? I'll tell you what I'm gonna go back in a undo Okay, I have already done now. I'm actually gonna then go Mode indexed we're gonna put an index mode first How many colors do we have just six? Yeah, okay, there we go. So we have six colors now. I'm gonna scale it while it's an index mode And I think this one will not have the Weird in-between pixels Yeah, we keep our perfectly solid Cuts there nice. Okay, so take that copy that paste it again. So now we have 320 by 240 It is gonna be indexed which we need to do again, and then we need to go export We will save it as a BMP I'll just start. I'll start a folder for this stuff. I guess so let's go repos circuit python new folder ride flags and Then this is six Stripe rainbow We're gonna say BMP instead of PNG Alpha will be ignored no problem good stuff export that Back over here. We should have now We refresh maybe oh did I put it? I don't think I put it in device workspace I should have let's go copy that into device workspace Let me catch up over here as well actually I'm a little behind. Oh, I can't just move that. Can I or it's gonna change the sorry about that Let's my chat not updating. Is that the discord chat is not updating is it? After the DVI there's very little RAM. Yeah, that is true. It's pretty limited on RAM You can't get a DVI feather the Pimeroni Pico DVI base is also very good using with OBS overlay Yeah, for sure Our thing seems kind of cursed Python MCU DVI and MCU a dedicated hardware Yeah, I would agree. I would agree with that the fact that it can actually output this kind of signal is pretty amazing I caught up myself on the discord, but it seems as though It's like it's better now. I don't know if the If the chat stops scrolling Somebody if you would just let me know like say something in the discord and I've got it open So I can see it, but if it stops updating in the stream, let me know It looked like it did that a minute ago. So I'm gonna take this and put it inside of here that way. It's like right in our Workspace here. Okay. Now we can take that we can just drop it on circuit pi Should we maybe let's make a folder? Flags, I don't know We may not end up with very many of these files like this because we are gonna do the some more of these with code instead of With the actual image assets obviously because the image assets are pretty straightforward All right, so for the image one we do want display. Oh, what else are we gonna want board? You're gonna want board. Do we need anything else? I think That might be it. Let's try it. So let's go display equals board.display Let's go Uh, we need to make a group. So I'll say main group equals group, which is from display.io We don't we don't need multiple groups actually one group and then we can go let's say So down here, we know we're gonna have a while loop Right before that, we know we're gonna want to go display.show main group Here we can use let's do on disk bitmap for the first one on disk. Uh, let's call it um flag bmp equals on disk Bitmap that's gonna be display.io This takes what? file Which is flags That one And then the pixel shader I think it's put on that. So we need a tile grid as well flag tile grid I'm just gonna go tg bitmap is our on disk and then pixel shader is That Main group that's we are then gonna go append that flag into there. It's updating again Not using root group. Oh, yeah. Thank you. Actually. I Just a bad habit essentially You would think I would not have that habit Having done the work to change it in the core, but okay one thing that is a little bit awkward to get used to is we need to uh We essentially have our Terminal in a different window than what like like my instinct is to click in here and then press control c and that will Do me no good Nice. All right six stripe uh six stripe flag rainbow flag down. So what i'm gonna start doing is Uh saving off each one of these So i'll call this code six stripe Rainbow and then we'll say a little tiny bit about how we did it. So this one was on disk bitmap on disk Bitmap and then we'll just keep building these up Close some of this stuff out for now It's like f strings. Yeah, that's a good point. I will say f strings I have finally made it to the point where my Instinct is to use f strings and I am much happier for it. I Now that I've started using them regularly. I actually really like f strings. So maybe this will be the same way. Maybe I'll Throw more accustomed to this Okay, so that one was pretty easy. Obviously, we have the actual image asset itself Which makes it super duper easy. We could do another one if we wanted to we could do like an image load Instead of a on disk bitmap Um, which we may come back around and do one like that But I think i'm going to move on to some other ways next Some other ways to render it I'm going to go transgender flag next. I'm going to copy this Put it over into gimp so that we can get some colors Because I do not know the colors off the top of my head like the hex values and such, right? Oh, and then I'll double check as well to make sure that that's white I'm just going to start here and say pink blue Oops, I accidentally clicked. I think this copy Wish there was like one click copy that'd be convenient Getting used to them and actually prefer them with the f strings as well. Yeah Yeah, I find myself using f strings a lot now outside of circuit python and stuff as well in my regular work My other work I should say. Ah, excellent. I always want to double click and then it's like I click in this Okay, yeah, definitely plain white there. Okay, so let's do I put an oh Instead of a zero. Let's fix that. Oh, I should mention also if anybody who's watching wants to work along If anybody wants to create any of these pride flags with display. Oh If you ping me in discord and you put your chat in there I'd be happy to run it on the device if anybody does make one of these And wants to see the result of it up on the stream here. I'd be happy to do that um If we were to scale this down so that we can get the right size I'm going to do our index trick again. We're going to call that indexed first then we're going to scale it Down to 320 by 240 Copy it. Okay, so it's split into five. So that's 240. Uh, what would be 240 divided by five? 48 so it should be 48 pixels tall each one of these Nice. Okay. So for this one, we're going to make Uh rectangles that are 48 inches uh front 48 inches 48 pixels tall by uh 320 pixels wide I quite like os.getm feels More like a pc thing declaring to buy specific invariables. I think I missed the one above this Let's see started porting apis o to settings.toml nice, which will be another change Set of secrets pie. Yeah, that's a good point as well I will say I have jumped the boat on that one as well too I am now to the point where my instinct is always settings.toml set of secrets pie Like I even started a project for work for my other work outside circuit python This project happens to involve circuit python though And I did uh straight from the jump went with settings.toml on that So for this we have a couple of different ways we can make shapes. I'm going to use vector io first So we will want to have a rectangle ultimately five rectangles I'm gonna Get rid of Do we need the tile grid? I always forget No, okay. No tile grid. We just append the vector io shape right into the group. So let's Get rid of flag and tile grid remember we have this code saved off so we can always obviously refer back to it Um rectangle Go bigger for now rectangle vector io. Let's import that Whoops We need a palette oops We're gonna say zero is Hey, this could be real variables Might as well, right? I think okay, so width is uh, I'll say the full display dot width We won't even bother hard coding this that way if you ran this on a different device Maybe it could still work Uh, in fact, we could we could do the height as well. Um display dot height over five zero This one will be zero zero. All right. Let's uh, let's call this top row top row Top stripe. Let's call it top stripe. All right. Let's make sure that that actually works Sort of yes, the color looks a little off and I'm not sure if that's like Sure that is what that's about I accidentally messed this up Oops Well, first of all the top stripe is supposed to be blue also. So aside from I mean to my eye, it looks orange I don't know if that's like I don't know what that is I don't know if we actually have orange if I need a different setting if I miscopied it I don't know. Well, does that have the palette? Okay palette is set here You know, we actually need three palettes not one Well, do you I think you can give it an index now, right? Can you give it an index? Color index Let's try that Color Index zero Okay, it is on zero, but it is supposed to be blue. Uh, the other thing that it could be is The way that I have selected it In obs which unfortunately, I'm a little bit scared to mess with if I'm honest I don't know if that changed anything. I'm a I'm pretty scared to mess with the obs settings Uh, so we might be having slightly funky colors that come back on this Um, but I think that this is like in my obs capturing not the fact that the device is outputting differently Put that down there. Okay. Okay. We could of course do like four loops or Like there's a lot of ways we could do this Other than just hard coding these but I'm gonna kind of go In order of just like simplest to more complex. So hard coding is definitely simplest Uh, I'll call them next maybe top top middle That one will actually be Pink and then the only other difference is going to be the x y They put the x y's on their own line here just so that it's easier To edit the height and width are going to be the same on all of these Uh, the x is going to be the same. The y is going to change to be, um The same as the one before it or is it one more? Actually, no, actually going to be the same as the height basically But eventually also just get multiplied. Okay, we did not add it to the group yet Oops, it definitely looks orange I think that that is my obs color scheme or something This one is just middle For this we can take that and then multiply by Two Is white which we put as color index two Little Finally found the wi-fi reliability issues with pi portal version model So i'm commencing the shift to sitting stumble nice And web workflow Oh, you know what it is Uh, i'm being silly. It is my computer actually like, uh No, that didn't change it really I don't know this thing is weird though. I don't really trust that it turns on and off all the time Anyway, it looks like a I think it's like a red tent. I think it's probably I mean it's yellowish in the white, but I think that that is Either the obs settings or my actual My computer doing some change to the display after the fact We'll call that bottom middle That one is going to be back to pink It'll be times an extra one here Web workflow makes the bring up very quick in situ tweaks risky But convenient the hdmi capture dongle is in ycbr I was just looking in the uh Things I have tried a few of them. I don't think they make That's it does say Oh, no This feels like playing with fire nice I mean we could play around with this and eventually get it looking right, but I suspect that's probably not the best solution truthfully So it does look a little closer. I'll leave it on for now I'll have to play with it. I don't want to mess too much with it. I'm like Definitely afraid of uh I'm definitely afraid of messing with obs while it's on It are it are I don't know if that came through on the stream, but it already gave me like a four-stop pop up luckily it's uh Managed to not actually crash, but I suspect you're right though um Something about the setting of the color input Probably is off It's interesting. It didn't really look any different on the other one, but I guess the colors were so vibrant back to Your own Index nice. No, I have done that wrong Blue should be on bottom It should be here Yeah, obviously our color is still off a little bit But definitely we got the design right and then if we fix the bgr or whatever I imagine it would probably come out, correct uiv This is rgb of vgr emulated to like reset Turn the filter off Okay, I gotta stop Oh, no Yeah, I don't know. I will have to mess with it later It's a little unfortunate. It doesn't come out the correct color Especially when obviously the flags the color is very important and specifically chosen Uh, I should have probably tested a little bit more Before I started but we're gonna persevere on forgive me that the color is a little bit off We will copy this one out Like my obs just tried to force stop on me again. I really don't want to keep Pushing it. I'm not trying to dvi board to hd my capture yet. I was yeah I uh, the other thing is I would not be shocked if this is not actually like updating the colors Like I bet you if I just stop and restart obs now that I've selected bgr and that thing it might actually just work, but I obviously can't Stop and restart obs And though it just tried to force stop itself again over there Okay, fingers crossed. We're gonna go officially fingers crossed Uh, let's say right now if we do crack if the stream does crash out I'll try to start it back up. Uh, obviously as quick as I can just a heads up Um, let's copy this one out Okay Do another one with white in it. We'll still be able to see it, but it's different other colors So this is non-binary flag. This one is also four rectangles Uh, we could more or less do it the same way that we did on the last one But where would be the fun in that we want to change it up some so on this one We oops. Let me save. Let me put a name on this one actually before we Next one code. Uh, this is the transgender And we did it with a vector IO non-binary, so I am gonna keep going with the get into first Let's try this actually. Let's try um, let's try this one with on this bitmap as well real fast and see Because this will have white in it as well. This will help us tell if it's On the device or not the color like It makes any sense. We want to get to indexed So that we can then scale it by 240 Next try to save it Because I copied it because I made that other one Yeah, I mean even the white there is a little off-looking. Okay. Yeah, so it's definitely on the input side Okay, I'll save this one off, but obviously this one I think doesn't really count, right? We already did the uh on this bitmap It doesn't count as a different example. I should say but okay, and then uh, we'll remake the same flag But we'll do it with a different methodology. Let's do on this one. Um We could do display shapes. I think is probably the next The next one so this is very similar to vector IO You could probably argue that these are not really two different ways In my mind they are because vector IO is like fundamentally drawing shapes differently Then display shapes is Um, but they do serve essentially the same purpose and they have very very similar api Not that much of a functional difference. There are a few small functional differences, but not that much I will do rects tangles again. We could uh, we could also do polygon Um, which there's a polygon for vector IO as well. I think but I'll start with rect again. So this one it can actually be pretty darn It can actually be pretty darn similar to this. I'm actually going to start with this one Grab rect from there That like that Uh, we don't really need the palette in the same way, but I do want to grab the colors because we will need to put them in Oops All right, our yellow is this This white Let's make sure that it's solid white and then I the black will probably need because I think it's definitely not solid black doesn't look like two nines So yellow white, uh, purple and then black yellow white purple and then black And then we won't be doing these vector IO instead. It will be rect The api is a little bit different. It takes a color for fill. So we'll say Fill I will use the colors So the first one is yellow Width that will be divided by four this time color index that one doesn't exist Okay, let's try that by itself and make sure that it works No module display shapes No problemo. We just go Cirque up install and check for perfect color Stream compression I think it's not the stream because it shows the different colors on my screen as well even before it is Going out on the stream. So it shouldn't be compressed where I'm looking at it. I don't think Okay, I think he's not defined That's fair. I would say that's fair Nice, okay up middle He will not have a middle will have Bottom middle and bottom All right, so it goes, uh, what was it yellow white purple black And then that is going to be all fours, but the y will need to be changed Okay, first of all, it should I don't know if I copied that nice Okay, non-binary flag with a display IO shapes display shapes actually the the library display shapes Copy that Code non-binary display shapes Okay New flag let's do I like I'm gonna do bisexual. I like the colors on the bisexual flag. There's a few of the flags I do really like the colors of I know of which is not the best reason to choose it, but Oh, okay, that's Sting, why did it do that? undo this This one will be interesting too. It has different sizes. So You can get a little bit fancier with the code to do it Okay, this one I'm gonna make so for the last one. I was making one rectangle for each stripe Uh, and then each rectangle was effectively its own bitmap And had its own tile grid and in this case the bitmap and the tile grid are hidden inside of the rect object from display IO shapes But technically each one of these has got a bitmap and has got a tile grid inside of it for the next one What I'm going to do is I'm going to use, um Uh, you are in full screen. I don't know how long ago you said that Um, or what was on the screen when that was but yes um This one I'm going to use one bitmap and one tile grid And then we are going to paint Different pixels paint inside of that bitmap. So instead of having one bitmap for each row We'll have one bitmap for the entire display and we'll color the parts that we need Let's get our three colors. That was I'll say pink blue and middle middle Have three colors this time. I wish these would copy with zero x's Or I wish they would double like when I double clicked. I wish it would be on the other side of that maybe I guess we could go pink blue purple. That's probably the right way to do it. Let's do that oops Just a flag on the screen would be better to show monitor capture for gimp Bring out a full screen flag. Oh, that's what you meant. Okay Yeah Okay, yeah, sorry, please feel free to to mention something Quicker and uh multiple multiple times if I don't catch on I realize now That's what biota was trying to say over in the youtube Uh and dj devin obviously over in the discord as well But I did not catch on until just now unfortunately. So yeah, I didn't realize what the Screen was showing my apologies But yeah, feel free to let me know and just let me know again if I don't seem like I'm uh Picking up what you're putting down basically Of course, it's also on a delay as well. So I think I'd take a minute as well for uh Or like me to catch up to or for you to be able to catch up to where I'm actually at Gotta keep the preview on as well. I didn't have the preview on which was part of my uh, how I Screwed myself there. I'm sure forget. Copy this, right? We're only gonna be putting one thing in it. So let's get rid of all these except one We're gonna call it flag tg. We need there. We need width height We're gonna go full screen Colors, I think number of colors. So I'll you count. Yeah three Oh, we need there. We do need a palette this time around. So let's go Palette, uh, we could also set these in Right. Yeah. Yeah. I mean my intention has been to be showing this the whole time I did not realize what was showing inside of obs Yeah, obviously, I think it's much better to see the code and the output than Just the output and especially just the output when it's not even showing what I'm working on Um, yeah, obviously my intention the whole time was to show everything Uh, let's go pixel shader. That's gonna be our palette bitmap Which is our actual bitmap this time Not a non-disk This one might be tight. I don't know if we have enough ram to actually keep You know, I suppose we do right Okay So we should be able to run this but it will not do anything besides I the repel Okay I was expecting it not to paint it full color, but that actually makes total sense because Our bitmap when it would have gotten spawned it would have gotten spawned with all zeros inside of every pixel So that is our pink showing which means We can actually Let's see. What does that mean? We could um, technically we could leave the top and not do anything I think it's gonna be best if we do actually Fill it in even though it's technically already filled in though for this one. I'm gonna use bitmap tools You really call it a flag if it's non-binary Can you really call it a digital file if it's non-binary? uh bitmap tools Tools so then within bitmap tools. We actually have a couple of options as well I am gonna go with uh fill region I'm gonna go with fill region for the first one Which is effectively a different way to draw a rectangle the the third way that we will have seen to draw a rectangle this one draws a Smaller rectangle within a larger bitmap where it could be the same size as the bitmap But the the point is you could draw multiple rectangles into the same bitmap Which is what makes this differ from The two ways that we saw before so this one we say Bitmap tools fill region. We're gonna give it the bitmap So we go bitmap tools fill region. That's gonna be the flag Bitmap and then we're gonna give it x1 y1 Which I'll say is zero zero and then x2 and y2 Which for this one I'm gonna say is this point down here Which is Six So that would be uh 320 or Yeah, let's just hard code it to 320 This one will not scale to different size screens a couple of the other ones Well, I don't know we hard coded some stuff in the other ones as well We did some dividing though the other a couple of the other ones might run on different size screens and not And and actually work correctly. This one will not probably 320 that's gonna be 96 And then we need what value the value we want to fill it with which is the index of the color within our palette And then we're just gonna do more of these The next one will be the middle one Which is gonna be 96 to 48 more than that 48 plus 96 144 a full gross Okay, um There so that will be uh, so that will be zero 96 And then 320 Uh 144 Yeah, and then not we don't want zero we want purple which is One and then this one will be Again zero, but then 144 320 and then this will be max which is 240 which ought to be 96 less than or 96 more than this which Yeah, that looks like it works out to Use analog inputs to store the colors nice Convert colors with like a DAC Boolean. Yeah, it flag Okay, uh, let's save this one out that is Bisexual and we used Bitmap tools fill region. Uh, let's do game in flag. This has one two three four five six seven colors Colors, how do we want to do this one? Let's see. Um let's do Bertolt that could be kind of fun. Um, this is that tile grid Yeah, let's use tile grid So for a lot of these we've essentially just been like pinching pixels so to speak We've been we've been coloring into individual pixels a lot of them We had shapes where our pixels are represented by higher level objects Um, but we're still kind of down to the pixel Tile grid will let us think about this In a larger grid So with tile grid we can effectively Break this into okay. I have messed up this page something fierce. Okay. Let's copy that With tile grid we can effectively Think about this within grid squares rather than pixels. So if you would imagine us Drawing a bunch of vertical lines down this to make it kind of like a checkerboard Right if we had all these vertical lines, um Conceptually obviously we're not going to draw the lines for real but conceptually it would give us effectively a grid And then within that grid we can duplicate one square As many times as we need running off to the side there So if we had one If we had just one pixel Of this we could then expand it We need to know the right size though So we're going to do the same thing we did on all of these which is go to mode Indexed Scale it down Not visible anymore Oh, there it is. Okay scale have seven equal parts Which it looks like does not go into 240 correctly. Also, we did get a couple of the You got a couple of these are these part of it Or is that from scaling? No, those are not part of it. Okay. Okay. Let's say we have seven equal sections as close as we can get The aspect ratio is not going to work out perfect. So let's say clear Uh, we have 240 pixels tall divided by seven That is not equal. It comes out to 34. What is 34? 34 times seven That's 238 which is pretty darn close. Let's go with that. So we're going to say Uh, four stripes that are 200. No four stripes that are 34 pixels tall each I say four stripes. I have no idea where the number four came from But there's seven stripes obviously so not four but seven Uh, let's go back to this one Let's go Okay, here's what we're going to do Here's what we're going to do we're going to say we're going to call this flag sliver Sliver, how do you spell sliver? Like a sliver of something sliver. Is that right? Okay. Yeah, I don't know why I'm saying guessing that Flag sliver BMP. This is only going to be one pixel wide But it's still going to be 240 pixels tall is going to have seven different colors We're going to map colors out actually let me just go back to the big we don't Now that we know the size we don't actually need to scale the one we might as well just go back Except for we can't for some reason. So let's just copy that again How come this keeps popping up? I don't know what that's about I'm gonna start closing some of these also Oh, that's probably the one we could undo. That's all right I wish I could just like I dropper I dropper I like I wish I could just go down the line and then get a list of all of them real fast That'd be super convenient I'm gonna call these one numbers Five six seven We've got our screens don't include UV as a color make for even more expressive simple designs UV would be pretty interesting, huh? I are something you need special glasses Why is this visible by 240? One pixel. Yeah, we're doing well. We're doing one pixel wide. Yeah vertical spreadsheets So one pixel wide and then 240 pixels tall And then we'll we'll duplicate that 320 times essentially, okay, we do Want a palette with all of these? Yeah, we want a palette with all of these for sure Yeah, oops One two three four five six seven. Okay, those are all loaded up in our palette We won't need these two for this one palette boom. Okay Main group flag sliver. That's one wide. That's 240 tall. That's seven colors the tile grid flag. Let's call this uh Yeah Flag tile grid. Do we need I don't think we need a flag sliver But we do need some more stuff Let's put that for now. Let's get rid of these rid of that So this would draw like one pixel on the left or 19 palette three Well, it's seven Okay, we got one pixel on the left Uh, what we want to do is get our one pixel filled in with the appropriate colors We know those are going to be 34 pixels tall So I am actually going to Bring back the uh Matt tools. No, let's just use a for loop actually. Let's go a good old for loop. So So our for loop for i in range of seven And what we want to do is Stripe index in range seven pixel y in Stripe index We want to start we want to start at Stripe index times stripe height, which is 34 Okay, we go from there up to That plus the height So let's say starting starting Plus height So now we're looping over pixels and then for each one of those pixels we want to go Zero for x and then y will be pixel y and then we're going to set it to Stripe index because that matches the palette Okay. Yeah, I think we're good except for I did not actually go through and set the rest of my colors Oh, I don't have to close that. That's actually really handy. I'll tab back though How's going Johnny? Good evening Okay, there we go We have a little tiny tiny little bit of green at the bottom and that's because we actually made this 240 tall But we know That it did not actually fit to 240. We went to 238. So let's do that. Perfect. Okay. We now have one sliver of the gay men flag we need to Use the tile grid to duplicate it over some more In order to do that, we need to change some of the stuff we passed to this mostly the height and width so So height actually is going to stay one but width is going to change to be 320 All it takes So by default Each cell within the tile grid Will get set to the default index which is zero if you don't change it And in our case our sprite sheet only has one sprite Of course, we'll have the index of zero. So once we duplicated that across to have 320 width It meant that each of those 320 columns we're each going to take The zero index sprite, which was our sliver So that kind of magically brought the whole thing together, which is pretty sweet Not magically, but with display i o and tile grids, but it feels like magic copy that that is going to be Amen, and we used tile grid tile grid tile grid one column tile grid sliver Let's call it tile grid sliver Because there are actually a couple of different ways we could use the tile grid because We effectively ended up with a grid of only columns, but we could actually have a two-dimensional grid with squares But we would need to What would we we would need to have? change the width Change the height of our tile grid It has different meaning Yeah, I mean it has the same meaning around here So we kind of like our our tiles are The full height 238 pixels each tile has All these different colors in it. We could split it up even further to where each tile was its own color Like the top row or stripe could be its own tile That could get duplicated all across the top and the next one down could be its own tile It's not what we have Done not the way that it's done, but it could have been done that way I think by default it will be all green or something. No, it actually did not get as messed up as I thought it would I'll height 34 Yeah, now it's all green and if we wanted it to be not all green We would need to go through and set the rest of the stripes to be different indexes But I am actually just going to put it back for now. We're going to call this one Done at how we did it here LFTW Four loops. Yeah four loops for the win. Nice Uh And sexual flag, let's do I like the colors on this one as well. This reminds me of like, um Like a CMYK process or something So let's do this one with the grid more like how I was describing a second ago So we will still start with A sliver But we will do it differently How we set up our tile grid and we will also need different colors with overlays to make tartans have is uh We'll click here without changing is super nice, but then you can't alt tab back Look, we like we have fewer here and we have None that are shades of the same color So I'm gonna go back to using color names pink yellow Blue we're gonna start out the same but we only have three colors And we can do a full 240 this time because 240 does divide evenly by three should be 80 That's going to be no longer seven but instead three Stripe index is now I mean stripe height rather is now 80 320 so this should actually work I think Yeah, but we do want to change it up. I do want to do it differently with regards to this part. So I'm gonna say Tile width no tile height Is 80 oh Wait, where did our Did our actual height go so Now we want to go is there like a fill row in tile grid. I don't think so Oh There's set item. Can you do slices with this? I don't know if that would work. Anyway You'd have to be able to do slices on both halves, which would be really weird This we're gonna do we're gonna do four Pixel no four tile x which happens to be the same as pixel x But In range of 320 Then we are going to say Flag tile grid zero one two No, uh, zero zero zero one zero two Equal to zero one Two oh, okay Oh Right, this should be tile x No, uh, no slice support in tile grid so far would be cool Especially if they were generalized to 2d. Good night. Yep. Take it easy. Good night to shippu. Thank you for the confirmation That's good to know And yeah, I would agree with that be sweet to add one of these days You haven't got an exact number of pixels Diving I think maybe you mean dividing into screen height You could do alpha blend the gaps Diving into screen. Maybe is it divide? Yeah, okay dividing you changed you blend the gaps alpha blend Use like a the palette thing or not sure if I understand what you mean Um, okay, let's get this one saved off Was pain sexual flag done with tile grid. It's still I guess tile grid sliver But it's uh slightly different now because we used The full grid tile grid grid redundant naming, but Okay, I'm also going to do one I'm going to do progress pride flag because this one is A little bit more complex It has this section over here which has some diagonals on it So that'll give us a chance to do something besides just rectangles and stripes Um straight across So I'm going to copy this Drop it into gimp just so we can use that to get our colors and all that stuff And How do we want to do this one? So with this one? I'm going to go back and do another one where I have one big bitmap that covers the entire screen I'm going to do my fill regions in order to make each one of the stripes Which I just got done saying that we would be able to do something more fancy than that But we need to put the stripes down in the background And then we can draw these over the top So what we'll do is we'll do fill region to draw each of the six stripes And then I will use Draw fill is there a there's a fill polygon draw a polygon Which will let us make these things Which could effectively be triangles We made them the right size Or even squares They could be squares that are on the 90 I'm not sure if we're allowed to use Pixels outside We're not allowed to use pixels outside then it will be a bit trickier Okay, yeah, this one will be more challenging. So let's get going on that I'm going to start with one of the fill region ones That's pretty close to How we're going to start here we will have We will have six colors Well, we'll actually have 10 colors 11 colors Six plus five I like purple instead of violet I am personally but We're gonna also go dark blue our palette has 11 colors We need to actually get the colors E5 Oh, that's from before I think Double click back Okay, we have all those we need these next I'm just gonna go in the same order here. So red, orange, yellow How did I only go to zero through nine? Purple is missing That's a bummer Here we go Okay, I'll just set up Fill region. Let's do our six fill regions for our base colors. Let's do Okay, let's just uh, we'll divide it out actually. Let's say the width of that's going to be displayed out width The height is going to be Well Height the the y2 Is going to be display height Over six This will fill with zero. It's 11 of those So it did fill the top But it also filled the whole rest of it But I think that's because the whole rest of it would have defaulted to zero to begin with which is what red happens to be We make the next one down. We could Sure, this is the case. So How would we do this? So in this one we would be We're always we're basically going to be like Let's set height Our y here would be stripe height and then we'll just add a times whatever and this would be Probably just times one more. So This is times one. So this is now times two That'll be one. We should get two colors this time We can basically just do this Now it will be times two Times three Times four Is five That will be three four five six Except I've done the colors wrong. So that's going to be one Three four five All right, we're back to Six colors stripe. I'm gonna save this one off just because it's done in a different way and it is a valid flag But obviously we're only halfway there The one we're actually aiming for six stripe Rainbow that is with fill region. We're gonna go back and do some more. So can we use draw polygon And select points that are like way out here How would I find out where it needs to be though? That's pretty tough So light blue Goes to the very corners, which means the diagonal line of its triangle Is the full height So I assume with trigonometry. We could probably figure out the size of the square of the blue one But the other option is we could Just use the actual points that are actually inside of Polygon flag bitmap So let's just try one outside. So So the the full height that this would be Let's just say maybe somewhere up here like negative I mean those could be triangles. Yeah, those could be triangles. Okay, so that would be negative So it'd be zero x and like negative something y This takes x's and y's x's Is a list y's Is a list and then these will match up. So zero Let's just call it like negative 30 Then we go to the center line Oops, uh Oh, yeah, okay. Well our our trick on the uh indexes Doesn't work as well with the um Diagonal lines, but that's all right Basically what we want to know is this point here It's the halfway point 120 and it's uh x of 152 So we would say x 152 y 120 That would give us this point here and then the next one would be the opposite Down there so that would be back to zero and then it would be Uh not negative 30 but 30 more than the maximum size which is 240 so 270 x's y's value Is uh, we want whichever one is black. That's nine Close Okay, so we'll see. I don't know if we're allowed to do this Object with buffer protocol required This seems to be byte array or bytes Extreme title and thumbnail very insensitive at the moment. They're the same title and thumbnail that we use every week. I mean Yes, there are current events in the world that Are aligned with the name of it, but it's the name of the program like I don't know. I apologize if anyone is uh offended, but It's the name of the program. I didn't want to change the name of the program for one week or for one month or for any amount of time really unfortunately, so Yes, I would agree. It's Timing wise obviously In the news and not for a positive reason But it is the name of the thing. So it's the name we're gonna roll with Must fit in one bytes So this seems like it did not even make it to I guess this can't work because it's bigger than 255, right Must fit into one bytes. Maybe then I bet it's the negative not allowed to have the negative It still fails. Maybe I mean both we're not allowed to have the negative or the how not allowed to have the negative or the over 255 Does not seem to have worked anyway, truthfully Because like one of our points is way over here and we definitely did not get anything Not way over there. I'm using this right Bites should we do bytes instead of byte array? So there's like I can see like one pixel there Like we're doing something but not really what He falls to true But we do want that swap from gimp Swap gimp from px to pc percent By the zoom drop down. I didn't know exactly when you said that. Sorry. I didn't Notice it when it first came in the chat there I don't know what exactly I had going at that time and I'm not sure what you mean from px. Oh pixels to pc Maybe that was when I shrunk this maybe there's a better way to get this so the diagonal lines work better That could be what you're describing. I'm not sure. Sorry Um, this is not actually doing what I was thinking. Anyway, let's uh Try something else here and see if this is doing even all what I'm thinking. So what if we said zero zero and then 150 zero I don't make a square I had to just see what this does Seems like we're not quite using it, right? Here's zero zero 40 zero 40 40 zero 40 Okay, it's not filled in It's not filled in We are gonna do Boundary fill I'm gonna try boundary fill I'm not sure if it will work out. I'm not sure if that will work how I'm imagining either This one is definitely the one of the trickier ones. I don't know if I'll make it all the way We may have to continue this Tomorrow morning Let's say draw a line We're gonna draw a line from 50 1 0 50 1 0 2 What our center point was before which was Like 150 2 120 let's call it value Draws there and we want to draw The next one there So we can start from 152 120 And then we can go to Basically the opposite zero No 51 240 On the opposite side of the bitmap now If I do a boundary fill destination bitmap flag bitmap X Y Let's call it one one Fill color value that's going to be black for nine Or nine for black I don't know if I need that I'm gonna try without replaced color Okay, this will work. We'll need to call that a few more times But then after we call that a few more times We're gonna be able to make a few more lines and make a few more boundary fills and then everything is gonna work I think So we need to basically do this once for each color We had six of those so the next one is going to be down here at What 240 divided by six that's 40 so that's going to be like 41 something we could do x as the same yx obs is Bs is getting a little angry on us. Uh, yeah just referencing the shapes Slash band positions by percentage rather than scaling the image Apply to display height as a multiplier and then it would be a display agnostic I got you. Yeah, instead of hard coding some of the places where I've got pixels Um, yeah, if we had expressed it in percentages of the display It would make it a lot easier to move to different devices. That's definitely true Have uh, unfortunately Uh, not done that for this one basically so I'm gonna keep Going in an attempt to try to be able to get it done for now 165 This doesn't feel like enough 205. Yeah, I guess it would be that should fill in like all that side Nice, okay now We make our two brown lines and then we call Boundary fill again But this time we'll only have to do it once and then we make two blue lines called boundary fill to pink lines called boundary fill And then two white lines and call boundary fill And we should have the whole flag after that So our brown lines go from 26 0 for lines that's going to be 26 0 to 127 20 Yeah, 120. These will all be 120 for the height. That makes sense. We're gonna go down to here 25 26, let's call it the same as the one above I've done this wrong Oh, right. I went from the middle last time. I guess it doesn't matter. We should do it the same though We should do this Then here would now be 26 Uh, two, yeah 240 that will stay the same actually. Yeah, and then so draw that line. This is gonna be not black though, but Brown which is for us number eight index Okay, and then we should be able to boundary fill somewhere inside of there And this time because we did all of our blacks before we no longer have rainbow in there We should be able to just boundary fill once and I think it will cover everything we need for ob s and Please stick. Please stick with me for a few more minutes here ob s. We're almost there. We're almost there, buddy I promise. Okay Boundary fill flag bitmap Where's our x y just pick one like this? 18 5 18 5 Color 8 nice. Okay next one I think I'll finish this one out and then probably wrap it up for the night For folks that don't know I do stream on Saturday mornings also 10 a.m central time. So if you're interested in More content similar to this We may not be working on the exact same thing, but at least similar In regards to circuit python If you're interested in this kind of content programming circuit python Then you can join me again tomorrow morning. It's tomorrow morning saturdays at 10 a.m central. Whoops And I'll be back doing some more circuit python streaming So that's gonna be zero zero and then 101 and I will call it 120 instead of 119 Then we get 101 120 here and then we get the opposite here, which is zero x and 240 Oh, we should be using 239 probably doing too far. I don't we these doesn't Maybe be 249. I don't know. Also boundary fill. We need a different one which I have already Clicked run, but let's fix that while we're here. Okay assumed in too far boundary fill 620 this blue which is 7 Oh, no, no, no, we messed up the brown Nice showtime. Sorry there. Yep. Yeah, I'll discord. Thanks for popping that stuff in there. Um, let's put that back now finally, okay two more 031 Let's change the color first this time. So I don't mess that up again six All right, what do I say 031? Yeah 031 That's going to be going to 75 120 120 Zero 240 minus 31 648 Nice and Right one last 10 061 50 50 120 50 120 Zero 240 minus 61 And 10 and then 2495 Nice All right, let's copy that one out. Do they call that progress? That's a newer one. I know progress pride flag progress Uh I'm gonna Like I know we used fill regions also to do the background But I'm gonna call it, uh, I'm gonna call it draw line boundary fill because those are kind of the new bits that we added As far as the techniques used to draw it Draw line boundary fill. Yeah Use some fill region as well, but We've already got fill region All right That is gonna do it for tonight Thank you for hanging out folks. Thanks for hanging out everyone in the chat Uh, thank you for everyone who offered up ideas for how to try to fix obs I will try to mess with that a little bit before The next stream that I do with this device and see if I can't get my colors straightened out so that we can have Real color, but uh, hopefully it's good enough to get the idea across here Um, yep obs very unhappy Thank you to everybody for watching as well as hanging out in the chat Uh, like I said a little bit ago I will be back in the morning 10 a.m. Central time tomorrow if you would like To watch me work on some more sycopython stuff. That is the next opportunity to do that Um, if you are interested in doing so then I will see you there That will be over on my own channel foamy guy underscore twitch on twitch or you can find me on youtube As I think foamy guy, but I'll drop the links on youtube because it's different uh each week or whatever Um, I hope everyone has a good night and a good rest of your weekend and all that stuff. Um Have fun playing with display. I oh if anybody else decides to make some of these like I said Uh, please feel free to share if anybody does make any of these I would love for you to share them with me I think um, this would be great to be able to put a repo together that has a bunch of these Uh with all these different examples and different ways to do things So if anybody else is doing anything like this feel free to share them Otherwise, I will say good night. Good day and I will see you next time. Thanks