Comments (5)
Hi @rcasero,
In both Layers and Channels, the eye icon should open up a panel that allows adjustment of annotation/image opacity through a slider and text input.
I will investigate why the annotations are resisting being set to 100% opacity. I have a suspicion as to why this might be. Will get back to you on this.
from aida.
Hi @alanaberdeen ,
I do get the slider and text to adjust opacity, but regardless of whether I click the eye icon or not. To me, I think it'd be more useful to always have the slider/text, and then clicking the eye icon makes the opacity 0%, and clicking it again makes the opacity whatever value it had before.
This way, it's easy to make the overlays appear/disappear quickly, and check whether e.g. cell segmentations fit the image. This is also the behaviour in Gimp, Seg3D and other image programs.
Regarding why the annotations are resisting 100% opacity, I think the annotations come with an alpha value in the .json file. I suspect that what you get on screen is alpha * opacity. Thus, when you set opacity to 100%, you are just getting the alpha set in the file.
from aida.
Hi @rcasero,
Yes I get the functionality you're describing. Currently the three buttons change the tab in that small menu under each layer between Opacity, Rename and Delete. I'll investigate what the best solution is as I agree that an easy toggle would be useful. I'm a little hesitant to make the eye button have two effects; toggling the opacity and changing the menu tab, but I'll see if there's a good solution there.
You're correct as to why the annotations are not being set at 100% opacity. The default layer colours set the fill colour at 70% opacity and the stroke at 100%. I think this is preferable as it helps to distinguish the stroke from the fill and enable the annotator to see through to the underlying object. If you want completely opaque annotations then I you should be able to set these in your JSON or adjust them in the interface itself.
from aida.
Hi @alanaberdeen ,
I was just mentioning it because the eye icon's functionality in popular applications is already to toggle the layer's visibility, e.g. Photoshop, The Gimp, Seg3D...
If you want to have something to change the menu tab, I would personally (and that's just me) have three small icons in a row, one for Opacity, one for Rename, one for Delete. When you click one of them, the corresponding small menu shows up. This allows to see which submenus are available, and you can just to the one you need without having to cycle.
Regarding the opacity, I think you are right. It's good to have darker contours and a lighter filling. That's necessary to see different objects when your segmentations touch each other. That's what I did yesterday, and it looks nice. However, now I'm thinking that it'd be better to achieve that by using two different colours, e.g. light blue and dark blue, both with the same opacity. (I'll give that a try)
That way, you separate the concepts of opacity and contrast. The reason is that you may still want to make the darker edges translucent, to check how well they match the underlying image.
Anyway, these are just design preferences, and you are the developer!
from aida.
Hey @rcasero,
So I revisited this today. I think you're definitely right about the importance of UI consistency cross-platforms. I've switched it around a bit, there is a new semi-filled raindrop icon to represent the opacity controls tab. Then, the eye icon is prepended to the slider and toggles the visibility between 0 and the current value.
Re: distinguishing between fill and stroke. I like the idea of using hue/saturation, this leaves opacity to serve its "real" function as a visual tool to guide the items registration with the image below.
from aida.
Related Issues (20)
- AIDA freezing browser with zoom + opacity slider HOT 1
- Crash with large annotation json files HOT 9
- Display mouse XY coordinates on Navigator HOT 1
- Measure tool shows 0um HOT 1
- Move Tool freezes interface and Delete Tool cannot delete single objects HOT 3
- Select tool delete object when selecting another object HOT 3
- File browser now shows images and annotations directories HOT 1
- Rectangles plotted without colours HOT 1
- How to implement the function of annotating images HOT 5
- Bug with `cp aidaLocal/* dist` in `package.json` HOT 2
- PayloadTooLargeError: request entity too large
- Show/hide annotations by sliding threshold HOT 1
- How do i upload an image into the editor? HOT 1
- Viewing Zeiss .czi files HOT 2
- function to convert Zeiss .czi files to DeepZoom .dzi using aicsimageio and pyvips
- Errors with "Run locally" and "Develop" HOT 2
- How to add images to starting menu? HOT 7
- How do I connect a file of annotations to an image? HOT 1
- Data not visible when browing from another machine HOT 9
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 aida.