I am digitising a form used on construction sites by technicians, part of which includes a layout. Typically, the user would sketch the layout, photograph the form and email it. The form is built using Gravity Forms. I have explored different ways to capture this information but cannot get a solution. Each layout is based around a standard arrangement and the information captured is the relative position of some instruments (labelled 1 to 4) and where North is.

I initially tried using an HTML block with javascript to rotate images until the desired alignment is found. However, this is only in the browser and not captured when the form is submitted. I then looked in to capturing a screenshot of the final image on the frontend to pass for submission but could not get this working closely enough (only the layout section instead of the whole screen and to actually submit it instead of just opening a new window with the captured image).

Now I’m thinking I could pass the variable used in the javascript to fields on the form to indicate orientation (in degrees etc.). However, this is a little complicated for my level of coding.

My question is – can anyone think of a simpler way of doing this or shall I proceed down the last route. Any suggestions / help with the solution is appreciated.

Development form with layouts (not the actual form) can be found here:
https://foundations.socotec.co.uk/?page_id=2306

Thanks.