bands-widget
Advanced tools
A small library to plot single/multiple band structures together in a single plot.
Library to plot band structures using chartjs library.
Include it in your code via the <script>tag:
<script src="dist/bandstructure.min.js"></script>
To plot the band structure below, create the files bands.html and bands.js as shown below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Materials Cloud Bands Widget</title>
<meta name="description" content="">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/mcloud_theme.min.css">
<link rel="stylesheet" href="css/bands.css">
</head>
<body>
<!-- Band data -->
<div id="band-container" style="overflow-x: auto;">
<div id="band-metadata">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h3>Band Structure</h3>
<div>
<!-- it's essential to put an empty div around the canvas when using a non-forced aspect ratio:
https://stackoverflow.com/questions/45427088/chart-js-is-always-increasing-height-on-chart-resize
or https://stackoverflow.com/questions/40263891/canvas-static-height-chartjs
height can then be specified in the canvas
-->
<canvas id="band1" height="400px">
</canvas>
</div>
<p class="input-group input-group-div">
<span class="input-group-addon">Edit the path: </span>
<input id="bandPathTextBox1" class="input-group form-control input-path"
autocomplete="off" onkeyup="changeBandPath('bandPathTextBox1', 'band1')">
</p>
<button type="button" class="btn btn-primary btn-md reset-path-btn" title="Reset to default path"
onclick="resetDefaultBandPath('bandPathTextBox1', 'band1')">
Reset default path
</button>
<button type="button" class="btn btn-primary btn-md reset-path-btn" title="Reset zoom"
onclick="resetZoom('band1')">
Reset zoom
</button>
<div class="btn-group" role="group" aria-label="zoom-pan-mode">
<button type="button" class="btn btn-primary" id="band1Zoom" onclick="dragToZoom('band1', 'band1Zoom', 'band1Pan')">Drag (or pinch) to zoom</button>
<button type="button" class="btn btn-default" id="band1Pan" onclick="dragToPan('band1', 'band1Zoom', 'band1Pan')">Drag to pan</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="dist/bandstructure.min.js"></script>
<script src="js/bands.js"></script>
</body>
</html>
plots = {};
//It updates the band graph for user input.
function changeBandPath (textBoxId, plotInfoId) {
var theTextBox = document.getElementById(textBoxId);
var string = theTextBox.value;
var finalPath = getPathArrayFromPathString(string);
plots[plotInfoId].plotObj.updateBandPlot(finalPath);
}
//It updates the band graph for to its default path.
function resetDefaultBandPath (textBoxId, plotInfoId) {
var theTextBox = document.getElementById(textBoxId);
theTextBox.value = getPathStringFromPathArray(plots[plotInfoId].plotObj.getDefaultPath());
plots[plotInfoId].plotObj.updateBandPlot(plots[plotInfoId].plotObj.getDefaultPath(), true);
}
//It updates the band graph for to its default path.
function resetZoom (plotInfoId) {
// Note: call the resetZoom of he plotObj, not directly the call of the plotObj.myChart
plots[plotInfoId].plotObj.resetZoom();
}
// Swiches to drag-to-zoom mode
function dragToZoom (plotInfoId, zoomButtonId, panButtonId) {
$("#"+zoomButtonId).addClass('btn-primary');
$("#"+zoomButtonId).removeClass('btn-default');
$("#"+panButtonId).addClass('btn-default');
$("#"+panButtonId).removeClass('btn-primary');
plots[plotInfoId].plotObj.myChart.options.pan = {
enabled: false,
mode: "y"
};
plots[plotInfoId].plotObj.myChart.options.zoom = {
enabled: true,
mode: "y",
drag: true
};
plots[plotInfoId].plotObj.myChart.update();
}
// Swiches to drag-to-zoom mode
function dragToPan (plotInfoId, zoomButtonId, panButtonId) {
$("#"+panButtonId).addClass('btn-primary');
$("#"+panButtonId).removeClass('btn-default');
$("#"+zoomButtonId).addClass('btn-default');
$("#"+zoomButtonId).removeClass('btn-primary');
plots[plotInfoId].plotObj.myChart.options.pan = {
enabled: true,
mode: "y"
};
plots[plotInfoId].plotObj.myChart.options.zoom = {
enabled: false,
mode: "y",
drag: true
};
plots[plotInfoId].plotObj.myChart.update();
}
// get json data and create band plot
function bandPlot(bandDivId, bandPathTextBoxId, dataFilePaths, colorInfo) {
plots[bandDivId] = {};
// create band plot object
var theBandPlot = new BandPlot(bandDivId, 5.1, {"ymin": -20, "ymax": 32});
var colorDict;
// add data for every band structure
dataFilePaths.forEach(function(dataFilePath, dataIdx) {
$.ajax({
url: dataFilePath,
async: false,
success: function (data) {
// The color should be the same for all bands even if there are spin up and down, but different
// for the two datasets
// User can pass array of 3 colors: ['Single', 'Up', 'Down']
// e.g. theBandPlot.addBandStructure(data, ['Single', 'Up', 'Down'])
// - Single' color will be used when there is no up/down bands
// - 'Up' color for spin up bands
// - 'Down' color of spin down bands
var colorDict;
if(colorInfo !== undefined) {
var newColor = tinycolor(colorInfo[dataIdx]);
colorDict = [newColor.toHexString(), newColor.darken(20).toHexString(), newColor.brighten(20).toHexString()];
}
theBandPlot.addBandStructure(data, colorDict);
}
});
});
// update band structure data for plotting
theBandPlot.updateBandPlot();
var theTextBox = document.getElementById(bandPathTextBoxId);
theTextBox.value = getPathStringFromPathArray(theBandPlot.getDefaultPath());
var helperString = "Use - to define a segment<br>Use | to split the path.<br>Valid k-point names:<br>";
var validPoints = getValidPointNames(theBandPlot.allData);
helperString += validPoints.join(', ');
plots[bandDivId].plotObj = theBandPlot;
$(theTextBox).data('bs.tooltip', false).tooltip({title: helperString, html: true})
.tooltip('show'); // Open the tooltip
}
$( document ).ready(function() {
bandPlot("band1", "bandPathTextBox1", ["data/b2y_entangled_SM_02.json", "data/b2y_dft.json"]);
});
FAQs
A small library to plot single/multiple band structures together in a single plot.
We found that bands-widget demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenAI rotated macOS signing certificates after a malicious Axios package reached its CI pipeline in a broader software supply chain attack.
Security News
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.
Security News
Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.