master

分支 (2)

标签 (2)

管理

管理

master

v0.9.4

v1.3.2

v1.0.0

Zeu-js
/
docs
/
introduction.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<title>Introduction</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="docs.css">
<style>
.bg-grey {
  background-color: #e5e5e5;
}
</style>
</head>
<body>
<div class="container-fluid">
  <script src="menu.js"></script>
  <div class="content p-3">
    <div class="container-fluid">
      <h2>Introduction</h2>
      <hr>
      <p>
        Zeu.js is JavaScript library featuring a collection of prebuilt visualization components for building real-time TV dashboard, monitoring UI and IoT web interface.
      </p>

      <h3 class="mb-3">Quick Start</h3>
      <hr>
      <p>
        Let's build our first Zeu component!
        <pre><code><!-- Include zeu.js. -->
<script src="zeu.min.js"></script>
<!-- Create a canvas. -->
<canvas id="text-meter" width="200" height="100"></canvas>
<script>
  // Create a Zeu TextMeter.
  var textMeter = new zeu.TextMeter('text-meter');
  // Update display and percentage value.
  textMeter.displayValue = 'ZEU';
  textMeter.value = 50;
</script></code></pre>
        <canvas id="text-meter-quick" width="200" height="100"></canvas>
      </p>
      <p>
        Done! Explore other components and configuration page to get started.
      </p>

      <div class="container float-left pl-0">
        <h3 class="mb-3">Components</h3>
        <hr>
        <div class="row mb-3">
          <div class="col-lg text-center mb-2">
            <h4 class="p-3 mb-3 bg-grey"><a href="bar-meter.html" class="text-dark">Bar Meter</a></h4>
            <canvas id="bar-meter" width="100" height="200"></canvas>
          </div>

          <div class="col-lg text-center mb-2">
            <h4 class="p-3 mb-3 bg-grey"><a href="digital-clock.html" class="text-dark">Digital Clock</a></h4>
            <canvas id="digital-clock" width="280" height="70"></canvas>
          </div>

          <div class="col-lg text-center mb-2">
            <h4 class="p-3 mb-3 bg-grey"><a href="heartbeat.html" class="text-dark">Heartbeat</a></h4>
            <canvas id="heartbeat" width="300" height="100"></canvas>
          </div>
        </div>

        <div class="row mb-3">
          <div class="col-lg text-center mb-2">
            <h4 class="p-3 mb-3 bg-grey"><a href="message-queue.html" class="text-dark">Message Queue</a></h4>
            <canvas id="message-queue" width="100" height="200"></canvas>
          </div>

          <div class="col-lg text-center mb-2">
            <h4 class="p-3 mb-3 bg-grey"><a href="round-fan.html" class="text-dark">Round Fan</a></h4>
            <canvas id="round-fan" width="200" height="200"></canvas>
          </div>

          <div class="col-lg text-center mb-2">
            <h4 class="p-3 mb-3 bg-grey"><a href="speed-circle.html" class="text-dark">Speed Circle</a></h4>
            <canvas id="speed-circle" width="200" height="200"></canvas>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-lg text-center mb-2">
            <h4 class="p-3 mb-3 bg-grey"><a href="text-box.html" class="text-dark">Text Box</a></h4>
            <canvas id="text-box" width="200" height="100"></canvas>
          </div>

          <div class="col-lg text-center mb-2">
            <h4 class="p-3 mb-3 bg-grey"><a href="text-meter.html" class="text-dark">Text Meter</a></h4>
            <canvas id="text-meter" width="300" height="100"></canvas>
          </div>

          <div class="col-lg text-center mb-2">
            <h4 class="p-3 mb-3 bg-grey"><a href="volume-meter.html" class="text-dark">Volume Meter</a></h4>
            <canvas id="volume-meter" width="100" height="200"></canvas>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-lg text-center mb-2">
            <h4 class="p-3 mb-3 bg-grey"><a href="network-graph.html" class="text-dark">Network Graph</a></h4>
            <canvas id="network-graph" width="200" height="200"></canvas>
          </div>

          <div class="col-lg text-center mb-2">
            <h4 class="p-3 mb-3 bg-grey"><a href="hex-grid.html" class="text-dark">Hex Grid</a></h4>
            <canvas id="hex-grid" width="200" height="200"></canvas>
          </div>

          <div class="col-lg text-center mb-2">
            <h4 class="p-3 mb-3 bg-grey"><a href="score-board.html" class="text-dark">Score Board</a></h4>
            <canvas id="score-board" width="200" height="200"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
<script src="docs.js"></script>
<script src="../dist/zeu.js"></script>
<script type="text/javascript">
  zeu.Settings.fps = 60;

  var barMeter = new zeu.BarMeter(
    'bar-meter',
    {
      min: 0,
      max: 100,
      dashColor: '#f5f5f5',
      barColor: COLOR.blue,
      speed: 20,
      gradient: true
    });

  var digitalClock = new zeu.DigitalClock(
    'digital-clock',
    {
      numberColor: COLOR.red,
      dashColor: COLOR.lightGrey
    });
  digitalClock.scaleByHeight(70);

  var heartbeat = new zeu.Heartbeat(
    'heartbeat',
    {
      viewWidth: 300,
      speed: 2,
      fontColor: COLOR.grey,
      maxQueueCapacity: 50
    });

  var messageQueue = new zeu.MessageQueue(
    'message-queue',
    {
      viewHeight: 200,
      viewWidth: 100,
      barHeight: 15,
      space: 5,
      speed: 10
    });

  var roundFan = new zeu.RoundFan(
    'round-fan',
    {
      fanColor: COLOR.lightGreen,
      center: {
        color: COLOR.white,
        bgColor: COLOR.lightGreen
      },
      speed: 2
    });

  var speedCircle = new zeu.SpeedCircle(
    'speed-circle',
    {
      text: {
        value: 'ZEU',
        color: COLOR.lightBlack
      },
      circle1: {
        speed: 1.6,
        color: '#ff7850'
      },
      circle2: {
        speed: -1.4,
        color: '#ffda69'
      },
      circle3: {
        speed: 1.2,
        color: '#ffbca7'
      },
      circle4: {
        speed: -1,
        color: '#fff3cd'
      }
    });

  var textBox = new zeu.TextBox(
    'text-box',
    {
      viewWidth: 200,
      text: {
        fontColor: COLOR.red,
        bgColor: COLOR.lightBlack,
        value: '0'
      },
      borderColor: '#ff7850',
      waveColor: COLOR.lightGreen
    });

  var textMeter = new zeu.TextMeter(
    'text-meter',
    {
      viewWidth: 300,
      value: 10,
      displayValue: 'ZEU',
      marker: {
        bgColor: COLOR.black,
        fontColor: COLOR.white
      },
      bar: {
        speed: 5,
        fillColor: COLOR.red,
        bgColor: COLOR.lightWhite,
        borderColor: COLOR.lightBlack
      },
      arrowColor: COLOR.cyan
    });

  var volumeMeter = new zeu.VolumeMeter(
    'volume-meter',
    {
      min: {
        fontColor: COLOR.white,
        value: -200,
        bgColor: COLOR.red
      },
      max: {
        fontColor: COLOR.white,
        value: 200,
        bgColor: COLOR.green
      },
      bar: {
        borderColor: COLOR.grey,
        fillColor: COLOR.blue,
        graident: true,
        speed: 5
      },
      marker: {
        bgColor: COLOR.yellow,
        fontColor: COLOR.white
      },
      value: 100
    });

  var textMeterQuick = new zeu.TextMeter('text-meter-quick');
  textMeterQuick.displayValue = 'ZEU';
  textMeterQuick.value = 50;

  setInterval(function() {
    heartbeat.beat({
      color: getRandomColor(),
      space: getRandomInt(0, 20)
    });
  }, 200);

  setInterval(function() {
    messageQueue.push({
      color: getRandomColor(),
      space: getRandomInt(0, 30)
    });
  }, 500);

  setInterval(function() {
    barMeter.value = getRandomInt(50, 100);
    roundFan.speed = getRandomInt(1, 10);
    textBox.value = getRandomInt(0, 100);
    textMeter.value = getRandomInt(0, 100);
    volumeMeter.value = getRandomInt(-220, 220);
  }, 1000);

  setInterval(function() {
    messageQueue.pop();
  }, 1200);

  var nodes = [
    {
      id: 'a',
      x: 40,
      y: 40,
      color: getRandomColor(),
      size: 15,
      text: {
        value: 'Node A',
        color: getRandomColor(),
        font: '16px Arial',
        xOffset: 0,
        yOffset: -20
      },
      neighbors: [{
        id: 'b',
        edge: {
          width: 1,
          color: COLOR.blue,
          dash: [2, 2]
        }
      }, {
        id: 'd',
        edge: {
          width: 3,
          color: COLOR.red,
        }
      }]
    },
    {
      id: 'b',
      x: 140,
      y: 40,
      color: getRandomColor(),
      size: 10,
      text: {
        value: 'Node B',
        color: getRandomColor(),
        font: '10px Arial',
        xOffset: 30,
        yOffset: 3
      }
    }
  ];

  /* Options */
  var options = {
    nodes: nodes
  }

  /* Constructor */
  var networkGraph = new zeu.NetworkGraph('network-graph', options);
  networkGraph.addNodes([
    {
      id: 'c',
      x: 140,
      y: 150,
      color: getRandomColor(),
      size: 20,
      text: {
        value: 'Node C',
        color: getRandomColor(),
        font: '12px Arial',
        xOffset: 0,
        yOffset: 32
      }
    },
    {
      id: 'd',
      x: 40,
      y: 150,
      color: getRandomColor(),
      size: 16,
      text: {
        value: 'D',
        color: getRandomColor(),
        font: '12px Arial',
        xOffset: 0,
        yOffset: 5
      }
    }
  ]);

  setInterval(function() {
    networkGraph.signal({
        from: 'a',
        to: 'b',
        color: getRandomColor(),
        duration: 1000,
        size: getRandomInt(3, 5)
      });

    networkGraph.signal({
        from: 'b',
        to: 'c',
        color: getRandomColor(),
        duration: 25000,
        size: getRandomInt(3, 5)
      });

    networkGraph.signal({
        from: 'c',
        to: 'd',
        color: getRandomColor(),
        duration: 8000,
        size: getRandomInt(4, 5)
      });
    networkGraph.signal({
        from: 'd',
        to: 'a',
        color: getRandomColor(),
        duration: 12000,
        size: getRandomInt(3, 5)
      });
  }, 1000);

  var hexGrid = new zeu.HexGrid('hex-grid', {
    viewWidth: 200,
    viewHeight: 200,
    space: 5,
    radius: 30,
    border: 1
  });

  var data = [
    {x: 0, y: 1},
    {x: 0, y: 2},
    {x: 1, y: 0},
    {x: 1, y: 1},
    {x: 1, y: 2},
    {x: 2, y: 1},
    {x: 2, y: 2}
  ];

  for (var i = 0; i < data.length; i++) {
    var d = data[i];
    var id = 'hex-' + d.x + '-' + d.y;
    hexGrid.saveHex({
      id: id,
      x: d.x,
      y: d.y,
      bgColor: '#00d7af',
      borderColor: '#FFFFFF',
      text: {
        value: d.x + '-' + d.y,
        color: '#FFFFFF',
        font: '16px Arial',
        xOffset: 0,
        yOffset: 5
      }
    });
  }

  hexGrid.blinkOn({
    id: 'hex-1-1',
    text: {
      value: 'ZEU',
      color: '#FFFFFF'
    },
    bgColor: '#dc3547',
    borderColor: '#FFFFFF',
    interval: 1000
  });

  var scoreBoard = new zeu.ScoreBoard('score-board', {
    viewWidth: 200,
    viewHeight: 200,
    order: 'asc',
    rowHeight: 40,
    space: 0,
    speed: 10,
    font: '20px Arial'
  });

  var red = ['#f32617', '#f6665c', '#f98d85', '#fbb3ae', '#fdd9d6'];
  for (var i = 1; i <= 5; i++) {
    var score = getRandomInt(1, 100);
    scoreBoard.add({
      id: 'p' + i,
      score: score,
      bgColor: red[i - 1],
      text: {
        value:  'P' + i + '  Score: ' + score,
        xOffset: 15,
        yOffset: 28
      }
    });
  }

  setInterval(function() {
    for (var i = 1; i <= 5; i++) {
      var score = getRandomInt(1, 100);
      scoreBoard.update({
        id: 'p' + i,
        score: score,
        text: {
          value: 'P' + i + '  Score: ' + score
        }
      });
    }
  }, 1500);

</script>
</body>
</html>