How the search works:

When you submit an item code the webpage sends a query ( ?item= ) to an automation webhook on a selfhosted n8n instance.

The webhook node then sends the query to the first postgres node where it then outputs a ZoneID and ItemName from the table Loc.

The first Postgres node then sends the ZoneID to the second postgres node where it then outputs ( x, y, width, height ) from the table Pos.

The end of the automation is a webhook redirect which sends the page back to the search page with the query elements attached to the end of the URL.

So the final output URL looks like ( https://rand0mcraft.net/search/jaycar/morayfield/?item= &x= &y= &width= &height= &name= )

The webpage has a script.js file which takes the query elements from the URL and draws a red rectangle based on the values.

I used CSS to draw the background image of the capstone and turbine layout which is just a .png file.

A CSS canvas containing the drawn red rectangle is then drawn on top of the background image.

How the updater works:

Also through n8n I have a form submission node which sends the output data to a postgres node where it UPDATE's the table Loc with new values based on the submitted ( box, column, and position) values.