初始化CRICS
This commit is contained in:
9
WebSite/Scripts/WeiXin/common.js
Normal file
9
WebSite/Scripts/WeiXin/common.js
Normal file
@@ -0,0 +1,9 @@
|
||||
String.prototype.trim = function () {
|
||||
return this.replace(/(^\s*)|(\s*$)/g, "");
|
||||
}
|
||||
String.prototype.ltrim = function () {
|
||||
return this.replace(/(^\s*)/g, "");
|
||||
}
|
||||
String.prototype.rtrim = function () {
|
||||
return this.replace(/(\s*$)/g, "");
|
||||
}
|
||||
554
WebSite/Scripts/WeiXin/index.js
Normal file
554
WebSite/Scripts/WeiXin/index.js
Normal file
@@ -0,0 +1,554 @@
|
||||
var dialLines = document.getElementsByClassName('diallines');
|
||||
|
||||
for (var i = 1; i < 60; i++) {
|
||||
dialLines[i] = $(dialLines[i-1]).clone()
|
||||
.insertAfter($(dialLines[i-1]));
|
||||
$(dialLines[i]).css('transform', 'rotate(' + 6 * i + 'deg)');
|
||||
}
|
||||
|
||||
function tick() {
|
||||
var date = new Date();
|
||||
var seconds = date.getSeconds();
|
||||
var minutes = date.getMinutes();
|
||||
var hours = date.getHours();
|
||||
var day = date.getDate();
|
||||
|
||||
var secAngle = seconds * 6;
|
||||
var minAngle = minutes * 6 + seconds * (360/3600);
|
||||
var hourAngle = hours * 30 + minutes * (360/720);
|
||||
|
||||
$('.sec-hand').css('transform', 'rotate(' + secAngle + 'deg)');
|
||||
$('.min-hand').css('transform', 'rotate(' + minAngle + 'deg)');
|
||||
$('.hour-hand').css('transform', 'rotate(' + hourAngle + 'deg)');
|
||||
$('.date').text(day);
|
||||
}
|
||||
|
||||
setInterval(tick, 100);
|
||||
|
||||
Vue.component("color-picker", {
|
||||
template: "#color-picker-template",
|
||||
props: ["change", "initial"],
|
||||
data: function() {
|
||||
return {
|
||||
isVisible: true,
|
||||
h: 360,
|
||||
s: 100,
|
||||
l: 100
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
color: function() {
|
||||
var hsl = hsb2hsl(parseFloat(this.h) / 360, parseFloat(this.s) / 100, parseFloat(this.l) / 100);
|
||||
var c = hsl.h + ", " + hsl.s + "%, " + hsl.l + "%";
|
||||
var s = "hsl(" + c + ")";
|
||||
this.change({
|
||||
color: s
|
||||
});
|
||||
return s;
|
||||
},
|
||||
colorString: function() {
|
||||
var c = this.h + ", " + this.s + "%, " + this.l + "%";
|
||||
return c;
|
||||
},
|
||||
gradientH: function() {
|
||||
var stops = [];
|
||||
for (var i = 0; i < 7; i++) {
|
||||
var h = i * 60;
|
||||
var hsl = hsb2hsl(parseFloat(h / 360), parseFloat(this.s) / 100, parseFloat(this.l / 100));
|
||||
var c = hsl.h + ", " + hsl.s + "%, " + hsl.l + "%";
|
||||
stops.push("hsl(" + c + ")");
|
||||
}
|
||||
return {
|
||||
backgroundImage: "linear-gradient(to right, " + stops.join(', ') + ")"
|
||||
}
|
||||
},
|
||||
gradientS: function() {
|
||||
var stops = [];
|
||||
var c;
|
||||
|
||||
var hsl = hsb2hsl(parseFloat(this.h / 360), 0, parseFloat(this.l / 100));
|
||||
c = hsl.h + ", " + hsl.s + "%, " + hsl.l + "%";
|
||||
stops.push("hsl(" + c + ")");
|
||||
|
||||
var hsl = hsb2hsl(parseFloat(this.h / 360), 1, parseFloat(this.l / 100));
|
||||
c = hsl.h + ", " + hsl.s + "%, " + hsl.l + "%";
|
||||
stops.push("hsl(" + c + ")");
|
||||
|
||||
return {
|
||||
backgroundImage: "linear-gradient(to right, " + stops.join(', ') + ")"
|
||||
}
|
||||
},
|
||||
gradientL: function() {
|
||||
var stops = [];
|
||||
var c;
|
||||
|
||||
var hsl = hsb2hsl(parseFloat(this.h / 360), 0, 0);
|
||||
c = hsl.h + ", " + hsl.s + "%, " + hsl.l + "%";
|
||||
stops.push("hsl(" + c + ")");
|
||||
|
||||
var hsl = hsb2hsl(parseFloat(this.h / 360), parseFloat(this.s / 100), 1);
|
||||
c = hsl.h + ", " + hsl.s + "%, " + hsl.l + "%";
|
||||
stops.push("hsl(" + c + ")");
|
||||
|
||||
return {
|
||||
backgroundImage: "linear-gradient(to right, " + stops.join(', ') + ")"
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show: function() {
|
||||
// this.isVisible = true;
|
||||
},
|
||||
hide: function() {
|
||||
// this.isVisible = false;
|
||||
},
|
||||
toggle: function() {
|
||||
// this.isVisible = !this.isVisible;
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
//this.h = parseInt(Math.random() * 360)
|
||||
}
|
||||
});
|
||||
|
||||
var app = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
color: ""
|
||||
},
|
||||
methods: {
|
||||
updateColor: function(event) {
|
||||
this.color = event.color;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function hsb2hsl(h, s, b) {
|
||||
var hsl = {
|
||||
h: h
|
||||
};
|
||||
hsl.l = (2 - s) * b;
|
||||
hsl.s = s * b;
|
||||
|
||||
if (hsl.l <= 1 && hsl.l > 0) {
|
||||
hsl.s /= hsl.l;
|
||||
} else {
|
||||
hsl.s /= 2 - hsl.l;
|
||||
}
|
||||
|
||||
hsl.l /= 2;
|
||||
|
||||
if (hsl.s > 1) {
|
||||
hsl.s = 1;
|
||||
}
|
||||
|
||||
if (!hsl.s > 0) hsl.s = 0
|
||||
|
||||
hsl.h *= 360;
|
||||
hsl.s *= 100;
|
||||
hsl.l *= 100;
|
||||
|
||||
return hsl;
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
/*
|
||||
var qs = (el = "") => document.querySelector(el);
|
||||
var fromTo = (from, to, prgrs = 0) => from + (to - from) * prgrs;
|
||||
var getCenter = (line = {}) => {
|
||||
return {
|
||||
x: (+line.getAttribute("x1") + +line.getAttribute("x2")) / 2,
|
||||
y: (+line.getAttribute("y1") + +line.getAttribute("y2")) / 2
|
||||
}
|
||||
};
|
||||
var getScalePoint = (obj = {}, onScene = true) => {
|
||||
if (!onScene) {
|
||||
let svgRect = obj.getBBox();
|
||||
return {
|
||||
x: svgRect.x + svgRect.width / 2,
|
||||
y: svgRect.y + svgRect.height / 2
|
||||
}
|
||||
}
|
||||
let rect = obj.getBoundingClientRect();
|
||||
return {
|
||||
x: rect.width / 2,
|
||||
y: rect.height / 2
|
||||
}
|
||||
};
|
||||
|
||||
var volObj = {
|
||||
speakB: qs("#speakB"),
|
||||
arcBigB: qs("#arcBigB"),
|
||||
arcSmB: qs("#arcSmB"),
|
||||
|
||||
speakF: qs("#speakF"),
|
||||
arcBigF: qs("#arcBigF"),
|
||||
arcSmF: qs("#arcSmF"),
|
||||
|
||||
crossLtRb: qs("#crossLtRb"),
|
||||
crossLbRt: qs("#crossLbRt"),
|
||||
|
||||
ctrlCirce: qs("#ctrlCirce"),
|
||||
ctrlLineF: qs("#ctrlLineF"),
|
||||
ctrlLineB: qs("#ctrlLineB")
|
||||
};
|
||||
|
||||
var pathLen = {
|
||||
arcBigLen: volObj.arcBigF.getTotalLength(),
|
||||
arcSmLen: volObj.arcSmF.getTotalLength(),
|
||||
speakLen: volObj.speakF.getTotalLength()
|
||||
};
|
||||
|
||||
var transforms = {
|
||||
translate3D: function (x = 0, y = 0, z = 0, el = "px") {
|
||||
return `translate3D(${x}${el}, ${y}${el}, ${z}${el})`;
|
||||
},
|
||||
|
||||
translate: function (x = 0, y = 0, el = "px") {
|
||||
return `translate(${x}${el}, ${y}${el})`;
|
||||
},
|
||||
|
||||
rotate3d: function (x = 0, y = 0, z = 0, deg = 0) {
|
||||
return `rotate3d(${x}, ${y}, ${z}, ${deg}deg)`;
|
||||
},
|
||||
|
||||
rotate: function (deg = 0) {
|
||||
return `rotate(${deg}deg)`;
|
||||
},
|
||||
|
||||
scale: function (x = 1, y = 1) {
|
||||
return `scale(${x}, ${y})`;
|
||||
},
|
||||
|
||||
perspective: function (val = 0, el = "px") {
|
||||
return `perspective(${val}${el})`;
|
||||
}
|
||||
};
|
||||
|
||||
var easing = {
|
||||
inCubic: function (t, b, c, d) {
|
||||
var ts = (t /= d) * t;
|
||||
var tc = ts * t;
|
||||
return b + c * (1.7 * tc * ts - 2.05 * ts * ts + 1.5 * tc - 0.2 * ts + 0.05 * t);
|
||||
},
|
||||
|
||||
outElastic: function (t, b, c, d) {
|
||||
var ts = (t /= d) * t;
|
||||
var tc = ts * t;
|
||||
return b + c * (33 * tc * ts + -106 * ts * ts + 126 * tc + -67 * ts + 15 * t);
|
||||
},
|
||||
|
||||
customSin: function (t, b, c, d) {
|
||||
var ts = (t /= d) * t;
|
||||
var tc = ts * t;
|
||||
return b + c * (81 * tc * ts + -210 * ts * ts + 190 * tc + -70 * ts + 10 * t);
|
||||
}
|
||||
};
|
||||
|
||||
var play = {
|
||||
dx: 1 / 5,
|
||||
ds: 0.03,
|
||||
flag: true,
|
||||
step: 0,
|
||||
speed: 5,
|
||||
|
||||
curPosBig: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
scale: 1
|
||||
},
|
||||
|
||||
curPosSm: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
scale: 1
|
||||
},
|
||||
|
||||
curPos: 1,
|
||||
|
||||
off: false,
|
||||
offCurStep: 100,
|
||||
offMaxStep: 100,
|
||||
offSpeed: 2,
|
||||
offRefresh: function () {
|
||||
this.offCurStep = this.offMaxStep;
|
||||
this.off = true;
|
||||
},
|
||||
|
||||
on: false,
|
||||
onCurStep: 0,
|
||||
onMaxStep: 20,
|
||||
onSpeed: 2,
|
||||
onRefresh: function () {
|
||||
this.off = false;
|
||||
this.onCurStep = 0;
|
||||
this.on = true;
|
||||
},
|
||||
|
||||
pointLbRt: getCenter(volObj.crossLbRt),
|
||||
pointLtRb: getCenter(volObj.crossLtRb),
|
||||
|
||||
animation: function () {
|
||||
if (this.off) { // animation when volume became 0
|
||||
[volObj.arcBigB, volObj.arcBigF, volObj.arcSmB, volObj.arcSmF].forEach((el) => {
|
||||
el.setAttribute("visibility", "hidden");
|
||||
});
|
||||
[volObj.crossLbRt, volObj.crossLtRb].forEach((el) => {
|
||||
el.setAttribute("visibility", "visible");
|
||||
});
|
||||
|
||||
let len = pathLen.speakLen;
|
||||
let step1 = 20;
|
||||
let step2 = this.offMaxStep - step1;
|
||||
let backLen = 0.7;
|
||||
|
||||
if (this.offCurStep >= this.offMaxStep - step1) {
|
||||
let progress = (step1 + this.offCurStep - this.offMaxStep) / step1;
|
||||
let progressB = fromTo(1, backLen, 1 - progress);
|
||||
volObj.speakF.setAttribute("stroke-dasharray", len * progress + "," + len * 1.05);
|
||||
volObj.speakF.setAttribute("stroke-dashoffset", -len * (1 - progress) / 2 + "");
|
||||
volObj.speakB.setAttribute("stroke-dasharray", len * progressB + "," + len * 1.05);
|
||||
volObj.speakB.setAttribute("stroke-dashoffset", -len * (1 - progressB) / 2 + "");
|
||||
}
|
||||
|
||||
if (this.offCurStep < step2 && this.offCurStep >= step2 - step1) {
|
||||
let progress = 1 - (this.offCurStep - step2 + step1) / step1;
|
||||
let progressB = fromTo(backLen, 1, progress);
|
||||
volObj.speakB.setAttribute("stroke-dasharray", len * progressB + "," + len * 1.05);
|
||||
volObj.speakB.setAttribute("stroke-dashoffset", -len * (1 - progressB) / 2 + "");
|
||||
}
|
||||
|
||||
if (this.offCurStep < step2 && this.offCurStep >= 0) {
|
||||
volObj.speakF.setAttribute("visibility", "hidden");
|
||||
let progress = this.offCurStep / step2;
|
||||
[volObj.crossLbRt, volObj.crossLtRb].forEach((el, index) => {
|
||||
let scale = easing.outElastic(1 - progress, 0, 1, 1);
|
||||
let dx = index == 0 ?
|
||||
easing.customSin(1 - progress, -3, 3, 1) :
|
||||
easing.customSin(1 - progress, -2, 2, 1);
|
||||
let dy = index == 0 ?
|
||||
easing.customSin(1 - progress, -2, 2, 1) :
|
||||
easing.customSin(1 - progress, 2, -2, 1);
|
||||
let x = -this.pointLbRt.x * (scale - 1) + dx;
|
||||
let y = -this.pointLbRt.y * (scale - 1) + dy;
|
||||
el.setAttribute("transform",
|
||||
transforms.translate(x, y, "") +
|
||||
transforms.scale(scale, scale));
|
||||
});
|
||||
}
|
||||
this.offCurStep += -this.offSpeed;
|
||||
}
|
||||
|
||||
else {
|
||||
if (this.on) {
|
||||
[volObj.speakF, volObj.arcBigB, volObj.arcSmB, volObj.arcSmF].forEach((el) => {
|
||||
el.setAttribute("visibility", "visible");
|
||||
});
|
||||
[volObj.crossLbRt, volObj.crossLtRb].forEach((el) => {
|
||||
el.setAttribute("visibility", "hidden");
|
||||
el.setAttribute("transform", "scale(0)");
|
||||
});
|
||||
let len = pathLen.speakLen;
|
||||
let progress = this.onCurStep / this.onMaxStep;
|
||||
volObj.speakF.setAttribute("stroke-dasharray", len * progress + "," + len * 1.05);
|
||||
volObj.speakF.setAttribute("stroke-dashoffset", -len * (1 - progress) / 2 + "");
|
||||
this.onCurStep += this.onSpeed;
|
||||
}
|
||||
|
||||
let dxBig, dxSm, sclFactB, sclFactSm;
|
||||
if (this.step >= this.speed) {
|
||||
this.flag = !this.flag;
|
||||
this.step = 0;
|
||||
}
|
||||
let progress = this.step / this.speed;
|
||||
let amplitudeB = 1 - easing.inCubic(1 - this.curPos, 0, 1, 0.5);
|
||||
let amplitudeS = 1 - easing.inCubic(1 - this.curPos, 0, 1, 1);
|
||||
|
||||
if (this.curPos < 0.5) amplitudeB = 0;
|
||||
if (amplitudeS <= 0 || !amplitudeS) amplitudeS = 0;
|
||||
|
||||
if (this.flag) {
|
||||
dxBig = fromTo(0, this.dx * 3, progress);
|
||||
dxSm = fromTo(0, -this.dx * 2, progress);
|
||||
sclFactB = fromTo(0, this.ds, progress);
|
||||
sclFactSm = fromTo(0, -this.ds, progress);
|
||||
}
|
||||
else {
|
||||
dxBig = fromTo(this.dx * 3, 0, progress);
|
||||
dxSm = fromTo(-this.dx * 2, 0, progress);
|
||||
sclFactB = fromTo(this.ds, 0, progress);
|
||||
sclFactSm = fromTo(-this.ds, 0, progress);
|
||||
}
|
||||
|
||||
[volObj.arcBigF, volObj.arcBigB].forEach((el) => {
|
||||
let scale = this.curPosBig.scale + sclFactB * amplitudeB;
|
||||
let y = -drag.pointBig.y * (scale - 1) * 1.5;
|
||||
el.setAttribute("transform",
|
||||
transforms.translate(this.curPosBig.x + dxBig * amplitudeB, y, "")
|
||||
+ transforms.scale(scale, scale)
|
||||
);
|
||||
});
|
||||
|
||||
[volObj.arcSmF, volObj.arcSmB].forEach((el) => {
|
||||
let scale = this.curPosSm.scale + sclFactSm * amplitudeS;
|
||||
let y = -drag.pointSm.y * (scale - 1) * 3;
|
||||
el.setAttribute("transform",
|
||||
transforms.translate(this.curPosSm.x + dxSm * amplitudeS, y, "")
|
||||
+ transforms.scale(scale, scale)
|
||||
);
|
||||
});
|
||||
this.step++;
|
||||
}
|
||||
requestAnimationFrame(this.animation.bind(play));
|
||||
}
|
||||
};
|
||||
|
||||
requestAnimationFrame(play.animation.bind(play));
|
||||
|
||||
var drag = {
|
||||
dx: 0,
|
||||
maxX: +volObj.ctrlCirce.getAttribute("cx"),
|
||||
minX: +volObj.ctrlLineF.getAttribute("x1"),
|
||||
curCx: +volObj.ctrlCirce.getAttribute("cx"),
|
||||
|
||||
pointBig: getScalePoint(volObj.arcBigF),
|
||||
pointSm: getScalePoint(volObj.arcSmF),
|
||||
|
||||
interact: false,
|
||||
|
||||
animateDrag: function () {
|
||||
this.curCx += this.dx;
|
||||
let cx = this.curCx;
|
||||
|
||||
let smLen = pathLen.arcSmLen;
|
||||
let bgLen = pathLen.arcBigLen;
|
||||
|
||||
if (cx > this.maxX) { cx = this.maxX; }
|
||||
if (cx < this.minX) { cx = this.minX; }
|
||||
|
||||
let progress = (cx - this.minX) / (this.maxX - this.minX);
|
||||
play.curPos = progress;
|
||||
|
||||
volObj.ctrlCirce.setAttribute("cx", cx);
|
||||
volObj.ctrlLineF.setAttribute("x2", cx);
|
||||
|
||||
let scaleFactor = fromTo(1, 0.85, 1 - progress);
|
||||
let scaleDxBig = fromTo(0, -3, 1 - progress);
|
||||
let scaleDxSm = fromTo(0, -1, 1 - progress);
|
||||
|
||||
[volObj.arcBigF, volObj.arcBigB].forEach((el) => {
|
||||
play.curPosBig.x = -this.pointBig.x * (scaleFactor - 1) + scaleDxBig;
|
||||
play.curPosBig.y = -this.pointBig.y * (scaleFactor - 1) * 1.5;
|
||||
play.curPosBig.scale = scaleFactor;
|
||||
el.setAttribute("transform",
|
||||
transforms.translate(play.curPosBig.x, play.curPosBig.y, "")
|
||||
+ transforms.scale(scaleFactor, scaleFactor)
|
||||
);
|
||||
});
|
||||
|
||||
[volObj.arcSmF, volObj.arcSmB].forEach((el) => {
|
||||
play.curPosSm.x = -this.pointSm.x * (scaleFactor - 1) + scaleDxSm;
|
||||
play.curPosSm.y = -this.pointSm.y * (scaleFactor - 1) * 3;
|
||||
play.curPosSm.scale = scaleFactor;
|
||||
el.setAttribute("transform",
|
||||
transforms.translate(play.curPosSm.x, play.curPosSm.y, "")
|
||||
+ transforms.scale(scaleFactor, scaleFactor)
|
||||
);
|
||||
});
|
||||
|
||||
if (progress > 0.5) {
|
||||
if (play.off) { play.onRefresh(); }
|
||||
let prgForBig = fromTo(1, -1, 1 - progress);
|
||||
volObj.arcBigF.setAttribute("visibility", "visible");
|
||||
volObj.arcSmF.setAttribute("visibility", "visible");
|
||||
volObj.arcBigF.setAttribute("stroke-dasharray", bgLen * prgForBig + "," + bgLen * 1.05);
|
||||
volObj.arcBigF.setAttribute("stroke-dashoffset", -bgLen * (1 - prgForBig) / 2 + "");
|
||||
volObj.arcSmF.setAttribute("stroke-dasharray", smLen + "");
|
||||
volObj.arcSmF.setAttribute("stroke-dashoffset", "0");
|
||||
}
|
||||
|
||||
if (progress <= 0.5 && progress > 0) {
|
||||
if (play.off) { play.onRefresh(); }
|
||||
let prgForSm = fromTo(1, 0, 1 - progress * 2);
|
||||
volObj.arcBigF.setAttribute("visibility", "hidden");
|
||||
volObj.arcSmF.setAttribute("visibility", "visible");
|
||||
volObj.arcSmF.setAttribute("stroke-dasharray", smLen * prgForSm + "," + smLen * 1.05);
|
||||
volObj.arcSmF.setAttribute("stroke-dashoffset", -smLen * (1 - prgForSm) / 2 + "");
|
||||
}
|
||||
|
||||
if (progress <= 0) {
|
||||
volObj.arcSmF.setAttribute("visibility", "hidden");
|
||||
if (play.off == false) { play.offRefresh(); }
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$(document).on("mousedown touchstart", "#ctrlCirce, #ctrlLineB, #ctrlLineF", function (e) {
|
||||
let startX = e.pageX || e.originalEvent.touches[0].pageX;
|
||||
e.preventDefault();
|
||||
drag.interact = true;
|
||||
|
||||
if (this == volObj.ctrlLineB || this == volObj.ctrlLineF) {
|
||||
let rect = volObj.ctrlCirce.getBoundingClientRect();
|
||||
let center = (rect.left + rect.right) / 2.0;
|
||||
drag.dx = startX - center;
|
||||
drag.animateDrag();
|
||||
}
|
||||
|
||||
$(document).on("mousemove touchmove", function (e) {
|
||||
e.preventDefault();
|
||||
let curX = e.pageX || e.originalEvent.touches[0].pageX;
|
||||
drag.dx = curX - startX;
|
||||
startX = curX;
|
||||
drag.animateDrag();
|
||||
});
|
||||
|
||||
$(document).on("mouseup touchend", function (e) {
|
||||
if (drag.curCx < drag.minX) drag.curCx = drag.minX;
|
||||
if (drag.curCx > drag.maxX) drag.curCx = drag.maxX;
|
||||
$(document).off("mousemove touchmove mouseup touchend");
|
||||
});
|
||||
});
|
||||
|
||||
let memory = {
|
||||
flag: true,
|
||||
last: 0
|
||||
};
|
||||
|
||||
$(document).on("mousedown touchstart", ".speaker", function (e) {
|
||||
e.preventDefault();
|
||||
drag.interact = true;
|
||||
drag.dx = 0;
|
||||
if (memory.flag) {
|
||||
memory.flag = false;
|
||||
memory.last = drag.curCx;
|
||||
drag.curCx = 0;
|
||||
drag.animateDrag();
|
||||
}
|
||||
else {
|
||||
memory.flag = true;
|
||||
drag.curCx = memory.last;
|
||||
drag.animateDrag();
|
||||
}
|
||||
});*/
|
||||
|
||||
// 2much animations in feed to do this ↓ smooth
|
||||
// (function pevAnimation() {
|
||||
// for (let i = drag.maxX; i > -1; i -= 5) {
|
||||
// setTimeout(() => {
|
||||
// if (!drag.interact) {
|
||||
// drag.curCx = i;
|
||||
// drag.animateDrag();
|
||||
// }
|
||||
// }, 300 + drag.maxX - i);
|
||||
// }
|
||||
// for (let i = 50; i <= drag.maxX; i += 3) {
|
||||
// setTimeout(() => {
|
||||
// if (!drag.interact) {
|
||||
// drag.curCx = i;
|
||||
// drag.animateDrag();
|
||||
// }
|
||||
// }, 1400 + i);
|
||||
// }
|
||||
// })();
|
||||
});
|
||||
8
WebSite/Scripts/WeiXin/iro.min.js
vendored
Normal file
8
WebSite/Scripts/WeiXin/iro.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
4
WebSite/Scripts/WeiXin/jquery.min.js
vendored
Normal file
4
WebSite/Scripts/WeiXin/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
26
WebSite/Scripts/WeiXin/tip.js
Normal file
26
WebSite/Scripts/WeiXin/tip.js
Normal file
@@ -0,0 +1,26 @@
|
||||
/* 对浏览器的UserAgent进行正则匹配,不含有微信独有标识的则为其他浏览器
|
||||
var useragent = navigator.userAgent;
|
||||
if (useragent.match(/MicroMessenger/i) != 'MicroMessenger') {
|
||||
// 这里警告框会阻塞当前页面继续加载
|
||||
alert('您好,请通过微信访问!');
|
||||
// 以下代码是用javascript强行关闭当前页面
|
||||
var opened = window.open('about:blank', '_self');
|
||||
opened.opener = null;
|
||||
opened.close();
|
||||
}*/
|
||||
//提示消息
|
||||
function showTip(msg) {
|
||||
$('<div class="weixin-tip"></div>').appendTo(document.body).html(msg)
|
||||
.width(function () {
|
||||
var left = (($(window).width() - $(this).outerWidth()) / 2);
|
||||
var top = 50;
|
||||
$(this).css({ left: left + 'px', top: top + 'px' });
|
||||
})
|
||||
.fadeIn('fast', function () {
|
||||
$(this).css({ display: 'inline-block' });
|
||||
})
|
||||
.delay(2000)
|
||||
.fadeOut('normal', function () {
|
||||
$(this).remove();
|
||||
});
|
||||
}
|
||||
212
WebSite/Scripts/WeiXin/touch.js
Normal file
212
WebSite/Scripts/WeiXin/touch.js
Normal file
@@ -0,0 +1,212 @@
|
||||
// Zepto.js
|
||||
// (c) 2010-2016 Thomas Fuchs
|
||||
// Zepto.js may be freely distributed under the MIT license.
|
||||
|
||||
;(function($){
|
||||
var touch = {},
|
||||
touchTimeout, tapTimeout, swipeTimeout, longTapTimeout,
|
||||
longTapDelay = 750,
|
||||
gesture,
|
||||
down, up, move,
|
||||
eventMap,
|
||||
initialized = false
|
||||
|
||||
function swipeDirection(x1, x2, y1, y2) {
|
||||
return Math.abs(x1 - x2) >=
|
||||
Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
|
||||
}
|
||||
|
||||
function longTap() {
|
||||
longTapTimeout = null
|
||||
if (touch.last) {
|
||||
touch.el.trigger('longTap')
|
||||
touch = {}
|
||||
}
|
||||
}
|
||||
|
||||
function cancelLongTap() {
|
||||
if (longTapTimeout) clearTimeout(longTapTimeout)
|
||||
longTapTimeout = null
|
||||
}
|
||||
|
||||
function cancelAll() {
|
||||
if (touchTimeout) clearTimeout(touchTimeout)
|
||||
if (tapTimeout) clearTimeout(tapTimeout)
|
||||
if (swipeTimeout) clearTimeout(swipeTimeout)
|
||||
if (longTapTimeout) clearTimeout(longTapTimeout)
|
||||
touchTimeout = tapTimeout = swipeTimeout = longTapTimeout = null
|
||||
touch = {}
|
||||
}
|
||||
|
||||
function isPrimaryTouch(event){
|
||||
return (event.pointerType == 'touch' ||
|
||||
event.pointerType == event.MSPOINTER_TYPE_TOUCH)
|
||||
&& event.isPrimary
|
||||
}
|
||||
|
||||
function isPointerEventType(e, type){
|
||||
return (e.type == 'pointer'+type ||
|
||||
e.type.toLowerCase() == 'mspointer'+type)
|
||||
}
|
||||
|
||||
// helper function for tests, so they check for different APIs
|
||||
function unregisterTouchEvents(){
|
||||
if (!initialized) return
|
||||
$(document).off(eventMap.down, down)
|
||||
.off(eventMap.up, up)
|
||||
.off(eventMap.move, move)
|
||||
.off(eventMap.cancel, cancelAll)
|
||||
$(window).off('scroll', cancelAll)
|
||||
cancelAll()
|
||||
initialized = false
|
||||
}
|
||||
|
||||
function setup(__eventMap){
|
||||
var now, delta, deltaX = 0, deltaY = 0, firstTouch, _isPointerType
|
||||
|
||||
unregisterTouchEvents()
|
||||
|
||||
eventMap = (__eventMap && ('down' in __eventMap)) ? __eventMap :
|
||||
('ontouchstart' in document ?
|
||||
{ 'down': 'touchstart', 'up': 'touchend',
|
||||
'move': 'touchmove', 'cancel': 'touchcancel' } :
|
||||
'onpointerdown' in document ?
|
||||
{ 'down': 'pointerdown', 'up': 'pointerup',
|
||||
'move': 'pointermove', 'cancel': 'pointercancel' } :
|
||||
'onmspointerdown' in document ?
|
||||
{ 'down': 'MSPointerDown', 'up': 'MSPointerUp',
|
||||
'move': 'MSPointerMove', 'cancel': 'MSPointerCancel' } : false)
|
||||
|
||||
// No API availables for touch events
|
||||
if (!eventMap) return
|
||||
|
||||
if ('MSGesture' in window) {
|
||||
gesture = new MSGesture()
|
||||
gesture.target = document.body
|
||||
|
||||
$(document)
|
||||
.bind('MSGestureEnd', function(e){
|
||||
var swipeDirectionFromVelocity =
|
||||
e.velocityX > 1 ? 'Right' : e.velocityX < -1 ? 'Left' : e.velocityY > 1 ? 'Down' : e.velocityY < -1 ? 'Up' : null
|
||||
if (swipeDirectionFromVelocity) {
|
||||
touch.el.trigger('swipe')
|
||||
touch.el.trigger('swipe'+ swipeDirectionFromVelocity)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
down = function(e){
|
||||
if((_isPointerType = isPointerEventType(e, 'down')) &&
|
||||
!isPrimaryTouch(e)) return
|
||||
firstTouch = _isPointerType ? e : e.touches[0]
|
||||
if (e.touches && e.touches.length === 1 && touch.x2) {
|
||||
// Clear out touch movement data if we have it sticking around
|
||||
// This can occur if touchcancel doesn't fire due to preventDefault, etc.
|
||||
touch.x2 = undefined
|
||||
touch.y2 = undefined
|
||||
}
|
||||
now = Date.now()
|
||||
delta = now - (touch.last || now)
|
||||
touch.el = $('tagName' in firstTouch.target ?
|
||||
firstTouch.target : firstTouch.target.parentNode)
|
||||
touchTimeout && clearTimeout(touchTimeout)
|
||||
touch.x1 = firstTouch.pageX
|
||||
touch.y1 = firstTouch.pageY
|
||||
if (delta > 0 && delta <= 250) touch.isDoubleTap = true
|
||||
touch.last = now
|
||||
longTapTimeout = setTimeout(longTap, longTapDelay)
|
||||
// adds the current touch contact for IE gesture recognition
|
||||
if (gesture && _isPointerType) gesture.addPointer(e.pointerId)
|
||||
}
|
||||
|
||||
move = function(e){
|
||||
if((_isPointerType = isPointerEventType(e, 'move')) &&
|
||||
!isPrimaryTouch(e)) return
|
||||
firstTouch = _isPointerType ? e : e.touches[0]
|
||||
cancelLongTap()
|
||||
touch.x2 = firstTouch.pageX
|
||||
touch.y2 = firstTouch.pageY
|
||||
|
||||
deltaX += Math.abs(touch.x1 - touch.x2)
|
||||
deltaY += Math.abs(touch.y1 - touch.y2)
|
||||
}
|
||||
|
||||
up = function(e){
|
||||
if((_isPointerType = isPointerEventType(e, 'up')) &&
|
||||
!isPrimaryTouch(e)) return
|
||||
cancelLongTap()
|
||||
|
||||
// swipe
|
||||
if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) ||
|
||||
(touch.y2 && Math.abs(touch.y1 - touch.y2) > 30))
|
||||
|
||||
swipeTimeout = setTimeout(function() {
|
||||
if (touch.el){
|
||||
touch.el.trigger('swipe')
|
||||
touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))
|
||||
}
|
||||
touch = {}
|
||||
}, 0)
|
||||
|
||||
// normal tap
|
||||
else if ('last' in touch)
|
||||
// don't fire tap when delta position changed by more than 30 pixels,
|
||||
// for instance when moving to a point and back to origin
|
||||
if (deltaX < 30 && deltaY < 30) {
|
||||
// delay by one tick so we can cancel the 'tap' event if 'scroll' fires
|
||||
// ('tap' fires before 'scroll')
|
||||
tapTimeout = setTimeout(function() {
|
||||
|
||||
// trigger universal 'tap' with the option to cancelTouch()
|
||||
// (cancelTouch cancels processing of single vs double taps for faster 'tap' response)
|
||||
var event = $.Event('tap')
|
||||
event.cancelTouch = cancelAll
|
||||
// [by paper] fix -> "TypeError: 'undefined' is not an object (evaluating 'touch.el.trigger'), when double tap
|
||||
if (touch.el) touch.el.trigger(event)
|
||||
|
||||
// trigger double tap immediately
|
||||
if (touch.isDoubleTap) {
|
||||
if (touch.el) touch.el.trigger('doubleTap')
|
||||
touch = {}
|
||||
}
|
||||
|
||||
// trigger single tap after 250ms of inactivity
|
||||
else {
|
||||
touchTimeout = setTimeout(function(){
|
||||
touchTimeout = null
|
||||
if (touch.el) touch.el.trigger('singleTap')
|
||||
touch = {}
|
||||
}, 250)
|
||||
}
|
||||
}, 0)
|
||||
} else {
|
||||
touch = {}
|
||||
}
|
||||
deltaX = deltaY = 0
|
||||
}
|
||||
|
||||
$(document).on(eventMap.up, up)
|
||||
.on(eventMap.down, down)
|
||||
.on(eventMap.move, move)
|
||||
|
||||
// when the browser window loses focus,
|
||||
// for example when a modal dialog is shown,
|
||||
// cancel all ongoing events
|
||||
$(document).on(eventMap.cancel, cancelAll)
|
||||
|
||||
// scrolling the window indicates intention of the user
|
||||
// to scroll, not tap or swipe, so cancel all ongoing events
|
||||
$(window).on('scroll', cancelAll)
|
||||
|
||||
initialized = true
|
||||
}
|
||||
|
||||
;['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown',
|
||||
'doubleTap', 'tap', 'singleTap', 'longTap'].forEach(function(eventName){
|
||||
$.fn[eventName] = function(callback){ return this.on(eventName, callback) }
|
||||
})
|
||||
|
||||
$.touch = { setup: setup }
|
||||
|
||||
$(document).ready(setup)
|
||||
})(Zepto)
|
||||
584
WebSite/Scripts/WeiXin/wx.js
Normal file
584
WebSite/Scripts/WeiXin/wx.js
Normal file
@@ -0,0 +1,584 @@
|
||||
//Create a new color picker instance(创建色盘)
|
||||
var colorPicker = new iro.ColorPicker(".colorPicker", {
|
||||
width: 280,
|
||||
color: "rgb(255, 255, 255)",
|
||||
borderWidth: 1,
|
||||
borderColor: "#fff"
|
||||
});
|
||||
var isControl = false; //能否控制(是否需要在取电状态下控制)
|
||||
//控制设备
|
||||
function setDevice(hostID, modalAddress, status, brightness, temperature, fanSpeed, mode, valve) {
|
||||
$.ajax({
|
||||
url: '/WX/SetDevice/',
|
||||
type: "POST",
|
||||
dataType: "JSON",
|
||||
data: { hostID: hostID, modalAddress: modalAddress, status: status, brightness: brightness, temperature: temperature, fanSpeed: fanSpeed, mode: mode, valve: valve },
|
||||
success: function (r) {
|
||||
showTip(r.Result);
|
||||
}
|
||||
});
|
||||
}
|
||||
//服务控制
|
||||
function serviceClick(btn) {
|
||||
if ($(btn).attr("modal") != "004000001" && !isControl) { showTip(lang.WXTakePowerFlag); return; }
|
||||
var status = 1;
|
||||
if ($(btn).hasClass("active") == 1) {
|
||||
status = 2;
|
||||
$(btn).removeClass("active");
|
||||
} else {
|
||||
status = 1;
|
||||
$(btn).addClass("active");
|
||||
}
|
||||
setDevice($(btn).attr("hostID"), $(btn).attr("modal"), status, status == 1 ? 100 : 0, 0, 0, 0, 0);
|
||||
}
|
||||
//场景控制
|
||||
function sceneClick(btn) {
|
||||
if (!isControl) { showTip(lang.WXTakePowerFlag); return; }
|
||||
var takeInverse = false;
|
||||
if ($(btn).hasClass("active") == 1) {
|
||||
if ($(btn).attr("takeInverse") == 'false') {
|
||||
showTip(lang.SceneNotTakeInverseIssue); return;
|
||||
} else {
|
||||
takeInverse = true;
|
||||
$(btn).removeClass("active");
|
||||
}
|
||||
} else {
|
||||
$(btn).addClass("active").siblings().removeClass("active");
|
||||
}
|
||||
$.ajax({
|
||||
url: '/WX/SetScene/',
|
||||
type: "POST",
|
||||
dataType: "JSON",
|
||||
data: { hostID: $(btn).attr("hostID"), sceneID: $(btn).attr("sceneID"), takeInverse: takeInverse },
|
||||
success: function (r) {
|
||||
showTip(r.Result);
|
||||
}
|
||||
});
|
||||
}
|
||||
//房控控制
|
||||
function relayClick(btn) {
|
||||
if (!isControl) { showTip(lang.WXTakePowerFlag); return; }
|
||||
var status = 1;
|
||||
if ($(btn).hasClass("active") == 1) {
|
||||
status = 2;
|
||||
$(btn).removeClass("active");
|
||||
} else {
|
||||
status = 1;
|
||||
$(btn).addClass("active");
|
||||
}
|
||||
setDevice($(btn).attr("hostID"), $(btn).attr("modal"), status, status == 1 ? 100 : 0, 0, 0, 0, 0);
|
||||
}
|
||||
//调光控制
|
||||
function dimmerClick(btn) {
|
||||
$(btn).addClass("active").siblings().removeClass("active");
|
||||
$('#brightness').text($(btn).attr("brightness"));
|
||||
$('#brightness1').css("top", (100 - $(btn).attr("brightness")) + "%");
|
||||
$('#brightness2').val($(btn).attr("brightness"));
|
||||
}
|
||||
//颜色变化事件
|
||||
function onColorChange(c, changes) {
|
||||
var obj = $("#color button[class='tab active']")[0];
|
||||
if (obj == null) { showTip(lang.NoDeviceControl); return; }
|
||||
$("#colorValue").html("<br />" + c.rgbString);
|
||||
var s = c.rgbString.replace(/rgb\((\d{1,3})\,\s*(\d{1,3})\,\s*(\d{1,3})\)/, "$1,$2,$3");
|
||||
$(obj).attr("brightness1", parseInt((100 * s.split(',')[0]) / 255));
|
||||
$(obj).attr("brightness2", parseInt((100 * s.split(',')[1]) / 255));
|
||||
$(obj).attr("brightness3", parseInt((100 * s.split(',')[2]) / 255));
|
||||
$.ajax({
|
||||
url: '/WX/SetTiaoseDevice/',
|
||||
type: "POST",
|
||||
dataType: "JSON",
|
||||
data: { hostID: $(obj).attr("hostID"), modalAddress: $(obj).attr("modal"), modalAddress1: $(obj).attr("modal1"), brightness1: $(obj).attr("brightness1"), modalAddress2: $(obj).attr("modal2"), brightness2: $(obj).attr("brightness2"), modalAddress3: $(obj).attr("modal3"), brightness3: $(obj).attr("brightness3") },
|
||||
success: function (r) {
|
||||
showTip(r.Result);
|
||||
}
|
||||
});
|
||||
}
|
||||
//调色控制
|
||||
function colorClick(btn) {
|
||||
$(btn).addClass("active").siblings().removeClass("active");
|
||||
colorPicker.off('input:end', onColorChange);
|
||||
if ($(btn).attr("brightness1") == "0" && $(btn).attr("brightness2") == "0" && $(btn).attr("brightness3") == "0") {
|
||||
colorPicker.color.rgbString = "rgb(255,255,255)";
|
||||
} else {
|
||||
colorPicker.color.rgbString = "rgb("
|
||||
+ parseInt(parseInt($(btn).attr("brightness1")) * 255 / 100) + ", "
|
||||
+ parseInt(parseInt($(btn).attr("brightness2")) * 255 / 100) + ", "
|
||||
+ parseInt(parseInt($(btn).attr("brightness3")) * 255 / 100) + ")";
|
||||
}
|
||||
colorPicker.on('input:end', onColorChange);
|
||||
}
|
||||
//空调控制
|
||||
function airClick(btn) {
|
||||
$(btn).addClass("active").siblings().removeClass("active");
|
||||
$('#settingTemp').text($(btn).attr("settingTemp")); //设定温度赋值
|
||||
$('#settingTemp1').css("top", (200 - ($(btn).attr("settingTemp") * 6.25)) + "%");
|
||||
if ($(btn).attr("status") == 1) {
|
||||
$('#power').addClass("active"); //开关选中
|
||||
$('#power').html(lang.On);
|
||||
} else {
|
||||
$('#power').removeClass("active");
|
||||
$('#power').html(lang.Off);
|
||||
}
|
||||
$('#mode button').removeClass("active");
|
||||
$($('#mode button')[$(btn).attr("mode") - 1]).addClass("active"); //模式选中
|
||||
$('#fanSpeed button').removeClass("active");
|
||||
$($('#fanSpeed button')[$(btn).attr("fanSpeed") - 1]).addClass("active"); //风速选中
|
||||
}
|
||||
//窗帘控制
|
||||
function curtainClick(btn) {
|
||||
$(btn).addClass("active").siblings().removeClass("active");
|
||||
if ($(btn).attr("status") == 1) {
|
||||
$('#curtainStatus').addClass("close");
|
||||
} else {
|
||||
$('#curtainStatus').removeClass("close");
|
||||
}
|
||||
}
|
||||
//电视控制
|
||||
function tvClick(btn) {
|
||||
$(btn).addClass("active").siblings().removeClass("active");
|
||||
}
|
||||
//背景音乐控制
|
||||
function musicClick(btn) {
|
||||
$(btn).addClass("active").siblings().removeClass("active");
|
||||
$("#musicVolume").html($(btn).attr("brightness"));
|
||||
if (parseInt($(btn).attr("mode")) == 2) {
|
||||
$("#musicEqua").css("animation-play-state", "paused");
|
||||
$('#musicStatus').attr("mode", 2);
|
||||
$('#musicStatus').html("<img src='/Images/weixin2/play.svg' class='play' alt=''/>");
|
||||
} else {
|
||||
$("#musicEqua").css("animation-play-state", "running");
|
||||
$('#musicStatus').attr("mode", 1);
|
||||
$('#musicStatus').html("<img src='/Images/weixin2/pause.svg' class='pause' alt=''/>");
|
||||
}
|
||||
}
|
||||
//脚本初始化
|
||||
$(function () {
|
||||
//获取并绑定数据
|
||||
function getWXData(roomNumber, code, takePower) {
|
||||
if (takePower == "True") {
|
||||
takePower = true;
|
||||
} else {
|
||||
takePower = false;
|
||||
}
|
||||
$.ajax({
|
||||
url: '/WX/GetWXData/',
|
||||
type: "POST",
|
||||
dataType: "JSON",
|
||||
data: { roomNumber: roomNumber, code: code, takePower: takePower },
|
||||
success: function (r) {
|
||||
if (!r.IsSuccess) { showTip(r.Result); return; }
|
||||
isControl = r.IsControl;
|
||||
switch (code) {
|
||||
case "mensuo":
|
||||
$("#kaisuo").removeClass();
|
||||
if (r.Result.WXLockStatus == 1) {
|
||||
$("#kaisuo").addClass("toggle on");
|
||||
} else {
|
||||
$("#kaisuo").addClass("toggle");
|
||||
}
|
||||
$("#kaisuo").attr("hostID", r.Result.HostID);
|
||||
$("#kaisuo").attr("modal", r.Result.WXLockModalAddress);
|
||||
break;
|
||||
case "fuwu":
|
||||
var html = "";
|
||||
$.each(r.Result, function (i, item) {
|
||||
var cls = "middle";
|
||||
if (item.Status == 1) {
|
||||
cls = "middle active";
|
||||
}
|
||||
html += "<button class='" + cls + "' hostID='" + item.HostID + "' modal='" + item.ModalAddress + "' onclick='serviceClick(this);'>" + item.Name + "</button>";
|
||||
});
|
||||
$("#service").html(html);
|
||||
break;
|
||||
case "changjing":
|
||||
var html = "";
|
||||
$.each(r.Result, function (i, item) {
|
||||
var cls = "middle";
|
||||
if (item.Status == 1) {
|
||||
cls = "middle active";
|
||||
}
|
||||
html += "<button class='" + cls + "' hostID='" + item.HostID + "' sceneID='" + item.ID + "' takeInverse='" + item.TakeInverse + "' onclick='sceneClick(this);'>" + item.Name + "</button>";
|
||||
});
|
||||
$("#scene").html(html);
|
||||
break;
|
||||
case "fangkong":
|
||||
var html = "";
|
||||
$.each(r.Result, function (i, item) {
|
||||
var cls = "middle";
|
||||
if (item.Status == 1) {
|
||||
cls = "middle active";
|
||||
}
|
||||
html += "<button class='" + cls + "' hostID='" + item.HostID + "' modal='" + item.ModalAddress + "' onclick='relayClick(this);'>" + item.Name + "</button>";
|
||||
});
|
||||
$("#relay").html(html);
|
||||
break;
|
||||
case "tiaoguang":
|
||||
var html = "";
|
||||
$.each(r.Result, function (i, item) {
|
||||
html += "<button class='tab' hostID='" + item.HostID + "' modal='" + item.ModalAddress + "' status='" + item.Status + "' brightness='" + item.Brightness + "' onclick='dimmerClick(this);'>" + item.Name + "</button>";
|
||||
});
|
||||
$("#dimmer").html(html);
|
||||
//选中第一个调光灯
|
||||
if ($('#dimmer button').length > 0) {
|
||||
$('#dimmer button')[0].click();
|
||||
}
|
||||
break;
|
||||
case "tiaose":
|
||||
var html = "";
|
||||
$.each(r.Result, function (i, item) {
|
||||
html += "<button class='tab' hostID='" + item.HostID + "' status='" + item.Status + "' modal='" + item.ModalAddress + "' brightness='" + item.Brightness +
|
||||
"' modal1='" + item.ModalAddress1 + "' modal2='" + item.ModalAddress2 + "' modal3='" + item.ModalAddress3 +
|
||||
"' brightness1='" + item.Brightness1 + "' brightness2='" + item.Brightness2 + "' brightness3='" + item.Brightness3 +
|
||||
"' onclick='colorClick(this);'>" + item.Name + "</button>";
|
||||
});
|
||||
$("#color").html(html);
|
||||
//选中第一个调色
|
||||
if ($('#color button').length > 0) {
|
||||
$('#color button')[0].click();
|
||||
}
|
||||
break;
|
||||
case "kongtiao":
|
||||
var html = "";
|
||||
$.each(r.Result, function (i, item) {
|
||||
html += "<button class='tab' hostID='" + item.HostID + "' modal='" + item.ModalAddress + "' status='" + item.Status + "' currentTemp='" + item.CurrentTemp + "'' settingTemp='" + item.SettingTemp + "'' fanSpeed='" + item.FanSpeed + "'' mode='" + item.Mode + "'' valve='" + item.Valve + "' onclick='airClick(this);'>" + item.Name + "</button>";
|
||||
});
|
||||
$("#air").html(html);
|
||||
//选中第一个空调
|
||||
if ($('#air button').length > 0) {
|
||||
$('#air button')[0].click();
|
||||
}
|
||||
break;
|
||||
case "chuanglian":
|
||||
var html = "";
|
||||
$.each(r.Result, function (i, item) {
|
||||
html += "<button class='tab' hostID='" + item.HostID + "' modal='" + item.ModalAddress + "' status='" + item.Status + "' onclick='curtainClick(this);'>" + item.Name + "</button>";
|
||||
});
|
||||
$("#curtain").html(html);
|
||||
//选中第一个窗帘
|
||||
if ($('#curtain button').length > 0) {
|
||||
$('#curtain button')[0].click();
|
||||
}
|
||||
break;
|
||||
case "dianshi":
|
||||
var html = "";
|
||||
$.each(r.Result, function (i, item) {
|
||||
html += "<button class='tab' hostID='" + item.HostID + "' modal='" + item.ModalAddress + "' onclick='tvClick(this);'>" + item.Name + "</button>";
|
||||
});
|
||||
$("#tv").html(html);
|
||||
//选中第一个电视
|
||||
if ($('#tv button').length > 0) {
|
||||
$('#tv button')[0].click();
|
||||
}
|
||||
break;
|
||||
case "yinyue":
|
||||
var html = "";
|
||||
$.each(r.Result, function (i, item) {
|
||||
html += "<button class='tab' hostID='" + item.HostID + "' modal='" + item.ModalAddress + "' status='" + item.Status + "' brightness='" + item.Brightness + "'' mode='" + item.Mode + "' onclick='musicClick(this);'>" + item.Name + "</button>";
|
||||
});
|
||||
$("#music").html(html);
|
||||
//选中第一个背景音乐
|
||||
if ($('#music button').length > 0) {
|
||||
$('#music button')[0].click();
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
//默认显示选中菜单
|
||||
var firstCurrentTabID = $('.tabbar li.active').attr("id");
|
||||
getWXData($('#hidRoomNumber').val(), firstCurrentTabID, $('.tabbar li.active').attr("takePower"));
|
||||
$("#" + firstCurrentTabID).addClass('show');
|
||||
//翻页
|
||||
function tabPaging(Event) {
|
||||
switch (Event) {
|
||||
case "→":
|
||||
{
|
||||
$(".tabbar .active").removeClass('active')
|
||||
.parent().next().children().eq(1).addClass('active')
|
||||
.parents('.tabbar').css('left', '-100%')
|
||||
.find('.current').css('left', $(".tabbar .active")[0].offsetLeft + 'px');
|
||||
$(".tabbar .active").click();
|
||||
break;
|
||||
}
|
||||
case "←":
|
||||
{
|
||||
$(".tabbar .active").removeClass('active')
|
||||
.parent().prev().children().first().addClass('active')
|
||||
.parents('.tabbar').css('left', '0%')
|
||||
.find('.current').css('left', $(".tabbar .active")[0].offsetLeft + 'px'); ;
|
||||
$(".tabbar .active").click();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
//点击底部菜单
|
||||
$('.tabbar li').on('tap click', function (Event) {
|
||||
var _thisInnerHTML = this.innerHTML;
|
||||
if (_thisInnerHTML == "→" || _thisInnerHTML == "←") {
|
||||
tabPaging(_thisInnerHTML);
|
||||
Event.preventDefault();
|
||||
return false;
|
||||
}
|
||||
var id = $(this).attr("id");
|
||||
getWXData($('#hidRoomNumber').val(), id, $(this).attr("takePower"));
|
||||
$("#" + id).addClass("show").siblings().removeClass("show");
|
||||
$(this).addClass("active").siblings().removeClass("active").parents('.tabbar').find('.current').css('left', this.offsetLeft + 'px');
|
||||
document.title = _thisInnerHTML;
|
||||
});
|
||||
//微信锁开关
|
||||
$('.toggle').on('click', function () {
|
||||
if (!isControl) { showTip(lang.WXTakePowerFlag); return; }
|
||||
var status = 1;
|
||||
if ($(this).hasClass('on')) {
|
||||
status = 2;
|
||||
$(this).removeClass('on');
|
||||
} else {
|
||||
status = 1;
|
||||
$(this).addClass('on');
|
||||
}
|
||||
setDevice($(this).attr("hostID"), $(this).attr("modal"), status, status == 1 ? 100 : 0, 0, 0, 0, 0);
|
||||
});
|
||||
//滑动调光input propertychange
|
||||
$('#brightness2').on('change', function () {
|
||||
if (!isControl) { showTip(lang.WXTakePowerFlag); return; }
|
||||
var obj = $("#dimmer button[class='tab active']")[0];
|
||||
if (obj == null) { showTip(lang.NoDeviceControl); return; }
|
||||
var brightness = $('#brightness2').val();
|
||||
var status = brightness == 0 ? 2 : 1;
|
||||
$('#brightness').text(brightness);
|
||||
$(obj).attr("status", status);
|
||||
$(obj).attr("brightness", brightness);
|
||||
$('#brightness1').css("top", (100 - brightness) + "%");
|
||||
setDevice($(obj).attr("hostID"), $(obj).attr("modal"), status, brightness, 0, 0, 0, 0);
|
||||
})
|
||||
//减少调光亮度
|
||||
$('#dimmerDown').click(function () {
|
||||
if (!isControl) { showTip(lang.WXTakePowerFlag); return; }
|
||||
var obj = $("#dimmer button[class='tab active']")[0];
|
||||
if (obj == null) { showTip(lang.NoDeviceControl); return; }
|
||||
var brightness = $('#brightness').text();
|
||||
if (brightness == 0) { return; }
|
||||
brightness--;
|
||||
var status = brightness == 0 ? 2 : 1;
|
||||
$('#brightness').text(brightness);
|
||||
$('#brightness2').val(brightness);
|
||||
$(obj).attr("status", status);
|
||||
$(obj).attr("brightness", brightness);
|
||||
$('#brightness1').css("top", (100 - brightness) + "%");
|
||||
setDevice($(obj).attr("hostID"), $(obj).attr("modal"), status, brightness, 0, 0, 0, 0);
|
||||
});
|
||||
//增加调光亮度
|
||||
$('#dimmerUp').click(function () {
|
||||
if (!isControl) { showTip(lang.WXTakePowerFlag); return; }
|
||||
var obj = $("#dimmer button[class='tab active']")[0];
|
||||
if (obj == null) { showTip(lang.NoDeviceControl); return; }
|
||||
var brightness = $('#brightness').text();
|
||||
if (brightness == 100) { return; }
|
||||
brightness++;
|
||||
$('#brightness').text(brightness);
|
||||
$('#brightness2').val(brightness);
|
||||
$(obj).attr("status", 1);
|
||||
$(obj).attr("brightness", brightness);
|
||||
$('#brightness1').css("top", (100 - brightness) + "%");
|
||||
setDevice($(obj).attr("hostID"), $(obj).attr("modal"), 1, brightness, 0, 0, 0, 0);
|
||||
});
|
||||
//减少设定温度
|
||||
$('#airDown').click(function () {
|
||||
if (!isControl) { showTip(lang.WXTakePowerFlag); return; }
|
||||
var obj = $("#air button[class='tab active']")[0];
|
||||
if (obj == null) { showTip(lang.NoDeviceControl); return; }
|
||||
var settingTemp = $('#settingTemp').text();
|
||||
if (settingTemp == 16) { return; }
|
||||
settingTemp--;
|
||||
$('#settingTemp').text(settingTemp);
|
||||
$('#settingTemp1').css("top", (200 - (settingTemp * 6.25)) + "%");
|
||||
$(obj).attr("status", 1);
|
||||
$(obj).attr("settingTemp", settingTemp);
|
||||
setDevice($(obj).attr("hostID"), $(obj).attr("modal"), 1, 100, settingTemp, $(obj).attr("fanSpeed"), $(obj).attr("mode"), $(obj).attr("valve"));
|
||||
});
|
||||
//增加设定温度
|
||||
$('#airUp').click(function () {
|
||||
if (!isControl) { showTip(lang.WXTakePowerFlag); return; }
|
||||
var obj = $("#air button[class='tab active']")[0];
|
||||
if (obj == null) { showTip(lang.NoDeviceControl); return; }
|
||||
var settingTemp = $('#settingTemp').text();
|
||||
if (settingTemp == 32) { return; }
|
||||
settingTemp++;
|
||||
$('#settingTemp').text(settingTemp);
|
||||
$('#settingTemp1').css("top", (200 - (settingTemp * 6.25)) + "%");
|
||||
$(obj).attr("status", 1);
|
||||
$(obj).attr("settingTemp", settingTemp);
|
||||
setDevice($(obj).attr("hostID"), $(obj).attr("modal"), 1, 100, settingTemp, $(obj).attr("fanSpeed"), $(obj).attr("mode"), $(obj).attr("valve"));
|
||||
});
|
||||
//空调开关控制
|
||||
$('#power').click(function () {
|
||||
if (!isControl) { showTip(lang.WXTakePowerFlag); return; }
|
||||
var obj = $("#air button[class='tab active']")[0];
|
||||
if (obj == null) { showTip(lang.NoDeviceControl); return; }
|
||||
var status = 1;
|
||||
if ($(this).hasClass("active") == 1) {
|
||||
status = 2;
|
||||
$(this).removeClass("active");
|
||||
$('#power').html(lang.Off);
|
||||
} else {
|
||||
status = 1;
|
||||
$(this).addClass("active");
|
||||
$('#power').html(lang.On);
|
||||
}
|
||||
$(obj).attr("status", status);
|
||||
setDevice($(obj).attr("hostID"), $(obj).attr("modal"), status, status == 1 ? 100 : 0, $(obj).attr("settingTemp"), $(obj).attr("fanSpeed"), $(obj).attr("mode"), $(obj).attr("valve"));
|
||||
});
|
||||
//空调模式控制
|
||||
$('#mode button').click(function () {
|
||||
if (!isControl) { showTip(lang.WXTakePowerFlag); return; }
|
||||
var obj = $("#air button[class='tab active']")[0];
|
||||
if (obj == null) { showTip(lang.NoDeviceControl); return; }
|
||||
$('#mode button').removeClass("active");
|
||||
$(this).addClass("active");
|
||||
var mode = $(this).attr("value");
|
||||
$(obj).attr("status", 1);
|
||||
$(obj).attr("mode", mode);
|
||||
setDevice($(obj).attr("hostID"), $(obj).attr("modal"), 1, 100, $(obj).attr("settingTemp"), $(obj).attr("fanSpeed"), mode, $(obj).attr("valve"));
|
||||
});
|
||||
//空调风速控制
|
||||
$('#fanSpeed button').click(function () {
|
||||
if (!isControl) { showTip(lang.WXTakePowerFlag); return; }
|
||||
var obj = $("#air button[class='tab active']")[0];
|
||||
if (obj == null) { showTip(lang.NoDeviceControl); return; }
|
||||
$('#fanSpeed button').removeClass("active");
|
||||
$(this).addClass("active");
|
||||
var fanSpeed = $(this).attr("value");
|
||||
$(obj).attr("status", 1);
|
||||
$(obj).attr("fanSpeed", fanSpeed);
|
||||
setDevice($(obj).attr("hostID"), $(obj).attr("modal"), 1, 100, $(obj).attr("settingTemp"), fanSpeed, $(obj).attr("mode"), $(obj).attr("valve"));
|
||||
});
|
||||
/*调整H颜色
|
||||
$('#color001').change(function () {
|
||||
if (!isControl) { showTip(lang.WXTakePowerFlag); return; }
|
||||
var obj = $("#color button[class='tab active']")[0];
|
||||
if (obj == null) { showTip(lang.NoDeviceControl); return; }
|
||||
//每次调色时,将亮度调整为100
|
||||
//if (parseInt($('#color004').val()) != 100) {
|
||||
//$('#color004').val(100);
|
||||
//}
|
||||
//获取rgb值
|
||||
var rgb = $("#tiaoseSwatch").css('background-color');
|
||||
var s = rgb.replace(/rgb\((\d{1,3})\,\s*(\d{1,3})\,\s*(\d{1,3})\)/, "$1+$2+$3")
|
||||
$(obj).attr("brightness1", parseInt((100 * s.split('+')[0]) / 255));
|
||||
$(obj).attr("brightness2", parseInt((100 * s.split('+')[1]) / 255));
|
||||
$(obj).attr("brightness3", parseInt((100 * s.split('+')[2]) / 255));
|
||||
$("#tiaoseRGB").html($(obj).attr("brightness1") + "," + $(obj).attr("brightness2") + "," + $(obj).attr("brightness3"));
|
||||
setTiaoSe(obj);
|
||||
});
|
||||
/*调整亮度
|
||||
$('#color004').change(function () {
|
||||
if (!isControl) { showTip(lang.WXTakePowerFlag); return; }
|
||||
var obj = $("#color button[class='tab active']")[0];
|
||||
if (obj == null) { showTip(lang.NoDeviceControl); return; }
|
||||
var val = parseInt($(this).val());
|
||||
//计算各灯带等比例亮度
|
||||
$(obj).attr("brightness", parseInt($(obj).attr("brightness") * val / 100));
|
||||
$(obj).attr("brightness1", parseInt($(obj).attr("brightness1") * val / 100));
|
||||
$(obj).attr("brightness2", parseInt($(obj).attr("brightness2") * val / 100));
|
||||
$("#tiaoseRGB").html($(obj).attr("brightness") + "," + $(obj).attr("brightness1") + "," + $(obj).attr("brightness2"));
|
||||
setTiaoSe(obj);
|
||||
});
|
||||
//调整S颜色
|
||||
$('#color002').change(function () {
|
||||
if (!isControl) { showTip(lang.WXTakePowerFlag); return; }
|
||||
var obj = $("#color button[class='tab active']")[0];
|
||||
if (obj == null) { showTip(lang.NoDeviceControl); return; }
|
||||
var val = parseInt($(this).val());
|
||||
$(obj).attr("brightness1", val);
|
||||
setTiaoSe(obj);
|
||||
});
|
||||
//调整L颜色
|
||||
$('#color003').change(function () {
|
||||
if (!isControl) { showTip(lang.WXTakePowerFlag); return; }
|
||||
var obj = $("#color button[class='tab active']")[0];
|
||||
if (obj == null) { showTip(lang.NoDeviceControl); return; }
|
||||
var val = parseInt($(this).val());
|
||||
$(obj).attr("brightness2", val);
|
||||
setTiaoSe(obj);
|
||||
});*/
|
||||
//打开窗帘
|
||||
$('#curtainOpen').click(function () {
|
||||
if (!isControl) { showTip(lang.WXTakePowerFlag); return; }
|
||||
var obj = $("#curtain button[class='tab active']")[0];
|
||||
if (obj == null) { showTip(lang.NoDeviceControl); return; }
|
||||
$(obj).attr("status", 1);
|
||||
$('#curtainStatus').addClass("close");
|
||||
setDevice($(obj).attr("hostID"), $(obj).attr("modal"), 1, 100, 0, 0, 0, 0);
|
||||
});
|
||||
//停止窗帘
|
||||
$('#curtainPause').click(function () {
|
||||
if (!isControl) { showTip(lang.WXTakePowerFlag); return; }
|
||||
var obj = $("#curtain button[class='tab active']")[0];
|
||||
if (obj == null) { showTip(lang.NoDeviceControl); return; }
|
||||
$(obj).attr("status", 6);
|
||||
setDevice($(obj).attr("hostID"), $(obj).attr("modal"), 6, 100, 0, 0, 0, 0);
|
||||
});
|
||||
//关闭窗帘
|
||||
$('#curtainClose').click(function () {
|
||||
if (!isControl) { showTip(lang.WXTakePowerFlag); return; }
|
||||
var obj = $("#curtain button[class='tab active']")[0];
|
||||
if (obj == null) { showTip(lang.NoDeviceControl); return; }
|
||||
$(obj).attr("status", 2);
|
||||
$('#curtainStatus').removeClass("close");
|
||||
setDevice($(obj).attr("hostID"), $(obj).attr("modal"), 2, 0, 0, 0, 0, 0);
|
||||
});
|
||||
//电视控制
|
||||
$('#dianshi button').click(function () {
|
||||
if (!isControl) { showTip(lang.WXTakePowerFlag); return; }
|
||||
var obj = $("#tv button[class='tab active']")[0];
|
||||
if (obj == null) { showTip(lang.NoDeviceControl); return; }
|
||||
var _this = this;
|
||||
$(_this).addClass("active");
|
||||
var mode = $(_this).attr("mode");
|
||||
setDevice($(obj).attr("hostID"), $(obj).attr("modal"), 1, 0, 0, 0, mode, 0);
|
||||
setTimeout(function () {
|
||||
$(_this).removeClass("active");
|
||||
}, 1000);
|
||||
});
|
||||
//音乐控制
|
||||
$('#yinyue button').click(function () {
|
||||
if (!isControl) { showTip(lang.WXTakePowerFlag); return; }
|
||||
var obj = $("#yinyue button[class='tab active']")[0];
|
||||
if (obj == null) { showTip(lang.NoDeviceControl); return; }
|
||||
var brightness = $(obj).attr("brightness");
|
||||
var _this = this;
|
||||
$(_this).addClass("active");
|
||||
var mode = $(_this).attr("mode");
|
||||
switch (mode) {
|
||||
case "1": //播放
|
||||
mode = 2;
|
||||
$("#musicEqua").css("animation-play-state", "paused");
|
||||
$(_this).attr("mode", 2);
|
||||
$(_this).html("<img src='/Images/weixin2/play.svg' class='play' alt=''/>");
|
||||
break;
|
||||
case "2": //暂停
|
||||
mode = 1;
|
||||
$("#musicEqua").css("animation-play-state", "running");
|
||||
$(_this).attr("mode", 1);
|
||||
$(_this).html("<img src='/Images/weixin2/pause.svg' class='pause' alt=''/>");
|
||||
break;
|
||||
case "5": //音量加
|
||||
if (brightness == 10) { showTip(lang.MaxVolume); return; }
|
||||
brightness++;
|
||||
break;
|
||||
case "6": //音量减
|
||||
if (brightness == 0) { showTip(lang.MinVolume); return; }
|
||||
brightness--;
|
||||
break;
|
||||
}
|
||||
$(obj).attr("status", 1);
|
||||
$(obj).attr("brightness", brightness);
|
||||
$("#musicVolume").html(brightness);
|
||||
setDevice($(obj).attr("hostID"), $(obj).attr("modal"), 1, brightness, 0, 0, mode, 0);
|
||||
setTimeout(function () {
|
||||
$(_this).removeClass("active");
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
2
WebSite/Scripts/WeiXin/zepto.min.js
vendored
Normal file
2
WebSite/Scripts/WeiXin/zepto.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user