Comments (12)
I'll add some contributing/development info on the wiki tonight :) Yes the main way to run the test the library is with yarn storybook
(it runs react storybook). It lets you put in different states of the component and see how they look in a browser.
from react-image-annotate.
Hey @stajahlee, I've merged the RegionEditLabel
override into react-image-annotate
and published it after some fixes. You can try it out in version 0.2.5
.
Here's an example that produces the following screenshots (also can be seen in src/Annotator/index.story.js)
const MyComponent = () => {
const images = [
exampleImage,
"https://loremflickr.com/100/100/cars?lock=1",
"https://loremflickr.com/100/100/cars?lock=2"
]
const NewRegionEditLabel = ({
region,
editing,
onDelete,
onChange,
onClose,
onOpen
}) => {
return (
<div style={{ backgroundColor: "white" }}>
I'm the closed part
<div style={{ display: editing ? "block" : "none" }}>
I'm the part that shows when it's being edited!
<button onClick={() => onDelete(region)}>Delete This Region</button>
<button
onClick={() => onChange({ ...region, cls: "awesome-value" })}
>
Set Classification to "awesome-value"
</button>
<button onClick={() => onClose(region)}>Close the edit mode</button>
</div>
</div>
)
}
return (
<Annotator
onExit={actionAddon("onExit")}
labelImages
selectedImage={images[0]}
RegionEditLabel={NewRegionEditLabel}
images={[
{
src: exampleImage,
name: "Seve's Desk"
},
{
src: images[1],
name: "Frame 0036"
},
{
src: images[2],
name: "Frame 0037"
}
]}
/>
)
}
from react-image-annotate.
I do see
├── [email protected]
└─┬ [email protected]
└─┬ [email protected]
└── [email protected]
when I run this command.
UPDATE:
I changed our react to 16.13.1 and it fixed that error!
There is another: Uncaught RangeError: Maximum call stack size exceeded. at HTMLDocument.contain (TrapFocus.js:69)
but it isn't crashing the app.
from react-image-annotate.
As for the
- Optional Header Buttons
Yes that seems like something I would be able to work on and contribute. :)
I would have to get a better understanding of the tools here though (storybook / do I see typescript?), where I've never used storybook, just straight react js so far.
from react-image-annotate.
This isn't possible at the moment. But it's a good idea, so I'm guessing you have a really big list of classes?
from react-image-annotate.
@seveibar yes - we have over 33K devices (all of our images will be of these various devices) to filter down from with an api call
your tool is really fantastic with great features we like, such as zoom, but we have to find a solution to the list filtering (something like mui autocomplete from their labs section instead of react-select) ...
if we go down this route we may have to fork and then could make a PR to see if you'd like our contribution (team hasn't decided just yet)
from react-image-annotate.
I think you might be interested in what @ThibautGeriz is working on here: #32
Basically you could have a custom form with autocomplete. If it works for you, I can probably accelerate the merging process on that PR. Let me know
from react-image-annotate.
That's awesome - I will pull it down and try this out today to see if we can work with this. I see that you merged the branch (but not released just yet) - that's fantastic. Thanks for letting me know! I'll keep an eye out on the released build too to see if I can install from npm. :)
from react-image-annotate.
@seveibar Thank you so much for releasing this - it is exactly what we need for this concern and my api call is working swimmingly. Unfortunately I have a new error when clicking the Settings button (in the Header). It crashes the application with the error:
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
I can make a new issue for this unless it is existing behavior you are aware of (for my case I really would love to just have all of the Header Buttons be optional with a prop to the Annotate component like you have for enabledTools. We don't really need to allow our users to have these additional settings or fullscreen option.
from react-image-annotate.
Let's split this into two issues, both of which can be solved:
- Optional Header Buttons <- Want to make it :)?
- Issue w/ Settings button (see below)
Now there are a couple reasons why the error in (2) might be happening. Keep in mind, it doesn't seem to reproduce on the demo playground. To fix this I'd need a sample github repository that shows the issue (that should then be posted as a new issue). I'm hoping you have two versions of react. Run npm ls react
and see if any of the versions don't match. If they don't match, the fix is usually just updating react or using "resolutions" if you have yarn.
from react-image-annotate.
Ill close this issue because we solved the original problem, but feel free to open new ones for problems or feature proposals :)
from react-image-annotate.
Thank you so much for everything! It really is awesome.
from react-image-annotate.
Related Issues (20)
- Migrate to Material UI v5 HOT 1
- Support React 17 HOT 9
- Clone Button behavior is unpredictable, unable to hide clone button
- React element displays incorrectly but fixes itself after going back and forward HOT 2
- How to set default values to ReactImageAnnotate and get coordinates array on save? HOT 1
- preventDefault is preventing numbers from being typed in the create class menu HOT 1
- support with Commonjs
- Problem to yarn start HOT 9
- How to save an image along with the annotations? HOT 4
- image gets shrinked/hidden or shows different background color while loading on Dialog Mui HOT 2
- Unable to drag a polygon annotation
- Rotation of Box
- Can't find Python executable HOT 1
- Delete issue
- NextJS support failed HOT 1
- hideClone hideFullScreen & hideSettings props are not working HOT 1
- How to smart annotation added in this library
- How to get the box or shape real pixel about [x, y, w, h] and points [x, y]. HOT 2
- How to in in annotation index page state update using redux
- how to use save in this library ? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-image-annotate.