So, hello everyone. My name is Lakshman Prasad. I, first of all, I'm sorry for the code I have today. I want more than the novel dosage or code this morning. So in case I act something weird, you know why that is. So, so I earlier cook out of the country products, doing web development and something using Python and Django, kind of like that. And in my current role, I work at McKinsey as software architect. I work in a team and work with consultants in order to deliver technology solutions that he drives. I have never really worked in the front-end part. The most front-end that I've played until recently was working with Django admin. Who knows Django admin? Django admin, basically the front-end is you don't write the front-end. It provides the front-end for you. So, you say what the forms, you know, what fields on the database do you want and then it provides the UI for you with auditors. So, I got started with AngularJS just a few months ago. In fact, I worked on it. I wanted to work on it, get the application out. I was not able to, so for an entire day, I know how some of you might be feeling if you're still doing AngularJS. The initial steep learning curve is very hard to come by. I got frustrated the entire day without being able to do anything. And then I started reading the book by Shyam and Briar and then, in fact, in a cafe not too far away from here. I've been taking the Angular coolie ever since and then I hope to be able to share some of that with you today. So, today we're going to be able to, today we're going to discuss an approach for rendering charts with AngularJS and high charts library. Think about it again. I think maybe the top title may be slightly misleading because although we go through the directives of the high charts themselves, we want to go through about it in a perspective and objective of being able to develop Angular directives in a good way, not necessarily to create good charting libraries, which you can of course do. So, the way we learn Angular directives is by using some of these high chart directives by building it, by discussing a lot. Where do you want to put different components? I would like it to be an interactive session. I want a lot of feedback from you. So, I recently developed an application with hundreds of charts and this is the approach that I've used. In fact, I'm planning to put it all together in the form of various different directives and open sources. But even if I take some time in order to do that, and if you are doing it meanwhile, by following the approach that I'm going to discuss today or we're going to come up with today, you can use it in your applications today as well. So, I don't know, in case, so I want to leave you with something interesting in case you don't find this talk interesting. So, I've built an application along with all of those directives, which is to visualize such as the Nusker's carrier stats. You can check it out on jump such in ST, you will be able to see the application. If you find that interesting, by all means go ahead. So, in case, even if this talk is pretty interesting, it's being recorded. So, server-side charts, we all know, right? I mean, chatting is a pretty common thing. It's not something new. Of course, we have some fancy ones today. But chatting has been a possibility since a long time. I did a talk at Fifth Electricity where I showed off creating, you know, analyzing the data from users. I did this in order to find out how many, you know, what is the most popular headphone used by someone? What is the most popular keyboard? What is the most popular hardware, software, etc. And when we analyzed those data from users, I generated that grasp pretty quickly. It's not really hard at all. That's pretty much all it took in order to create a chat in order to find out what is the most popular headphone or most popular software in this case, the keyboard for that matter. So, you basically, you have a matrix and then you plot with a kind equal to whether you want a bar, pie, or anything, and then you get the charts already, right? So, server-side charts are a possibility and they are pretty easy, low-bit dealer bar. That's pretty good enough for publishing. I published findings from that one using exactly those graphs on Medium. It got front-paged on Hackenuse and then there was tens of thousands of people giving it. There was pretty good feedback. There was charts and then I was able to publish it. If you are a magazine company, then these static charts are good enough, right? So, the only one downside about these server-side charts normally that comes is that they look Excel Cercar 2007 rather than JavaScript Cercar 2013, which is I think a valid objective. But in order to counter this one, there are very good things. This person, Cam Davidson-Pylon, has a very good course in which he creates his own, the courses of probability and statistics in order to display excellent graphs. He has his own themes for my plot lines and then you can see these graphs definitely do not look like Excel Cercar 2007, which is a company. So, you can generate pretty good graphs even using the server-side by using the necessary themes. So, that's not really a downside of a server-side chart itself. But, I mean, you would all like to think like that, right? Have you seen any of the D3 visualizations particularly by Mike Post-Ox and New York Times? They really might blow in. The charting is into the next level. You don't see a chart with the bars twice anymore. You want to pull, drag based on the size of this one and then move this one around into whether this goes to, this state goes to Republic or Democratic and then there are two PNGs of Obama and Romney. And depending upon how much you put there, this starts minding a little more. This is the graphic of 2013. Check out all the Mike Post-Ox D3 charts. They're really mind-blowing. I find it to be extremely interesting. So, anybody with any charting library with server-side or the front-end obviously will have to stop for a second and have a look at it thoroughly because this is how the charting is going to be. So, similarly, what is it about those D3 charts that really make us feel really good about it that it stands out with other charting libraries? Basically, the ability in order to interact with it. I want to be able to see the graph I want to see. So, people normally say, when Sachin Tendulkar scores a century, then the percentage of India wins. People won't find out this answer. So, that's not good enough, right? I mean, that is just one graph. I want to be able to find out when Sachin scored a century in Mumbai against Australia when the percentage of India wins. You can't publish all of these graphs. It will take an entire magazine and you'll never be able to go through that. So, you need an interactivity. You need to be able to choose the data that you want to see. In fact, this is one of the graphs in the Sachin statistics there. You can go to find out yourself where you choose a particular score and you see how many times Sachin scored below that and how many times Sachin scored above that. And of that, how many matches India won and how many matches India lost to both of these donuts. And why he scored hundreds so relevant? It's an arbitrary score, right? You can move the slide around in order to vary anywhere between 0 and 248, which is 248, 200, whatever. It's top score. So, how do we do that? How do we do these kinds of interactive charts using angular and high charts? Do you know a part? So, today we're going to be using the high charts charting library in order to render these charts. Anybody knows about high charts? You used high charts earlier? Yeah. So, high charts basically bench upon jQuery and renders SVG. I don't really care about implementation anymore because the thing that I need a part of, excellent API, reasonably good performance, and then being able to work on all of the devices, all of these parts. So, high charts charting library basically does all of these for us and then it has all kinds of charts, like 100 plus of them.  I want to stress a little bit more about the API because that is what makes me bring that today into the discussion in order to discuss angular areas. The API is very, very simple. In order to create a new high chart, you use a particular container of high chart and then pass a set from JSON options chart. What kind of chart? What is the title? What is the x-axis? What is the y-axis? All of these are JavaScript objects themselves or JSON options. Most notably, between the various different graphs, obviously the title and all of those change, but if you want to just talk about the data, there are two things, which is the categories, which is what you want to plot and then be the series, which is the data that you want to plot. These are the two things that has to be dynamically fitted into this one. So, angular is very good in pointing. We know that, right? Already we had two different sessions. You put something into a, you change something on a view and then it automatically gets reflected back in the controller and then you change something in the controller that gets reflected back in the view, automatic. And if you, one of the, if you have seen any angular example at all, all of them start with one basic example. Okay, let's have an input and let's display that and then you type anything into the input. Suddenly, this thing keeps changing. You see that? Yeah, there's a thing up there. Yeah, exactly. So, basically angular is extremely good in pointing. In order to develop these kinds of interactive charts, what I'm talking about is being able to develop these buttons where you click these in the chart updates itself. Angular is good for pointing. High chart is good for rendering. So, we use these two in order to develop interactive charts if you need. So, it's good. So, you already know a lot about Angular. Thanks to Sean Session and another session before this. But I want to stress one important point that Angular brings to the table, other than what JavaScript used to be. So, I have spoken to several of my friends who are extremely good developers and most of them wanted to avoid working on the front end because front end normally felt like, you know, doing hacks. It's like you want to make something work, you try this, you try that, CSS web transform, and then opacity, and you try it in different things and one of them happens to work. But back end is so not with that. You can literally engineer. This API comes in, you want to do that, you can write tests. What I think Angular brings to the table, which probably is true for several other frameworks as well, is brings the engineering back into the table. Using Angular, you can do tests the way you did in the backend. Using Angular, you don't have to bother about how do you pass things from controller into the view because it's automatically done. All right, so now you know what are all the things you know so far? You know high charts API, which is basically you provided JSON and then it gives you the charts, yes.  And then you know that interactive charts occur, so we're going to develop it. So, let's say if you were to develop a high chart using this one, if you want to develop high charts, how would you do it?  Shab cannot answer because... Do you capture the values in some scope object? Right. You should do a service, get your JSON and you'll have to have any reasons. Sounds good, let's start with. So, I'll start with step minus one, which is not even using Angular. How would you do it using jQuery? If you were to do it using jQuery, basically you have a containers element and you say within this container give me high charts, these are my various different options, great. So, that's not good enough, right? I mean, if we have to change everything, so we want to do this all over again and again, we don't want to do that, we want to do that. So, step zero is something that he mentioned. Let's come to the Angular. So, we have a controller there, similar to the HTML, we have an HTML like earlier, except it also has a controller, we call it the chart controller, and for this controller we have the jQuery again. This is something Shab mentioned earlier, which is basically you put your jQuery inside your controller, it's not really good, but at least it gets the Angular part of it, it gets the controller. So, it's called step zero, it's like Angular. What's the step one? How can we better that? Can we do better? Yes? So, what can we do better? Yes. So, we learned earlier already what two things, one, we don't manipulate the DOM inside of a controller. Yes? Where do we manipulate the DOM? Yes, we manipulate the DOM in the directive and then where do we set the scope variables in the controller? So, how can we change it such that we put the DOM manipulation into the directive and we take the scope setting into the controller? How do we do it? So, we call it step one. So, this is the chart directive. So, the HTML remains the same. In this case, it starts with the directive. So, directive has so many different options, we can't cover that but I assume, quite a few of you are already quite comfortable with these options. You set, so instead of having a div element with the container, I replace it with the chart directive right now which is like a HTML element and then I say in the directive, I have a template which has a class and what is a directive? Directive is two things, the HTML that has to go with the JavaScript that has to affect on it. So, it is both what it displays and what is the behavior it has. So, what is the behavior it has? We will go into the link function. So, the directive basically is a restricted E in order to say it has to be given in the HTML as an element, not as an attribute or as a class. It has to be an element and it has to have a certain template and it has to go with a certain behavior. In the behavior, I take the first element of the template and then rendering high charts within that. Good. So, what do we do in the controller now? Anybody? What is remaining? So, we set the data. So, what does the directive do here? The directive does not necessarily automatically watch the scope variable. The controller does not even the controller does. Basically, the view renders automatically and the changes in the view go back to the controller. In the directive, in order to be able to watch for the chart ID, I put a watch on that. You see that I see on the scope, I watch chart ID. Whenever the changes, I create a new high chart object and then render the chart object. Another way of rendering high chart is to create high chart with chart object. That's about it. You don't have to call it like this. You don't have to call it like this. So, I am taking the high chart option that is there in the scope and then creating a high chart order. There is no need of digest. The digest is automatically handled. Inside the controller, basically, I set all of the options that I need. Sounds good? For the high charts. This is a good step one in order to do high chart angular interactive directive. Yes. So, can we do better? Can we do better than this? Anybody? What about the destruction? Sorry? What about the destruction? So, there are two ways. One of them, the chart ID gets replaced. Therefore, the new high chart comes up automatically. And B, if a controller goes out of the scope and another controller comes, automatically gone out of memory. What about the custom reasons created by high charts? I think since the controller goes out of scope, those also get erased out of memory. But I am not sure about whether it eliminates all of these from the memory or not. I will have to problem it. I think it does. There is no reason why it could not. So, what can we do better than that? So, do you see all of these chart options that I have written within the controller? Is this really the best play for it to go? What can we do? Where can we put that? Great. Excellent. Exactly. That's the next thing. So, we put all of these inside a service and then call, I want a spine chart with margin, with so much animation, with region, etc. And this service is injected into the controller and then I set the element after getting a JAX call of my particular data. Sounds good. Why would we want to put this in service? I would assume you are not having exactly one chart with so many different charts. And you don't set the options for the font, for the title and all of those within the CSS. Because this is SVG, you have to set it on these options. So, if you put it inside a service, then since this is a JavaScript object, you can extend each other and only manipulate and modify the thing that you find relevant for this particular chart to render. And you import this, you inject this one into your controller and then you use the specific, specific JavaScript project you created for a particular chart and then you set the chart ID and the high chart automatically renders from the narrative. Sounds good? This is good enough. This is good enough to one extent where you have amazing charts. So, this is Sachin Tendoshkar's progress through his career in 1990 he started with this is multiple y-axis which high charts forward automatically and then the green color range is the average. The left side y-axis represents aggregate runs and the right side y-axis represents the actual runs. So, you can see he has mentioned a consistent average and obviously the high score is going to be step by step once he scores a high score then it keeps increasing as and when goes wrong. This is already good enough not to do the basic high charts. But we set out, we started saying that basic simple high charts by displaying that you could probably do that using the PNG using the server side. What's the point of our friend? What do we need? We need to add interactivity. Yes? How do we add interactivity? How do you want to say let's say you want to display I don't know maybe only runs in that or only the aggregator runs or only this one or different kind of interactivity or you want to see test and what do you have that's an option here actually the right side. Okay. This particular chart hasn't got yet because I haven't had the time to scrape the test data yet. So, basically if you want to do that ODI and test interactivity how would you do that? Anybody? Exactly. Yeah, of course you have check boxes that is in the view which is mapped to a particular model and this model you have to watch initially let's say we watch it on the controller. Sounds good? So, we are watching a particular model and when this model changes we call the plot option everything that we did earlier in the controller I put it into a function called as plot here or plot chart or whatever and then when these options change based on ODI or test I call the plot option so that corresponding attribute for rendering the test data of ODI data. Sounds good? So, that's what basically is doing here you extend you know basically I'm watching the chosen option being test or the ODI data and then I call the plot data whenever the chosen option changes and I call the HTTP in order to get the JSON from the server in order the server or could even be my own server which is a local file in this case that does not matter so HTTP is already good enough to handle it and then I set the scope or chosen options at view is equal to ODI or test even though that runs I could do that and then whenever the plot data so this I think the step 3 whatever the option is there is closing the new other function that is the plot data function basically it creates a new JSON object based upon my default options as well as the current options and then renders the chart once this is set on the scope then what happens? High chart automatically directly automatically picks up and then renders the chart for me. Sounds good? So, this is how to do the options how would you do an interactive chart basically set the radio button with something changes you call the plot data with the corresponding attribute that you want to say you're good to go so I think there's a little since we're talking about high charts a little good time in order to take a little bit more regression apart high charts itself how it works and what are the other options we can add into the directory so if you say a new high chart what it basically does is destroys all the SVG elements that are present right now and then creates a new SVG element and creates the whole thing all over again it's ok I mean if it's on a web you hardly notice in fact sometimes you prefer that because of the animation but if you have a chart very similar to such in slide time score and you are on a mobile device then in order to compute all of these a render is going to take a few seconds you're not happy at all so you don't have to re-render the whole thing high charts has its own API in order to only manipulate the data and when you only manipulate the data instantly updates so you could potentially use that option and that's not good enough right instantly updates I'm not seeing anything chart is all about how beautiful you make it look we need animation so in order to animate it what do you do you add all of the new set data elements one by one to it actually I'm not sure such in chart has any good animation ok there is an animation you carry some of the chart if you're viewing it if you change the bottom things the pie chart expands and contracts very slowly with that that is the animation so you increase the value slowly one by one every 200 milliseconds that is when you achieve an animation this is a good time in order to say whether we need an animation whether we want an instant update or we want the chart to render all over again why would we want the chart to render all over again in case you're changing the title changing the options etc this does not really affect that so you this is a good time for us in order to say maybe I will put an option on the chart directive where I say draw equal to animate and how do you refer to that one within the directive I in this case I so you have a link function the link function would take I haven't included the actual link function here but the link function would take attributes as an option you refer to the attributes one and then you look for the draw and if that is there as animate then animate otherwise you update making one of them the default so instead so again this is also not good enough right can we do better only ODI and test I'm not happy I want to see like the first summary chart you see you can see runs centuries you can see in-country versus country you need multi-level JSONs let's say I have my multi-level JSON which is you have revenue this is one a-line application let's say you have for all clients you have for different months you have for 2013 you have 2014 today 2000 difference how would you know it so you have JSON that is listed structure and then so first I think you are in agreement that in order to do an interactive chart rather than having so many different JSON particularly if there is a API call let's club all of them into one JSON hierarchically what is the particular JSON are you in agreement with that because it says API calls for me only one API call it get all of the data and change of these radio buttons instead of referring to various JSONs I refer to an element inside the specific JSON so that's good so how would you do that so if you have to refer to a multiple JSON element just like how we had a chosen option earlier you have chosen options where it is not going to be just an array but it's going to be an array of arrays you refer to choose an option of 0 choose an option of 1 etc sounds good so that way you can have a multi-level JSON structure and be able to see the relevant graph by choosing the option within your controller by using the HR directive can we do better so this will be one complicated chart directly that we end up in the end which I will also refer to you can refer to can we do better than that anything we can do we have the chart as a directive but so far what are we doing we are putting options themselves directly in the HTML page can we do better than that we make these options themselves also as directives so we have an option whether you want to choose a revenue in this case whether you want to choose revenue specific month or you want to choose the specific month so many different levels four or five levels actually I have built charts with six master levels using this technique using the same directive it was extremely bad so one of the things you can do not to make it even better is not just make the chart as a directive even the options that go on the HTML as a directive so this is exactly where the angular option of directive is communicating to each other comes in you should probably refer to this one directive that has a controller which has all of these options populated automatically and the child directive which you say requires this directive can access the attributes that represent on the parent controller for example we have a form and then we have an input and input does not make any sense without a form so an input knows that a form exists and then therefore does lot of validations based on the form validation requirements or a drop down or a set of drop downs by looking up the parent directive's controller because all of the things are populated on that so where are we getting with this we have a highly interactive chart the first chart that you see in such a application where you have three levels you can choose what are your tests you can choose in country how many versus country and hope and you can see how many charts is this how many charts is this this is not one chart this is actually one chart but as a user for me if I want to see this how many charts is this seven yeah four into three into two 24 so ODA and test is one option and then in country versus country and home are three options and then you want to see how many matches what is this average and what are these these are the four so they are multiplied and then you have 24 different charts using one json and then one high chart rendering this is how one of the ways you build a high chart directive using angular direction interactive charts so what did we build so far what does it take in order to build a chart like such a local interactive chart we have built one directive that reads the parent directive controllers options in order to render the options and then we have a chart directive which looks into which is being watched in the directive itself on the scope and whenever it changes the high charts automatically populates so now knowing we have built out this in order to develop a chart like such an intern summary chart which has 24 different levels what does it take we basically have an interactive chart we like to call it an interactive chart or it's basically options I don't see the point why it should be called an interactive chart but that's irrelevant to this discussion so we say we have an interactive chart the directive itself can take the URL rather than you taking it in the controller and then populating it because the directive has the controller now which takes the data and then populates it and then you can say you can even say it is a pie chart within the services we already put the high chart options in the service area and then let's read the override now but basically if you have multiple pie charts you have unique different options you need something to override for this pie chart so the best place to define that would be on this chart's controller do you agree I have a pie chart I take a pie chart and render it then it renders exactly the same thing if I have a pie chart in two different places so I need to make specific where is the good place to do that which is that is the controller of this particular pie chart yes so what is the method what is the object that is defined on this particular controller controller which has to override everything so if you put all of these you say that you are you say the options and you say the override there's one more thing I need to provide which I probably missed here which is to say how many levels is this JSON so in this case it is three because ODI test and then you say that and then you provide level options wherever you want to do that level options level equal to one on the top right level equal to two both the chart level equal to three below the chart and then you provide the chart that's all it takes in order to build an interactive chart by building these components Sanskrit how do you have options in the you so that's the level options we directly we build right but you have I mean how yeah so in this case I am using ng-boostrap which provides me an option in order to provide a set of buttons as a radio set of options so the level options directive instead of giving all of these as radio buttons gives out a directive that ng-boostrap so that will be rendered and that's why I'm using the type also not necessarily all of the place you need buttons are places drop down some places radio some places you see the type equal to that so in order to develop an interactive chart basically what you say is okay get this data from this URL this is three levels deep level one options put here level two options put here as a drop down level three options put here can it be any simpler than that so this is one of the chart so it's basically which shows that the level one is in the form of the drop down and then level three is in the form of a slider in order to see which week that this belongs to and it displays there was a 14 data there was 13 data and the difference between those data and another important point to note about this particular cap although we haven't really dive into that discussion is what if the JSON is not exactly symmetric so when you say multiple level JSON you assume that in this case basically the answer to that is you sniff the JSON dynamically within the directive instead of actually assuming or defining the values either on the directive or on the controller you sniff the JSON dynamically in order to find out what various options are and these options vary themselves this particular chart also does that sniffing the JSON and then automatically updating the various level options we say here's the image here's the source go get it on the scale somebody who wrote the browser wrote some way in order to do all of this happen and using Angular Directives you wrote your interactive chart which is primarily like here's the you go get it and give me a chart you can add as many options you like to that or as little options you want to add in order to keep it simple so any questions it's probably something you are referring to is if you see all of these have URLs also on these here in this case the URL ends at somebody but in case you want the in-country versus country home etc. to be a part of the URL then you can define root specific to that and then when you have root specific to that you can share in fact I was very specific very keen in order to build you see the Facebook Twitter and share buttons there so high chart basically itself also has an exporting option which exports the current image that is existing so you click on this on your mobile device or this is not that is not it there but once it is there or on the web you call the high chart exporting library in order to be able to see exactly same chart without considering them as radio buttons which basically sees the state you can do it as a part of the URL using roots the problem yeah so who asks there is something similar so when you ask the link if you see the link with the back port so that is what name which you pass all these data and all these narratives if I try to create roots then it really messes with the way I am working all around right now instead of passing the roots maybe I can pass these as options and when it comes to this root and the get parameters I give to this chart that may be a better option Sanskrit so I am totally new to Angular I realize that you completely define the new element called chart which you created without simple image targets so do you have any idea to define your own that be your own element so is that now valid absolutely I think if you look at the future of HTML5 the way it is going one of the most important things that they are coming up is web components web components is like these components not web components is an Angular component I would say Angular directly is an Angular component a web component is basically somebody builds something like this basically and then shares it you can use it in your project as a web component so this is absolutely the right way to go about it I don't see any problem using this in fact Shab can answer more one thing is if you are using new element characters just be careful about IE IE7, IE8 if you need to support it don't do this otherwise you have to do the document of create element to tell IE that this is a key validation if you don't need to support IE in this case you have to be using and deliver and give an idea until you use that the way I would answer that is don't support IE and go ahead using it so so in summary so like we discussed earlier Angular brings engineering into the front end the right way the interactivity that Angular brings and then high charts provides the charting they go very well together there are other charts I think the next session is about one of the D3 charts so where he discuss about it's a little messy because D3 has its own binding Angular has its binding so how do you remove D3 to not have its binding and use Angular binding so you need to figure a lot of things out probably a good session for that we could do but if you are using something that does not have binding just provides charts it goes extremely well with Angular yeah so if you are using my interactivity choosing filtering on the front end because I don't want to see newspaper published charts on a particular half I want to be able to see and create my charts out of it I don't want to see that when such in-score essentially what is the percentage of time they have one person in their last I want to see when such in-score because all we are caring about in this case is just Jason coming to me somehow you could add a back end in the form of I if I were to use a back end I use Django framework which is amazing provides a lot of features in order to refer to the database and provide it but this particular application I worked on actually used a real CPI which is a they will use flask restful and then there is Seneca which is basically a Node.js very thin wrapper on top of Postgres and Radis only which can pull out the necessary Jason give to you use any back end you want as long as you provide the Jason this thing works yeah building your applications using Angular is absolutely at least an order of magnitude rather than not building an yeah so because all of this is the only thing we refer to from the server is a Jason nothing stops us from bundling all of these resources together and then putting it in an app so all the big data insights will be available to you on your phone very beautifully at that yeah with all of these it's absolutely a joy to work with Angular I think I should thank Sham and Misco and all the 600 other contributors for their 7000 or so full requests so in order to make it a joy for me to use Angular that's what I've got thank you if you have anything to talk about talk to me please feel free to contact me yeah I think you can already Google for it it's on both slideshare as well as one speaker deck any more questions so with respect to the performance with respect to using high charts I think the most important question there comes is the performance of the library we're using which is high charts which is reasonably good I have developed an application with hundreds of charts and then the performance test I've done is actually across the application and it's absolutely very fast I haven't seen any issues therefore it hasn't necessitated me in order to dive deeper into any performance there's no issue but there's no issues of high sir the unit test whatever we have it works for the chart also because I don't think you're doing the normal testing and it works for the rounds it's a good question I think it's a very good question there are several ways to do testing of charting libraries one way to do would be you create a chart you take an image artifact using the exporting thing and then what you know is right you save it in your database and then you run the test next time you provide the same data and using the API and then go the way for the PNG if they match you're good but I think that is not necessary what are you ending up testing anyway are you testing how high charts and other charts that's the job of high charts people in order to test I wouldn't want to test that what I want to test is do you provide the same series thing that I provide to the high chart which is easy I mean you can document an input JSON and then what the output JSON is and then if you want to run test you pass this and then verify this against what was in your database as long as they are same if you have the exact same JSON then you're good to go if you log in whether you have one of the scores you have it's a violation there are costs there how are you getting good outcomes not sure for the question so as long as you verify when you view this data to the chart this PNG is sorry this output in the form of series data is probably which you attach to the chart if you have evaluated this already irrespective of what user you obtain and then different kinds of data that is passed I would assume appropriate chart would be rendered to the right so if you want to go really for length you should probably verify the image why wouldn't do an image test I think it's going little too far I would only do the testing of a method which takes the API put it on provides me the series data which I pass to the HR because anything more than that and you're testing high charts I don't know unless HR is my equity I would enjoy this anything else alright, sounds good thank you


Hello and welcome to the show, it's me John Park and it's time for John Park's workshop. Thanks everyone for tuning in. I see we've got a bunch of people over in our chats, including the YouTube chat and our very own Discord server, which if you don't know about it, that's where most of our chat is happening. If you're off somewhere in Twitch or Facebook, somewhere where you're like, hey, where's all the conversation going on? That's it, right there, that. And you can get there by going to a-to-fru.it slash Discord and this is our live broadcast chat channel, but we have a whole bunch of other channels. In fact, I'll expose them right now. Let me just, whoop, a little bit like that and you'll see, yeah, there they are. Welcome, code of conduct, announcements, general chat, live broadcast announcements, and so on and so forth and a whole bunch of help with sections or channels, which are great for helping people with projects or getting help with projects. So head on over to our chat. If you're not there, it's a fun place. Hey, foamy guy, nice to see you. Inescu, FX Music. Hello, hello, Andy Calaway. Welcome, hey, Jim, Dexter, and so next thing I gotta do is crack a sparkling water. Do you guys drink Topo Chico where you're at? It's been very popular here in Southern California for a number of years. Very bubbly. Not the best thing to drink when you're on air because, you know, but that was very hot and thirsty. All right, what, what, what's going on? So, wanted to mention a couple of things. First of all, as a couple of people mentioned in our chat, check this out. Today is a new product day for some Raspberry Pi Pico boards, very exciting. I think at something like 6 a.m. this morning, our time, what's that? Maybe it was 6 a.m. East Coast time, probably because it was probably midnight in the UK. Raspberry Pi Foundation has announced some new boards, so the big, big announcement was the Pi Pico W, which is a wireless board. So it's the Pi Pico that you've come to know and love, like one of these. It's a regular Pi Pico, except this one has a Wi-Fi co-processor on it. I don't know many of the details on it. In fact, what's the processor on there, does it say? Someone'll know. It says that it has an Infineon CYW4343, which is gonna give you 2.4 gigahertz Wi-Fi. There is capability on the chip for Bluetooth flow energy, but I don't think that's been actually implemented yet. So as Todd was joking in the boards there, it's been like 12 hours since this thing was announced and yet there's still not circuit Python support, but I imagine that'll be coming soon. We'll be selling those, I think they're like $6. We don't have any yet, but we will. And I'm gonna guess these will be much more abundant than a Raspberry Pi Raspberry Pi, so don't worry too much about those. Some people I know have ordered them already, either directly from Raspberry Pi or Pimeroni or other places. And then the other announcements were the regular Pico, except you can now get a version that has no cast-alated pads, but the headers have already been soldered on there, like this one right here, the Pico H with soldered headers, has this little arrangement on the bottom, a little bracket with the header pins and that's pre-soldered. Someone was asking me, why does it look like that? Why isn't it your more typical, these kind, what am I plugged into here?  Why isn't it those types? Well, I think this is probably for manufacturing, that's my guess, is that that's the easier part to pick and place and wave solder. That's what I'm guessing. If you look at the top of this, it's neatly soldered on there, it looks like. But I'd love to hear if anyone in the chat has ideas as to why it's so fancy, because I've never seen one like that before. So those are the new ones, and then there's a version of the Wi-Fi that also has the pre-soldered headers. So we'll really have four of them, regular with headers, Wi-Fi, Wi-Fi with headers. So super cool. And let me know if anyone gets their hands on them and has any cool experiences with them and how you're coding it, what's the deal? I'm guessing MicroPython is the main way right now. So that's a new announcement. And then we also got our jobs board. I don't wanna forget to mention, if you head on over to jobs.aderfruit.com, you will see a bunch of job openings available if you're looking for work, if you're looking to get hired. Also, if you're looking to hire someone, it's a great place to go. It's a free jobs board. And check out this position right here. It just went up, science kit builder from MicroKits in Charlottesville, Virginia, which, hey, I went to college there. I know Charlottesville. I wonder who these people are and what they're up to. It looks cool, they're doing STEM kits. And they're looking for a kit builder there. So go check out, it looks like this is part-time fabrication work. If that's for you, go log in there. You just need an email address to log in. Doesn't cost anything, like I said. And there's plenty of other positions. But that one caught my eye because, hey, Charlottesville. All right, what else is next? Oh, did you know that I've got a show on Tuesdays? It's called JP's Product Pick of the Week. And on that show, I like to take a look at a new product or product from our archives that's popular and give you about a 15-minute run-through demo, history of the thing, code examples, if that's pertinent. And you get a huge discount. This week goes a 50% off without a need for a coupon code whatsoever. There it is. It was this beautiful charger, universal charger that you can use with solar, but also with DC, kind of any DC source as well as USB. And there's no coupon codes needed. You just put it in your cart and you get it for 50% off during the show. So watch this show. Tune in if you can. I know it's not possible for everyone. I'd love it if it were. But come on and tune in on Tuesdays at four o'clock Eastern time, one o'clock Pacific. Here's a little one-minute recap. The BQ24074 USB DC and solar battery charger. Super cool feature of this is, of course, solar.  And in this case, I'm gonna plug in one of our little USB power boost. So this is now converting whatever's coming off that battery. And now I can plug some USB whatever into it. So you could charge a phone off of here. In this case, I've got one of my little Korg NTS1 synths plugged into here. And so now, right, I've got a USB device. I'm in the sun. I'm charging. I'm running this off of here. I'm charging the battery. So I'm running off of a stable supply. Product pick of the week this week. It's the BQ24074 universal charger with DC, USB and solar. Yes, indeed. Cool chip. Very nice. So, let's see what else have we got. I've got a little bit of a setup to do. We're gonna do the circuit Python Parsec, but this one involves some websites, as well as a coding window and some cutting and some pasting, some camera views. So let's get set up for that and then we'll roll. So here we go. Okay, let's see. Before we get going and move a bunch of windows around here, I will need that one and I'll need that right there. All right, some of this will happen behind the scenes, but I think you'll dig it because it's pretty dang cool. So for the circuit Python Parsec today, I want to show you how you can convert an SVG graphic into a vector IO graphic that you can use with display IO in circuit Python.  And what I'll do is show you this first. What I'm gonna do is I'm gonna adjust the scale of my graphic and hit save. This is the cool thing about scalable vector graphics. When you want to, you can change the scale and the image still works. So here I've got a very cool bat logo. I'm gonna pump that up a whole bunch more. So unlike a raster graphic, I'm not stretching pixels out and making a mess and aliasing things. Instead, I've got a number of vertices here and lines drawing among them using our little line object. You can see in the code here, I am using vector IO, that's the key thing. And then I have this really cool class that Todd bot wrote called SVG logo. This makes an SVG logo point set into a vector IO point set. So if you take a look at my Chrome capture right here, I have this site up path to points. It's in Java and what I'll do is I'll drag an SVG graphic. You can find these all over the place. And here it's turning that into a set of vertices and you can make some adjustments to that and then you'll save off that set of points. You'll run it through a little Python script and then you have something you can cut and paste into this here. You can put multiple paths together. This originally came from Todd's DVD logo bouncing screen saver. And that's about all there is to it. I can set the scale of it. I can set the dimensions of it if I want. But here I've just got a little function where I can make this as big as I want. Eventually it's gonna fly right off of the screen. But a really, really handy way to make some graphics that you don't have to just have one fixed size of. Now you can see it's not super fast to draw here but in this case it's really big which can slow it down. But you can use smaller ones in movement or you can use larger ones static. And so that is how you can turn an SVG graphic into a vector IO shape inside of circuit Python. And I'm psyched about it. And that is your circuit Python. Parsec, parsec, parsec, parsec. That sure is the coolest thing, right? I realized, so I can show the bouncing logo thing sometime, really fun. And hopefully Todd can throw some links up in the chat if you're interested. I've got, actually I've got one right here. This is the page that'll get you your SVG points and then here's a little gist on making a little Python script that'll convert, it'll sort of massage those points into something usable. This is a work in progress for Todd so I wouldn't be surprised if he adds features and makes all kinds of improvements to it. Pay attention to Twitter and Todd's Twitter feed because he posted this a little while ago, whole thread about how he did it and it just kinda looked cool and went right over my head and then I came back to it a couple months later and said, wow, that is really, really cool. So, that'll do it for our circuit Python parsec. Let me take this out of the way here. I love that little, that logo, huh? Yes, and Todd's mentioning in the chat there, it's not technically an SVG, it takes the vertices from an SVG and allows you to use those as vertices for line segments. So, these are not infinitely smooth, like a proper, like bezier curve or something like that. These are a set of points and you can adjust with that tool how many you want. You can make it lower resolution of points if you want but it'll still scale nicely. All right, let's see. So, got a couple things going. First of all, I am excited that Liz and I were able to publish our guide. Let me head over to learn guides here real quick. Learn on cassette tape hacks. So, I've been working on some of the cassette hacks here in the workshop and Liz was also working on one. So, we now have a couple of these really great mods that you can do to cassette players and I encourage you to check these out. Look at these really great colors on Liz's build there. Super cool.  Mine adjusts just that slower to faster within the original motor range via MIDI. You could also use control voltage and one of the reasons I bring this up is that in my demos, people have asked about gating the volume. So, what does that mean? When I play this, if you've seen me, I won't demo it again right now, but if you've seen me play this, it's got continuous tone, kind of a droning tape loop. And then when I press MIDI keys, it changes the pitch. It changes the speed of the motor so it changes the pitch of that playback. But it's continuously playing. So, if you wanted to do something where you only hear a tone when you press the keys, that's totally possible and what that involves is sort of the second critical component to electronic music making fundamentals other than pitch, which is gate. And gate refers to kind of an open and closed gate in simplistic terms of can I hear a thing or not?  All of those things are sort of more advanced takes on this very simple idea of attenuating the volume or gating the volume on and off. So, what I wanted to do is actually talk about a couple of methods I may use. I'm not gonna try any of these on the tape deck today but a couple of methods that have been suggested in the forums or in our chat on Discord about how to gate this player and then rather than try stuff with the DAC on the tape deck, I wanted to just show in fundamental terms how that works using a couple little synthesizer modules. So, let me jump over here to the bench. Oh, I gotta focus that camera. Let me do that right now. And I'll explain what I got going on here and how this is relevant. Pop up a view over here too and I am going to just lower the fan speed of my AC so it doesn't blow quite so hard and shake the camera. One second. There we go, that's a little lower. Grab my water as a head over there. So, right, so here's our tape deck and inside of this we have essentially a path of the tape head that's reading the tape and an amplifier, a little tape head amplifier that are then sending that audio out over both the built-in speaker here and this little headphone amplifier out. So, there's a volume knob on here. So, one approach would be to adjust that with a digital potentiometer. Some other methods involve using a type of a gate and one suggestion that I really loved that C Grover made was what about using a Vactrol gate? So, I think I've demonstrated Vactrols on here before. If not, I might show like a live build of one but a Vactrol is a really cool way of essentially switching current on and off in an electric circuit that involves no actual physical connections, but instead an optical connection. It's kind of like an optical switch and very often they're made with a photo cell and an LED. So, if you send voltage to the LED, it changes the resistance of that photo cell and if you turn the LED dark, it brings that back down. So, Vactrol gate is actually built into this little module right here. This Laurentide synth works. This is a gate made with Vactrols and what I'll do is I'll demonstrate if I, let me turn on the audio here. If I start with the path that's the most similar to the cassette player to my speakers or effects boxes right now, it is like this oscillator here. Turn that down a bit. Okay, so as I change the tape speed, I'm changing essentially an oscillator but I'm running straight out to my, there's a powered speaker here that I've got. If I add this little Vactrol into the mix here, I'm gonna use, this is a pair of them, I'm gonna use this lower one just to keep the wires out of the way. What'll happen is I can take that same output from the oscillator here, this castor and Pollux and it is trying to run from this red wire, the audio is trying to run out to my speaker except the Vactrol has not been excited yet. It hasn't been lit up so the resistance is too high on the little photo cell in there, no audio gets through. So the ways of gating that, the one that's most similar to using my MIDI keyboard when I send a MIDI signal, I can say, hey, the gate should be open and that will send some voltage over my, another channel of my DAC. So in this case I have this really cool little module called Big Honking Button and I'm just using it to send a gate signal right now even though this can also do other stuff, play wave files and so on. So when I press this big button, it is going to send some about a five volt signal I believe to the Vactrol in here which is gonna light up the little LED in there with some current limiting resistors and that is going to drop the resistance of that photo cell allowing the audio to flow back through. So this is the switch and if I press this, you'll hear it gating that. So the equivalent when I'm pressing, let's say a couple of different keys on the keyboard would be press it, press a different key. So every time a gate signal is sent to the Vactrol here it either allows the audio to go through or when I release it, it stops the audio going through. So that's kind of the fundamental thing that I need to do on here. Again, there's a couple methods. One would be to use a digital control over that volume potentiometer and another one is this notion of introducing a Vactrol gate in there or some other kind of attenuation. But I like the idea of the Vactrol and the Vactrol kind of naturally has a little bit of a, it's not a hard on hard off square wave that has a little kind of little gating envelope, especially on the tail of it kind of won't dies off a bit. And so what I wanted to do also is show you that the gate there doesn't just have to be controlled by kind of a one key at a time thing. And the pitch doesn't just have to be controlled by me moving that knob, but just extend this kind of one sort of piece of gear further, which is to introduce a sequencer. So let me zoom out a little bit. This is a fun little sequencer. I've maybe shown this before. This is from Korg. They cost about $100 and they're just a workhorse sequencer. It allows you to send different control voltages, which is what adjust the pitch or in the case of this guy right here would adjust the motor speed. So it's certainly possible to use this sequencer as part of the part of the mix with that tape there. And it sends out a gate. So I've actually got two cables here connected, one to send out CV or pitch information and the other one to send out gate. Now, if I kind of go back to where I'm not gating that signal on and off with the the Vactual anymore and I just have a continuous tone. So I'm not using gate at all. Now I can tell the sequencer to change pitches on each step, but it's continuous, right? So that's really similar to how my tape machine works right now, which is it's always gonna play whatever its base frequency is or base speed until I tell it different pitches. The beauty of adding gating is that we can now have notes go on and off, which is pretty pleasing. So to do this, what I'll change about the setup. So this is the same setup as before here, and I've got audio coming out of my oscillator going to the Vactual gate and then going to my powered speaker. Pitch is now being controlled on the oscillator by this control voltage, this pitch control voltage, and then this gate, which is actually also a kind of control voltage, but for clarity's sake, it's just called gate, but it's essentially a zero or a five volt usually. So for the gate, I'm gonna plug that right into that Vactual again, same place I used to have the button plugged in. Now this is whenever we move to another step, if that step is lit on, we're gonna hear the gate open and we'll hear a note. If that's off, we won't. So now we'll get a rest for the first time with this. So here we go. All right, so we can just say, just give me one gate at the beginning. Let's put a second one. Okay, so that's the idea behind that. And I didn't have time to try building a Vactual for this yet. That's gonna be coming up, I think. I think it's a fun idea. I may try just one last thing, which is I don't have my MIDI setup for this, so I'm not gonna change the pitch of this, but just to play my cassette through this Vactual gate, it should allow me to send the audio into there. I don't actually have the right cable right here. Let's see if it works as a stereo out. We'll see if it works. And so, presumably that's trying to play the cassette right now through there and there we go. So let me turn the volume up. I've broken something that I run out of tape. No, just gotta hold it right. Something's acting funny. Yeah, I don't think the mono cable plugged into there is making it too happy. Do I have a splitter? I don't think I do. Well, hopefully you heard it there for a second when it was working, so this audio is kind of not flowing so kindly through here, but it is being gated off by this. And there we go. I can't move now. I might be able to slow this down a little just by putting my finger on the reel. No, I stopped it, now I've made it angry. Yeah, I'm gonna break the cassette. There we go. Right, so I won't be able to change pitch just because I don't have pitch control on here right now, but that's ideally what I'll have is the MIDI we'll be sending to the QT pie and then one channel of the DAC tells the speed control and the other channel of the DAC is opening and closing the VAC troll. I will another time show, let me stop this here, how a voltage controlled amplifier or technically a voltage controlled attenuator works, which may be a little more forgiving of the low current that I send out of the DAC. We'll see that may have a lower current requirement than the VAC troll gauge, just depends on how that's been designed. But I think I probably can't easily take it apart and show it, yeah, but we'll explore the VAC troll thing because even just that on its own is super cool, super interesting. It might be fun to make a demonstration one that we can look at. So that's the status of that. And then I also wanted to update some thinking on the little drone loop.  Yeah, that did sound a bit like a dial tone there or something. DJ Devon three says, I still think trying to decouple the tape head with a mechanical piston switch really, really fast would be oddly satisfying. Yeah, I love that. Oh, hey Steve. Okay, you're on late to the party. Welcome. So onto our drone, digital drone synth. So this is not what I'm gonna do physically with it but this I had on hand. It's a pretty good way to get started on this project. So I'm using a KV2040 here. It's got eight wave files on it that I have playing in sync simultaneously when the code on there starts. It just opens up eight of these voices on the mixer, on the audio mixer in circuit Python, starts them playing. And then last week I did kind of a hacky version of going from having momentary switches to having toggles. So it'll play a drone in one of the eight pitches that I have on there and add them since they're always playing. We can mix them all in with the audio mixer. So that I did a better version of it, a better code now for dealing with that. I'll show that in action. And I've just started adding a level knob. So each, my idea for this just to keep the hardware a little minimal rather than having eight knobs on here is whatever note I play, I can then go and adjust the level on that with the encoder and then go to a different one. Idea of using an encoder for this rather than a potentiometer is with an encoder you can not worry about making a jump to the level for each one you go to. So if we set the first note to a really low level and then come up to the top note, as soon as we touch that it would jump down to the lowest level. With an encoder we can do these tricks sometimes called pick up, where we pick up wherever we left off essentially when it starts moving, it'll grab the existing gain value and then start adjusting that. So let me plug that into the speaker and show you how it's working, show you the code and talk about issues and where it's going. So let me go to a little down shooter view of that. Okay, give that some power. I love these little buttons but the play, the little slack in these button caps makes them always wonky. Kind of could use a little face plate that they're partly recessed into that's fairly snug so they can't wiggle like that. Constantly driving me bonkers. Okay, so if you remember from last week what I've done there, sounds like the beginning of a Prince song. I created a series of these short looping sine waves in a series of pitches. I picked eight tones to have them play so I can. As I also mentioned last week until I get the version with LEDs in the switches I never am sure which ones are playing and it takes forever to turn them all off. Hello El Mario says Olaf from Spain here over on YouTube. Welcome. So what I was talking about with the addition of gain. So let's play a note and then I think the way I have this working I was just changing this earlier. I'm adjusting the gain now but I don't have it actually engaging until I press that button again. So now it's really quiet. So here it's medium, louder and I can add some other pitches in and now this will only change the volume of that higher note.  So that's not ideal but that was just sort of the journey I'm on to get this to work. Biggest issue is I am very iterative with coding these kinds of things and with this RP2040 chip and the audio mixer and USB kind of melange there is a need to reset the board each time you want to iterate and it takes a moment to kind of jump in there in the REPL and cancel the execution of the code. Otherwise it just kind of crashes and freezes. I've run into this before. I need to update. I think there's a bug request suggestion type of thing in GitHub and I need to see what the status of that is and try to get that fixed. So it's a slow going for me getting this to work but let's take a look at the code and I'll show you how that's set up currently and close that code file and open up a new one. Okay, so here you can see are my eight wave files that I'm playing and one change from last week is that I'm now using seesaw to add that rotary encoder. Just a nice little rotary encoder breakout makes it nice and easy. This also, by the way, does have a switch on it so I add an eighth button. I'm not using it now for anything but this is a push encoder so I can pick volumes. Whoa, I made the headphone jack angry. Sorry, but yeah, you can click that to be another input device. You can also do things like click rotate so that's kind of like a whole second set of rotates that you can have is if I'm clicking when I rotate that's fairly common on interfaces and car stereos and things. And this has a NeoPixel on here that I'm not currently using so that could be another way to tell you which key you're on or what the volume level is for the key you're on or something like that. The events here or the while true loop you can see I check for event with the keypad library so I'm checking to see if any of these keys get pressed. When they do, I then run through this right here using the if the event is pressed I use the handle mixer function and if you look here in the handle mixer function this has changed a little bit the voice becomes the mixer dot voice number and then we can change that voice level to be either zero if it was previously not pressed or change it to whatever the value is in this dictionary or list of lists. So initially they're all set to 0.4 and that's the value I'm changing with the rotary encoder. So in the handle mixer function here since it grabs, where'd it go? That value from here wavefiles dot number like let's say it's the second button so be a one and then this is asking for whatever that gain value is which was initially 0.4 when I'm changing the potentiometer I'm changing the value in that list so that's what's getting updated and then when we actually press the button that's when I'm asking for it. So the way that's changed is when the position changes the last position becomes a position so we know we've changed and can have a reference point. Currently I'm printing that to the REPL to debug things and then we set this variable called current gain to be whatever was in there before. So if it was at 0.4, okay I grabbed that number and this is part of where I'm working towards being able to just grab the existing value and then add to or subtract from it instead of making a big audible jump. And then I change the value in that table to be I'm constraining within a zero to one range using simple math library. Whatever that current gain value was so let's say 0.4 plus and then I'm doing some goofy math right now that'll probably update in the future with a map range function but right now I'm saying the position which is gonna be zero, one, two, three, four, five, six and on and on and on as you rotate that encoder it changes by one. So I'm making that into hundreds and so we're adding a hundredth to the value and then I'm constraining that to be between zero and one. And then here again just for debugging I'm printing. I was trying to do handle mixer in here but this was turning the mixer on and off every second click of the encoders. That was no good so that was where I was just prior to the show and then took that out and just have it only do the handle mixer call when I press it. Question over in, yeah first of all a statement Marius says never touch a live jack, absolutely. Marius says instead of the rotary can use a capacitive sensor so you can use a wireless change of the volume. Yeah for sure you can definitely use something like a capacitive sensor for this. You could have it be constantly watching. You could have it turn on notes and then adjust those almost like a volume of a theremin type of thing. You can use faders for this slide pots but they would have that issue of kind of getting stuck physically where they were for the last note. So let's see. Questions in the chat. Krippnippej says is the gain value implemented like a gate sounds like it activates after you turn the knob and press the button. Yeah currently, oh you said the explanation answer the question. Yeah so it should be a fairly smooth adjustment of that gain. The game only goes 0.0 to 0.1 but we could get some subtle changes in that with the knob but my implementation right now requires me to click the button. Let's see. DJ Devin asked what is seesaw or maybe was answering someone's question pasted in there. Thank you, a response. Yeah the seesaw chip is tiny little, I forget which one we're using now. We have a tiny little microcontroller on the bottom of this PCB that has analog and digital inputs and so it's just reading stuff like the encoder and the button. It's also handling writing out to the neopixel on there and then sending all of that stuff over I squared C. So the seesaw devices are great because they basically offload a whole bunch of GPIO thoughts to an off board device and then whatever it came up with based on the sensor or the controller that's on there it just sends that over I squared C back to your microcontroller. So that's really efficient, both hardware wise and coding wise. And you can plug them in with these cute little stem of QT cables which I love because they chain so we've got, you can do multiples on there. In fact I just stole that one off of this because I couldn't find any others but this was a demo I had built before using some switches and I had four. Now three of these rotary encoders ganged up and all of that is plugged over stem of QT using those seesaw chips to process the IO. All right, yeah, so that is the state of it. Where I'm thinking of going with this, I have a couple of thoughts. So I am gonna try to use those stepped LED switches that look like an 808 drum machine style switch because I love them. And I asked them more if she could stock them and she said yes and she got some samples in thanks to her we are gonna have them in the store. So I'll be able to use some cool stepped switches which will show me when they're lit up. You could definitely do this instead right now, today, using what I have there which is our mechanical key switch stem of QT board. So that's four mechanical keyboard key switches with integrated neopixels and you could put two of those together and get the eight buttons. That would certainly work as well but I'm thinking of using those stepped switches because they're awesome. And using like I showed last week an OLED display with some cool tape reels on it showing us some information and just looking cool. And what else? I think that'll be it, audio out on there. Probably a Feather RP2040 but maybe, maybe a Metro M4 or rather a Feather M4 because I also wanna try using a teensy audio library which can do things like some speed and pitch shifting can do more sophisticated audio stuff. So I may try to have it where it can run both. It can run a simpler version in circuit Python and a bonkers version in Arduino using the teensy audio library. So those are some thoughts on that. And form factor wise I'm thinking of, have you seen this amazing looking, let me find it on here. It's like a digital cassette player in a 3D printed case that looks like an old tape recorder. Someone find it and put it in the chat. It looks like a Fisher price version of a tape recorder with an OLED. And I'm not seeing it right now right away. Yeah, I'm not searching for the right things. But anyway, I liked the idea of making the enclosure have a cassette well but it's actually got an OLED of a cassette in there. Really cool.  I don't know, something fun like that. All right, is that it? Let me know if anyone's got any other thoughts or questions in the chat. Oh, Ezra Kornfeld asked, are those buttons and recording cards for drawing program? Yeah, I had made a Photoshop palette kind of artists tool there so you can pick your gradient and brush and color picker, eraser, and then you can change things like the brush radius and opacity and a couple other things using those. So that was the demo that I had done on there. I don't think I ever wrote a guide up for that but that was the idea behind that. It was just similar to you've seen probably some commercially available sort of plug and play encoders and sliders and stuff that are used for Photoshop and Premiere and stuff like that. Oh good, Todd found that, thanks man. Here is what I was talking about in the Discord. Look at that, that is awesome, so adorable. So OLED to act like the tapes and then they put some mechanical key switches in a rotary encoder and I think that's a player. It just plays back MP3s or waves. So very inspiring, I love the design of that. Super cute. That was on Hexter IO. Reads micro SD cards and uses ESP32 for processing. Really cool. Yes, Ezra, similar to a drawing tablet. Absolutely, yeah, with the buttons and things on a Wacom and that kind of stuff. All right, well, I think, whoops, I'm gonna disappear myself. I think that's gonna do for today. Thank you all so much for stopping by and I believe, Tim, if you're around, correct me if I'm wrong, but I believe there's gonna be a deep dive with Tim slash foamy guy tomorrow and then we'll get back to our regular slate of shows I think next week everyone is on. So we should have, I'll be doing a product pick of the week on Tuesday. We'll have show and tell on Wednesday. Ask an engineer is back. There'll be 3D hangouts on Wednesday morning as well. Sorry, I jumped right past that. I'll have another workshop show on Thursday and another deep dive with foamy guy. And sorry if I missed anyone, but yeah, we got a bunch of shows coming up next week. So please tune in for those. Thanks everyone for hanging out in the chats. Thanks everyone over in YouTube, as well as over in our Discord. We appreciate you and thanks so much for answering questions for people and asking them keeps it fun and lively.  Thanks everyone. Operator for the Institute of Zom. John Park, this has been John Park's Workshop. Bye bye.


Around Dodge City and in the territory on West, there's just one way to handle the killers of the spoilers, and that's with the U.S. Marshal and the smell of gun smoke. Gun smoke, starring William Conrad, the story of the violence that moved West with Young America, and the story of a man who moved with it. I'm that man, Matt Dillon, United States Marshal, the first man they look for and the last they want to meet. It's a chancey job, and it makes a man watchful, and a little lonely. I'm doing back here. See somebody coming? Hot out there in them rocks, Rack, I figured it'd take me a spell in the shade back here. Get on back and watch the road. I'm always watching, listen, Augie, we gotta keep ahead of the law and make it to the border, don't we? Sure, Rack. We gotta get us a horse that can move instead of that lame one, don't we? I know that.  Somebody comes long riding single, you come fetch me, but till then you stay put, now get. Seems likely you ought to do some of the watching. Seems likely somebody has to do your thank you for you. Gone now. You got some more, Augie, in the middle? Down the road, a rider coming slow. You get down behind them rocks the way we planned it. I'll cover you from up here, and don't you start nothing till I say you hear? You keep still. More, Rack. Sure. Up now. Head smart, mister. Got the gun. Get off the horse and start walking, nice and easy like. Right back down the road. I'll wait a minute. I got him. I got him.  Come on down and look at him, Rack. I told you not to make no move. I had to shoot him, Rack. You didn't do a very good job. He ain't dead. He's out, but he ain't dead. Let me finish him off, Rack. Just one shot. I want that badge. What are you talking about? What badge? What turned him over, Rack? He's a long-handed. U.S. Marshal. I always wanted me a badge like that. A Marshal. You shot a Marshal. The first man you ever take a shot at, and it's a U.S. Marshal. It ain't that funny, Rack.  Wait a minute. What makes you such a killer all at once? I told you. It's a badge.  I want to wear me one. Now go on, Rack. Stand back and let me finish him. Augie. Put it down. This is mine, Rack. I got a right to do the shooting. Ain't going to be no shooting.  Then let me get the badge on. Leave it, babe. I got me a better idea. You ain't ought to take him away from me, Rack. He's mine. I ain't going to take him away from you. I'm going to let you keep him. I'll give you a very own U.S. Marshal. I don't want him. I just want that old badge. Listen to me. We got a fur piece to go with that hold up money, don't we? You're going to need to keep telling me that. And it's likely that we'll run into some rough spots, ain't it? Well, sure. But we got us through so far. We've been lucky. But if we got us our own U.S. Marshal, ain't nobody going to stop us all the way. They ain't? No, they ain't. They heard us. They got to hurt him. And they ain't going to do that. He ain't going to let them. Maybe. What about the horse, Rack? This way we still need another horse. We can always get another horse. But it ain't likely we get another chance at a Marshal. We'll drag him up that broke down shack. See if we can fix him up. You know where the badge? Augie? I'll make you a bargain. How's that? We get across the border. And he's all yours. You can finish him off. And you can wear the badge. Come on, now take it. Thank you, Sam. Here's your beer, Doc. Oh, thank you, Chester. Yes. Mighty big of you didn't buy it this way. Well, I tell you, Doc, the way I figure it, a man has to do the buying once in a while. And there's a chance he'll be thought of as a cheap skit. Oh, you've noticed that, have you? How's that? I said, well, hello, Miss Kitty. Hello, Chester. Hello, Doc. Kitty, how are you? I don't see you in here very often in the morning, Doc. Well, Kitty, Chester's buying. And I figure I better accept his offer before he changes mine. Oh, now I've stood good for it any time, Doc. I assure you, Chester. You heard anything from that? Oh, no, Miss Kitty, I ain't. He was supposed to be back yesterday, wasn't he? Well, that's what I thought. Now, you can't never tell what he might have run into up there and line it. I can imagine. I remember one time we was up there. We liked to never got away. Oh, you had a hard time transacting your business. Well, no, it wasn't that exactly. It's just that folks in that saloon were so sociable. Yeah, well, I guess that way sometimes. Well, I hope Matt isn't having such a good time socializing that he forgets his way home. Oh, now you don't have to worry nothing about Miss Dylan. Bring him over here, okay? Set him down on this crate under the window. I don't know if he can walk. I can walk, all right. Well, now, Marshall, that's just fine. I'm glad to see you come out of it so good. Come on over here. What for?  Well, you ought to know. Now, I didn't do that to you, Marshall. I'll get there. Ain't that right, I'll get. Sure is. By right, you ought to be my prisoner, too. Bring him over here. Set out on there. And then turn your shoulder toward the window. Get a look at this. Hmm. Hand me a knife, August. Here. Huh? You're going to cut on me with that thing? You want that bullet out, don't you, Marshall?  You might as well leave it in. Well, now, I sure do beg your pardon, Marshall. I sure wouldn't want to dirty you up, man. Here, I'll wipe it off real nice.  Doggone is right. Before. How's that, Marshall? Get on with it. All right, then. I've waited a long time to work on the likes of you. I want to be sure of things that are just right. Yeah, I'll bet. Hold still now. Little rough, Marshall. Well, I'm sure sorry to hear that. You want me to hold him, Rick? You don't have to hold me. Why, Shucks, no. I'll do it, Marshall's a brave man. Marshall. Get it, Martin. Fast out. Just getting to enjoy it. Hold him up here. We'll get it out, man. Here. You want to keep the bullet, August? I don't want no bullet. I don't want to hear no more talk about that badge. Come on now. Help me lay him down over here now. Think he's going to man? Give him a day or two and see. He ain't no good to us unless he can ride. Rack, hmm? Just while he's lying there, can't I wear it?  Now don't you start hitting me again, Rack. Don't stop my head to hurting me again.  Give another piece of shirt. I want to bandage that shoulder. Sociable, up to date, debonair. What's this? A new word game? No, I'm just mentioning the qualities that people admire and other people. Oh, I see. If you're sociable, up to date. And what was that other word, debonair? Yes, debonair. But listen to it this way. Sociable, up to date. Notice how many of your friends are serving Pesticola these days. It's the up-to-date refreshment. Be sociable, sir. I'm awful dry. Rack and his. Is there anything wrong with you getting me some water? Rack says we need you to ride with us. Had men better if he'd been easier with that knife. Rack likes to cut. Yeah. Where'd he go? You went to get another horse that shouldn't be safe. Don't worry, Augie. I'm not exactly able to go after him. Rack don't like me to talk. You always do what he says. This time you ought to be glad I done what he said, Marshal. How's that?  I was the one that shot you. I should have had the badge. The badge? Oh, my badge? Rack didn't have no right to take it. He figured it'd help him get close enough to get a horse. But I was the one sure to worry. Well, what would you do with it? Well, just wear it around some. Feel like somebody. Folks think you're important when you wear a badge. I'm smart. I'm not always. How's that? Oh, never mind. Augie, how come you let Rack get away with taking it away from you? Now, Rack does the thinking around here. Uh-huh. He beats you up pretty good too, doesn't he? I ain't said nothing about that. Those marks on your face, they didn't just grow there, did they? I wanted the badge.  You ain't all that, Marge. Old Rack says I ain't smart enough to wear it.  Yeah. Yeah, I was. I wasn't sure you were. I think you're smart, Augie. I think you're a lot smarter than Rack gives you credit for. We never gonna stop to eat Rack. My belly's hurting empty. You gotta taste the prayer of grass and snakeweed. You go right ahead and stop. You ain't even seen a rabbit for miles. Seems like we ought to have some grub left. Seems like you ain't your way through as much as anybody. Put your belly aching. Marshall ain't belly aching. How are you, Marshall? Everything's fine, just fine. You ain't in no position to talk smart. You won't be either if you don't find some food pretty soon. Two days a long time to ride hungry. He ain't lying, Rack.  I know where you can pick up some food. Dodge city jail. Now, do you want me to tell you or not, Mr. I want him to tell you.  Go ahead. All right, there's a dirt farm just over the next rise. They'll have some. I suppose you want to ride up and get it for us. Yeah, I could do that. I'll bet you could. They're good friends of yours, I suppose. Be glad to help you out with food, guns, anything you need. That about it, Marshall? I know folks. I don't know them. They don't know me. But you figure they'd be glad to help the Marshall out. I might. Well, I'll tell you what I'm going to do.  I'm going to find out for you what them folks think of the law. Yeah, I figured you might. What you going to do, Rick? How you going to do that? Well, I'm just going in there myself. Wearing the Marshalls. Bad, of course. Now, listen here, Rick. It's my turn. I'll ride up there just as polite as you please and ask for a little grub. They're good, law-faring folks. They'll see those bads and they'll give it to me. I'll come back and tell you all about it, Marshall. Thanks. It ain't right you should wear it this time, too, Rick. Let me wear it. Let me ride in there. I'll get the food for you, Rick.  I'll get down off that horse. Come here. Why don't you leave him alone?  Now, Rick. I ain't going to listen to much more mule than about that badge I'll give you here. I've got sense.  Now, listen to me.  Don't hit me no more, then. You watch him close, I'll get him. I'll hit you permanent. Gone now. Leave his horse back in the rocks. All right, Rick. You have yourself.   What do you mean?  You know, reasoning in the world, I couldn't have rode off after that pose. That sure isn't. With a war that badge just as straight, too. Women. These horses coming down the road. Yeah. Yeah, see ya.  Rick didn't talk none about nobody coming. That's all right, Argy. You can handle it. Sure, I can. Look, uh, why don't you lay low here and I'll edge out and see who they are. Yeah. Yeah, that's a good idea. Now, you just let me do the movement. There's no use you bothering. You go right out there, and then... What happened? Now, you just hold on there. Oh, what's the matter, Argy? Come back here. Well, I told you I was just gonna look out. I got a gun on you, Marshal. You come back. Now, get down. You be quiet. I almost got away with it, Marshal. You almost fooled me. Well, I should have known better than to try it. I was smart enough then, wasn't I, Marshal? It's smart enough to keep you from tricking your way out to get help. Yeah. I guess Rick couldn't have done no better, could he? No, you did the job, Argy. I guess I'm smart enough to wear a badge, all right. Yeah, Argy, I guess you are. Just by getting to wonder if I am.  You ain't getting too tired now, Argy. Never mind that. Great to see a strong man like you puny up, especially the way I've been docking you. Well, if a doctrine didn't kill me, nothing's gone through. Well, I wouldn't count on that if I was you. I've been thinking, though, once I get me across the border, I might take up doctrine. Anybody you'll work on will hang here for sure. Including you? Yeah. If I get the chance. Well, now that ain't very grateful. Rick. What? I gotta tell you about the horses. What about? Well, I was watering them, like you said, and that bay is... What about the bay? Well, he just watered down a creek someplace, Rick. Did you go get it? No, I figured I better come tell you. No sense to water the horse. Don't hit me no more, Rick. I'll go after him. I'll go after him myself. You wouldn't find him if he was standing on your foot. You see how Marshal's gonna wander off to do now? He ain't got no call to beat me all the time. Well, he hasn't, Argie. He's hitting me in the head, and I can't think good. Nobody could think good to get the head beat all the time. Argie. He ain't got no call to go beatin' on me. Argie, why don't you work out on him? I ain't never thought of that, Marshal. Rick wouldn't let me. You wouldn't have to ask him. You better without those beatins, wouldn't you? Sure. You got the sense of your own, Argie. Yeah, that's right. You said I was smart yourself. Sure, you're smart enough, Argie. I'll help you. Help me? Now listen, you just see that my feet are untied tonight after we bet down, huh? And I'll help you get away. I don't know. I'll see that you got the badge, Argie. The badge? Can I wear it? Right here on my shirt? Sure, you can wear it. You got as much right to it as Rick has. Yeah. Yeah. All right, Marshal. I'll walk out on him. I'll walk out on him wearing the badge.  Yeah, just be quiet. Ah, there. Good. Don't forget to get the badge. No, I won't forget. What's going on? What have you done over there, Argie? He's just getting the badge for me, Rack. That's all. You let him loose?   Marshal, you said you stopped me using guns. That's why you... You shot me. I'm hurt, too. Yeah, Argie. That's why I sold you. You shot Rack? I had to. You beat me. You beat me bad. No, Argie. He won't beat you not anymore. He's dead. Am I going to die too, Marshal? No, I don't think so. I think he'll heal up all right. Then I can walk out. Just like you said. Oh, not quite, Argie. I'm going to have to take you back to Dodd City with me first. You've got a bank hold up to answer for it. Oh, yeah. I forgot about that for a year. I almost slipped my mind a couple of times, too. A bit. Marshal? Yeah. The badge. You promised if I'd help you, I'd get to wear the badge. Yeah, Argie, I promised. And you can wear it. All the way back to Dodge. For use and directed by Norman McDonnell, stars William Conrad as Matt Dillon, U.S. Marshal. The story was specially written for Gunsmoke by Marion Clark with editorial supervision by John Messon. Featured in the cast were Vic Perrin as Argie and Harry Bartel as Rack. Farley Bear is Chester, Howard McNeer is Doc, and Georgia Ellis is Kitty. This is George Walsh inviting you to join us again next week for another story of the Western Frontier, when Matt Dillon, Chester Proggfoot, Doc, and Kitty, together with all the other hard-living citizens of Dodge, will be with you once more. It's America growing West in the 1870s. It's Gunsmoke.