Drawing a wind turbine generator with css & html or canvas? - html

Question

I am looking for an advice. I have to draw a wind turbine generator. I'm guessing its possible with html, css or canvas but maybe it would take ages.
I have in mind to do it with just images, have the main image for the generator and then have other images over the main one. I think it's the easiest solution to achieve it.
It has to have responsive as well.
The small pieces change the color depending on the data. So I am thinking to replace the images depending on it.
Any recommendation?.
Thanks in advance.

Answer 1

You could skin this cat in several ways, but if you're sure that these are all the components you need (and you won't need to keep expanding it), I agree that canvas is overkill.
Probably all you need is some markup like this:
<div id="turbine">
<div id="injector"></div>
<div id="motor"></div>
<div id="block"></div>
<div id="battery"></div>
</div>
And some CSS that looks something like this:
#turbine {
background: url("turbine-main.png");
position: relative;
}
#injector {
background: url("injector-green.png");
position: absolute;
left: 160px;
top: 130px;
width: 40px;
height: 30px;
}
#injector.failing {
background: url("injector-red.png");
}
#motor {
background: url("motor-green.png");
position: absolute;
left: 220px;
top: 140px;
}
#motor.failing {
background: url("motor-red.png");
}
Rinse and repeat for each part (adjusting image names, coordinates, and size as necessary, so that your pieces fit nicely over the main image). Add and remove the failing class from your individual pieces to toggle the red/green for each part, probably using javascript. (Or just do it in the HTML, if this is a statically rendered page.)
If you should be able to click these engine parts and jump to additional information, replace my <div>'s with <a>'s.