Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Legend bar #53

Merged
merged 11 commits into from
Sep 13, 2023
Merged

Legend bar #53

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift click to select a range
f535b42
legend
zmalkmus Aug 25, 2023
5d14d27
legend
zmalkmus Aug 25, 2023
58f5c89
Filled in legend bar
zmalkmus Aug 29, 2023
f7f5a4f
Delete agvis/cases/wecc_out.lst
zmalkmus Aug 30, 2023
0b38bdd
Delete agvis/cases/wecc_out.txt
zmalkmus Aug 30, 2023
0d9a9e2
Adding ID's to legend labels
zmalkmus Aug 30, 2023
2a5d55e
Fixed typo
zmalkmus Aug 30, 2023
9806c08
Grabbed initial frequency value from config
zmalkmus Aug 31, 2023
2d1fbe8
Finished dynamic legend
zmalkmus Sep 6, 2023
ca0b47b
Removed useless comments
zmalkmus Sep 6, 2023
904b88e
Added ability to drag legend. Added Extensive developer comments
zmalkmus Sep 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Filled in legend bar
  • Loading branch information
@zmalkmus
zmalkmus committed Aug 29, 2023
commit 58f5c8977d9745ac4684b4d0bdec3b98fafcf81a
70 changes: 59 additions & 11 deletions agvis/static/js/Legend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 1,66 @@
L.Legend = L.Control.extend({
L.DynamicLegend = L.Control.extend({
options: {
position: 'bottomright',
},

onAdd: function() {
let div = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
// Legend Container
let div = L.DomUtil.create('div', 'leaflet-bar');
div.style.backgroundColor = 'white';
div.style.boxSizing = 'border-box';
div.style.padding = '5px';
div.style.paddingLeft = '15px';
div.style.paddingRight = '15px';
div.style.width = '300px';
// div.style.height = "100px";
div.style.height = '75px';

div.style.backgroundColor = "white";
div.style.boxSizing = "border-box";
div.style.padding = "4px";
// Title if we need it
// let title = L.DomUtil.create('div', '', div);
// title.style.width = '100%';
// title.style.textAlign = 'center';
// title.style.fontSize = '14px';
// title.style.fontWeight = 'bold';
// title.innerHTML = 'Dynamic Results';

div.innerHTML = "<p style=\"font-size:250%;\"><strong>Hello there</strong></p>";
return div;
},
// Labels at the top of the bar
let topLabels = L.DomUtil.create('div', '', div);
topLabels.style.width = '100%';
topLabels.style.height = '16px';

let left = L.DomUtil.create('div', '', topLabels);
left.style.float = 'left';
left.style.width = '40%';
left.innerHTML = "<p>Contour</p>";

let right = L.DomUtil.create('div', '', topLabels);
right.style.float = 'right';
right.style.width = '60%';
right.innerHTML = "<p>Bus Hz</p>";

onRemove: function() {
// Nothing to do here
// Create Dynamic Gradient
let gradient = L.DomUtil.create('div', 'legend-gradient', div);
gradient.style.backgroundImage = 'linear-gradient(to right, #0b00ff, #0044ff, #0044ff, #279eff, #41cef1, #41cef1, #ffffff, #ffb41e, #ffb41e, #ff9537, #ff4727, #ff4727, #ff0000)';
gradient.style.width = '100%';
gradient.style.height = '20px';
gradient.style.border = '1px solid grey';
gradient.style.borderRadius = '2px';
// gradient.style.margin = 'auto';

// Labels below the bar
let bottomLabels = L.DomUtil.create('div', '', div);
bottomLabels.style.width = '100%';

left = L.DomUtil.create('div', '', bottomLabels);
left.style.float = 'left';
left.innerHTML = "<p>-0.1100</p>";

right = L.DomUtil.create('div', '', bottomLabels);
right.style.float = 'right';
right.innerHTML = "<p> 0.1100</p>";

return div;
}
});

L.legend = function(opts) { return new L.Legend(opts); }
L.dynamicLegend = function() { return new L.DynamicLegend(); }
8 changes: 1 addition & 7 deletions agvis/static/js/Window.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 14,6 @@ class Window {
//Loops every 17 milliseconds to update the animation for the independent simulation data
//Animation step is associated with receiving info from DiME, so we have to use this for the bundled version
setInterval(function(multilayer) {

let timestep = Number(Date.now());
for (let i = 0; i < multilayer.length; i ) {

Expand All @@ -28,8 27,6 @@ class Window {
let pt = (timestep - multi.curtime) / 1000;
multi.pbar.updatePlaybackBar(pt, timestep);
multi.curtime = Number(timestep);


}
}, 17, this.multilayer);

Expand Down Expand Up @@ -63,18 60,15 @@ class Window {
});

this.map.handshake = true;

this.legend = L.legend({ position: 'bottomleft' }).addTo(this.map);
this.legend = L.dynamicLegend().addTo(this.map);
this.pbar = new PlaybackControl(this, options);
this.tileLayer = L.tileLayer(TILE_LAYER_URL).addTo(this.map);
this.zoneLayer = L.zoneLayer().addTo(this.map);
this.topologyLayer = L.topologyLayer().addTo(this.map);
this.contourLayer = L.contourLayer().addTo(this.map);
this.communicationLayer = L.communicationLayer().addTo(this.map);
this.searchLayer = L.searchLayer().addTo(this.map);

this.map.addControl(this.searchLayer.control);

this.simTimeBox = L.simTimeBox({ position: 'topright' }).addTo(this.map);

// side bar
Expand Down