### Start Web Server for Interactive Tests
Source: https://github.com/lgsinnovations/sigplot/blob/master/CONTRIBUTING.md
Starts a local web server to run interactive tests. Access http://localhost:1337/test/test.html in your browser to perform these tests.
```bash
grunt web_server
```
--------------------------------
### Install Webpack and SigPlot
Source: https://github.com/lgsinnovations/sigplot/blob/master/README.md
Install webpack globally and then install sigplot within your project directory.
```bash
npm install webpack -g
```
```bash
mkdir sigplot-webpack
cd sigplot-webpack
npm install sigplot
```
--------------------------------
### Install NVM, Node.js, and Grunt CLI
Source: https://github.com/lgsinnovations/sigplot/blob/master/CONTRIBUTING.md
Installs Node Version Manager, the latest stable Node.js, and the Grunt command-line interface. These are prerequisites for building SigPlot with Grunt.
```bash
# Install NVM
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
# Install stable Node.js
nvm install stable
# Use stable Node.js
nvm use stable
# Install Grunt
npm install -g grunt-cli grunt
```
--------------------------------
### Standalone HTML Setup for SigPlot
Source: https://github.com/lgsinnovations/sigplot/blob/master/README.md
Include this script in your HTML to initialize SigPlot. Ensure the 'plot' div exists on the page.
```html
SigPlot Standalone
```
--------------------------------
### Webpack Demo JavaScript Setup
Source: https://github.com/lgsinnovations/sigplot/blob/master/README.md
This JavaScript file is used with webpack to bundle SigPlot for use in a web application. It requires a 'plot' element in the HTML.
```javascript
let sigplot = require("sigplot");
let options = {};
let plot = new sigplot.Plot(document.getElementById('plot'), options);
```
--------------------------------
### Run Non-Interactive Tests
Source: https://github.com/lgsinnovations/sigplot/blob/master/CONTRIBUTING.md
Executes the SigPlot unittests that do not require user interaction. This command should be run after installing dependencies and before committing code.
```bash
grunt test
```
--------------------------------
### Overlay 2D Raster Data
Source: https://context7.com/lgsinnovations/sigplot/llms.txt
Creates a 2D raster or waterfall plot layer from a Float32Array. Specify the data, header with type and dimensions, and layer options. The example uses a 2D data type with specified sub-array size.
```javascript
// 2D raster/waterfall data
var rasterData = new Float32Array(1024 * 100); // 100 rows of 1024 samples
for (var i = 0; i < rasterData.length; i++) {
rasterData[i] = Math.random();
}
var layer2d = plot.overlay_array(rasterData, {
type: 2000, // 2D data type
subsize: 1024, // Samples per row
xstart: 0,
xdelta: 1,
ystart: 0,
ydelta: 1
}, {
name: "Spectrogram"
});
```
--------------------------------
### Create Data Pipe for Streaming
Source: https://context7.com/lgsinnovations/sigplot/llms.txt
Sets up a data pipe for real-time streaming using `overlay_pipe`. Configure pipe options like data type and sample rate, and layer options for frame size and name. Data is pushed to the pipe using the `plot.push` method.
```javascript
// Create a pipe for streaming data
var pipe_options = {
type: 1000, // 1D data
xstart: 0,
xdelta: 0.001, // 1ms sample rate
yunits: "Amplitude"
};
var layer_options = {
framesize: 1024, // Number of samples per frame
name: "Real-time Signal"
};
var pipe_uuid = plot.overlay_pipe(pipe_options, layer_options);
```
```javascript
// Push data to the pipe (typically from setInterval or WebSocket)
function onDataReceived(newData) {
plot.push(pipe_uuid, newData);
}
// Simulate streaming data
setInterval(function() {
var frame = new Float32Array(1024);
for (var i = 0; i < frame.length; i++) {
frame[i] = Math.sin(i * 0.1) + Math.random() * 0.1;
}
plot.push(pipe_uuid, frame);
}, 100);
```
--------------------------------
### Compile JavaScript Bundle with Webpack
Source: https://github.com/lgsinnovations/sigplot/blob/master/README.md
Use webpack to compile the demo.js file into a bundle.js file for use in the HTML.
```bash
webpack ./demo.js bundle.js
```
--------------------------------
### Load BLUEFILE from URL
Source: https://context7.com/lgsinnovations/sigplot/llms.txt
Loads data from a BLUEFILE (.tmp, .prm, .blu) using `overlay_href`. A callback function is provided to handle the loaded file's metadata and index. Layer name is specified.
```javascript
// Load a BLUEFILE from URL
plot.overlay_href("/data/signal.tmp", function(hcb, layerIndex) {
console.log("File loaded:", hcb.file_name);
console.log("Data type:", hcb.type);
console.log("Samples:", hcb.size);
}, {
name: "Signal File"
});
```
--------------------------------
### Create Basic SigPlot Instance
Source: https://context7.com/lgsinnovations/sigplot/llms.txt
Initializes a SigPlot instance attached to a DOM element. Configure rendering modes, axis settings, colors, and interaction behavior using the options object. Autohide panbars and hide the plot note are demonstrated.
```javascript
// Create a plot attached to a div element
var plot = new sigplot.Plot(document.getElementById('plot'), {
autohide_panbars: true, // Auto-hide pan bars when mouse leaves
hide_note: true, // Hide the plot note
cmode: "MA", // Rendering mode: Magnitude
autox: 3, // Auto-scale X axis
autoy: 3, // Auto-scale Y axis
legend: true, // Show legend
no_legend_button: false, // Show legend toggle button
cross: true, // Show crosshairs
nogrid: false, // Show background grid
colors: {
fg: "#FFFFFF", // Foreground color
bg: "#000000" // Background color
},
xlabel: "Frequency (Hz)", // Custom X-axis label
ylabel: "Power (dB)" // Custom Y-axis label
});
```
--------------------------------
### Load Multiple BLUEFILEs
Source: https://context7.com/lgsinnovations/sigplot/llms.txt
Loads multiple BLUEFILEs from URLs by delimiting them with a pipe symbol (|). A callback function is executed for each loaded file, receiving its index.
```javascript
// Load multiple files with pipe delimiter
plot.overlay_href("/data/file1.tmp|/data/file2.tmp", function(hcb, i) {
console.log("Loaded layer", i);
});
```
--------------------------------
### Load MATFILE from URL
Source: https://context7.com/lgsinnovations/sigplot/llms.txt
Loads data from a MATFILE (.mat) using `overlay_href`. A callback function is provided to confirm loading, and a layer name is assigned.
```javascript
// Load a MATFILE
plot.overlay_href("/data/measurement.mat", function(hcb, layerIndex) {
console.log("MAT file loaded");
}, {
name: "MATLAB Data"
});
```
--------------------------------
### Prepare Code for Submission
Source: https://github.com/lgsinnovations/sigplot/blob/master/CONTRIBUTING.md
Reformats code and ensures it meets SigPlot's coding standards. Run this command before committing to clean up your code.
```bash
grunt prep
```
--------------------------------
### Fetch Latest Code and Rebase Branch
Source: https://github.com/lgsinnovations/sigplot/blob/master/CONTRIBUTING.md
Updates your local branch with the latest changes from the 'origin/master' branch. This is a recommended step before submitting a pull request.
```bash
git fetch origin
git rebase origin/master
```
--------------------------------
### Configure QUnit Test Order
Source: https://github.com/lgsinnovations/sigplot/blob/master/test/test.html
Ensures that QUnit tests are executed in the order they are defined, which is crucial for tests that have dependencies or expect a specific state.
```javascript
// always run tests in-order
QUnit.config.reorder = false;
```
--------------------------------
### Manage Event Listeners
Source: https://context7.com/lgsinnovations/sigplot/llms.txt
Subscribe to plot interactions such as mouse movement, clicks, zoom changes, and file overlay events using addListener.
```javascript
// Mouse tag events (clicks on plot area)
plot.addListener("mtag", function(evt) {
console.log("Mouse tag at:", evt.x, evt.y); // Real coordinates
console.log("Pixel position:", evt.xpos, evt.ypos);
if (evt.w !== undefined && evt.h !== undefined) {
console.log("Box selection:", evt.w, "x", evt.h);
}
});
// Mouse move events
plot.addListener("mmove", function(evt) {
document.getElementById("coords").textContent =
"X: " + evt.x.toFixed(3) + " Y: " + evt.y.toFixed(3);
});
// Zoom events
plot.addListener("zoom", function(evt) {
console.log("Zoomed to level:", evt.level);
console.log("X range:", evt.xmin, "-", evt.xmax);
console.log("Y range:", evt.ymin, "-", evt.ymax);
});
// Unzoom events
plot.addListener("unzoom", function(evt) {
console.log("Unzoomed to level:", evt.level);
});
// File overlay events
plot.addListener("file_overlayed", function(evt) {
console.log("File loaded:", evt.filename);
});
plot.addListener("file_deoverlayed", function(evt) {
console.log("File removed:", evt.fileName);
});
// Remove a listener
var myCallback = function(evt) { /* ... */ };
plot.addListener("mtag", myCallback);
plot.removeListener("mtag", myCallback);
```
--------------------------------
### Manage SigPlot Plugins
Source: https://context7.com/lgsinnovations/sigplot/llms.txt
Add, remove, and create custom plugins to extend SigPlot's functionality. Plugins can be assigned a z-order for rendering priority.
```javascript
var annotationPlugin = new sigplot.AnnotationPlugin();
plot.add_plugin(annotationPlugin, 10);
```
```javascript
var sliderPlugin = new sigplot.SliderPlugin({ direction: "vertical" });
plot.add_plugin(sliderPlugin, 5); // Renders below annotations
```
```javascript
plot.remove_plugin(sliderPlugin);
```
```javascript
class CustomPlugin extends sigplot.Plugin {
pluginSetup() {
this.defineProperty("myOption", {
defaultValue: true,
refreshOnChange: true
});
}
pluginInit() {
// Called when added to plot
this.addListener("mmove", this.onMouseMove.bind(this));
}
pluginRefresh() {
var ctx = this.Context;
var Mx = this.Mx;
// Custom drawing code
ctx.fillStyle = "#FF0000";
ctx.fillRect(Mx.l, Mx.t, 50, 50);
}
pluginDispose() {
// Cleanup when removed
}
onMouseMove(evt) {
// Handle mouse events
}
}
var customPlugin = new CustomPlugin({ myOption: false });
plot.add_plugin(customPlugin);
```
--------------------------------
### Synchronize Plot Zoom and Pan
Source: https://context7.com/lgsinnovations/sigplot/llms.txt
Use the mimic method to synchronize zoom and pan operations between plots. Options include syncing all axes, only the X-axis, or only the Y-axis.
```javascript
var plot1 = new sigplot.Plot(document.getElementById('plot1'), {});
var plot2 = new sigplot.Plot(document.getElementById('plot2'), {});
plot2.mimic(plot1, {
zoom: true, // Sync both X and Y zoom
unzoom: true, // Sync unzoom
pan: true // Sync X and Y pan
});
```
```javascript
plot2.mimic(plot1, {
xzoom: true, // Only sync X-axis zoom
xpan: true // Only sync X-axis pan
});
```
```javascript
plot2.mimic(plot1, {
yzoom: true,
ypan: true
});
```
```javascript
plot2.unmimic(plot1);
```
--------------------------------
### Stream Data via WebSocket
Source: https://context7.com/lgsinnovations/sigplot/llms.txt
Use overlay_websocket to create a layer that consumes binary data from a WebSocket. The plot automatically processes incoming ArrayBuffer data and JSON headers.
```javascript
// Create WebSocket layer
var wsurl = "ws://localhost:8080/signal-feed";
var ws_overrides = {
type: 1000,
xdelta: 0.0001,
format: "SF" // Scalar Float format
};
var layer_uuid = plot.overlay_websocket(wsurl, ws_overrides, {
name: "WebSocket Feed",
framesize: 2048
});
// The plot automatically handles incoming binary ArrayBuffer data
// and JSON header updates from the WebSocket
```
--------------------------------
### Webpack HTML Structure
Source: https://github.com/lgsinnovations/sigplot/blob/master/README.md
Basic HTML structure for a Webpack-bundled SigPlot application. It includes a 'plot' div and links to the generated 'bundle.js'.
```html
SigPlot Webpack
```
--------------------------------
### Modify Plot Settings
Source: https://context7.com/lgsinnovations/sigplot/llms.txt
Update plot appearance and behavior dynamically using change_settings without requiring a full re-initialization.
```javascript
// Toggle grid visibility
plot.change_settings({ grid: true });
// Change axis display
plot.change_settings({
show_x_axis: true,
show_y_axis: true,
show_readout: true,
specs: true // Show all specs
});
// Change display mode
plot.change_settings({
cmode: "L2", // 20*log10 mode
legend: true,
index: false // Use abscissa (not index) for X axis
});
// Auto-scaling options
plot.change_settings({
autox: 3, // Full auto-scale X
autoy: 3, // Full auto-scale Y
all: true // Show all data (not just one buffer)
});
// Toggle crosshairs
plot.change_settings({ cross: true });
// Wheel zoom configuration
plot.change_settings({
wheelZoom: "xy", // "x", "y", or "xy"
wheelZoomPercent: 0.2 // Zoom percentage per wheel tick
});
```
--------------------------------
### Manage Sliders with SigPlot SliderPlugin
Source: https://context7.com/lgsinnovations/sigplot/llms.txt
Create vertical or horizontal sliders for marking positions and measuring distances. Supports pairing sliders for delta calculations and event listeners for drag interactions.
```javascript
// Create vertical slider
var slider = new sigplot.SliderPlugin({
direction: "vertical", // "vertical", "horizontal", or "both"
name: "Marker A",
style: {
lineWidth: 2,
strokeStyle: "#FF0000",
textStyle: "#FFFFFF"
}
});
plot.add_plugin(slider);
// Set slider position (real coordinates)
slider.set_position(250);
// Create a second slider for delta measurements
var slider2 = new sigplot.SliderPlugin({
direction: "vertical",
name: "Marker B",
style: {
lineWidth: 2,
strokeStyle: "#00FF00"
}
});
plot.add_plugin(slider2);
slider2.set_position(350);
// Pair sliders to show delta between them
slider.pair(slider2);
// Listen for slider events
slider.addListener("slidertag", function(evt) {
console.log("Slider position:", evt.position);
console.log("Slider pixel location:", evt.location);
});
slider.addListener("sliderdrag", function(evt) {
console.log("Slider dragged to:", evt.position);
});
// Get current position
var currentPos = slider.get_position();
var currentLoc = slider.get_location();
// Horizontal slider example
var hslider = new sigplot.SliderPlugin({
direction: "horizontal",
name: "Threshold",
style: {
strokeStyle: "#FFFF00"
}
});
plot.add_plugin(hslider);
hslider.set_position(-10); // Y-axis position
```
--------------------------------
### Semantic Commit Message Format
Source: https://github.com/lgsinnovations/sigplot/blob/master/CONTRIBUTING.md
Specifies the required format for commit messages to ensure consistency and clarity in the project's version history. Use specific types like 'feat', 'fix', 'docs', etc.
```text
commit-type: commit summary
Commit details as necessary...
```
--------------------------------
### Control Zoom and Navigation
Source: https://context7.com/lgsinnovations/sigplot/llms.txt
Programmatically adjust the plot view using coordinate-based, percentage-based, or pixel-based zoom methods.
```javascript
// Zoom to a specific region
plot.zoom(
{ x: 100, y: -20 }, // Upper-left corner (real coordinates)
{ x: 500, y: 20 } // Lower-right corner (real coordinates)
);
// Continuous zoom mode (doesn't create new zoom level)
plot.zoom({ x: 150, y: -15 }, { x: 450, y: 15 }, true);
// Percentage-based zoom (zoom in by 20%)
plot.percent_zoom(0.2, 0.2);
// Unzoom one level
plot.unzoom(1);
// Unzoom all levels (reset to full view)
plot.unzoom();
// Pixel-based zoom
plot.pixel_zoom(100, 50, 400, 300);
```
--------------------------------
### Add Annotations with SigPlot AnnotationPlugin
Source: https://context7.com/lgsinnovations/sigplot/llms.txt
Use the AnnotationPlugin to place text or image annotations on a plot using either real or pixel coordinates. Includes event listeners for interaction and methods to clear annotations.
```javascript
// Create and add annotation plugin
var annotationPlugin = new sigplot.AnnotationPlugin({
display: true
});
plot.add_plugin(annotationPlugin);
// Add a text annotation at real coordinates
annotationPlugin.add_annotation({
x: 250, // X coordinate (real units)
y: 10, // Y coordinate (real units)
value: "Peak Signal", // Text to display
color: "#FF0000", // Text color
font: "bold 14px Arial", // Font style
popup: "Max amplitude at 250 Hz", // Hover popup text
onclick: function() {
alert("Annotation clicked!");
}
});
// Add annotation at pixel coordinates
annotationPlugin.add_annotation({
pxl_x: 100, // Pixel X position
pxl_y: 50, // Pixel Y position
value: "Fixed Position",
color: "#00FF00"
});
// Add image annotation
var img = new Image();
img.src = "/icons/marker.png";
img.onload = function() {
annotationPlugin.add_annotation({
x: 300,
y: 5,
value: img // HTMLImageElement
});
};
// Listen for annotation events
plot.addListener("annotationclick", function(evt) {
console.log("Clicked annotation:", evt.annotation.value);
});
plot.addListener("annotationhighlight", function(evt) {
console.log("Highlight state:", evt.state, evt.annotation.value);
});
// Clear all annotations
annotationPlugin.clear_annotations();
```
--------------------------------
### Manage Plot Layers
Source: https://context7.com/lgsinnovations/sigplot/llms.txt
Perform operations on layers including retrieval, removal, data reloading, and plot refreshing.
```javascript
// Get a layer by UUID
var layer = plot.get_layer(layer_uuid);
console.log("Layer name:", layer.name);
console.log("Layer HCB:", layer.hcb);
// Remove a specific layer
plot.deoverlay(layer_uuid);
// Remove layer by index
plot.deoverlay(0); // Remove first layer
// Remove last layer
plot.deoverlay(-1);
// Remove all layers
plot.deoverlay();
// Reload layer data
var newData = new Float32Array(1024);
plot.reload(layer_uuid, newData, {
xstart: 0,
xdelta: 0.01
});
// Rescale plot after data changes
plot.rescale();
// Force refresh/redraw
plot.refresh(); // Full refresh with data re-render
plot.redraw(); // Quick redraw without data re-render
```
--------------------------------
### Overlay 1D Array Data
Source: https://context7.com/lgsinnovations/sigplot/llms.txt
Creates a 1D plot layer from a JavaScript array. Specify data, header overrides for metadata (like units and scaling), and layer options for display customization. Connecting line type and no symbols are used.
```javascript
// Simple 1D data plot
var data = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var data_header = {
xunits: "Time", // X-axis units label
xstart: 100, // Starting X value
xdelta: 50, // X step between points
yunits: "Power" // Y-axis units label
};
var layer_options = {
name: "Sample Data", // Layer name for legend
line: 3, // Line type: 3 = connecting
symbol: 0, // Symbol type: 0 = none
radius: 3 // Symbol radius
};
var layer_uuid = plot.overlay_array(data, data_header, layer_options);
```
--------------------------------
### Draw Regions with SigPlot BoxesPlugin
Source: https://context7.com/lgsinnovations/sigplot/llms.txt
Use the BoxesPlugin to draw rectangular regions on a plot. Supports both real-coordinate and absolute pixel-based placement.
```javascript
// Create and add boxes plugin
var boxesPlugin = new sigplot.BoxesPlugin({
display: true
});
plot.add_plugin(boxesPlugin);
// Add a box at real coordinates
boxesPlugin.add_box({
x: 100, // Left edge (real units)
y: 15, // Top edge (real units)
w: 200, // Width (real units)
h: 10, // Height (real units)
strokeStyle: "#00FF00", // Border color
lineWidth: 2,
fillStyle: "#00FF00", // Fill color
fill: true,
alpha: 0.3, // Fill transparency
text: "Region of Interest" // Label
});
// Add box with absolute pixel placement
boxesPlugin.add_box({
x: 10, // Pixels from left plot edge
y: 10, // Pixels from top plot edge
w: 100,
h: 50,
absolute_placement: true,
strokeStyle: "#FF0000",
text: "Fixed Box"
});
// Clear all boxes
boxesPlugin.clear_boxes();
// Remove the plugin
plot.remove_plugin(boxesPlugin);
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.