New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change size of landmark point (SVG circle ) #65

Closed
amitguptagwl opened this Issue Jul 4, 2018 · 5 comments

Comments

Projects
None yet
2 participants
@amitguptagwl
Member

amitguptagwl commented Jul 4, 2018

Landmark points are small and hard to find on an image. Hence we've introduced that for some images they are bigger and for some images they're not much visible due the back ground.

Hence we're planning to create an action bar which can let the users to change it's size.

To do it,

  1. You can copy paste tags\actions\lightbulb-action.tag.html
  2. set the css property on change event

Watch for changes, or Bookmark for easy discovery.
Fund this project for new features and maintenance.
[Showcase] your project with us by raising an issue

@amitguptagwl amitguptagwl changed the title from Highlight landmark point appearance (SVG circle ) to Change size of landmark point (SVG circle ) Jul 7, 2018

@jaknowles97

This comment has been minimized.

Contributor

jaknowles97 commented Aug 24, 2018

Hey I'm new to contributing and have been attempting to add this feature. I used the lightbulb-action.tag.html as boilerplate but when I tried to add the css to the .labelpoint class, it gets completely ignored. I confirmed with dev tools that the css was being added/changed but it was being overwritten. I noticed a "r" attribute in the circle element. Changing the value successfully changes the landmark point size. My only problem is after you change the value (using the slider), when you start adding landmark points again it goes back to the default size. I'm having a hard time finding where in code the value of "r" is being applied. My thought is to have the slider directly change the default value of the "r" attribute so it is applied to all landmark points globally. I am assuming that is the desired result?

@jaknowles97

This comment has been minimized.

Contributor

jaknowles97 commented Aug 25, 2018

example
Above is a gif demonstrating the issue I am talking about. below is the code used to achieve these results.

<action-landmark>
    <div class="range-slider">
        <input class="input-range" type="range" step="1" value={ appConfig.pointSize || 4} min="3" max="100" onchange={changeScale}>
    </div>
    <script>

        this.changeScale = function(e){
            appConfig.pointSize = e.target.value;
           $(".labelpoint").attr("r", e.target.value);
        }

    </script>
</action-landmark>
@amitguptagwl

This comment has been minimized.

Member

amitguptagwl commented Aug 25, 2018

@jaknowles97 The radius is hard coded on https://github.com/NaturalIntelligence/imglab/blob/master/js/config.js#L126 . You'll have to change the code to take the value from appConfig.featurePointSize

@jaknowles97

This comment has been minimized.

Contributor

jaknowles97 commented Aug 25, 2018

@amitguptagwl I got it to work but I am not understanding the appConfig.featurePointSize part of it. I just declared a global variable named "featurePointSize" in config.js, then in the action-landmark I set featurePointSize = e.target.value;

@amitguptagwl

This comment has been minimized.

Member

amitguptagwl commented Aug 25, 2018

If all the global configuration variable are the part of appconfig then the configuration can be saved so that user need not to it always. In this way, we need not to create many global variables

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment