99

GitHub - shzlw/zeu: A JavaScript library for real-time visualization

 5 years ago
source link: https://github.com/shzlw/zeu
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

Zeu.js

Build Status

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK