dynamic/dynamic_template.html at master · emoncms/dynamic · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<style>
.grid-container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-gap: 10px 10px;
  margin-right:10px;
}
.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: left;
}
.segments {
  grid-column: 2 / span 2;
}

@media (max-width: 1000px) {
  .grid-container {
    grid-template-columns: auto;
  }
  .segments { grid-column:unset; }
}
</style>

<br>
<h2>Dynamic Coheating</h2>

<div id="graph-buttons" style="float:right; margin-right:38px">
  <div class='btn-group'>
      <button class='btn graph-time' type='button' time='1'>D</button>
      <button class='btn graph-time' type='button' time='7'>W</button>
      <button class='btn graph-time' type='button' time='30'>M</button>
      <button class='btn graph-time' type='button' time='365'>Y</button>
  </div>

  <div class='btn-group' id='graph-navbar'>
      <button class='btn graph-nav' id='zoomin'>+</button>
      <button class='btn graph-nav' id='zoomout'>-</button>
      <button class='btn graph-nav' id='left'><</button>
      <button class='btn graph-nav' id='right'>></button>
  </div>
</div>

<p>The black line is simulated internal temperature based on properties defined below.</p>

<div id="graph_bound" style="height:400px; width:100%; position:relative; ">
    <div id="graph"></div>
</div>

<div class="grid-container">
  <div class="grid-item">
    <b>Total heat loss:</b> <span id="total_wk"></span> W/K
  </div>
  <div class="grid-item">
    <b>Total thermal capacity:</b> <span id="total_thermal_capacity"></span> kWh/K
  </div>
  <div class="grid-item">
    <div id="error"></div>
  </div>

  <div class="grid-item">
    <h4>Feed selection</h4>

    <div class="input-prepend">
      <span class="add-on" style="width:220px; text-align:right;" >External temperature feed: </span>
      <select class="feed_selector" name="external_feed" style="width:208px"></select>
    </div><br>

    <div class="input-prepend">
      <span class="add-on" style="width:220px; text-align:right;" >Heating power feed: </span>
      <select class="feed_selector" name="power_feed" style="width:208px"></select>
    </div><br>

    <div class="input-prepend">
      <span class="add-on" style="width:220px; text-align:right;" >Lighting, Appliances & Cooking: </span>
      <select class="feed_selector" name="lac_feed" style="width:208px"></select>
    </div><br>

    <div class="input-prepend">
      <span class="add-on" style="width:220px; text-align:right;" >Solar power feed: </span>
      <select class="feed_selector" name="solar_feed" style="width:208px"></select>
    </div><br>

    <div class="input-prepend input-append">
      <span class="add-on" style="width:90px"> scale by: </span>
      <input id="solar_scale" type="text" style="width:65px"/>
      <span class="add-on" style="width:90px"> offset by: </span>
      <input id="solar_offset" type="text" style="width:65px"/>
      <button id="solar_ok" class="btn" type="button">Ok</button>
    </div><br>

    <div class="input-prepend">
      <span class="add-on" style="width:180px; text-align:right;" >Internal temperature feed: </span>
      <select class="feed_selector" name="internal_feed" style="width:208px"></select>
    </div><br>

    <div class="input-prepend input-append">
      <span class="add-on" style="width:220px; text-align:right;" >Metabolic & Other gains: </span>
      <input id="metabolic" type="text" style="width:155px">
      <button id="metabolic_ok" class="btn" type="button">Ok</button>
    </div><br>

    <p>Other feeds (comma seperated feed id's):</p>

    <div class="input-append">
    <input id="other_feeds"  id="appendedInputButton" type="text" style="width:345px">
    <button id="other_feeds_ok" class="btn" type="button">Ok</button>
    </div>
  </div>

  <div class="grid-item segments">
    <h4>Fabric segments</h4>
    <table class="table">
      <tr><th>Segment</th><th>W/K</th><th>Thermal capacity</th><th>Initial temperature <button id="auto_temp" class="btn">Auto</button></th></tr>
      <tbody id="segment_config"></tbody>
    </table>
    <p><i>Segment 0 connects to external temperature, Segment <span class="numofsegments"></span> to heat input</i></p>

    <button id="add-element" class="btn">Add element</button>
    <button id="remove-element" class="btn">Remove element</button>
    <button id="simulate" class="btn">Simulate</button>
    <button id="save" class="btn">Save All</button>
  </div>
</div>