Download File Firmware and Flashtool plus Video Tutorial compressed:
do not forget there are some additional tips from me:
How To Flashing cubot p5
hello welcome to a coding challenge. thiscoding challenge is called i'm not sure because after i record this i'm gonna comeup with the name of it. right now its called word interactor. you might see itcalled something different. the point of this coding challenge is actually not really to make anything that interesting but to give you a template for creating acreative project that allows a user to interact with text on a word by word basisso each word being an individual token. for example, i'm gonna add a little bitof code here i'm starting with a code base from some other example. right nowi have the text here, i hit submit, and i see this text. i can't interact with this text, i can copy and paste it but what
i want the user to be able to do isinteract with each one of these words individually. so for example what if everytime i click on this word or hover over this word i query an api and returna synonym and replace it? or based on some property of it i change it's color. this actually is a project that, so theres a lot of possibilities in what i could dowith this. lets figure out how i do that. the first thing that i need to do, isfigure out a way of splitting that text up into an array of separate words. if you've been watching some of my other videos you'll notice theres a whole video about split and regular expressions. so i'm gonna use the concepts from that video and just split this up. what i'm
gonna do here first is i'm gonna say, ihad a little bit of a code base where i'm just selecting some html elements,a text field, an output paragraph, and a submit button, because i'm gonna use those things. first thing i'm gonna do is i'm gonna say var words equals s dot splits is all the text that comes in from that text field. of course you could get the text from a variety of other sources. i'm just using a text field. i want to split it up, and i need to pass the split an argument which is a delimiter. so what should that delimiter be? it could be space, it could be comma, it could be space or comma. im gonna do something simple for now, i'm gonna write a regular expression that says anything thats not
a letter or a number, one or more not letters or numbers. so backslash lower case 'w' is any a through z or zero through nine. capital 'w' is anything thats not a through z or zero through nine, and plusi guess the case sensitivity doesn't matter here. lets just make sure that works. im gonna say console log words. just so we can see that. i'm gonna refreshthis, and we can see that looks good. i've got now an array of everything as a separate word. why do i want to do that because what i want to do is createan individual dom-html element for each word. the kind of element i'm gonnause is a 'span' element. if you're not so used to this developer console, i'm in thejavascript console right here. another
thing thats gonna be really useful is the elements tab of this console. because if you look at this, i have this paragraph here and i have this paragraph here. look at this, this paragraph element here is all this single body of text highlighted there.what i want instead is to make individual things. i'm going to loop through the array of words and i'm going to create a dom element for each one, i'm gonnamake it the span element. span element is useful because its something i can style and have control over but it rests inline as if the text just flows in a regular paragraph. so i'm gonna say create span words index i. i'm gonna takethis out and i'm gonna take this out too.
lets look at this, now we can see, submit,look what i got there. so first of all i made all of these spans but theres no spaces in between them. but you can see there they are. they're all separate individual span elements. magic, fascinating, wonderful! ok this is great.i want to do 2 things here, #1 i want to put some spaces in between them...now we can see look at that i also have these span spaces, theres probably anotherway i can put those spaces without having those be spans. but its fine you can seeit looks like an individual block of text but they're separate dom elements that i can control individually. in my html file, i have this paragraph called output.let me run this again, i hit submit, look
at this output paragraph and then all of these spans. i kind of want the spans to be inside the paragraph element just so if i have to style it or do something with it as a whole i don't want the spansto be free floating they should be in a paragraph element. this won't look anydifferent to you, but what i want to do is say in the code, var span equals create, i'm gonna say span 1, var span 2 equals, and then i'm gonna say span 1 dot parent output. by the way i'm using the p5 dom libraryof course i could do this with native javascript, append this, document getelement id this, i could do this with jquery and have dollar signs all over my code. but i'm doing this with the p5
library because its what i work on and what i use, its good for sort of sketching and quick experiments. so i'm gonna do this, same thing parent this so now look at this, i now have all ofthose spans inside this paragraph. again why is this useful? if i wanted toi could add some css styling to style that paragraph as a whole as well as access the spans individually. heres the thing that i want to discuss, notice how the original text has periods, spaces, and commas. but this text does not. it only has the spaces because i split by anthing but then i didn't retain i just automatically inserted spaces. even though this will make it more complicated and take another 5 minutes, lets rebuild the
text with the original punctuation. i think thats gonna be something you might want to actually do if you're gonna use this as a template for a creative project. how do i do that? one thing i need to doin the split regular expression, i need to use capture in parentheses. notice what happens when i use capture in parentheses and i run this again. we should see, oops i put the parentheses in the wrong place. they go inside here, the capturing parentheses are part of the regular expression itself, in between the slasheslets do this again, hit submit, now you can see look, theres some sort of frankenstein thing where theres extra spaces and the periods. its because i'malso adding the extra spaces, i don't need
to do that anymore. so now i can get ridof this. the array actually, that array, if i say, console dot log words. just to look at that array, with the capture in parentheses. you can see that this arrayactually keeps the commas, the spaces, it keeps everything. but heres thequestion, i don't necessarily want to one thing i could do in p5, i can sayspan dot style. im gonna say span dot style, background color, i'm gonna give itsome arbitrary background color, i'm gonna run this again, hit submit. it also gives the background color to every space and every punctuation mark. what if i don't want that, one thing i could do is use a regular expression to validate whether itsa word or a delimiter so what can i do now
remember this regular expression that i used, i could use it again. i can say if, and i'm just gonna write a regularexpression right here, backslash capital w plus dot test words index i, then onlyapply this styling. now this looks a little bit crazy and i actually got it wrong. i want to check if this regular expression i want to test it against this.actually this is gonna do the inverse. watch what happens, this actually highlighted for me only the delimiters. let me go back, if not, now i'm highlighting only not the delimiters. of course i could make them all a randomcolor, i think recent version of p5 will allow me to pass in three arguments as argb value. lets see if this really works
no, i thought it allows you to do this. maybe i could do a color object, that must be what it is, there we go watch this now>from this alone you can see how i can apply an algorithm to how its colored. of course i could do something more like, i could color it by part of speech,i could color it by length of character that sort of thing. theres a lot ofpossibilities here in how you might color this text. but really i want to show youis how you interact with it. so how you interact with it is by giving the span an event listener. so i only want an event listener for the elements that are wordsand not the delimiters. i'm gonna comment this out, i don't need this line. what i want to do is i want to say span and i
want to say mouse over. so i'm gonna usethe p5 event mouse over. this is the equivalent of a native javascript saying the element dot add event listener. im gonna pass it a function, i'm gonna call it highlight or something. what this means, i could write an anonymous function here, but i'm gonna write a function somewhere else called highlights.just to make sure this is working, console dot log hover. to see what happenslet me run this, hit submit, now look at this. everytime i move my mouse around togo over a word we can see that in the console the word hover is spit out. so i have these events firing for every single individual word. thats good news. the question is how do i know which word
i'm hovering over? thers just this one function highlight for all of them. how do i know which one. there is kind of an answer to this which involves the use of something called a closure in javascript.next week i'm gonna make a coding challenge where i use that. lets say i wanted to make an api call everytime i hover over a word, i'm gonna need to employ some more sophisticated logic. but for right now i can actually do something rather simple because i'm using p5. in javascript there is a key word called this. i should probably make a separate video about 'this'another way of thinking about this is context. if you ever just say this inp5 or setup or something, its referring
to something called 'window' which is likethe global javascript context that you're in, in a webpage. if you've ever done something like write a constructor function which you can see other videosthat i do. where i say something like function particle this dot x equals, thisdot y equals. when i say new particle javascript behind the scenes creates a newcontext which is a new particle object and it attaches the x and y properties to that new object. theres a function in javascript called bind which i could do a video about at some point, which binds the context the keyword this to somethingarbitrary that you might want to bind to. the keyword this can mean different thingsdepending on where you're programming
what you're doing, where you're living in the world. p5 does something really magical behind the scenes for you and it makes working with p5 dom events very easy. what it does is it automatically, inhere, binds the context, assigns the context to the dom element you happen to be hovering over. im gonna say console dot log this. watch this now, submit, hover, look at this. all these different p5 elements are showing up here. thisautomatically equals what i'm hovering over. by the way just to prove the pointif i say console dot log this right here in setup, look at this, thats like the global context. which is like the window object which is all sorts of propertiesand things we could investigate and look
at. so this doesn't mean something different depending on whats going on often a library or something that javascript does will assign it to something behind the scenes for you, for yourconvenience. in this case the convenience is the dom element. look at what i can doi can say, console dot log this dot html this dot html, html is a dom element function in p5 that returns the contents of that element. so i can hover of it and we can see the words in the console are whatever i'm hovering over are appearing. now what could i do? i could do something like var s equals this dot html dot replace. i could use the replace function to say hey searchfor any word that is...let me just do
something simple. this dot html rainbowand this dot html dot style, background color, var c equals a color random 255,random 255, random 255. i'm gonna say c here. anything you hover over change itto the word rainbow and give it a color. sorry this dot style, style just like htmlis a function that sets its value. style is a function that sets its css stylingdynamically. so whenever i hover over a word it changes to rainbow and gives ita color. so heres my rainbow web application. i should probably do something which sets the property so that when i'm hovering it changes to thatmouse hovering thing, i have to click on it. come up with your ideas of what you might do thats more intersting. how might
you replace the text, how might you usea regular expression maybe with a callback to replace the text, to translate it. how can you interact with a body of text on a word by word, sentence by sentence,character by character level. so i hope you take this code, expand on it, and create some interesting web based experiments out of it. next week i'm gonna do a similar coding challenge where when you click on each of thesewords i make an api query and replace it with either its definition or anotherword or something like this, ok? thank you so much for watching this coding challenge and see you soon in another video!~~~
subtitles by the amara.org community
0 comments:
Post a Comment