//for tests: make comment "//" next, last, 29th and 53th line; activate (delete "//") 7th line
//xxAPI.functions.XXRSLIDER = function( oarg ) {
//////////////////
// overwrite values for tests
//////////////////
var rot_test = false;
rot_test = true; //7th line
//////////// Start Logic
var xx_; // short form for 'oarg.item.xxapi', also for tests
var rot_;// short form for 'oarg.item.xxapi.rot', also for tests
if (rot_test){
xx_ = {}; //for tests
} else {
xx_ = oarg.item.xxapi; //for production, use of "xxapi.js" library
}
rot_ = xx_.rot;
rot_ = {};
if (rot_test){
initRotByDefault();
rot_.var=4; //4=Heizung
rot_.pat=1; //bg_blackGrid
rot_.colinv=0; //colinv
console.log('value:',rot_.value);
initVarPredefined();
} else { //(!rot_test)
debug(2,"XXRSLIDER",oarg);
if(oarg.item.action_id != 9) {
debug(1,"XXRSLIDER needs Action 'Werteingabe'", oarg);
// return; //29th line
}//action_id != 9
oarg.item.text = "";
oarg.item.value = Number(oarg.args[1]); // from calling app
rot_.value = oarg.item.value;
if(rot_.hasOwnProperty("rslider_init")) {
rot_.valDeg = calcVal2Rt(rot_.value); // in Deg
TweenMax.set(xx_.dial, {rotation:rot_.valDeg})
doDial(rot_.valDeg);
} else {
oarg.item.customcss = {
"background-color" : "transparent",
"pointer-events" : "auto",
"overflow" : "initial"
}
initRotByDefault();
oarg.item.click = false;
}//if-else property rslider_init
if($.isEmptyObject(oarg.item.info)) {
debug(4,"XXRSLIDER no item info " + oarg.item.uid, oarg);
oarg.item.item_callback = function() {
oarg.iscallback = true;
xxAPI.functions.XXRSLIDER( oarg );
}//callback
//return; //53th line
}//if isEmptyObject --> callback
}//(!rot_test)
if(!xx_.hasOwnProperty("rslider")) { //used always, independant from rot_test
xx_.start = document.createElement('div');
if (rot_test){
document.body.appendChild(xx_.start);
TweenMax.set(document.body, {backgroundColor:'#181A19',userSelect:'none'});
} else {
////values from calling app
var _text2 = oarg.item.info._txt2 || "";
if(_text2.match(/^XXOPTIONS\*/)) { // additional values from calling app
rot_=Object.assign({},rot_,hs.functions.option_parser(_text2.substring(10),rot_));
}
rot_.width = oarg.item.width || 240;// set width from calling app
rot_.height = oarg.item.height || 240;// set height from calling app
rot_.unit = oarg.item.info._einh || ""; // set unit from calling app
rot_.valPrec = oarg.item.info._prec || 0; // set valPrec from calling app
rot_.valBaseStart= oarg.item.info._min || 0; // set valPrec from calling app
rot_.valBase = oarg.item.info._max || 0; // set valPrec from calling app
//calculations and automatic settings - based on parameters from calling app
if (rot_.pat==2) rot_.pattern=rot_.pattern2; //blackGrid
if (rot_.pat==3) rot_.pattern=rot_.pattern3; //black
if (rot_.pat==4) rot_.pattern=rot_.pattern4; //greenGrid
if (rot_.pat==4) rot_.colinv =1; //greenGrid
rot_.valBase=rot_.valBase-rot_.valBaseStart; // calc valBase
rot_.valLength=
Math.floor(Math.log10(Math.abs(rot_.valBase))+1)||0; // calc valLength
if (rot_.valPrec) // .. add prec
rot_.valLength=rot_.valLength+rot_.valPrec+1; //
if (rot_.valBaseStart<0) // .. add minus-sign
rot_.valLength++; //
////end values from calling app
initVarPredefined();
}//(!rot_test)
createDialValueAndKnob();
createDialScale();
createDialDraggable();
if (!rot_test)
xx_.rslider = xx_.start;
}//(!xx_.hasOwnProperty("rslider"))
if (!rot_test){
if(oarg.iscallback) {
oarg.item.object.html(xx_.rslider);
} else {
oarg.item.html = xx_.rslider;
}
}//(!rot_test)
//all function calls from here
function initRotByDefault(){ //default values --> can be changed over XXOPTIONS* (some can be changed only with problems)
rot_ = { // ***default values***
rslider_init:1, // INIT
var:0, // 0:Default, 1: Sollwert Heizung, 2: Dimmer, 3: Lautsprecher, 4: Temperatur
value:0, // init value (send from calling app) and actual/end value (send to calling app)
tr:true, // move triangle, false: it seams that it not move - but it moves (invisible) in the opposite direction
insDial:true, // dialnumbers - inside
dialLive:true, // dialnumbers - inside ... true: always horizontal (== 'rotating' during spin), false: along the circle
dialFixed2Center:0, // 0: none, 90: 90 degrees (to the center) --> no dialLive
outsDial:false, // dialnumbers - outside
outsDialDistance:0, // 0=inside, 80=outside
arcStartDeg:null, // start arc
valDeg:0, // value in deg (0..maxDeg)
valBase:100, // base of values, e.g. 100 for percent, 5 for Sollwertabweichung
valBaseStart:0, // start base vaule, e.g. 0 for percent, -2.5 for Sollwertabweichung
valLength:3, // length incl sign (dots included)
valPrec:0, // precision (Anz.Kommastellen)
numDigits:1, // 10 hoch val.Prec = anz. der Stellen (rundungsgenauigkeit)
maxDeg:300, // max. rotation
stepDeg:15, // deg of each rotation step (base: full rotation == 360)
fullRotation:360, //
arc:0, // rotation between -arc and arc
unit:'', // examples: '%', '°C'
br:false, // unit 2-lines, separated with '<br>' -- not work
ticks:2, // 1: no ticks, 2: 10 . 20 . 30, 3: 10 . . 20 . . 30
xticks:3, //
numDialFaces:24, // 4*2*2=8 (45°), 4*3*1=12 (30°), 4*3*2=24 (15°): dh. ein vielfaches von 4*x*rot_.ticks
width:240, // width of the knob
height:240, // height of the knob
szB:800, // base size knob generator
szR:400, // base radius knob generator, important by outsDialDistance
lcd:false, // dialValue: lcd (true), Digital-7 or Arial font (false)
blur:'blur(2px)', // blur background dialValue
colDialValue:'#5f0', // color dialValue (green: #5f0; ...)
colTr:'red', // color triangle
colinv:0, // text color --light bg
colTxt:'silver', // text color --dark bg
colArcFrom:'lightyellow', // arc color from
colArc2:'whitesmoke', // ..
colArc3:'whitesmoke', // colArc3 additional: arc-background-color
colArc4:'whitesmoke', // ..
colArcTo:'gold', // arc color to
scaleColor:null, // d3.color
pat:1, // pattern#
//pattern: 'img/Bg_transparent.png',// pattern for knob
pattern2:'img/Bg_blackGrid.png', // pattern for knob
pattern3:'img/Bg_black.png', // pattern for knob
pattern4:'img/Bg_greenGrid.png', // pattern for knob
// pattern: 'img/knob.steel.jpg', // pattern for knob
pattern: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/314556/metalGrid.jpg',
// pattern: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/knob_Base.png',
useInsTbl: false, // use of dialNumTbl
dialNumTbl:['0','.','1','.','2','.',/*3*/'3','','4','','5','','6','','7','','8','','9','','10','','11','','12']
}
}//initRotByDefault
function initVarPredefined(){ //predefined variants
if(rot_test){
rot_.width=240;
rot_.height=240;
}
if(rot_.var == 1){ // Sollwertabweichung Heizung
if(rot_test){
rot_.value = -1.5; // only for test
rot_.unit ='°C'; //from app
rot_.valBase = 5;
rot_.valBaseStart = -2.5;
rot_.valPrec = 1; //from app
rot_.valLength = 4;
}
rot_.insDial=false;
rot_.arcStartDeg=0;
rot_.ticks = 2;
rot_.xticks = 1.5;
rot_.arc=150;
rot_.useInsTbl=true;
rot_.colArcFrom='royalblue';
rot_.colArc2='lightskyblue';
rot_.colArc3='whitesmoke'; // background-color
rot_.colArc4='orange';
rot_.colArcTo='darkorange';
rot_.scaleColor=d3.scaleLinear()
.domain([toRad(-rot_.arc),toRad(-rot_.arc/2),0,toRad(rot_.arc/2),toRad(rot_.arc)])
.range([rot_.colArcFrom,rot_.colArc2,rot_.colArc3,rot_.colArc4,rot_.colArcTo]);
rot_.dialNumTbl =
['0°C'/* 0*/,'.'/*10*/,'+1°C'/*20*/,'.'/*30*/,'+2°C'/* 40*/,'.'/*50*/,
'' /*60*/,'.'/*70*/,'-2°C'/*80*/,'.'/*90*/,'-1°C'/*100*/,'.'/*110*/,''/*120*/];
}//rot_.var==1 (Sollwertabweichung Heizung)
if(rot_.var == 2){ // Dimmer
if (rot_test){
rot_.value=75;
rot_.unit ='%'; //from app
}
rot_.arc=150;
rot_.ticks = 2;
rot_.colArcFrom='lightyellow';
rot_.colArc3='whitesmoke'; // background-color
rot_.colArcTo='gold';
} //rot_.var==2 (Dimmer)
if(rot_.var == 3){ // Loudspeaker
rot_.tr=false ;
rot_.maxDeg=288;
if(rot_test){
rot_.value =70;
rot_.unit ='db'; //from app
rot_.valBaseStart = 0;
rot_.valBase = 80;
rot_.valLength = 2;
}
rot_.ticks = 2;
rot_.xticks = 2.5;
rot_.colArcFrom='chartreuse';
rot_.colArc3='whitesmoke'; // background-color
rot_.colArcTo='DarkGreen';
rot_.scaleColor=d3.scaleLinear()
.domain([toRad(0),toRad(rot_.maxDeg)])
.range([rot_.colArcFrom,rot_.colArcTo]);
}//rot_.var==3 (Loudspeaker)
if(rot_.var == 4){ // Heizung
if(rot_test){
rot_.value=16;
rot_.valBase = 20;
rot_.valBaseStart = 7;
rot_.valLength=2;
rot_.valPrec=0; //from app
rot_.unit ='°C'; //from app
}
rot_.ticks = 2;
rot_.xticks = 3;
rot_.arc=150;
rot_.arcStartDeg=-rot_.arc;
rot_.colArcFrom='royalblue';
rot_.colArc2='lightskyblue';
rot_.colArc3='whitesmoke'; // background-color
rot_.colArc4='orange';
rot_.colArcTo='darkorange';
rot_.scaleColor=d3.scaleLinear()
.domain([toRad(-rot_.arc),toRad(-rot_.arc/2),0,toRad(rot_.arc/2),toRad(rot_.arc)])
.range([rot_.colArcFrom,rot_.colArc2,rot_.colArc3,rot_.colArc4,rot_.colArcTo]);
}//rot_.var==4 (Heizung)
/////////////// Changes depends on configured variants
if (rot_.insDial) {
rot_.outsDial=false;
rot_.outsDialDistance=0;
}
if (rot_.outsDial){
rot_.outsDialDistance=80; //can be changed general here
rot_.insDial=false;
rot_.dialLive=0;
}
if (rot_.arc){ //default settings for arc
rot_.dialLive = 0;
rot_.maxDeg=2*rot_.arc;
if (rot_.arcStartDeg===null) rot_.arcStartDeg = -rot_.arc;
if (rot_.var in [0,2]){ //no variant - default
rot_.scaleColor=d3.scaleLinear()
.domain([toRad(-rot_.arc),toRad(rot_.arc)])
.range([rot_.colArcFrom,rot_.colArcTo]);
}//rot_.var in [0,2]
}//rot_.arc
if (rot_.arcStartDeg===null) rot_.arcStartDeg = 0; //default
rot_.dialLive = (rot_.dialFixed2Center ? false : rot_.dialLive); // false = no, true = yes
////////////////// COLORS
if (rot_.colinv){//text color on light background
rot_.colTxt='black',
rot_.colDialValue='black';
}
if (rot_.scaleColor===null) //default, when not defined
rot_.scaleColor=d3.scaleLinear()
.domain([toRad(rot_.arcStartDeg),toRad(rot_.arc?rot_.arc:rot_.maxDeg)])
.range([rot_.colArcFrom,rot_.colArcTo]);
//calculations - based on above settings
rot_.szR = (rot_.szB)/2-rot_.outsDialDistance; // radius inside, when dial# outside
rot_.numDigits = Math.pow(10,rot_.valPrec); // Math.round - depending on valPrec
rot_.value = Math.round(rot_.value*rot_.numDigits)/rot_.numDigits;// from calling app
rot_.numDialFaces = 4*rot_.xticks*rot_.ticks; // 4*1*2=8 (45°), 4*3*1=12 (30°), 4*3*2=24 (15°): dh. ein vielfaches von 4*rot_.xticks*rot_.ticks
rot_.stepDeg = rot_.fullRotation/rot_.numDialFaces; // each rotation step in Deg
if(rot_.arc){rot_.maxDeg=rot_.arc*2} //
rot_.valDeg = calcVal2Rt(rot_.value); // in Deg
// rot_.valDeg = rot_.valDeg - rot_.valDeg%rot_.stepDeg; // full STEPS by start, otherwise not OK from Draggable
}//initVarPredefined
///////////// END Global Initializations
function createDialKnob(dialLive,nodialLive){ // Create Knob (SVG Graphic)
var dial = (rot_.dialLive) ? dialLive : nodialLive;
cr_c(dial,p(rot_.szB),p(rot_.szR-40),p(40),"",1,"img",null); //circle with pattern
cr_c(nodialLive,p(rot_.szB),p(rot_.szR),p(40),"#181a19",1,"circle",null); //circle background 1
cr_c(dial,p(rot_.szB),p(rot_.szR),p(40),rot_.colArc3,0.3,"circle",null); //circle background 2
xx_.arc = //arc
cr_c(nodialLive,p(rot_.szB),p(rot_.szR-8),p(30),rot_.scaleColor(toRad(rot_.valDeg)),0.9,"arc",rot_.valDeg);
cr_c(dial,p(rot_.szB),p(rot_.szR-2),p(4), "#FFF",0.1,"circle",null); //circle
cr_c(dial,p(rot_.szB),p(rot_.szR-40),p(20),"#333",1, "circle",null); //..
cr_c(dial,p(rot_.szB),p(rot_.szR-44),p(4), "#FFF",0.1,"circle",null); //..
cr_c(dial,p(rot_.szB),p(rot_.szR-50),p(4), "#000",1, "circle",null); //..
cr_t((rot_.tr)?dialLive:nodialLive,p(rot_.szB),p(31), p( 8+rot_.szB/2-rot_.szR),rot_.colTr,1, rot_.outsDial/*direction*/);
cr_t((rot_.tr)?dialLive:nodialLive,p(rot_.szB),p(24), p(12+rot_.szB/2-rot_.szR),rot_.colTr,0.3,rot_.outsDial/*direction*/);
// functions for creation of the 'knob'
function cr_svg(dom,sz){ //create and append d3.svg
return d3.select(dom)
.append('svg:svg').attr('width',sz).attr('height',sz)
.style('position','absolute').style('top',0).style('left',0)
.style('xPercent',-50).style('yPercent',-50);
}//cr_svg
function cr_c(dom,sz,br,bw,bc,bo,v,arc){ //create circle
var c = cr_svg(dom,sz);
if(v=='arc'){ //arc
return drawArc(c,sz,br,bw,bc,bo,arc)
} else { //circle
if(v=='img') { //backgroundImage
c .append("svg:defs")
.append("svg:pattern")
.attr("id","patternKnob").attr('patternUnits','userSpaceOnUse')
.attr("height", 800).attr("width", 800)
.append("svg:image").attr("x",0).attr("y",0)
.attr("xlink:href",rot_.pattern)
.attr("height", sz).attr("width", sz)
}
return drawCircle(c,sz,br,bw,bc,bo)
} //if-else
} //cr_c
function cr_t(dom,sz,sz_tr,tp,fc,fo,directionUp){ //triangle with d3-canvas
var c = cr_svg(dom,sz);
var px=d3.path();//d3 canvas (svg)
if(directionUp){ //triangle direction up
px.moveTo(sz/2,tp);
px.lineTo(sz/2-sz_tr/2,tp+sz_tr);
px.lineTo(sz/2+sz_tr/2,tp+sz_tr);
} else { //triangle direction down
px.moveTo(sz/2,tp+sz_tr);
px.lineTo(sz/2-sz_tr/2,tp);
px.lineTo(sz/2+sz_tr/2,tp);
}//if-else
px.closePath();
var cx=c.append('svg:path').attr('d',px.toString()).attr('fill',fc).style('fill-opacity',fo);
return cx
} //cr_tr - triangle
} // createDialKnob
function drawArc(c,sz,br,bw,bc,bo,arc){
xx_.arcGen = d3.arc()
.innerRadius(br-bw)
.outerRadius(br)
.cornerRadius(1.5)
.startAngle(toRad(rot_.arcStartDeg));
var g = c.append('svg:g').attr('transform','translate('+ sz/2 +','+ sz/2 +')');
var cx = g.append('svg:path')
.datum({endAngle:toRad(arc)})
.style('fill', rot_.scaleColor(arc))
// .style('fill', bc)
.style('opacity',bo)
.attr('d', xx_.arcGen);
return cx
} //drawArc
function drawCircle(c,sz,br,bw,bc,bo){
var cx = c.append('svg:circle').attr('cx',sz/2).attr('cy',sz/2).attr('r',br-bw/2);
if(bc){
cx.attr('stroke', bc).attr('stroke-width',bw).attr('fill','none')
.style('stroke-opacity',bo);
} else {
cx.attr('fill','url(#patternKnob)')
}
return cx
} //drawCircle
function arcTo(endAngleNew){
console.log('arcTo',endAngleNew);
console.log('arcVo',rot_.arcStartDeg);
function arcD(endAngleNew) {
return function(d) {
d.endAngle = toRad(endAngleNew);
return xx_.arcGen(d);
} //function 'd'
} //arc
xx_.arc.attr('d', arcD(endAngleNew));
xx_.arc.style('fill',rot_.scaleColor(toRad(endAngleNew)));
} //arcTo
//////////// Start
function digitQ(y,n,tr){
var cx = d3.path();
cx.moveTo(10+n*56+tr*8,8+y*40);
cx.lineTo(14+n*56+tr*8,4+y*40);
cx.lineTo(42+n*56+tr*8,4+y*40);
cx.lineTo(46+n*56+tr*8,8+y*40);
cx.lineTo(42+n*56+tr*8,12+y*40);
cx.lineTo(14+n*56+tr*8,12+y*40);
cx.lineTo(10+n*56+tr*8,8+y*40);
cx.closePath();
return cx.toString()
}//digitQ
function digitH(x,y,n,tr){
var cx = d3.path();
cx.moveTo(8+x*40+n*56+tr*8,10+y*40);
cx.lineTo(12+x*40+n*56+tr*8,14+y*40);
cx.lineTo(12+x*40+n*56+tr*8,42+y*40);
cx.lineTo(8+x*40+n*56+tr*8,46+y*40);
cx.lineTo(4+x*40+n*56+tr*8,42+y*40);
cx.lineTo(4+x*40+n*56+tr*8,14+y*40);
cx.lineTo(8+x*40+n*56+tr*8,10+y*40);
cx.closePath();
return cx.toString()
}//digitH
function createDecSept(g,n,tr){
var gx = g.append('svg:g')
.attr('class','decSept')
.attr('transform', 'skewX(-8)');
gx.append('svg:circle')
.attr('cx',56*n+8*tr).attr('cy',88)
.attr('r',4);
}//createDecSept
function createTxtUnit(g,n,tr,txt){
var gx = g.append('svg:g')
.attr('class','txtUnit')
.attr('transform', 'skewX(-8)');
gx.append('text')
.text(txt)
.attr('x',56*(n-1)+8*(tr+2)).attr('y',78)
.attr('id','txtU')
}//createTxtUnit
function calcLength(c,len,prec,sz,txt){
var ltxt=0;
if(txt) {
var p = c.append('svg:text').attr('x',0).attr('y',0).text(txt);
ltxt = p.node().getComputedTextLength();
}
return (len-(prec!=0))*56 + (prec!=0)*8 + ltxt + 4
}//calcLength
function createSegment(g,n,tr){
var gx = g.append('svg:g')
.attr('class','digit')
.attr('transform', 'skewX(-8)');
gx.append('svg:path').attr('d', digitQ(0,n,tr)); // A // AAAAAA
gx.append('svg:path').attr('d', digitH(0,0,n,tr)); // D // D E
gx.append('svg:path').attr('d', digitH(1,0,n,tr)); // E // D E
gx.append('svg:path').attr('d', digitQ(1,n,tr)); // B // BBBBBB
gx.append('svg:path').attr('d', digitH(0,1,n,tr)); // F // F G
gx.append('svg:path').attr('d', digitH(1,1,n,tr)); // G // F G
gx.append('svg:path').attr('d', digitQ(2,n,tr)); // C // CCCCCC
}//createSegment
function createDisplay(g,len,prec,unit,w,h){
var j=0;
var l=len-(prec!=0);
var gx = g.append('svg:g')
.attr('class','display')
.style('width',w)
.style('height',h)
.style('position','absolute').style('background-size','100vH auto')
.style('top','-50%').style('left','-50%')
.style('xPercent',-50).style('yPercent',-50);
for (var i=0;i<l;i++){
if(prec && i==(l-prec)){
createDecSept(gx,i,++j); // comma: . //
j++;
}
createSegment(gx,i,j); // digit,minus
}
if(unit){
createTxtUnit(gx,len,++j,unit); //
}
}//createDisplay
function setStyle() {
xx_.underlay
.style('-webkit-filter',rot_.blur)
.style('-moz-filter',rot_.blur)
.style('-ms-filter',rot_.blur)
.style('-o-filter',rot_.blur)
.style('filter',rot_.blur);
xx_.underlay.selectAll('path, circle, text')
.style('fill','none');
xx_.overlay.selectAll('path, circle')
.style('fill',rot_.colDialValue).style('stroke',rot_.colDialValue).style('stroke-opacity',0);
xx_.overlay.selectAll('text')
.style('fill',rot_.colDialValue).style('fill-opacity',0);
xx_.underlay.selectAll('.lit')
.style('fill',rot_.colDialValue).style('fill-opacity',.2).style('stroke',rot_.colDialValue);
xx_.overlay.selectAll('.lit')
.style('fill',rot_.colDialValue).style('fill-opacity',1).style('stroke-opacity',1);
}//setStyle
function setDigits(num,len,prec){
var digitPattern = [
// 0 1 2 3 4 5 6 7 8 9 - ''
[1,0,1,1,0,1,1,1,1,1,0,0], // 0 // 0000
[1,0,0,0,1,1,1,0,1,1,0,0], // 1 // 1 2
[1,1,1,1,1,0,0,1,1,1,0,0], // 2 // 1 2
[0,0,1,1,1,1,1,0,1,1,1,0], // 3 // 3333
[1,0,1,0,0,0,1,0,1,0,0,0], // 4 // 4 5
[1,1,0,1,1,1,1,1,1,1,0,0], // 5 // 4 5
[1,0,1,1,0,1,1,0,1,1,0,0] // 6 // 6666
];
var sN = d3.format(len+'.'+prec+'f')(num).replace('.','');
sN = sN.substring(sN.length-len,sN.length);
var sD = [].map.call(sN,function(dP){return Number(dP=='-'?10:dP==' '? 11:dP)});
xx_.digit = xx_.digit.data(sD);
for (var i=0;i<7;i++){
xx_.digit.select('path:nth-child('+(i+1)+')').classed('lit', function(d) { return digitPattern[i][d]; });
}
xx_.decSept.select('circle').classed('lit',1);
xx_.txtUnit.select('text').classed('lit',1);
setStyle();
}//setDigits
function createLCDdisplay(dom) {
///////////////////
var w=rot_.szB,
h=96;
xx_.dummy = dom
.append('svg:svg').attr('width',w).attr('height',h) //.attr('viewBox',[0,0,w,h].join(' '));
var l = calcLength(xx_.dummy,rot_.valLength,rot_.valPrec,w,rot_.unit)*1.7;
xx_.dummy.remove();
xx_.lcdContainer = dom
.append('svg:svg')
// .attr('viewBox',[-120,-120,240,240].join(' '))
.attr('viewBox',[-l/2,-h/2,l,h].join(' '))
.style('position','absolute')
.style('width', p(l)).style('height',p(h))
.style('display','flex').style('align-items','center').style('justifyContent','center')
.style('vertical-align','middle').style('text-align','center')
.style('top', '50%').style('left','50%')
// .style('right','50%')
// .style('xPercent',-50).style('yPercent',-50);
.style('font-family', 'Arial, Helvetica, sans-serif')
.style('font-weight', 200).style('font-size', 96)
.style('background-size', '100vH auto');
if(rot_.unit=='%') xx_.lcdContainer
.style('font-family', 'Digital-7, Helvetica, regular');
var g = xx_.lcdContainer
.append('svg:g'); //.attr('transform','translate('+(-0)+',0)');
createDisplay(g,rot_.valLength,rot_.valPrec,rot_.unit,l,h);
var bb = g.node().getBBox();
posGroup2Center(g);
// console.log('l',l,'w',bb.width,'h',bb.height,'x',bb.x,'y',bb.y);
// console.log('transform','translate(' + (-bb.width/2) + ', ' + (-bb.height/2) + ')');
xx_.underlay = dom.select('svg')
.attr('id', 'underlay');
xx_.overlay = dom.append(function() { return xx_.underlay.node().cloneNode(true); })
.attr('id', 'overlay');
xx_.lcd = dom.selectAll('svg');
xx_.digit = xx_.lcd.selectAll('.digit');
xx_.decSept = xx_.lcd.selectAll('.decSept');
xx_.txtUnit = xx_.lcd.selectAll('.txtUnit');
}//createLCDdisplay
function posGroup2Center(element){
var bb=element.node().getBBox();
var matrix = [1,0,0,1,-(bb.x+(bb.width/2)),-(bb.y+(bb.height/2))].join(' ');
element.attr('transform','matrix('+matrix+')'); //equal translate(x,y)
}//posGroup2Center
function createDivAppendTo(element,dom,styles){
xx_[element] = document.createElement('div');
xx_[element].className = element;
xx_[dom].appendChild(xx_[element]);
TweenMax.set(xx_[element], styles);
}//createDivAppendTo
function createDialValueAndKnob(){
// #1: define styles
var style_base = Object.assign({},
{position:'absolute'},{top:'50%'},{left:'50%'},{xPercent:-50},{yPercent:-50},
{backgroundColor:'rgba(0,0,0,0)'},{backgroundSize:'100vh auto'/*for scaling*/});
var style_sz = Object.assign({},
{width:rot_.width},{height:rot_.height});
var style_center = Object.assign({},
{display:'flex'},{alignItems:'center'},{justifyContent:'center'}
/* verticalAlign: 'middle', textAlign:'center' */ );
var style_lcd = Object.assign({},
{fontFamily:'D7MBI'},{fontSize:'24pt'},{y:'+2pt'});
var style_unit = Object.assign({},
{fontFamily:'Arial, Helvetica, sans-serif'},{fontSize:'20pt'},{fontStyle:'italic'},{y:'-2pt'});
var style_col_bg = Object.assign({},
{color:rot_.colDialValue},{opacity:0.6},{filter:rot_.blur});
var style_unit_alt =
(rot_.unit=='db')?
Object.assign({},{fontFamily:'D7MBI'},{fontSize:'20pt'},{fontStyle:'normal'},{y:'-2pt'}):
(rot_.unit=='%')?
Object.assign({},{fontFamily:'Digital-7'},{fontStyle:'oblique'},{fontSize:'24pt'},{y:'-2pt'}):{};
// #2: create general connectors
createDivAppendTo('not_dial','start',Object.assign({},style_base,style_sz));
createDivAppendTo('dial','start',Object.assign({},style_base,style_sz));
createDivAppendTo('dialKnob','dial', Object.assign({},style_base,style_sz));
// #3: create dialValue, based on lcd (== d3.svg) or on fonts (like as a lcd)
if(rot_.lcd) { //lcd-segment (d3.svg)
xx_.dialValue = d3.select(xx_.start).append('div');
createLCDdisplay(xx_.dialValue);
} else { //with fonts (@font-face)
createDivAppendTo('dialValueBg','start',Object.assign({},style_base,style_center,style_col_bg));
createDivAppendTo('lcdFontBg','dialValueBg',Object.assign({},style_lcd,style_col_bg));
createDivAppendTo('unitFontBg','dialValueBg',Object.assign({},style_unit,style_unit_alt));
createDivAppendTo('dialValue','start',Object.assign({},style_base,style_center,{color:rot_.colDialValue}));
createDivAppendTo('lcdFont1','dialValue',Object.assign({},style_lcd,{color:'transparent'}));
createDivAppendTo('lcdFont2','dialValue',Object.assign({},style_lcd,{color:rot_.colDialValue}));
createDivAppendTo('unitFont','dialValue',Object.assign({},style_unit,style_unit_alt,{color:rot_.colDialValue}));
xx_.lcdFontBg.innerHTML =
d3.format("8>"+rot_.valLength+"."+rot_.valPrec+"f")(8.777777777); /*LCD Background*/
xx_.unitFontBg.innerHTML = rot_.unit;
xx_.unitFont.innerHTML = rot_.unit;
}
setDialValue(rot_.value,rot_.valLength,rot_.valPrec);
TweenMax.set([xx_.dial], {rotation:rot_.valDeg});
// #4: create Knob graphic, based on d3.svg
createDialKnob(xx_.dialKnob,xx_.not_dial);
}//createDialValueAndKnob
//////////////////// Create Scale 'rotating dials'
function createDialScale(){
var style_base = {
position:'absolute',
width:0, // 0, otherwise problem with Safari
height:20,
display:'flex',alignItems:'center',justifyContent:'center'
}
var i_num = rot_.numDialFaces/360*rot_.maxDeg;
for(var i = 0; i <= rot_.numDialFaces; i++){
createDivAppendTo('dialNumContainer',rot_.dialLive?'dial':'not_dial',style_base);
createDivAppendTo('dialNum','dialNumContainer',style_base);
// Tick = HTML Unicode UTF-8 (examples)
// (1) Black circle: Dec/9679 Hex/25CF
// (2) Small black circle: Dec/8226 Hex/2022
// (3) Small up-pointing triangle: Dec/9652 Hex/25B4
// (4) Small down-pointing triangle: Dec/9662 Hex/25BE
// (5) Light vertical bar: Dec/10072 Hex/2758
// (6) Medium vertical bar: Dec/10073 Hex/2759
if(rot_.useInsTbl){ // custom: e.g.: Sollwert-Verschiebung
xx_.dialNum.innerHTML =
(rot_.dialNumTbl[i]=='.')? '●' : rot_.dialNumTbl[i]; // custom solution (with custom table)
} else {
var _i = (rot_.outsDial || rot_.arc)? i : rot_.numDialFaces-i; // clockwise:acw
_i = rt0to360(_i*rot_.stepDeg+rot_.arc)/rot_.stepDeg;
xx_.dialNum.innerHTML =
(_i>i_num)?'': //free: no number and no tick
(i%rot_.ticks)?'❘': //tick: see above examples (1)..(6)
calcRt2Val(_i*rot_.stepDeg-rot_.arc); //number rotate (always horizontal)
}//ifelse
TweenMax.set(xx_.dialNumContainer,{
rotation:rot_.stepDeg * i, // position of dialNum on circle
x:((rot_.width/2) - (0/2)) + 'px', // 0, otherwise problem with Safari
y:((rot_.outsDialDistance==0) ? 22 : 2) + 'px', // scale inside : outside
transformOrigin:'50% ' + (rot_.width/2-((rot_.outsDialDistance==0) ? 22 : 2)) + 'px' // radius -22px
})//Tween
TweenMax.set(xx_.dialNum,{
fontSize:i%rot_.ticks ? 8 : 12, // fontSize depends: tick : number
color:rot_.colTxt,
fontFamily:'Arial, Helvetica, sans-serif'
})//Tween
xx_.dialNum.initRotation = rot_.stepDeg * (i);
if(i%rot_.ticks == 0) { // rotate only num, no ticks
if(rot_.dialLive || rot_.tr) { // rotate only when dialLive or rot_.tr
TweenMax.set(xx_.dialNum, { // rotation of dialNum
rotation:
(rot_.insDial && !rot_.tr) ?
360-(rot_.stepDeg * (i)) - rot_.valDeg : // triangle spins not, triangle spins opposite direction
360-(rot_.stepDeg * (i)) // triangle spins
})//TweenMax
}
if(rot_.dialFixed2Center) { //no live Dial, direction of number is to center (90 deg)
TweenMax.set(xx_.dialNum, {
rotation:rot_.dialFixed2Center // rot_.dialFixed2Center: -90 deg == to center
})//TweenMax
}//if
}//i%rot_.ticks
}//for-loop
}//createDialScale
//////////////// GLOBAL ROTATE function
function createDialDraggable(){
xx_.lock4XY2rt=false;
xx_.myDial = Draggable.create(xx_.dial, {
bounds:{minRotation:(rot_.arc)? -rot_.arc : 0, maxRotation:(rot_.arc) ? rot_.arc : rot_.maxDeg},
type:'rotation',
dragResistance:0.4,
maxDuration:1,
throwResistance:0,
throwProps:true,
onPress: XY2rt,
onDrag: rtDial,
//otherwise, if we click and release immediately, there's momentum from the initial jump that'll cause the throwProps to kick in, but we don't want it to in this case.
onRelease:function() {if (this.tween && (xx_.lock4XY2rt || this.timeSinceDrag() > 0.02)) {this.tween.kill();}},
onUpdate:rtDial,
onThrowUpdate:rtDial,
onThrowComplete:function(){setValue(this.rotation)},
ease:Back.easeOut.config(0.3),
// liveSnap: [0, 10, 50, 100]
// liveSnap:function(endValue){ },
snap:function(rt){return rtRound(rt, rot_.stepDeg)}
})[0];
arcTo(rot_.valDeg);
setValue(rot_.valDeg);
rtDialNumbers(rot_.valDeg);
}//createDialDraggable
///////////////// rotate functions
function setValue(rt){
var val = calcRt2Val(rt);
setDialValue(val,rot_.valLength,rot_.valPrec);
setValue2App(val);
}//setValue
function rtMinMax(rt){
var r = rt;
if (r>=0) { // rt>=0
if ((rot_.arc!=0) && (((-360+r)>=-rot_.arc))) {
r=-360+r;
}
} else { // rt<0
if ((rot_.arcStartDeg<0) && ((-360+r)>rot_.arcStartDeg) && (r>rot_.arcStartDeg)) {
r = (-360-r);
}
}
if (rot_.arc) {if (r>180) {r = Math.max(r-360,-rot_.arc)}};
if (rot_.arc) {if (r>=0) {r = Math.min(r,rot_.arc)}};
return r
}//rtMinMax
function calcVal2Rt(val){
return calcXp2X(calcX2Xp(val-rot_.valBaseStart,rot_.valBase),rot_.maxDeg)-rot_.arc; // in Deg
}//calcVal2Deg
function calcRt2Val(rt){
var x = rt0to360(rt+rot_.arc);
x = rtRound(x,rot_.stepDeg);
return calcXp2X(calcX2Xp(x,rot_.maxDeg),rot_.valBase)+rot_.valBaseStart;
}//calcRt2Val
function setDialValue(val,length,prec){
if(rot_.lcd)
setDigits(val,length,prec)
else {
var x=d3.format("."+prec+"f")(val);
xx_.lcdFont2.innerHTML = x; /*visible*/
xx_.lcdFont1.innerHTML = Array(length-x.length+1).join('0'); /*invisible filler*/
}
}//setDialValue
function setValue2App(val){ //value to calling App
if (!rot_test){
if(oarg.item.value != val){
oarg.item.value = oarg.item.info._val = val;
hs.functions.do_valset( oarg )
}
}
}//setValue2App
function XY2rt(rt){
rot_.rtOffset = 90; //in case the dial's "home" position isn't at 0 degrees (pointing right). Greensock use 90 degrees.
if (rot_.var in [3]) return;
if (!xx_.lock4XY2rt) {
//figure out the angle from the pointer to the rotational origin (in degrees)
//set the rotation (with any offset that's necessary)
var _rt = deg(Math.atan2(this.pointerY - this.rotationOrigin.y, this.pointerX - this.rotationOrigin.x))+rot_.rtOffset;
_rt = rtRound(_rt, rot_.stepDeg); //snap
_rt = rtMinMax(_rt);
TweenMax.set(this.target, {rotation:_rt});
//now we'll end the drag and start it again from this new place, but when we start again,
//it'll call the onPress of course so to avoid an endless loop,
//we use the "lock4XY2rt" variable to skip it in the triggered onPress.
xx_.lock4XY2rt = true;
this.endDrag(rt);
this.startDrag(rt);
this.isDragging = false;
xx_.lock4XY2rt = false;
doDial(_rt)
}//end if
}//XY2rt
function rtPress(rt){
if (!rot_.var in [3]){
XY2rt(rt)
}
}//rtPress
function rtDial(){
doDial(this.rotation);
}//rtDial
function doDial(rt){
rtDialNumbers(rt);
arcTo(rt);
setValue(rt);
}//doDial
function rtDialNumbers(rt){
if(rot_.dialLive) {
var dn = document.getElementsByClassName('dialNum');
var i = dn.length;
while(--i > -1){
if(i%rot_.ticks==0) { // rotate text, no ticks
TweenMax.set(dn[i], { rotation:-rt0to360(rt) - dn[i].initRotation})
} //if
} //while
} //if
}//rtDialNumbers
///////////////// global functions
function p(x){return x/rot_.szB*240}
function rtRound(_rt, _rtStep_deg){return Math.round(_rt/_rtStep_deg) * _rtStep_deg;}
function calcX2Xp(X,B) {return Math.round(X/B*100*rot_.numDigits)/rot_.numDigits}
function calcXp2X(Xp,B){return Math.round(Xp/100*B*rot_.numDigits)/rot_.numDigits}
function toRad(deg){return (deg)*(Math.PI/180);} //d3
function rad(deg){return (deg-90)*(Math.PI/180);}//canvas d3
function deg(rad){return rad*(180/Math.PI);}
function toXY(c,r,deg){return {x:c.x+Math.cos(rad(deg))*r,y:c.y+Math.sin(rad(deg))*r}}
function rt0to360(rt){
rt = rt%360; // Math.round(_rt%360);
if(rt<0) { rt == 0 ? rt = 0 : rt = 360 + rt };
return rt;
}//rt0to360
function rtAdapt(rt){
if (rt < 0) {
rt += 360;
} else if (rt > 270) {
rt -= 360;
}
return rt
}//rtAdapt
function closeestDeg(num,arr){
// example: arr = [0,15,30,45,90,120,180];
var ds = arr.map(function(b){
var d = Math.abs(num - b);
return d > 180 ? 360 - d : d;
});
return arr[ds.indexOf(Math.min.apply(null, ds))];
}//closeestDeg
//////////// END
//}//RSLIDER
!
