Differences

This shows you the differences between two versions of the page.

--- tips:batterymeters [2015/01/21 19:21] – [Rotation] jt3
+++ tips:batterymeters [2015/01/22 05:01] (current) – jt3
@@ Line 12: / Line 12: @@
 (Segment Between – Opacity in range 100%, Opacity Out of range 0%)
-   Start:  180+(9*(math.floor(({bl}/5})+0.5)))  (100% @ 0ᵒ to 0% @ 180ᵒ – diminishing Counterclockwise)
+   Start:  180+(9*(math.floor(({bl}/5)+0.5)))  (100% @ 0ᵒ to 0% @ 180ᵒ – diminishing Counterclockwise)
    End:  360
@@ Line 21: / Line 21: @@
 ===== Intro to Battery Meters =====
+{{:tips:rotation1.png?200|Single Rotation}} {{:tips:rotation2.png?200|Double Rotation}} {{:tips:segmented1.png?200|Segmented}}
 Battery Meters are one of the most requested “Math” functions among users of WatchMaker.  They’re fairly straightforward, but what makes them tricky is that there are so many variations.  When making a battery meter, you need to ask yourself the following:
@@ Line 33: / Line 34: @@
 Segmented meters are used when you want an “LED” effect, where you light up equal segments such that an entire segment lights at once.  This is very common for battery meters and makes a cool effect.  In almost every other case, you’ll use smooth meter calculations for battery meters.
 ===== Explanation of Examples =====
 ==== Rotation ====
-So let’s explain those examples.  The first set uses rotation.  This assumes that you’re using a watch hand as a battery meter.  However, you can use circle shaders too.  The only difference is that instead of using the Rotation field, you’ll use the Circle Shader’s Start and End fields.  ONE of those fields will have the formula, and the other will have the start or end point as appropriate (similar to the segmented examples, which we’ll cover in a bit).
+{{ :tips:rotation1.png?200|}}So let’s explain those examples.  The first set uses rotation.  This assumes that you’re using a watch hand as a battery meter.  However, you can use circle shaders too, with the exact same formulas.  The only difference is that instead of using the Rotation field, you’ll use the Circle Shader’s Start and End fields.  ONE of those fields will have the formula, and the other will have the start or end point as appropriate (similar to the segmented examples, which we’ll cover in a bit).
 The first example is a simple meter, working as a clock hand.  100% at 12:00, moving counterclockwise, and ending up back at 12:00.  There are 100 possible values for battery percentage, and we need to move 360ᵒ.  360/100 is 3.6, so we multiply battery level by 3.6.
@@ Line 44: / Line 44: @@
 The next couple examples assume more of a “watch battery on one side, phone battery on the other” approach.  Still, 100% is at 12:00.  We simply move 0% to the bottom.  Now each meter is half the circle.  The examples both show the watch battery {bl}, so you’d simply change the one you want as the phone meter to {pbl}.
-The first example of the set is the left side.  We’re basically just cutting the first example in half, so the rotation is the same, but we need to start at 180ᵒ, instead of 0ᵒ, and the meter only has to move half as far.  So, we reduce the multiplier down to 1.8, and we add the start point at the end.  Thus, 3.6*{bl} becomes **(1.8*{bl})+180**.
+{{:tips:lefthand.png?200 |Left Hand}}The first example of the set is the left side.  We’re basically just cutting the first example in half, so the rotation is the same, but we need to start at 180ᵒ, instead of 0ᵒ, and the meter only has to move half as far.  So, we reduce the multiplier down to 1.8, and we add the start point at the end.  Thus, 3.6*{bl} becomes...
-The second of the set needs to rotate in the other direction, so we take the INVERSE of battery percentage.  In other words, instead of measuring how far from empty (92%), we ask how far from full (8%).  We do that by subtracting battery level from 100.  Then, it’s identical to the first example, except we again only travel half as far, so we use half the multiplier.  **1.8*(100-{bl})**
+   (1.8*{bl})+180
+{{ :tips:righthand.png?200|Right Hand}}The second of the set needs to rotate in the other direction, so we take the INVERSE of battery percentage.  In other words, instead of measuring how far from empty (92%), we ask how far from full (8%).  We do that by subtracting battery level from 100.  Then, it’s identical to the first example, except we again only travel half as far, so we use half the multiplier.
+.8*(100-{bl})
 ==== Circle Shaders (Segments) ====
-This is where things tend to get tricky.  You want to simulate LED sections lighting up, but you want to ensure that the ENTIRE segment lights up at once, or you ruin the effect.  Luckily, it may sound like a challenge, but it’s really pretty simple.
+This is where things tend to get tricky.  You want to simulate LED sections lighting up, but you want to ensure that the ENTIRE segment lights up (or extinguishes) at once, or you ruin the effect.  Luckily, it may sound like a challenge, but it’s really pretty simple.
+{{:tips:segmented1.png?200 |Segmented}}Here, rotation won’t work, because a smoothly rotating circle would slowly cut into a segment, and we want to light it up (or extinguish it) all at once, so you’ll need to add a circle object, go into its shader section, and create a “Segment Between” shader.  There are two types of shaders.  One that hides, and one that reveals.  Which one you use is up to you, and probably depends on the graphic you’re using to simulate the LED effect, and the color of the shader.  To turn a REVEAL shader into a HIDE shader (or vice versa), all you need to do is swap the Opacity In Range and Opacity Out of Range values.  Or, you can swap the Start and End values, whichever works for you.  Keep in mind though that shaders always move clockwise.  The end value should be higher than the start value.
+For these examples, we’re going to duplicate the “watch on one side/battery on the other” approach, where 100% is at 12:00 and 0% is at 6:00.  We’re also going to assume that EACH side has 20 equal segments (LEDs) to be lit.  Red HIDE shaders will be shown in the pictures to illustrate what we're doing, but normally, they'd be the same color as your background (HIDE Shader), or the desired color (REVEAL Shader).
-Here, rotation won’t work, so you’ll need to add a circle object, go into its shader section, and create a “Segment Between” shader.  There are two types of shaders.  One that hides, and one that reveals.  Which one you use is up to you, and probably depends on the graphic you’re using to simulate the LED effect, and the color of the shader.  To turn a REVEAL shader into a HIDE shader (or vice versa), all you need to do is swap the Opacity In Range and Opacity Out of Range values.  Or, you can swap the Start and End values, whichever works for you.  Keep in mind though that shaders always move clockwise.  The end value should be higher than the start value.
+{{ :tips:leftshader.png?200|Left Shader}}On the left side, the formula is %%180+(9*(math.floor(({bl}/5)+0.5))).%%  The 180 is, again, the starting point.  We have 180ᵒ to travel, with 20 equal segments.  180/20=9, so we get 9 degrees per segment.  Also, we have 100 units to measure in those 20 segments.  100/20=5, so we end up with 5% of battery per segment.  Math.floor means to drop any remainder in the division problem, so that we don’t have to deal with the other 1-4% of battery levels, and we ROUND to the nearest 5% by adding 0.5 to the number before we drop that remainder.  So, the formula is really:  %%start point + (degrees per segment * (math.floor(({bl} / percent per segment)+0.5))).%%  Fill everything in, and it becomes...
-For these examples, we’re going to duplicate the “watch on one side/battery on the other” approach, where 100% is at 12:00 and 0% is at 6:00.  We’re also going to assume that EACH side has 20 equal segments (LEDs) to be lit.
++(9*(math.floor(({bl}/5)+0.5)))
-On the left side, the formula is %%180+(9*(math.floor(({bl}/5})+0.5))).%%  The 180 is, again, the starting point.  We have 180ᵒ to travel, with 20 equal segments.  180/20=9, so we get 9 degrees per segment.  Also, we have 100 units to measure in those 20 segments.  100/20=5, so we end up with 5% of battery per segment.  Math.floor means to drop any remainder in the division problem, so that we don’t have to deal with the other 1-4% of battery levels, and we ROUND to the nearest 5% by adding 0.5 to the number before we drop that remainder.  So, the formula is really:  %%start point + (degrees per segment * (math.floor(({bl} / percent per segment)+0.5).%%  Fill everything in, and it becomes **%%180+(9*(math.floor(({bl}/5})+0.5)))%%**.
+{{:tips:rightshader.png?200 |Right Shader}}For the right side we’re moving the other way, so we end at 180ᵒ and subtract the rest, where we’d added before.  Otherwise, it’s the same formula.  Notice though, that earlier, we used the START field of the shader,  but here, the END field will be used.
-For the right side we’re moving the other way, so we end at 180ᵒ and subtract the rest, where we’d added before.  Otherwise, it’s the same formula.  Notice though, that earlier, we used the START field of the shader,  but here, the END field will be used. **%%180-(9*(math.floor(({bl}/5)+0.5)))%%**
+-(9*(math.floor(({bl}/5)+0.5)))