git.haldean.org sousvide / cdd435a
Implement animated theme switching because reasons Oh man now it does this awesome thing where it switches color when you switch it from enabled to disabled and it's super fucking sweet. Will Haldean Brown 8 years ago
4 changed file(s) with 39 addition(s) and 38 deletion(s). Raw diff Collapse all Expand all
33 <title>sousvide</title>
44 <link rel="stylesheet" media="screen and (min-device-width: 800px)" href="screen.css" />
55 <link rel="stylesheet" href="main.css" />
6 <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Source+Code+Pro' rel='stylesheet' type='text/css'>
76
8 <script src="http://cdn.enderjs.com/ender.min.js"></script>
9 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
7 <script src="jquery.min.js"></script>
8 <script src="d3.v3.min.js" charset="utf-8"></script>
109 <script src="themes.js"></script>
1110 <script src="sousvide.js"></script>
1211 <script src="chart.js"></script>
1312 </head>
1413 <body class="bg-primary">
15 <h1 class="fg-secondary">
16 <a href="http://263a.net" class="fg-secondary">0x263A</a> &mdash; SV2.1.0
17 </h1>
14 <h1 class="fg-secondary">SV2.1.0</h1>
1815 <div id="floater">
1916 <div id="display">
2017 <div id="temp_container"><span id="temp"></span> &deg;C</div>
77 url('webfonts/norwester.svg#font') format('svg');
88 }
99
10 .bg-primary { background: #FE4F00; }
11 .bg-secondary { background: #FFB213; }
12 .fg-primary { color: #FE4F00; }
13 .fg-secondary { color: #FFB213; }
14 /*
15 .bg-primary { background: #78F418; }
16 .bg-secondary { background: #4D742E; }
17 .fg-primary { color: #78F418; }
18 .fg-secondary { color: #4D742E; }
19 */
10 .bg-primary { background: #CCC; }
11 .bg-secondary { background: #FFF; }
12 .fg-primary { color: #CCC; }
13 .fg-secondary { color: #000; }
2014
2115 body {
2216 font-family: 'Source Sans Pro', sans-serif;
2721
2822 #floater {
2923 position: fixed;
30 right: 32pt;
31 top: 0;
24 left: 32pt;
25 top: 32pt;
3226 font-family: Norwester, monospace;
3327 width: 500pt;
3428 }
8074 padding: 8pt 16pt;
8175 text-transform: uppercase;
8276 text-decoration: none;
77 color: #000;
8378 }
8479
8580 #buttonbar #button_enable {
10095 font-size: 128pt;
10196 position: absolute;
10297 top: 32pt;
103 left: 48pt;
98 right: 48pt;
10499 display: none;
105100
106101 -moz-animation-direction: alternate;
154149 }
155150
156151 .targetline {
157 stroke: #FFB213;
152 stroke: #FFF;
158153 stroke-width: 5px;
159154 shape-rendering: crispEdges;
160155 }
6363 $(absErrElem).text((err >= 0 ? '+' : '') + err.toFixed(2));
6464
6565 if (data.Enabled && (lastEnabled == false || lastEnabled == undefined)) {
66 console.log("dis -> en")
67 $(enableButton).addClass('fg-secondary')
68 $(enableButton).removeClass('fg-primary')
69 $(disableButton).addClass('fg-primary')
70 $(disableButton).removeClass('fg-secondary')
71 reapplyTheme()
66 console.log("dis -> en");
67 $(enableButton).removeClass('fg-primary');
68 $(disableButton).removeClass('fg-secondary');
69 $(enableButton).addClass('fg-secondary');
70 $(disableButton).addClass('fg-primary');
71 setOrange();
7272 } else if (!data.Enabled && (lastEnabled == true || lastEnabled == undefined)) {
73 console.log("en -> dis")
74 $(disableButton).addClass('fg-secondary')
75 $(disableButton).removeClass('fg-primary')
76 $(enableButton).addClass('fg-primary')
77 $(enableButton).removeClass('fg-secondary')
78 reapplyTheme()
73 console.log("en -> dis");
74 $(enableButton).removeClass('fg-secondary');
75 $(disableButton).removeClass('fg-primary');
76 $(enableButton).addClass('fg-primary');
77 $(disableButton).addClass('fg-secondary');
78 setBlue();
7979 }
8080 lastEnabled = data.Enabled
8181
179179 }
180180
181181 $(document).ready(function() {
182 //setTheme("#FFF", "#000")
183
184182 tempElem = document.getElementById('temp')
185183 absErrElem = document.getElementById('abs_err')
186184 targetElem = document.getElementById('target')
00 var primary, secondary
1
12 function setTheme(p, s) {
23 primary = p
34 secondary = s
45 reapplyTheme();
56 }
67
8 function setBlue() {
9 setTheme("#5116FE", "#45317E");
10 }
11
12 function setOrange() {
13 setTheme("#FE4F00", "#FFB213");
14 }
15
716 function reapplyTheme() {
8 $('.bg-primary').css('background', primary)
9 $('.bg-secondary').css('background', secondary)
10 $('.fg-primary').css('color', primary)
11 $('.fg-secondary').css('color', secondary)
17 d3.selectAll('.bg-primary').transition().style('background-color', primary)
18 d3.selectAll('.bg-secondary').transition().style('background-color', secondary)
19 d3.selectAll('.fg-primary').transition().style('color', primary)
20 d3.selectAll('.fg-secondary').transition().style('color', secondary)
21 d3.select('.targetline').transition().style('stroke', secondary)
1222 }
23