Coder Social home page Coder Social logo

Comments (4)

knightss27 avatar knightss27 commented on May 29, 2024 1

Ok, I can definitely just expose the zoom level and possibly centering to the editor.

Also, while being a read_only user, I cannot change the zoom level.

Hadn't realized this but it makes sense. Zooming got restricted to only be changed in editing mode, as otherwise when you scroll past the window it can be annoying, and I felt that realistically most people keep the weathermap just up in a place to glance at, but I do see how if you wanted to have someone view the weathermap and also have the ability to zoom this wouldn't work. I will add a separate key you are able to hold while using the map outside of editing that lets you zoom.

Also the "viewbox" has a bit of a mixed up role as it stands, which I'm not entirely sure how to fix. The viewbox field when editing the weathermap directly informs the underlying SVG viewbox attribute. For most people, they shouldn't have to touch this since just zooming out and panning should let them fix most things to fit. But I still have it exposed for whatever reason.

Sometimes, according the size of the panel, the map is not always on the same place inside the panel (might move from left to center).

This is because the SVG's width/height on the screen (so not the "viewbox" which is internal to the SVG, but the SVG element's own width/height) attempts to fit to the smaller dimension of the size of the panel. This is why when you have no viewbox size it doesn't respond dynamically. If your "viewbox" is a square (i.e. 600x600) then the SVG will try and fit your panel's size based on that -- i.e. the SVG will move to the right if you make your panel a long rectangle, as it is fitting the SVG to the height of the panel and then centering horizontally.

So I can make sure to add read_only zooming ability, and I can expose the zoom level attribute. I need to investigate a little more about having a "centered on" attribute since currently I just use an "offset" value which tells the SVG how far off from the original (0,0) centered position to draw stuff.

from grafana-network-weathermap.

nadriang avatar nadriang commented on May 29, 2024

A zoom feature will be really helpful. I hope it will be on priority list for the next versions.
@OCrylic very nice description and great job with the addon @knightss27, thank you.

from grafana-network-weathermap.

OCrylic avatar OCrylic commented on May 29, 2024

Hi @knightss27,

OK, looking forward to this.

from grafana-network-weathermap.

knightss27 avatar knightss27 commented on May 29, 2024

I've gone ahead to allow zooming / moving outside of edit mode, so view-only users can just peruse around as they see fit. I've also exposed the zoom level and the default offsets, so you can set them to specific numbers, though this doesn't work quite the way I think the map centering you mentioned does. The new release (v0.3.4) is awaiting review from Grafana as it stands.

from grafana-network-weathermap.

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.