Jack Downson

Jack Downson

1611888540

Customizable Gauge Component with Gradients and Animations for Vuejs

vue-svg-gauge

An easily customizable gauge for VueJS with gradients and animations

Installation

npm i vue-svg-gauge --save

yarn add -D vue-svg-gauge

Import

ES6

The following examples can also be used with CommonJS by replacing ES6-specific syntax with CommonJS equivalents.

import Vue from 'vue'
import { VueSvgGauge } from 'vue-svg-gauge'

new Vue({
  components: {
    VueSvgGauge,
  }
})

Globals as a pluggin

import Vue from 'vue'
import App from './App.vue'
import VueSvgGauge from 'vue-svg-gauge'

Vue.use(VueSvgGauge)

new Vue({
  render: h => h(App),
}).$mount('#app')

Globals (via the script tag)

Add a script tag pointing to dist/vue-svg-gauge.min.js after adding Vue.

<html>
  <head>
    ...
  </head>
  <body>
    <div id="app">
      <vue-svg-gauge></vue-svg-gauge>
    </div>

    <script src="path/to/vue.js"></script>
    <script src="path/to/dist/vue-svg-gauge.min.js"></script>
    <script>
      new Vue({
        el: '#app'
      })
    </script>
  </body>
</html>

Usage

Once installed, it can be user in any template as

<VueSvgGauge
  :start-angle="-110"
  :end-angle="110"
  :value="3"
  :separator-step="1"
  :min="0"
  :max="4"
  :gauge-color="[{ offset: 0, color: '#347AB0'}, { offset: 100, color: '#8CDFAD'}]"
  :scale-interval="0.1"
/>
<!--  or  -->
<vue-svg-gauge
  :start-angle="-110"
  :end-angle="110"
  :value="3"
  :separator-step="0"
  :min="0"
  :max="10"
  gauge-color="#8CDFAD"
  :scale-interval="0.1"
/>

Props

Props Type Value Default
value Number Value of the gauge, must be contained between min and max. If not, it will be set to min if inferior, or max if superior 70
min Number Minimum value reachable 0
max Number Maximum value reachable 100
startAngle Number Start angle of the gauge. Can go from -360° to 360° but must be smaller than endAngle -90
endAngle Number End angle of the gauge. Can go from -360° to 360° but must be greater than startAngle 90
innerRadius Number inner radius that will determine the thickness of the gauge 60
separatorStep Number Number of steps between each separator (will display a separator each min + (n * separatorStep)). Won’t display any if 0 or null 10
separatorThickness Number Thickness of the separators, unit is in degree 4
gaugeColor String,Array Color of the gauge, can either be a simple color or a gradient [{ offset: 0, color: ‘#347AB0’ }, { offset: 100, color: ‘#8CDFAD’ }]
baseColor String Color of the empty gauge #DDDDDD
scaleInterval Number Interval between the scale line, based on min and max. Won’t display any if 0 or null 5
transitionDuration Number Transition duration time in ms. If set to 0, there will be no transition 1500
easing String Animation easing option Circular.Out

Notes :

  • the reference angle is 0 on top of the gauge.
  • you can find the documentation about the different animation functions here

Slot

There is a main slot allowing you to display any kind of html you want in your gauge.

Example

<VueSvgGauge
  :start-angle="-110"
  :end-angle="110"
  :value="random"
  :separator-step="20"
  :scale-interval="10"
  :inner-radius="80"
>
  <div class="inner-text">
    <span>Let's make this <b>fun</b> !</span>
  </div>
</VueSvgGauge>

.inner-text {
  // allow the text to take all the available space in the svg on top of the gauge
  height: 100%;
  width: 100%;

  span {
    max-width: 100px;
    color: red;
    // ...
  }
}

Demo

You can find a demo here

Dependencies

You will need to install vue ~2.5.22 to use this package properly

Also vue-svg-gauge relies on the tweenJs library for animations.

Made with ❤️ at comet

Download Details:

Author: hellocomet

Demo: https://hellocomet.github.io/vue-svg-gauge/

Source Code: https://github.com/hellocomet/vue-svg-gauge

#vue #vuejs #javascript

What is GEEK

Buddha Community

Customizable Gauge Component with Gradients and Animations for Vuejs
hourly developer

hourly developer

1594024630

Hire Dedicated VueJS Developers

Want to Hire VueJS Developer to develop an amazing app?

Hire Dedicated VueJS Developers on the contract (time/project) basis providing regular reporting about your app. We, at HourlyDeveloper.io, implement the right strategic approach to offer a wide spectrum of vue.js development services to suit your requirements at most competitive prices.

Consult with us:- https://bit.ly/2C5M6cz

#hire dedicated vuejs developers #vuejs developer #vuejs development company #vuejs development services #vuejs development #vuejs developer

Jack Downson

Jack Downson

1611888540

Customizable Gauge Component with Gradients and Animations for Vuejs

vue-svg-gauge

An easily customizable gauge for VueJS with gradients and animations

Installation

npm i vue-svg-gauge --save

yarn add -D vue-svg-gauge

Import

ES6

The following examples can also be used with CommonJS by replacing ES6-specific syntax with CommonJS equivalents.

import Vue from 'vue'
import { VueSvgGauge } from 'vue-svg-gauge'

new Vue({
  components: {
    VueSvgGauge,
  }
})

Globals as a pluggin

import Vue from 'vue'
import App from './App.vue'
import VueSvgGauge from 'vue-svg-gauge'

Vue.use(VueSvgGauge)

new Vue({
  render: h => h(App),
}).$mount('#app')

Globals (via the script tag)

Add a script tag pointing to dist/vue-svg-gauge.min.js after adding Vue.

<html>
  <head>
    ...
  </head>
  <body>
    <div id="app">
      <vue-svg-gauge></vue-svg-gauge>
    </div>

    <script src="path/to/vue.js"></script>
    <script src="path/to/dist/vue-svg-gauge.min.js"></script>
    <script>
      new Vue({
        el: '#app'
      })
    </script>
  </body>
</html>

Usage

Once installed, it can be user in any template as

<VueSvgGauge
  :start-angle="-110"
  :end-angle="110"
  :value="3"
  :separator-step="1"
  :min="0"
  :max="4"
  :gauge-color="[{ offset: 0, color: '#347AB0'}, { offset: 100, color: '#8CDFAD'}]"
  :scale-interval="0.1"
/>
<!--  or  -->
<vue-svg-gauge
  :start-angle="-110"
  :end-angle="110"
  :value="3"
  :separator-step="0"
  :min="0"
  :max="10"
  gauge-color="#8CDFAD"
  :scale-interval="0.1"
/>

Props

Props Type Value Default
value Number Value of the gauge, must be contained between min and max. If not, it will be set to min if inferior, or max if superior 70
min Number Minimum value reachable 0
max Number Maximum value reachable 100
startAngle Number Start angle of the gauge. Can go from -360° to 360° but must be smaller than endAngle -90
endAngle Number End angle of the gauge. Can go from -360° to 360° but must be greater than startAngle 90
innerRadius Number inner radius that will determine the thickness of the gauge 60
separatorStep Number Number of steps between each separator (will display a separator each min + (n * separatorStep)). Won’t display any if 0 or null 10
separatorThickness Number Thickness of the separators, unit is in degree 4
gaugeColor String,Array Color of the gauge, can either be a simple color or a gradient [{ offset: 0, color: ‘#347AB0’ }, { offset: 100, color: ‘#8CDFAD’ }]
baseColor String Color of the empty gauge #DDDDDD
scaleInterval Number Interval between the scale line, based on min and max. Won’t display any if 0 or null 5
transitionDuration Number Transition duration time in ms. If set to 0, there will be no transition 1500
easing String Animation easing option Circular.Out

Notes :

  • the reference angle is 0 on top of the gauge.
  • you can find the documentation about the different animation functions here

Slot

There is a main slot allowing you to display any kind of html you want in your gauge.

Example

<VueSvgGauge
  :start-angle="-110"
  :end-angle="110"
  :value="random"
  :separator-step="20"
  :scale-interval="10"
  :inner-radius="80"
>
  <div class="inner-text">
    <span>Let's make this <b>fun</b> !</span>
  </div>
</VueSvgGauge>

.inner-text {
  // allow the text to take all the available space in the svg on top of the gauge
  height: 100%;
  width: 100%;

  span {
    max-width: 100px;
    color: red;
    // ...
  }
}

Demo

You can find a demo here

Dependencies

You will need to install vue ~2.5.22 to use this package properly

Also vue-svg-gauge relies on the tweenJs library for animations.

Made with ❤️ at comet

Download Details:

Author: hellocomet

Demo: https://hellocomet.github.io/vue-svg-gauge/

Source Code: https://github.com/hellocomet/vue-svg-gauge

#vue #vuejs #javascript

Frank Xu

1625038259

Thread Gauge Calibration - What Should You Know?

If you are using thread gauges or thread ring gauges you would have already heard about calibration. If you do not pay attention to thread gauge calibration then the integrity of the thread gauges you are purchasing and using could be compromised. In case you do not know what is thread gauge calibration and what is its significance then here are a few important factors that you should know about calibration.

When you order a custom trapezoidal thread gauge or a custom Whitworth thread gauge or for that matter any thread gauge, how will you know that it is exactly matching your requirements and specifications? As you know the thread gauges are inspection tools and unless they are 100% accurate there is no use having a thread gauge. When you calibrate the thread gauge you will know whether or not the tool is true to its specifications and whether it matches the required specifications 100%.

It is important to get calibration certificate along with your thread gauge when ever you are purchasing your thread gauge. All the manufacturers will arrange for a third party calibration certificate if you inform them early enough while placing your order. This may have an additional cost but you cannot avoid this cost because without having the confirmation that your thread gauge is delivered as per your requirements, you cannot confidently check the components that need to be inspected with your thread gauges. If there is any issue with the thread gauge you will think that there is something wrong with the threaded components. As a result, you would keep rejecting those components when the actual issue is with the thread gauge you are using. All such issues and mistakes could be avoided or minimized when you go for a calibration certificate when you are buying your thread gauges.

You may need to go for recalibration every time you repair your thread gauge or make any modifications to it. In case you are experiencing sudden episode of issues with your threaded components then it is best to first check the thread gauges you are using to ensure that the problem is not with the thread gauge.

It is also important to get a calibration certificate for your thread gauge if the tool has been dropped or if someone that is not trained properly use the thread gauge and exerts undue force. In other words, whenever you suspect that the thread gauge could have been damaged then it is vital go check the thread gauge and calibrate it so that you can be sure of the accuracy of the thread gauge.

Always source all your thread gauges from the most trusted companies. Whenever you are calibrating your thread gauge get it done from a reputed calibration center. You cannot afford to have a faulty thread gauge as it is an inspection tool, a standard that is used to measure the accuracy of the other tools. Therefore, make sure that your thread gauges are always well maintained and regularly calibrated.

#trapezoidal thread gauge #thread gauges #thread ring gauges #thread plug gauges #metric thread gauges #unef thread gages

Ilaria Dugg

Ilaria Dugg

1589190180

How to Publish a Vuejs Component on NPM

In this post, I will explain you now how to publish your own VueJs component on npm with a minify and ES5 build.

#vuejs-development #vuejs-2 #vuejs #github #npm

James Daneil

1580992154

Learn Character Design in After Effects 2D Animation Course

With the help of this course, you can learn to create and animate characters who express with body language in After Effects. Our personal purpose is to help anyone interested in Animation to start practicing with little projects, simple Characters, and most of all, explore the expressiveness of their Body Language and Character Acting. Many people seldom to start learning 2D animation because they are convinced that you need to know how to draw. While drawing skills can help you to improve, that is not the essential skill to do animation. For animation you need to understand the most basic principles in animation, like timing, anticipation, pose to pose. This course is divided into 3 parts theory, rigging and animation which will help you learn how to design characters, character animation and body language expressions. Enroll now and Learn to create 2D Animation in After Effects.

#2d animation #character animation #character rigging #learn animation #animation courses