/* global PIXI, Favorite */ var BCB = { $elementParent: null, stage: null, renderer: null, height: null, width: null, data: null, userInteraction: false, structBCBSelectionIndex: {rgbIndex: 1, dimmerIndex: 0, volumeIndex: 0, climatIndex: 0}, defaultOptions: null, climatization: {isActive: false}, resetBCBIndexes: function () { BCB.structBCBSelectionIndex.rgbIndex = 1; BCB.structBCBSelectionIndex.dimmerIndex = 0; BCB.structBCBSelectionIndex.volumeIndex = 0; BCB.structBCBSelectionIndex.climatIndex = 0; }, draw: function (type, values, functions) { BCB.data = values; Utils.offsetX = this.$elementParent.offset().left; Utils.offsetY = this.$elementParent.offset().top; //console.log("Parent width: " + BCB.$elementParent.width() + " Parent height: " + BCB.$elementParent.height()); // adicionado var size; if (BCB.$elementParent.width() < BCB.$elementParent.height()) { size = BCB.$elementParent.width(); } else { size = BCB.$elementParent.height(); } // ---- /* this.height = BCB.$elementParent.width() * 1.1; this.width = BCB.$elementParent.width(); */ this.height = size * 1.1; this.width = size; this.stage = new PIXI.Container(); this.renderer = new PIXI.CanvasRenderer(this.width, this.height, {transparent: true, antialias: true}); this.$elementParent.append(this.renderer.view); var containerControl, BCBElement, selectedElement, elementFunctions = [], renderFunction = function () {}; var defaultFunctions = { rgb: {onChange: function () {}}, rgbrandom: {onChange: function () {}}, timmer: {onChange: function () {}}, dimmer: {onChange: function () {}}, volume: {onChange: function () {}}, climatization: {onChange: function () {}}}; //load default options if (functions !== 'undefined' && functions !== null) { defaultFunctions = $.extend(true, {}, defaultFunctions, functions); } //funções que vão desenhar o controlo var BCBControls = { RGB: { display: function (value) { try { BCB.stage.removeChild(containerControl); containerControl = null; BCB.stage.off('pointermove').off('pointerdown').off('mouseup').off('click').off('tap').off('touchdown').off('touchup').off('touchmove'); } catch (error) { console.log("no element: " + error); } //random icon var textureRnd = PIXI.Texture.fromImage('bcb_icons/random.png'); //A imagem do random não é a imagem da Dulce, verificar. var randomIcon = new PIXI.Sprite(textureRnd); randomIcon.interactive = true; randomIcon.x = BCB.width / 2; randomIcon.y = BCB.height / 2; randomIcon.width = BCB.width * 0.09; randomIcon.height = BCB.width * 0.09; randomIcon.alpha = 0.8; randomIcon.anchor.set(0.5, 0.5); randomIcon.on('click', randomColor).on('tap', randomColor); var texture = PIXI.Texture.fromImage('bcb_icons/rgb_ring.png'); var RGBring = new PIXI.Sprite(texture); RGBring.x = BCB.width / 2; RGBring.y = BCB.height / 2; RGBring.width = BCB.width * 0.72; RGBring.height = BCB.width * 0.72; RGBring.anchor.set(0.5, 0.5); RGBring.interactive = true; RGBring.on('pointerdown', mouseDown).on('pointerupoutside', mouseUp).on('pointerup', mouseUp).on('click', onClick).on('tap', onClick); var selectedColor = new PIXI.Graphics(); selectedColor.beginFill(0xbbbbbb); selectedColor.drawCircle(0, 0, BCB.width * 0.1); selectedColor.x = BCB.width / 2; selectedColor.y = BCB.height / 2; selectedColor.alpha = 1; selectedColor.endFill(); // set a fill and line style var handlerLine = new PIXI.Graphics(); handlerLine.beginFill(0xFF3300); handlerLine.lineStyle(BCB.width * 0.01, 0x444444, 0.5); handlerLine.moveTo(0, 0); handlerLine.lineTo(BCB.width * 0.33, 0); handlerLine.x = BCB.width / 2; handlerLine.y = BCB.height / 2; handlerLine.rotation = -Math.PI / 2; handlerLine.pivot.set(0, 0); handlerLine.endFill(); //handler var handler = new PIXI.Graphics(); handler.beginFill(0xFFFFFF, 1); handler.lineStyle(BCB.width * 0.01, 0xBBBBBB, 0.5); handler.drawCircle(BCB.width * 0.33, 0, BCB.width * 0.035); handler.interactive = true; handler.pivot.set(0, 0); handler.x = BCB.width / 2; handler.y = BCB.height / 2; handler.rotation = -Math.PI / 2; handler.endFill(); handler.on('pointerdown', mouseDown).on('pointerupoutside', mouseUp).on('pointerup', mouseUp).on('click', onClick); var containerRGB = new PIXI.Container(); containerRGB.addChild(RGBring); containerRGB.addChild(handlerLine); containerRGB.addChild(handler); containerRGB.addChild(selectedColor); containerRGB.addChild(randomIcon); containerControl = containerRGB; BCB.stage.addChild(containerControl); function mouseUp() { handler.off('pointermove'); //EXECUTE FUNCTION ON CHANGE BCBControls.RGB.onChange(BCB.data.color); } function mouseDown() { handler.on('pointermove', mouseMove); } var angle, prevAngle, posX, posY, colorR, colorG; function mouseMove(e) { drawHandlerProgress(e); } function onClick(e) { drawHandlerProgress(e); //EXECUTE FUNCTION ON CHANGE BCBControls.RGB.onChange(BCB.data.color); } function setValue() { if (!isNaN(value.color)) { angle = (value.color * Math.PI * 2) / 100; moveHandler(); } } function moveHandler() { if (isNaN(angle)) angle = 0; var color = Utils.RainbowColors(); handler.rotation = angle - Math.PI / 2; handlerLine.rotation = angle - Math.PI / 2; var index = parseInt((angle * color.length) / (Math.PI * 2)) - 1; if (isNaN(index)) index = 0; /*var colorHex = Utils.RGBToHex(color[index]); selectedColor.clear(); //console.log(colorHex); selectedColor.beginFill("0x" + colorHex); selectedColor.drawCircle(0, 0, BCB.width * 0.1); selectedColor.endFill();*/ //conversão da cor de 0 - 100 var color = parseInt((index * 100) / 1534 + 0.5); BCB.data.color = color; } function drawHandlerProgress(e) { posX = Utils.getMousePos(e).x; posY = Utils.getMousePos(e).y; angle = Utils.findAngle({x: posX, y: posY}, {x: BCB.width / 2, y: BCB.height / 2}, {x: BCB.width / 2, y: 1}); moveHandler(); } function randomColor() { BCBControls.RGBRandom.display(values.speed, {steps: 11, labels: ['0', '2', '4', '6']}); } setValue(); }, onChange: defaultFunctions.rgb.onChange }, RGBRandom: { display: function (value, options) { try { BCB.stage.removeChild(containerControl); containerControl = null; BCB.stage.off('pointermove').off('pointerdown').off('pointerup').off('click').off('tap').off('pointerupoutside'); } catch (error) { console.log("no element: " + error); } var container = new PIXI.Container(); var angle = 0, posX, posY, colorR, colorG, mousedown = false, color, index = 0; var defOpt = {steps: 60, labels: [0, 15, 30, 45]}; //load default options if (options !== 'undefined' && options !== null) { defOpt = $.extend(true, {}, defOpt, options); } //slashes var stepAngle = Math.PI * 2 / defOpt.steps; var steps = []; for (i = 0; i < defOpt.steps; i++) { colorR = parseInt(((i * stepAngle) * 0xFF) / (Math.PI)).toString(16).toUpperCase(); colorG = parseInt(((i * stepAngle) * 0x88) / (Math.PI)).toString(16).toUpperCase(); if (i * stepAngle < 0.75) { color = 0x1b0e00; } else if (i * stepAngle > Math.PI) { color = 0xFF8800; } else { color = "0x" + colorR + colorG; if (color.length === 7) color += "0"; else if (color.length === 6) color += "00"; } var step = new PIXI.Graphics(); step.beginFill(0xFF3300); step.lineStyle(BCB.width * 0.007, 0x444444, 0.5); step.moveTo(BCB.width * 0.3, 0); step.lineTo(BCB.width * 0.33, 0); step.x = BCB.width / 2; step.y = BCB.height / 2; step.color = color; step.rotation = i * stepAngle - Math.PI / 2; steps.push(step); step.pivot.set(0, 0); container.addChild(step); //point around /* if (i !== 0 && i !== parseInt(defOpt.steps / 4) && i !== parseInt(defOpt.steps * 3 / 4) && i !== defOpt.steps / 2) { var pointAround = new PIXI.Graphics(); pointAround.beginFill(0x777777, 0.5); pointAround.drawCircle(BCB.width * 0.203, BCB.width * 0.203, BCB.width * 0.0033); pointAround.x = BCB.width / 2; pointAround.y = BCB.height / 2; pointAround.pivot.set(0, 0); pointAround.rotation = i * stepAngle - Math.PI / 4; pointAround.endFill(); container.addChild(pointAround); } if (i === 0 || i === parseInt(defOpt.steps / 4) || i === parseInt(defOpt.steps / 2) || i === parseInt(defOpt.steps * 3 / 4)) { var stepLarger = new PIXI.Graphics(); stepLarger.beginFill(0xFF3300); stepLarger.lineStyle(BCB.width * 0.004, 0x444444, 0.5); stepLarger.moveTo(BCB.width * 0.267, 0); stepLarger.lineTo(BCB.width * 0.29, 0); stepLarger.x = BCB.width / 2; stepLarger.y = BCB.height / 2; stepLarger.pivot.set(0, 0); stepLarger.rotation = (i * stepAngle); container.addChild(stepLarger); }*/ } //### CIRCULO QUE VAI FAZER O HANDLING ### var hitCircle = new PIXI.Graphics(); hitCircle.beginFill(0xFF0000, 0); hitCircle.drawCircle(0, 0, BCB.width * 0.38); hitCircle.x = BCB.width / 2; hitCircle.y = BCB.height / 2; hitCircle.alpha = 1; hitCircle.endFill(); hitCircle.interactive = true; hitCircle.on('click', onClick).on('tap', onClick).on('pointerupoutside', mouseUp).on('pointerup', mouseUp).on('pointerdown', mouseDown).on('pointermove', mouseMove); container.addChild(hitCircle); //random icon var texture = PIXI.Texture.fromImage('bcb_icons/rgb_on_128.png'); //A imagem do random não é a imagem da Dulce, verificar!! var graphRGB = new PIXI.Sprite(texture); graphRGB.interactive = true; graphRGB.x = BCB.width / 2; graphRGB.y = BCB.height / 2; graphRGB.width = BCB.width * 0.3; graphRGB.height = BCB.width * 0.3; graphRGB.pivot.set(0, 0); graphRGB.anchor.set(0.5, 0.5); graphRGB.on('click', goToColorSelection).on('tap', goToColorSelection); container.addChild(graphRGB); //random icon texture = PIXI.Texture.fromImage('bcb_icons/random.png'); //A imagem do random não é a imagem da Dulce, verificar!! var graphRandom = new PIXI.Sprite(texture); graphRandom.interactive = true; graphRandom.x = BCB.width / 2; graphRandom.y = BCB.height / 2; graphRandom.width = BCB.width * 0.09; graphRandom.height = BCB.width * 0.09; graphRandom.alpha = 0.5; graphRandom.anchor.set(0.5, 0.5); graphRandom.on('click', goToColorSelection).on('tap', goToColorSelection); container.addChild(graphRandom); // var text = new PIXI.Text(defOpt.labels[0].toString(), {font: BCB.width * 0.04 + "px Roboto", fill: "#777"}); // text.x = BCB.width * 0.5; // text.y = BCB.height * 0.5; // text.pivot.set(0, BCB.width * 0.24); // text.anchor.set(0.5, 0.5); // container.addChild(text); // // text = new PIXI.Text(defOpt.labels[1], {font: BCB.width * 0.04 + "px Roboto", fill: "#777"}); // text.x = BCB.width * 0.74; // text.y = BCB.height * 0.5; // text.pivot.set(0, 0); // text.anchor.set(0.5, 0.5); // container.addChild(text); // // text = new PIXI.Text(defOpt.labels[2], {font: BCB.width * 0.04 + "px Roboto", fill: "#777"}); // text.x = BCB.width * 0.5; // text.y = BCB.height * 0.5; // text.pivot.set(0, -BCB.width * 0.24); // text.anchor.set(0.5, 0.5); // container.addChild(text); // // text = new PIXI.Text(defOpt.labels[3], {font: BCB.width * 0.04 + "px Roboto", fill: "#777"}); // text.x = BCB.width * 0.265; // text.y = BCB.height * 0.5; // text.pivot.set(0, 0); // text.anchor.set(0.5, 0.5); // container.addChild(text); // ####### functions ######### BCB.stage.interactive = true; function goToColorSelection() { renderFunction = function () {}; BCBControls.RGB.display(); } function mouseUp() { mousedown = false; BCBControls.RGBRandom.onChange(index); BCB.data.speed = index; } function mouseDown() { mousedown = true; } function mouseMove(e) { if (mousedown) drawHandlerProgress(e); } function onClick(e) { drawHandlerProgress(e); } function drawHandlerProgress(e) { posX = Utils.getMousePos(e).x; posY = Utils.getMousePos(e).y; angle = Utils.findAngle({x: posX, y: posY}, {x: BCB.width / 2, y: BCB.height / 2}, {x: BCB.width / 2, y: 1}); moveHandler(); } setValue(); function setValue() { if (!isNaN(value)) { angle = (value * Math.PI * 2) / defOpt.steps + 0.001; moveHandler(); } } //a velocidade do rotação é renderFunction = function () { graphRGB.rotation += 0.01 * angle; }; function moveHandler() { index = parseInt((angle * defOpt.steps) / (Math.PI * 2)); for (i = 0; i < index; i++) { steps[i].clear(); steps[i].lineStyle(BCB.width * 0.007, steps[i].color, 1); steps[i].moveTo(BCB.width * 0.3, 0); steps[i].lineTo(BCB.width * 0.33, 0); } steps[index].clear(); steps[index].lineStyle(BCB.width * 0.007, steps[i].color, 1); steps[index].moveTo(BCB.width * 0.3, 0); steps[index].lineTo(BCB.width * 0.35, 0); steps[index].endFill(); for (i = index + 1; i < defOpt.steps; i++) { steps[i].clear(); steps[i].lineStyle(BCB.width * 0.007, 0x444444, 0.3); steps[i].moveTo(BCB.width * 0.3, 0); steps[i].lineTo(BCB.width * 0.33, 0); steps[i].endFill(); } } //####### add container to stage ######### BCB.stage.addChild(container); containerControl = container; }, onChange: defaultFunctions.rgbrandom.onChange }, Timmer: { display: function (value, options) { try { BCB.stage.removeChild(containerControl); containerControl = null; BCB.stage.off('pointermove').off('pointerdown').off('pointerup').off('click').off('tap').off('pointerupoutside'); } catch (error) { console.log("no element: " + error); } var container = new PIXI.Container(); var angle = 0, prevAngle, posX, posY, colorR, colorG, mousedown = false, color, rainbowOfColors = Utils.RainbowColors(); var defOpt = {steps: 60, labels: [0, 15, 30, 45], hours: 23}; if (options !== 'undefined' && options !== null) { defOpt = $.extend(true, {}, defOpt, options); } var hours, minutes, seconds; //vai ser utilizada esta variavel para validar se os valores foram mudados ou não, para prevenir chamar a função //onChange sem ter sido mudado nada. var valueHasChanged = false; var ratio = 0; if (BCB.width > BCB.height) ratio = BCB.width / BCB.height; else ratio = BCB.height / BCB.width; var radius = BCB.width * 0.33; var totalPerimeter = Utils.CalcPerimeter(Math.PI * 2, radius); //events var events = { hourEvent: { mouseDown: function (e) { events.hourEvent.isMouseDown = true; events.hourEvent.prevPosY = -999; }, mouseUp: function (e) { events.hourEvent.isMouseDown = false; events.hourEvent.prevPosY = -999; valueHasChanged = true; }, mouseMove: function (e) { if (events.hourEvent.isMouseDown) { events.hourEvent.areValuesCentered = false; posY = e.data.originalEvent.touches ? e.data.originalEvent.touches[0].pageY : e.data.originalEvent.pageY; if (events.hourEvent.prevPosY === -999) events.hourEvent.prevPosY = posY; var direction = posY - events.hourEvent.prevPosY; if (isNaN(direction)) direction = 0; if ((parseInt(hours) > 0) || (parseInt(hours) < defOpt.hours)) { for (var i = 0; i < hourText.length; i++) { hourText[i].y += direction; if (hourText[i].y >= BCB.height * 0.5 - BCB.width * 0.05 && hourText[i].y <= BCB.height * 0.5 + BCB.width * 0.05) { //console.log("IN VALIDATION ZONE: " + hourText[i].text); //console.log(" [i] : " + i); hours = hourText[i].text; hourText[i].style.fontSize = ratio * BCB.width * 0.1 + "pt"; events.hourEvent.elementTextIndex = i; } hourText[i].alpha = Utils.calcVerticalRatio(hourText[i].y); hourText[i].style.fontSize = Utils.calcVerticalRatio(hourText[i].y) * BCB.width * 0.05 + (ratio * BCB.width * 0.1) / 2 + "pt"; } } events.hourEvent.prevPosY = posY; } }, isMouseDown: false, areValuesCentered: true, prevPosY: -999, elementTextIndex: 0 }, minuteEventVertical: { mouseDown: function (e) { events.minuteEventVertical.prevPosY = -999; events.minuteEventVertical.isMouseDown = true; }, mouseUp: function (e) { events.minuteEventVertical.prevPosY = -999; events.minuteEventVertical.isMouseDown = false; valueHasChanged = true; }, mouseMove: function (e) { if (events.minuteEventVertical.isMouseDown) { events.minuteEventVertical.areValuesCentered = false; posY = e.data.originalEvent.touches ? e.data.originalEvent.touches[0].pageY : e.data.originalEvent.pageY; if (events.minuteEventVertical.prevPosY === -999) events.minuteEventVertical.prevPosY = posY; var direction = posY - events.minuteEventVertical.prevPosY; if (isNaN(direction)) direction = 0; if ((minutes !== "00" && direction >= 0) || (minutes !== "59" && direction <= 0)) { for (var i = 0; i < minuteText.length; i++) { minuteText[i].y += direction; if (minuteText[i].y >= BCB.height * 0.5 - BCB.width * 0.05 && minuteText[i].y <= BCB.height * 0.5 + BCB.width * 0.05) { minutes = minuteText[i].text; // setValueCircular(parseInt(textMinute.text)); events.minuteEventVertical.elementTextIndex = i; } else if (minuteText[i].y >= BCB.height * 0.5 + BCB.width * 0.17 || minuteText[i].y <= BCB.height * 0.5 - BCB.width * 0.17) { minuteText[i].alpha = 0; } minuteText[i].alpha = Utils.calcVerticalRatio(minuteText[i].y); minuteText[i].style.fontSize = Utils.calcVerticalRatio(minuteText[i].y) * BCB.width * 0.05 + (ratio * BCB.width * 0.1) / 2 + "pt"; } } events.minuteEventVertical.prevPosY = posY; } }, isMouseDown: false, areValuesCentered: false, prevPosY: -999, elementTextIndex: 0 }, eventCircularForSeconds: { mouseDown: function (e) { events.eventCircularForSeconds.isMouseDown = true; }, mouseUp: function (e) { events.eventCircularForSeconds.isMouseDown = false; events.eventCircularForSeconds.prevValue = null; valueHasChanged = true; //console.log("teste3"); if (valueHasChanged) { BCBControls.Timmer.onChange(hours + ":" + minutes + ":" + seconds); //BCBControls.Timmer.onChange(seconds); BCB.data.time = hours + ":" + minutes + ":" + seconds; } }, mouseMove: function (e) { if (events.eventCircularForSeconds.isMouseDown && events.minuteEventVertical.areValuesCentered) { drawHandlerProgress(e); var updateValue = false; var intValue = parseInt(Utils.CalcPerimeter(angle, radius) * 60 / totalPerimeter); var strValue = ""; if (events.eventCircularForSeconds.prevValue === null) { events.eventCircularForSeconds.prevValue = intValue; } seconds = intValue; var labelValue = parseInt(minutes); if (events.eventCircularForSeconds.prevValue <= 59 && events.eventCircularForSeconds.prevValue > 40 && intValue >= 0 && intValue < 20) { if (labelValue < 59) { labelValue++; if (labelValue < 10) strValue = "0" + labelValue; else strValue = labelValue; minutes = strValue; updateValue = true; } else { updateValue = false; } } else if (events.eventCircularForSeconds.prevValue < 20 && events.eventCircularForSeconds.prevValue >= 0 && intValue <= 59 && intValue > 40) { if (labelValue > 0) { labelValue--; if (labelValue < 10) strValue = "0" + labelValue; else strValue = labelValue; minutes = strValue; updateValue = true; } else { updateValue = false; } } if (updateValue) { for (var i = 0; i < minuteText.length; i++) { minuteText[i].y = minuteText[i].jsonData.y + (59 - parseInt(minutes)) * BCB.width * 0.14; minuteText[i].alpha = Utils.calcVerticalRatio(minuteText[i].y); minuteText[i].style.fontSize = Utils.calcVerticalRatio(minuteText[i].y) * BCB.width * 0.05 + (ratio * BCB.width * 0.1) / 2 + "pt"; } } events.eventCircularForSeconds.prevValue = intValue; } }, isMouseDown: false , currentValue: 0 , prevValue: null } }; //slashes var stepAngle = Math.PI * 2 / defOpt.steps; var steps = [], hourText = [], minuteText = []; for (i = 0; i < defOpt.steps; i++) { colorR = parseInt(((i * stepAngle) * 0xFF) / (Math.PI)).toString(16).toUpperCase(); colorG = parseInt(((i * stepAngle) * 0x88) / (Math.PI)).toString(16).toUpperCase(); if (i * stepAngle < 0.75) { color = 0x1b0e00; } else if (i * stepAngle > Math.PI) { color = 0xFF8800; } else { color = "0x" + colorR + colorG; if (color.length === 7) color += "0"; else if (color.length === 6) color += "00"; } var step = new PIXI.Graphics(); step.beginFill(0xFF3300); step.lineStyle(BCB.width * 0.007, 0x444444, 0.5); step.moveTo(BCB.width * 0.3, 0); step.lineTo(BCB.width * 0.33, 0); step.x = BCB.width / 2; step.y = BCB.height / 2; step.color = color; step.rotation = i * stepAngle - Math.PI / 2; step.pivot.set(0, 0); steps.push(step); container.addChild(step); //point around if (i !== 0 && i !== parseInt(defOpt.steps / 4) && i !== parseInt(defOpt.steps * 3 / 4) && i !== defOpt.steps / 2) { var pointAround = new PIXI.Graphics(); pointAround.beginFill(0x777777, 0.5); pointAround.drawCircle(BCB.width * 0.203, BCB.width * 0.203, BCB.width * 0.0033); pointAround.x = BCB.width / 2; pointAround.y = BCB.height / 2; pointAround.pivot.set(0, 0); pointAround.rotation = i * stepAngle - Math.PI / 4; pointAround.endFill(); container.addChild(pointAround); } if (i === 0 || i === parseInt(defOpt.steps / 4) || i === parseInt(defOpt.steps / 2) || i === parseInt(defOpt.steps * 3 / 4)) { var stepLarger = new PIXI.Graphics(); stepLarger.beginFill(0xFF3300); stepLarger.lineStyle(BCB.width * 0.004, 0x444444, 0.5); stepLarger.moveTo(BCB.width * 0.267, 0); stepLarger.lineTo(BCB.width * 0.29, 0); stepLarger.x = BCB.width / 2; stepLarger.y = BCB.height / 2; stepLarger.pivot.set(0, 0); stepLarger.rotation = (i * stepAngle); container.addChild(stepLarger); } } var counter = 0; //hour labels for (var i = defOpt.hours; i >= 0; i--) { _hourtext = counter; if (counter < 10) var _hourtext = '0' + counter; var text = new PIXI.Text(_hourtext.toString(), {font: BCB.width * 0.1 + "px Roboto", fill: "#333333"}); text.x = BCB.width * 0.5 - BCB.width * 0.1; text.y = BCB.height * 0.5 - i * BCB.width * 0.14; text.jsonData = { y: BCB.height * 0.5 - i * BCB.width * 0.14 }; if (text.y >= BCB.height * 0.5 + BCB.width * 0.2 || text.y <= BCB.height * 0.5 - BCB.width * 0.2) text.alpha = 0; else text.alpha = 0.5; text.anchor.set(0.5, 0.5); hourText.push(text); container.addChild(text); counter++; } //minute labels counter = 0; for (var i = 59; i >= 0; i--) { _minuteText = (counter); if (counter < 10) var _minuteText = '0' + counter; var text = new PIXI.Text(_minuteText.toString(), {font: BCB.width * 0.1 + "px Roboto", fill: "#333333"}); text.x = BCB.width * 0.5 + BCB.width * 0.1; text.y = BCB.height * 0.5 - i * BCB.width * 0.14; text.jsonData = {y: BCB.height * 0.5 - i * BCB.width * 0.14}; if (text.y >= BCB.height * 0.5 + BCB.width * 0.2 || text.y <= BCB.height * 0.5 - BCB.width * 0.2) text.alpha = 0; else text.alpha = 0.5; text.anchor.set(0.5, 0.5); minuteText.push(text); container.addChild(text); counter++; } //### CIRCULO QUE VAI FAZER O HANDLING ### var hitCircle = new PIXI.Graphics(); hitCircle.beginFill(0xFF0000, 0); hitCircle.drawCircle(0, 0, BCB.width * 0.38); hitCircle.x = BCB.width / 2; hitCircle.y = BCB.height / 2; hitCircle.alpha = 1; hitCircle.endFill(); hitCircle.interactive = true; hitCircle.on('pointerupoutside', events.eventCircularForSeconds.mouseUp).on('pointerup', events.eventCircularForSeconds.mouseUp).on('pointerdown', events.eventCircularForSeconds.mouseDown).on('pointermove', events.eventCircularForSeconds.mouseMove); hitCircle.on('click', function (e) { events.eventCircularForSeconds.isMouseDown = true; events.eventCircularForSeconds.mouseMove(e); events.eventCircularForSeconds.isMouseDown = false; }); hitCircle.on('tap', function (e) { events.eventCircularForSeconds.isMouseDown = true; events.eventCircularForSeconds.mouseMove(e); events.eventCircularForSeconds.isMouseDown = false; }); container.addChild(hitCircle); var textHour = new PIXI.Text('00', {font: BCB.width * 0.1 + "px Roboto", fontWeight: 'bold', fill: "#333"}); textHour.x = BCB.width * 0.5 - BCB.width * 0.1; textHour.y = BCB.height * 0.5; textHour.anchor.set(0.5, 0.5); textHour.alpha = 0; container.addChild(textHour); var textSeparator = new PIXI.Text(':', {font: BCB.width * 0.1 + "px Roboto", fontWeight: 'bold', fill: "#333"}); textSeparator.x = BCB.width * 0.5; textSeparator.y = BCB.height * 0.5; textSeparator.anchor.set(0.5, 0.5); container.addChild(textSeparator); var textMinute = new PIXI.Text('00', {font: BCB.width * 0.1 + "px Roboto", fontWeight: 'bold', fill: "#333"}); textMinute.x = BCB.width * 0.5 + BCB.width * 0.1; textMinute.y = BCB.height * 0.5; textMinute.anchor.set(0.5, 0.5); textMinute.alpha = 0; container.addChild(textMinute); var hitSquareHour = new PIXI.Graphics(); hitSquareHour.beginFill(0x0000FF, 0); hitSquareHour.drawRect(0, 0, BCB.width * 0.2, BCB.width * 0.38); hitSquareHour.x = BCB.width / 2 - BCB.width * 0.2; hitSquareHour.y = BCB.height / 2 - BCB.width * 0.19; hitSquareHour.endFill(); hitSquareHour.interactive = true; hitSquareHour.on('pointerupoutside', events.hourEvent.mouseUp).on('pointerup', events.hourEvent.mouseUp).on('pointerdown', events.hourEvent.mouseDown).on('pointermove', events.hourEvent.mouseMove); container.addChild(hitSquareHour); var hitSquareMinute = new PIXI.Graphics(); hitSquareMinute.beginFill(0x00FF00, 0); hitSquareMinute.drawRect(0, 0, BCB.width * 0.2, BCB.width * 0.38); hitSquareMinute.x = BCB.width / 2; hitSquareMinute.y = BCB.height / 2 - BCB.width * 0.19; hitSquareMinute.endFill(); hitSquareMinute.interactive = true; hitSquareMinute.on('pointerupoutside', events.minuteEventVertical.mouseUp).on('pointerup', events.minuteEventVertical.mouseUp).on('pointerdown', events.minuteEventVertical.mouseDown).on('pointermove', events.minuteEventVertical.mouseMove); container.addChild(hitSquareMinute); var label = new PIXI.Text(defOpt.labels[0].toString()+'s', {font: BCB.width * 0.04 + "px Roboto", fill: "#777"}); label.x = BCB.width * 0.5; label.y = BCB.height * 0.5; label.pivot.set(0, BCB.width * 0.24); label.anchor.set(0.5, 0.5); container.addChild(label); label = new PIXI.Text(defOpt.labels[1] + 's', {font: BCB.width * 0.04 + "px Roboto", fill: "#777"}); label.x = BCB.width * 0.73; // older value without "s" label - 0.74 label.y = BCB.height * 0.5; label.pivot.set(0, 0); label.anchor.set(0.5, 0.5); container.addChild(label); label = new PIXI.Text(defOpt.labels[2] + 's', {font: BCB.width * 0.04 + "px Roboto", fill: "#777"}); label.x = BCB.width * 0.5; label.y = BCB.height * 0.5; label.pivot.set(0, -BCB.width * 0.24); label.anchor.set(0.5, 0.5); container.addChild(label); label = new PIXI.Text(defOpt.labels[3] + 's', {font: BCB.width * 0.04 + "px Roboto", fill: "#777"}); label.x = BCB.width * 0.275; label.y = BCB.height * 0.5; label.pivot.set(0, 0); label.anchor.set(0.5, 0.5); container.addChild(label); BCB.stage.interactive = true; // ####### functions ######### function drawHandlerProgress(e) { posX = Utils.getMousePos(e).x; posY = Utils.getMousePos(e).y; angle = Utils.findAngle({x: posX, y: posY}, {x: BCB.width / 2, y: BCB.height / 2}, {x: BCB.width / 2, y: 1}); moveHandler(); } function setValueCircular(val) { if (!isNaN(val)) { seconds = val; angle = (val * Math.PI * 2) / 60 + 0.001; moveHandler(); } } function setValue(value) { var arrayTime; if (value.indexOf(':') > -1) { arrayTime = value.split(':'); // ###### setup minutes ######### // circular handler setValueCircular(arrayTime[2]); //text elements minutes = arrayTime[1].toString(); for (var i = 0; i < minuteText.length; i++) { minuteText[i].y = minuteText[i].jsonData.y + (59 - parseInt(minutes)) * BCB.width * 0.14; if (minuteText[i].y >= BCB.height * 0.5 + BCB.width * 0.17 || minuteText[i].y <= BCB.height * 0.5 - BCB.width * 0.17) { minuteText[i].alpha = 0; } else { minuteText[i].alpha = 0.5; } if (minuteText[i].y >= BCB.height * 0.5 - BCB.width * 0.05 && minuteText[i].y <= BCB.height * 0.5 + BCB.width * 0.05) events.minuteEventVertical.elementTextIndex = i; minuteText[i].alpha = Utils.calcVerticalRatio(minuteText[i].y); minuteText[i].style.fontSize = Utils.calcVerticalRatio(minuteText[i].y) * BCB.width * 0.05 + (ratio * BCB.width * 0.1) / 2 + "pt"; } hours = arrayTime[0].toString(); for (var i = 0; i < hourText.length; i++) { hourText[i].y = hourText[i].jsonData.y + (23 - parseInt(hours)) * BCB.width * 0.14; if (hourText[i].y >= BCB.height * 0.5 + BCB.width * 0.17 || hourText[i].y <= BCB.height * 0.5 - BCB.width * 0.17) { hourText[i].alpha = 0; } else { hourText[i].alpha = 0.5; } if (hourText[i].y >= BCB.height * 0.5 - BCB.width * 0.05 && hourText[i].y <= BCB.height * 0.5 + BCB.width * 0.05) { events.hourEvent.elementTextIndex = i; } hourText[i].alpha = Utils.calcVerticalRatio(hourText[i].y); hourText[i].style.fontSize = Utils.calcVerticalRatio(hourText[i].y) * BCB.width * 0.05 + (ratio * BCB.width * 0.1) / 2 + "pt"; } } } setValue(value); //centrar os valores da hora e minuto depois de escolher function calcVerticalRatio(elementY) { var ratio = 0; if (elementY > BCB.height * 0.5) { ratio = ((BCB.height - elementY) / (BCB.height / 3)) * 2 - 2; } else { ratio = (elementY / (BCB.height / 3)) * 2 - 2; } return ratio; } renderFunction = function () { //CENTRAR AS HORAS if (!events.hourEvent.areValuesCentered && !(events.hourEvent.isMouseDown)) { for (var i = 0; i < hourText.length; i++) { hourText[i].alpha = Utils.calcVerticalRatio(hourText[i].y); hourText[i].style.fontSize = Utils.calcVerticalRatio(hourText[i].y) * BCB.width * 0.05 + (ratio * BCB.width * 0.1) / 2 + "pt"; if (((hourText[events.hourEvent.elementTextIndex].y) + 1) < BCB.height / 2) { hourText[i].y += (BCB.height / 2 - hourText[events.hourEvent.elementTextIndex].y) / 5; } else if (((hourText[events.hourEvent.elementTextIndex].y) - 1) > BCB.height / 2) { hourText[i].y -= (hourText[events.hourEvent.elementTextIndex].y - BCB.height / 2) / 5; } else { events.hourEvent.areValuesCentered = true; if (valueHasChanged) { BCBControls.Timmer.onChange(hours + ":" + minutes + ":" + seconds); BCB.data.time = hours + ":" + minutes + ":" + seconds; } break; } } } //CENTRAR OS MINUTOS if (!events.minuteEventVertical.areValuesCentered && !(events.minuteEventVertical.isMouseDown)) { for (var i = 0; i < minuteText.length; i++) { minuteText[i].alpha = Utils.calcVerticalRatio(minuteText[i].y); minuteText[i].style.fontSize = Utils.calcVerticalRatio(minuteText[i].y) * BCB.width * 0.05 + (ratio * BCB.width * 0.1) / 2 + "pt"; if (parseInt(minuteText[events.minuteEventVertical.elementTextIndex].y + 1) < parseInt(BCB.height / 2)) { minuteText[i].y += (BCB.height / 2 - minuteText[events.minuteEventVertical.elementTextIndex].y) / 5; } else if (parseInt(minuteText[events.minuteEventVertical.elementTextIndex].y - 1) > parseInt(BCB.height / 2)) { minuteText[i].y -= (minuteText[events.minuteEventVertical.elementTextIndex].y - BCB.height / 2) / 5; } else { events.minuteEventVertical.areValuesCentered = true; if (valueHasChanged) { BCBControls.Timmer.onChange(hours + ":" + minutes + ":" + seconds); BCB.data.time = hours + ":" + minutes + ":" + seconds; } break; } } } }; function moveHandler() { try { var index = parseInt((angle * defOpt.steps) / (Math.PI * 2)); for (i = 0; i < index; i++) { steps[i].clear(); steps[i].lineStyle(BCB.width * 0.007, steps[i].color, 1); steps[i].moveTo(BCB.width * 0.3, 0); steps[i].lineTo(BCB.width * 0.33, 0); } steps[index].clear(); steps[index].lineStyle(BCB.width * 0.007, steps[i].color, 1); steps[index].moveTo(BCB.width * 0.3, 0); steps[index].lineTo(BCB.width * 0.35, 0); steps[index].endFill(); for (i = index + 1; i < defOpt.steps; i++) { steps[i].clear(); steps[i].lineStyle(BCB.width * 0.007, 0x444444, 0.3); steps[i].moveTo(BCB.width * 0.3, 0); steps[i].lineTo(BCB.width * 0.33, 0); steps[i].endFill(); } } catch (ex) { } } //####### add container to stage ######### BCB.stage.addChild(container); containerControl = container; }, onChange: defaultFunctions.timmer.onChange }, TimmerClimatization: { avoidOverlappingEvent: false, delayOnChangeExecution: false, timerOnChangeExecution: 0, display: function (value, options) { try { BCB.stage.removeChild(containerControl); containerControl = null; BCB.stage.off('pointermove').off('pointerdown').off('pointerup').off('click').off('tap').off('pointerupoutside'); } catch (error) { console.log("no element: " + error); } var container = new PIXI.Container(); var angle = 0, prevAngle, posX, posY, colorR, colorG, mousedown = false, color, rainbowOfColors = Utils.RainbowColors(); var defOpt = { steps: 60, labels: [0, 15, 30, 45], hours: 23}; if (options !== 'undefined' && options !== null) { defOpt = $.extend(true, {}, defOpt, options); } var hours, minutes, seconds; //vai ser utilizada esta variavel para validar se os valores foram mudados ou não, para prevenir chamar a função //onChange sem ter sido mudado nada. var valueHasChanged = false; var ratio = 0; if (BCB.width > BCB.height) ratio = BCB.width / BCB.height; else ratio = BCB.height / BCB.width; var radius = BCB.width * 0.33; var totalPerimeter = Utils.CalcPerimeter(Math.PI * 2, radius); //events var events = { hourEvent: { mouseDown: function (e) { events.hourEvent.isMouseDown = true; events.hourEvent.prevPosY = -999; }, mouseUp: function (e) { BCBControls.TimmerClimatization.avoidOverlappingEvent = true; events.hourEvent.isMouseDown = false; events.hourEvent.prevPosY = -999; valueHasChanged = true; setValue(hours + ":" + minutes + ":" + seconds); /*if (((parseInt(hours) * 60) + parseInt(minutes)) > 120) resetCircularHandler(e); */ if (((parseInt(hours) * 60) + parseInt(minutes)) > 120) resetCircularHandler(e); }, mouseMove: function (e) { if (events.hourEvent.isMouseDown) { events.hourEvent.areValuesCentered = false; posY = e.data.originalEvent.touches ? e.data.originalEvent.touches[0].pageY : e.data.originalEvent.pageY; if (events.hourEvent.prevPosY === -999) events.hourEvent.prevPosY = posY; var direction = posY - events.hourEvent.prevPosY; if (isNaN(direction)) direction = 0; if ((parseInt(hours) > 0) || (parseInt(hours) < defOpt.hours)) { for (var i = 0; i < hourText.length; i++) { hourText[i].y += direction; if (hourText[i].y >= BCB.height * 0.5 - BCB.width * 0.05 && hourText[i].y <= BCB.height * 0.5 + BCB.width * 0.05) { //console.log("IN VALIDATION ZONE: " + hourText[i].text); //console.log(" [i] : " + i); hours = hourText[i].text; hourText[i].style.fontSize = ratio * BCB.width * 0.1 + "pt"; events.hourEvent.elementTextIndex = i; } hourText[i].alpha = Utils.calcVerticalRatio(hourText[i].y); hourText[i].style.fontSize = Utils.calcVerticalRatio(hourText[i].y) * BCB.width * 0.05 + (ratio * BCB.width * 0.1) / 2 + "pt"; } } events.hourEvent.prevPosY = posY; } }, isMouseDown: false, areValuesCentered: true, prevPosY: -999, elementTextIndex: 0 }, minuteEventVertical: { mouseDown: function (e) { events.minuteEventVertical.prevPosY = -999; events.minuteEventVertical.isMouseDown = true; BCBControls.TimmerClimatization.delayOnChangeExecution = true; }, mouseUp: function (e) { BCBControls.TimmerClimatization.avoidOverlappingEvent = true; events.minuteEventVertical.prevPosY = -999; events.minuteEventVertical.isMouseDown = false; valueHasChanged = true; setValue(hours + ":" + minutes + ":" + seconds); BCBControls.TimmerClimatization.delayOnChangeExecution = true; }, mouseMove: function (e) { BCBControls.TimmerClimatization.delayOnChangeExecution = true; if (events.minuteEventVertical.isMouseDown) { events.minuteEventVertical.areValuesCentered = false; posY = e.data.originalEvent.touches ? e.data.originalEvent.touches[0].pageY : e.data.originalEvent.pageY; if (events.minuteEventVertical.prevPosY === -999) events.minuteEventVertical.prevPosY = posY; var direction = posY - events.minuteEventVertical.prevPosY; if (isNaN(direction)) direction = 0; if ((minutes !== "00" && direction >= 0) || (minutes !== "59" && direction <= 0)) { for (var i = 0; i < minuteText.length; i++) { minuteText[i].y += direction; if (minuteText[i].y >= BCB.height * 0.5 - BCB.width * 0.05 && minuteText[i].y <= BCB.height * 0.5 + BCB.width * 0.05) { minutes = minuteText[i].text; events.minuteEventVertical.elementTextIndex = i; } else if (minuteText[i].y >= BCB.height * 0.5 + BCB.width * 0.17 || minuteText[i].y <= BCB.height * 0.5 - BCB.width * 0.17) { minuteText[i].alpha = 0; } minuteText[i].alpha = Utils.calcVerticalRatio(minuteText[i].y); minuteText[i].style.fontSize = Utils.calcVerticalRatio(minuteText[i].y) * BCB.width * 0.05 + (ratio * BCB.width * 0.1) / 2 + "pt"; } } events.minuteEventVertical.prevPosY = posY; } }, isMouseDown: false, areValuesCentered: false, prevPosY: -999, elementTextIndex: 0 }, eventCircularForSeconds: { mouseDown: function (e) { events.eventCircularForSeconds.isMouseDown = true; }, mouseUp: function (e) { // evento de mover o handler dos segundos que vai passar a ser minutos events.eventCircularForSeconds.isMouseDown = false; events.eventCircularForSeconds.prevValue = null; // paulo setValue(hours + ":" + minutes + ":" + seconds); valueHasChanged = true; if (valueHasChanged && !BCBControls.TimmerClimatization.avoidOverlappingEvent) { //BCBControls.Timmer.onChange(hours + ":" + minutes + ":" + seconds); BCBControls.TimmerClimatization.onChange(hours + ":" + minutes + ":" + seconds); BCB.data.time = hours + ":" + minutes + ":" + seconds; } // release blocker in avoidOverlappingEvent setTimeout(function () { BCBControls.TimmerClimatization.avoidOverlappingEvent = false; }, 1000); }, mouseMove: function (e) { if (events.eventCircularForSeconds.isMouseDown && events.minuteEventVertical.areValuesCentered) { //console.log("hours: " + hours + " minutes: " + minutes); // paulo if (((parseInt(hours) * 60) + parseInt(minutes)) <= 120) drawHandlerProgress(e); else resetCircularHandler(e); var updateValue = false; var intValue = parseInt(Utils.CalcPerimeter(angle, radius) * 60 / totalPerimeter); //console.log("intValue: " + intValue + "angle: " + angle); var strValue = ""; if (events.eventCircularForSeconds.prevValue === null) { events.eventCircularForSeconds.prevValue = intValue; } minutes = intValue; var labelValue = parseInt(hours); if (events.eventCircularForSeconds.prevValue <= 59 && events.eventCircularForSeconds.prevValue > 40 && intValue >= 0 && intValue < 20) { if (labelValue < 2) { labelValue++; strValue = "0" + labelValue; hours = strValue; updateValue = true; } else { strValue = '02'; updateValue = false; } } else if (events.eventCircularForSeconds.prevValue < 20 && events.eventCircularForSeconds.prevValue >= 0 && intValue <= 59 && intValue > 40) { if (labelValue > 0) { labelValue--; strValue = "0" + labelValue; hours = strValue; updateValue = true; } else { updateValue = false; } } events.eventCircularForSeconds.prevValue = intValue; } }, isMouseDown: false , currentValue: 0 , prevValue: null } }; //slashes var stepAngle = Math.PI * 2 / defOpt.steps; var steps = [], hourText = [], minuteText = []; for (i = 0; i < defOpt.steps; i++) { colorR = parseInt(((i * stepAngle) * 0xFF) / (Math.PI)).toString(16).toUpperCase(); colorG = parseInt(((i * stepAngle) * 0x88) / (Math.PI)).toString(16).toUpperCase(); if (i * stepAngle < 0.75) { color = 0x1b0e00; } else if (i * stepAngle > Math.PI) { color = 0xFF8800; } else { color = "0x" + colorR + colorG; if (color.length === 7) color += "0"; else if (color.length === 6) color += "00"; } var step = new PIXI.Graphics(); step.beginFill(0xFF3300); step.lineStyle(BCB.width * 0.007, 0x444444, 0.5); step.moveTo(BCB.width * 0.3, 0); step.lineTo(BCB.width * 0.33, 0); step.x = BCB.width / 2; step.y = BCB.height / 2; step.color = color; step.rotation = i * stepAngle - Math.PI / 2; step.pivot.set(0, 0); steps.push(step); container.addChild(step); //point around if (i !== 0 && i !== parseInt(defOpt.steps / 4) && i !== parseInt(defOpt.steps * 3 / 4) && i !== defOpt.steps / 2) { var pointAround = new PIXI.Graphics(); pointAround.beginFill(0x777777, 0.5); pointAround.drawCircle(BCB.width * 0.203, BCB.width * 0.203, BCB.width * 0.0033); pointAround.x = BCB.width / 2; pointAround.y = BCB.height / 2; pointAround.pivot.set(0, 0); pointAround.rotation = i * stepAngle - Math.PI / 4; pointAround.endFill(); container.addChild(pointAround); } if (i === 0 || i === parseInt(defOpt.steps / 4) || i === parseInt(defOpt.steps / 2) || i === parseInt(defOpt.steps * 3 / 4)) { var stepLarger = new PIXI.Graphics(); stepLarger.beginFill(0xFF3300); stepLarger.lineStyle(BCB.width * 0.004, 0x444444, 0.5); stepLarger.moveTo(BCB.width * 0.267, 0); stepLarger.lineTo(BCB.width * 0.29, 0); stepLarger.x = BCB.width / 2; stepLarger.y = BCB.height / 2; stepLarger.pivot.set(0, 0); stepLarger.rotation = (i * stepAngle); container.addChild(stepLarger); } } var counter = 0; //hour labels for (var i = defOpt.hours; i >= 0; i--) { _hourtext = counter; if (counter <= 2) { if (counter < 10) var _hourtext = '0' + counter; var text = new PIXI.Text(_hourtext.toString(), { font: BCB.width * 0.1 + "px Roboto", fill: "#333333" }); text.x = BCB.width * 0.5 - BCB.width * 0.1; text.y = BCB.height * 0.5 - i * BCB.width * 0.14; text.jsonData = { y: BCB.height * 0.5 - i * BCB.width * 0.14 }; if (text.y >= BCB.height * 0.5 + BCB.width * 0.2 || text.y <= BCB.height * 0.5 - BCB.width * 0.2) text.alpha = 0; else text.alpha = 0.5; text.anchor.set(0.5, 0.5); hourText.push(text); container.addChild(text); counter++; } } //minute labels counter = 0; for (var i = 59; i >= 0; i--) { _minuteText = (counter); if (counter < 10) var _minuteText = '0' + counter; var text = new PIXI.Text(_minuteText.toString(), { font: BCB.width * 0.1 + "px Roboto", fill: "#333333" }); text.x = BCB.width * 0.5 + BCB.width * 0.1; text.y = BCB.height * 0.5 - i * BCB.width * 0.14; text.jsonData = { y: BCB.height * 0.5 - i * BCB.width * 0.14 }; if (text.y >= BCB.height * 0.5 + BCB.width * 0.2 || text.y <= BCB.height * 0.5 - BCB.width * 0.2) text.alpha = 0; else text.alpha = 0.5; text.anchor.set(0.5, 0.5); minuteText.push(text); container.addChild(text); counter++; } //### CIRCULO QUE VAI FAZER O HANDLING ### var hitCircle = new PIXI.Graphics(); hitCircle.beginFill(0xFF0000, 0); hitCircle.drawCircle(0, 0, BCB.width * 0.38); hitCircle.x = BCB.width / 2; hitCircle.y = BCB.height / 2; hitCircle.alpha = 1; hitCircle.endFill(); hitCircle.interactive = true; hitCircle.on('pointerupoutside', events.eventCircularForSeconds.mouseUp).on('pointerup', events.eventCircularForSeconds.mouseUp).on('pointerdown', events.eventCircularForSeconds.mouseDown).on('pointermove', events.eventCircularForSeconds.mouseMove); hitCircle.on('click', function (e) { events.eventCircularForSeconds.isMouseDown = true; events.eventCircularForSeconds.mouseMove(e); events.eventCircularForSeconds.isMouseDown = false; }); hitCircle.on('tap', function (e) { events.eventCircularForSeconds.isMouseDown = true; events.eventCircularForSeconds.mouseMove(e); events.eventCircularForSeconds.isMouseDown = false; }); container.addChild(hitCircle); var textHour = new PIXI.Text('00', { font: BCB.width * 0.1 + "px Roboto", fontWeight: 'bold', fill: "#333" }); textHour.x = BCB.width * 0.5 - BCB.width * 0.1; textHour.y = BCB.height * 0.5; textHour.anchor.set(0.5, 0.5); textHour.alpha = 0; container.addChild(textHour); var textSeparator = new PIXI.Text(':', { font: BCB.width * 0.1 + "px Roboto", fontWeight: 'bold', fill: "#333" }); textSeparator.x = BCB.width * 0.5; textSeparator.y = BCB.height * 0.5; textSeparator.anchor.set(0.5, 0.5); container.addChild(textSeparator); var textMinute = new PIXI.Text('00', { font: BCB.width * 0.1 + "px Roboto", fontWeight: 'bold', fill: "#333" }); textMinute.x = BCB.width * 0.5 + BCB.width * 0.1; textMinute.y = BCB.height * 0.5; textMinute.anchor.set(0.5, 0.5); textMinute.alpha = 0; container.addChild(textMinute); var hitSquareHour = new PIXI.Graphics(); hitSquareHour.beginFill(0x0000FF, 0); hitSquareHour.drawRect(0, 0, BCB.width * 0.2, BCB.width * 0.38); hitSquareHour.x = BCB.width / 2 - BCB.width * 0.2; hitSquareHour.y = BCB.height / 2 - BCB.width * 0.19; hitSquareHour.endFill(); hitSquareHour.interactive = true; hitSquareHour.on('pointerupoutside', events.hourEvent.mouseUp).on('pointerup', events.hourEvent.mouseUp).on('pointerdown', events.hourEvent.mouseDown).on('pointermove', events.hourEvent.mouseMove); container.addChild(hitSquareHour); var hitSquareMinute = new PIXI.Graphics(); hitSquareMinute.beginFill(0x00FF00, 0); hitSquareMinute.drawRect(0, 0, BCB.width * 0.2, BCB.width * 0.38); hitSquareMinute.x = BCB.width / 2; hitSquareMinute.y = BCB.height / 2 - BCB.width * 0.19; hitSquareMinute.endFill(); hitSquareMinute.interactive = true; hitSquareMinute.on('pointerupoutside', events.minuteEventVertical.mouseUp).on('pointerup', events.minuteEventVertical.mouseUp).on('pointerdown', events.minuteEventVertical.mouseDown).on('pointermove', events.minuteEventVertical.mouseMove); container.addChild(hitSquareMinute); var label = new PIXI.Text(defOpt.labels[0].toString() + 'm', { font: BCB.width * 0.04 + "px Roboto", fill: "#777" }); label.x = BCB.width * 0.5; label.y = BCB.height * 0.5; label.pivot.set(0, BCB.width * 0.24); label.anchor.set(0.5, 0.5); container.addChild(label); label = new PIXI.Text(defOpt.labels[1] + 'm', { font: BCB.width * 0.04 + "px Roboto", fill: "#777" }); label.x = BCB.width * 0.73; // older value without "s" label - 0.74 label.y = BCB.height * 0.5; label.pivot.set(0, 0); label.anchor.set(0.5, 0.5); container.addChild(label); label = new PIXI.Text(defOpt.labels[2] + 'm', { font: BCB.width * 0.04 + "px Roboto", fill: "#777" }); label.x = BCB.width * 0.5; label.y = BCB.height * 0.5; label.pivot.set(0, -BCB.width * 0.24); label.anchor.set(0.5, 0.5); container.addChild(label); label = new PIXI.Text(defOpt.labels[3] + 'm', { font: BCB.width * 0.04 + "px Roboto", fill: "#777" }); label.x = BCB.width * 0.275; label.y = BCB.height * 0.5; label.pivot.set(0, 0); label.anchor.set(0.5, 0.5); container.addChild(label); BCB.stage.interactive = true; // ####### functions ######### function drawHandlerProgress(e) { posX = Utils.getMousePos(e).x; posY = Utils.getMousePos(e).y; angle = Utils.findAngle({ x: posX, y: posY }, { x: BCB.width / 2, y: BCB.height / 2 }, { x: BCB.width / 2, y: 1 }); moveHandler(); } function setValueCircular(val) { // paulo if (!isNaN(val)) { minutes = val; angle = (parseInt(val) * Math.PI * 2) / 60 + 0.001; if (((parseInt(hours) * 60) + parseInt(minutes)) <= 120) moveHandler(); } } function setValue(value) { // paulo var arrayTime, m, s, h; if (value.indexOf(':') > -1) { arrayTime = value.split(':'); h = arrayTime[0]; m = arrayTime[1]; minutes = arrayTime[1].toString(); hours = arrayTime[0].toString(); if (((parseInt(hours) * 60) + parseInt(minutes)) > 120) { //console.log("%c Value of minutes out of range", "color:red"); m = '00'; h = '02'; } setValueCircular(arrayTime[1]); // ###### setup minutes ######### //text elements for (var i = 0; i < minuteText.length; i++) { minuteText[i].y = minuteText[i].jsonData.y + (59 - parseInt(m)) * BCB.width * 0.14; if (minuteText[i].y >= BCB.height * 0.5 + BCB.width * 0.17 || minuteText[i].y <= BCB.height * 0.5 - BCB.width * 0.17) { minuteText[i].alpha = 0; } else { minuteText[i].alpha = 0.5; } if (minuteText[i].y >= BCB.height * 0.5 - BCB.width * 0.05 && minuteText[i].y <= BCB.height * 0.5 + BCB.width * 0.05) events.minuteEventVertical.elementTextIndex = i; minuteText[i].alpha = Utils.calcVerticalRatio(minuteText[i].y); minuteText[i].style.fontSize = Utils.calcVerticalRatio(minuteText[i].y) * BCB.width * 0.05 + (ratio * BCB.width * 0.1) / 2 + "pt"; } for (var i = 0; i < hourText.length; i++) { hourText[i].y = hourText[i].jsonData.y + (23 - parseInt(h)) * BCB.width * 0.14; if (hourText[i].y >= BCB.height * 0.5 + BCB.width * 0.17 || hourText[i].y <= BCB.height * 0.5 - BCB.width * 0.17) { hourText[i].alpha = 0; } else { hourText[i].alpha = 0.5; } if (hourText[i].y >= BCB.height * 0.5 - BCB.width * 0.05 && hourText[i].y <= BCB.height * 0.5 + BCB.width * 0.05) { events.hourEvent.elementTextIndex = i; } hourText[i].alpha = Utils.calcVerticalRatio(hourText[i].y); hourText[i].style.fontSize = Utils.calcVerticalRatio(hourText[i].y) * BCB.width * 0.05 + (ratio * BCB.width * 0.1) / 2 + "pt"; } } } setValue(value); //centrar os valores da hora e minuto depois de escolher function calcVerticalRatio(elementY) { var ratio = 0; if (elementY > BCB.height * 0.5) { ratio = ((BCB.height - elementY) / (BCB.height / 3)) * 2 - 2; } else { ratio = (elementY / (BCB.height / 3)) * 2 - 2; } return ratio; } renderFunction = function () { //CENTRAR AS HORAS if (!events.hourEvent.areValuesCentered && !(events.hourEvent.isMouseDown)) { for (var i = 0; i < hourText.length; i++) { hourText[i].alpha = Utils.calcVerticalRatio(hourText[i].y); hourText[i].style.fontSize = Utils.calcVerticalRatio(hourText[i].y) * BCB.width * 0.05 + (ratio * BCB.width * 0.1) / 2 + "pt"; if (((hourText[events.hourEvent.elementTextIndex].y) + 1) < BCB.height / 2) { hourText[i].y += (BCB.height / 2 - hourText[events.hourEvent.elementTextIndex].y) / 5; } else if (((hourText[events.hourEvent.elementTextIndex].y) - 1) > BCB.height / 2) { hourText[i].y -= (hourText[events.hourEvent.elementTextIndex].y - BCB.height / 2) / 5; } else { events.hourEvent.areValuesCentered = true; if (valueHasChanged) { BCBControls.TimmerClimatization.onChange(hours + ":" + minutes + ":" + seconds); BCB.data.time = hours + ":" + minutes + ":" + seconds; } break; } } } //CENTRAR OS MINUTOS if (!events.minuteEventVertical.areValuesCentered && !(events.minuteEventVertical.isMouseDown)) { for (var i = 0; i < minuteText.length; i++) { minuteText[i].alpha = Utils.calcVerticalRatio(minuteText[i].y); minuteText[i].style.fontSize = Utils.calcVerticalRatio(minuteText[i].y) * BCB.width * 0.05 + (ratio * BCB.width * 0.1) / 2 + "pt"; if (parseInt(minuteText[events.minuteEventVertical.elementTextIndex].y + 1) < parseInt(BCB.height / 2)) { minuteText[i].y += (BCB.height / 2 - minuteText[events.minuteEventVertical.elementTextIndex].y) / 5; } else if (parseInt(minuteText[events.minuteEventVertical.elementTextIndex].y - 1) > parseInt(BCB.height / 2)) { minuteText[i].y -= (minuteText[events.minuteEventVertical.elementTextIndex].y - BCB.height / 2) / 5; } else { events.minuteEventVertical.areValuesCentered = true; /*if (valueHasChanged) { BCBControls.Timmer.onChange(hours + ":" + minutes + ":" + seconds); BCB.data.time = hours + ":" + minutes + ":" + seconds; }*/ if (BCBControls.TimmerClimatization.delayOnChangeExecution) { // paulo try { clearTimeout(BCBControls.TimmerClimatization.timerOnChangeExecution); } catch (err) { } BCBControls.TimmerClimatization.timerOnChangeExecution = setTimeout(function () { if (valueHasChanged) { BCBControls.TimmerClimatization.onChange(hours + ":" + minutes + ":" + seconds); BCB.data.time = hours + ":" + minutes + ":" + seconds; } BCBControls.TimmerClimatization.delayOnChangeExecution = false; }, 1200); } else { if (valueHasChanged) { BCBControls.TimmerClimatization.onChange(hours + ":" + minutes + ":" + seconds); BCB.data.time = hours + ":" + minutes + ":" + seconds; } } break; } } } }; function moveHandler() { try { var index = parseInt((angle * defOpt.steps) / (Math.PI * 2)); for (i = 0; i < index; i++) { steps[i].clear(); steps[i].lineStyle(BCB.width * 0.007, steps[i].color, 1); steps[i].moveTo(BCB.width * 0.3, 0); steps[i].lineTo(BCB.width * 0.33, 0); } steps[index].clear(); steps[index].lineStyle(BCB.width * 0.007, steps[i].color, 1); steps[index].moveTo(BCB.width * 0.3, 0); steps[index].lineTo(BCB.width * 0.35, 0); steps[index].endFill(); // other slashes that dont be used for (i = index + 1; i < defOpt.steps; i++) { steps[i].clear(); steps[i].lineStyle(BCB.width * 0.007, 0x444444, 0.3); steps[i].moveTo(BCB.width * 0.3, 0); steps[i].lineTo(BCB.width * 0.33, 0); steps[i].endFill(); } } catch (ex) { console.log("moveHandlerException: " + ex); } } function resetCircularHandler(e) { // make all slashes to be disabled posX = Utils.getMousePos(e).x; posY = Utils.getMousePos(e).y; angle = Utils.findAngle({ x: posX, y: posY }, { x: BCB.width / 2, y: BCB.height / 2 }, { x: BCB.width / 2, y: 1 }); for (i = 0; i < defOpt.steps; i++) { steps[i].clear(); steps[i].lineStyle(BCB.width * 0.007, 0x444444, 0.3); steps[i].moveTo(BCB.width * 0.3, 0); steps[i].lineTo(BCB.width * 0.33, 0); steps[i].endFill(); } } //####### add container to stage ######### BCB.stage.addChild(container); containerControl = container; }, onChange: defaultFunctions.timmer.onChange }, Dimmer: { display: function (value, options) { var container = new PIXI.Container(); try { BCB.stage.removeChild(containerControl); containerControl = null; BCB.stage.off('pointermove').off('pointerdown').off('pointerup').off('click').off('tap').off('pointerupoutside'); } catch (error) { console.log("no element: " + error); } var defOpt = {min: 0, max: 100}; //load default options if (options !== 'undefined' && options !== null) { defOpt = $.extend(true, {}, defOpt, options); } function calcVerticalRatio(elementY) { var ratio = 0; if (elementY > BCB.height * 0.5) { ratio = ((BCB.height - elementY) / (BCB.height / 3)) * 2 - 2; } else { ratio = (elementY / (BCB.height / 3)) * 2 - 2; } return ratio; } /*initialize some values * - total perimeter = from PI-PI/4 To PI/4 (360º - 90º = 270º) */ var radius = BCB.width * 0.33; var totalPerimeter = Utils.CalcPerimeter((Math.PI - Math.PI / 4) * 2, radius); var posX, posY, angle, prevAngle, angleForPerimeter, prevPosY = 0; var percentText = [], elementTextIndex = 0; var events = { verticalSelection: { mouseMove: function (e) { BCB.userInteraction = true; if (events.verticalSelection.isMouseDown) { areValuesCentered = false; posY = e.data.originalEvent.touches ? e.data.originalEvent.touches[0].pageY : e.data.originalEvent.pageY; if (prevPosY === -999) prevPosY = posY; var direction = posY - prevPosY; if (isNaN(direction)) direction = 0; if ((parseInt(text.text) !== defOpt.max && direction > 0) || (parseInt(text.text) !== defOpt.min && direction < 0)) { for (var i = 0; i < percentText.length; i++) { percentText[i].y += direction; if (percentText[i].y >= BCB.height * 0.5 - BCB.width * 0.1 && percentText[i].y <= BCB.height * 0.5 + BCB.width * 0.1) { elementTextIndex = i; text.text = percentText[i].text; var _angle = parseInt(text.text) * (Math.PI + Math.PI / 2) / defOpt.max + Math.PI - Math.PI / 4; handler.rotation = _angle; lineProgress.clear(); lineProgress.lineStyle(BCB.width * 0.03, 0xf79226); lineProgress.arc(BCB.width * 0.5, BCB.height * 0.5, radius, Math.PI - Math.PI / 4, _angle); } var alpha = Utils.calcVerticalRatio(percentText[i].y) + 0.5; if (alpha > 1) alpha = 1; percentText[i].alpha = alpha; percentText[i].style.fontSize = Utils.calcVerticalRatio(percentText[i].y) * BCB.width * 0.08 + 40 + "pt"; } } prevPosY = posY; } }, mouseDown: function (e) { BCB.userInteraction = true; prevPosY = -999; events.verticalSelection.isMouseDown = true; }, mouseUp: function (e) { prevPosY = -999; events.verticalSelection.isMouseDown = false; BCBControls.Dimmer.onChange(text.text); BCB.data.value = text.text; }, click: function (e) { BCB.userInteraction = true; prevPosY = -999; events.verticalSelection.isMouseDown = false; }, isMouseDown: false }, circleSelection: { mouseMove: function (e) { BCB.userInteraction = true; if (events.circleSelection.isMouseDown && areValuesCentered) { posX = Utils.getMousePos(e).x; posY = Utils.getMousePos(e).y; angle = Utils.findAngle({x: posX, y: posY}, {x: BCB.width / 2, y: BCB.height / 2}, {x: BCB.width / 2, y: 1}) - Math.PI / 2; if (angle < Math.PI - Math.PI / 4 && Math.cos(angle) < 0) { angle = Math.PI - Math.PI / 4; } else if (angle > Math.PI / 4 && Math.cos(angle) > 0) { angle = Math.PI / 4; } else { prevAngle = angle; } if (Math.cos(angle) > 0) { angleForPerimeter = angle + Math.PI * 2; } else { angleForPerimeter = angle; } var percentValue = parseInt(Utils.CalcPerimeter(angleForPerimeter - Math.PI + Math.PI / 4, radius) * defOpt.max / totalPerimeter); lineProgress.clear(); lineProgress.lineStyle(BCB.width * 0.03, 0xf79226); lineProgress.arc(BCB.width * 0.5, BCB.height * 0.5, radius, Math.PI - Math.PI / 4, angle); text.text = percentValue.toString(); for (var i = 0; i < percentText.length; i++) { percentText[i].y = percentText[i].jsonData.y + parseInt(text.text) * BCB.width * 0.2; var alpha = Utils.calcVerticalRatio(percentText[i].y) + 0.5; if (alpha > 1) alpha = 1; percentText[i].alpha = alpha; percentText[i].style.fontSize = Utils.calcVerticalRatio(percentText[i].y) * BCB.width * 0.08 + 40 + "pt"; } moveHandlerToPosition(angle); } }, mouseDown: function (e) { BCB.userInteraction = true; events.circleSelection.isMouseDown = true; }, mouseUp: function (e) { lineProgress.endFill(); events.circleSelection.isMouseDown = false; BCBControls.Dimmer.onChange(text.text); BCB.data.value = text.text; }, click: function (e) { BCB.userInteraction = true; events.circleSelection.isMouseDown = true; events.circleSelection.mouseMove(e); events.circleSelection.isMouseDown = false; BCBControls.Dimmer.onChange(text.text); BCB.data.value = text.text; }, isMouseDown: false } }; var lineTrack = new PIXI.Graphics(); lineTrack.lineStyle(BCB.width * 0.015, 0x6e6f72); lineTrack.arc(BCB.width * 0.5, BCB.height * 0.5, radius, Math.PI - Math.PI / 4, Math.PI / 4); lineTrack.interactive = true; lineTrack.on('click', function (e) { events.circleSelection.click(e); }); lineTrack.on('tap', function (e) { events.circleSelection.click(e); }); lineTrack.endFill(); var squareDimmerMiddle = new PIXI.Sprite.fromImage("bcb_icons/square_dimmer-01.png"); squareDimmerMiddle.x = BCB.width * 0.5; squareDimmerMiddle.y = BCB.height * 0.5; squareDimmerMiddle.width = BCB.width * 0.4; squareDimmerMiddle.height = BCB.width * 0.5; squareDimmerMiddle.alpha = 0; squareDimmerMiddle.anchor.set(0.5, 0.5); var lineProgress = new PIXI.Graphics(); lineProgress.lineStyle(BCB.width * 0.02, 0xf79226); lineProgress.arc(BCB.width * 0.5, BCB.height * 0.5, radius, 0, 0); lineProgress.endFill(); var text = new PIXI.Text(defOpt.min + '%', {font: BCB.width * 0.03 + "px Roboto", fill: "#000"}); text.x = BCB.width * 0.27; text.y = BCB.height * 0.5 + BCB.width * 0.28; text.alpha = 0.5; text.anchor.set(0.5, 0.5); container.addChild(text); var text = new PIXI.Text(defOpt.max + '%', {font: BCB.width * 0.03 + "px Roboto", fill: "#000"}); text.x = BCB.width * 0.73; text.y = BCB.height * 0.5 + BCB.width * 0.28; text.alpha = 0.5; text.anchor.set(0.5, 0.5); container.addChild(text); //top middle circle var middleCircle = new PIXI.Graphics(); middleCircle.beginFill(0x6e6f72); middleCircle.drawCircle(0, 0, BCB.width * 0.01); middleCircle.x = BCB.width * 0.5; middleCircle.y = BCB.height * 0.5 - BCB.width * 0.3; middleCircle.endFill(); container.addChild(middleCircle); //hit area for the handler var hitCircleHandler = new PIXI.Graphics(); hitCircleHandler.beginFill(0x00FF00, 0); hitCircleHandler.drawCircle(0, 0, BCB.width * 0.4); hitCircleHandler.x = BCB.width / 2; hitCircleHandler.y = BCB.height / 2; hitCircleHandler.alpha = 1; hitCircleHandler.endFill(); hitCircleHandler.interactive = true; hitCircleHandler.on('pointermove', events.circleSelection.mouseMove).on('touchmove', events.circleSelection.mouseMove).on('touchstart', events.circleSelection.mouseDown).on('pointerdown', events.circleSelection.mouseDown).on('touchendoutside', events.circleSelection.mouseUp).on('mouseupoutside', events.circleSelection.mouseUp).on('touchend', events.circleSelection.mouseUp).on('click', events.circleSelection.mouseUp); //hit area for the text var hitCircle = new PIXI.Graphics(); hitCircle.beginFill(0xFF0000, 0); hitCircle.drawCircle(0, 0, BCB.width * 0.25); hitCircle.x = BCB.width / 2; hitCircle.y = BCB.height / 2; hitCircle.alpha = 1; hitCircle.endFill(); hitCircle.interactive = true; hitCircle.on('pointermove', events.verticalSelection.mouseMove).on('touchmove', events.verticalSelection.mouseMove).on('touchstart', events.verticalSelection.mouseDown).on('pointerdown', events.verticalSelection.mouseDown).on('touchendoutside', events.verticalSelection.mouseUp).on('mouseupoutside', events.verticalSelection.mouseUp).on('touchend', events.verticalSelection.mouseUp).on('click', events.verticalSelection.mouseUp); for (var i = defOpt.max; i >= defOpt.min; i--) { var text = new PIXI.Text(i.toString(), {font: BCB.width * 0.12 + "px Roboto", fill: "#333333"}); text.x = BCB.width * 0.5; text.y = BCB.height * 0.5 - i * BCB.width * 0.2; text.jsonData = {y: BCB.height * 0.5 - i * BCB.width * 0.2}; text.anchor.set(0.5, 0.5); percentText.push(text); container.addChild(text); } var text = new PIXI.Text('0', {font: BCB.width * 0.3 + "px Roboto", fill: "#000"}); text.x = BCB.width * 0.5; text.y = BCB.height * 0.5; text.alpha = 0; text.anchor.set(0.5, 0.5); //handler var handler = new PIXI.Graphics(); handler.beginFill(0xFFFFFF, 1); handler.lineStyle(BCB.width * 0.01, 0xBBBBBB, 0.5); handler.drawCircle(BCB.width * 0.33, 0, BCB.width * 0.035); handler.interactive = true; handler.pivot.set(0, 0); handler.x = BCB.width / 2; handler.y = BCB.height / 2; handler.rotation = Math.PI - Math.PI / 4; handler.endFill(); handler.on('pointermove', events.circleSelection.mouseMove).on('touchmove', events.circleSelection.mouseMove).on('touchstart', events.circleSelection.mouseDown).on('pointerdown', events.circleSelection.mouseDown).on('touchendoutside', events.circleSelection.mouseUp).on('mouseupoutside', events.circleSelection.mouseUp).on('touchend', events.circleSelection.mouseUp).on('click', events.circleSelection.mouseUp); container.addChild(squareDimmerMiddle); container.addChild(lineTrack); container.addChild(lineProgress); container.addChild(text); container.addChild(hitCircleHandler); container.addChild(hitCircle); container.addChild(handler); containerControl = container; BCB.stage.addChild(container); function moveHandlerToPosition(angle) { handler.rotation = angle; } if (!isNaN(value)) { setValue(value); } function setValue(val) { text.text = val.toString(); var _angle = val * (Math.PI + Math.PI / 2) / defOpt.max + Math.PI - Math.PI / 4; handler.rotation = _angle; lineProgress.clear(); lineProgress.lineStyle(BCB.width * 0.03, 0xf79226); lineProgress.arc(BCB.width * 0.5, BCB.height * 0.5, radius, Math.PI - Math.PI / 4, _angle); for (var i = 0; i < percentText.length; i++) { percentText[i].y = percentText[i].jsonData.y + val * BCB.width * 0.2; var alpha = Utils.calcVerticalRatio(percentText[i].y) + 0.5; if (alpha > 1) alpha = 1; percentText[i].alpha = alpha; percentText[i].style.fontSize = Utils.calcVerticalRatio(percentText[i].y) * BCB.width * 0.08 + 40 + "pt"; } } var areValuesCentered = true; renderFunction = function () { if (!areValuesCentered && !(events.verticalSelection.isMouseDown || events.circleSelection.isMouseDown)) { for (var i = 0; i < percentText.length; i++) { var alpha = Utils.calcVerticalRatio(percentText[i].y) + 0.5; if (alpha > 1) alpha = 1; percentText[i].alpha = alpha; percentText[i].style.fontSize = Utils.calcVerticalRatio(percentText[i].y) * BCB.width * 0.08 + 40 + "pt"; if ((percentText[elementTextIndex].y + 1) < BCB.height / 2) { percentText[i].y += (BCB.height / 2 - percentText[elementTextIndex].y) / 5; } else if ((percentText[elementTextIndex].y - 1) > BCB.height / 2) { percentText[i].y -= (percentText[elementTextIndex].y - BCB.height / 2) / 5; } else { areValuesCentered = true; break; } } } }; }, onChange: defaultFunctions.dimmer.onChange }, Volume: { display: function (value, options) { var container = new PIXI.Container(); try { BCB.stage.removeChild(containerControl); containerControl = null; BCB.stage.off('pointermove').off('pointerdown').off('pointerup').off('click').off('tap').off('pointerupoutside'); } catch (error) { console.log("no element: " + error); } //var defOpt = {min: 0, max: 32}; // gato var defOpt = { min: 0, max: BCB.data.audio.maxVol }; //load default options if (options !== 'undefined' && options !== null) { defOpt = $.extend(true, {}, defOpt, options); } /*initialize some values * - total perimeter = from PI-PI/4 To PI/4 (360º - 90º = 270º) */ var radius = BCB.width * 0.33; var totalPerimeter = Utils.CalcPerimeter((Math.PI - Math.PI / 4) * 2, radius); var posX, posY, angle, prevAngle, angleForPerimeter; var events = { circleSelection: { mouseMove: function (e) { if (events.circleSelection.isMouseDown) { posX = Utils.getMousePos(e).x; posY = Utils.getMousePos(e).y; angle = Utils.findAngle({x: posX, y: posY}, {x: BCB.width / 2, y: BCB.height / 2}, {x: BCB.width / 2, y: 1}) - Math.PI / 2; if (angle < Math.PI - Math.PI / 4 && Math.cos(angle) < 0) { angle = Math.PI - Math.PI / 4; } else if (angle > Math.PI / 4 && Math.cos(angle) > 0) { angle = Math.PI / 4; } else { prevAngle = angle; } if (Math.cos(angle) > 0) { angleForPerimeter = angle + Math.PI * 2; } else { angleForPerimeter = angle; } var percentValue = parseInt(Utils.CalcPerimeter(angleForPerimeter - Math.PI + Math.PI / 4, radius) * defOpt.max / totalPerimeter); lineProgress.clear(); lineProgress.lineStyle(BCB.width * 0.03, 0xf79226); lineProgress.arc(BCB.width * 0.5, BCB.height * 0.5, radius, Math.PI - Math.PI / 4, angle); text.text = percentValue.toString(); moveHandlerToPosition(angle); } }, mouseDown: function (e) { events.circleSelection.isMouseDown = true; }, mouseUp: function (e) { lineProgress.endFill(); BCBControls.Volume.onChange(text.text); BCB.data.audio.volume = text.text; events.circleSelection.isMouseDown = false; }, click: function (e) { events.circleSelection.isMouseDown = true; events.circleSelection.mouseMove(e); events.circleSelection.isMouseDown = false; BCBControls.Volume.onChange(text.text); BCB.data.audio.volume = text.text; }, isMouseDown: false } }; var lineTrack = new PIXI.Graphics(); lineTrack.lineStyle(BCB.width * 0.015, 0x6e6f72); lineTrack.arc(BCB.width * 0.5, BCB.height * 0.5, radius, Math.PI - Math.PI / 4, Math.PI / 4); lineTrack.endFill(); var lineProgress = new PIXI.Graphics(); lineProgress.lineStyle(BCB.width * 0.02, 0xf79226); lineProgress.arc(BCB.width * 0.5, BCB.height * 0.5, radius, 0, 0); lineProgress.endFill(); var text = new PIXI.Text('min.', {font: BCB.width * 0.03 + "px Roboto", fill: "#000"}); text.x = BCB.width * 0.27; text.y = BCB.height * 0.5 + BCB.width * 0.28; text.alpha = 0.5; text.anchor.set(0.5, 0.5); container.addChild(text); var text = new PIXI.Text('max.', {font: BCB.width * 0.03 + "px Roboto", fill: "#000"}); text.x = BCB.width * 0.73; text.y = BCB.height * 0.5 + BCB.width * 0.28; text.alpha = 0.5; text.anchor.set(0.5, 0.5); container.addChild(text); //hit circle for circular click var hitCircleHandler = new PIXI.Graphics(); hitCircleHandler.beginFill(0x00FF00, 0); hitCircleHandler.drawCircle(0, 0, BCB.width * 0.4); hitCircleHandler.x = BCB.width / 2; hitCircleHandler.y = BCB.height / 2; hitCircleHandler.alpha = 1; hitCircleHandler.endFill(); hitCircleHandler.interactive = true; hitCircleHandler.on('pointermove', events.circleSelection.mouseMove).on('pointerdown', events.circleSelection.mouseDown).on('pointerupoutside', events.circleSelection.mouseUp).on('pointerup', events.circleSelection.mouseUp); var hitCirclePreventClick = new PIXI.Graphics(); hitCirclePreventClick.beginFill(0x0000FF, 0); hitCirclePreventClick.drawCircle(0, 0, BCB.width * 0.3); hitCirclePreventClick.x = BCB.width / 2; hitCirclePreventClick.y = BCB.height / 2; hitCirclePreventClick.alpha = 1; hitCirclePreventClick.endFill(); hitCirclePreventClick.interactive = true; //handler var handler = new PIXI.Graphics(); handler.beginFill(0xFFFFFF, 1); handler.lineStyle(BCB.width * 0.01, 0xBBBBBB, 0.5); handler.drawCircle(BCB.width * 0.33, 0, BCB.width * 0.035); handler.interactive = true; handler.pivot.set(0, 0); handler.x = BCB.width / 2; handler.y = BCB.height / 2; handler.rotation = Math.PI - Math.PI / 4; handler.endFill(); handler.on('pointermove', events.circleSelection.mouseMove).on('pointerdown', events.circleSelection.mouseDown).on('pointerupoutside', events.circleSelection.mouseUp).on('pointerup', events.circleSelection.mouseUp); var text = new PIXI.Text('0', {font: BCB.width * 0.25 + "px Roboto", fill: "#333"}); text.x = BCB.width * 0.5; text.y = BCB.height * 0.5 - BCB.width * 0.1; text.anchor.set(0.5, 0.5); var volText = new PIXI.Text('vol.', {font: BCB.width * 0.05 + "px Roboto", fill: "#777"}); volText.x = BCB.width * 0.5; volText.y = BCB.height * 0.5 + BCB.width * 0.03; volText.anchor.set(0.5, 0.5); var playingText = new PIXI.Text(value.playing, {wordWrap: true, wordWrapWidth: BCB.width * 0.4, font: BCB.width * 0.04 + "px Roboto", fill: "#f79226"}); playingText.x = BCB.width * 0.5; playingText.y = BCB.height * 0.5 + BCB.width * 0.15; playingText.anchor.set(0.5, 0.5); var textureSettings = PIXI.Texture.fromImage('bcb_icons/ic_source_options.png'); var settingsIcon = new PIXI.Sprite(textureSettings); settingsIcon.x = BCB.width / 2; settingsIcon.y = BCB.height / 2 + BCB.width * 0.3; settingsIcon.height = BCB.width * 0.12; settingsIcon.width = BCB.width * 0.12; settingsIcon.anchor.set(0.5, 0.5); settingsIcon.interactive = true; settingsIcon.isActive = true; settingsIcon.tint = 0xf79226; settingsIcon.on('tap', goToSettings).on('click', goToSettings); container.addChild(lineTrack); container.addChild(lineProgress); container.addChild(text); container.addChild(volText); container.addChild(playingText); container.addChild(hitCircleHandler); container.addChild(hitCirclePreventClick); container.addChild(handler); container.addChild(settingsIcon); containerControl = container; BCB.stage.addChild(container); function goToSettings() { BCBControls.Volume.onGoToSettings(); } function moveHandlerToPosition(angle) { handler.rotation = angle; } setValue(value); function setValue(val) { text.text = val.volume.toString(); playingText.text = val.playing; var _angle = val.volume * (Math.PI + Math.PI / 2) / defOpt.max + Math.PI - Math.PI / 4; moveHandlerToPosition(_angle); lineProgress.clear(); lineProgress.lineStyle(BCB.width * 0.03, 0xf79226); lineProgress.arc(BCB.width * 0.5, BCB.height * 0.5, radius, Math.PI - Math.PI / 4, _angle); } renderFunction = function () { }; }, onGoToSettings: defaultFunctions.volume.onGoToSettings, onChange: defaultFunctions.volume.onChange }, Climatization: { display: function (value, options) { var container = new PIXI.Container(); try { BCB.stage.removeChild(containerControl); containerControl = null; BCB.stage.off('pointermove').off('pointerdown').off('pointerup').off('click').off('tap').off('pointerupoutside'); } catch (error) { console.log("no element: " + error); } var defOpt = {min: 14, max: 30}; //load default options if (options !== 'undefined' && options !== null) { defOpt = $.extend(true, {}, defOpt, options); } var option; /*initialize some values * - total perimeter = from PI-PI/4 To PI/4 (360º - 90º = 270º) */ var radius = BCB.width * 0.33; var totalPerimeter = Utils.CalcPerimeter((Math.PI - Math.PI / 4) * 2, radius); var posX, posY, angle, prevAngle, angleForPerimeter; var colorClimatization = {cold: 0x00b6b9, heat: 0xf79226, option: 'heat'}; var events = { circleSelection: { mouseMove: function (e) { if (BCB.climatization.isActive) { if (events.circleSelection.isMouseDown) { posX = Utils.getMousePos(e).x; posY = Utils.getMousePos(e).y; angle = Utils.findAngle({x: posX, y: posY}, {x: BCB.width / 2, y: BCB.height / 2}, {x: BCB.width / 2, y: 1}) - Math.PI / 2; if (angle < Math.PI - Math.PI / 4 && Math.cos(angle) < 0) { angle = Math.PI - Math.PI / 4; } else if (angle > Math.PI / 4 && Math.cos(angle) > 0) { angle = Math.PI / 4; } else { prevAngle = angle; } if (Math.cos(angle) > 0) { angleForPerimeter = angle + Math.PI * 2; } else { angleForPerimeter = angle; } var percentValue = defOpt.min + parseInt(Utils.CalcPerimeter(angleForPerimeter - Math.PI + Math.PI / 4, radius) * (defOpt.max - defOpt.min) / totalPerimeter); text.text = percentValue.toString(); lineProgress.clear(); if (angle >= Math.PI / 2 + Math.PI / 4 && angle <= Math.PI + Math.PI / 2) { lineProgress.lineStyle(BCB.width * 0.03, colorClimatization.cold); lineProgress.arc(BCB.width * 0.5, BCB.height * 0.5, radius, angle, -Math.PI / 2); } else { lineProgress.lineStyle(BCB.width * 0.03, colorClimatization.heat); lineProgress.arc(BCB.width * 0.5, BCB.height * 0.5, radius, -Math.PI / 2, angle); } moveHandlerToPosition(angle); } } }, mouseDown: function (e) { if (BCB.climatization.isActive) events.circleSelection.isMouseDown = true; }, mouseUp: function (e) { if (BCB.climatization.isActive) { lineProgress.endFill(); var jsonData = {option: option, value: text.text}; BCBControls.Climatization.onChangeSetPoint(text.text); events.circleSelection.isMouseDown = false; } }, click: function (e) { if (BCB.climatization.isActive) { events.circleSelection.isMouseDown = true; events.circleSelection.mouseMove(e); events.circleSelection.isMouseDown = false; BCBControls.Climatization.onChangeSetPoint(text.text); } }, isMouseDown: false } }; var lineTrack = new PIXI.Graphics(); lineTrack.lineStyle(BCB.width * 0.015, 0x6e6f72); lineTrack.arc(BCB.width * 0.5, BCB.height * 0.5, radius, Math.PI - Math.PI / 4, Math.PI / 4); lineTrack.endFill(); var lineProgress = new PIXI.Graphics(); lineProgress.lineStyle(BCB.width * 0.02, 0xf79226); lineProgress.arc(BCB.width * 0.5, BCB.height * 0.5, radius, 0, 0); lineProgress.endFill(); //steps var stepAngle = 0.2617993877991494; for (i = 0; i < 25; i++) { if (i !== 3 && i !== 7 && i !== 11 && i !== 15 && i < 15) { var step = new PIXI.Graphics(); step.beginFill(0xFF3300); step.lineStyle(3, 0x777777, 1); step.moveTo(radius - BCB.width * 0.02, 0); step.lineTo(radius - BCB.width * 0.04, 0); step.x = BCB.width / 2; step.y = BCB.height / 2; step.rotation = i * stepAngle + Math.PI / 1.093; container.addChild(step); } //point around if (i === 3 || i === 7 || i === 11 || i === 15 || i === 19) { var pointAround = new PIXI.Graphics(); pointAround.beginFill(0x777777, 1); pointAround.drawCircle(radius * 0.64, radius * 0.64, BCB.width * .01); pointAround.x = BCB.width / 2; pointAround.y = BCB.height / 2; pointAround.rotation = i * stepAngle - Math.PI * 2 + Math.PI / 3; pointAround.endFill(); container.addChild(pointAround); } } //step values var stepAngleValues = ((Math.PI * 2 - Math.PI / 4) - Math.PI / 12) / 5; var valueStep = 14; for (var i = Math.PI - Math.PI / 4; i < (Math.PI * 2 + Math.PI / 4); i += stepAngleValues) { var text16 = new PIXI.Text(valueStep.toString(), {font: BCB.width * 0.04 + "px Roboto", fill: "#777"}); text16.x = BCB.width / 2 + radius * 0.75 * Math.cos(i + Math.PI / 12); text16.y = BCB.height / 2 + radius * 0.75 * Math.sin(i + Math.PI / 12); text16.anchor.set(0.5, 0.5); container.addChild(text16); valueStep += 4; } //hit area for the handler var hitCircleHandler = new PIXI.Graphics(); hitCircleHandler.beginFill(0x00FF00, 0); hitCircleHandler.drawCircle(0, 0, BCB.width * 0.4); hitCircleHandler.x = BCB.width / 2; hitCircleHandler.y = BCB.height / 2; hitCircleHandler.alpha = 1; hitCircleHandler.endFill(); hitCircleHandler.interactive = true; hitCircleHandler.on('pointermove', events.circleSelection.mouseMove).on('pointerdown', events.circleSelection.mouseDown).on('pointerupoutside', events.circleSelection.mouseUp).on('pointerup', events.circleSelection.mouseUp); //para clicar apenas por onde o handler passa var hitCirclePreventClick = new PIXI.Graphics(); hitCirclePreventClick.beginFill(0x0000FF, 0); hitCirclePreventClick.drawCircle(0, 0, BCB.width * 0.3); hitCirclePreventClick.x = BCB.width / 2; hitCirclePreventClick.y = BCB.height / 2; hitCirclePreventClick.alpha = 1; hitCirclePreventClick.endFill(); hitCirclePreventClick.interactive = true; //handler var handler = new PIXI.Graphics(); handler.beginFill(0xFFFFFF, 1); handler.lineStyle(BCB.width * 0.01, 0xBBBBBB, 0.5); handler.drawCircle(BCB.width * 0.33, 0, BCB.width * 0.035); handler.interactive = true; handler.pivot.set(0, 0); handler.x = BCB.width / 2; handler.y = BCB.height / 2; handler.rotation = -Math.PI / 2; handler.endFill(); handler.on('pointermove', events.circleSelection.mouseMove).on('pointerdown', events.circleSelection.mouseDown).on('pointerupoutside', events.circleSelection.mouseUp).on('pointerup', events.circleSelection.mouseUp); var text = new PIXI.Text('0', {font: BCB.width * 0.25 + "px Roboto", fontWeight: 'bold', fill: "#333"}); text.x = BCB.width * 0.5; text.y = BCB.height * 0.5 - BCB.width * 0.1; text.anchor.set(0.5, 0.5); var volText = new PIXI.Text('MODE', {font: BCB.width * 0.05 + "px Roboto", fill: "#777"}); volText.x = BCB.width * 0.5; volText.y = BCB.height * 0.5 + BCB.width * 0.25; volText.anchor.set(0.5, 0.5); var textureSummerON = PIXI.Texture.fromImage('bcb_icons/ic_heat_on.png'); var textureSummerOFF = PIXI.Texture.fromImage('bcb_icons/ic_heat_off.png'); var summerIcon = new PIXI.Sprite(textureSummerON); summerIcon.x = BCB.width / 2; summerIcon.y = BCB.height / 2 + BCB.width * 0.15; summerIcon.height = BCB.width * 0.09; summerIcon.width = BCB.width * 0.09; summerIcon.anchor.set(0.5, 0.5); summerIcon.interactive = true; summerIcon.isActive = true; summerIcon.on('tap', toggleClimatizationType).on('click', toggleClimatizationType); var textureWinterON = PIXI.Texture.fromImage('bcb_icons/ic_cold_on.png'); var textureWinterOFF = PIXI.Texture.fromImage('bcb_icons/ic_cold_off.png'); var winterIcon = new PIXI.Sprite(textureWinterOFF); winterIcon.x = BCB.width / 2; winterIcon.y = BCB.height / 2 + BCB.width * 0.35; winterIcon.height = BCB.width * 0.09; winterIcon.width = BCB.width * 0.09; winterIcon.isActive = false; winterIcon.interactive = true; winterIcon.on('tap', toggleClimatizationType).on('click', toggleClimatizationType); winterIcon.anchor.set(0.5, 0.5); container.addChild(lineTrack); container.addChild(lineProgress); container.addChild(text); container.addChild(volText); container.addChild(hitCircleHandler); container.addChild(handler); container.addChild(hitCirclePreventClick); container.addChild(winterIcon); container.addChild(summerIcon); containerControl = container; BCB.stage.addChild(container); function toggleClimatizationType() { if (BCB.climatization.isActive) { moveHandlerToPosition(angle); if (summerIcon.isActive) { winterIcon.isActive = true; summerIcon.isActive = false; summerIcon.texture = textureSummerOFF; winterIcon.texture = textureWinterON; colorClimatization.option = 'cold'; } else { winterIcon.isActive = false; summerIcon.isActive = true; summerIcon.texture = textureSummerON; winterIcon.texture = textureWinterOFF; colorClimatization.option = 'hot'; } lineProgress.clear(); if (angle >= Math.PI / 2 + Math.PI / 4 && angle <= Math.PI + Math.PI / 2) { lineProgress.lineStyle(BCB.width * 0.03, colorClimatization.cold); lineProgress.arc(BCB.width * 0.5, BCB.height * 0.5, radius, angle, -Math.PI / 2); } else { lineProgress.lineStyle(BCB.width * 0.03, colorClimatization.heat); lineProgress.arc(BCB.width * 0.5, BCB.height * 0.5, radius, -Math.PI / 2, angle); } onChanged(); } } function onChanged() { if (BCB.climatization.isActive) { if (summerIcon.isActive) { option = 'hot'; } else { option = 'cold'; } BCBControls.Climatization.onChangeType(option); } } function moveHandlerToPosition(angle) { handler.rotation = angle; } setValue(value); function setValue(val) { text.text = val.value.toString(); colorClimatization.option = val.option; option = val.option; if (val.option === 'hot') { summerIcon.isActive = true; winterIcon.isActive = false; winterIcon.texture = textureWinterOFF; summerIcon.texture = textureSummerON; } else { summerIcon.isActive = false; winterIcon.isActive = true; winterIcon.texture = textureWinterON; summerIcon.texture = textureSummerOFF; } var _angle; if (val.value < 22) { _angle = (Math.PI * 3 / 4) + 0.26 * (val.value - defOpt.min + 1); } else { _angle = (-Math.PI / 2) + 0.26 * (val.value - 22); } moveHandlerToPosition(_angle); lineProgress.clear(); if (_angle >= Math.PI / 2 + Math.PI / 4 && _angle <= Math.PI + Math.PI / 2) { lineProgress.lineStyle(BCB.width * 0.03, colorClimatization.cold); lineProgress.arc(BCB.width * 0.5, BCB.height * 0.5, radius, _angle, -Math.PI / 2); } else { lineProgress.lineStyle(BCB.width * 0.03, colorClimatization.heat); lineProgress.arc(BCB.width * 0.5, BCB.height * 0.5, radius, -Math.PI / 2, _angle); } angle = _angle; lineProgress.endFill(); } renderFunction = function () { }; }, onChangeSetPoint: defaultFunctions.climatization.onChangeSetPoint, onChangeType: defaultFunctions.climatization.onChangeType //onChooseTimer: defaultFunctions.climatization.onChooseTimer }, //not implemented AlarmClockRepeat: {display: function (value, options) { /*##### POR FINALIZAR ######*/ var container = new PIXI.Container(); try { BCB.stage.removeChild(containerControl); containerControl = null; BCB.stage.off('pointermove').off('pointerdown').off('pointerup').off('click').off('tap').off('pointerupoutside'); } catch (error) { console.log("no element: " + error); } var defOpt = {availableOptions: 0, selectedOptions: 100}; //load default options if (options !== 'undefined' && options !== null) { defOpt = $.extend(true, {}, defOpt, options); } /*initialize some values * - total perimeter = from PI-PI/4 To PI/4 (360º - 90º = 270º) */ }/*, onChange: defaultFunctions.alarm.onChange*/ }, AlarmClockMusic: {display: function (value, options) { /*##### POR FINALIZAR ######*/ var container = new PIXI.Container(); try { BCB.stage.removeChild(containerControl); containerControl = null; BCB.stage.off('pointermove').off('pointerdown').off('pointerup').off('click').off('tap').off('pointerupoutside'); } catch (error) { console.log("no element: " + error); } var defOpt = {availableOptions: 0, selectedOptions: 100}; //load default options if (options !== 'undefined' && options !== null) { defOpt = $.extend(true, {}, defOpt, options); } /*initialize some values * - total perimeter = from PI-PI/4 To PI/4 (360º - 90º = 270º) */ }/*, onChange: defaultFunctions.alarm.onChange*/ } }; //opções por defeito do controlo BCB /*permite definir: **** qual o controlo por defeito **** os angulos dos icones **** as imagens dos icones **** os angulos do BCB **** as funções que vai executar quando roda */ BCB.defaultOptions = { RGBControl: { NumElements: 3, StartAngle: -0.74, SelectedIndex: BCB.structBCBSelectionIndex.rgbIndex, Elements: [ { parentBCBType: 'RGBControl', imgSrcON: 'bcb_icons/rgb_on.png', imgSrcOFF: 'bcb_icons/rgb_off.png', angle: Math.PI / 2 - 0.62, rotateTo: -1.36, functions: { rotate: function (e) { renderFunction = function () {}; BCBElement.rotateTo = -1.36; }, displayFunction: function () { BCBControls.RGB.display(BCB.data); } } }, { parentBCBType: 'RGBControl', imgSrcON: 'bcb_icons/dimmer_on.png', imgSrcOFF: 'bcb_icons/dimmer_off.png', angle: Math.PI / 2, rotateTo: -0.74, functions: { rotate: function (e) { BCBElement.rotateTo = -0.74; }, displayFunction: function () { BCBControls.Dimmer.display(BCB.data.value, {min: 0, max: 100}); } } }, { parentBCBType: 'RGBControl', imgSrcON: 'bcb_icons/timmer_on.png', imgSrcOFF: 'bcb_icons/timmer_off.png', angle: Math.PI / 2 + 0.62, rotateTo: -0.12, functions: { rotate: function (e) { BCBElement.rotateTo = -0.12; }, displayFunction: function () { BCBControls.Timmer.display(BCB.data.time, {steps: 60, labels: ['0', '15', '30', '45'], hours: 23}); } } } ] }, DimmerControl: { NumElements: 3, StartAngle: -0.74, SelectedIndex: BCB.structBCBSelectionIndex.dimmerIndex, Elements: [ { parentBCBType: 'DimmerControl', imgSrcON: 'bcb_icons/dimmer_on.png', imgSrcOFF: 'bcb_icons/dimmer_off.png', angle: Math.PI / 2, heading: Math.PI / 3, rotateTo: -0.74, functions: { rotate: function (e) { BCBElement.rotateTo = -0.74; }, displayFunction: function () { BCBControls.Dimmer.display(BCB.data.value, {min: 0, max: 100}); } } }, { parentBCBType: 'DimmerControl', imgSrcON: 'bcb_icons/timmer_on.png', imgSrcOFF: 'bcb_icons/timmer_off.png', angle: Math.PI / 2 + 0.62, rotateTo: -0.12, functions: { rotate: function (e) { BCBElement.rotateTo = -0.12; }, displayFunction: function () { BCBControls.Timmer.display(BCB.data.time, {steps: 60, labels: ['0', '15', '30', '45'], hours: 23}); } } } ] }, VolumeControl: { NumElements: 2, StartAngle: 0.3, SelectedIndex: BCB.structBCBSelectionIndex.volumeIndex, Elements: [ { parentBCBType: 'VolumeControl', imgSrcON: 'bcb_icons/sound_on.png', imgSrcOFF: 'bcb_icons/sound_off.png', angle: -Math.PI - Math.PI / 6, rotateTo: 0.3, functions: { rotate: function (e) { BCBElement.rotateTo = 0.3; }, displayFunction: function () { BCBControls.Volume.display(BCB.data.audio, {min: 0, max: BCB.data.audio.maxVol}); } } } /*{ imgSrcON: 'bcb_icons/timmer_on.png', imgSrcOFF: 'bcb_icons/timmer_off.png', angle: Math.PI / 2 + 0.62, rotateTo: -0.12, functions: { rotate: function (e) { BCBElement.rotateTo = -0.12; }, displayFunction: function () { BCBControls.Timmer.display(BCB.data.time, {steps: 60, labels: ['0', '15', '30', '45'], hours: 23}); } } }*/ ] }, ClimatizationControl: { NumElements: 1, StartAngle: -0.74, SelectedIndex: BCB.structBCBSelectionIndex.climatIndex, Elements: [ { parentBCBType: 'ClimatizationControl', imgSrcON: 'bcb_icons/ic_clima_on.png', imgSrcOFF: 'bcb_icons/ic_clima_off.png', angle: Math.PI / 2, rotateTo: -0.74, functions: { rotate: function (e) { BCBElement.rotateTo = -0.74; }, displayFunction: function () { BCBControls.Climatization.display({value: values.climatization.value, option: values.climatization.option}, {min: 14, max: 31}); } } }, { parentBCBType: 'ClimatizationControl', imgSrcON: 'bcb_icons/timmer_on.png', imgSrcOFF: 'bcb_icons/timmer_off.png', angle: Math.PI / 2 + 0.62, rotateTo: -0.12, functions: { rotate: function (e) { BCBElement.rotateTo = -0.12; }, displayFunction: function () { //BCBControls.TimmerClimatization.display("00:00:00", {steps: 60, labels: ['0', '15', '30', '45'], hours: 23}); BCBControls.TimmerClimatization.display(BCB.data.time, {steps: 60, labels: ['0', '15', '30', '45'], hours: 23}); //BCBControls.Climatization.onChooseTimer() } } } ] }, TimmerControl: { NumElements: 1, StartAngle: -0.74, SelectedIndex: 0, Elements: [ { parentBCBType: 'TimerControl', imgSrcON: 'bcb_icons/timmer_on.png', imgSrcOFF: 'bcb_icons/timmer_off.png', angle: Math.PI / 2, rotateTo: -0.74, functions: { rotate: function (e) { BCBElement.rotateTo = -0.74; }, displayFunction: function () { BCBControls.Timmer.display(BCB.data.time, {steps: 60, labels: ['0', '15', '30', '45'], hours: 23}); } } } ] } }; //verificação para saber qual o controlo que vai ser renderizado var jsonType; if (type === 'rgb') { jsonType = BCB.defaultOptions.RGBControl; } else if (type === 'dimmer') { jsonType = BCB.defaultOptions.DimmerControl; } else if (type === 'volume') { jsonType = BCB.defaultOptions.VolumeControl; } else if (type === 'climatization') { jsonType = BCB.defaultOptions.ClimatizationControl; } else if (type === 'timmer') { jsonType = BCB.defaultOptions.TimmerControl; } selectedElement = jsonType.Elements[jsonType.SelectedIndex]; //inicializa o BCB BCB.stage.addChild(initializeBCB()); // BCB.stage.addChild(Favorite.draw()); //inicializa as funções createBCBControls(); //initialize function (rgb, dimmer, etc,...) selectedElement.functions.displayFunction(); //inicia a animação animate(); function animate() { try { requestAnimationFrame(animate); if (Math.abs(BCBElement.rotation + 0.2) > Math.abs(BCBElement.rotateTo) || Math.abs(BCBElement.rotation + 0.2) < Math.abs(BCBElement.rotateTo)) { if (BCBElement.rotation.toFixed(2) > BCBElement.rotateTo.toFixed(2)) BCBElement.rotation += (BCBElement.rotateTo - BCBElement.rotation) * 0.2; else if (BCBElement.rotation.toFixed(2) < BCBElement.rotateTo.toFixed(2)) BCBElement.rotation -= (BCBElement.rotation - BCBElement.rotateTo) * 0.2; } /* #### IMPORTANTE ### * a função "renderFunction();" é genérica e o seu conteudo é alterado mediante o controlo selecionado */ renderFunction(); BCB.renderer.render(BCB.stage); } catch (e) { // console.log(e); } } //vai desenhar os controlos existentes e colocar a função que tem como startIndex por defeito. function createBCBControls() { $.each(jsonType.Elements, function (k, v) { var onTexture = PIXI.Texture.fromImage(v.imgSrcON); var offTexture = PIXI.Texture.fromImage(v.imgSrcOFF); var texture, _isSelected = false; if (k !== jsonType.SelectedIndex) { texture = offTexture; _isSelected = false; } else { _isSelected = true; texture = onTexture; } var elementIcon = new PIXI.Sprite(texture); elementIcon.x = BCB.width / 2 + BCB.width * 0.47 * Math.cos(v.angle - Math.PI); elementIcon.y = BCB.height / 2 + BCB.width * 0.47 * Math.sin(v.angle - Math.PI); elementIcon.width = BCB.width * 0.1; elementIcon.height = BCB.width * 0.1; elementIcon.anchor.set(0.5, 0.5); elementIcon.jsonData = {onTexture: onTexture, offTexture: offTexture, isSelected: _isSelected, id: k, showControl: BCBControls.RGB.display(0)}; elementIcon.interactive = true; elementIcon.on('click', function (e) { changeDisplayMenu(v, elementIcon); }).on('tap', function (e) { changeDisplayMenu(v, elementIcon); }); BCB.stage.addChild(elementIcon); elementFunctions.push(elementIcon); }); } function changeDisplayMenu(v, elementIcon) { v.functions.rotate(); setTimeout(function () { v.functions.displayFunction(); //change textures elementIcon.jsonData.isSelected = true; $.each(elementFunctions, function (i, j) { if (elementIcon.jsonData.id !== j.jsonData.id) { j.jsonData.isSelected = false; j.texture = j.jsonData.offTexture; } else { if (v.parentBCBType == 'RGBControl') BCB.structBCBSelectionIndex.rgbIndex = elementIcon.jsonData.id; else if (v.parentBCBType == 'DimmerControl') BCB.structBCBSelectionIndex.dimmerIndex = elementIcon.jsonData.id; else if (v.parentBCBType == 'VolumeControl') BCB.structBCBSelectionIndex.volumeIndex = elementIcon.jsonData.id; else if (v.parentBCBType == 'ClimatizationControl') BCB.structBCBSelectionIndex.climatIndex = elementIcon.jsonData.id; j.texture = j.jsonData.onTexture; selectedElement = j; } }); }, 400); } function initializeBCB() { // inicializa o BCB var texture = PIXI.Texture.fromImage('bcb_icons/BCB.png'); var _BCB = new PIXI.Sprite(texture); _BCB.x = BCB.width / 2; _BCB.y = BCB.height / 2; _BCB.width = BCB.width; _BCB.height = BCB.width; _BCB.anchor.set(0.5, 0.5); _BCB.rotateTo = selectedElement.rotateTo; _BCB.rotation = selectedElement.rotateTo; BCBElement = _BCB; return _BCB; } }, destroy: function () { try { if (BCB.renderer) { BCB.renderer.destroy(true); BCB.stage.destroy(true); BCB.stage = null; BCB.renderer = null; PIXI.utils.TextureCache = {}; PIXI.utils.BaseTextureCache = {}; BCB.$elementParent.empty(); } } catch (ex) { console.log("Error destroying BCB. Details: " + ex); } }, sleep: function () { } }; var Utils = { /* * Devolve um angulo mediante 3 pontos (triangulo) */ findAngle: function (A, B, C) { var AB = Math.sqrt(Math.pow(B.x - A.x, 2) + Math.pow(B.y - A.y, 2)); var BC = Math.sqrt(Math.pow(B.x - C.x, 2) + Math.pow(B.y - C.y, 2)); var AC = Math.sqrt(Math.pow(C.x - A.x, 2) + Math.pow(C.y - A.y, 2)); if (A.x < B.x) return (Math.PI) + (Math.PI - Math.acos((BC * BC + AB * AB - AC * AC) / (2 * BC * AB))); else return Math.acos((BC * BC + AB * AB - AC * AC) / (2 * BC * AB)); }, /*Metodo que permite criar uma palete de cores*/ RainbowColors: function () { colors = []; var blue = 0, green = 0, red = 0; for (green = 0; green <= 255; green++) { colors.push({r: 255, g: green, b: 0}); } for (red = 255; red >= 0; red--) { colors.push({r: red, g: 255, b: 0}); } for (blue = 0; blue <= 255; blue++) { colors.push({r: 0, g: 255, b: blue}); } for (green = 255; green >= 0; green--) { colors.push({r: 0, g: green, b: 255}); } for (red = 0; red <= 255; red++) { colors.push({r: red, g: 0, b: 255}); } for (blue = 255; blue > 0; blue--) { colors.push({r: 255, g: 0, b: blue}); } return colors; }, /*Converte cor RGB para Hexadecimal*/ RGBToHex: function (color) { var _r, _g, _b = ""; if (color.r.toString(16).length <= 1) _r = "0" + color.r.toString(16); else _r = color.r.toString(16); if (color.g.toString(16).length <= 1) _g = "0" + color.g.toString(16); else _g = color.g.toString(16); if (color.b.toString(16).length <= 1) _b = "0" + color.b.toString(16); else _b = color.b.toString(16); var colorHex = _r + _g + _b; return colorHex; }, CalcPerimeter: function (radius, angle) { var perimeter = angle * radius; return perimeter; }, calcVerticalRatio: function (elementY) { var ratio = 0; if (elementY > BCB.height * 0.5) { ratio = ((BCB.height - elementY) / (BCB.height / 3)) * 2 - 2; } else { ratio = (elementY / (BCB.height / 3)) * 2 - 2; } return ratio; }, getMousePos: function (e) { try { return {x: e.data.originalEvent.touches[0].pageX - Utils.offsetX, y: e.data.originalEvent.touches[0].pageY - Utils.offsetY}; } catch (ex) { // console.log("ex : " + ex); try { return {x: e.data.global.x, y: e.data.global.y}; } catch (ex1) { // console.log("ex1 : " + ex1); try { return {x: e.pageX || e.touches[0].pageX, y: e.pageY || e.touches[0].pageY}; } catch (ex2) { // console.log("ex2 : " + ex2); try { return {x: e.clientX, y: e.clientY}; } catch (ex3) { // console.log("ex3 : " + ex3); } } } } }, decimalPlaces: function (num) { var match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/); if (!match) { return 0; } return Math.max(0, // Number of digits right of decimal point. (match[1] ? match[1].length : 0) // Adjust for scientific notation. - (match[2] ? +match[2] : 0)); }, offsetX: 0, offsetY: 0 }; /* * Classe responsável pela criação do controlo dos favoritos do BCB. * */ var Favorite = { isFavorited: false, element: null, onUrl: 'icons/navigation/ic_favorite_on.png', offUrl: 'icons/navigation/ic_favorite_off.png', onTexture: null, offTexture: null, setFavorite: function (value) { Favorite.isFavorited = value; }, onClick: function () { if (Favorite.isFavorited) Favorite.element.texture = Favorite.offTexture; else Favorite.element.texture = Favorite.onTexture; Favorite.isFavorited = !Favorite.isFavorited; }, draw: function () { var favoriteIcon = null; Favorite.onTexture = new PIXI.Texture.fromImage(Favorite.onUrl); Favorite.offTexture = new PIXI.Texture.fromImage(Favorite.offUrl); if (Favorite.isFavorited) favoriteIcon = new PIXI.Sprite(Favorite.onTexture); else favoriteIcon = new PIXI.Sprite(Favorite.offTexture); favoriteIcon.x = BCB.width * 0.1; favoriteIcon.y = BCB.height * 0.1; favoriteIcon.width = BCB.width * 0.1; favoriteIcon.height = BCB.width * 0.1; favoriteIcon.anchor.set(0.5, 0.5); favoriteIcon.interactive = true; favoriteIcon.on('click', Favorite.onClick); favoriteIcon.on('tap', Favorite.onClick); Favorite.element = favoriteIcon; return favoriteIcon; } };