JavaScript jQuery UI plugin for creating vector based (SVG) seven segment displays in HTML

There I am providing you a nice jQuery plugin for creating vector-based (SVG) seven-segment displays that is purely coded in HTML.

SVG

Features of HTML vector-based (SVG) seven-segment displays in html :

  • No images are used. All graphics are drawn using HTML SVG that scales to any size.
  •     No external CSS file is used. Default style classes are injected into your page.
  •     If you want to customize the style classes in your own CSS,you can do so.
  •     You can also style the individual widgets via options.
  •     Databinders for Knockout MVVM.
  •     MIT License.

Displays Demo Full Screen Demo Download Source Code

Usage Of Javascript Seven Segment Display:

You must include jQuery and jQuery UI in your HTML before including sevenSeg.js.

You can then use sevenSeg on any div's of your page.
sevenSeg creates a single digit display, and sevenSegArray creates a group containing an arbitrary number of digits. You'll most likely want to use sevenSegArray.

See the example below:

svg-example

Author Credit : Priya Gupta

* Is this helped you? you can gift us a coffee or share your feedback*

Himanshu is a young engineer living in India. Currently working at BOLD.com as UI Engineer. He is an ethical hacker & blogger too, doing lots of crazy stuff... If you seems interesting, go through portfolio: www.himstar.info "Open Source. Millions of open minds can't be wrong!"

Leave a reply:

Your email address will not be published.

Sliding Sidebar

We have 20,000+ active geeks


We are team of ' Delhi Startups ' , most active startup community with strict spam policy.
We are making !deas happen..for future, business and jobs without charging anything, with connecting entrepreneurs.. It's a reason to trust on us.
Come and join or subscribe, we will defiantly give a reason to like us.

Our Facebook Page