Mercurial > code > home > repos > homeauto

comparison service/wallscreen/index.html @ 57:f25fc0681c22

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
move from pimscreen/ Ignore-this: 8a080fd516018a9450c85931b117227a
author drewp@bigasterisk.com
date Sun, 10 Feb 2013 02:25:10 -0800
parents
children 3c40d92b2db3
comparison
equal deleted inserted replaced
56:517bd1407ed6 57:f25fc0681c22
1 <?xml version="1.0" encoding="iso-8859-1"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head>
6 <title>wallscreen</title>
7 <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400' rel='stylesheet' type='text/css'>
8 <style type="text/css" media="all">
9 /* <![CDATA[ */
10 body {
11 background: black;
12 margin: 0;
13 }
14 p, ul {
15 margin: 0;
16 }
17 #edge {
18 position: absolute;
19 left: 14px;
20 top: 11px;
21 width: 463px;
22 height: 680px;
23
24 background: black;
25 color: gray;
26 font-size: 30px;
27 line-height: 25px;
28 font-family: 'Yanone Kaffeesatz', sans-serif;
29 overflow: hidden;
30 }
31
32 #edge.rot {
33 left: 113px;
34 top: -101px;
35 transform: rotate(90deg);
36 width: 463px;
37 height: 680px;
38 }
39
40 @media screen and (-webkit-min-device-pixel-ratio:0) {
41 #edge { border: 1px solid red; }
42 }
43
44 #clock {
45
46 bottom: 25px;
47 color: #4E8B4E;
48 font-size: 56px;
49 line-height: 63px;
50 position: absolute;
51 right: 5px;
52 text-align: right;
53 width: 134px;
54
55
56 }
57
58 #todo {
59 width: 70%;
60 height: 60%;
61 overflow: hidden;
62 }
63 #todo h1 {
64
65 }
66 .fg2 {
67 color: #2a2aa8;
68 }
69 .depth0 { padding-left: 0px; color: #fff; background: #1f2324}
70 .depth1 { padding-left: 20px; color: #777; }
71 .depth2 { padding-left: 40px; color: #3c3535; }
72 .depth3 { padding-left: 60px; color: #221e1e; }
73
74 #events {
75 width: 70%;
76 height: 40%;
77 overflow: hidden;
78 }
79 #events > ul > li {
80 list-style: none;
81 margin-left: -26px;
82 }
83 #events h2 {
84 margin: 0;
85 padding: 0;
86 font-weight: normal;
87 font-size: 100%;
88 padding-left: 27px;
89 background: url(static/Free%20Blockie%20Set/Blue%20Glass/PNG%2024/calendar.png) no-repeat;
90
91 }
92
93 #events li.today h2 {
94 background: url(static/Free%20Blockie%20Set/Golden/PNG%2024/calendar.png) no-repeat;
95
96 }
97 li.timeEvent {
98 list-style: none;
99 margin-left: -26px;
100 padding-left: 27px;
101 background: url(static/Free%20Blockie%20Set/Blue%20Glass/PNG%2024/clock.png) no-repeat;
102 }
103
104 .today .timeEvent {
105 background: url(static/Free%20Blockie%20Set/Golden/PNG%2024/clock.png) no-repeat;
106
107 }
108 h2 .dayName {
109 color: #666688;
110 font-size: 70%;
111 }
112
113 #events > ul > li {
114 padding: 4px;
115 }
116 #events > li.today {
117 background: #432;
118 color: white;
119 }
120
121 #thermostat {
122 position: absolute;
123 left: 8px;
124 top: 650px;
125 }
126
127 /* ]]> */
128 </style>
129
130 </head>
131 <body>
132 <div id="edge" class="rot">
133 <div id="clock">..:..</div>
134
135 <div id="todo">
136 <p>Todo list:</p>
137 <ul data-bind="foreach: tasks">
138 <li data-bind="attr: {class: ('depth'+depth+' '+(mark || ''))}">
139 <span data-bind="text: content"></span>
140 </li>
141 </ul>
142 </div>
143
144 <div id="events">
145 <p>Calendar:</p>
146 <ul data-bind="foreach: events">
147 <li data-bind="css: {today: $root.isToday($data)}">
148 <h2>
149 <span data-bind="text: date"></span>
150 <span class="dayName" data-bind="text: weekdayName"></span>
151 </h2>
152 <ul>
153 <!-- ko foreach: dayEvents -->
154 <li><span data-bind="text: title"></span></li>
155 <!-- /ko -->
156 <!-- ko foreach: timeEvents -->
157 <li class="timeEvent"><span class="time" data-bind="text: time"></span> <span data-bind="text: title"></span></li>
158 <!-- /ko -->
159 </ul>
160 </li>
161 </ul>
162 </div>
163 <div id="thermostat">
164 Thermostat at <span data-bind="text: requestedF"></span>. Use knob to adjust
165 </div>
166
167 </div>
168 <script src="static/jquery-1.8.3.min.js"></script>
169 <script src="static/underscore-1.4.2.min.js"></script>
170 <script src="static/knockout-2.1.0.min.js"></script>
171 <script src="static/moment.min.js"></script>
172 <script type="text/javascript">
173 var reloadData;
174 $(function () {
175 setTimeout(function () {
176 window.resizeTo(702,480);
177 }, 10000);
178
179 var model = {
180 requestedF: ko.observable(),
181 tasks: ko.observableArray([]),
182 events: ko.observableArray([]),
183 isToday: function (ev) {
184 var today = moment().format("YYYY-MM-DD");
185 return ev.date == today;
186 }
187 };
188 reloadData = function() {
189 $.getJSON("content", function (data) {
190 model.tasks(data.tasks);
191 model.events(data.events);
192 });
193 }
194 setInterval(reloadData, 30*60*1000);
195 reloadData();
196
197 setInterval(function () {
198 $.getJSON("/thermostat", function (data) {
199 model.requestedF(data.tempF);
200 });
201 }, 3000);
202
203 ko.applyBindings(model);
204
205
206 if (navigator.userAgent == "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:18.0) Gecko/18.0 Firefox/18.0") {
207 $(".rot").removeClass("rot");
208 }
209
210 function updateClock() {
211 var now = moment();
212 var s = (new Date()).toLocaleTimeString();
213 $("#clock").html(
214 "<div>"+now.format("dddd")+"</div>"+
215 "<div>"+now.format("MMM Do")+"</div>"+
216 "<div>"+now.format("HH:mm")+"</div>"
217 )
218 }
219 setInterval(updateClock, 20000)
220 updateClock();
221
222 });
223 </script>
224
225 </body>
226 </html>