I am wanting to create a circular slider in React Native for a project of mine. Although I am not entirely sure on how to create one. Could someone help me out?
Here is a little sketchup of what I want it to look like:
I did some searching on the interwebs and found some posts about circular sliders in React Native. But these posts seem to be dated and the projects linked/provided in these posts would not work for me.
1. https://stackoverflow.com/questions/51058669/react-native-circular-slider
2. https://stackoverflow.com/questions/38253804/how-to-make-a-circular-slider-in-react-native
Note: I am fairly new to the world of React and React Native but do have decent experience with JavaScript. Right now I am still learning about React and React Native.
Your best best is probably svg via react-native-svg, since that will allow you to declaratively draw and animate arbitrary shapes without having to write platform-specific native code.
Note that setting up react-native-svg is slightly different if you are working with expo or have ejected, which may explain why some of those older examples you mentioned don't work (they pre-date expo).
Drawing with SVG is generally straight-forward, although you will need to use arc's in paths, which is about as awkward as SVG gets (but still not too bad).
The trickiest parts of a circular slider are capturing the touch input with PanResponder and converting coordinates between cartesian (x,y) coordinates of the touch input and polar (angle,distance) coordinate systems in order to know where to move the slider to.
In your case it looks like you want to lock the movement of the slider to specific increments around the clock so you'll also need to find the nearest increment to the polar-coord of the current touch, but that should be easy in polar coords - just find the increment with the closest angle to that of the touch.
Here is an Expo project that illustrates the slider part. It looks like this:
Based on the comments, if you are comfortable with the jQuery roundSlider then you can simply do the customization based on your need. Here I just make a mock up design, check the below demo:
DEMO
Also if you want this as an React component then you can make a simple wrapper like below, and can directly use in any React applications.
https://stackblitz.com/edit/react-jquery-round-slider
hope this will helps you, or will give you some idea to move in a direction.
Related
I'm working with a small group to build an interactive interface that will render a list of nodes and show how they are connected, almost like how some database modelers are. This is within a pre-existing application, and we will have up to a couple thousand data points that should be able to be dragged.
Some people have mentioned using a canvas element or packages like Konva.js or D3. I'm wondering if options like using a canvas or React-Konva would be able to handle something like this, or if we would need to go with an alternative like D3 or something else. Does anyone have any experience or knowledge about this?
It depends on what exactly you are going to draw and what kind of interactivity you needed. For Konva it may be hard to handle a thousand data points. But there are many Konva Performance Tips to improve the performance.
If some parts of your drawings are static, you can use layers or node.cache() method to boost the performance.
The only good way to know if a tool (Konva, D3 or anything else) is good is to make a prototype version of your app. Make a very simplified version with a lot of objects with every framework/library. And see what works best for you.
I am trying to figure out how does CamScanner app autodetect a card or paper in an Image and produces a scan like copy of it ?? Can it be implemented in JavaScript using HTML5 Canvas ??
My main concern is to extract that detected card or paper from the image for further processing, according to the need of my project.
Thanks in advance..
Any solution in JavaScript will be highly appreciated...
This solution works well in most cases. It is in Python, but you can easily adapt it to JavaScript since it is OpenCV. There is the tutorial to use it and if you use node I recommend opencv4nodejs.
The main idea is find edges with Canny detector. After that you use the function to findContours from OpenCV and you need to search the largest contour with 4 edges (we expect that papers have a rectangular shape). The main issues usually are if there is noise in the background and to find contours white on white. Some filters before the Canny detector and changing the parameters can help in your solution.
This is the first time around that I am using some js,otherwise I always rely on hardcoding.Probably this is the reason why I am facing some issues in understanding the syntax of kineticjs.
I saw some
1. Tween
2. layer(add)
3. stage(add)
4. var rect=new kinetic.rect{//some code with property:value,}
I am familiar with constructor and creating instances of it.But I am finding it difficult to understand the syntax of kineticjs.What are the above things used for,i have no idea.I tried searching but I din`t get what I was looking for.
I have a project in which I need to increase the height of bezier curve with transition.Kineticjs seems to be the only solution for this.
So my question is how to define my own custom function in kineticjs and how to call it with respect to the kineticjs syntax?
this is what I have done so far!!!
Tweens are used to animate a node from one state into another state. For example, you can use Tweens to animate a rectangle from position x=10 to x=50
this adds a node to a layer. You can add groups and shapes to layers
this adds a layer to the stage. Layers are tied to an HTML5 canvas
this instantiates a new rectangle. Here's the full documentation on rectangles: http://kineticjs.com/docs/Kinetic.Rect.html
For more info, take a look at the "how it works page"
https://github.com/ericdrowell/KineticJS/wiki
Try to watch this youtube video. Its a presentation from the founder of kineticjs. He talk about HTML5 graphics frameworks in generale in the start, but if you go to time 39:45, then he talks about exactly the things you are asking about. He is giving a live coding example which makes it very easy to understand. Check it out:
http://www.youtube.com/watch?v=ZS6QqNJ0VRA
I know HTML5 canvas fairly well, I know the basics and animation using loops etc.
Demo I'm working with: (click to make shapes) http://henry.brown.name/experiments/box2d/example-canvas.html
What I'm not very familiar with is Box2D. I'm using the Box2DWeb port, I heard it was newer than Box2D-js, I'm not sure which is best.
I know how to initialize the 'world' and I can place objects in the world. I then use Step to animate the world - however to display it on the screen so far I've only been able to get it working with debug draw as it basically does everything for you.
Instead of using debug draw I'd like to use canvas to draw, for example a car instead of just a square. How do I attach the physics of a square to the image of a car? I just can't get my head around integrating canvas with Box2D.
Any tips will be massively appreciated!
Thanks
I spent the last few days trying the same thing.
I found Jonny Strömberg's tutorial, which is not super detailled but by analyzing the code I found how he retrieves the body's position:
var b = world.GetBodyList()
GetBodyList() seems to be an iterative Array, so the next body is accessible through b.m_next.
You can then use
b.GetPosition().x
b.GetPosition().y
b.GetAngle()
to retrieve the body's coordinates.
EDIT: this code is for the Box2dweb library, which I found better documented than Box2djs
If you aren't familiar with Box2D you should check out the documentation at http://www.kyucon.com/doc/box2d/. This should tell you all of the properties you need. To my knowledge the standard way of using Box2D is to attach an image with userData. See this example tutorial for image and Canvas image usage.
http://www.jeremyhubble.com/box2d.html
I had the same question.
here is the documentation of it.
You could use calls like GetBodyList() , GetAngle()and members like m_position to get all that you need to paint whatever using whatever library you want to use on a canvas.
Essentially, I had this idea in my head for a sort of evolution simulator, not exactly like Conways Game of Life, but the one part where they do match is that they will both be based on a square grid.
Now, personally, I like working in HTML+Javascript+ for simple apps, since it allows fast UI creation, and if you're not doing something computationally heavy, then JS in a browser is a decent platform.
The problem I'm trying to solve right now involves drawing and updating the grid. I might be missing something, but it seems like there is no easy AND computationally light way of doing this for an 80x40 grid. The easy way would be to generate a div with absolute position and a specific background color for any square that is NOT empty. However that can become very slow with anything more than 60-70 colored squares.
I'm definitely willing to switch to a different language if the situation calls for it, but first I just want to know I'm not stupidly missing out on an easy way to do this with HTML+JS.
Answer should include either one of the following:
a) A reasonable way to draw and update a 80x40 grid ( where the squares change color and "move" ) in HTML+JS
b) Another language that can do this reasonably fast. I would prefer to avoid having to spend a few days learning DirectDraw or something of the sort.
Why not build the grid as an HTML Table? After all this is what you want?
Give each cell a computed id and create some javascript functions to update them. Shoudlnt be a problem at all.
You could look at the new canvas tag in HTML 5 but from what you've said I dont think you need it.
<canvas> seems to be the right way to do this. A library like Raphael will help you avoid cross-platform issues. Another options is Processing.js, but it does not work in IE.
For a small grid (< 100x100), use a table and give each cell an ID for fast access.
For bigger grids, you should consider using a canvas object or embedding an Java or Flash applet.