{"id":22688945,"url":"https://github.com/erenken/gatemonitor","last_synced_at":"2026-02-17T05:01:52.780Z","repository":{"id":39924764,"uuid":"472086846","full_name":"erenken/gateMonitor","owner":"erenken","description":"Monitor and Control my Gate","archived":false,"fork":false,"pushed_at":"2024-12-31T08:00:18.000Z","size":1472,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-22T15:11:19.540Z","etag":null,"topics":["angular","ghost-controls","home-automation","remootio"],"latest_commit_sha":null,"homepage":"","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/erenken.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,"zenodo":null}},"created_at":"2022-03-20T19:51:21.000Z","updated_at":"2023-05-07T01:43:19.000Z","dependencies_parsed_at":"2023-11-26T05:20:04.996Z","dependency_job_id":"1165d251-56ea-4f73-8413-6b0d913af51f","html_url":"https://github.com/erenken/gateMonitor","commit_stats":{"total_commits":20,"total_committers":1,"mean_commits":20.0,"dds":0.0,"last_synced_commit":"ecc09091c0ae3685544d4728f698ea7732a780bb"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erenken%2FgateMonitor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erenken%2FgateMonitor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erenken%2FgateMonitor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erenken%2FgateMonitor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/erenken","download_url":"https://codeload.github.com/erenken/gateMonitor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250264909,"owners_count":21402004,"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","ghost-controls","home-automation","remootio"],"created_at":"2024-12-10T00:16:46.756Z","updated_at":"2025-10-07T13:02:58.605Z","avatar_url":"https://github.com/erenken.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gateMonitor\n\nThis is an Angular 15.0.0 project I created so I could easily check the state of the gate at the end of my driveway.  I wanted to be able to easily see if the gate was open or closed and see an image from the camera at the gate before I let out my dog.  \n\nUsing a [Remootio](https://www.remootio.com/) smart gate contr5oller with my [Ghost Controls](https://ghostcontrols.com) gate.  I was able to convert their [Remootio API Client for Node.js](https://github.com/remootio/remootio-api-client-node) module for use in Angular and create a small site that gave me what I needed.\n\nI will be running this site on a Raspberry PI with a touch screen.  The goal is to place this near the door so I can easily check and then close the gate if needed before I let out my dog.\n\nThis was my first attempt at creating my own Observable components that my site could subscribe to and display changes as they happened.  I haven't been using Angular a lot lately, so this was a way for me to experiment and also build something cool.\n\nAs part of this I also created an Angular Service **[remootio-angular](./projects/remootio-angular/README.md)** as a library, so hopefully other people may also find this useful.  I have not published it yet, but I am thinking I will after I have more of the base methods implemented.\n\n## Website\n\nThis is a very basic site with only 1 page and route.  The main page is [home.component.html](./src/app/pages/home/home.component.html).  If you wanted to use this with your own Remootio device and camera you will need to update the [home.component.ts](./src/app/pages/home/home.component.ts) file.\n\nYou will need to change the `deviceIp`, `apiSecretKey`, and `apiAuthKey` in the `ngOnInit` method.\n\n```ts\nngOnInit(): void {\n  this.remootioService.connect({\n    deviceIp: '{remootioDeviceIp}',\n    apiSecretKey: '{apiSecretKey}',\n    apiAuthKey: '{apiAuthKey}',\n    autoReconnect: true\n  });\n```\n\nYou can get this information from the Remootio application on your mobile device.  It is located under Settings...Websocket API.\n\nOnce the connection to Remootio is made and authenticated the web site will display a bar indicating if the gate is open or closed and 2 buttons.  One to Open and one to Close the gate.\n\n```html\n\u003cmat-card *ngIf=\"isAuthenticated\"\u003e\n  \u003cmat-card-title\u003eStatus\u003c/mat-card-title\u003e\n  \u003cmat-card-content class=\"statusCards\"\u003e\n    \u003cdiv class=\"gateStatus\"\n      [ngClass]=\"{'opened': (gateState$ | async)?.isOpen, 'closed': !(gateState$ | async)?.isOpen}\"\u003e\n      {{ (gateState$ | async)?.description }}\u003c/div\u003e\n    \u003cbutton (click)='closeGate()' mat-fab class=\"closed\" [disabled]=\"!(gateState$ | async)?.isOpen\"\u003eClose\u003c/button\u003e\n    \u0026nbsp;\n    \u003cbutton (click)='openGate()' mat-fab class=\"opened\" [disabled]=\"(gateState$ | async)?.isOpen\"\u003eOpen\u003c/button\u003e\n  \u003c/mat-card-content\u003e\n\u003c/mat-card\u003e\n```\n\nThe style sheet can be found in [styles.scss](./src/styles.scss).  The bar is \u003cspan style=\"color:green\"\u003eGreen\u003c/span\u003e when the gate is closed or \u003cspan style=\"color:red\"\u003eRed\u003c/span\u003e when open.\n\nTo display your own gate image, you will need to change the `gateImage` URL.  To get the proper URL for a snap image from your camera you will need to look at your camera documentation.  I use a [UniFi G4 Instance](https://store.ui.com/collections/unifi-protect/products/camera-g4-instant), so once [enabled](https://jjj.blog/2019/12/get-snap-jpeg-from-unifi-protect-cameras/) the URL is just `https://{cameraIp}/snap.jpeg`.  Your camera will most likely be different.\n\n```ts\nprivate gateImage: string = \"{cameraSnapUrl}\";\n```\n\nThis URL will get called every 1 second so it is updated in the UI.  The `Date.now()` is added so the image isn't cached by the browser.\n\n```ts\nsetInterval(() =\u003e this.gateImage$.next(`${this.gateImage}?${Date.now()}`), 1000);\n```\n\nHTML to display the gate image.\n```html\n\u003cimg src=\"{{ gateImage$ | async }}\" alt=\"Gate\" class=\"gateImage\" /\u003e\n```\n\n## Run\n\nTo run the site you will need Angular 15.0.0 CLI\n\n```bash\nnpm install -g @angular/cli\n```\n\nOnce that is installed you should run npm install in both the main project and **remootio-angular** project folder.\n\n```bash\nnpm install\nnpm install --prefix .\\projects\\remootio-angular\\\n```\n\nOnce you have ran both the `npm install` commands you need to build the project first.\n\n```bash\nng build remootio-angular\n```\n\nOnce that the **remootio-angular** project is built you can build and run the main Angular project.\n\n```bash\nng serve -o\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferenken%2Fgatemonitor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferenken%2Fgatemonitor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferenken%2Fgatemonitor/lists"}