Git Product home page Git Product logo

Comments (5)

alanaberdeen avatar alanaberdeen commented on September 26, 2024

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.

rcasero avatar rcasero commented on September 26, 2024

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.

alanaberdeen avatar alanaberdeen commented on September 26, 2024

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.

rcasero avatar rcasero commented on September 26, 2024

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.

alanaberdeen avatar alanaberdeen commented on September 26, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.