Build Desktop Application with Electron (3)

2017-01-03

1031
0
Electron
2017-01-06

上一篇文章我們介紹了如何整合現有的JavaScript/CSS Framework到Electron應用程式裡，如果仔細看的話，你會發現Electron不管在HTML或是.js檔裡都是以Node.JS來編譯(當然，如果不喜歡的話也可以設定讓其使用JavaScript方式)，這也開啟了另一道門，整合現有的Node.js Framework/Component。

整合Node.js

本文以一個簡單的例子來展示Electron與Node.js的結合，其實也沒啥特別的，Electron本身主要語言就是Node.js，說整合還不如說是介紹如何應用Node.js來做為前端UI Framework的資料提供者。

這裡使用CPU Loading的例子，基本上網路上這類的套件不少，此處我選擇使用Node.js內建的功能來取得現在的CPU Loading，雖然精準度差，但至少是跨平台的，下面是原始程式碼。

Cpu.js

var os = require("os");

//Create function to get CPU information

exports.cpuAverage = function() {

    //Initialise sum of idle and time of cores and fetch CPU info

    var totalIdle = 0, totalTick = 0;

    var cpus = os.cpus();

    //Loop through CPU cores

    for (var i = 0, len = cpus.length; i < len; i++) {

        //Select CPU core

        var cpu = cpus[i];

        //Total up the time in the cores tick

        for (type in cpu.times) {

            totalTick += cpu.times[type];

        }

        //Total up the idle time of the core

        totalIdle += cpu.times.idle;

    }

    //Return the average Idle and Tick times

    return { idle: totalIdle / cpus.length, total: totalTick / cpus.length };

}

使用方法很簡單，就只要呼叫cpuAverage來取得現在的CPU Loading就可以了，接著尋找適合的UI Component，此處使用百分比式的呈現。

https://kimmobrunfeldt.github.io/progressbar.js/

安裝方式很簡單，在專案目錄下達以下的命令即可。

npm install progressbar.js

接著修改index.html如下。

Index.html

<!DOCTYPE html>

<html>



<head>

  <!--Import Google Icon Font-->

  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <!--Import materialize.css-->

  <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />



  <!--Let browser know website is optimized for mobile-->

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />



  <style>

              .progress {

                height: 150px;

                width: 150px;

                background-color: transparent

            }



            .progress > svg {

                height: 100%;

                display: block;

                            }



        </style>

</head>



<body>

  <!--Import jQuery before materialize.js-->

  <script>window.$ = window.jQuery = require('jquery');</script>

  <script type="text/javascript" src="js/hammer.min.js"></script>

  <script type="text/javascript" src="js/materialize.min.js"></script>

  <ul id="slide-out" class="side-nav">

    <li>

      <div class="userView">

        <div class="background">

          <img src="images/office.jpg">

        </div>

        <a href="#!user"><img class="circle" src="images/yuna.jpg"></a>

        <a href="#!name"><span class="white-text name">John Doe</span></a>

        <a href="#!email"><span class="white-text email">jdandturk@gmail.com</span></a>

      </div>

    </li>

    <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>

    <li><a href="#!">Second Link</a></li>

    <li>

      <div class="divider"></div>

    </li>

    <li><a class="subheader">Subheader</a></li>

    <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>

  </ul>

  <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>

  <div class="progress" id="progress"></div>

    <script>

     // Initialize collapse button

     $(".button-collapse").sideNav();



     var ProgressBar = require('progressbar.js')

     var cpu = require("./cpu.js");

     $(".button-collapse").sideNav();



     var circle = new ProgressBar.Circle('#progress', {

        color: '#FCB03C',

        strokeWidth: 3,

        trailColor: '#f4f4f4'

     });

     //Grab first CPU Measure

     var startMeasure = cpu.cpuAverage();

     //Set delay for second Measure

     setInterval(function() {

        //Grab second Measure

          var endMeasure = cpu.cpuAverage();

          //Calculate the difference in idle and total time between the measures

          var idleDifference = endMeasure.idle - startMeasure.idle;

          var totalDifference = endMeasure.total - startMeasure.total;

          //Calculate the average percentage CPU usage

           var percentageCPU = 100 - ~~(100 * idleDifference / totalDifference);

           circle.set(percentageCPU / 100);

           circle.setText(percentageCPU + "%");         

           //$("#usage").text(percentageCPU);

          },  600);  

     // Initialize collapsible (uncomment the line below if you use the dropdown variation)

     //$('.collapsible').collapsible();

    </script>



</body>



</html>

執行結果如下。