{"id":21935972,"url":"https://github.com/mattfors/ng-serial-terminal","last_synced_at":"2026-05-06T23:36:08.919Z","repository":{"id":263165311,"uuid":"889042942","full_name":"mattfors/ng-serial-terminal","owner":"mattfors","description":"Angular Serial Terminal using Web API and RxJS","archived":false,"fork":false,"pushed_at":"2024-11-26T02:32:02.000Z","size":970,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-27T13:24:38.930Z","etag":null,"topics":["angular","rxjs","serial","serial-communication"],"latest_commit_sha":null,"homepage":"https://mattfors.github.io/ng-serial-terminal/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mattfors.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-15T13:55:28.000Z","updated_at":"2024-12-22T13:31:09.000Z","dependencies_parsed_at":"2024-11-16T17:37:45.591Z","dependency_job_id":null,"html_url":"https://github.com/mattfors/ng-serial-terminal","commit_stats":null,"previous_names":["mattfors/ng-serial-terminal"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattfors%2Fng-serial-terminal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattfors%2Fng-serial-terminal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattfors%2Fng-serial-terminal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattfors%2Fng-serial-terminal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mattfors","download_url":"https://codeload.github.com/mattfors/ng-serial-terminal/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244966524,"owners_count":20539797,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","rxjs","serial","serial-communication"],"created_at":"2024-11-29T01:12:36.968Z","updated_at":"2026-05-06T23:36:03.897Z","avatar_url":"https://github.com/mattfors.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Serial Terminal\n[![CI](https://github.com/mattfors/ng-serial-terminal/actions/workflows/main.yml/badge.svg)](https://github.com/mattfors/ng-serial-terminal/actions/workflows/main.yml)\n![Angular](https://img.shields.io/badge/angular-%23DD0031.svg?style=for-the-badge\u0026logo=angular\u0026logoColor=white)\n![RxJS](https://img.shields.io/badge/rxjs-%23B7178C.svg?style=for-the-badge\u0026logo=reactivex\u0026logoColor=white)\n\nWeb based serial terminal using Serial Web API, Angular and RxJS.\n\nFor a working demo: \n\nhttps://mattfors.github.io/ng-serial-terminal/\n\n\n![Showcase](src/assets/showcase.gif)\n\nFor an Arduino Sketch for testing:\n\nhttps://github.com/mattfors/demo-serial-device\n\nIf you do not have a serial device you can test the terminal with a mocked version of the above sketch. Sent ``?`` for a list of commands:\n\nhttps://mattfors.github.io/ng-serial-terminal/mock\n\n\n## Checking out the project and serving locally\n\nTo check out the project and serve it locally, follow these steps:\n\n1. Clone the repository:\n    ```sh\n    git clone https://github.com/mattfors/ng-serial-terminal.git\n    cd ng-serial-terminal\n    ```\n\n2. Install the dependencies:\n    ```sh\n    npm install\n    ```\n\n3. Serve the application:\n    ```sh\n    ng serve\n    ```\n\n4. Open your browser and navigate to `http://localhost:4200/`.\n\n\n## Serial Web API with RxJS and Angular \nFirst we need a way to transform the data stream into an observable. This is accomplished by creating a Subject and defining an UnderlyingSink which updates the Subject. NgZone must be called manually because the Streams API operates outside of Angular's zone, otherwise new data will not be trigger change detection  \n\n```typescript\nprivate dataSubject: Subject\u003cstring\u003e = new Subject\u003cstring\u003e();\n\nprivate readonly sink: UnderlyingSink =  {\n  write: (chunk: any) =\u003e {\n    this.ngZone.run(() =\u003e {\n      this.dataSubject.next(chunk);\n    });\n  }\n}\n``` \n\nNext we create a new writable stream and pipe to it from the serial port's readable. An abort controller is needed to stop the stream in order to close the port.\n```typescript\nthis.abortController = new AbortController();\nthis.dataStream = new WritableStream(this.sink);\nthis.writer = this.port?.writable.getWriter();\n\nreturn this.port.readable\n    .pipeThrough(new TextDecoderStream())\n    .pipeTo(this.dataStream, {signal: this.abortController.signal})\n    .catch(() =\u003e this.closePort().catch((err) =\u003e observer.error(err)));\n```\n\nFinally, we have an observable of data chunks being read from the serial port.\n```typescript\nread(): Observable\u003cstring\u003e {\n  return this.dataSubject.asObservable();\n}\n```\n\nWrite to the port and get an observable which publishes when the write is complete.\n```typescript\nwrite(data: string): Observable\u003cvoid\u003e {\n  if (this.writer) {\n    return from(this.writer.write(new TextEncoder().encode(data)));\n\n  }\n  return throwError(() =\u003e new Error('No writer available.'));\n} \n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattfors%2Fng-serial-terminal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmattfors%2Fng-serial-terminal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattfors%2Fng-serial-terminal/lists"}