0

I have made a post on Friday already about how starting off to use an SVG animation to show the state of IO hardware.

I've read a bit now because im using CSS like so

svg {
    transform: rotate(45deg);
    transform-origin: 50% 50%;  
}

where sadly the support for IE is by giving the attribute directly to the svg:

<rect x='65' y='65' width='150' height='80' 
    transform='rotate(45 140 105) rotate(-45)' />

Now I've used a rect as an example but I'm actually using a shape because I need to animate a needle for a Voltmeter.

I could use stroke maybe but it would look better with a real needle like thingy.

Now the problem I have with this is that after designing, there must be a function made in Javascript to get to the different states.

So I wanna rotate the needle for example 2 degrees for every value I get from the IO.

21 states are needed and it would be a hell of work to calculate all the positions for transform rotate when the attribute is set directly onto it.

Is there another way? Thanks in advance.

creimers
  • 4,975
  • 4
  • 33
  • 55
Blue Lovag
  • 693
  • 2
  • 8
  • 18
  • You may want to consider using a Javascript library like Raphael for this. I gave an answer (several years ago now) giving an example of how to do a basic speedometer type widget in four lines of code with Raphael. See https://stackoverflow.com/questions/5083221/drawing-a-half-gauge-speedometer-javascript-canvas-or-java-swing-example-needed/5632389#5632389 – Spudley Aug 20 '18 at 13:06
  • The transform attribute you give is equivalent to `translate(115.251,-68.2412)`. What sense does that make? – ccprog Aug 20 '18 at 14:33
  • thank u rly much but at the moment im learning javascript so i dont wanna make it easy for me by using frameworks – Blue Lovag Aug 20 '18 at 16:07

1 Answers1

0
  1. Set an id attribute for your needle, so you can target it.
  2. Find the center point to rotate about.
  3. Set the minimum and maximum angle the needle can rotate to.
  4. Set the minimum and maximum value you can receive.

Now, if your SVG content is part of the same document that runs the script, no matter if that is a HTML or SVG file:

var needle = document.getElementById('voltmeterNeedle'); // use your id

If you link the SVG content with a <object> or <iframe> tag from document that runs the script (<img> won't work):

var needle, svg = document.getElementById('embedingTag'); // use your id
svg.addEventListener('load', function () { // wait for load event
    needle = svg.contentCocument.getElementById('voltmeterNeedle'); // use your id
});

...continuing for both:

var needleCenterX = 140, needleCenterY = 105;
var minAngle = -45, maxAngle = 45;
var minValue = 0, maxValue = 21;

function setNeedle (value) {
    var valueRatio = (value - minValue) / (maxValue - minValue);
    var angle = (maxAngle - minAngle) * valueRatio + minAngle;
    var rotation = [angle, needleCenterX, needleCenterY].join(' ');

    needle.setAttribute('transform', 'rotate(' + rotation + ')');
}
ccprog
  • 20,308
  • 4
  • 27
  • 44
  • ty rly much but im more struggling with the browser support thing and understand the interaction of those. in your solution are u putting the svg code into the html or do u link the svg file? Also im not sure so i ask: needle.setAttribute('transform', 'rotate(' + rotation + ')'); this is setting attribute directly to html right? – Blue Lovag Aug 20 '18 at 16:01
  • See edit, no browser compatibility issues (for IE >= 9, which you need for SVG support, anyway.) – ccprog Aug 20 '18 at 16:35
  • The center point in my img would be x400 y569 , would that be right for example ?https://imagebin.ca/v/4CrWEJbBgBq4 Sry i ask so much – Blue Lovag Aug 20 '18 at 16:35
  • Screen pixels are moot, use what your `` d attribute (or `` x/y attributes, or whatever primitive you have) states. – ccprog Aug 20 '18 at 16:39
  • do u have any tip how i find the bottom center of the needle in the code? my attempt was creating a box in photoshop where i design the voltmeter and convert it to svg. I thought since its gonna be converted the values would stay the same. – Blue Lovag Aug 20 '18 at 16:42
  • i will post the code somewhen in about 14 hours or so because im gonna create a new one tommorow at work. – Blue Lovag Aug 20 '18 at 20:24
  • im sorry ccprog but today i was told that we will delay my svg because i need to read in about react and typescript because the new ui will be designed in it. I will have some spare time at the weekend i finish the svg then. I tried your solution though on a theoretical element and its absolutley flawless. Ty very much. – Blue Lovag Aug 21 '18 at 16:06