3094 lines
149 KiB
JavaScript
3094 lines
149 KiB
JavaScript
/*
|
||
yunkong2.vis high quality Widget-Set
|
||
|
||
version: "1.1.2"
|
||
|
||
Copyright 6'2014-2018 bluefox<dogafox@gmail.com>
|
||
|
||
*/
|
||
'use strict';
|
||
|
||
|
||
(function ( $ ) {
|
||
$.fn.scala = function (options, arg) {
|
||
if (typeof options === 'string') {
|
||
if (options === 'value') {
|
||
if (arg === null || arg === undefined) arg = '0';
|
||
return this.each(function () {
|
||
var $this = $(this);
|
||
var $input = $this.find('.scalaInput');
|
||
if ($input.val().toString() !== arg.toString()) {
|
||
$this.find('.scalaInput').val(arg).trigger('change');
|
||
}
|
||
});
|
||
}
|
||
return;
|
||
}
|
||
|
||
function h2rgba (h, a) {
|
||
var rgb;
|
||
h = h.substring(1,7);
|
||
rgb = [
|
||
parseInt(h.substring(0,2), 16),
|
||
parseInt(h.substring(2,4), 16),
|
||
parseInt(h.substring(4,6), 16)
|
||
];
|
||
|
||
return 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',' + a + ')';
|
||
}
|
||
|
||
var settings = $.extend({
|
||
bgColor: '#EEEEEE',
|
||
value: 0,
|
||
width: 0,
|
||
thickness: null,
|
||
unit: null,
|
||
fontSize: 24,
|
||
readOnly: false,
|
||
color: '#FFCC00',
|
||
alwaysShow: false,
|
||
hideNumber: false,
|
||
step: 1,
|
||
change: function (value) {
|
||
console.log('change ' + value);
|
||
},
|
||
changing: function (value) {},
|
||
onshow: function (isShow) {},
|
||
onhide: function (isShow) {},
|
||
click: function () {
|
||
//console.log('click');
|
||
},
|
||
colorize: function (color, value) {
|
||
return h2rgba(color, (value - settings.min) / (settings.max - settings.min) + 0.5)
|
||
},
|
||
min: 0,
|
||
max: 100,
|
||
isComma: false
|
||
}, options);
|
||
|
||
return this.each(function () {
|
||
// Do something to each element here.
|
||
var $this = $(this);
|
||
if ($this.data('scaled')) return;
|
||
$this.data('scaled', true);
|
||
$this.wrapInner('<div class="scalaWrapped"></div>');
|
||
var divW = $this.width();
|
||
var divH = $this.height();
|
||
var divMax = ((divW > divH) ? divW : divH);
|
||
|
||
// calculate thickness
|
||
if (!settings.width) settings.width = Math.round(divMax + 30) + '';
|
||
if (!settings.thickness) settings.thickness = 1 - (divMax / settings.width);
|
||
|
||
$this.prepend('<input type="text" value="' + settings.value + '" class="scalaInput" data-width="' + settings.width + '" data-height="' + settings.width + '" data-thickness="' + settings.thickness + '"/>');
|
||
|
||
var $scalaInput = $this.find('.scalaInput');
|
||
var $scalaWrapped = $this.find('.scalaWrapped');
|
||
|
||
if (typeof settings.step === 'string') {
|
||
settings.step = parseFloat(settings.step.replace(',', '.') || 1);
|
||
}
|
||
|
||
var $knobDiv = $scalaInput.knobHQ({
|
||
release: function (v, noAck) {
|
||
$knobDiv._mouseDown = false;
|
||
|
||
hide('release');
|
||
|
||
if ($knobDiv._pressTimer) {
|
||
$knobDiv._pressTimer = null;
|
||
setValue($knobDiv._oldValue);
|
||
if (settings.click) {
|
||
var newVal = settings.click($knobDiv._oldValue);
|
||
|
||
if (newVal !== undefined) setValue(newVal);
|
||
}
|
||
} else {
|
||
// remove unit
|
||
var val = $scalaInput.val();
|
||
if (settings.unit !== null && val.substring(val.length - settings.unit.length, val.length) === settings.unit) {
|
||
val = val.substring(0, val.length - settings.unit.length);
|
||
}
|
||
if (settings.change/* && $knobDiv._oldValue != val*/) settings.change(val, noAck);
|
||
}
|
||
},
|
||
cancel: function () {
|
||
$knobDiv._mouseDown = false;
|
||
hide('cancel');
|
||
// set old value
|
||
setValue($knobDiv._oldValue);
|
||
|
||
},
|
||
change: function (value) {
|
||
if (settings.changing) settings.changing(value);
|
||
},
|
||
format: function (v) {
|
||
if (settings.digits !== null) v = v.toFixed(settings.digits);
|
||
if (settings.isComma && v) v = v.toString().replace('.', ',');
|
||
if (settings.unit) v = v + settings.unit;
|
||
return v;
|
||
},
|
||
displayPrevious: true,
|
||
displayInput: !settings.hideNumber,
|
||
bgColor: settings.bgColor,
|
||
readOnly: settings.readOnly,
|
||
fgColor: settings.color,
|
||
inputColor: settings.color,
|
||
colorize: settings.colorize ? settings.colorize : undefined,
|
||
min: settings.min,
|
||
max: settings.max,
|
||
step: parseFloat(settings.step || 1)
|
||
});
|
||
|
||
var w = $knobDiv.width();
|
||
$this.data('$knobDiv', $knobDiv);
|
||
|
||
function setValue(value) {
|
||
console.log('Restore value ' + value);
|
||
setTimeout(function () {
|
||
$scalaInput.data('setByUser', true);
|
||
$scalaInput.val(value).trigger('change');
|
||
}, 200);
|
||
}
|
||
|
||
function hide(event){
|
||
if (!settings.alwaysShow && !$knobDiv._mouseEnter && !$knobDiv._mouseDown) {
|
||
$knobDiv.hide();
|
||
$scalaWrapped.show();
|
||
if (settings.onhide) settings.onhide(false);
|
||
}
|
||
//console.log((event || '') + ' (enter: ' + $knobDiv._mouseEnter + ', down: ' + $knobDiv._mouseDown + ')');
|
||
}
|
||
function show(event){
|
||
$knobDiv.show();
|
||
if (settings.onshow) settings.onshow(true);
|
||
|
||
//console.log((event || '') + ' (enter: ' + $knobDiv._mouseEnter + ', down: ' + $knobDiv._mouseDown + ')');
|
||
}
|
||
|
||
function press(event) {
|
||
if (!$knobDiv._mouseDown) {
|
||
var val = $scalaInput.val();
|
||
if (settings.unit !== null) {
|
||
val = val.substring(0, val.length - settings.unit.length);
|
||
}
|
||
|
||
$knobDiv._oldValue = val;
|
||
$knobDiv._mouseDown = true;
|
||
$knobDiv._pressTimer = setTimeout(function () {
|
||
$knobDiv._pressTimer = null;
|
||
}, 300);
|
||
//console.log((new Date().getSeconds() + '.' + new Date().getMilliseconds())+ ' ' + (event || '') + ' (enter: ' + $knobDiv._mouseEnter + ', down: ' + $knobDiv._mouseDown + ')');
|
||
show(event);
|
||
}
|
||
}
|
||
function unpress(event) {
|
||
$knobDiv._mouseDown = false;
|
||
//console.log((new Date().getSeconds() + '.' + new Date().getMilliseconds()) + ' ' + (event || '') + ' (enter: ' + $knobDiv._mouseEnter + ', down: ' + $knobDiv._mouseDown + ')');
|
||
hide(event);
|
||
|
||
if ($knobDiv._pressTimer) {
|
||
clearTimeout($knobDiv._pressTimer);
|
||
}
|
||
}
|
||
|
||
$knobDiv.css({
|
||
position: 'absolute',
|
||
left: '-' + ((w - divW) / 2) + 'px',
|
||
top: '-' + ((w - divH) / 2) + 'px',
|
||
'z-index': 2,
|
||
cursor: 'pointer',
|
||
'opacity': 0.7
|
||
}).bind('mouseleave',function (e) {
|
||
$knobDiv._mouseEnter = false;
|
||
hide(e.type);
|
||
}).bind('mousedown', function (e) {
|
||
press(e.type);
|
||
}).bind('mouseup', function (e) {
|
||
unpress(e.type);
|
||
}).bind('mouseenter', function (e) {
|
||
$knobDiv._mouseEnter = true;
|
||
show(e.type);
|
||
}).bind('touchend', function (e) {
|
||
$knobDiv._mouseEnter = false;
|
||
unpress(e.type);
|
||
});
|
||
if (!settings.alwaysShow) {
|
||
$knobDiv.hide();
|
||
}
|
||
|
||
$this.bind('mouseenter', function (e) {
|
||
$knobDiv._mouseEnter = true;
|
||
show(e.type);
|
||
}).bind('touchstart', function (e) {
|
||
if (e.simulated) {
|
||
e.preventDefault();
|
||
return;
|
||
}
|
||
press(e.type);
|
||
var event = $.Event(e.type, {simulated: true, originalEvent: {touches: [{pageX: e.originalEvent.touches[e.originalEvent.touches.length - 1].pageX, pageY: e.originalEvent.touches[e.originalEvent.touches.length - 1].pageY}]}} );
|
||
$knobDiv.find('canvas').trigger(event);
|
||
e.preventDefault();
|
||
}).bind('mousedown', function (e) {
|
||
if (e.simulated) {
|
||
e.preventDefault();
|
||
return;
|
||
}
|
||
press(e.type);
|
||
var event = $.Event(e.type, {simulated: true, pageX: e.pageX, pageY: e.pageY});
|
||
$knobDiv.find('canvas').trigger(event);
|
||
e.preventDefault();
|
||
});
|
||
|
||
$scalaInput.bind('focusout', function (e) {
|
||
$knobDiv._mouseEnter = false;
|
||
hide(e.type)
|
||
}).bind('focusin', function (e) {
|
||
unpress(e.type);
|
||
}).css({
|
||
'font-size': settings.fontSize,
|
||
cursor: 'pointer',
|
||
'-webkit-touch-callout': 'none',
|
||
'-webkit-user-select': 'none',
|
||
'-khtml-user-select': 'none',
|
||
'-moz-user-select': 'none',
|
||
'-ms-user-select': 'none',
|
||
'user-select': 'none'
|
||
}).prop('readonly', true);
|
||
});
|
||
};
|
||
|
||
$.fn.shineCheckbox = function (options, arg) {
|
||
if (typeof options === 'string') {
|
||
if (options === 'value') {
|
||
return this.each(function () {
|
||
var $this = $(this);
|
||
var f = parseFloat(arg);
|
||
var val;
|
||
if (f.toString() == arg) {
|
||
val = f > 0;
|
||
} else {
|
||
val = arg === 'true' || arg === true;
|
||
}
|
||
if (val != $this.prop('checked')) {
|
||
$this.data('update', true);
|
||
$this.prop('checked', val).trigger('change');
|
||
}
|
||
});
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (!options) options = {};
|
||
|
||
var settings = {
|
||
backgroundCheckbox: '',//-webkit-linear-gradient(top, #fe9810 0%,#e75400 61%,#e75400 91%,#ea8810 100%)",
|
||
backgroundButton: '',//"-webkit-linear-gradient(top, #efeeee 0%,#bcb9b8 100%);",
|
||
checkboxSize: options.checkboxSize || 'big',
|
||
checkboxColor: options.checkboxColor || 'grey',
|
||
checkboxColorOn: options.checkboxColorOn || options.checkboxColor || 'orange',
|
||
readOnly: options.readOnly || false
|
||
};
|
||
|
||
return this.each(function () {
|
||
// Do something to each element here.
|
||
var $this = $(this);
|
||
if ($this.data('shineCheckbox')) return;
|
||
$this.data('shineCheckbox', true);
|
||
$this.hide();
|
||
var checkboxStyle = 'background: ' + settings.backgroundCheckbox;
|
||
var buttonStyle = 'background: ' + settings.backgroundButton;
|
||
var color = $this.prop('checked') ? settings.checkboxColorOn : settings.checkboxColor;
|
||
|
||
$this.wrap('<div class="checkbox-' + settings.checkboxSize + '-' + color + '-wrap" style="' + checkboxStyle + '"><div class="checkbox-' + settings.checkboxSize + '-' + color + '-button" style="' + buttonStyle + '"></div></div>');
|
||
$this.change(function () {
|
||
//console.log('change ' + $this.prop('checked'));
|
||
var color;
|
||
if ($this.prop('checked')) {
|
||
color = settings.checkboxColorOn;
|
||
setTimeout(function () {
|
||
$this.parent().addClass('checkbox-' + settings.checkboxSize + '-' + settings.checkboxColorOn + '-button-active');
|
||
$this.parent().parent().removeClass('checkbox-' + settings.checkboxSize + '-' + settings.checkboxColor + '-wrap').addClass('checkbox-' + settings.checkboxSize + '-' + settings.checkboxColorOn + '-wrap');
|
||
}, 100);
|
||
} else {
|
||
color = settings.checkboxColor;
|
||
$this.parent().removeClass('checkbox-' + settings.checkboxSize + '-' + settings.checkboxColorOn + '-button-active');
|
||
$this.parent().parent().removeClass('checkbox-' + settings.checkboxSize + '-' + settings.checkboxColorOn + '-wrap').addClass('checkbox-' + settings.checkboxSize + '-' + settings.checkboxColor + '-wrap');
|
||
}
|
||
});
|
||
|
||
if (!settings.readOnly) {
|
||
$this.parent().parent().click(function () {
|
||
//console.log($this.prop('checked'));
|
||
$this.prop('checked', !$this.prop('checked')).trigger('change');
|
||
});
|
||
}
|
||
|
||
if ($this.prop('checked')) $this.parent().addClass('checkbox-' + settings.checkboxSize + '-' + color + '-button-active');
|
||
});
|
||
};
|
||
|
||
// possible options: waves wobble tada swing shake rubberBand pulse flash bounce
|
||
$.fn.animateDiv = function (effect, options) {
|
||
return this.each(function () {
|
||
// Do something to each element here.
|
||
var $this = $(this);
|
||
options = options || {};
|
||
effect = effect || 'waves';
|
||
|
||
if (options.speed != 1 && options.speed != 2 && options.speed != 2) options.speed = 1;
|
||
|
||
if (effect === 'waves') {
|
||
var borderThickness = (options.tickness || 3) - 1;
|
||
var border = ';border: ' + borderThickness + 'px ' + (options.style || 'solid') +' ' + (options.color || 'grey');
|
||
|
||
var text = '<div class="wave wave1" style="top:-' + borderThickness + 'px; left: -' + borderThickness + 'px;width: ' + Math.round($this.width()) +
|
||
'px;height: ' + Math.round($this.height()) + 'px;border-radius: ' + (options.radius || $this.css('border-radius')) +
|
||
border +
|
||
'; position: absolute"></div>';
|
||
$this.prepend(text);
|
||
$this.prepend(text.replace('wave1', 'wave2'));
|
||
|
||
$this.find('.wave1').show().addClass('animated' + options.speed + 's zoomIn1');
|
||
$this.find('.wave2').show().addClass('animated' + options.speed + 's zoomIn2');
|
||
|
||
setTimeout(function () {
|
||
$this.find('.wave1').remove();
|
||
$this.find('.wave2').remove();
|
||
}, 2050);
|
||
} else {
|
||
$this.addClass('animated' + options.speed + 's ' + effect);
|
||
setTimeout(function () {
|
||
$this.removeClass('animated' + options.speed + 's ' + effect);
|
||
}, 2100);
|
||
}
|
||
});
|
||
};
|
||
|
||
$.fn.popupShow = function ($div, options, callback) {
|
||
|
||
if (typeof options === 'function') {
|
||
callback = options;
|
||
options = null;
|
||
}
|
||
options = options || {};
|
||
options.effect = options.effect || 'zoomIn';
|
||
options.speed = options.speed || '05';
|
||
options.relative = options.relative || false;
|
||
|
||
return this.each(function () {
|
||
// Do something to each element here.
|
||
var $this = $(this);
|
||
if (!$div) {
|
||
console.log('no div');
|
||
return;
|
||
}
|
||
var offset = $this.position();
|
||
var eTop = options.relative ? 0 : offset.top; //get the offset top of the element
|
||
var eLeft = options.relative ? 0 : offset.left; //get the offset top of the element
|
||
|
||
var dh = $div.css({opacity: 0}).show().height();
|
||
var dw = $div.width();
|
||
// calculate center
|
||
//var x = $this.width();
|
||
//var y = $this.height();
|
||
var zindex = $div.css('z-index');
|
||
zindex = options.zindex || ((zindex === 'auto') ? 1 : (zindex || 0) + 1);
|
||
$div.css({position: 'absolute', left: eLeft + ($this.width() - dw) / 2, top: eTop + ($this.height() - dh) / 2, 'z-index': zindex});
|
||
setTimeout(function () {
|
||
$div.addClass('animated' + options.speed + 's ' + options.effect);
|
||
}, 0);
|
||
setTimeout(function () {
|
||
$div.removeClass('animated' + options.speed + 's ' + options.effect).css({opacity: 1});
|
||
if (callback) callback();
|
||
}, (options.speed === '05') ? 550 : parseInt(options.speed, 10) * 1000 + 50);
|
||
});
|
||
};
|
||
$.fn.popupHide = function ($div, options, callback) {
|
||
if (typeof $div === 'function') {
|
||
callback = $div;
|
||
$div = null;
|
||
}
|
||
if (typeof options === 'function') {
|
||
callback = options;
|
||
options = null;
|
||
}
|
||
options = options || {};
|
||
options.effect = options.effect || 'zoomOut';
|
||
options.speed = options.speed || '05';
|
||
|
||
return this.each(function () {
|
||
// Do something to each element here.
|
||
if (!$div) {
|
||
$div = $(this);
|
||
}
|
||
setTimeout(function () {
|
||
$div.addClass('animated' + options.speed + 's ' + options.effect);
|
||
}, 0);
|
||
setTimeout(function () {
|
||
$div.removeClass('animated' + options.speed + 's ' + options.effect);
|
||
$div.hide();
|
||
if (callback) callback();
|
||
}, (options.speed === '05') ? 550 : parseInt(options.speed, 10) * 1000 + 50);
|
||
});
|
||
};
|
||
|
||
$.fn.makeSlider = function (options, onChange, onIdle) {
|
||
if (options === 'hide') {
|
||
return this.each(function () {
|
||
var $this = $(this);
|
||
var timer = $this.data('hideTimer');
|
||
if (timer) clearTimeout(timer);
|
||
$this.data('hideTimer', null);
|
||
$this.hide();
|
||
});
|
||
} else if (options === 'show') {
|
||
return this.each(function () {
|
||
var $this = $(this).show();
|
||
var hideTimer = $this.data('hideTimer');
|
||
|
||
options = $this.data('options');
|
||
|
||
if (onChange !== undefined) {
|
||
if (options.invert) onChange = options.max - onChange + options.min;
|
||
$this.slider('value', onChange);
|
||
}
|
||
|
||
if (hideTimer) clearTimeout(hideTimer);
|
||
|
||
if (options.timeout) {
|
||
$this.data('hideTimer', setTimeout(function () {
|
||
$this.data('hideTimer', null);
|
||
if (options.onIdle) options.onIdle();
|
||
}, options.timeout));
|
||
}
|
||
});
|
||
}
|
||
if (typeof options === 'string') {
|
||
if (options === 'restart') {
|
||
return this.each(function () {
|
||
var $this = $(this);
|
||
var options = $this.data('options');
|
||
if (options.timeout) {
|
||
$this.data('hideTimer', setTimeout(function () {
|
||
if (options.onIdle) options.onIdle();
|
||
}, options.timeout));
|
||
}
|
||
});
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (typeof options === 'function') {
|
||
onIdle = onChange;
|
||
onChange = options;
|
||
options = null;
|
||
}
|
||
|
||
options = options || {};
|
||
|
||
options.timeout = (options.timeout === undefined) ? 2000 : options.timeout;
|
||
options.min = (options.min === undefined) ? 0 : options.min;
|
||
options.max = (options.max === undefined) ? 100 : options.max;
|
||
options.value = (options.value === undefined) ? options.max : options.value;
|
||
options.show = (options.show === undefined) ? true : options.show;
|
||
options.onIdle = onIdle;
|
||
options.onChange = onChange;
|
||
|
||
if (options.invert) {
|
||
options.value = options.max - options.value + options.min;
|
||
}
|
||
|
||
return this.each(function () {
|
||
var $this = $(this);
|
||
|
||
if (options.timeout && options.show) {
|
||
$this.data('hideTimer', setTimeout(function () {
|
||
$this.data('hideTimer', null);
|
||
if (onIdle) onIdle();
|
||
}, options.timeout));
|
||
}
|
||
|
||
$this.data('options', options);
|
||
|
||
$this.slider({
|
||
orientation: "vertical",
|
||
range: "max",
|
||
min: options.min,
|
||
max: options.max,
|
||
value: options.value,
|
||
start: function () {
|
||
var timer = $this.data('hideTimer');
|
||
if (timer) {
|
||
clearTimeout(timer);
|
||
$this.data('hideTimer', null);
|
||
}
|
||
},
|
||
stop: function (event, ui) {
|
||
var hideTimer = $this.data('hideTimer');
|
||
|
||
if (hideTimer) clearTimeout(hideTimer);
|
||
|
||
if (options.onChange) {
|
||
var val = ui.value;
|
||
if (options.invert) {
|
||
val = options.max - ui.value + options.min;
|
||
}
|
||
|
||
options.onChange(val);
|
||
}
|
||
|
||
if (options.timeout) {
|
||
$this.data('hideTimer', setTimeout(function () {
|
||
$this.data('hideTimer', null);
|
||
if (options.onIdle) options.onIdle();
|
||
}, options.timeout));
|
||
}
|
||
}
|
||
});
|
||
|
||
$this.find('.ui-slider-range').removeClass("ui-widget-header").addClass('hq-blind-blind').css({'background-position': '0% 100%'});
|
||
});
|
||
};
|
||
|
||
$.fn.batteryIndicator = function (options, args) {
|
||
if (typeof options === 'string') {
|
||
if (options === 'show') {
|
||
return this.each(function () {
|
||
var $this = $(this);
|
||
if (args === undefined) args = true;
|
||
|
||
if (args) {
|
||
$this.find('.vis-hq-battery').show();
|
||
} else {
|
||
$this.find('.vis-hq-battery').hide();
|
||
}
|
||
});
|
||
} else
|
||
if (options === 'hide') {
|
||
return this.each(function () {
|
||
$(this).find('.vis-hq-battery').hide();
|
||
});
|
||
}
|
||
return;
|
||
}
|
||
|
||
options = options || {};
|
||
options.color = options.color || '#FF5555';
|
||
options.angle = (options.angle !== undefined) ? options.angle : -90;
|
||
options.size = options.size || 32;
|
||
options.title = options.title || '';
|
||
|
||
return this.each(function () {
|
||
var $this = $(this);
|
||
|
||
$this.data('options', options);
|
||
if ($this.find('.vis-hq-battery').length) return;
|
||
|
||
$this.append('<div class="vis-hq-battery ' + (options.classes || '') + '" title="' + options.title + '">' +
|
||
'<svg xmlns="http://www.w3.org/2000/svg" width="' + options.size + '" height="' + options.size + '" viewBox="0 0 48 48">' +
|
||
'<path d="M0 0h48v48h-48z" fill="none"/>' +
|
||
'<path fill="' + options.color + '" transform="rotate(' + options.angle + ', 24, 24)" d="M31.33 8h-3.33v-4h-8v4h-3.33c-1.48 0-2.67 1.19-2.67 2.67v30.67c0 1.47 1.19 2.67 2.67 2.67h14.67c1.47 0 2.67-1.19 2.67-2.67v-30.67c-.01-1.48-1.2-2.67-2.68-2.67zm-5.33 28h-4v-4h4v4zm0-8h-4v-10h4v10z"/></svg>' +
|
||
'</div>');
|
||
if (!options.show) {
|
||
$this.find('.vis-hq-battery').hide();
|
||
}
|
||
});
|
||
};
|
||
|
||
$.fn.popupDialog = function (options) {
|
||
return this.each(function () {
|
||
var $this = $(this);
|
||
var $dialog;
|
||
// timeout: data.dialog_timeout,
|
||
|
||
var dialog = $this.data('dialog');
|
||
if (!dialog) {
|
||
if (typeof options === 'string') {
|
||
console.log('Show prior init');
|
||
return;
|
||
}
|
||
var text = '<div class="vis-hq-dialog" style="display: none"></div>';
|
||
$this.append(text);
|
||
$dialog = $this.find('.vis-hq-dialog');
|
||
|
||
$this.data('dialog', $dialog[0]);
|
||
|
||
var dialogButtons = [
|
||
{
|
||
text: _('Ok'),
|
||
click: function () {
|
||
$dialog.dialog('close');
|
||
},
|
||
id: 'ok'
|
||
}
|
||
];
|
||
|
||
dialogButtons[_('Ok')] = function () {
|
||
$dialog.dialog('close');
|
||
};
|
||
if (options.timeout) {
|
||
dialogButtons.unshift( {
|
||
id: 'donthide',
|
||
text: false,
|
||
icons: {primary: 'ui-icon-pin-w'},
|
||
click: function () {
|
||
$dialog.data('no-timeout', !$dialog.data('no-timeout'));
|
||
if ($dialog.data('no-timeout')) {
|
||
$(this).parent().find('#donthide').addClass('ui-state-error').button({
|
||
icons: {primary: 'ui-icon-pin-s'}
|
||
});
|
||
var timeout = $dialog.data('timeout');
|
||
if (timeout) {
|
||
clearTimeout(timeout);
|
||
$dialog.data('timeout', null);
|
||
}
|
||
} else {
|
||
$(this).parent().find('#donthide').removeClass('ui-state-error').button({
|
||
icons: {primary: 'ui-icon-pin-w'}
|
||
});
|
||
$dialog.data('timeout', setTimeout(function () {
|
||
$dialog.dialog('close');
|
||
}, data.timeout));
|
||
}
|
||
}
|
||
});
|
||
}
|
||
$dialog.dialog({
|
||
autoOpen: options.open || false,
|
||
width: options.width || 800,
|
||
height: options.height || 400,
|
||
modal: options.modal === undefined ? true : !!options.modal,
|
||
title: options.title || _('Chart'),
|
||
show: {
|
||
effect: options.effect,
|
||
duration: 500
|
||
},
|
||
open: function (event, ui) {
|
||
$dialog.height(options.height || 400);
|
||
$(this).parent().css('top', ($(window).height() - $(this).parent().height()) / 2);
|
||
|
||
$(this).parent().find('#donthide').css({width: 37, height: 37});
|
||
$(this).parent().find("#ok").focus();
|
||
if (options.effect) {
|
||
setTimeout(function () {
|
||
$dialog.html(options.content || '');
|
||
}, 500);
|
||
} else {
|
||
$dialog.html(options.content || '');
|
||
}
|
||
if (options.timeout && !$dialog.data('no-timeout')) {
|
||
$dialog.data('timeout', setTimeout(function () {
|
||
$dialog.dialog('close');
|
||
}, options.timeout));
|
||
}
|
||
//$('[aria-describedby="dialog_delete"]').css('z-index', 11002);
|
||
//$('.ui-widget-overlay').css('z-index', 1001);
|
||
},
|
||
close: function () {
|
||
$dialog.html('');
|
||
var timeout = $dialog.data('timeout');
|
||
if (timeout) {
|
||
clearTimeout(timeout);
|
||
$dialog.data('timeout', null);
|
||
}
|
||
},
|
||
buttons: dialogButtons
|
||
});
|
||
$dialog.data('data', options);
|
||
} else {
|
||
$dialog = $(dialog);
|
||
}
|
||
var data = $dialog.data('data');
|
||
|
||
if (typeof options === 'string') {
|
||
switch (options) {
|
||
case 'show':
|
||
$dialog.dialog('open');
|
||
break;
|
||
|
||
case 'hide':
|
||
$dialog.dialog('close');
|
||
break;
|
||
|
||
default:
|
||
console.log('Unknown command ' + options);
|
||
break;
|
||
}
|
||
}
|
||
});
|
||
};
|
||
}(jQuery));
|
||
|
||
// Add words for bars
|
||
if (vis.editMode) {
|
||
$.extend(true, systemDictionary, {
|
||
"circleWidth": {"en": "Сircle width", "de": "Kreisbreite", "ru": "Ширина дуги"},
|
||
"showValue": {"en": "Show value", "de": "Wert anzeigen", "ru": "Показать значение"},
|
||
"alwaysShow": {"en": "Always show circle", "de": "Kreis immer zeigen", "ru": "Показывать круг всегда"},
|
||
"iconName": {"en": "Icon", "de": "Kleinbild", "ru": "Миниатюра"},
|
||
"iconOn": {"en": "Active icon", "de": "Aktivbild", "ru": "Активная миниатюра"},
|
||
"btIconWidth": {"en": "Icon width", "de": "Bildbreite", "ru": "Ширина миниатюры"},
|
||
"offsetAuto": {"en": "Auto positioning", "de": "Positionieren(Auto)", "ru": "Автоматическое позиционирование"},
|
||
"leftOffset": {"en": "Left offset", "de": "Offset links", "ru": "Сдвиг слева"},
|
||
"topOffset": {"en": "Top offset", "de": "Offset von Oben", "ru": "Сдвиг сверху"},
|
||
"group_leftRight": {"en": "Descriptions", "de": "Beschreibungen", "ru": "Подписи"},
|
||
"hoursLastAction": {"en": "Hide last action after(hrs)", "de": "Ausblenden letze Anderungszeit nach(Std)", "ru": "Скрыть последнее изменение(часов)"},
|
||
"timeAsInterval": {"en": "Time as interval", "de": "Zeit als Intervall", "ru": "Время, как интервал"},
|
||
"descriptionLeft": {"en": "Description (left)", "de": "Beschreibung (links)", "ru": "Подпись (слева)"},
|
||
"descriptionLeftDisabled": {"en": "No description (left)", "de": "Keine Beschreibung (links)", "ru": "Без подписи (слева)"},
|
||
"infoLeftFontSize": {"en": "Left font size", "de": "Schriftgrosse links", "ru": "Размер шрифта слева"},
|
||
"infoRight": {"en": "Description (right)", "de": "Beschreibung (rechts)", "ru": "Подпись (справа)"},
|
||
"infoFontRightSize": {"en": "Right font size", "de": "Schriftgrosse rechts", "ru": "Размер шрифта справа"},
|
||
"group_styles": {"en": "Styles", "de": "Stil", "ru": "Стили"},
|
||
"styleNormal": {"en": "Normal", "de": "Normal", "ru": "Нормальный"},
|
||
"styleActive": {"en": "Active", "de": "Aktiv", "ru": "Активный"},
|
||
"usejQueryStyle": {"en": "Use jQuery Styles", "de": "jQuery Stil anwenden", "ru": "Применить jQuery стили"},
|
||
"changeEffect": {"en": "Change effect", "de": "Anderungseffekt", "ru": "Эффект при изменении"},
|
||
"waveColor": {"en": "Wave color", "de": "Wellenfarbe", "ru": "Цвет волн"},
|
||
"testActive": {"en": "Test", "de": "Test", "ru": "Тест"},
|
||
"group_value": {"en": "Value", "de": "Wert", "ru": "Значение"},
|
||
"unit": {"en": "Unit", "de": "Einheit", "ru": "Единицы"},
|
||
"readOnly": {"en": "Read only", "de": "Nur lesend", "ru": "Не изменять"},
|
||
"group_center": {"en": "Center", "de": "Zentrum", "ru": "Центр"},
|
||
"caption": {"en": "Caption", "de": "Beschriftung", "ru": "Подпись"},
|
||
"captionOn": {"en": "Caption active", "de": "Beschriftung bei aktiv", "ru": "Подпись когда активно"},
|
||
"hideNumber": {"en": "Hide number", "de": "Nummer ausblenden", "ru": "Скрыть число"},
|
||
"group_arc": {"en": "Arc", "de": "Bogen", "ru": "Дуга"},
|
||
"angleOffset": {"en": "Angle offset", "de": "Winkeloffset", "ru": "Сдвиг дуги"},
|
||
"angleArc": {"en": "Angle arc", "de": "Bogenwinkel", "ru": "Угол дуги"},
|
||
"displayPrevious": {"en": "Display previous", "de": "Letztes Wert zeigen", "ru": "Показывать предыдущее значение"},
|
||
"cursor": {"en": "Cursor", "de": "Griff", "ru": "Ручка"},
|
||
"thickness": {"en": "Thickness", "de": "Dicke", "ru": "Толщина"},
|
||
"bgcolor": {"en": "Background color", "de": "Hintergrundfarbe", "ru": "Цвет фона"},
|
||
"linecap": {"en": "Line cap", "de": "Linienende", "ru": "Округлое окончание"},
|
||
"anticlockwise": {"en": "Anticlockwise", "de": "Gegenuhrzeigersinn", "ru": "Против часовой стрелки"},
|
||
"oid-battery": {"en": "Battery object ID", "de": "Battery ObjektID", "ru": "ID батарейного индикатора"},
|
||
"oid-signal": {"en": "Signal object ID", "de": "Signal ObjektID", "ru": "ID качества сигнала"},
|
||
"oid-humidity": {"en": "Humidity ID", "de": "Luftfeuchtigkeit ID", "ru": "ID влажности"},
|
||
"oid-drive": {"en": "Valve ID", "de": "Ventil ID", "ru": "ID вентиля"},
|
||
"oid-actual": {"en": "Actual temperature ID", "de": "Ist ID", "ru": "ID актуальной температуры"},
|
||
"group_chart": {"en": "Chart", "de": "Grafik", "ru": "График"},
|
||
"dialog_effect": {"en": "Show effect", "de": "Anzeigeeffekt", "ru": "Эффект открытия"},
|
||
"dialog_timeout": {"en": "Hide timeout(ms)", "de": "Zumachen nach(ms)", "ru": "Закрыть после(мс)"},
|
||
"dialog_open": {"en": "Test open", "de": "Testen", "ru": "Тест"},
|
||
"border_width": {"en": "Border width", "de": "Rahmenbreite", "ru": "Ширина рамы"},
|
||
"slide_count": {"en": "Slides count", "de": "Flügelanzahl", "ru": "Кол-во створок"},
|
||
"hide_timeout": {"en": "Timeout for hide", "de": "Timeout für ", "ru": "Интервал для скрытия"},
|
||
"group_slides": {"en": "Slides", "de": "Flügel", "ru": "Створка"},
|
||
"slide_type": {"en": "Slide type", "de": "Flügeltyp", "ru": "Тип створки"},
|
||
"oid-slide-sensor": {"en": "Slide sensor", "de": "Fensterblatt-Sensor", "ru": "Сенсор на створке"},
|
||
"oid-slide-sensor-lowbat": {"en": "Slide sensor lowbat", "de": "FB-Sensor lowbat", "ru": "Сенсор на створке (lowbat)"},
|
||
"oid-slide-handle": {"en": "Slide handle", "de": "Griff-Sensor", "ru": "Сенсор на ручке"},
|
||
"oid-slide-handle-lowbat": {"en": "Slide handle lowbat", "de": "Griff-Sensor lowbat", "ru": "Сенсор на ручке (lowbat)"},
|
||
"door_type": {"en": "Door swing", "de": "Türtyp", "ru": "Тип двери"},
|
||
"noAnimate": {"en": "No animation", "de": "Keine Animation", "ru": "Не анимировать"},
|
||
"popupHorizontalPos": {"en": "Horizontal popup position", "de": "Horizontale PopUp Position", "ru": "Горизонтальное положение"},
|
||
"popupVerticalPos": {"en": "Vertical popup position", "de": "Vertikale PopUp Position", "ru": "Вертикальное положение"},
|
||
"infoColor": {"en": "Text color", "de": "Textfarbe", "ru": "Цвет текста"},
|
||
"infoBackground": {"en": "Background", "de": "Hintergrund", "ru": "Цвет фона"},
|
||
"midTextColor": {"en": "Middle text color", "de": "Textfarbe Mitte", "ru": "Цвет текста в середине"},
|
||
"pushButton": {"en": "Push-Button", "de": "Taster", "ru": "Кнопка"},
|
||
"big": {"en": "big", "de": "groß", "ru": "большой"},
|
||
"small": {"en": "small", "de": "klein", "ru": "маленький"},
|
||
"orange": {"en": "orange", "de": "orange", "ru": "оранжевый"},
|
||
"blue": {"en": "blue", "de": "blau", "ru": "синий"},
|
||
"green": {"en": "green", "de": "grün", "ru": "зелёный"},
|
||
"grey": {"en": "grey", "de": "grau", "ru": "серый"},
|
||
"show_value": {"en": "Show value", "de": "Wert anzeigen", "ru": "Показывать значение"},
|
||
"staticValue": {"en": "Static value", "de": "Statisches Wert", "ru": "Статичное значение"},
|
||
"staticValue_tooltip": {
|
||
"en": "Static value used if no Object ID set",
|
||
"de": "Statisches Wert wird nur dann verwendet,\x0Afalls keine ObjektID gesetzt ist",
|
||
"ru": "Статичное значение используется если не задан ID объекта"
|
||
},
|
||
"checkboxSize": {"en": "Size", "de": "Größe", "ru": "Размер"},
|
||
"checkboxColor": {"en": "Color by OFF", "de": "Farbe bei AUS", "ru": "Цвет при 0"},
|
||
"checkboxColorOn": {"en": "Color by ON", "de": "Farbe bei ON", "ru": "Цвет при 1"},
|
||
"group_style": {"en": "Style", "de": "Still", "ru": "Стиль"},
|
||
"oid-open": {"en": "Object ID Open", "de": "Objekt-ID Aufmachen", "ru": "Полностью открыть ID"},
|
||
"group_image": {"en": "Images", "de": "Bilder", "ru": "Кнопки"},
|
||
"closedIcon": {"en": "Icon-Closed", "de": "Bild für Zu", "ru": "Картинка 'Закрыть'"},
|
||
"openedIcon": {"en": "Icon-Opened", "de": "Bild für Auf", "ru": "Картинка 'Открыть'"},
|
||
"group_popup": {"en": "Popup", "de": "Popup", "ru": "Popup"},
|
||
"popupRadius": {"en": "Popup radius", "de": "Popup-Radius", "ru": "Popup радиус"},
|
||
"buttonRadius": {"en": "Buttons radius", "de": "Knopfe-Radius", "ru": "Радиус кнопок"},
|
||
"closeIcon": {"en": "Close-Icon", "de": "Zu-Bild", "ru": "Закрыть-Картинка"},
|
||
"closeValue": {"en": "Close-Value", "de": "Zu-Wert", "ru": "Закрыть-Значение"},
|
||
"closeStyle": {"en": "Close-Style", "de": "Zu-Still", "ru": "Закрыть-Стиль"},
|
||
"openIcon": {"en": "Open Lock-Icon", "de": "Schloss Auf-Bild", "ru": "Открыть замок-Картинка"},
|
||
"openValue": {"en": "Open Lock-Value", "de": "Schloss Auf-Wert", "ru": "Открыть замок-Значение"},
|
||
"openStyle": {"en": "Open Lock-Style", "de": "Schloss Auf-Still", "ru": "Открыть замок-Стиль"},
|
||
"openDoorIcon": {"en": "Open Door-Icon", "de": "Tür Auf-Bild", "ru": "Открыть дверь-Картинка"},
|
||
"openDoorValue": {"en": "Open Door-Value", "de": "Tür Auf-Wert", "ru": "Открыть дверь-Значение"},
|
||
"openDoorStyle": {"en": "Open Door-Style", "de": "Tür Auf-Still", "ru": "Открыть дверь-Стиль"},
|
||
"showTimeout": {"en": "Popup timeout", "de": "Popup-Timeout", "ru": "Popup таймаут"},
|
||
"val_false": {"en": "Off value", "de": "Aus-Wert", "ru": "Выкл.-Значение"},
|
||
"val_true": {"en": "On value", "de": "An-Wert", "ru": "Вкл.-Значение"},
|
||
"invert": {"en": "Invert", "de": "Invertieren", "ru": "Инвертировать"},
|
||
"infoLeftPaddingLeft": {"en": "Left padding (left)", "de": "Linker Abstand (Links)", "ru": "Отступ слева (левый текст)"},
|
||
"infoLeftPaddingRight": {"en": "Right padding (left", "de": "Rechter Abstand (Links)", "ru": "Отступ справа (левый текст)"},
|
||
"infoRightPaddingLeft": {"en": "Left padding (right)", "de": "Linker Abstand (Rechts)", "ru": "Отступ слева (правый текст)"},
|
||
"infoRightPaddingRight": {"en": "Right padding (right)", "de": "Rechter Abstand (Rechts)", "ru": "Отступ справа (правый текст)"},
|
||
"valveBinary": {"en": "Valve only On/Off", "de": "Ventil nur An/Aus", "ru": "Вентиль только Откр/Закр"}
|
||
});
|
||
}
|
||
|
||
$.extend(true, systemDictionary, {
|
||
"just now": {"en": "just now", "de": "gerade jetzt", "ru": "только что"},
|
||
"for %s min.": {"en": "for %s min.", "de": "vor %s Min.", "ru": "%s мин. назад"},
|
||
// plural hours
|
||
"forHours": {
|
||
"en": "for %s hrs. and %s min.",
|
||
"de": "vor %s St. und %s Min.",
|
||
"ru": "%s часов и %s мин. назад"
|
||
},
|
||
// singular hour
|
||
"for1Hour": {
|
||
"en": "for %s hr. and %s min.",
|
||
"de": "vor %s St. und %s Min.",
|
||
"ru": "%s час и %s мин. назад"
|
||
},
|
||
// 2-4 hour
|
||
"for2-4Hours": {
|
||
"en": "for %s hr. and %s min.",
|
||
"de": "vor %s St. und %s Min.",
|
||
"ru": "%s часа и %s мин. назад"
|
||
},
|
||
"yesterday": {"en": "yesterday", "de": "gestern", "ru": "вчера"},
|
||
"for %s hours": {"en": "for %s hours", "de": "vor %s Stunden", "ru": "%s ч. назад"},
|
||
"Chart": {"en": "Chart", "de": "Grafik", "ru": "График"},
|
||
"opened": {"en": "opened", "de": "auf", "ru": "откр."},
|
||
"closed": {"en": "closed", "de": "zu", "ru": "закр."}
|
||
});
|
||
// widget can has following parts:
|
||
// left info (descriptionLeft)
|
||
// right info (additional info)
|
||
// working/cancel icon
|
||
// center icon
|
||
// main form
|
||
// <div class="vis-widget-body">
|
||
// <div class="vis-hq-rightinfo" style='position: absolite; z-index: 0"></div>
|
||
// <div class="vis-hq-leftinfo" style='position: absolite; z-index: 0"></div>
|
||
// <div class="vis-hq-main" style='z-index: 1">
|
||
// <div class="vis-hq-icon" style='z-index: 1"></div>
|
||
// <div class="vis-hq-text" style='z-index: 1"></div>
|
||
// </div>
|
||
// <div class="vis-hq-info-icon" style='position: absolite; z-index: 2"></div>
|
||
// </div>
|
||
|
||
vis.binds.hqwidgets = {
|
||
version: "1.1.2",
|
||
contextEnabled: true,
|
||
zindex: [],
|
||
preventDefault: function (e) {
|
||
e.preventDefault();
|
||
},
|
||
contextMenu: function (isEnable) {
|
||
if (isEnable && !vis.binds.hqwidgets.contextEnabled) {
|
||
vis.binds.hqwidgets.contextEnabled = true;
|
||
document.removeEventListener('contextmenu', vis.binds.hqwidgets.preventDefault, false);
|
||
}
|
||
if (!isEnable && vis.binds.hqwidgets.contextEnabled) {
|
||
vis.binds.hqwidgets.contextEnabled = false;
|
||
document.addEventListener('contextmenu', vis.binds.hqwidgets.preventDefault, false);
|
||
}
|
||
},
|
||
showVersion: function () {
|
||
if (vis.binds.hqwidgets.version) {
|
||
console.log('Version vis-hqwidgets: ' + vis.binds.hqwidgets.version);
|
||
vis.binds.hqwidgets.version = null;
|
||
}
|
||
},
|
||
getTimeInterval: function (oldTime, hoursToShow) {
|
||
// if less than 2000.01.01 00:00:00
|
||
if (oldTime < 946681200000) oldTime = oldTime * 1000;
|
||
|
||
var result = '';
|
||
|
||
var newTime = new Date ();
|
||
|
||
if (!oldTime) return '';
|
||
if (typeof oldTime === 'string') {
|
||
oldTime = new Date(oldTime);
|
||
} else {
|
||
if (typeof oldTime === 'number') {
|
||
oldTime = new Date(oldTime);
|
||
}
|
||
}
|
||
|
||
var seconds = (newTime.getTime() - oldTime.getTime ()) / 1000;
|
||
|
||
if (hoursToShow && (seconds / 3600) > hoursToShow) return '';
|
||
|
||
if (seconds < 60) {
|
||
result = _('just now');
|
||
} else
|
||
if (seconds <= 3600) {
|
||
result = _('for %s min.', Math.floor(seconds / 60));
|
||
}
|
||
else
|
||
if (seconds <= 3600 * 24) { // between 1 und 24 hours
|
||
var hrs = Math.floor(seconds / 3600);
|
||
if (hrs === 1 || hrs === 21) {
|
||
result = _('for1Hour', hrs, (Math.floor(seconds / 60) % 60));
|
||
} else if (hrs >= 2 && hrs <= 4) {
|
||
result = _('for2-4Hours', hrs, (Math.floor(seconds / 60) % 60));
|
||
} else {
|
||
result = _('forHours', hrs, (Math.floor(seconds / 60) % 60));
|
||
}
|
||
}
|
||
else
|
||
if (seconds > 3600 * 24 && seconds <= 3600 * 48) {
|
||
result = _('yesterday');
|
||
}
|
||
else
|
||
if (seconds > 3600 * 48) { // over 2 days
|
||
result = _('for %s hours', Math.floor(seconds / 3600));
|
||
}
|
||
|
||
return result;
|
||
},
|
||
button: {
|
||
showRightInfo: function ($div, value) {
|
||
var data = $div.data('data');
|
||
|
||
var time = null;
|
||
var timer = null;
|
||
if (data.hoursLastAction) {
|
||
// show time interval. It must be updated every minute
|
||
if (data.timeAsInterval) {
|
||
time = vis.binds.hqwidgets.getTimeInterval(data.lc, data.hoursLastAction);
|
||
$div.find('.vis-hq-time').html(time);
|
||
if (!vis.editMode) {
|
||
timer = $div.data('lastTimer');
|
||
if (!timer) {
|
||
timer = setInterval(function () {
|
||
var time = vis.binds.hqwidgets.getTimeInterval(data.lc, data.hoursLastAction);
|
||
$div.find('.vis-hq-time').html(time);
|
||
|
||
if (time && $div.find('.vis-hq-time').text()){
|
||
$div.find('.vis-hq-rightinfo').show();
|
||
} else {
|
||
$div.find('.vis-hq-rightinfo').hide();
|
||
}
|
||
}, 60000);
|
||
|
||
$div.data('lastTimer', timer);
|
||
}
|
||
}
|
||
|
||
} else {
|
||
// Show static date
|
||
time = vis.binds.basic.formatDate(data.lc, data.format_date);
|
||
$div.find('.vis-hq-time').html(time);
|
||
}
|
||
}
|
||
|
||
// Kill timer if not required
|
||
if (!timer) {
|
||
var t = $div.data('lastTimer');
|
||
if (t) clearTimeout(t);
|
||
}
|
||
|
||
// Set number value
|
||
var text = null;
|
||
if (data.wType === 'number' && data.oid) {
|
||
var html = ((value === undefined || value === null) ? data.min : value) + ((data.unit === undefined) ? '' : data.unit);
|
||
if (data.drive !== undefined) {
|
||
html += '<br><span class="vis-hq-drive">' + data.drive + '</span>';
|
||
if (!data.valveBinary) html += '%';
|
||
}
|
||
text = $div.find('.vis-hq-rightinfo-text').html(html);
|
||
}
|
||
|
||
// Hide right info if empty
|
||
if (data.infoRight || time || (text && text.text())) {
|
||
$div.find('.vis-hq-rightinfo').show();
|
||
} else {
|
||
$div.find('.vis-hq-rightinfo').hide();
|
||
}
|
||
|
||
},
|
||
showCenterInfo: function ($div, isHide, reInit) {
|
||
var data = $div.data('data');
|
||
if (!data) return;
|
||
|
||
var $c = $div.find('.vis-hq-centerinfo');
|
||
if (reInit || data.humidity !== undefined || data.actual !== undefined) {
|
||
if (isHide) {
|
||
$c.hide();
|
||
$div.find('.vis-hq-middle').css('opacity', 1);
|
||
} else {
|
||
if (!$div.is(':visible')) {
|
||
if (!data.showCenterInfo) {
|
||
data.showCenterInfo = setTimeout(function () {
|
||
data.showCenterInfo = null;
|
||
vis.binds.hqwidgets.button.showCenterInfo($div, isHide, reInit);
|
||
}, 1000);
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (reInit || !$c.length) {
|
||
$c.remove();
|
||
var text = '<table class="vis-hq-centerinfo vis-hq-no-space" style="z-index: 2;position: absolute' + (data.midTextColor ? ';color: ' + data.midTextColor : '') + '">';
|
||
|
||
if (data.actual !== undefined) {
|
||
text += '<tr class="vis-hq-actual-style vis-hq-no-space"><td class="vis-hq-no-space"><span class="vis-hq-actual"></span>' + ((data.unit === undefined) ? '' : data.unit) + '</tr>';
|
||
}
|
||
if (data.humidity !== undefined) {
|
||
text += '<tr class="vis-hq-humidity-style vis-hq-no-space"><td class="vis-hq-no-space"><span class="vis-hq-humidity"></span>%</td></tr>';
|
||
}
|
||
|
||
text += '</table>';
|
||
$div.find('.vis-hq-main').prepend(text);
|
||
$c = $div.find('.vis-hq-centerinfo');
|
||
} else {
|
||
$c.show();
|
||
}
|
||
$div.find('.vis-hq-middle').css('opacity', 0.7);
|
||
if (data.actual !== undefined && data.actual !== null) {
|
||
if (typeof data.actual !== 'number') data.actual = parseFloat(data.actual) || 0;
|
||
$div.find('.vis-hq-actual').html((data.digits !== null) ? (data.actual || 0).toFixed(data.digits) : (data.actual || 0));
|
||
}
|
||
|
||
if (data.humidity !== undefined && data.humidity !== null) {
|
||
if (typeof data.humidity !== 'number') data.humidity = parseFloat(data.humidity) || 0;
|
||
$div.find('.vis-hq-humidity').html(Math.round(data.humidity || 0));
|
||
}
|
||
|
||
var $main = $div.find('.vis-hq-main');
|
||
if ($c.length) {
|
||
$c.css({
|
||
top: ($main.height() - $c.height()) / 2,
|
||
left: ($main.width() - $c.width()) / 2
|
||
});
|
||
}
|
||
}
|
||
} else {
|
||
$c.hide();
|
||
}
|
||
},
|
||
centerImage: function ($div, data, $img) {
|
||
// find the right position for image and caption in the middle
|
||
var $main = $div.find('.vis-hq-main');
|
||
if (!$img) $img = $div.find('.vis-hq-icon-img');
|
||
|
||
if (data.offsetAuto) {
|
||
if (!$div.is(':visible')) {
|
||
if (!data.centerImage) {
|
||
data.centerImage = setTimeout(function () {
|
||
data.centerImage = null;
|
||
vis.binds.hqwidgets.button.centerImage($div, data, $img);
|
||
}, 1000);
|
||
}
|
||
} else {
|
||
var $middle = $div.find('.vis-hq-table');
|
||
$middle.css({
|
||
left: ($main.width() - $middle.width()) / 2,
|
||
top: ($main.height() - $middle.height()) / 2
|
||
});
|
||
$img.load(function () {
|
||
var $middle = $div.find('.vis-hq-table');
|
||
$middle.css({
|
||
left: ($main.width() - $middle.width()) / 2,
|
||
top: ($main.height() - $middle.height()) / 2
|
||
});
|
||
});
|
||
}
|
||
}
|
||
},
|
||
// Calculate state of button
|
||
changeState: function ($div, isInit, isForce, isOwn) {
|
||
var data = $div.data('data');
|
||
if (!data) return;
|
||
|
||
var value = (data.tempValue !== undefined) ? data.tempValue : data.value;
|
||
|
||
if (!isForce && data.oldValue !== undefined && data.oldValue == value && !data.ack) return;
|
||
|
||
if (data.wType === 'number') {
|
||
value = parseFloat((value || 0).toString().replace(',', '.'));
|
||
}
|
||
data.oldValue = value;
|
||
|
||
if (data.temperature) {
|
||
data.state = 'normal';
|
||
} else if (value == data.min) {
|
||
data.state = 'normal';
|
||
} else if (value == data.max) {
|
||
data.state = 'active';
|
||
} else if (data.max &&
|
||
(value === null ||
|
||
value === '' ||
|
||
value === undefined ||
|
||
value === 'false' ||
|
||
value === false)) {
|
||
data.state = 'normal';
|
||
} else {
|
||
if (data.wType === 'number') {
|
||
if (data.max) {
|
||
if (value > data.min) {
|
||
data.state = 'active';
|
||
} else {
|
||
data.state = 'normal';
|
||
}
|
||
} else if (value) {
|
||
data.state = 'active';
|
||
} else {
|
||
data.state = 'normal';
|
||
}
|
||
} else {
|
||
if (data.max) {
|
||
if (value == data.max) {
|
||
data.state = 'active';
|
||
} else {
|
||
data.state = 'normal';
|
||
}
|
||
} else if (value) {
|
||
data.state = 'active';
|
||
} else {
|
||
data.state = 'normal';
|
||
}
|
||
}
|
||
}
|
||
|
||
if (vis.editMode && data.testActive) {
|
||
data.state = (data.state === 'normal') ? 'active' : 'normal';
|
||
}
|
||
|
||
if (value !== null && value !== undefined) {
|
||
$div.find('.vis-hq-nodata').remove();
|
||
}
|
||
|
||
switch (data.state) {
|
||
case 'normal':
|
||
$('#' + data.wid + ' .vis-hq-main')
|
||
.removeClass(data.styleActive)
|
||
.addClass(data.styleNormal);
|
||
|
||
if (data.iconName || data.iconOn) {
|
||
var $img = $div.find('.vis-hq-icon-img');
|
||
|
||
if ($img.attr('src') !== (data.iconName || '')) {
|
||
$img.attr('src', (data.iconName || ''));
|
||
vis.binds.hqwidgets.button.centerImage($div, data, $img);
|
||
}
|
||
}
|
||
if (data.captionOn) {
|
||
$div.find('.vis-hq-text-caption').html(data.caption || '');
|
||
}
|
||
break;
|
||
case 'active':
|
||
$('#' + data.wid + ' .vis-hq-main')
|
||
.removeClass(data.styleNormal)
|
||
.addClass(data.styleActive);
|
||
|
||
if (data.iconName || data.iconOn) {
|
||
var $img = $div.find('.vis-hq-icon-img');
|
||
|
||
if ($img.attr('src') !== (data.iconOn || data.iconName)) {
|
||
$img.attr('src', (data.iconOn || data.iconName));
|
||
vis.binds.hqwidgets.button.centerImage($div, data, $img);
|
||
}
|
||
}
|
||
if (data.captionOn) {
|
||
$div.find('.vis-hq-text-caption').html(data.captionOn);
|
||
}
|
||
break;
|
||
}
|
||
if (data.digits !== null && value !== null && value !== undefined) {
|
||
if (typeof value !== 'number') value = parseFloat(value) || 0;
|
||
value = value.toFixed(data.digits);
|
||
}
|
||
if (data.is_comma && value) value = value.toString().replace('.', ',');
|
||
|
||
vis.binds.hqwidgets.button.showRightInfo($div, value);
|
||
|
||
if ((!data.ack && !data['oid-working']) || (data['oid-working'] && data.working)) {
|
||
$div.find('.vis-hq-working').show();
|
||
} else {
|
||
$div.find('.vis-hq-working').hide();
|
||
}
|
||
|
||
if (data['oid-battery']) $div.batteryIndicator('show', data.battery || false);
|
||
|
||
if (data['oid-signal']) {
|
||
$div.find('.vis-hq-signal').html(data.signal);
|
||
}
|
||
|
||
if (data['oid-humidity']) {
|
||
var $h = $div.find('.vis-hq-humidity');
|
||
if (!$h.length) {
|
||
vis.binds.hqwidgets.button.showCenterInfo($div, false, true);
|
||
} else {
|
||
$h.html(Math.round(data.humidity || 0));
|
||
}
|
||
}
|
||
|
||
if (data['oid-actual']) {
|
||
var $a = $div.find('.vis-hq-actual');
|
||
if (!$a.length) {
|
||
vis.binds.hqwidgets.button.showCenterInfo($div, false, true);
|
||
} else {
|
||
if (typeof data.actual !== 'number') data.actual = parseFloat(data.actual) || 0;
|
||
$a.html((data.digits !== null) ? (data.actual || 0).toFixed(data.digits) : (data.actual || 0));
|
||
}
|
||
}
|
||
|
||
if (data['oid-drive']) {
|
||
$div.find('.vis-hq-drive').html(data.drive || 0);
|
||
}
|
||
|
||
// Show change effect
|
||
if (data.changeEffect && ((!isInit && !isOwn) || (vis.editMode && data.testActive))) {
|
||
var $main = $div.find('.vis-hq-main');
|
||
$main.animateDiv(data.changeEffect, {color: data.waveColor});
|
||
}
|
||
},
|
||
draw: function ($div) {
|
||
if (!$div.is(':visible')) {
|
||
setTimeout(function () {
|
||
vis.binds.hqwidgets.button.draw($div);
|
||
}, 100);
|
||
return;
|
||
}
|
||
|
||
var data = $div.data('data');
|
||
data.state = data.state || 'normal';
|
||
var radius = $div.css('borderTopLeftRadius') || vis.views[data.view].widgets[data.wid].style['border-radius'];
|
||
|
||
// place left-info, right-info, caption and image
|
||
if (!$div.find('.vis-hq-main').length) {
|
||
var text = '';
|
||
if (!data.descriptionLeftDisabled && data.descriptionLeft) {
|
||
if (data.infoLeftPaddingLeft === undefined || data.infoLeftPaddingLeft === null) data.infoLeftPaddingLeft = '15px';
|
||
if (data.infoLeftPaddingRight === undefined || data.infoLeftPaddingRight === null) data.infoLeftPaddingRight = '50px';
|
||
if (!data.infoLeftPaddingLeft.match(/px$|rem$|em$/)) data.infoLeftPaddingLeft = data.infoLeftPaddingLeft + 'px';
|
||
if (!data.infoLeftPaddingRight.match(/px$|rem$|em$/)) data.infoLeftPaddingRight = data.infoLeftPaddingRight + 'px';
|
||
|
||
text += '<div class="vis-hq-leftinfo" style="padding-left: ' + data.infoLeftPaddingLeft + '; padding-right: ' + data.infoLeftPaddingRight + '; font-size: ' + (data.infoLeftFontSize || 12) + 'px' + (data.infoColor ? ';color: ' + data.infoColor : '') + (data.infoBackground ? ';background: ' + data.infoBackground : '') + '"><span class="vis-hq-leftinfo-text">' +
|
||
(data.descriptionLeft || '').replace(/\s/g, ' ').replace(/\\n/g, '<br>') + '</span></div>\n';
|
||
}
|
||
if (data.infoRight || data.wType === 'number' || data.hoursLastAction) {
|
||
if (data.infoRightPaddingLeft === undefined || data.infoRightPaddingLeft === null) data.infoRightPaddingLeft = 0;
|
||
if (data.infoRightPaddingRight === undefined || data.infoRightPaddingRight === null) data.infoRightPaddingRight = '15px';
|
||
if (!data.infoRightPaddingRight.match(/px$|rem$|em$/)) data.infoRightPaddingRight = data.infoRightPaddingRight + 'px';
|
||
|
||
text += '<div class="vis-hq-rightinfo" style="padding-right: ' + data.infoRightPaddingRight + '; font-size: ' + (data.infoFontRightSize || 12) + 'px' + (data.infoColor ? ';color: ' + data.infoColor : '') + (data.infoBackground ? ';background: ' + data.infoBackground : '') + '"><span class="vis-hq-rightinfo-text">' +
|
||
(data.infoRight || '').replace(/\s/g, ' ').replace(/\\n/g, '<br>') + '</span>';
|
||
|
||
if (data.hoursLastAction) {
|
||
if (data.infoRight || data.wType === 'number') text += '<br>';
|
||
text += '<span class="vis-hq-time"></span>';
|
||
}
|
||
|
||
text += '</div>\n';
|
||
}
|
||
text += '<div class="vis-hq-main" style="z-index: 1"><div class="vis-hq-middle">\n';
|
||
|
||
if (data.offsetAuto) {
|
||
text += '<table class="vis-hq-table vis-hq-no-space" style="position: absolute"><tr class="vis-hq-no-space"><td class="vis-hq-no-space"><div class="vis-hq-icon" style="text-align: center;"></div></td>\n';
|
||
} else {
|
||
text += '<table class="vis-hq-table vis-hq-no-space" style="position: absolute;top:' + data.topOffset + '%;left:' + data.leftOffset + '%"><tr class="vis-hq-no-space"><td class="vis-hq-no-space"><div class="vis-hq-icon" style="text-align: center;"></div></td>\n';
|
||
}
|
||
|
||
if (data.caption || data.captionOn) {
|
||
if ($div.height() > $div.width()) text += '</tr><tr class="vis-hq-no-space">';
|
||
text += '<td class="vis-hq-no-space"><div class="vis-hq-text-caption" style="text-align: center;"></div></td>';
|
||
}
|
||
|
||
text += '</tr></table></div></div></div>';
|
||
$div.append(text);
|
||
}
|
||
|
||
// Get the border radius from parent
|
||
var $main = $div.find('.vis-hq-main');
|
||
$main.css({'border-radius': radius});
|
||
$div.find('.vis-hq-text-caption').html(data.caption || '');
|
||
|
||
var width = $div.width();
|
||
var offset = width - 20 - parseInt(radius, 10);
|
||
if (offset < width / 2) offset = width / 2;
|
||
$div.find('.vis-hq-leftinfo').css({right: offset + 'px'});
|
||
$div.find('.vis-hq-rightinfo').css({'padding-left': (5 + (width / 2) + (parseInt(data.infoRightPaddingLeft, 10) || 0)) + 'px'});
|
||
|
||
// Place icon
|
||
var img = null;
|
||
if (data.iconName || data.iconOn) {
|
||
img = (data.state === 'normal') ? (data.iconName || '') : (data.iconOn || '');
|
||
$div.find('.vis-hq-icon').html('<img class="vis-hq-icon-img" style="height: ' + data.btIconWidth + 'px; width: auto;" src="' + (img || '') + '"/>').css('opacity', img ? 1 : 0);
|
||
} else {
|
||
$div.find('.vis-hq-icon').html('');
|
||
}
|
||
|
||
if (data['oid-battery']) $div.batteryIndicator();
|
||
|
||
if (data['oid-working']) {
|
||
$div.append('<div class="vis-hq-working"><span class="ui-icon ui-icon-gear"></span></div>');
|
||
}
|
||
|
||
// find the right position for image and caption in the middle
|
||
if (data.offsetAuto) {
|
||
vis.binds.hqwidgets.button.centerImage($div, data);
|
||
}
|
||
|
||
function onChange(e, newVal, oldVal) {
|
||
if (e.type === data.oid + '.val') {
|
||
if (data.wType === 'number') {
|
||
data.value = parseFloat(newVal || 0);
|
||
} else {
|
||
data.value = newVal;
|
||
}
|
||
data.ack = vis.states[data.oid + '.ack'];
|
||
data.lc = vis.states[data.oid + '.lc'];
|
||
|
||
if (data.wType === 'number') {
|
||
if (newVal === false || newVal === 'false') data.value = data.min;
|
||
if (newVal === true || newVal === 'true') data.value = data.max;
|
||
}
|
||
data.tempValue = undefined;
|
||
|
||
vis.binds.hqwidgets.button.changeState($div);
|
||
|
||
if (data.wType === 'number') {
|
||
if (typeof data.value !== 'number') data.value = parseFloat(data.value) || 0;
|
||
$main.scala('value', (data.digits !== null) ? data.value.toFixed(data.digits) : data.value);
|
||
}
|
||
return;
|
||
} else if (e.type === data.oid + '.ack') {
|
||
data.ack = vis.states[data.oid + '.ack'];
|
||
data.lc = vis.states[data.oid + '.lc'];
|
||
|
||
vis.binds.hqwidgets.button.changeState($div);
|
||
return;
|
||
} else if (e.type === data['oid-working'] + '.val') {
|
||
data.working = newVal;
|
||
} else if (e.type === data['oid-battery'] + '.val') {
|
||
data.battery = newVal;
|
||
} else if (e.type === data['oid-signal'] + '.val') {
|
||
data.signal = newVal;
|
||
} else if (e.type === data['oid-humidity'] + '.val') {
|
||
data.humidity = newVal;
|
||
} else if (e.type === data['oid-actual'] + '.val') {
|
||
data.actual = newVal;
|
||
} else if (e.type === data['oid-drive'] + '.val') {
|
||
if (data.valveBinary === 'true' || data.valveBinary === true) {
|
||
if (newVal === null || newVal === undefined) newVal = 0;
|
||
if (newVal === 'true') {
|
||
newVal = true;
|
||
} else if (parseFloat(newVal).toString() === newVal.toString()) {
|
||
newVal = !!parseFloat(newVal);
|
||
} else if (newVal === 'false') {
|
||
newVal = false;
|
||
}
|
||
newVal = newVal ? _('opened') : _('closed');
|
||
}
|
||
|
||
data.drive = newVal;
|
||
}
|
||
vis.binds.hqwidgets.button.changeState($div, false, true);
|
||
}
|
||
|
||
// action
|
||
if (1 || !vis.editMode) {
|
||
|
||
var bound = [];
|
||
if (data.oid) {
|
||
|
||
$div.append('<div class="vis-hq-nodata"><span class="ui-icon ui-icon-cancel"></span></div>');
|
||
|
||
vis.states.bind(data.oid + '.val', onChange);
|
||
vis.states.bind(data.oid + '.ack', onChange);
|
||
bound.push(data.oid + '.val');
|
||
bound.push(data.oid + '.ack');
|
||
}
|
||
if (data['oid-working']) {
|
||
vis.states.bind(data['oid-working'] + '.val', onChange);
|
||
bound.push(data['oid-working'] + '.val');
|
||
}
|
||
|
||
if (data['oid-battery']) {
|
||
vis.states.bind(data['oid-battery'] + '.val', onChange);
|
||
bound.push(data['oid-battery'] + '.val');
|
||
}
|
||
|
||
if (data['oid-signal']) {
|
||
vis.states.bind(data['oid-signal'] + '.val', onChange);
|
||
bound.push(data['oid-signal'] + '.val');
|
||
}
|
||
|
||
if (data['oid-humidity']) {
|
||
vis.states.bind(data['oid-humidity'] + '.val', onChange);
|
||
bound.push(data['oid-humidity'] + '.val');
|
||
}
|
||
|
||
if (data['oid-actual']) {
|
||
vis.states.bind(data['oid-actual'] + '.val', onChange);
|
||
bound.push(data['oid-actual'] + '.val');
|
||
}
|
||
|
||
if (data['oid-drive']) {
|
||
vis.states.bind(data['oid-drive'] + '.val', onChange);
|
||
bound.push(data['oid-drive'] + '.val');
|
||
}
|
||
// remember all ids, that bound
|
||
$div.data('bound', bound);
|
||
// remember bind handler
|
||
$div.data('bindHandler', onChange);
|
||
}
|
||
|
||
// initiate state
|
||
vis.binds.hqwidgets.button.changeState($div, true);
|
||
|
||
// If dimmer or number
|
||
if (data.wType === 'number') {
|
||
var scalaOptions;
|
||
if (data.oid) {
|
||
scalaOptions = {
|
||
change: function (value, notAck) {
|
||
//console.log(data.wid + ' filtered out:' + value + '(' + notAck + ')');
|
||
if (!notAck) return;
|
||
|
||
if (data.readOnly || (data.value || 0).toString() === value.toString()) return;
|
||
|
||
data.value = parseFloat(value.toString().replace(',', '.'));
|
||
|
||
if (data.digits !== null) {
|
||
if (typeof data.value !== 'number') data.value = parseFloat(data.value) || 0;
|
||
data.value = data.value.toFixed(data.digits);
|
||
}
|
||
|
||
data.value = parseFloat(data.value) || 0;
|
||
data.ack = false;
|
||
data.tempValue = undefined;
|
||
|
||
vis.binds.hqwidgets.button.changeState($div, false, false, true);
|
||
vis.setValue(data.oid, data.value);
|
||
},
|
||
min: data.min,
|
||
max: data.max,
|
||
changing: function (value) {
|
||
// round to step
|
||
data.tempValue = Math.round(parseFloat(value) / data.step) * data.step;
|
||
vis.binds.hqwidgets.button.changeState($div, false, false, true);
|
||
},
|
||
click: function (val) {
|
||
val = data.value;
|
||
if (!data.temperature) {
|
||
if (val - data.min > ((data.max - data.min) / 2)) {
|
||
val = data.min;
|
||
} else {
|
||
val = data.max;
|
||
}
|
||
} else {
|
||
data.tempValue = undefined;
|
||
vis.binds.hqwidgets.button.changeState($div, false, false, true);
|
||
|
||
// Show dialog
|
||
if (data.url) $div.popupDialog('show');
|
||
}
|
||
return val;
|
||
},
|
||
alwaysShow: data.alwaysShow,
|
||
onshow: function () {
|
||
if (!data.alwaysShow) {
|
||
vis.binds.hqwidgets.button.showCenterInfo($div, true);
|
||
}
|
||
},
|
||
onhide: function () {
|
||
vis.binds.hqwidgets.button.showCenterInfo($div);
|
||
},
|
||
hideNumber: !data.showValue || (data.temperature && data.alwaysShow),
|
||
readOnly: vis.editMode || data.readOnly,
|
||
step: data.step,
|
||
digits: data.digits,
|
||
isComma: data.is_comma,
|
||
width: ((100 + parseInt(data.circleWidth || 50, 10)) * width / 100).toFixed(0)
|
||
};
|
||
}
|
||
|
||
// show for temperature color depends on value
|
||
if (data.temperature) {
|
||
vis.binds.hqwidgets.button.showCenterInfo($div);
|
||
|
||
if (scalaOptions) {
|
||
scalaOptions.color = 'black';
|
||
scalaOptions.colorize = function (color, value, isPrevious) {
|
||
var ratio = (value - data.min) / (data.max - data.min);
|
||
return 'hsla(' + (180 + Math.round(180 * ratio)) + ', 70%, 50%, ' + ((isPrevious) ? 0.7 : 0.9) + ')';
|
||
}
|
||
}
|
||
}
|
||
if (scalaOptions) {
|
||
$main.scala(scalaOptions);
|
||
$main.scala('value', data.value);
|
||
}
|
||
} else {
|
||
if (!data.oidFalse && data.oidTrue) data.oidFalse = data.oidTrue;
|
||
if (!data.urlFalse && data.urlTrue) data.urlFalse = data.urlTrue;
|
||
if (data.min === undefined || data.min === 'false' || data.min === null) data.min = false;
|
||
if (data.max === undefined || data.max === 'true' || data.max === null) data.max = true;
|
||
if (data.oidTrueVal === undefined || data.oidTrueVal === null) data.oidTrueVal = data.max;
|
||
if (data.oidTrueVal === 'false') data.oidTrueVal = false;
|
||
if (data.oidTrueVal === 'true') data.oidTrueVal = true;
|
||
if (data.oidFalseVal === undefined || data.oidFalseVal === null) data.oidFalseVal = data.min;
|
||
if (data.oidFalseVal === 'false') data.oidFalseVal = false;
|
||
if (data.oidFalseVal === 'true') data.oidFalseVal = true;
|
||
var f = parseFloat(data.oidFalseVal);
|
||
if (f.toString() == data.oidFalseVal) data.oidFalseVal = f;
|
||
|
||
f = parseFloat(data.oidTrueVal);
|
||
if (f.toString() == data.oidTrueVal) data.oidTrueVal = f;
|
||
|
||
f = parseFloat(data.min);
|
||
if (f.toString() == data.min) data.min = f;
|
||
|
||
f = parseFloat(data.max);
|
||
if (f.toString() == data.max) data.max = f;
|
||
|
||
if (!vis.editMode && !data.readOnly && (data.oid || data.urlFalse || data.urlTrue || data.oidFalse || data.oidTrue)) {
|
||
if (!data.pushButton) {
|
||
$main.on('click touchstart', function () {
|
||
// Protect against two events
|
||
if (vis.detectBounce(this)) return;
|
||
|
||
data.value = (data.state === 'normal') ? data.max : data.min;
|
||
data.ack = false;
|
||
|
||
vis.binds.hqwidgets.button.changeState($div, false, false, true);
|
||
|
||
if (data.oidTrue) {
|
||
if (data.state !== 'normal') {
|
||
vis.setValue(data.oidTrue, data.oidTrueVal);
|
||
} else {
|
||
vis.setValue(data.oidFalse, data.oidFalseVal);
|
||
}
|
||
}
|
||
|
||
if (data.urlTrue) {
|
||
if (data.state !== 'normal') {
|
||
vis.conn.httpGet(data.urlTrue)
|
||
} else {
|
||
vis.conn.httpGet(data.urlFalse);
|
||
}
|
||
}
|
||
|
||
// show new state
|
||
if (data.oid && data.oid !== 'nothing_selected') {
|
||
vis.setValue(data.oid, data.value);
|
||
}
|
||
});
|
||
} else {
|
||
$main.on('mousedown touchstart', function (e) {
|
||
// Protect against two events
|
||
if (vis.detectBounce(this)) return;
|
||
|
||
vis.binds.hqwidgets.contextMenu(false);
|
||
|
||
data.value = data.max;
|
||
data.ack = false;
|
||
vis.binds.hqwidgets.button.changeState($div, false, false, true);
|
||
|
||
if (data.oidTrue) vis.setValue(data.oidTrue, data.oidTrueVal);
|
||
if (data.urlTrue) vis.conn.httpGet(data.urlTrue);
|
||
if (data.oid && data.oid !== 'nothing_selected') vis.setValue(data.oid, data.value);
|
||
});
|
||
$main.on('mouseup touchend', function (e) {
|
||
|
||
// Protect against two events
|
||
if (vis.detectBounce(this, true)) return;
|
||
|
||
data.value = data.min;
|
||
data.ack = false;
|
||
vis.binds.hqwidgets.button.changeState($div, false, false, true);
|
||
|
||
if (data.oidFalse) vis.setValue(data.oidFalse, data.oidFalseVal);
|
||
if (data.urlFalse) vis.conn.httpGet(data.urlFalse);
|
||
if (data.oid && data.oid !== 'nothing_selected') vis.setValue(data.oid, data.value);
|
||
|
||
vis.binds.hqwidgets.contextMenu(true);
|
||
});
|
||
}
|
||
} else if (data.readOnly) {
|
||
$div.addClass('vis-hq-readonly');
|
||
}
|
||
}
|
||
|
||
// Chart dialog
|
||
if (data.url/* && !vis.editMode*/) {
|
||
$div.popupDialog({
|
||
content: '<iframe src="' + (data.url || '') + '" style="width: 100%; height: calc(100% - 5px); border: 0"></iframe>',
|
||
width: data.dialog_width,
|
||
height: data.dialog_height,
|
||
effect: data.dialog_effect,
|
||
timeout: data.dialog_timeout,
|
||
modal: data.dialog_modal,
|
||
title: data.dialog_title || data['oid-actual'],
|
||
open: data.dialog_open && vis.editMode
|
||
});
|
||
if (!data.oid) {
|
||
$main.on('click touchstart', function () {
|
||
// Protect against two events
|
||
if (vis.detectBounce(this)) return;
|
||
|
||
$div.popupDialog('show');
|
||
});
|
||
}
|
||
}
|
||
if (!data.oid && !data.url) {
|
||
$main.addClass('vis-hq-main-none');
|
||
$div.css({cursor: 'auto'});
|
||
}
|
||
},
|
||
init: function (wid, view, data, style, wType) {
|
||
vis.binds.hqwidgets.showVersion();
|
||
var $div = $('#' + wid).addClass('vis-hq-button-base');
|
||
if (!$div.length) {
|
||
setTimeout(function () {
|
||
vis.binds.hqwidgets.button.init(wid, view, data, style, wType);
|
||
}, 100);
|
||
return;
|
||
}
|
||
var _data = {wid: wid, view: view, wType: wType};
|
||
for (var a in data) {
|
||
if (!data.hasOwnProperty(a) || typeof data[a] === 'function') continue;
|
||
if (a[0] !== '_') {
|
||
_data[a] = data[a];
|
||
}
|
||
}
|
||
data = _data;
|
||
|
||
if (!data.wType) {
|
||
if (data.min === undefined || data.min === null || data.min === '') data.min = false;
|
||
if (data.max === undefined || data.max === null || data.max === '') data.max = true;
|
||
}
|
||
|
||
data.styleNormal = data.usejQueryStyle ? 'ui-state-default' : (data.styleNormal || 'vis-hq-button-base-normal');
|
||
data.styleActive = data.usejQueryStyle ? 'ui-state-active' : (data.styleActive || 'vis-hq-button-base-on');
|
||
data.digits = (data.digits || data.digits === 0) ? parseInt(data.digits, 10) : null;
|
||
if (typeof data.step === 'string') data.step = data.step.replace(',', '.');
|
||
data.step = parseFloat(data.step || 1);
|
||
data.is_comma = (data.is_comma === 'true' || data.is_comma === true);
|
||
data.readOnly = (data.readOnly === 'true' || data.readOnly === true);
|
||
data.midTextColor = data.midTextColor || '';
|
||
data.infoColor = data.infoColor || '';
|
||
data.infoBackground = data.infoBackground || 'rgba(182,182,182,0.6)';
|
||
data.pushButton = (data.pushButton === 'true' || data.pushButton === true);
|
||
|
||
if (data.wType === 'number') {
|
||
data.min = (data.min === 'true' || data.min === true) ? true : ((data.min === 'false' || data.min === false) ? false : ((data.min !== undefined) ? parseFloat(data.min) : 0));
|
||
data.max = (data.max === 'true' || data.max === true) ? true : ((data.max === 'false' || data.max === false) ? false : ((data.max !== undefined) ? parseFloat(data.max) : 100));
|
||
} else {
|
||
data.min = (data.min === 'true' || data.min === true) ? true : ((data.min === 'false' || data.min === false) ? false : ((data.min !== undefined && data.min !== null && data.min !== '') ? data.min : 0));
|
||
data.max = (data.max === 'true' || data.max === true) ? true : ((data.max === 'false' || data.max === false) ? false : ((data.max !== undefined && data.max !== null && data.max !== '') ? data.max : 100));
|
||
}
|
||
$div.data('data', data);
|
||
$div.data('style', style);
|
||
|
||
if (data.oid) {
|
||
data.value = vis.states.attr(data.oid + '.val');
|
||
data.ack = vis.states.attr(data.oid + '.ack');
|
||
data.lc = vis.states.attr(data.oid + '.lc');
|
||
}
|
||
|
||
if (data['oid-working']) data.working = vis.states.attr(data['oid-working'] + '.val');
|
||
if (data['oid-battery']) data.battery = vis.states.attr(data['oid-battery'] + '.val');
|
||
if (data['oid-signal']) data.signal = vis.states.attr(data['oid-signal'] + '.val');
|
||
if (data['oid-humidity']) data.humidity = vis.states.attr(data['oid-humidity'] + '.val');
|
||
if (data['oid-actual']) data.actual = vis.states.attr(data['oid-actual'] + '.val');
|
||
if (data['oid-drive']) {
|
||
var val = vis.states.attr(data['oid-drive'] + '.val');
|
||
if (val === null || val === undefined) val = 0;
|
||
if (data.valveBinary === 'true' || data.valveBinary === true) {
|
||
if (val === 'true') {
|
||
val = true;
|
||
} else if (parseFloat(val).toString() === val.toString()) {
|
||
val = !!parseFloat(val);
|
||
} else if (val === 'false') {
|
||
val = false;
|
||
}
|
||
val = val ? _('opened') : _('closed');
|
||
}
|
||
data.drive = val;
|
||
}
|
||
|
||
vis.binds.hqwidgets.button.draw($div);
|
||
}
|
||
},
|
||
window: {
|
||
drawOneWindow: function (index, options) {
|
||
var bWidth = options.border_width;
|
||
var div1 = '<div class="hq-blind-blind1" style="' +
|
||
'border-width: ' + bWidth + 'px;' + //'px 2px 2px 2px; ' +
|
||
'border-color: #a9a7a8;' +
|
||
'">';
|
||
|
||
var div2 = '<div class="hq-blind-blind2" style="' +
|
||
'border-width: ' + bWidth + 'px; ' +
|
||
'">';
|
||
options.shutterPos = options.shutterPos || 0;
|
||
|
||
var div3 = '<div class="hq-blind-blind3"><table class="vis-hq-no-space" style="width: 100%; height: 100%; position: absolute"><tr class="vis-hq-no-space hq-blind-position" style="height: ' + options.shutterPos + '%"><td class="vis-hq-no-space hq-blind-blind"></td></tr><tr class="vis-hq-no-space" style="height: ' + (100 - options.shutterPos) + '%"><td class="vis-hq-no-space"></td></tr></table>';
|
||
|
||
var hanldePos = null;
|
||
var slidePos = null;
|
||
|
||
if (options.handleOid) {
|
||
hanldePos = vis.states[options.handleOid + '.val'];
|
||
/* problem ?? */
|
||
if (hanldePos == 2) {
|
||
hanldePos = 1;
|
||
} else if (hanldePos == 1) {
|
||
hanldePos = 2;
|
||
}
|
||
slidePos = hanldePos;
|
||
}
|
||
if (options.slideOid) {
|
||
slidePos = vis.states[options.slideOid + '.val'];
|
||
if (!options.handleOid) hanldePos = slidePos;
|
||
if (hanldePos == 2) slidePos = 2;
|
||
}
|
||
|
||
var div4 = '<div class="hq-blind-blind4';
|
||
if ((slidePos == 1 || slidePos === true || slidePos === 'true' || slidePos === 'open' || slidePos === 'opened') && options.type) {
|
||
div4 +=' hq-blind-blind4-opened-' + options.type;
|
||
}
|
||
if ((slidePos == 2 || slidePos === 'tilt' || slidePos === 'tilted') && options.type) {
|
||
div4 +=' hq-blind-blind4-tilted';
|
||
}
|
||
options.shutterPos = options.shutterPos || 0;
|
||
div4 +='" style="' +
|
||
'border-width: ' + bWidth + 'px;' + //'3px 1px 1px 1px;' +
|
||
'border-color: #a5aaad;' +
|
||
'">';
|
||
|
||
var div5 = '';
|
||
|
||
//console.log('HOID: ' + options.handleOid + ', ' + hanldePos);
|
||
if (options.type) {
|
||
div5 = '<div class="hq-blind-handle hq-blind-handle-bg';
|
||
if (hanldePos == 2 || hanldePos === 'tilt' || hanldePos === 'tilted') {
|
||
div5 += ' hq-blind-handle-tilted-bg';
|
||
}
|
||
var bbWidth = Math.round(bWidth / 3);
|
||
if (bbWidth < 1) bbWidth = 1;
|
||
div5 += '" style="border-width: ' + bbWidth + 'px;';
|
||
if (options.type === 'left' || options.type === 'right') {
|
||
div5 += 'top: 50%; width: ' + bWidth + 'px; height: 15%;'
|
||
} else if (options.type === 'top' || options.type === 'bottom') {
|
||
div5 += 'left: 50%; height: ' + bWidth + 'px; width: 15%;'
|
||
}
|
||
if (options.type === 'left') {
|
||
div5 += 'left: calc(100% - ' + (bbWidth * 2 + bWidth) + 'px);'
|
||
} else if (options.type === 'bottom') {
|
||
div5 += 'top: calc(100% - ' + (bbWidth * 2 + bWidth) + 'px);'
|
||
}
|
||
|
||
if (hanldePos) {
|
||
var format =
|
||
'-moz-transform-origin: ------;' +
|
||
'-ms-transform-origin: ------;' +
|
||
'-o-transform-origin: ------;' +
|
||
'-webkit-transform-origin: ------;' +
|
||
'transform-origin: ------;' +
|
||
'-moz-transform: rotate(DDDdeg);' +
|
||
'-ms-transform: rotate(DDDdeg);' +
|
||
'-o-transform: rotate(DDDdeg);' +
|
||
'-webkit-transform: rotate(DDDdeg);' +
|
||
'transform: rotate(DDDdeg);';
|
||
|
||
var w = Math.round(bbWidth + bWidth / 2);
|
||
if (options.type === 'right' || options.type === 'bottom') {
|
||
if (hanldePos == 1 || hanldePos === true || hanldePos === 'true' || hanldePos === 'open' || hanldePos === 'opened') {
|
||
div5 += format.replace(/------/g, w + 'px ' + w + 'px').replace(/DDD/g, '-90');
|
||
} else
|
||
if (hanldePos == 2 || hanldePos === 'tilt' || hanldePos === 'tilted') {
|
||
div5 += format.replace(/------/g, w + 'px ' + w + 'px').replace(/DDD/g, '180');
|
||
}
|
||
} else {
|
||
if (hanldePos == 1 || hanldePos === true || hanldePos === 'true' || hanldePos === 'open' || hanldePos === 'opened') {
|
||
div5 += format.replace(/------/g, w + 'px ' + w + 'px').replace(/DDD/g, '90');
|
||
} else
|
||
if (hanldePos == 2 || hanldePos === 'tilt' || hanldePos === 'tilted') {
|
||
div5 += format.replace(/------/g, w + 'px ' + w + 'px').replace(/DDD/g, '180');
|
||
}
|
||
}
|
||
}
|
||
|
||
div5 += '"></div>';
|
||
}
|
||
|
||
return div1 + div2 + div3 + div4 + div5 + '</div></div></div></div></div>';
|
||
},
|
||
hidePopup: function ($div) {
|
||
var data = $div.data('data');
|
||
if (!data) return;
|
||
|
||
for (var z = 0; z < vis.binds.hqwidgets.zindex.length; z++) {
|
||
if (vis.binds.hqwidgets.zindex[z] === $div.css('z-index')) {
|
||
vis.binds.hqwidgets.zindex.splice(z, 1);
|
||
break;
|
||
}
|
||
}
|
||
|
||
var $big = $div.find('.hq-blind-big');
|
||
if (data.noAnimate) {
|
||
//$big.makeSlider('hide');
|
||
setTimeout(function () {
|
||
$big.find('.hq-blind-big-slider').makeSlider('hide');
|
||
$big.hide();
|
||
$big.data('show', false);
|
||
// restore zindex
|
||
$div.css('z-index', $div.data('zindex'));
|
||
}, 200);
|
||
} else {
|
||
$big.animate({width: $div.width(), height: $div.height(), opacity: 0, top: 0, left: 0}, 500, 'swing', function () {
|
||
$big.find('.hq-blind-big-slider').makeSlider('hide');
|
||
$big.hide();
|
||
$big.data('show', false);
|
||
// restore zindex
|
||
$div.css('z-index', $div.data('zindex'));
|
||
});
|
||
}
|
||
|
||
},
|
||
openPopup: function ($div) {
|
||
var data = $div.data('data');
|
||
if (!data) return;
|
||
|
||
// make temporary z-index maximal
|
||
var zindex = $div.data('zindex');
|
||
// remember z-index
|
||
if (zindex === null || zindex === undefined) {
|
||
zindex = $div.css('z-index');
|
||
$div.data('zindex', zindex);
|
||
}
|
||
// find maximal z-index
|
||
var zindexMax = 900;
|
||
/*$('.vis-widget').each(function () {
|
||
var z = $(this).css('z-index');
|
||
if (z > zindexMax) zindexMax = z;
|
||
});*/
|
||
for (var z = 0; z < vis.binds.hqwidgets.zindex.length; z++) {
|
||
if (vis.binds.hqwidgets.zindex[z] > zindexMax) zindexMax = vis.binds.hqwidgets.zindex[z];
|
||
}
|
||
zindexMax++;
|
||
|
||
// set this widget to maximal zindex
|
||
$div.css('z-index', zindexMax);
|
||
vis.binds.hqwidgets.zindex.push($div.css('z-index'));
|
||
|
||
var $big = $div.find('.hq-blind-big');
|
||
if (!$big.length) {
|
||
var text = '<table class="hq-blind-big vis-hq-no-space" style="display:none">' +
|
||
' <tr><td><div class="hq-blind-big-button hq-blind-big-button-up"></div></td></tr>' +
|
||
' <tr style="height: 100%"><td><div class="hq-blind-big-slider"></div></td></tr>' +
|
||
' <tr><td><div class="hq-blind-big-button hq-blind-big-button-down"></div></td></tr>' +
|
||
'</table>';
|
||
$div.append(text);
|
||
$div.find('.hq-blind-big-slider').makeSlider({
|
||
max: data.max,
|
||
min: data.min,
|
||
invert: !data.invert,
|
||
show: false,
|
||
relative: true,
|
||
value: data.value,
|
||
timeout: data.hide_timeout
|
||
}, function (newValue) {
|
||
vis.setValue(data.oid, newValue);
|
||
vis.binds.hqwidgets.window.hidePopup($div);
|
||
}, function () {
|
||
vis.binds.hqwidgets.window.hidePopup($div);
|
||
});
|
||
$div.find('.hq-blind-big-button-down').click(function () {
|
||
vis.setValue(data.oid, data.invert ? data.min : data.max);
|
||
vis.binds.hqwidgets.window.hidePopup($div);
|
||
});
|
||
$div.find('.hq-blind-big-button-up').click(function () {
|
||
vis.setValue(data.oid, data.invert ? data.max : data.min);
|
||
vis.binds.hqwidgets.window.hidePopup($div);
|
||
});
|
||
$big = $div.find('.hq-blind-big');
|
||
}
|
||
|
||
$big.data('show', true);
|
||
|
||
if (data.bigLeft === undefined) {
|
||
var pos = $div.position();
|
||
var w = $div.width();
|
||
var h = $div.height();
|
||
|
||
data.bigWidth = $big.width();
|
||
data.bigHeight = $big.height();
|
||
|
||
//default will still be center
|
||
var popUpHorPos = Math.round((h - data.bigHeight) / 2);
|
||
var popUpVerPos = Math.round((w - data.bigWidth) / 2);
|
||
|
||
if ( data.popupVerticalPos === "left" ) {
|
||
popUpVerPos = Math.round(w - data.bigWidth);
|
||
}
|
||
else if ( data.popupVerticalPos === "right" ) {
|
||
popUpVerPos = 0;
|
||
}
|
||
data.bigLeft = popUpVerPos;
|
||
|
||
|
||
if ( data.popupHorizontalPos === "top" ) {
|
||
popUpHorPos = Math.round(h - data.bigHeight);
|
||
}
|
||
else if ( data.popupHorizontalPos === "bottom" ) {
|
||
popUpHorPos = 0;
|
||
}
|
||
data.bigTop = popUpHorPos;
|
||
|
||
|
||
if (pos.top + data.bigTop < 0) data.bigTop = -pos.top;
|
||
if (pos.left + data.bigLeft < 0) data.bigLeft = -pos.left;
|
||
}
|
||
|
||
$big.css({top: data.bigTop, left: data.bigLeft});
|
||
|
||
if (data.noAnimate) {
|
||
$big.find('.hq-blind-big-slider').makeSlider('show', data.value);
|
||
$big.show();
|
||
} else {
|
||
$big.css({top:0, left: 0, width: $div.width(), height: $div.height(), opacity: 0}).show();
|
||
$big.find('.hq-blind-big-slider').makeSlider('show', data.value);
|
||
$big.animate({top: data.bigTop, left: data.bigLeft, width: data.bigWidth, height: data.bigHeight, opacity: 1}, 500);
|
||
}
|
||
},
|
||
draw: function ($div) {
|
||
var data = $div.data('data');
|
||
if (!data) return;
|
||
|
||
$div.css({
|
||
'padding-top': data.border_width,
|
||
'padding-bottom': data.border_width - 1,
|
||
'padding-right': data.border_width + 1,
|
||
'padding-left': data.border_width + 1
|
||
});
|
||
|
||
// get position
|
||
data.shutterPos = 0;
|
||
if (data.oid) {
|
||
data.value = vis.states[data.oid + '.val'];
|
||
data.shutterPos = data.value;
|
||
if (data.shutterPos === undefined || data.shutterPos === null) {
|
||
data.shutterPos = 0;
|
||
} else {
|
||
if (data.shutterPos < data.min) data.shutterPos = data.min;
|
||
if (data.shutterPos > data.max) data.shutterPos = data.max;
|
||
|
||
data.shutterPos = Math.round(100 * (data.shutterPos - data.min) / (data.max - data.min));
|
||
}
|
||
if (data.invert) data.shutterPos = 100 - data.shutterPos;
|
||
}
|
||
|
||
var text = '<table class="hq-blind vis-hq-no-space" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;"><tr>';
|
||
if (!data.descriptionLeftDisabled && data.descriptionLeft) {
|
||
if (data.infoLeftPaddingLeft === undefined || data.infoLeftPaddingLeft === null) data.infoLeftPaddingLeft = '15px';
|
||
if (data.infoLeftPaddingRight === undefined || data.infoLeftPaddingRight === null) data.infoLeftPaddingRight = '50px';
|
||
if (!data.infoLeftPaddingLeft.match(/px$|rem$|em$/)) data.infoLeftPaddingLeft = data.infoLeftPaddingLeft + 'px';
|
||
if (!data.infoLeftPaddingRight.match(/px$|rem$|em$/)) data.infoLeftPaddingRight = data.infoLeftPaddingRight + 'px';
|
||
|
||
text += '<div class="vis-hq-leftinfo" style="padding-left: ' + data.infoLeftPaddingLeft + '; padding-right: ' + data.infoLeftPaddingRight + '; font-size: ' + (data.infoLeftFontSize || 12) + 'px' + (data.infoColor ? ';color: ' + data.infoColor : '') + (data.infoBackground ? ';background: ' + data.infoBackground : '') + '"><span class="vis-hq-leftinfo-text">' +
|
||
(data.descriptionLeft || '').replace(/\s/g, ' ').replace(/\\n/g, '<br>') + '</span></div>\n';
|
||
}
|
||
if (data.show_value) {
|
||
if (data.infoRightPaddingLeft === undefined || data.infoRightPaddingLeft === null) data.infoRightPaddingLeft = '15px';
|
||
if (data.infoRightPaddingRight === undefined || data.infoRightPaddingRight === null) data.infoRightPaddingRight = '15px';
|
||
if (!data.infoRightPaddingRight.match(/px$|rem$|em$/)) data.infoRightPaddingRight = data.infoRightPaddingRight + 'px';
|
||
|
||
text += '<div class="vis-hq-rightinfo" style="padding-right: ' + data.infoRightPaddingRight + '; font-size: ' + (data.infoFontRightSize || 12) + 'px' + (data.infoColor ? ';color: ' + data.infoColor : '') + (data.infoBackground ? ';background: ' + data.infoBackground : '') + '"><span class="vis-hq-rightinfo-text">' +
|
||
(data.infoRight || '').replace(/\s/g, ' ').replace(/\\n/g, '<br>') + '</span>';
|
||
|
||
text += '</div>\n';
|
||
}
|
||
for (var i = 1; i <= data.slide_count; i++) {
|
||
var options = {
|
||
slideOid: data['oid-slide-sensor' + i],
|
||
handleOid: data['oid-slide-handle' + i],
|
||
type: data['slide_type' + i],
|
||
border_width: data.border_width,
|
||
shutterPos: data.shutterPos
|
||
};
|
||
text += '<td style="height: 100%">' + this.drawOneWindow(i, options) + '</td>';
|
||
}
|
||
text += '</tr></table>';
|
||
$div.html(text);
|
||
|
||
$div.find('.hq-blind-blind2').each(function (id) {
|
||
id++;
|
||
if (data['oid-slide-sensor-lowbat' + id]) {
|
||
data['oid-slide-sensor-lowbat'][id] = vis.states[data['oid-slide-sensor-lowbat' + id] + '.val'];
|
||
$(this).batteryIndicator({
|
||
show: data['oid-slide-sensor-lowbat'][id] || false,
|
||
title: _('Low battery on sash sensor'),
|
||
classes: 'slide-low-battery'
|
||
});
|
||
}
|
||
});
|
||
$div.find('.hq-blind-blind3').each(function (id) {
|
||
id++;
|
||
if (data['oid-slide-handle-lowbat' + id]) {
|
||
data['oid-slide-handle-lowbat'][id] = vis.states[data['oid-slide-handle-lowbat' + id] + '.val'];
|
||
$(this).batteryIndicator({
|
||
show: data['oid-slide-handle-lowbat'][id] || false,
|
||
color: '#FF55FA',
|
||
title: _('Low battery on handle sensor'),
|
||
classes: 'handle-low-battery'
|
||
});
|
||
$(this).find('.handle-low-battery').css({top: 8});
|
||
}
|
||
});
|
||
|
||
var width = $div.width();
|
||
var offset = width - 20;
|
||
if (offset < width / 2) offset = width / 2;
|
||
$div.find('.vis-hq-leftinfo').css({right: offset + 'px'});
|
||
$div.find('.vis-hq-rightinfo').css({'padding-left': (5 + (width / 2) + (parseInt(data.infoRightPaddingLeft, 10) || 0)) + 'px'});
|
||
},
|
||
init: function (wid, view, data, style) {
|
||
vis.binds.hqwidgets.showVersion();
|
||
|
||
var $div = $('#' + wid).addClass('vis-hq-button-base');
|
||
if (!$div.length) {
|
||
setTimeout(function () {
|
||
vis.binds.hqwidgets.window.init(wid, view, data, style);
|
||
}, 100);
|
||
return;
|
||
}
|
||
var _data = {wid: wid, view: view};
|
||
for (var a in data) {
|
||
if (!data.hasOwnProperty(a) || typeof data[a] === 'function') continue;
|
||
if (a[0] !== '_') _data[a] = data[a];
|
||
}
|
||
data = _data;
|
||
|
||
data.hide_timeout = (data.hide_timeout === 0 || data.hide_timeout === '0') ? 0 : (parseInt(data.hide_timeout, 10) || 2000);
|
||
data.min = ((data.min !== undefined) ? parseFloat(data.min) : 0);
|
||
data.max = ((data.max !== undefined) ? parseFloat(data.max) : 100);
|
||
data.digits = (data.digits || data.digits === 0) ? parseInt(data.digits, 10) : null;
|
||
data.noAnimate = (data.noAnimate === 'true' || data.noAnimate === true || data.noAnimate == 1);
|
||
|
||
if (!data.border_width && data.border_width !== '0') data.border_width = 3;
|
||
data.border_width = parseInt(data.border_width, 10);
|
||
|
||
$div.data('data', data);
|
||
$div.data('style', style);
|
||
|
||
data.min = parseFloat(data.min);
|
||
data.max = parseFloat(data.max);
|
||
if (data.max < data.min) {
|
||
var tmp = data.min;
|
||
data.min = data.max;
|
||
data.max = tmp;
|
||
}
|
||
data['oid-slide-sensor-lowbat'] = [];
|
||
data['oid-slide-handle-lowbat'] = [];
|
||
|
||
if (data['oid-working']) {
|
||
data.working = vis.states.attr(data['oid-working'] + '.val');
|
||
}
|
||
|
||
vis.binds.hqwidgets.window.draw($div);
|
||
|
||
function onChange(e, newVal /* , oldVal */) {
|
||
if (e.type === data.oid + '.val') {
|
||
var shutterPos = newVal;
|
||
data.value = shutterPos;
|
||
if (shutterPos === undefined || shutterPos === null) {
|
||
data.shutterPos = 0;
|
||
} else {
|
||
if (shutterPos < data.min) shutterPos = data.min;
|
||
if (shutterPos > data.max) shutterPos = data.max;
|
||
|
||
data.shutterPos = Math.round(100 * (shutterPos - data.min) / (data.max - data.min));
|
||
}
|
||
|
||
if (data.invert) data.shutterPos = 100 - data.shutterPos;
|
||
|
||
if (!data.noAnimate) {
|
||
$div.find('.hq-blind-position').animate({'height': data.shutterPos + '%'}, 500);
|
||
} else {
|
||
$div.find('.hq-blind-position').css({'height': data.shutterPos + '%'});
|
||
}
|
||
$div.find('.vis-hq-rightinfo-text').html(data.shutterPos + '%');
|
||
} else {
|
||
for (var t = 1; t <= data.slide_count; t++) {
|
||
if (e.type === data['oid-slide-sensor' + t] + '.val' || e.type === data['oid-slide-handle' + t] + '.val') {
|
||
vis.binds.hqwidgets.window.draw($div);
|
||
break;
|
||
} else if (e.type === data['oid-slide-sensor-lowbat' + t] + '.val') {
|
||
data['oid-slide-sensor-lowbat'][t] = vis.states[data['oid-slide-sensor-lowbat' + t] + '.val'];
|
||
$div.find('.slide-low-battery').each(function (id) {
|
||
id++;
|
||
if (data['oid-slide-sensor-lowbat' + id]) {
|
||
if (data['oid-slide-sensor-lowbat'][id]) {
|
||
$(this).show();
|
||
} else {
|
||
$(this).hide();
|
||
}
|
||
}
|
||
});
|
||
} else if (e.type === data['oid-slide-handle-lowbat' + t] + '.val') {
|
||
data['oid-slide-handle-lowbat'][t] = vis.states[data['oid-slide-handle-lowbat' + t] + '.val'];
|
||
$div.find('.handle-low-battery').each(function (id) {
|
||
id++;
|
||
if (data['oid-slide-handle-lowbat' + id]) {
|
||
if (data['oid-slide-handle-lowbat'][id]) {
|
||
$(this).show();
|
||
} else {
|
||
$(this).hide();
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
var bound = [];
|
||
|
||
for (var i = 1; i <= data.slide_count; i++) {
|
||
if (data['oid-slide-sensor' + i]) {
|
||
vis.states.bind(data['oid-slide-sensor' + i] + '.val', onChange);
|
||
bound.push(data['oid-slide-sensor' + i] + '.val');
|
||
}
|
||
if (data['oid-slide-handle' + i]) {
|
||
vis.states.bind(data['oid-slide-handle' + i] + '.val', onChange);
|
||
bound.push(data['oid-slide-handle' + i] + '.val');
|
||
}
|
||
if (data['oid-slide-sensor-lowbat' + i]) {
|
||
vis.states.bind(data['oid-slide-sensor-lowbat' + i] + '.val', onChange);
|
||
bound.push(data['oid-slide-sensor-lowbat' + i] + '.val');
|
||
}
|
||
if (data['oid-slide-handle-lowbat' + i]) {
|
||
vis.states.bind(data['oid-slide-handle-lowbat' + i] + '.val', onChange);
|
||
bound.push(data['oid-slide-handle-lowbat' + i] + '.val');
|
||
}
|
||
}
|
||
|
||
if (data.oid) {
|
||
if (!vis.editMode) {
|
||
// prepare big window
|
||
$div.click(function () {
|
||
var $big = $div.find('.hq-blind-big');
|
||
if (!$big.length || !$big.data('show')) {
|
||
vis.binds.hqwidgets.window.openPopup($div);
|
||
}
|
||
});
|
||
}
|
||
|
||
vis.states.bind(data.oid + '.val', onChange);
|
||
bound.push(data.oid + '.val');
|
||
}
|
||
|
||
if (bound.length) {
|
||
// remember all ids, that bound
|
||
$div.data('bound', bound);
|
||
// remember bind handler
|
||
$div.data('bindHandler', onChange);
|
||
}
|
||
|
||
var shutterPos = vis.states[data.oid + '.val'] || 0;
|
||
if (shutterPos < data.min) shutterPos = data.min;
|
||
if (shutterPos > data.max) shutterPos = data.max;
|
||
shutterPos = Math.round(100 * (shutterPos - data.min) / (data.max - data.min));
|
||
if (data.invert) shutterPos = 100 - shutterPos;
|
||
$div.find('.vis-hq-rightinfo-text').html(shutterPos + '%');
|
||
|
||
if (vis.editMode && vis.activeWidgets.indexOf(wid) !== -1) {
|
||
$div.resizable('destroy');
|
||
vis.resizable($div);
|
||
}
|
||
}
|
||
},
|
||
door: {
|
||
changeState: function ($div, notUpdateDoor, isFirst) {
|
||
var data = $div.data('data');
|
||
if (!data) return;
|
||
|
||
var value = data.value;
|
||
|
||
if (data['oid-battery']) $div.batteryIndicator('show', data.battery || false);
|
||
|
||
if (data['oid-signal']) {
|
||
$div.find('.vis-hq-signal').html(data.signal);
|
||
}
|
||
|
||
if (!notUpdateDoor) {
|
||
if (value) {
|
||
if (data.noAnimate || isFirst) {
|
||
$div.find('.vis-hq-door-sheet').css({width: '80%'});
|
||
$div.find('.vis-hq-door-empty-' + (data.door_type || 'left')).css({width: '20%'});
|
||
$div.find('.vis-hq-door-handle').css({left: (data.door_type !== 'right') ? '60%': '30%'});
|
||
} else {
|
||
$div.find('.vis-hq-door-sheet').animate({width: '80%'}, 500);
|
||
$div.find('.vis-hq-door-empty-' + (data.door_type || 'left')).animate({width: '20%'}, 500);
|
||
$div.find('.vis-hq-door-handle').animate({left: (data.door_type !== 'right') ? '60%': '30%'}, 500);
|
||
}
|
||
} else {
|
||
if (data.noAnimate || isFirst) {
|
||
$div.find('.vis-hq-door-sheet').css({width: '100%'});
|
||
$div.find('.vis-hq-door-empty-' + (data.door_type || 'left')).css({width: 0});
|
||
$div.find('.vis-hq-door-handle').css({left: (data.door_type !== 'right') ? '85%': '15%'});
|
||
} else {
|
||
$div.find('.vis-hq-door-sheet').animate({width: '100%'}, 500);
|
||
$div.find('.vis-hq-door-empty-' + (data.door_type || 'left')).animate({width: 0});
|
||
$div.find('.vis-hq-door-handle').animate({left: (data.door_type !== 'right') ? '85%': '15%'}, 500);
|
||
}
|
||
}
|
||
}
|
||
},
|
||
draw: function ($div) {
|
||
var data = $div.data('data');
|
||
if (!data) return;
|
||
|
||
// place left-info, right-info, caption and image
|
||
if (!$div.find('.vis-hq-main').length) {
|
||
var text = '';
|
||
if (!data.descriptionLeftDisabled && data.descriptionLeft) {
|
||
if (data.infoLeftPaddingLeft === undefined || data.infoLeftPaddingLeft === null) data.infoLeftPaddingLeft = '15px';
|
||
if (data.infoLeftPaddingRight === undefined || data.infoLeftPaddingRight === null) data.infoLeftPaddingRight = '50px';
|
||
if (!data.infoLeftPaddingLeft.match(/px$|rem$|em$/)) data.infoLeftPaddingLeft = data.infoLeftPaddingLeft + 'px';
|
||
if (!data.infoLeftPaddingRight.match(/px$|rem$|em$/)) data.infoLeftPaddingRight = data.infoLeftPaddingRight + 'px';
|
||
|
||
text += '<div class="vis-hq-leftinfo" style="padding-left: ' + data.infoLeftPaddingLeft + '; padding-right: ' + data.infoLeftPaddingRight + '; font-size: ' + (data.infoLeftFontSize || 12) + 'px' + (data.infoColor ? ';color: ' + data.infoColor : '') + (data.infoBackground ? ';background: ' + data.infoBackground : '') + '"><span class="vis-hq-leftinfo-text">' +
|
||
(data.descriptionLeft || '').replace(/\s/g, ' ').replace(/\\n/g, '<br>') + '</span></div>\n';
|
||
}
|
||
if (data.infoRight || data.wType === 'number' || data.hoursLastAction) {
|
||
if (data.infoRightPaddingLeft === undefined || data.infoRightPaddingLeft === null) data.infoRightPaddingLeft = '15px';
|
||
if (data.infoRightPaddingRight === undefined || data.infoRightPaddingRight === null) data.infoRightPaddingRight = '15px';
|
||
if (!data.infoRightPaddingRight.match(/px$|rem$|em$/)) data.infoRightPaddingRight = data.infoRightPaddingRight + 'px';
|
||
|
||
text += '<div class="vis-hq-rightinfo" style="padding-right: ' + data.infoRightPaddingRight + '; font-size: ' + (data.infoFontRightSize || 12) + 'px' + (data.infoColor ? ';color: ' + data.infoColor : '') + (data.infoBackground ? ';background: ' + data.infoBackground : '') + '"><span class="vis-hq-rightinfo-text">' +
|
||
(data.infoRight || '').replace(/\s/g, ' ').replace(/\\n/g, '<br>') + '</span>';
|
||
|
||
if (data.hoursLastAction) {
|
||
if (data.infoRight || data.wType === 'number') text += '<br>';
|
||
text += '<span class="vis-hq-time"></span>';
|
||
}
|
||
|
||
text += '</div>\n';
|
||
}
|
||
text += '<table class="vis-hq-main vis-hq-door vis-hq-no-space" style="z-index: 1; position: absolute; top: 0; right: 0;">' +
|
||
'<tr class="vis-hq-no-space">' +
|
||
'<td class="vis-hq-no-space vis-hq-door-empty-right"></td>' +
|
||
'<td class="vis-hq-no-space vis-hq-door-sheet"><div class="vis-hq-door-handle"></div></td>' +
|
||
'<td class="vis-hq-no-space vis-hq-door-empty-left"></td>' +
|
||
'</tr></table>\n';
|
||
$div.append(text);
|
||
}
|
||
$div.find('.vis-hq-door-empty-' + (data.door_type || 'left')).css({background: data.emptyColor || '#515151'});
|
||
if (data.door_type === 'right') {
|
||
$div.find('.vis-hq-door-handle').css({left: '15%'});
|
||
} else {
|
||
$div.find('.vis-hq-door-handle').css({left: '85%'});
|
||
}
|
||
|
||
$div.css({
|
||
'padding-top': data.border_width,
|
||
'padding-bottom' : data.border_width - 1,
|
||
'padding-right': data.border_width + 1,
|
||
'padding-left': data.border_width + 1
|
||
});
|
||
|
||
var width = $div.width();
|
||
var offset = width - 20;
|
||
if (offset < width / 2) offset = width / 2;
|
||
$div.find('.vis-hq-leftinfo').css({right: offset + 'px'});
|
||
},
|
||
init: function (wid, view, data, style) {
|
||
vis.binds.hqwidgets.showVersion();
|
||
|
||
var $div = $('#' + wid).addClass('vis-hq-button-base');
|
||
if (!$div.length) {
|
||
setTimeout(function () {
|
||
vis.binds.hqwidgets.door.init(wid, view, data, style);
|
||
}, 100);
|
||
return;
|
||
}
|
||
var _data = {wid: wid, view: view};
|
||
for (var a in data) {
|
||
if (!data.hasOwnProperty(a) || typeof data[a] === 'function') continue;
|
||
if (a[0] !== '_') _data[a] = data[a];
|
||
}
|
||
data = _data;
|
||
|
||
if (!data.border_width && data.border_width !== '0') data.border_width = 3;
|
||
data.border_width = parseInt(data.border_width, 10);
|
||
if (data['oid-battery']) data.battery = vis.states.attr(data['oid-battery'] + '.val');
|
||
if (data['oid-signal']) data.signal = vis.states.attr(data['oid-signal'] + '.val');
|
||
|
||
$div.data('data', data);
|
||
$div.data('style', style);
|
||
|
||
vis.binds.hqwidgets.door.draw($div);
|
||
|
||
function onChange(e, newVal) {
|
||
if (e.type === data.oid + '.val') {
|
||
var doorState = newVal;
|
||
if (newVal === 'true' || newVal === true) {
|
||
doorState = true;
|
||
} else if (newVal === 'false' || newVal === false) {
|
||
doorState = false;
|
||
} else if (typeof newVal === 'string') {
|
||
doorState = parseFloat(newVal) > 0;
|
||
} else {
|
||
doorState = !!newVal;
|
||
}
|
||
|
||
if (data.invert) doorState = !doorState;
|
||
data.value = doorState;
|
||
|
||
vis.binds.hqwidgets.door.changeState($div);
|
||
} else if (e.type === data['oid-signal'] + '.val') {
|
||
data.signal = newVal;
|
||
vis.binds.hqwidgets.door.changeState($div, true);
|
||
} else if (e.type === data['oid-battery'] + '.val') {
|
||
data.battery = newVal;
|
||
vis.binds.hqwidgets.door.changeState($div, true);
|
||
}
|
||
}
|
||
var bound = [];
|
||
|
||
if (data.oid) {
|
||
if (!vis.editMode) {
|
||
// prepare big window
|
||
$div.click(function () {
|
||
var $big = $div.find('.hq-blind-big');
|
||
if (!$big.length || !$big.data('show')) {
|
||
//vis.binds.hqwidgets.window.openPopup($div);
|
||
}
|
||
});
|
||
}
|
||
|
||
vis.states.bind(data.oid + '.val', onChange);
|
||
bound.push(data.oid + '.val');
|
||
var newVal = vis.states.attr(data.oid + '.val');
|
||
var doorState;
|
||
|
||
if (newVal === 'true' || newVal === true) {
|
||
doorState = true;
|
||
} else if (newVal === 'false' || newVal === false) {
|
||
doorState = false;
|
||
} else if (typeof newVal === 'string') {
|
||
doorState = parseFloat(newVal) > 0;
|
||
} else {
|
||
doorState = !!newVal;
|
||
}
|
||
|
||
if (data.invert) doorState = !doorState;
|
||
data.value = doorState;
|
||
}
|
||
if (data['oid-battery']) {
|
||
$div.batteryIndicator();
|
||
vis.states.bind(data['oid-battery'] + '.val', onChange);
|
||
bound.push(data['oid-battery'] + '.val');
|
||
}
|
||
|
||
if (data['oid-signal']) {
|
||
vis.states.bind(data['oid-signal'] + '.val', onChange);
|
||
bound.push(data['oid-signal'] + '.val');
|
||
}
|
||
if (bound.length) {
|
||
// remember all ids, that bound
|
||
$div.data('bound', bound);
|
||
// remember bind handler
|
||
$div.data('bindHandler', onChange);
|
||
}
|
||
vis.binds.hqwidgets.door.changeState($div, false, true);
|
||
}
|
||
},
|
||
lock: {
|
||
draw: function ($div, isInit) {
|
||
var data = $div.data('data');
|
||
if (!data) return;
|
||
|
||
var $img = $div.find('img:first');
|
||
if (!$img.length) {
|
||
if (!$div.is(':visible')) {
|
||
return setTimeout(function () {
|
||
vis.binds.hqwidgets.lock.draw($div, isInit);
|
||
}, 400);
|
||
}
|
||
|
||
$div.html('<img src="" class="vis-hq-lock1" style="width: 100%; height:100%;"/>' +
|
||
'<div class="vis-hq-biglock" style="display: none">' +
|
||
' <div class="vis-hq-biglock-button vis-hq-biglock-close ' + (data.closeStyle || '') + '"><img src="' + (data.closeIcon || '') + '" style="width: 100%; height:100%"/></div>' +
|
||
' <div class="vis-hq-biglock-button vis-hq-biglock-open ' + (data.openStyle || '') + '"><img src="' + (data.openIcon || '') + '" style="width: 100%; height:100%"/></div>' +
|
||
' <div class="vis-hq-biglock-button vis-hq-biglock-openDoor ' + (data.openDoorStyle || '') + '"><img src="' + (data.openDoorIcon || '') + '" style="width: 100%; height:100%"/></div>' +
|
||
'</div>');
|
||
$img = $div.find('.vis-hq-lock1');
|
||
var $big = $div.find('.vis-hq-biglock');
|
||
data.popupRadius = parseInt(data.popupRadius, 10) || 75;
|
||
$big.css({'border-radius': data.popupRadius, width: data.popupRadius * 2, height: data.popupRadius * 2});
|
||
$div.find('.vis-hq-biglock-button').css({borderRadius: parseInt(data.buttonRadius, 10) || 0});
|
||
|
||
$big.css({top: ($div.height() - $big.height()) / 2, left: ($div.width() - $big.width()) / 2});
|
||
|
||
if (data.oid && data.oid !== 'nothing_selected') {
|
||
if (data.openValue === undefined || data.openValue === null || data.openValue === '') {
|
||
data.openValue = true;
|
||
} else {
|
||
if (data.openValue === 'true') data.openValue = true;
|
||
if (data.openValue === 'false') data.openValue = false;
|
||
if (parseFloat(data.openValue).toString() == data.openValue) data.openValue = parseFloat(data.openValue);
|
||
}
|
||
if (data.closeValue === undefined || data.closeValue === null || data.closeValue === '') {
|
||
data.closeValue = false;
|
||
} else {
|
||
if (data.closeValue === 'true') data.closeValue = true;
|
||
if (data.closeValue === 'false') data.closeValue = false;
|
||
if (parseFloat(data.closeValue).toString() == data.closeValue) data.closeValue = parseFloat(data.closeValue);
|
||
}
|
||
|
||
$img.click(function () {
|
||
$div.popupShow($big, {relative: true});
|
||
// hide
|
||
if (data.showTimeout) {
|
||
data.timer = setTimeout(function () {
|
||
data.timer = null;
|
||
$div.popupHide($big, {relative: true});
|
||
}, data.showTimeout)
|
||
}
|
||
});
|
||
if (!vis.editMode) {
|
||
$div.find('.vis-hq-biglock-close').click(function () {
|
||
if (data.timer) {
|
||
clearTimeout(data.timer);
|
||
data.timer = null;
|
||
}
|
||
$div.popupHide($big, {relative: true});
|
||
vis.setValue(data.oid, data.closeValue);
|
||
});
|
||
$div.find('.vis-hq-biglock-open').click(function () {
|
||
if (data.timer) {
|
||
clearTimeout(data.timer);
|
||
data.timer = null;
|
||
}
|
||
$div.popupHide($big, {relative: true});
|
||
vis.setValue(data.oid, data.openValue);
|
||
});
|
||
}
|
||
}
|
||
if (!data['oid-open']) {
|
||
$div.find('.vis-hq-biglock-openDoor').hide();
|
||
} else {
|
||
if (data.openDoorValue === undefined || data.openDoorValue === null || data.openDoorValue === '') {
|
||
data.openDoorValue = true;
|
||
} else {
|
||
if (data.openDoorValue === 'true') data.openDoorValue = true;
|
||
if (data.openDoorValue === 'false') data.openDoorValue = false;
|
||
if (parseFloat(data.openDoorValue).toString() == data.openDoorValue) data.openDoorValue = parseFloat(data.openDoorValue);
|
||
}
|
||
if (!vis.editMode) {
|
||
$div.find('.vis-hq-biglock-openDoor').click(function () {
|
||
$div.popupHide($big, {relative: true});
|
||
if (data.timer) {
|
||
clearTimeout(data.timer);
|
||
data.timer = null;
|
||
}
|
||
vis.setValue(data['oid-open'], data.openDoorValue);
|
||
});
|
||
}
|
||
}
|
||
}
|
||
if (!data.oid || data.oid === 'nothing_selected' || vis.binds.hqwidgets.lock.isFalse(vis.states.attr(data.oid + '.val'), data.closeValue, data.openValue)) {
|
||
$div.removeClass(data.styleActive).addClass(data.styleNormal);
|
||
$img.attr('src', data.closedIcon || '');
|
||
} else {
|
||
$div.removeClass(data.styleNormal).addClass(data.styleActive);
|
||
$img.attr('src', data.openedIcon || data.closedIcon || '');
|
||
}
|
||
|
||
// Show change effect
|
||
if (data.changeEffect && (!isInit || (vis.editMode && data.testActive))) {
|
||
$div.animateDiv(data.changeEffect, {color: data.waveColor});
|
||
}
|
||
},
|
||
isFalse: function (val, min, max) {
|
||
if (min !== undefined && min !== null && min !== '') {
|
||
if (max !== undefined && max !== null && max !== '') {
|
||
return val != max;
|
||
} else {
|
||
return val == min;
|
||
}
|
||
}
|
||
if (val === undefined || val === null || val === false || val === 'false' || val === '') return true;
|
||
if (val === '0' || val === 0) return true;
|
||
var f = parseFloat(val);
|
||
if (f.toString() !== 'NaN') return !f;
|
||
return false;
|
||
},
|
||
init: function (wid, view, data, style) {
|
||
vis.binds.hqwidgets.showVersion();
|
||
var $div = $('#' + wid).addClass('vis-hq-button-base');
|
||
if (!$div.length) {
|
||
setTimeout(function () {
|
||
vis.binds.hqwidgets.lock.init(wid, view, data, style);
|
||
}, 100);
|
||
return;
|
||
}
|
||
var _data = {wid: wid, view: view};
|
||
for (var a in data) {
|
||
if (!data.hasOwnProperty(a) || typeof data[a] === 'function') continue;
|
||
if (a[0] !== '_') {
|
||
_data[a] = data[a];
|
||
}
|
||
}
|
||
data = _data;
|
||
|
||
if (data.closeValue === undefined || data.closeValue === null || data.closeValue === '') data.closeValue = false;
|
||
if (data.openValue === undefined || data.openValue === null || data.openValue === '') data.openValue = true;
|
||
|
||
data.styleNormal = data.usejQueryStyle ? 'ui-state-default' : (data.styleNormal || 'hq-button-no-background');
|
||
data.styleActive = data.usejQueryStyle ? 'ui-state-active' : (data.styleActive || 'hq-button-no-background');
|
||
$div.data('data', data);
|
||
function onChange(e, newVal, oldVal) {
|
||
data.signal = newVal;
|
||
vis.binds.hqwidgets.lock.draw($div);
|
||
}
|
||
|
||
if (data.oid) {
|
||
vis.states.bind(data.oid + '.val', onChange);
|
||
// remember all ids, that bound
|
||
$div.data('bound', [data.oid + '.val']);
|
||
// remember bind handler
|
||
$div.data('bindHandler', onChange);
|
||
}
|
||
|
||
vis.binds.hqwidgets.lock.draw($div, true);
|
||
}
|
||
},
|
||
circle: {
|
||
init: function (wid, view, data) {
|
||
vis.binds.hqwidgets.showVersion();
|
||
|
||
var $div = $('#' + wid);
|
||
if (!$div.length) {
|
||
setTimeout(function () {
|
||
vis.binds.hqwidgets.circle.init(wid, view, data);
|
||
}, 100);
|
||
return;
|
||
}
|
||
|
||
var settings = data;
|
||
var $scalaInput = $div.find('input');
|
||
$div.addClass('vis-hq-button-base');
|
||
|
||
function onChange(e, newVal, oldVal) {
|
||
settings.value = newVal;
|
||
$scalaInput.val(settings.value).trigger('change');
|
||
}
|
||
|
||
if (settings.oid) {
|
||
$scalaInput.val(vis.states.attr(settings.oid + '.val'));
|
||
if (1 || !vis.editMode) {
|
||
vis.states.bind(settings.oid + '.val', onChange);
|
||
// remember all ids, that bound
|
||
$div.data('bound', [settings.oid + '.val']);
|
||
// remember bind handler
|
||
$div.data('bindHandler', onChange);
|
||
}
|
||
} else {
|
||
$scalaInput.val(settings.min);
|
||
}
|
||
|
||
var offset = settings.angleOffset;
|
||
if (settings.angleArc !== undefined && !offset && offset !== 0 && offset !== '0') {
|
||
offset = 180 + (360 - parseInt(settings.angleArc, 10)) / 2;
|
||
}
|
||
|
||
$scalaInput.attr('data-angleOffset', offset);
|
||
$scalaInput.attr('data-angleArc', settings.angleArc);
|
||
$scalaInput.attr('data-thickness', settings.thickness);
|
||
$scalaInput.attr('data-linecap', (settings.linecap === 'true' || settings.linecap === true) ? 'round' : 'butt');
|
||
$scalaInput.show();
|
||
|
||
$scalaInput.knobHQ({
|
||
width: parseInt($div.width(), 10),
|
||
height: parseInt($div.height(), 10),
|
||
release: function () {
|
||
if (settings.readOnly) return;
|
||
// remove unit
|
||
var oldValue = $scalaInput.data('oldValue');
|
||
var val = $scalaInput.val();
|
||
|
||
if ((settings.unit || settings.unit === 0) && val.substring(val.length - settings.unit.length, val.length) === settings.unit) {
|
||
val = val.substring(0, val.length - settings.unit.length);
|
||
}
|
||
if (oldValue != val && !vis.editMode && settings.oid) {
|
||
$scalaInput.data('oldValue', val);
|
||
val = parseFloat(val.toString().replace(',', '.'));
|
||
vis.setValue(settings.oid, val);
|
||
}
|
||
},
|
||
cancel: function () {
|
||
},
|
||
change: function (value) {
|
||
},
|
||
format: function (v) {
|
||
v = parseFloat(v) || 0;
|
||
if (settings.digits !== null) v = v.toFixed(settings.digits);
|
||
if ((settings.is_comma === 'true' || settings.is_comma === true) && v) v = v.toString().replace('.', ',');
|
||
if (settings.unit) v = v + settings.unit;
|
||
return v;
|
||
},
|
||
displayPrevious : settings.displayPrevious,
|
||
displayInput: !settings.hideNumber,
|
||
bgColor: settings.bgcolor || undefined,
|
||
readOnly: settings.readOnly,
|
||
fgColor: settings.color,
|
||
inputColor: settings.color,
|
||
colorize: settings.colorize ? settings.colorize : undefined,
|
||
min: parseFloat(settings.min),
|
||
max: parseFloat(settings.max),
|
||
step: settings.step,
|
||
cursor: settings.cursor,
|
||
rotation: settings.anticlockwise ? 'anticlockwise' : 'clockwise'
|
||
|
||
});
|
||
|
||
if (settings.caption) {
|
||
$scalaInput.after('<div style="position: absolute; left: 50%; top: 60%"><span style="position:relative; left: -50%" >' + settings.caption + '</span></div>');
|
||
}
|
||
|
||
$scalaInput.prop('readonly', true);
|
||
var parentFont = $div.parent().css('font-size');
|
||
var font = $div.css('font-size');
|
||
if (font !== parentFont) $scalaInput.css('font-size', font);
|
||
|
||
parentFont = $div.parent().css('font-weight');
|
||
font = $div.css('font-weight');
|
||
if (font !== parentFont) $scalaInput.css('font-weight', font);
|
||
|
||
parentFont = $div.parent().css('font-style');
|
||
font = $div.css('font-style');
|
||
if (font !== parentFont) $scalaInput.css('font-style', font);
|
||
|
||
parentFont = $div.parent().css('font-variant');
|
||
font = $div.css('font-variant');
|
||
if (font !== parentFont) $scalaInput.css('font-variant', font);
|
||
}
|
||
},
|
||
checkbox: {
|
||
styles: [
|
||
'orange', 'blue', 'green', 'grey'
|
||
],
|
||
isTrue: function (value, max) {
|
||
if (value === 'true') value = true;
|
||
if (value === 'false') value = false;
|
||
if (value == parseFloat(value)) value = parseFloat(value);
|
||
if (max === true && typeof value === 'number') {
|
||
value = value > 0;
|
||
}
|
||
|
||
return value == max;
|
||
},
|
||
init: function (wid, view, data) {
|
||
vis.binds.hqwidgets.showVersion();
|
||
|
||
var $div = $('#' + wid);
|
||
if (!$div.length) {
|
||
setTimeout(function () {
|
||
vis.binds.hqwidgets.checkbox.init(wid, view, data);
|
||
}, 100);
|
||
return;
|
||
}
|
||
if (data.val_false === undefined || data.val_false === 'false') data.val_false = false;
|
||
if (data.val_false === 'true') data.val_false = true;
|
||
if (data.val_false == parseFloat(data.val_false)) data.val_false = parseFloat(data.val_false);
|
||
|
||
if (data.val_true === undefined || data.val_true === 'true') data.val_true = true;
|
||
if (data.val_true === 'false') data.val_true = false;
|
||
if (data.val_true == parseFloat(data.val_true)) data.val_true = parseFloat(data.val_true);
|
||
|
||
var settings = {
|
||
oid: data.oid || null,
|
||
staticValue: data.staticValue,
|
||
checkboxSize: data.checkboxSize || 'big',
|
||
checkboxColor: data.checkboxColor || 'grey',
|
||
checkboxColorOn: data.checkboxColorOn || data.checkboxColor || 'orange',
|
||
readOnly: vis.editMode || data.readOnly || false,
|
||
min: data.val_false,
|
||
max: data.val_true
|
||
};
|
||
if (settings.checkboxSize === 'small') {
|
||
$div.css({width: 108, height: 34});
|
||
}
|
||
|
||
if (!$div.find('input').length) $div.append('<input type="checkbox"/>');
|
||
var $input = $div.find('input');
|
||
|
||
var $shineCheckbox = $input.shineCheckbox(settings);
|
||
function onChange(e, newVal, oldVal) {
|
||
$shineCheckbox.shineCheckbox('value', vis.binds.hqwidgets.checkbox.isTrue(newVal, settings.max));
|
||
}
|
||
|
||
if (settings.oid && settings.oid !== 'nothing_selected') {
|
||
$shineCheckbox.shineCheckbox('value', vis.binds.hqwidgets.checkbox.isTrue(vis.states.attr(settings.oid + '.val'), settings.max));
|
||
$shineCheckbox.data('update', false);
|
||
vis.states.bind(settings.oid + '.val', onChange);
|
||
// remember all ids, that bound
|
||
$div.data('bound', [settings.oid + '.val']);
|
||
// remember bind handler
|
||
$div.data('bindHandler', onChange);
|
||
|
||
$div.find('input').change(function (evt) {
|
||
if ($(this).data('update')) {
|
||
$(this).data('update', false);
|
||
} else {
|
||
vis.setValue(settings.oid, $(this).prop('checked') ? settings.max : settings.min);
|
||
}
|
||
});
|
||
} else {
|
||
$shineCheckbox.shineCheckbox('value', vis.binds.hqwidgets.checkbox.isTrue(settings.staticValue, settings.max));
|
||
}
|
||
}
|
||
},
|
||
odometer: function (view, data) {
|
||
vis.binds.hqwidgets.showVersion();
|
||
|
||
var $div = $('#' + data.wid);
|
||
if (!$div.length) {
|
||
setTimeout(function () {
|
||
vis.binds.hqwidgets.odometer(view, data);
|
||
}, 100);
|
||
return;
|
||
} else
|
||
if (!$div.is(':visible')) {
|
||
setTimeout(function () {
|
||
vis.binds.hqwidgets.odometer(view, data);
|
||
}, 500);
|
||
return;
|
||
}
|
||
|
||
Odometer.prototype.watchForMutations = function() {};
|
||
|
||
var oid = data.oid;
|
||
var format = data.format || '(.ddd),dd';
|
||
var factor = parseFloat(data.factor) || 1;
|
||
var max = 0;
|
||
var $od = $div.find('.odometer');
|
||
if ($od.length) {
|
||
$od.innerHTML = '';
|
||
$od.remove();
|
||
}
|
||
$div.append('<div class="odometer"></div>');
|
||
$od = $div.find('.odometer');
|
||
|
||
if (data.leadingZeros) {
|
||
var m = format.match(/\([,.\s]?(d+)\)/);
|
||
if (m && m[1]) {
|
||
max = m[1].length;
|
||
max = Math.pow(10, max);
|
||
}
|
||
m = format.match(/(\(+\))?[,.](d+)/);
|
||
if (m && m[2]) {
|
||
format += 'd';
|
||
max += Math.pow(0.1, m[2].length + 1);
|
||
} else {
|
||
max *= 10;
|
||
format = format.replace('d', 'dd');
|
||
factor *= 10;
|
||
}
|
||
$od.parent().addClass('odometer-leading');
|
||
}
|
||
|
||
var od = new Odometer({
|
||
el: $od[0],
|
||
value: (vis.states[oid + '.val'] || 0) * factor + max,
|
||
duration: parseInt(data.duration, 10) || 3000,
|
||
theme: data.style || 'car',
|
||
format: format
|
||
});
|
||
|
||
|
||
if (oid && oid !== 'nothing_selected') {
|
||
vis.states.bind(oid + '.val', function (e, newVal) {
|
||
od.update(parseFloat(newVal) * factor + max);
|
||
});
|
||
od.update(parseFloat(vis.states[oid + '.val']) * factor + max);
|
||
} else {
|
||
od.update(max);
|
||
}
|
||
}
|
||
};
|
||
|
||
if (vis.editMode) {
|
||
/*
|
||
"tpl": "tplHqShutter",
|
||
"hqoptions" : "{
|
||
"x":1095,
|
||
"y":336,
|
||
"height":54,
|
||
"width":54,
|
||
"radius":0,
|
||
"zindex":3,
|
||
"buttonType":3,
|
||
"windowConfig":"1",
|
||
"title":"Schlaffzimmer.Rolladen.Aktor",
|
||
"room":"Schlafzimmer",
|
||
|
||
}",
|
||
|
||
* /
|
||
/*
|
||
"tpl": "tplHqButton",
|
||
"hqoptions": "{
|
||
"x":1040,
|
||
"y":429,
|
||
"height":46,
|
||
"width":46,
|
||
"radius":22,
|
||
"zindex":2,
|
||
"iconName":"img/KinderBug.png",
|
||
"title":"LampeAmFenster.Aktor",
|
||
"room":"Kinderzimmer",
|
||
"hm_id":"7480"
|
||
}",
|
||
*/
|
||
/*
|
||
"tpl": "tplHqOutTemp",
|
||
"hqoptions": "{
|
||
"x":481,
|
||
"y":45,
|
||
"width":46,
|
||
"radius":22,
|
||
"zindex":2,
|
||
"buttonType":2,
|
||
"iconName":"Temperature.png",
|
||
"title":"Temperatur.Sensor",
|
||
"room":"Balkon",
|
||
"hm_id":"12871",
|
||
"charts":{
|
||
"navigator":"",
|
||
"percentaxis":"true",
|
||
"period":"72",
|
||
"theme":"dark-blue",
|
||
"range":"24",
|
||
"scrollbar":"true",
|
||
"grouping":"true",
|
||
"legend":"inline",
|
||
"zoom":"true",
|
||
"loader":"false"
|
||
}
|
||
}",
|
||
"informWindow": "{"x":85,
|
||
"y":20,
|
||
"width":656,
|
||
"height":491}"
|
||
},
|
||
*//*
|
||
"tpl": "tplHqInTemp",
|
||
"hqoptions": "{
|
||
"x":877,
|
||
"y":430,
|
||
"height":44,
|
||
"width":46,
|
||
"radius":22,
|
||
"zindex":2,
|
||
"buttonType":1,
|
||
"iconName":"Temperature.png",
|
||
"title":"Heizung.Regler",
|
||
"room":"Kinderzimmer",
|
||
"hm_id":"3837",
|
||
"hm_idV":"3822",
|
||
"charts":{
|
||
"navigator":"",
|
||
"percentaxis":"true",
|
||
"period":"72",
|
||
"theme":"dark-green",
|
||
"range":"24",
|
||
"scrollbar":"true",
|
||
"grouping":"true",
|
||
"legend":"inline",
|
||
"zoom":"true",
|
||
"loader":"false"
|
||
}
|
||
}",
|
||
"informWindow": "{
|
||
"x":500,
|
||
"y":253,
|
||
"width":800,
|
||
"height":400
|
||
}"
|
||
*/
|
||
|
||
vis.binds.hqwidgets.convertOldWidgets = function (widget) {
|
||
if (widget.data && widget.data.hqoptions) {
|
||
try {
|
||
var hqoptions = JSON.parse(widget.data.hqoptions);
|
||
widget.style.height = 45;
|
||
widget.style.width = 45;
|
||
for (var opt in hqoptions) {
|
||
if (opt === 'width') {
|
||
widget.style.width = hqoptions.width || 45;
|
||
} else if (opt === 'height') {
|
||
widget.style.height = hqoptions.height || 45;
|
||
} else if (opt === 'radius') {
|
||
widget.style['border-radius'] = hqoptions.radius + 'px';
|
||
} else if (opt === 'zindex') {
|
||
widget.style['z-index'] = hqoptions.zindex;
|
||
} else if (opt === 'iconName') {
|
||
widget.data.btIconWidth = 32;
|
||
if (hqoptions.iconName === 'Temperature.png') {
|
||
widget.data.iconName = 'img/Heating.png'
|
||
} else
|
||
if (hqoptions.iconName === 'Lamp.png') {
|
||
widget.data.iconName = 'img/Lamp.png'
|
||
} else
|
||
if (hqoptions.iconName && hqoptions.iconName.indexOf('http://') === -1 && hqoptions.iconName[0] !== '/') {
|
||
widget.data.iconName = '/' + vis.conn.namespace + '/' + vis.projectPrefix + hqoptions.iconName;
|
||
} else {
|
||
widget.data.iconName = hqoptions.iconName;
|
||
}
|
||
} else if (opt === 'iconOn') {
|
||
if (hqoptions.iconOn === 'Temperature.png') {
|
||
widget.data.iconOn = 'img/Heating.png'
|
||
} else
|
||
if (hqoptions.iconOn === 'Lamp.png') {
|
||
widget.data.iconOn = 'img/Lamp.png'
|
||
} else
|
||
if (hqoptions.iconOn && hqoptions.iconOn.indexOf('http://') === -1 && hqoptions.iconOn[0] !== '/') {
|
||
widget.data.iconOn = '/' + vis.conn.namespace + '/' + vis.projectPrefix + hqoptions.iconOn;
|
||
} else {
|
||
widget.data.iconOn = hqoptions.iconOn;
|
||
}
|
||
} else if (opt === 'title') {
|
||
widget.data.descriptionLeft = hqoptions.title;
|
||
} else if (opt === 'room') {
|
||
widget.data.descriptionLeft += '<br>' + hqoptions.room;
|
||
} else if (opt === 'windowConfig') {
|
||
var parts = hqoptions.windowConfig.split(',');
|
||
widget.data.slide_count = parts.length || 1;
|
||
for (var p = 0; p < parts.length; p++) {
|
||
if (parts[p] === '0') {
|
||
widget.data['slide_type' + (p + 1)] = '';
|
||
} else if (parts[p] === '1') {
|
||
widget.data['slide_type' + (p + 1)] = 'left';
|
||
} else if (parts[p] === '2') {
|
||
widget.data['slide_type' + (p + 1)] = 'right';
|
||
} else if (parts[p] === '3') {
|
||
widget.data['slide_type' + (p + 1)] = 'top';
|
||
}
|
||
}
|
||
widget.data.border_width = 1;
|
||
if (widget.data.hm_id !== undefined) delete widget.data.hm_id;
|
||
if (widget.data.digits !== undefined) delete widget.data.digits;
|
||
if (widget.data.factor !== undefined) delete widget.data.factor;
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.log('Cannot convert. Invalid JSON in hqoptions: ' + widget.data.hqoptions);
|
||
}
|
||
delete widget.data.hqoptions;
|
||
}
|
||
return widget;
|
||
};
|
||
|
||
vis.binds.hqwidgets.changedSensorId = function (widgetID, view, newId, attr, isCss, oldValue) {
|
||
var index = attr.match(/(\d+)$/);
|
||
var bName = (attr === 'oid-slide-handle' + index[1]) ? 'oid-slide-handle-lowbat' : 'oid-slide-sensor-lowbat';
|
||
bName += index[1];
|
||
var fields = {};
|
||
fields[bName] = 'indicator.battery';
|
||
|
||
return vis.binds.hqwidgets.changedId (widgetID, view, newId, fields);
|
||
};
|
||
|
||
vis.binds.hqwidgets.changedWindowId = function (widgetID, view, newId, attr, isCss, oldValue) {
|
||
if (oldValue && oldValue !== 'nothing_selected') return;
|
||
return vis.binds.hqwidgets.changedId (widgetID, view, newId, {
|
||
'oid-battery': 'indicator.battery',
|
||
'oid-working': 'indicator.working',
|
||
'oid-signal': 'indicator.signal',
|
||
'oid-humidity': 'value.humidity'
|
||
});
|
||
};
|
||
|
||
vis.binds.hqwidgets.changedId = function (widgetID, view, newId, fields) {
|
||
var obj = vis.objects[newId];
|
||
var changed = [];
|
||
// If it is real object and SETPOINT
|
||
if (obj && obj.common && obj.type === 'state') {
|
||
var roles = [];
|
||
|
||
// If some attributes are not set
|
||
for (var field in fields) {
|
||
if (!fields.hasOwnProperty(field)) continue;
|
||
if (!vis.views[view].widgets[widgetID].data[field]) roles.push(fields[field]);
|
||
}
|
||
|
||
if (roles.length) {
|
||
var result = vis.findByRoles(newId, roles);
|
||
if (result) {
|
||
var name;
|
||
for (var r in result) {
|
||
if (!result.hasOwnProperty(r)) continue;
|
||
name = null;
|
||
for (field in fields) {
|
||
if (!fields.hasOwnProperty(field)) continue;
|
||
if (fields[field] == r) {
|
||
name = field;
|
||
break;
|
||
}
|
||
}
|
||
if (name) {
|
||
changed.push(name);
|
||
vis.views[view].widgets[widgetID].data[name] = result[r];
|
||
vis.widgets[widgetID].data[name] = result[r];
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
if (!vis.views[view].widgets[widgetID].data.descriptionLeft && obj.common.name) {
|
||
vis.views[view].widgets[widgetID].data.descriptionLeft = obj.common.name;
|
||
}
|
||
}
|
||
|
||
return changed.length ? changed : null;
|
||
};
|
||
|
||
vis.binds.hqwidgets.changedTempId = function (widgetID, view, newId, attr, isCss, oldValue) {
|
||
if (oldValue && oldValue !== 'nothing_selected') return;
|
||
return vis.binds.hqwidgets.changedId (widgetID, view, newId, {
|
||
'oid-battery': 'indicator.battery',
|
||
'oid-working': 'indicator.working',
|
||
'oid-signal': 'indicator.signal',
|
||
'oid-humidity': 'value.humidity'
|
||
});
|
||
};
|
||
|
||
vis.binds.hqwidgets.changedButtonId = function (widgetID, view, newId, attr, isCss, oldValue) {
|
||
if (oldValue && oldValue !== 'nothing_selected') return;
|
||
return vis.binds.hqwidgets.changedId (widgetID, view, newId, {
|
||
'oid-battery': 'indicator.battery',
|
||
'oid-working': 'indicator.working',
|
||
'oid-signal': 'indicator.signal'
|
||
});
|
||
};
|
||
|
||
vis.binds.hqwidgets.changedLockId = function (widgetID, view, newId, attr, isCss, oldValue) {
|
||
if (oldValue && oldValue !== 'nothing_selected') return;
|
||
return vis.binds.hqwidgets.changedId (widgetID, view, newId, {
|
||
'oid-battery': 'indicator.battery',
|
||
'oid-working': 'indicator.working',
|
||
'oid-signal': 'indicator.signal'
|
||
});
|
||
};
|
||
|
||
vis.binds.hqwidgets.changedTemperatureId = function (widgetID, view, newId, attr, isCss, oldValue) {
|
||
if (oldValue && oldValue !== 'nothing_selected') return;
|
||
return vis.binds.hqwidgets.changedId (widgetID, view, newId, {
|
||
'oid-humidity': 'value.humidity'
|
||
});
|
||
};
|
||
}
|