An icon to be used within a control room web application tool.
The main focus of the icon is to be as realistic looking as possible. We have provided some photos of the wind farm for guidance.
The map is zoomable, and we will dynamically resize the icon with the map. Therefore at close zoom levels it should look very realistic, and at far zoom levels should not look too cluttered. This may mean two separate icons, one for each size (but not neccessarily).
Indicative sizes that it will be viewed at:
- Small - 20 x 20
- Medium - 50 x 50
- Large - 100 x 100
The turbine should be drawn so that it is slightly viewed from above. The turbine should also be shown to face any direction. The viewpoint will always be from the same spot, above the turbines but sometimes they will be facing to the side or away from the viewer.
The icon needs to indicate different modes, either by colour change or by some graphic (spanner etc).
- Running (Producing power)
- Idle (turbine ok but no wind)
- Service (Being worked on)
- Manual stop (Turbine stopped from control room)
- Fault - issue caused stop
- No communication - communication / internet link to turbine down so status unknown.
The icons should also have a colour that is able to be dynamically set via the SVG.
The modes above may be different for the different sizes of the icon. E.g. a small icon may indicate the modes by the colour, but the larger size with some better graphic (e.g. a spanner for service, smoke for fault etc), but again we are not set on this.
Addionally, every icon should have a "selected state" and a "deselected" state, as the turbines can be selected interactively by clicking on them. The selected state should not conflict with the different colours, and should be a separate concept.
The icon needs to be:
- SVG, created in adobe illustrator
- Blades of turbine need to be grouped so they stay together when animated
- The SVG paths must be simplified as much as possible but making sure the turbine blades are grouped in a separate path at all times.
The modes listed above, and the selected/deselected can either be a different SVG but preferably would be settings applied dynamically to the SVG.