|
57
|
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>
|
