Mercurial > code > home > repos > homeauto
annotate service/wallscreen/index.html @ 866:a99b4d5afb83
use websockets for temperature update
Ignore-this: 558ad53cf5b4b0c013041db555fbb458
darcs-hash:20130210214135-312f9-f69d37d4b9bce7fa6ec0e9c9889b2de90fd26a8f
| author | drewp <drewp@bigasterisk.com> |
|---|---|
| date | Sun, 10 Feb 2013 13:41:35 -0800 |
| parents | db3e0510ab49 |
| children | 85d12376b415 |
| rev | line source |
|---|---|
|
865
db3e0510ab49
wallscreen switch to html5 and cyclone. add temporary temperature poller
drewp <drewp@bigasterisk.com>
parents:
862
diff
changeset
|
1 <!DOCTYPE html> |
|
db3e0510ab49
wallscreen switch to html5 and cyclone. add temporary temperature poller
drewp <drewp@bigasterisk.com>
parents:
862
diff
changeset
|
2 <html> |
| 862 | 3 <head> |
|
866
a99b4d5afb83
use websockets for temperature update
drewp <drewp@bigasterisk.com>
parents:
865
diff
changeset
|
4 <meta charset='utf-8'> |
| 862 | 5 <title>wallscreen</title> |
|
865
db3e0510ab49
wallscreen switch to html5 and cyclone. add temporary temperature poller
drewp <drewp@bigasterisk.com>
parents:
862
diff
changeset
|
6 <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400' rel='stylesheet' type='text/css'></link> |
| 862 | 7 <style type="text/css" media="all"> |
| 8 /* <![CDATA[ */ | |
| 9 body { | |
| 10 background: black; | |
| 11 margin: 0; | |
| 12 } | |
| 13 p, ul { | |
| 14 margin: 0; | |
| 15 } | |
| 16 #edge { | |
| 17 position: absolute; | |
| 18 left: 14px; | |
| 19 top: 11px; | |
| 20 width: 463px; | |
| 21 height: 680px; | |
| 22 | |
| 23 background: black; | |
| 24 color: gray; | |
| 25 font-size: 30px; | |
| 26 line-height: 25px; | |
| 27 font-family: 'Yanone Kaffeesatz', sans-serif; | |
| 28 overflow: hidden; | |
| 29 } | |
| 30 | |
| 31 #edge.rot { | |
| 32 left: 113px; | |
| 33 top: -101px; | |
| 34 transform: rotate(90deg); | |
| 35 width: 463px; | |
| 36 height: 680px; | |
| 37 } | |
| 38 | |
| 39 @media screen and (-webkit-min-device-pixel-ratio:0) { | |
| 40 #edge { border: 1px solid red; } | |
| 41 } | |
| 42 | |
| 43 #clock { | |
| 44 bottom: 25px; | |
| 45 color: #4E8B4E; | |
| 46 font-size: 56px; | |
| 47 line-height: 63px; | |
| 48 position: absolute; | |
| 49 right: 5px; | |
| 50 text-align: right; | |
| 51 width: 134px; | |
| 52 } | |
| 53 | |
| 54 #todo { | |
| 55 width: 70%; | |
| 56 height: 60%; | |
| 57 overflow: hidden; | |
| 58 } | |
| 59 #todo h1 { | |
| 60 | |
| 61 } | |
| 62 .fg2 { | |
| 63 color: #2a2aa8; | |
| 64 } | |
| 65 .depth0 { padding-left: 0px; color: #fff; background: #1f2324} | |
| 66 .depth1 { padding-left: 20px; color: #777; } | |
| 67 .depth2 { padding-left: 40px; color: #3c3535; } | |
| 68 .depth3 { padding-left: 60px; color: #221e1e; } | |
| 69 | |
| 70 #events { | |
| 71 width: 70%; | |
| 72 height: 40%; | |
| 73 overflow: hidden; | |
| 74 } | |
| 75 #events > ul > li { | |
| 76 list-style: none; | |
| 77 margin-left: -26px; | |
| 78 } | |
| 79 #events h2 { | |
| 80 margin: 0; | |
| 81 padding: 0; | |
| 82 font-weight: normal; | |
| 83 font-size: 100%; | |
| 84 padding-left: 27px; | |
| 85 background: url(static/Free%20Blockie%20Set/Blue%20Glass/PNG%2024/calendar.png) no-repeat; | |
| 86 | |
| 87 } | |
| 88 | |
| 89 #events li.today h2 { | |
| 90 background: url(static/Free%20Blockie%20Set/Golden/PNG%2024/calendar.png) no-repeat; | |
| 91 | |
| 92 } | |
| 93 li.timeEvent { | |
| 94 list-style: none; | |
| 95 margin-left: -26px; | |
| 96 padding-left: 27px; | |
| 97 background: url(static/Free%20Blockie%20Set/Blue%20Glass/PNG%2024/clock.png) no-repeat; | |
| 98 } | |
| 99 | |
| 100 .today .timeEvent { | |
| 101 background: url(static/Free%20Blockie%20Set/Golden/PNG%2024/clock.png) no-repeat; | |
| 102 | |
| 103 } | |
| 104 h2 .dayName { | |
| 105 color: #666688; | |
| 106 font-size: 70%; | |
| 107 } | |
| 108 | |
| 109 #events > ul > li { | |
| 110 padding: 4px; | |
| 111 } | |
| 112 #events > li.today { | |
| 113 background: #432; | |
| 114 color: white; | |
| 115 } | |
| 116 | |
| 117 #thermostat { | |
| 118 position: absolute; | |
| 119 left: 8px; | |
|
865
db3e0510ab49
wallscreen switch to html5 and cyclone. add temporary temperature poller
drewp <drewp@bigasterisk.com>
parents:
862
diff
changeset
|
120 top: 640px; |
| 862 | 121 } |
|
866
a99b4d5afb83
use websockets for temperature update
drewp <drewp@bigasterisk.com>
parents:
865
diff
changeset
|
122 #status { |
|
a99b4d5afb83
use websockets for temperature update
drewp <drewp@bigasterisk.com>
parents:
865
diff
changeset
|
123 color: red; |
|
a99b4d5afb83
use websockets for temperature update
drewp <drewp@bigasterisk.com>
parents:
865
diff
changeset
|
124 left: 100px; |
|
a99b4d5afb83
use websockets for temperature update
drewp <drewp@bigasterisk.com>
parents:
865
diff
changeset
|
125 position: absolute; |
|
a99b4d5afb83
use websockets for temperature update
drewp <drewp@bigasterisk.com>
parents:
865
diff
changeset
|
126 top: 100px; |
|
a99b4d5afb83
use websockets for temperature update
drewp <drewp@bigasterisk.com>
parents:
865
diff
changeset
|
127 } |
| 862 | 128 |
| 129 /* ]]> */ | |
| 130 </style> | |
| 131 | |
| 132 </head> | |
| 133 <body> | |
| 134 <div id="edge" class="rot"> | |
| 135 <div id="clock">..:..</div> | |
| 136 | |
| 137 <div id="todo"> | |
| 138 <p>Todo list:</p> | |
| 139 <ul data-bind="foreach: tasks"> | |
| 140 <li data-bind="attr: {class: ('depth'+depth+' '+(mark || ''))}"> | |
| 141 <span data-bind="text: content"></span> | |
| 142 </li> | |
| 143 </ul> | |
| 144 </div> | |
| 145 | |
| 146 <div id="events"> | |
| 147 <p>Calendar:</p> | |
| 148 <ul data-bind="foreach: events"> | |
| 149 <li data-bind="css: {today: $root.isToday($data)}"> | |
| 150 <h2> | |
| 151 <span data-bind="text: date"></span> | |
| 152 <span class="dayName" data-bind="text: weekdayName"></span> | |
| 153 </h2> | |
| 154 <ul> | |
| 155 <!-- ko foreach: dayEvents --> | |
| 156 <li><span data-bind="text: title"></span></li> | |
| 157 <!-- /ko --> | |
| 158 <!-- ko foreach: timeEvents --> | |
| 159 <li class="timeEvent"><span class="time" data-bind="text: time"></span> <span data-bind="text: title"></span></li> | |
| 160 <!-- /ko --> | |
| 161 </ul> | |
| 162 </li> | |
| 163 </ul> | |
| 164 </div> | |
| 165 <div id="thermostat"> | |
|
865
db3e0510ab49
wallscreen switch to html5 and cyclone. add temporary temperature poller
drewp <drewp@bigasterisk.com>
parents:
862
diff
changeset
|
166 Thermostat at <span style="color: #FAB1FA;" data-bind="text: requestedF"></span>. Use knob to adjust. |
| 862 | 167 </div> |
|
866
a99b4d5afb83
use websockets for temperature update
drewp <drewp@bigasterisk.com>
parents:
865
diff
changeset
|
168 <div id="status"></div> |
| 862 | 169 |
| 170 </div> | |
| 171 <script src="static/jquery-1.8.3.min.js"></script> | |
| 172 <script src="static/underscore-1.4.2.min.js"></script> | |
| 173 <script src="static/knockout-2.1.0.min.js"></script> | |
| 174 <script src="static/moment.min.js"></script> | |
|
866
a99b4d5afb83
use websockets for temperature update
drewp <drewp@bigasterisk.com>
parents:
865
diff
changeset
|
175 <script src="websocket.js"></script> |
|
a99b4d5afb83
use websockets for temperature update
drewp <drewp@bigasterisk.com>
parents:
865
diff
changeset
|
176 <script src="gui.js"></script> |
| 862 | 177 </body> |
| 178 </html> |