So the PNG file will be loaded into a HTML page. The page has a toolbar with following buttons:
- stencil -> this allows to put markers onto the image overlay
- arrow -> this allow to select an existing marker and move or remove it from overlay
- save icon _> saves the new configuration back to server in a post call similar as the retrieval as described in the next paragraph
Upon loading of the page, the existing configuration of markers is retrieved using a HTML post call to the same webserver serving the page. Structure of the HTTP post response is one marker per line (so line breaks) with | (pipe)
Where X @ Y are the coordinates in the image for the marker, UID the unique identifier and Label the descriptive label.
When a new marker is pointed in the image, a dialog form is shown whereby a call back is made to the server. The server will return a list as follows:
In that dialog form a first drop down box is shown with all unique Device Names and then it shows all the UIDs and Label matching.
Each marker is a circle with a 5 pixels width in black color