|
Knifegrab posted:So I have been working with react for quite some time, and for the most part all of my components are self contained. I am now replacing an old JQuery widget, and the way it worked was it was fairly self contained but them exposed some functions via JQuery so other parts of the code could add data to the container. Have you read Thinking in React before from the docs? https://facebook.github.io/react/docs/thinking-in-react.html I have a feeling this should give you a good start on how to share data across components. You don't necessarily need redux yet. reversefungi fucked around with this message at 17:21 on Aug 14, 2017 |
# ? Aug 14, 2017 17:19 |
|
|
# ? May 15, 2024 01:53 |
|
The Dark Wind posted:Have you read Thinking in React before from the docs? https://facebook.github.io/react/docs/thinking-in-react.html I believe I am familiar, but the issue is this is a very top level component, and we don't pass inheritence throughout the product, so I don't know how to pass this prop to all the bottom level items that may need access to its contents (or to modify them)
|
# ? Aug 14, 2017 18:23 |
|
Knifegrab posted:I believe I am familiar, but the issue is this is a very top level component, and we don't pass inheritence throughout the product, so I don't know how to pass this prop to all the bottom level items that may need access to its contents (or to modify them) That sounds like a use-case for a redux-like store managed outside of the component hierarchy (and I'd recommend just using redux). You can make it work with contexts, but its not recommended.
|
# ? Aug 14, 2017 18:34 |
|
You probably want to use global state, like Redux; ie when you change the store via a dispatch, your component updates. Alternatively, you could pass a prop down the component hierarchy.
|
# ? Aug 14, 2017 23:09 |
|
Dominoes posted:Alternatively, you could pass a prop down the component hierarchy. If the component requiring the data isn't really deep this is honestly the best approach. If you have to pass it down like 5+ levels it becomes problematic from a usability perspective (though still works fine from a "do the stuff, react" perspective). Using the redux approach in that scenario also has the benefit of only re-rendering the tree where the data is used, instead of all of it.
|
# ? Aug 14, 2017 23:16 |
|
Anyone recommend a non-terrible library for extracting the background colour of an image? I have found a few that are poorly written but generally rely on a third party to do the actual logic, e.g. modified median cut quantization. It's not simply the dominant colour of the entire image though as I'm dealing with logos with mainly transparent backgrounds which would produce an incorrect result. So I can create a canvas taking the full available height, center the actual logo and backfill with yellow. Similar example: MrMoo fucked around with this message at 18:07 on Aug 15, 2017 |
# ? Aug 15, 2017 18:01 |
|
Just getImageData and scan pixels until you find one with alpha ~1.0? Won't quite work with a 'bare' logo, like if it has a black outline. You could also try an invert or complimentary based on that.
|
# ? Aug 15, 2017 21:30 |
|
Ranzear posted:Just getImageData and scan pixels until you find one with alpha ~1.0? Won't quite work with a 'bare' logo, like if it has a black outline. You could also try an invert or complimentary based on that. That reminds me a bit of this answer from stack overflow: https://stackoverflow.com/questions/12995378/is-there-a-proper-algorithm-for-detecting-the-background-color-of-a-figure I had looked into this a year or two ago wanting to do the same thing, but it was instead settled on using a pattered background image and merged the two together for thumbnail display so I never got to test it out.
|
# ? Aug 15, 2017 21:38 |
|
Some really inconvenient logos to work with, I ended up scanning alternating pixels on the top second two lines and bottom last-but one pair of lines and comparing the values to prevent breaking on a asymmetric gradient. This is functional for logos with solid colours otherwise a more astute algo is required. JavaScript code:
MrMoo fucked around with this message at 21:43 on Aug 15, 2017 |
# ? Aug 15, 2017 21:39 |
|
Wondering if anyone can help with this. Even if its pseodcode, I may be able to code it. I will have an array of numbers [0, 116, 131, 1550] and i will have a row number. I need to seperate the numbers in chunks. Inbetween each number, think of it as a box. In this example, with 1 row, my output would be box 1 = 0,116 box 2 = 116,131 box 3 = 131,1550 If I have 2 rows, output would be: box 1 = 0,116 box 2 = 116,131 box 3 = 131,1550 box 4 = 0,116 box 5 = 116,131 box 6 = 131,1550 Any help is appreciated.
|
# ? Aug 16, 2017 17:25 |
|
I'm not sure what your chunking algorithm is, but the rest can look something like this: code:
|
# ? Aug 16, 2017 17:50 |
|
It looks like the chunking is justJavaScript code:
|
# ? Aug 16, 2017 18:02 |
|
Hey everyone, I'm trying to make a basic image filtering application that displays a local file, parses it, does some basic manipulation, and displays the result. The biggest problem that I'm having is in displaying the result. Using HTML5's file API, it's easy to display the local file, then use a FileReader to get the image data and redraw it on a canvas to display the result. The problem is that the source image is displayed as an img tag, which handles dynamic resizing just fine, but the result is drawn in a canvas, and I can't figure out how to get it to play nice with dynamic resizing at all. I have it set up to have the canvas match the size of the source image when it's drawn, and that works fine, but I can't get its size to ever update after that. It's a huge mess. The best way to do all of this is if I could turn the post-processed img object into a new file object and provide it as a source to an img tag. Then the input and output of the app would be displayed and formatted using the exact same mechanisms and be completely consistent. Is there a way to do this? Obviously I can't create a local file on the user's system without their explicit action, so I guess what I'm asking is, is there a way for the locally running JS to serve a file to an img tag? It sounds kind of crazy when I say it like that, but I'm getting desperate here.
|
# ? Aug 17, 2017 01:25 |
|
Snak posted:Hey everyone, I'm trying to make a basic image filtering application that displays a local file, parses it, does some basic manipulation, and displays the result. You can totally resize an image with canvas and have it look smooth. You're probably better off keeping the actual canvas itself the same dimensions, and just using drawImage to scale (as it takes height and width parameters, so you can tell it to draw whatever size you want. If you change the actual width/height of the canvas, the canvas will be cleared, and you will have to call drawImage again - this will cause flickering unless you do something like keep a temporary canvas during the actual resize operation.
|
# ? Aug 17, 2017 01:36 |
|
I can't even get that to work. When I call the draw image function again, it just never draws. I think because it's trying to getContext again which returns null if you reuse it. God I hate frontend poo poo. Okay, so I should make the canvas some theoretical maximum for my site, and then draw whatever size I need? I will give that a shot, thanks. edit: Like, forget it looking smooth, it seems to be a total crapshoot what inputImage.clientWidth returns at any given time. Sometime it correctly returns returns the displayed image's width, and sometime it returns the absolute size of the image. when I try to use it to update the size of the output image on windo resize, ir returns the width of the input image as it was before the resize event. Sort of. It returns the before resize width and the after resize height. So I need another "onload" somewhere. I guess I have a fundamental question about JS that I haven't been able to find the answer to with google: What conditions trigger the loading of an element? When does the browser say "this elements exists, it's time to start loading it"? Because most of my problems with JS revolve around not knowing when an element is being reloaded and when I'm changing things that don't trigger a reload. Snak fucked around with this message at 01:57 on Aug 17, 2017 |
# ? Aug 17, 2017 01:47 |
|
Snak posted:I can't even get that to work. When I call the draw image function again, it just never draws. I think because it's trying to getContext again which returns null if you reuse it. If you can throw up a code sample or jsfiddle or something, I might be able to help.
|
# ? Aug 17, 2017 01:56 |
|
Bruegels Fuckbooks posted:If you can throw up a code sample or jsfiddle or something, I might be able to help. Yeah, I'll do that, thanks. While I'm working on that, I edited my post with more basic questions about JS. https://jsfiddle.net/8t1zuewg/ Good news and bad news: While trying to figure out why the output of jsfiddle is different from my local output, I fixed the dynamic resizing just fine. The problem persists, however, that I can't make the image the correct size in the first place. In JS fiddle, the image is drawn smaller than it should be, while in my regular browser, the image is drawn larger than it should be. The sizing is done here, lines 30-37 code:
edit: This new problem is because I'm now using CSS to change the display size of the canvas, which also correctly adjusts the displays size of what's drawn on the canvas, BUT when you draw to the canvas, you're drawing on the actual size of the canvas. I think. So if I just make the canvas the actual size of the image and draw on the whole thing and change its display size with css, that should work. edit again: Which it did. Thanks so much. I really need to get an actual rubber ducky. Most of my confusion stemmed from mixing up the canvas's css width with it's DOM width property. Once I realized that, it all made sense. Snak fucked around with this message at 02:35 on Aug 17, 2017 |
# ? Aug 17, 2017 01:58 |
|
Snak posted:Yeah, I'll do that, thanks. While I'm working on that, I edited my post with more basic questions about JS. https://www.youtube.com/watch?v=m6PxRwgjzZw
|
# ? Aug 17, 2017 02:44 |
|
Serialize the canvas with canvas.toDataURL to a data URL and set that as an IMG tag's src attribute. It's probably possible to go straight from file data to a data URL without the canvas because I think the data section is just the raw bytes base-64 encoded.
|
# ? Aug 17, 2017 14:42 |
|
Normally the createImageBitmap(blob) promise will do that.
|
# ? Aug 17, 2017 17:06 |
|
I'm trying to build a list of unique strings and then compare another collection to that list. But I'm getting hung up on the "unique" part.code:
This grid has 3 rows, with the following GROUP values: "1", "1", "2". I want my listOfGroups to contain 2 elements: "1", and "2". The above code gives me three elements: "1", "1", "2". The if statement never evaluates to true. I expected it to equal true on the second iteration, because "1" has already been added to my list. If I use a breakpoint and try to evaluate listOfGroups["1"], I get undefined. So I think that's happening is that it's casting the string to an integer and then looking for the element at index 1, which does not exist. So how can I check if my array already contains that value?
|
# ? Aug 24, 2017 19:16 |
|
Sab669 posted:I'm trying to build a list of unique strings and then compare another collection to that list. But I'm getting hung up on the "unique" part.
|
# ? Aug 24, 2017 19:29 |
|
Arrays get really funky if you assign string keys (which is 100% possible). What you're doing here is trying to read listOfGroups["1"] instead of checking if the array includes the value "1". As mentioned above there's the new include method, or usage of indexOf. If the number of unique groups can be very large you may want to look at a using a map to track what's already included instead, but that's not an issue until you're looking at many thousands of unique groups. edit: Also, you don't need to track listIndex at all; just use listOfGroups.push(view[i].GROUP) when adding a new group.
|
# ? Aug 24, 2017 19:49 |
Also, js object keys are essentially a set so you could just use that property if all you care about is string uniqueness.
|
|
# ? Aug 24, 2017 20:08 |
|
In that case you'll want to use Object.prototype.hasOwnProperty instead of listOfGroups[key], the latter would also give you functions on the Object prototype if a group name collides with one.
|
# ? Aug 24, 2017 22:49 |
|
Check out Lodash's uniq function.
|
# ? Aug 25, 2017 00:48 |
|
I'm trying to capture an image at a certain time in a YouTube video. An answer on Stack Overflow gave me an impression that the YouTube iframe api had the capability, but I can't find anything about it that lets you do this. For reference, the api is here: https://developers.google.com/youtube/iframe_api_reference There's a bunch of sites that let you do this, but maybe they are doing something on the server side and not just JavaScript?
|
# ? Aug 25, 2017 18:24 |
|
I'm using axios for file uploads. I have created a React Component that exists for a file uploading (it displays the filename and progress) because you can upload multiple files at once. When doing so I create an axios request per file: code:
Obviously I could create an elaborate array in the parent class that details the files names and progresses but that seems like a bad approach. I'd rather have the component update itself on the upload progress than upload an entire array of uploads every time one has progress (the # of uploads is dynamic it would have to be an array). But I cannot figure out how to pass the uploadProgress binding action to the child component. Can anyone help?
|
# ? Aug 29, 2017 19:00 |
|
Knifegrab posted:I'm using axios for file uploads. I have created a React Component that exists for a file uploading (it displays the filename and progress) because you can upload multiple files at once. Give each request an ID, store them in a map with any other data in the components state, then update as needed, and delete the key when the request finishes. When the object is empty, there's no requests going on.
|
# ? Aug 29, 2017 19:15 |
|
Lumpy posted:Give each request an ID, store them in a map with any other data in the components state, then update as needed, and delete the key when the request finishes. When the object is empty, there's no requests going on. I'm afraid I don't follow
|
# ? Aug 29, 2017 19:25 |
|
Are you using redux or similar for state? If yes then hook into that to update data about a request identified using a randomly unique ID (uuid or even just a random number). If you're using internal state only you can use the parent components state for this, assuming you are calling axios from there. I'd post pseudo code but I'm on a phone.
|
# ? Aug 29, 2017 19:36 |
|
Lumpy posted:Give each request an ID, store them in a map with any other data in the components state, then update as needed, and delete the key when the request finishes. When the object is empty, there's no requests going on. Say you make n requests to do something. You could create a map of objects that track them. As the responses come in, you mark it done, and when all items in map have done === true, all of them are done. In the above case, he's just removing them from the map/array instead of flagging it done, but the same thing. code:
|
# ? Aug 29, 2017 21:22 |
|
Knifegrab posted:I'm afraid I don't follow Since your question didn't have quite enough info for me to grasp your exact situation, this might not fully apply to your use case, but it should at least give you the gist of what I was suggesting (from my phone, so that's why it wasn't very fleshed, out, so sorry for any confusion!) Assuming we have Component A that wraps a bunch of component Rs. Assuming each component R is a file upload component that handles a single file upload. Assuming that you are asking 'How does A learn about what's happening in each R': Component A has a map uploads: {} in it's internal state (or in the application state if other parts of the app care) When you mount a new child R component, you pass it a unique ID, an handleUploadProgress , and if axios has them, handleUploadStart and handleUploadEnd (not sure if axios uses one callback for all of those or has separate functions) and add that ID to your uploads map with whatever data you want to track about that upload. then each R can do: JavaScript code:
and then Component A is aware of what is happening in every R and can update it's internal uploads state based on the ID of the R that is calling back. You can remove IDs from the uploads map when they are done, and infer that when that object has no keys, you have no in-progress uploads. Or if you are re-using your Rs, just reset the state in your map to 'ready for upload' or whatever. EDIT: Again, I made a bunch of assumptions about what you were trying for, so if they were off, please explain a bit more so I can help more better! Lumpy fucked around with this message at 15:20 on Aug 30, 2017 |
# ? Aug 30, 2017 15:15 |
|
OK thank you all very much, that is very helpful. Really quick, does anyone know what to search for or how to find out what events I can bind to for certain packages? For instance, parts of this would be made easier if I could do:code:
code:
|
# ? Aug 30, 2017 18:30 |
|
There is no standard around events so it's RTFM for good packages, or have fun digging through code for the rest. Does axios even have events like that? I thought not since calling axios returns a promise.
|
# ? Aug 30, 2017 18:33 |
|
necrotic posted:There is no standard around events so it's RTFM for good packages, or have fun digging through code for the rest. I have no idea, which is why I'm asking. I read the github page and it seems to indicate no but I am wondering if I am thick and missing something obvious.
|
# ? Aug 30, 2017 18:41 |
|
Knifegrab posted:OK thank you all very much, that is very helpful. Really quick, does anyone know what to search for or how to find out what events I can bind to for certain packages? For instance, parts of this would be made easier if I could do: Axios would explicitly have to add event binding, which it does not according to it's docs. It's really a six of one, half dozen of another thing, though I think. Why can't you pass the request variable down if you have uploadProgress inside the configuration? JavaScript code:
|
# ? Aug 30, 2017 18:42 |
|
Lumpy posted:Axios would explicitly have to add event binding, which it does not according to it's docs. It's really a six of one, half dozen of another thing, though I think. Why can't you pass the request variable down if you have uploadProgress inside the configuration? Because I need the child component to keep its own state on uploadProgress, otherwise I am updating every single component anytime one component has upload progress. (there could be upwarsd of 50 uploads occuring in parallel)
|
# ? Aug 30, 2017 19:38 |
|
Knifegrab posted:Because I need the child component to keep its own state on uploadProgress, otherwise I am updating every single component anytime one component has upload progress. (there could be upwarsd of 50 uploads occuring in parallel) Gotcha. A couple more random thoughts, then I'll shut up: Is there a reason the request can't originate / live entirely in the subcomponent? Are you *sure* they all re-render when one updates? (and is them all re-rendering an actual performance bottleneck?)
|
# ? Aug 30, 2017 23:28 |
|
|
# ? May 15, 2024 01:53 |
|
Lumpy posted:Gotcha. A couple more random thoughts, then I'll shut up: Is there a reason the request can't originate / live entirely in the subcomponent? Are you *sure* they all re-render when one updates? (and is them all re-rendering an actual performance bottleneck?) It could, which is where my brain is headed now. I think when a component is mounted it will call the request, with a callback for when its done, and the parent component will just monitor the state of all children and clear them when all requests are complete. That way I can still bind to the uploadProgress. It feels... wrong for some reason but I think its a sensible approach.
|
# ? Aug 31, 2017 00:35 |