Get unlimited public & private packages + team-based management with npm Teams.Learn more »

v-input-sevenseg

1.0.3 • Public • Published

vue-input-sevenseg

Vue input numeric input component that uses a a Seven Segment Display

Compile UMD javascript library that can be included on a web page

yarn build-lib

Compile example vue app that uses the component

yarn serve

Project setup (have not checked if this works)

npm install --save vue-input-sevenseg

Usage

Use up/down arrow keys to increment value by step size
Use shift-up arrow or shift-down arrow to multiply or divide step size by 10
Use mouse wheel to increment value
Look in the files ex1.html, ex2.html or ex_ff.html for firefox for examples.\

Example of parameters for component:

<v-input-sevenseg v-model="variable" color-back="transparent" color-on="green" color-off="rgb(255, 240, 255)" height=80 digits=7 slant=10 buttons=false></v-input-sevenseg>

v-model

  • variable name, seems like it can actually be a number as well
  • Use this parameter to bind it to a javascript variable

color-on

  • String. Default is Red.
  • Color when a segment is on

color-off

  • String. Default is rgb(50, 0, 0)
  • Color when a segment is off

color-back

  • String. Default is Black
  • Color for the box/background of the display

height

  • Number. Default is 100
  • Height in pixels of a box the includes the display.

width

  • Number. Default is 400
  • Width in pixels of a box the includes the display.

digits

  • Number. Default is 4
  • Number of digits in the display

precision

  • Number. Default is undefined
  • Number of digits of precision, positive number after decimal point, negative before decimal point

step

  • Number. Default 1
  • Step size to increment/decrement using arrow keys or mouse wheel

slant

  • Number. Default is 0
  • Degrees slant of the digits in the display

buttons

  • Boolean / String. Default is true
  • Add buttons to the widget to use mouse clicks to increment / decrement the value, hold the nouse button to automatically continue to increase / decrease the number

Things to do:

  • Add ctrl-a, ctrl-e, cut, paste support
  • Add double click support to highlight entire number
  • Add mouse selection capability to number input

Caveat

This is my second vue project. Any suggestions to improve the code is welcome.

Based on code and instructions from

Install

npm i v-input-sevenseg

DownloadsWeekly Downloads

5

Version

1.0.3

License

MIT

Unpacked Size

1.05 MB

Total Files

31

Last publish

Collaborators

  • avatar