Image shape #174
Image shape #174
Conversation
…nd a solution to some problems
…the points. Also set correct initial trasform options
…ate when changing file
|
Hey Luca, This is a really neat feature. It looks like it's done really well. I will try to find some time soon to take a deep dive into it. It looks like it is probably already passing the "better than what we had" bar, so it will be merged, but there might be somethings I can do to make it a little better before releasing it. I have wanted a feature like this since I saw the squiggle lines by msurguy: https://github.com/msurguy/SquiggleCam This is a great idea. I like the V1 logo, and I think @Allted will appreciate it too. Can't wait to play around with it. |
|
Yeah, for sure is better to give it a look before merging... |
|
Very neat. From the user's perspective, I think it makes most sense to start it off from the import menu, similar to the way we import gcode or thr files. But the importer will recognize the image file as an image, and then import and do basic image manipulation on it. Then set the shape to the image shape. Then the options in the shape, like the pattern style, reverse black and white, etc. are all in the image shape. WDYT, @bobnik? There are a few other things we can do to polish it a little more, like handling the edges and scaling a bit better, I think. We can quickly turn off the canTransform. |
|
I like it. Rather than auto-detection, though, I think we should change the Import button to be a dropdown button, with "Pattern" and "Image" as options that control the file types permitted and the action taken. It's clearer to the user what will happen, and has the added benefit of promoting image import as a feature.
|
|
If you are not already working on the improvements I can give it a try in few days (even if I'm not really into react but at least now I start to understand it more or less). |
|
I'm going to be very busy in the immediate future. I did poke at it a bit, but don't let me stop you from continuing. |
|
|
@bobnik I would like to try by myself also with the button... If I see I cannot figure it out I will ask for help ;) |
Sounds good. |
|
I managed to add the button as a dropdown. The problem of working with an image is that I need to store the image somewhere and not in the state (too big). I added the squiggle option as well. Here you have some examples even if the pictures I'm using may not give the best result with the algorithm
|
|
What about putting the canvas in the Import modal? (I am at 1000ft above this, so if what I'm saying doesn't make sense, ignore it). |
Yes, it is possible. At the moment I created a hidden container on the right of the dropdown button, which is in the same container of the import modal (so I think it doesn't make much difference). At the moment the original image is not shown anywhere, but if you want I can add it to the shape options. |
|
Sounds good. I could be convinced either way. I think it's a little strange that you need a canvas to read it, but that's probably because I'm not a javascript programmer by nature. I think it would be helpful to create a canvas that previews how it will be interpreted. For example if you upload an image of someone's face, and you're adjusting the threshold until it looks OK, then a B&W preview might be nice, but that's not really what you have anyway, and that has it's own problems. That's a long way of saying, I think it's good hidden. I will try to get some time to look at this and the PR bob posted, and I have a branch of half baked work of my own I'd like to get PRed. Just having some very busy days this week and maybe next. |
|
I haven't forgotten about this PR. I want to get this in, but I have just been busy. This will make it in eventually, for sure. |
|
No problem man! I'm always busy as well... The code is there, it will not run away ;) |
|
Check this out. It just came across my desk: |
|
Beautiful! The big problem for a sandtable I think is the resolution that you can get out of the sand... I tried the elphant drawing for example and it is barely visible... I didn't have much time to try with different parameters though... Anyway, I was also wanted to add the spiral behaviour as an option but it requires more thinking and I don't have much time now... And excluding the ones that requires a z movement there can be something else interesting to implement... |
|
I'm looking at this today. I want to spend some more time on this in the next few days. This is my current thoughts on what to do next:
I think this is all doable, and I think it will work well. From the user's perspective, it's a little annoying because they will have to go back to the import menu if they want to change any parameters. I haven't gotten to what would happen with grayscale images. But I hope it will make the code a bit cleaner, and more stable. I also hope it will make the user interaction a bit smoother after the image has been imported. |
|
OK. So I have some of that done. I am just hoping to get some feedback, because I am getting pretty deep into this change. https://github.com/jeffeb3/sandify/tree/imageImporter I have the Playlist.js using the redux model, so it has it's own little properties object. I haven't split up Playlist.js yet. That's what I'll do next, just because it will give me a chance to think. I am thinking the canvas can be another konva canvas. It looks like it supports images, and I can do the invert and threshold right there in the konva. I am not certain how to get the pixels back out, but what I'd like to do is to sample the image pixels in the import modal and then create the layer instance with that list of pixels and their values. Does that make sense? |
|
I didn't know about the konva canvas... I think it can add a lot of costumization by its own... I can see there are not only threshold and invert but many more filters. It may be possible to use those as well in the future to get different effects if you introduce that. I checked briefly but I didn't find a way to get the pixels either. The only thing I found is that you can use the "toCanvas() " method to get a canvas object which could be used directly to get the pixels I think. About the pixel sampling, I don't know what you have in mind exactly. At the moment my code scans the lines depending on the "spacing" parameter. You should move that one also into the modal. Then, line type, frequency and amplitude can be change directly from the layer where the pixels data should be saved/cached in some way. |
Added a new shape (image shape)
The shape loads an image and create the pattern based on the darkness of the pixels (one color is a type of line, the other color is a straight line)
It is possible to use 4 different types of lines at the moment but more ideas can be implemented.
The work is inspired by some pictures I've seen around (can be on reddit) but I cannot recall the name of the original creator.
Can still be improved a lot (lines angle, line color propagation and others)
The shape has a preview of the image done with a canvas. I think the style I put together is not consistent with the entire app style but I don't know how to fix it properly.
I started working on this before the "layers" update. I updated to the last commit but I didn't test it much to see if it is still stable.
This is more or less the result