Skip to content
This repository was archived by the owner on Jan 29, 2026. It is now read-only.

Add Serial Monitor in VS Code Panel area#20

Merged
StrongTheDev merged 2 commits intoStrongTheDev:feature/serial-monitorfrom
Alireza-Jahanbakhshi:main
Apr 11, 2025
Merged

Add Serial Monitor in VS Code Panel area#20
StrongTheDev merged 2 commits intoStrongTheDev:feature/serial-monitorfrom
Alireza-Jahanbakhshi:main

Conversation

@Alireza-Jahanbakhshi
Copy link
Copy Markdown
Collaborator

Add Serial Monitor in VS Code Panel area

✨ Description

This pull request enhances the avr-utils extension by adding a Serial Monitor integrated into the VS Code Panel area as a tab alongside the Terminal and Output panels. It allows users to monitor and interact with AVR microcontrollers via a serial port, with a modern UI, performance optimizations, and seamless integration with VS Code’s built-in panels.


✅ Changes

  • 📡 Serial Monitor in Panel Area

    • Used WebviewView to place the Serial Monitor in the Panel area as a "Sensor Monitor" tab.
    • Supports serial port and baud rate selection via QuickPick.
  • 🎨 Modern UI Design

    • Toolbar includes line ending selection, start/stop, clear, autoscroll, and data rate indicator.
    • Styled with a dark theme, hover effects, and tooltips.
  • ⚡ Performance Optimization

    • Throttles UI updates (100ms) and limits output (500 lines).
  • 🔌 Terminal and Output Integration

    • Sends serial data to the VS Code Terminal.
    • Logs actions (e.g., port opened, data sent) to the Output channel.
  • 🛡️ Error Handling

    • Displays errors for serial port operations and closes the view on disconnection.

🧪 Testing

  • ✅ Serial Monitor appears as a tab in the Panel area.
  • ✅ Port/baud selection works, with data displayed in the Serial Monitor.
  • ✅ Data is mirrored in the Terminal, and actions are logged in Output.
  • ✅ UI controls and throttling work as expected.
  • ✅ Tested on Windows with an AVR microcontroller.

✅ Final Checklist

Feature ✅ Status Notes
Panel area integration Appears as "Sensor Monitor" tab
Serial port/baud selection QuickPick with "Custom..." option works
UI toolbar functionality All controls work as expected
Throttling and output limit Updates every 100ms, limits to 500 lines
Terminal integration Data mirrored in Terminal
Output channel logging Actions logged correctly
Error handling Displays errors and closes on disconnection
Dependencies included serialport and @serialport/parser-readline added

- Added Serial Monitor in editor area with port/baud selection.
- Included UI with controls, throttling, and error handling.
Copy link
Copy Markdown
Owner

@StrongTheDev StrongTheDev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let me do some testing. I'll get back to you.

@StrongTheDev StrongTheDev changed the base branch from main to feature/serial-monitor April 11, 2025 11:42
@StrongTheDev StrongTheDev merged commit 5720292 into StrongTheDev:feature/serial-monitor Apr 11, 2025
3 checks passed
@Alireza-Jahanbakhshi
Copy link
Copy Markdown
Collaborator Author

@StrongTheDev
Screenshot (357)
Screenshot (358)
Screenshot (359)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants