Mercurial > hg > NetworkVis

comparison d3s_examples/python-neo4jrestclient/static/platin/lib/slider/rgbdemo.html @ 8:18ef6948d689

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
new d3s examples
author Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
date Thu, 01 Oct 2015 17:17:27 +0200
parents
children
comparison
equal deleted inserted replaced
7:45dad9e38c82 8:18ef6948d689
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
4 <html>
5 <head>
6 <title></title>
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8 <link type="text/css" rel="StyleSheet" href="css/bluecurve/bluecurve.css" />
9 <style type="text/css">
10
11 body, html {
12 overflow: hidden;
13 margin: 0;
14 border: 0;
15 padding: 0;
16 width: 100%;
17 height: 100%;
18 background: rgb(230,230,230);
19 font: MessageBox;
20 font: Message-Box;
21 }
22
23 .color-picker {
24 background: transparent;
25 width: 100%;
26 height: 100%;
27 }
28
29 .color-picker td {
30 padding: 1px;
31 }
32
33 .dynamic-slider-control {
34 width: auto;
35 height: 20px;
36 margin: 0;
37 }
38
39 .color-picker input {
40 text-align: right;
41 width: 30px;
42 }
43 .color-picker td,
44 .color-picker input {
45 font: Message-Box;
46 font: MessageBox;
47 }
48
49 #color-result {
50 width: 60px;
51 border: 1px solid rgb(90,97,90);
52 background-color: black;
53 }
54
55 </style>
56
57 <script type="text/javascript" src="js/range.js"></script>
58 <script type="text/javascript" src="js/timer.js"></script>
59 <script type="text/javascript" src="js/slider.js"></script>
60 </head>
61 <body>
62
63 <table class="color-picker" cellspacing="2" cellpadding="0" border="0">
64 <col style="width: 40px" />
65 <col style="" />
66 <col style="width: 10px" />
67 <col style="width: 50px" />
68 <tr>
69 <td><label for="red-slider">Red:</label></td>
70 <td>
71 <div class="slider" id="red-slider" tabIndex="1">
72 <input class="slider-input" id="red-slider-input" />
73 </div>
74 </td>
75 <td><input id="red-input" maxlength="3" tabIndex="2" /></td>
76 <td rowspan="3" id="color-result"></td>
77 </tr>
78 <tr>
79 <td><label for="green-slider">Green:</label></td>
80 <td>
81 <div class="slider" id="green-slider" tabIndex="3">
82 <input class="slider-input" id="green-slider-input" />
83 </div>
84 </td>
85 <td><input id="green-input" maxlength="3" tabIndex="4" /></td>
86 </tr>
87 <tr>
88 <td><label for="blue-slider">Blue:</label></td>
89 <td>
90 <div class="slider" id="blue-slider" tabIndex="5">
91 <input class="slider-input" id="blue-slider-input" />
92 </div>
93 </td>
94 <td><input id="blue-input" maxlength="3" tabIndex="6" /></td>
95 </tr>
96 </table>
97
98
99
100
101
102
103
104
105 <script type="text/javascript">
106
107 // init code
108 var r = new Slider(document.getElementById("red-slider"), document.getElementById("red-slider-input"));
109 r.setMaximum(255);
110 var g = new Slider(document.getElementById("green-slider"), document.getElementById("green-slider-input"));
111 g.setMaximum(255);
112 var b = new Slider(document.getElementById("blue-slider"), document.getElementById("blue-slider-input"));
113 b.setMaximum(255);
114
115 var ri = document.getElementById("red-input");
116 ri.onchange = function () {
117 r.setValue(parseInt(this.value));
118 };
119
120 var gi = document.getElementById("green-input");
121 gi.onchange = function () {
122 g.setValue(parseInt(this.value));
123 };
124
125 var bi = document.getElementById("blue-input");
126 bi.onchange = function () {
127 b.setValue(parseInt(this.value));
128 };
129
130 r.onchange = g.onchange = b.onchange = function () {
131 var cr = document.getElementById("color-result");
132 cr.style.backgroundColor = "rgb(" + r.getValue() + "," +
133 g.getValue() + "," +
134 b.getValue() + ")";
135 ri.value = r.getValue();
136 gi.value = g.getValue();
137 bi.value = b.getValue();
138
139 if (typeof window.onchange == "function")
140 window.onchange();
141 };
142
143 r.setValue(128);
144 g.setValue(128);
145 b.setValue(128);
146
147 // end init
148
149 function setRgb(nRed, nGreen, nBlue) {
150 r.setValue(nRed);
151 g.setValue(nGreen);
152 b.setValue(nBlue);
153 }
154
155 function getRgb() {
156 return {
157 r: r.getValue(),
158 g: g.getValue(),
159 b: b.getValue()
160 };
161 }
162
163 function fixSize() {
164 r.recalculate();
165 g.recalculate();
166 b.recalculate();
167 }
168
169 window.onresize = fixSize;
170
171 fixSize();
172
173
174 </script>
175
176
177 </body>
178 </html>