~smagoun/whoopsie/whoopsie-lp1017637

<li><img src="assets/images/wrapper.png" width="200" height="200"/><div>Range wraps around the dial one or more times</div><div class="num">2</div></li>

107

<li><img src="assets/images/needle.png" width="200" height="200"/><div>Range is < one revolution. The wrap point is in the range</div><div class="num">3</div></li>

108

<li><img src="assets/images/gas.png" width="200" height="200"/><div>Range is < one revolution. No wrap point in either the range nor out of range section</div><div class="num">4</div></li>

109

<li><img src="assets/images/ship.png" width="200" height="200"/><div>Range is < one revolution. wrap point found in out of range section</div><div class="num">5</div></li>

110

</ul>

111

</div>

112

</body>

113

</html>

114

115

YUI({lang:'en', filter:'raw'}).use("dial", function(Y) {

116

117

118

119

function drawMinMaxLines(dialObj){

120

// return;

121

var min = dialObj.get('min'),

122

max = dialObj.get('max'),

123

range = max - min,

124

rangeDashNum = range / 5,

125

angMax, angMin, thisVal = min, angThis, newUl, newLi, label;

126

127

newUl = Y.Node.create('<ul class="angle-lines"></ul>')

128

dialObj._ringNode.append(newUl);

129

130

for(var i = 1; i < rangeDashNum; i++){

131

thisVal = min + ((range / rangeDashNum) * i);

132

angThis = dialObj._getAngleFromValue(thisVal);

133

newLi = Y.Node.create('<li class="range" style="-moz-transform: rotate(' + angThis + 'deg); -moz-transform-origin: center center;"></li>');

134

newUl.append(newLi);

135

136

}

137

angMin = dialObj._getAngleFromValue(dialObj.get('min'));

138

newLi = Y.Node.create('<li class="min" style="-moz-transform: rotate(' + angMin + 'deg); -moz-transform-origin: bottom center;"></li>');

139

newUl.append(newLi);

140

141

angMax = dialObj._getAngleFromValue(dialObj.get('max'));

142

newLi = Y.Node.create('<li class="max" style="-moz-transform: rotate(' + angMax + 'deg); -moz-transform-origin: bottom center;"></li>');

143

newUl.append(newLi);

144

145

146

label = Y.Node.create('<div class="min-max-label">min: ' + dialObj.get('min') + '<br>max: ' + dialObj.get('max') + '</div>');

147

dialObj._ringNode.append(label);

148

}

149

150

var dial_00 = new Y.Dial({

151

min:0,

152

max:100,

153

stepsPerRevolution:100,

154

value: 0,

155

diameter: 200,

156

decimalPlaces:0

157

});

158

dial_00.render("#dial_container1");

159

drawMinMaxLines(dial_00);

160

161

var dial_01 = new Y.Dial({

162

min:0,

163

max:200,

164

stepsPerRevolution:100,

165

value: 93,

166

diameter: 200,

167

decimalPlaces:0

168

});

169

dial_01.render("#dial_container2");

170

drawMinMaxLines(dial_01);

171

172

var dial_02 = new Y.Dial({

173

min:-40,

174

max:40,

175

// min:60,

176

// max:140,

177

stepsPerRevolution:100,

178

value: 10,

179

// value: 100,

180

diameter: 200,

181

decimalPlaces:0,

182

strings:{label:'Monkeys in barrel:', resetStr: 'Reset', tooltipHandle: 'my tool tip text'}

183

184

});

185

dial_02.render("#dial_container3");

186

drawMinMaxLines(dial_02);

187

188

var dial_03 = new Y.Dial({

189

min:0,

190

max:20,

191

stepsPerRevolution:100,

192

value: 10,

193

diameter: 200,

194

decimalPlaces:0,

195

strings:{label:'Altitude in Kilometers:', resetStr: 'Reset', tooltipHandle: 'Drag to set'}

196

197

});

198

dial_03.render("#dial_container4");

199

drawMinMaxLines(dial_03);

200

201

//////////////////////////////////////////////////////////////////

202

var dial_04 = new Y.Dial({

203

min:5,

204

max:80,

205

stepsPerRevolution:100,

206

value: 60,

207

diameter: 200,

208

decimalPlaces:0

209

});

210

dial_04.render("#dial_container5");

211

drawMinMaxLines(dial_04);

212

//////////////////////////////////////////////////////////////////

213

var dial_05 = new Y.Dial({

214

min:40,

215

max:100,

216

stepsPerRevolution:100,

217

value: 100,

218

diameter: 200,

219

decimalPlaces:0

220

});

221

dial_05.render("#dial_container6");

222

drawMinMaxLines(dial_05);

223

224

var dial_05 = new Y.Dial({

225

min:170,

226

max:200,

227

stepsPerRevolution:100,

228

value: 180,

229

diameter: 200,

230

decimalPlaces:0

231

});

232

dial_05.render("#dial_container");

233

drawMinMaxLines(dial_05);

234

235

var dial_06 = new Y.Dial({

236

min:0,

237

max:70,

238

stepsPerRevolution:100,

239

value: 20,

240

diameter: 200,

241

decimalPlaces:0

242

});

243

dial_06.render("#dial_container");

244

drawMinMaxLines(dial_06);

245

///////////////////////////////////////////////////////

246

247

248

249

250

251

252

253

254

});

255

</script>

Older »