Category Archives: Angular

Using ChatGPT v4 to write an angular component

My frontend experience with Angular is minimal, I’ve maintained an open source application for integration with the Rekor Scout docker image here to help keep my basic understanding of Angular around. After a year of neglect I upgraded to .net 7 and angular 11. I also added in a service worker and turned the frontend into a PWA that can be installed on the desktop and mobile. Along with that native browser/pwa push notifications alongside the existing pushover functionality.

I wanted to duplicate the camera masking logic Rekor has in their native web dashboard. Telling the agent to not analyze portions of the video saves on processing power and can help prevent false captures. I found the exact functionality I desired, but it was written in React.

I solicited some ex-coworkers to help me in their spare time. One person recommended trying out the new ChatGPT v4. I gave it a screenshot of the React app and a short description:

It took a few revisions but it ended up getting 95% of the functionality I needed. After added in some app-specific logic I had a working component in under an hour!

Displaying Plate Numbers on ALPR Cameras

I’ve been running OpenALPR on Unraid for about 6 months. Since January I’ve been working on a tool that replaces the limited closed-source OpenALPR web ui with my own OpenALPR Webhook Processor. I pointed the OpenALPR agent at my tool instead of the OpenALPR web ui. The agent sends a JSON payload defined here.

After the JSON payload is processed it is displayed through an Angular web app running on Asp.net Core backend. It uses a SQLite database to store plate information, and retrieves images from the agent on the fly. It records a small amount of statistics, allows searching based on make/model and plate numbers including regular expressions, and can both ignore and alert on plates.

The home plate screen

The tool can also manage individual cameras day/night toggling and zoom/focus based on the camera GPS location:

Modifying ALPR and regular cameras

When the tool receives a webhook from the agent, it parses the plate information and overlays the text on the camera:

The agent tries to determine the make/model of the vehicle, it’s not always correct (especially at night), but it does get a fair amount of accurate results.

So far it has been working pretty well! I am currently working on a method for “scraping” the agent’s debug web ui for information instead of using webhooks. This will be useful for people with the “Homeowner” membership that requires the webhook to come from the OpenALPR cloud website.