floscilloscope

A customizable oscilloscope widget for Flutter, providing features such as dynamic chart rendering, threshold manipulation, zooming and panning, customizable axes, support for multiple data series, and interactive threshold sliders.

Table of Contents

• floscilloscope
  • Table of Contents
  • Features
  • Installation
  • Usage
    • Using SimpleOscilloscope Widget
    • Using AlternativeSimpleOscilloscope Widget
    • Configuring OscilloscopeAxisChartData
  • Contributing
  • License
  • Sponsor Me
  • Connect With Me

Features

• Dynamic Chart Rendering: Visualize data points in real-time with smooth transitions.
• Threshold Lines and Sliders: Easily set and adjust threshold values interactively.
• Zooming and Panning: Navigate through data with intuitive zoom and pan gestures. (AlternativeSimpleOscilloscope only)
• Customizable Axes: Define labels, units, and scales for both horizontal and vertical axes.
• Multiple Data Series Support: Display multiple lines with customizable colors for comprehensive data analysis.
• Extra Plot Lines: Add additional horizontal lines for markers or reference points.
• Interactive Threshold Manipulation: Double-tap to reset thresholds or open dialogs for precise adjustments.
• Optimized Performance: Efficient rendering with RepaintBoundary and optimized widget structures.
• Multiple Chart Libraries: Possibility to use the syncfusion_flutter_charts as well as the fl_chart packages, depending on your preference.

Installation

Add floscilloscope as a dependency in your pubspec.yaml file:

dependencies:
  floscilloscope: ^1.0.4

Then run flutter pub get to fetch the package.

Usage

Using SimpleOscilloscope Widget

The SimpleOscilloscope widget provides a straightforward oscilloscope chart with essential features like threshold lines and sliders. It uses the fl_chart package.

import 'package:flutter/material.dart';
import 'package:floscilloscope/floscilloscope.dart';

class OscilloscopeExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Sample data points
    final data = [
      OscilloscopePoint(0, 0),
      OscilloscopePoint(1, 1),
      OscilloscopePoint(2, 0.5),
      OscilloscopePoint(3, 1.5),
      OscilloscopePoint(4, 1),
      OscilloscopePoint(5, 2),
    ];

    final oscilloscopeData = OscilloscopeAxisChartData(
      dataPoints: [data],
      horizontalAxisLabel: 'Time',
      verticalAxisLabel: 'Amplitude',
      horizontalAxisUnit: 's',
      verticalAxisUnit: 'V',
      threshold: 1.0,
      onThresholdValueChanged: (value) {
        print('Threshold updated to: $value');
      },
    );

    return Scaffold(
      appBar: AppBar(title: Text('Simple Oscilloscope Example')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SimpleOscilloscope(
          oscilloscopeAxisChartData: oscilloscopeData,
        ),
      ),
    );
  }
}

Using AlternativeSimpleOscilloscope Widget

The AlternativeSimpleOscilloscope offers additional customization options and different interaction behaviors compared to the SimpleOscilloscope. It uses the syncfusion_flutter_charts package.

import 'package:flutter/material.dart';
import 'package:floscilloscope/floscilloscope.dart';

class AlternativeOscilloscopeExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Sample data points for multiple series
    final dataSeries1 = [
      OscilloscopePoint(0, 0),
      OscilloscopePoint(1, 2),
      OscilloscopePoint(2, 1),
      OscilloscopePoint(3, 3),
      OscilloscopePoint(4, 2),
    ];

    final dataSeries2 = [
      OscilloscopePoint(0, 1),
      OscilloscopePoint(1, 3),
      OscilloscopePoint(2, 2),
      OscilloscopePoint(3, 4),
      OscilloscopePoint(4, 3),
    ];

    final oscilloscopeData = OscilloscopeAxisChartData(
      dataPoints: [dataSeries1, dataSeries2],
      horizontalAxisLabel: 'Time',
      verticalAxisLabel: 'Voltage',
      horizontalAxisUnit: 'ms',
      verticalAxisUnit: 'V',
      threshold: 2.5,
      colors: [Colors.blue, Colors.red],
      onThresholdValueChanged: (value) {
        print('Threshold updated to: $value');
      },
    );

    return Scaffold(
      appBar: AppBar(title: Text('Alternative Oscilloscope Example')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: AlternativeSimpleOscilloscope(
          oscilloscopeAxisChartData: oscilloscopeData,
        ),
      ),
    );
  }
}

Configuring OscilloscopeAxisChartData

Customize the oscilloscope's appearance and behavior using the OscilloscopeAxisChartData class.

final oscilloscopeData = OscilloscopeAxisChartData(
  dataPoints: [dataSeries1, dataSeries2],
  numberOfDivisions: 5,
  horizontalAxisLabel: 'Time',
  verticalAxisLabel: 'Voltage',
  horizontalAxisUnit: 'ms',
  verticalAxisUnit: 'V',
  horizontalAxisValuePerDivision: 1.0,
  verticalAxisValuePerDivision: 1.0,
  updateButtonLabel: 'Apply',
  cancelButtonLabel: 'Dismiss',
  thresholdLabel: 'Voltage Threshold',
  isThresholdVisible: true,
  onThresholdValueChanged: (value) {
    // Handle threshold value change
  },
  colors: [Colors.green, Colors.orange],
  isThresholdSliderActive: true,
  threshold: 2.0,
  thresholdDragStepSize: 0.1,
  extraPlotLines: {
    1.5: Colors.grey,
    2.5: Colors.black,
  },
);

Contributing

Contributions are welcome! If you'd like to contribute to this project, please follow these steps:

1. Fork the Repository: Click the Fork button at the top right of this repository's page.
2. Clone Your Fork:

   git clone https://github.com/your-username/floscilloscope.git
   

3. Create a Branch:

   git checkout -b feature/YourFeatureName
   

4. Make Your Changes: Implement your feature or bug fix.
5. Commit Your Changes:

   git commit -m "Add your descriptive commit message"
   

6. Push to Your Fork:

   git push origin feature/YourFeatureName
   

7. Submit a Pull Request: Navigate to the original repository and click the "New pull request" button.

Please ensure your code follows the project's coding standards and includes appropriate tests.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Sponsor Me

By sponsoring my efforts, you're not merely contributing to the development of my projects; you're investing in their growth and sustainability.

Your support empowers me to dedicate more time and resources to improving the project's features, addressing issues, and ensuring its continued relevance in the rapidly evolving landscape of technology.

Your sponsorship directly fuels innovation, fosters a vibrant community, and helps maintain the project's high standards of quality. Together, we can shape the future of these projects and make a lasting impact in the open-source community.

Thank you for considering sponsoring my work!

Connect With Me