circular-sliders-rails 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 69ff79f3c1156560e0fc4fd075ad51a4e6f3545a1588a2336433a326383d1486
-  data.tar.gz: 7a59b0a99466b98e6082c73641e9c0fe5ac25fe0f33db72cc21d8a4d1a8fcd79
+  metadata.gz: 5d2ca67677ccbe354fcac5885dee5fca5346667d0cd6b8e2111c693bd5213e27
+  data.tar.gz: '0784bed3107129b71d227679698dbd5fbf934cdbfb0f22b17c24b6c48eed850b'
 SHA512:
-  metadata.gz: 44afddd02a7fa71cfc36055acd5d08ee55844fd10989dfa9494ab9a8ee6b8f9aedb7551f2bc0232aa8733a61abdc6cf2cb44ebbae72cd689c924c8e930684f77
-  data.tar.gz: 261adb194e5684e53237d9bef2ea9a1b5c98767ac055dbede22101a7d9ba013be63f269d3514e04d0bbf44d8a8bd452812c82d6c3879204b2de0b3ab11d5d3ec
+  metadata.gz: 0d5c77f3804c770b9748d3c09ac80c08a85e736d197a51ac864aaeddf4579bc2a295c1052c85fcdd76648bef8b8fe6aced27154b50adde702d3df52c58886db1
+  data.tar.gz: e1fc7dc6849520ce1e03c7427e7184a9e26a1fdabffd45621f5f37b25e2ec4a10b036b2a302fae3d2616cd85de2f1db6e52ad9a89410ab8b8e3f8965c87d172e

data/README.md

@@ -26,45 +26,62 @@ Include in your application.js file:
 
 Create a canvas element in the view where you would like the sliders to go:
 
-    <canvas id="sliders" width="600" height="300" style="border:1px solid;"></canvas>
+    <canvas id="sliders" width="1200" height="300" style="border:1px solid;"></canvas>
 
 Use jQuery to add circular sliders to the canvas area. Pass slider settings as objects in an array. Create multiple sliders or just a single slider.
 
     <script>
       $('#sliders').sliders([
+        {
+          name: "Age",
+          centerX: 175,
+          minValue: 18,
+          maxValue: 66,
+          step: 1,
+          units: "years",
+          color: "#FF7F50",
+          textColor: "#FF7F50"
+        },
+        {
+          name: "Daily activity",
+          units: "miles",
+          minValue: 0,
+          maxValue: 25,
+          step: 1,
+          color: "#FF7F50",
+          textColor: "#FF7F50"
+        },
         {
           name: "Height",
           color: "#FFDEAD",
-          centerX: 200,
-          centerY: 150,
+          type: "Height",
+          centerX: 375,
           minValue: 0,
           maxValue: 250,
-          step: 0.5,
+          step: 2,
           units: "cm",
-          radius: 60,
-          lineDashLength: 5,
-          lineDashSpacing: 5,
-          lineWidth: 5,
+          radius: 100,
           strokeColor: "#D3D3D3",
         },
         {
           name: "Weight",
           color: "#A52A2A",
+          type: "Weight",
           minValue: 0,
           maxValue: 150,
+          radius: 100,
+          centerX: 600,
           step: 5,
           units: "kg",
-          lineDashLength: 5,
-          lineDashSpacing: 10,
           lineWidth: 10,
           strokeColor: "#D3D3D3",
         },
         {
           name: "Waist size",
-          centerX: 400,
-          centerY: 150,
           color: "#A0522D",
-          radius: 40,
+          type: "Waist",
+          centerX: 825,
+          radius: 100,
           minValue: 0,
           maxValue: 50,
           lineWidth: 10,
@@ -74,9 +91,20 @@ Use jQuery to add circular sliders to the canvas area. Pass slider settings as o
         },
         {
           name: "Shoe size",
+          type: "Shoe",
+          centerX: 1050,
+          radius: 100,
+          lineWidth: 10,
           minValue: 10,
           maxValue: 60,
-          step: 1
+          step: 1,
+          textColor: "#0000FF"
+        },
+        {
+          name: "Desired price",
+          priceUnits: "£",
+          textColor: "#0000FF",
+          step: 5,
         }
       ]);
     </script>
@@ -86,6 +114,7 @@ Slider settings:
 | Name            | Type   | Default                             | Description                                            |
 | --------------- | ------ | ----------------------------------- | ------------------------------------------------------ |
 | name            | String | Slider n                            | Name your slider                                       |
+| type            | String | Plain                               | Pick between various types for interesting graphics at the center of the slider: 'Height', 'Weight', 'Shoe', 'Waist', and more to come!                                       |
 | centerX         | Float  | Center of canvas or previous slider | Specify the x value for the center of the slider       |
 | centerY         | Float  | Center of canvas or previous slider | Specify the y value for the center of the slider       |
 | color           | String | "#0000FF"                           | Specify the color of the arc fill                      |
@@ -93,7 +122,8 @@ Slider settings:
 | maxValue        | Float  | 100                                 | The maximum value of your slider                       |
 | step            | Float  | 10                                  | The amount the value is incremented                    |
 | units           | String | ""                                  | The units your value is displayed in                   |
-| radius          | Float  | 40 or previous slider radius +≈ 15  | The radius of your slider                              |
+| priceUnits      | String | ""                                  | Adds price ('$', '€', '£' ...) before value            |
+| radius          | Float  | 40 or (previous slider radius + previous slider lineWidth + 5)  | The radius of your slider                              |
 | lineWidth       | Float  | 5                                   | The slider and arc width                               |
 | strokeColor     | String | "#D3D3D3"                           | The color of the dashes on the slider                  |
 | ballColor       | String | "#000000"                           | The color of the slider ball                           |
@@ -103,7 +133,7 @@ Retrieve values of individual sliders by calling:
 
     $('#sliders').data('slider_name');
 
-You should see something like this:
+You should see something like this (with the above options):
 
 ![Circular sliders](/vendor/assets/images/circular-sliders-rails.png)
 

data/lib/circular/sliders/rails/version.rb

@@ -1,7 +1,7 @@
 module Circular
   module Sliders
     module Rails
-      VERSION = "0.2.0"
+      VERSION = "0.3.0"
     end
   end
 end

data/vendor/assets/javascripts/circular-sliders.js

@@ -17,32 +17,31 @@
     canvas = this[0];
     ctx = canvas.getContext("2d");
     setOffset();
-    // maybe refactor and make centerX and centerY one variable [centerX, centerY]
-    var slidersCenterX = canvas.width / 2;
-    var slidersCenterY = canvas.height / 2;
-    // maybe refactor, add container option if there are multiple containers, could allow multiple containers / canvases in the future
     var defaults = {
       name: "Slider",
-      centerX: slidersCenterX,
-      centerY: slidersCenterY,
+      type: "Plain",
+      centerX: canvas.width / 2,
+      centerY: canvas.height / 2,
       color: "#0000FF",
       minValue: 0,
       maxValue: 100,
       step: 10,
       units: "",
+      priceUnits: "",
       radius: 40,
       lineWidth: 5,
       strokeColor: "#D3D3D3",
       ballColor: "#000000",
       textColor: "#000000"
     }
+    // maybe refactor, add container option if there are multiple containers, could allow multiple containers / canvases in the future
     for (var i = 0; i < slidersOptions.length; i++) {
       defaults.name = "Slider " + (i + 1);
       // maybe refactor, want previous centerX, centerY, and lineWidth and 10 pixels spacing between sliders
       if (i > 0) {
         defaults.centerX = sliders[i-1].centerX;
         defaults.centerY = sliders[i-1].centerY;
-        defaults.radius = sliders[i-1].radius + sliders[i-1].lineWidth + 10;
+        defaults.radius = sliders[i-1].radius + sliders[i-1].lineWidth + 5;
       }
       var sliderSettings = $.extend( {}, defaults, slidersOptions[i] )
       sliders.push(new Slider (sliderSettings));
@@ -59,6 +58,7 @@
 
   function Slider(settings) {
     this.name = settings.name;
+    this.type = settings.type;
     this.centerX = settings.centerX;
     this.centerY = settings.centerY;
     this.color = settings.color;
@@ -66,6 +66,7 @@
     this.maxValue = settings.maxValue;
     this.step = settings.step;
     this.units = settings.units;
+    this.priceUnits = settings.priceUnits;
     this.radius = settings.radius;
     this.lineWidth = settings.lineWidth;
     this.strokeColor = settings.strokeColor;
@@ -96,17 +97,72 @@
   }
 
   function drawSlider(slider) {
-    ctx.beginPath();
-    ctx.arc(slider.centerX, slider.centerY, slider.radius, 0, Math.PI*2, false);
     ctx.lineWidth = slider.lineWidth;
     ctx.strokeStyle = slider.strokeColor;
     var sliderCircumference = 2 * Math.PI * slider.radius;
-    // maybe refactor, I like 2/3 and 1/3 for now
+    // maybe refactor, I like 2/3 and 1/3 for now, maybe move this to #Slider so don't have to calculate every time
     var sliderLineDashLength = (2 / 3) * (sliderCircumference / (slider.range / slider.step));
     var sliderLineDashSpacing = (1 / 3) * (sliderCircumference / (slider.range / slider.step));
     ctx.setLineDash([sliderLineDashLength, sliderLineDashSpacing]);
+    ctx.beginPath();
+    ctx.arc(slider.centerX, slider.centerY, slider.radius, 0, Math.PI*2, false);
     ctx.stroke();
     ctx.closePath();
+    if (slider.type != "Plain") {
+      ctx.setLineDash([10, 0]);
+      ctx.beginPath();
+      ctx.lineWidth = 5;
+      // maybe add scale (and restore): ctx.scale(1.05, 1.05), ctx.restore()
+      if (slider.type == "Shoe") {
+        ctx.moveTo(slider.centerX - 0.8 * slider.radius, slider.centerY - 0.5 * slider.radius);
+        ctx.arc(slider.centerX - 0.5 * slider.radius, slider.centerY - 0.5 * slider.radius, slider.radius * 0.3, Math.PI, 0, true);
+        ctx.lineTo(slider.centerX + 0.6 * slider.radius, slider.centerY - 0.1 * slider.radius);
+        ctx.arc(slider.centerX + 0.7 * slider.radius, slider.centerY + 0.1 * slider.radius, slider.radius * 0.2, -(Math.PI / 2), Math.PI / 2, false);
+        ctx.lineTo(slider.centerX - 0.8 * slider.radius, slider.centerY + 0.3 * slider.radius);
+        ctx.lineTo(slider.centerX - 0.8 * slider.radius, slider.centerY - 0.5 * slider.radius);
+      } else if (slider.type == "Waist") {
+        // refactor, wanted to eyeball it without using math, also maybe move up
+        ctx.moveTo(slider.centerX - 0.5 * slider.radius, slider.centerY + 0.05 * slider.radius);
+        ctx.arc(slider.centerX, slider.centerY - 0.8 * slider.radius, slider.radius, Math.PI * (2/3), Math.PI * (1/3), true);
+        ctx.lineTo(slider.centerX + 0.2 * slider.radius, slider.centerY + 0.9 * slider.radius);
+        // need moveTo here and below because otherwise there is a sharp v bend
+        ctx.moveTo(slider.centerX + 0.2 * slider.radius, slider.centerY + 0.9 * slider.radius);
+        ctx.arc(slider.centerX + 0.1 * slider.radius, slider.centerY + 0.9 * slider.radius, slider.radius * 0.1, 0, Math.PI, true);
+        ctx.lineTo(slider.centerX, slider.centerY + 0.4 * slider.radius);
+        ctx.arc(slider.centerX - 0.1 * slider.radius, slider.centerY + 0.9 * slider.radius, slider.radius * 0.1, 0, Math.PI, true);
+        ctx.moveTo(slider.centerX - 0.2 * slider.radius, slider.centerY + 0.9 * slider.radius);
+        ctx.lineTo(slider.centerX - 0.5 * slider.radius, slider.centerY + 0.05 * slider.radius);
+      } else if (slider.type == "Height") {
+        ctx.arc(slider.centerX, slider.centerY - 0.6 * slider.radius, slider.radius * 0.2, 0, Math.PI*2, false);
+        ctx.moveTo(slider.centerX + 0.08 * slider.radius, slider.centerY - 0.32 * slider.radius);
+        ctx.arc(slider.centerX, slider.centerY - 0.3 * slider.radius, slider.radius * 0.08, 0, Math.PI*2, false);
+        ctx.moveTo(slider.centerX + 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
+        // maybe refactor and add arms, here and in weight: ctx.lineTo(slider.centerX + 0.25 * slider.radius, slider.centerY - 0.1 * slider.radius);
+        ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.1 * slider.radius);
+        ctx.arc(slider.centerX, slider.centerY + 0.2 * slider.radius, slider.radius * 0.1, -(Math.PI / 3), Math.PI / 3, false);
+        ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.8 * slider.radius);
+        ctx.lineTo(slider.centerX - 0.2 * slider.radius, slider.centerY + 0.8 * slider.radius);
+        ctx.arc(slider.centerX - 0.15 * slider.radius, slider.centerY + 0.8 * slider.radius, slider.radius * 0.05, Math.PI, -(Math.PI / 2), false);
+        ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY + 0.75 * slider.radius);
+        ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
+      } else if (slider.type == "Weight") {
+        ctx.arc(slider.centerX, slider.centerY - 0.6 * slider.radius, slider.radius * 0.2, 0, Math.PI*2, false);
+        ctx.moveTo(slider.centerX + 0.08 * slider.radius, slider.centerY - 0.32 * slider.radius);
+        ctx.arc(slider.centerX, slider.centerY - 0.3 * slider.radius, slider.radius * 0.08, 0, Math.PI*2, false);
+        ctx.moveTo(slider.centerX + 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
+        ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.1 * slider.radius);
+        ctx.arc(slider.centerX, slider.centerY + 0.2 * slider.radius, slider.radius * 0.1, -(Math.PI / 3), Math.PI / 3, false);
+        ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.8 * slider.radius);
+        ctx.lineTo(slider.centerX - 0.2 * slider.radius, slider.centerY + 0.8 * slider.radius);
+        ctx.arc(slider.centerX - 0.15 * slider.radius, slider.centerY + 0.8 * slider.radius, slider.radius * 0.05, Math.PI, -(Math.PI / 2), false);
+        ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY + 0.75 * slider.radius);
+        ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY + 0.15 * slider.radius);
+        ctx.arc(slider.centerX - 0.05 * slider.radius, slider.centerY, slider.radius * 0.15, Math.PI / 2, -(Math.PI / 2), false);
+        ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
+      }
+      ctx.stroke();
+      ctx.closePath();
+    }
   }
 
   function drawBall(slider) {
@@ -139,7 +195,7 @@
     // maybe refactor and make this editable
     ctx.font = "12px Arial";
     ctx.fillStyle = slider.textColor;
-    ctx.fillText(slider.name + ": " + slider.value + " " + slider.units, 10, 20*(count+1));
+    ctx.fillText(slider.name + ": " + slider.priceUnits + slider.value + " " + slider.units, 10, 20*(count+1));
   }
 
   function moveBall (mouseX, mouseY, slider) {
@@ -161,9 +217,7 @@
     e.preventDefault();
     isMouseDown = true;
     setOffset();
-    // $(window).scrollLeft() and $(window).scrollTop() to account for page scrolling, maybe refactor and make mouseX and mouseY global
-    var mouseX = parseInt(e.clientX - offset[0] + $(window).scrollLeft());
-    var mouseY = parseInt(e.clientY - offset[1] + $(window).scrollTop());
+    var [mouseX, mouseY] = setMouse(e);
     for (var i = 0; i < sliders.length; i++) {
       if (onBall(mouseX, mouseY, sliders[i])) {
         selectedSlider = sliders[i];
@@ -182,8 +236,7 @@
     }
     e.preventDefault();
     setOffset();
-    var mouseX = parseInt(e.clientX - offset[0] + $(window).scrollLeft());
-    var mouseY = parseInt(e.clientY - offset[1] + $(window).scrollTop());
+    var [mouseX, mouseY] = setMouse(e);
     moveBall(mouseX, mouseY, selectedSlider);
   }
 
@@ -203,4 +256,9 @@
     offset = [canvas.offsetLeft, canvas.offsetTop];
   }
 
+  function setMouse(e) {
+    // $(window).scrollLeft() and $(window).scrollTop() to account for page scrolling
+    return [parseInt(e.clientX - offset[0] + $(window).scrollLeft()), parseInt(e.clientY - offset[1] + $(window).scrollTop())];
+  }
+
 }( jQuery ));

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: circular-sliders-rails
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Sebastian Peterlin
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2018-05-19 00:00:00.000000000 Z
+date: 2018-05-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler