jangocheng/zeu

A JavaScript library for real-time visualization

Zeu.js

Zeu.js is JavaScript library featuring a collection of prebuilt visualization components for building real-time TV dashboard, monitoring UI and IoT web interface.

Demo

My Command Center

Installation

From lib

<script src="zeu.min.js"></script>

From npm

npm install zeu

From CDN

https://unpkg.com/zeu/lib/zeu.min.js

Usage

General

Use a div as the base to create the component.

• Each component has its own recommended size.
• The scale changes based on the height of the outer div.

<div id="component-id" style="width: 200px; height: 100px;"></div>

FPS

Default fps is 60 for components using canvas.

zeu.Settings.fps = 60;

Components

Component	Example
Bar Meter
Blink Text
Digital Clock
Double Circle

Bar Meter (Example)

<div id="bar-meter" style="width: 100px; height: 200px;"></div>

var barMeter = new zeu.BarMeter(
  document.getElementById('bar-meter'), {
    min: 0,
    max: 100,
    value: 80,
    dashColor: 'white',
    barColor: 'red',
    speed: 10
  });

barMeter.value = 60;
barMeter.dashColor = 'green';
barMeter.barColor = 'blue';

Blink Text (Example)

<div id="blink-text"></div>

var binkText = new zeu.BlinkText(
  document.getElementById('blink-text'), {
    interval: 300,
    blinkCss: 'color: white; background-color: blue;'
  });

// Turn on the blink
binkText.blink();

binkText.blinkCss = 'color: white; background-color: green;';
binkText.interval = 2000;
binkText.blink('NEW BLINK TEXT');  

// Turn off the blink
binkText.unblink();

Digital Clock (Example)

<div id="digital-clock" style="width: 370px; height: 100px;"></div>

var digitalClock = new zeu.DigitalClcok(
  document.getElementById('digital-clock'), {
    barWidth: 8,
    barHeight : 30,
    space: 8,
    hourOffset: 5,
    dashColor: '#000',
    numberColor: 'blue'
  }
);

digitalClock.numberColor = '#ff0000';
digitalClock.dashColor = '#000';

Double Circle (Example)

<div id="double-circle" style="width: 200px; height: 200px;"></div>

// Circle in dots
var doubleCircleWithDots = new zeu.DoubleCircle(
  document.getElementById('double-circle-in-dots'), {
    isDot: true,
    dots: 30,
    outer: {
      color: 'red',
      radius: 80,
      speed: 5
    },
    inner: {
      color: 'blue',
      radius: 70,
      speed: 3
    },
    fontColor: 'green',
    text: 'MIDDLE',
    font: '30px Arial'
  });

// Circle in line
var doubleCircleInLine = new zeu.DoubleCircle(
  document.getElementById('double-circle-in-line'), {
    isDot: false,
    lineWidth: 10,
    outer: {
      color: 'red',
      radius: 90,
      speed: 0.5
    },
    inner: {
      color: 'blue',
      radius: 70,
      speed: 0.2
    },
    fontColor: 'green',
    text: 'MIDDLE',
    font: 'italic bold 30px Arial'
  });

  doubleCircleInLine.fontColor = 'red';
  doubleCircleInLine.text = 'CHANGE!';

Heartbeat (Example)

<div id="heartbeat" style="width: 370px; height: 100px;"></div>

var heartbeat = new zeu.Heartbeat(
  document.getElementById('heartbeat'), {
    lineColor: 'red',
    fontColor: 'grey'
  });

heartbeat.lineColor = 'blue';
heartbeat.fontColor = 'green';

// Start a beat
heartbeat.beat();

// Start a beat every one second
setInterval(function() {
  heartbeat.beat();
}, 1000);

Message Queue (Example)

<div id="message-queue" style="width: 100px; height: 200px;"></div>

var messageQueue = new zeu.MessageQueue(
  document.getElementById('message-queue'), {
    barWidth: 60,
    space: 20,
    barColor: 'red',
    maxQueueCapacity: 10
  });

messageQueue.barColor = '#008000';

// Push a message
messageQueue.push();

// Pop a message
messageQueue.pop();

Round Fan (Example)

<div id="round-fan" style="width: 200px; height: 200px;"></div>

var roundFan = new zeu.RoundFan(
  document.getElementById('round-fan'), {
    fanColor: 'blue',
    centerColor: 'blue',
    speed: 1
  });
roundFan.speed = 5;
roundFan.fanColor = 'red';
roundFan.centerColor = 'green';

// Turn off the fan
roundFan.off();

// Turn on the fan
roundFan.on();

Scroll Panel (Example)

<div id="scroll-panel"></div>

var scrollPanel1 = new zeu.ScrollPanel(
  document.getElementById('scroll-panel'), {
    isUp: true
  });

// Push a html element
var message = document.createElement('div');
message.innerHTML = 'value';
message.style.cssText = 'margin: 10px; padding: 10px; color: white; background-color: green;';
scrollPanel1.push(message);

// Push a simple text
var css = 'margin: 3px; padding: 3px; color: white; background-color: green;';
scrollPanel2.pushText('value', css);

Volume Meter (Example)

<div id="volume-meter" style="width: 100px; height: 200px;"></div>

var volumeMeter = new zeu.VolumeMeter(
  document.getElementById('volume-meter'), {
    min: 0,
    max: 200,
    fillColor: 'green',
    fontColor: 'black',
    lineColor: 'black',
    lineWidth: 5
  });

volumeMeter.fillColor = 'red';
volumeMeter.fontColor = 'green';
volumeMeter.value = 100;

Warning Dialog (Example)

var warningDialog = new zeu.WarningDialog({ 
  interval: 5000,
  reason: 'TEST'
});

warningDialog.reason = 'NEW WARNING MESSAGE';
warningDialog.interval = 2000;

// Display the dialog
warningDialog.blink();

// Hide the dialog
warningDialog.unblink();

License

MIT