Comments (4)
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.
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.
Hi @knightss27,
OK, looking forward to this.
from grafana-network-weathermap.
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)
- Add custom icons with image urls
- Current speed value's in dashboard config HOT 3
- Node status - change node color based on received data HOT 2
- ifHCOutOctets and ifHCInOctets SNMP Queries Return Identical Values HOT 4
- VIAs > easier way to use? HOT 2
- Panel JSON seems to be incorrectly shown
- Add Decimals to link throughput display value
- Issue when using a rate calculation for metrics HOT 3
- Add support for Scale over 100%
- Option to make background image move with the map
- Add multiple links between two nodes with different path HOT 1
- Strokes are disappearing
- The link query field is showing a lot of extra info that is making it hard to read
- Slow loading of traffic meteorological maps with multiple queries
- Bandwidth/speed doesn't show correctly HOT 1
- Slow Performance Editing Map with Large Number of Queries; Missing Option to Expand/Collapse All
- On links, shift position where arrows meet
- While creating links, side query selection field only shows ~20 queries.
- how to make a via link
- Bandwidth line disappear HOT 1
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 grafana-network-weathermap.