Resources/Web/index.html
author moel.mich
Sun, 09 Jun 2013 16:53:16 +0000
changeset 398 ac9b3b647906
permissions -rw-r--r--
Small correction to the plot with multiple axes.
moel@348
     1
<!-- This Source Code Form is subject to the terms of the Mozilla Public
moel@348
     2
   - License, v. 2.0. If a copy of the MPL was not distributed with this
moel@348
     3
   - file, You can obtain one at http://mozilla.org/MPL/2.0/.  
moel@348
     4
	 
moel@348
     5
	 - Copyright (C) 2012 Prince Samuel <prince.samuel@gmail.com>  -->
moel@348
     6
moel@348
     7
<html>
moel@348
     8
  <head>
moel@348
     9
    <title>Open Hardware Monitor - Web Version</title>
moel@348
    10
    <script type='text/javascript' src='js/jquery-1.7.2.min.js'></script>
moel@348
    11
    <script type='text/javascript' src='js/jquery.tmpl.min.js'></script>
moel@348
    12
    <script type='text/javascript' src='js/knockout-2.1.0.min.js'></script>
moel@348
    13
    <script type='text/javascript' src='js/knockout.mapping-latest.min.js'></script>
moel@348
    14
moel@348
    15
    <link href="css/jquery.treeTable.css" rel="stylesheet" type="text/css" />
moel@348
    16
    <script type='text/javascript' src='js/jquery.treeTable.min.js'></script>
moel@348
    17
moel@348
    18
    <link href="css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
moel@348
    19
    <link href="css/ohm_web.css" rel="stylesheet" type="text/css" />
moel@348
    20
    <script type='text/javascript' src='js/jquery-ui-1.8.16.custom.min.js'></script>
moel@348
    21
    <style>
moel@348
    22
      #toolbar {
moel@348
    23
        padding: 10px 10px;
moel@348
    24
      }
moel@348
    25
      #slider {
moel@348
    26
        display: inline-block;
moel@348
    27
        width: 100px;
moel@348
    28
      }
moel@348
    29
    </style>
moel@348
    30
moel@348
    31
moel@348
    32
    <script type='text/javascript' src='js/ohm_web.js'></script>
moel@348
    33
moel@348
    34
  </head>
moel@348
    35
moel@348
    36
  <body>
moel@348
    37
moel@348
    38
    <div class="header">
moel@348
    39
moel@348
    40
      <span id="toolbar" class="ui-widget-header ui-corner-all">
moel@348
    41
        <button id="refresh" data-bind="click: update">Refresh</button>
moel@348
    42
        <input type="checkbox" id="auto_refresh" data-bind="checked: auto_refresh"/><label for="auto_refresh">Auto Refresh</label>
moel@348
    43
        &nbsp;<div id="slider"></div>&nbsp;&nbsp;&nbsp;&nbsp;<span for="auto_refresh" id="lbl"></span>
moel@348
    44
      </span>
moel@348
    45
    </div>
moel@348
    46
moel@348
    47
    <div class="main">
moel@348
    48
      <table data-bind="treeTable: flattened, treeOptions: { initialState: 'expanded', clickableNodeNames: true } ">
moel@348
    49
        <thead><td>Sensor</td><td>Min</td><td>Value</td><td>Max</td>
moel@348
    50
          <tbody data-bind="foreach: flattened">
moel@348
    51
            <tr data-bind="attr: { 'id': 'node-' + id(), 'class': parent.id()?'child-of-node-' + parent.id():'' }">
moel@348
    52
              <td data-bind="html: '<img src=' + ImageURL() + ' />&nbsp; ' + Text()"></td>
moel@348
    53
              <td data-bind="text: Min"></td>
moel@348
    54
              <td data-bind="text: Value"></td>
moel@348
    55
              <td data-bind="text: Max"></td>
moel@348
    56
            </tr>
moel@348
    57
          </tbody>
moel@348
    58
        </table>
moel@348
    59
      </div>
moel@348
    60
    </body>
moel@348
    61
  </html>