For the main viewing screen I have decided that the central focus should of course be the camera’s video feed. I decided to centre this, and then overlay a clear .png image of the same size in a separate ‘div’ on the page to create the ‘artificial horizon’ overlay on the camera. I found however that when the screen resolution is changed, it moved the png from the correct position. This is mainly an issue when moving it from the computer that I am developing it on to the projector or other monitor that might be of a different resolution. I solved this by leaving one page with the video feed and png overlay, and creating a new page with an iframe in the centre of it.
Similarly, I decided that to make the main page as simple and flexible as possible that everything should be in iframes, so the code for the main page only consists of three iframes, each aligned to a spate part of the page.
My Initial draft of the control interface.
For the first draft of the controls I have stuck to the triangular design for the buttons, and I have redesigned the .gif on the ‘waiting’ page that is called when using some of the controls so that it incorporates the font and feel that is used on the main viewer page.
Additionally, it only runs through once before returning to the previous page as opposed to the old gif that was on a loop.
Note that the wheel direction triangles change colour depending on what the current direction is.
For the final design I want to smarten up the interface and make the buttons resemble what they are more clearly. I want to keep the triangle theme, but I also would like to make it feel more like a professional user interface, whilst retaining some of the brightness to engage younger users.