Monday, November 06, 2017

Audio Visual Metronome Widget

This is a Beat Box Gadget, Music Companion, Set Sequence of Sounds, Set Tempo and Play a Rhythm.

You will need to get flash player if the music does not play. When Metronome page has loaded, then you will hear a small beat, that means the gadget is loaded. Or Else reload, refresh or visit gadget page again.

Operate the Tiny Switches to Turn a Drum on-off, The Sliders can be drag-dropped to set the interval. Press Play. LED corresponding to a drum will flash and a sound heard. More switches turned on means more drums and more flashing of LEDs. It will be an Orchestra.



A metronome is any device that produces a regulated audible and/or visual pulse, usually used to establish a steady beat, or tempo, measured in beats-per-minute (BPM) for the performance of musical compositions. It is an invaluable practice tool for musicians that goes back hundreds of years.

Screenshot of Metronome Web Widget

Audio Visual Metronome

Audio Visual Metronome xml code

Idea For Coders is the UI, the Switches, the Scale Sliders, The Flashing LEDs, the compact coding method. The Inline Help, The debug annunciation window (div slot on top) is used for incremental coding, also the Status Indicator while operating this gadget. This slot also shows inline mini-help.

This widget may be a decade old now but has helped many design the UI for gadgets that you see in touchscreen gadgets. These widget creations of mine on this blog have changed the way people think about usability of devices with limited user-interface area.

GitHub - Metronome and Metronome Page

Like i said before it is easier to operate a Tap than to key in some value and click a menu command before the menu slips away from from your mouse pointer. It was sheer torture, now it is bliss.

Think Euro-Controls' means like a Water Tap or Opening a Box or Sliding the window, think Human

Friday, November 03, 2017

Digital Seven Segment Clock Gadget

This widget is to Inspire you or remind you of the traditional Digital Seven (7) Segment Clock. The javascript is as close as possible to a c program that you could write for a PIC processor, So then try and make a gadget which is 3D, using PIC or 8051.



This Web Gadget is for a Homepage, Web-page or blog. It has seven segment display, similar to traditional Digital Clocks in the dashboard. It will also indicate the date and week. This Project includes a Simple Hourglass Clock Gadget on the same code.

Screenshot of Digital Clock

Digital Seven Segment Clock

Digital Clock xml code

This Gadget just displays the Time as shown on the computer. To ensure it is accurate : The small clock battery must be ok, The Periodic Sync with Atomic Server has to be enabled on your PC.

Digital Clock Source GitHub  and Digital Clock Page

Thursday, November 02, 2017

Virtual Oscilloscope - Visualize Equations

This is a Toy Scope or a waveform display which i will integrate with my other tutors to display AC points in place of voltmeters.

Presently you can play with it. Power On and keep pressing the demo button give a few seconds between presses, to see all the waveforms stored. Tweak the four pots all you want, to understand something of this ancient electricity visualization apparatus.

Live Scope that can be operated



Write an equation similar to the Nine demo waveforms. It has to be Javascript Math only. This scope "API" has few variables you can use in equation. - The Virtual Oscilloscope Page

Screenshot

Oscilloscope delabs

virtual-oscilloscope at GitHub

xmov  x axishorizontal value
h_pot  x gainhorizontal gain or Attenuation
v_pot  y gainvertical gain or Attenuation

The Oscilloscope is a Real Time Graph of Volts Y and Time X at any node of a circuit. It can show both AC and DC. This is a Virtual JS Oscilloscope - Fourier Series Periodic Waveforms using JavaScript. JS Oscilloscope xml code

Oscilloscope Functions and Fourier Series. Periodic Waveforms. Watch Sine, Square, Triangle and Sawtooth Waves and Study Controls.

Load an equation of your own and see it as a waveform on this web scope. Paste a Formula in the Equation text box, load it, it will be rendered as waveform on scope.

Just turn it on and then press demo button for 1st Waveform and Press again the demo button for 2nd Wave and so on. Still working on formulas. Slide all the pots and see what happens.