html/src/ChartBar.js - master - SoRusV/src_xendil

html/src/ChartBar.js
1 559 строк59 KB
ruslan
Initial commit
29 окт 2024, 11:18
29 окт 2024, 11:185c4dcf5
//th.OnMouseClick
let LockTouchMove=false;
let LockDblTouch=false; /// lock zoom on dbltab

var doubleTouchStartTimestamp = 0;
// document.addEventListener("touchstart", function (event) {
//     // var now = +(new Date());
//     // if (doubleTouchStartTimestamp + 500 > now) {
//     //     event.preventDefault();
//     // }
//     // doubleTouchStartTimestamp = now;
// });
// document.addEventListener("touchend", function (event) {
//     if(LockDblTouch)
//         event.preventDefault();
// });

function MChartBar(JParam, JPWMParam, JSpectr) {
    function MBar(JParam) {
        let th = this;//MChartBar.prototype;
      //  th.id=MyID++;
        th.Data = {};
        if(JParam.Data) /// {'%':100, Lm:ValueMax, Lux:ValueMax, W:ValueMax}
            for(p in JParam.Data)
                th.Data[p]=JParam.Data[p];
        let W = 0, H = 0, L = 0, T = 0, SliderHeight=0;
        th.Index = -1;
        th.onBeforeChangeValue;
        th.onBeforeChangePosition;
    //    th.Parent=JParam.Parent;
        th.Regime='Line'; /// Hide, Line, Edit, Disable
        let svg = null;
        let K = 1;
        th.Unit='%';
        th.Position=0;
        th.Value=0;
        th.IndexChanel=JParam.IndexChanel;

        let bView=false;
        let onBarDown=JParam.onBarDown;  /// sth.onBeforeChange(th, th.Position, th.Value);
        th.GPIO_PWM = JParam.GPIO_PWM;
        th.Fon; th.Bar;
        let Slider, Text, Edit, Div, Label; /// in Slider
        let yMouseDown = 0;
        let ySliderDown = 0;
        th.BarMaxGlb=0; /// max value and position of all bars in ChartBar
        let Color;
        let Regime; /// ='Hide' - only border not fill; 'line' - fill, not point on plot, not slider;
        /// 'Point' - fill, exist point on plot, not slider; 'Edit' - fill, show slider

        // th.Value2Unit=function(V){
        //     /// 0<=V<=0 to unit
        //  //   return V*JParam[th.Unit];
        //     return V*th.Data[th.Unit];
        // };

        let LockonBeforeChangePosition=false;
        th.SetPosition=function(Position_, NeedCallOn=true) {
            if(Position_==undefined)
                Position_=-1;
            if(NeedCallOn==undefined)
                NeedCallOn=true;
            if(Position_>=0)
                th.Position = Position_;
            else
                NeedCallOn=false; /// onle repaint bar-Slider
            if (th.Position < 0)
                th.Position = 0;
            if (th.Position > 1)
                th.Position = 1;
            let FonH = Number(th.Fon.getAttributeNS(null, 'height'));
            let FonY = Number(th.Fon.getAttributeNS(null, 'y'));
       //     console.log(FonHeightScr);
            // console.log(K)
            // console.log(th.BarMaxGlb)
            // console.log(th.Position)
            // console.log(th.Data[th.Unit])
            let SliderY_ = (FonHeightScr*K/th.BarMaxGlb)*th.Position*th.Data[th.Unit];  //FonH * (th.Position * K);
            let SliderY=Math.max(SliderY_,0); /// Slider y-position
            if(SliderY<0.5)
                SliderY=0;
            if (Slider)
            {
              //  console.log(FonHeightScr)
                // console.log(K)
                // console.log(FonY)
                // console.log(FonH)
            //    console.log(SliderY)
                //  console.log(SliderHeight)
                //  console.log(th.BarMaxGlb)
                // console.log(th.Position)
                //  console.log(th.Data[th.Unit])

                SetNode(Slider, {y:FonY + FonH - SliderY - SliderHeight/2});
                SetNode(Text, {y:FonY + FonH - SliderY+2});// - SliderHeight/2});
                Text.textContent = (th.Position * th.Data[th.Unit]).toFixed(Log10(K) + 1);// + th.Unit;
                Edit.value = th.BtnDown.Text.textContent;
            }

            if(bView)
                th.SetValue(th.Position);

            if (NeedCallOn && th.onBeforeChangePosition) {// && th.Position != ValueLast)
                if(!LockonBeforeChangePosition) {
                    LockonBeforeChangePosition=true;
                    th.onBeforeChangePosition(th, th.Position);
                }
                LockonBeforeChangePosition=false;
            }
        };

        th.SetValue=function(Value_){//, NeedCallOn=true) {
            if(Value_>=0)
                th.Value = Value_;
            if (th.Value < 0)
                th.Value = 0;
            if (th.Value > 1)
                th.Value = 1;
            let FonH = Number(th.Fon.getAttributeNS(null, 'height'));
            let FonY = Number(th.Fon.getAttributeNS(null, 'y'));
            let BarH = (FonHeightScr*K/th.BarMaxGlb)*th.Value*th.Data[th.Unit];  //FonH * (th.Value * K);
            BarH=Math.min(BarH, FonHeightScr);//FonH);
            BarH=Math.max(BarH,0);
            if(BarH<0.5)
                BarH=0;
            if (th.Bar) {
                SetNode(th.Bar, {height:BarH, y:FonY + FonH - BarH});
                if(th.Regime!='Disable')
                    th.BtnDown.Text.textContent=(th.Value * th.Data[th.Unit]).toFixed(Log10(K) + 1);
            }
        };

        th.Free=function(){
            removeEventListener('mousedown', th.OnMouseDown, false);
            //removeEventListener('dblclick', OnMouseDblClick, false);
            // removeEventListener('click', th.OnMouseClick, false);
            MouseM.RemoveOnMouseClick(th.OnMouseClick);
            removeEventListener('touchstart', th.OnMouseDown, false);
            removeEventListener('touchend', th.OnMouseUp, false);

            // removeEventListener('touchstart', OnTouchStart, false);
            //       th.BtnUp.Free();
            delete th.BtnUp;
//            th.BtnDown.Free();
            delete th.BtnDown;
        };

        th.SetK = function (K_) {
            K = K_;
            PaintFon();
            th.SetValue();//(th.Position);
            th.SetPosition();
        };

        th.SetUnit = function (Unit_, BarMaxGlb) {
            th.BarMaxGlb=BarMaxGlb; /// max value and position of all bars in ChartBar
            //th.BarMaxGlb=Data[Unit];
            th.Unit=Unit_;
            Label.textContent=th.Unit;
            //   console.log('+++')
            PaintFon();
            th.SetValue();//(th.Position);
            th.SetPosition();
            // SetPositionValue();//(th.Position);
        };

        th.SetParam = function (JParam) {
            //  alert("th.SetParam ");
        th.Name = JParam.Name;
        W = JParam.W;
        H = JParam.H;
        L = JParam.L;
        T = JParam.T;
        bView = JParam.bView;

         if (isMobile.any())
         {
             SliderHeight = H / 5;
             SliderHeight = Math.max(SliderHeight, 22);
             SliderHeight = Math.min(SliderHeight, 40);
        }
        else {
                SliderHeight = H / 10;
                SliderHeight = Math.max(SliderHeight, 13);
                SliderHeight = Math.min(SliderHeight, 22);
            }
            if (JParam.GPIO_PWM)
                th.GPIO_PWM = JParam.GPIO_PWM;

            svg = JParam.svg;
            th.onBeforeChangePosition = JParam.onBeforeChangePosition;
            th.onBeforeChangeValue = JParam.onBeforeChangeValue;
            th.Index = JParam.Index;
            Color = DEC2Color(JParam.Color);
            if(JParam.Position)
                th.Position=JParam.Position;
            if(JParam.Value)
                th.Value=JParam.Value;
        };

        th.SetRegime=function(Regime_){
            // console.log(Regime_);
            th.Regime=Regime_;
            th.Refresh();
            // th.SetPosition();
        };

        th.Refresh = function () {
            LockRefresh=true;
            if (!th.Bar)
                CreateElements();
         //   if(th.Regime!="Hide")
            {
                SetVisible(Slider, th.Regime=='Edit');
                SetVisible(Text, th.Regime=='Edit');
            }

            if(th.Regime=='Hide')
                SetNode(th.Bar, {"fill-opacity": 0});
            else {
                SetNode(th.Bar, {"fill-opacity": 1});
             //   SetNode(th.Bar, {fill: '#707070'});
                if (th.Index == 0) {
                    let ss= document.getElementById("linear-gradient");
                    if(!ss){
                        // //  svg.removeChild(document.getElementById("linear-gradient"));
                        //   delete ss;
                        let LG = GetNode(null, "linearGradient", {id: 'linear-gradient', y1:'100%', y2: 0, x1: 0,x2: 0});
                        GetNode(LG, "stop", {offset:0, 'stop-color': '#0'});
                        GetNode(LG, "stop", {offset:'100%', 'stop-color': '#ffffff'});
                        svg.appendChild(LG);
                        //  SetNode(th.Bar, {fill: '#990099'});
                    }
                    // let ss=document.getElementById("linear-gradient");//.style.display
                    //   ss.style.display=ss.style.display;
                    SetNode(th.Bar, {fill: "url(#linear-gradient)"});
                    //   SetNode(th.Bar, {fill: "url(#linear-gradient)"});
                }
                else
                    SetNode(th.Bar, {fill: Color});
            }
            if(th.Regime=='Line'){
            }
            if(th.Regime=='Edit')
                th.BtnDown.Down(true, false);
            else{
                th.BtnDown.Down(false, false);
                SetVisible(Div,false);
            }
            if(th.Regime=='Disable')
                th.BtnDown.Text.textContent="";
            if(th.BtnDown)
                th.BtnDown.Enable(th.Regime!='Disable' && th.Regime!='Hide');
            if(th.BtnUp)
                th.BtnUp.Enable(th.Regime!='Disable' && th.Regime!='Hide');


            //   Bar.style.cursor = 'pointer';
            //   th.Fon.style.cursor = 'pointer';
            th.SetPosition();
            th.SetValue();
        };

        // function OnTouchStart(event){
        //     alert("OnTouchStart");
        //     event.type="mousedown";
        //     OnMouseDown(event);
        // }

        th.OnMouseDown = function (event) {
            // event.preventDefault();

            // alert("OnMouseDown");
            let SelectedElement = event.target;
            if(SelectedElement!=Div && SelectedElement!=Edit)
                SetVisible(Div,false);
            if(!bView && RegimeEdit=="AllCh" && (SelectedElement==th.Fon || SelectedElement==th.Bar)){
                /// +++ on bar down
                // if(onBarDown)
                //     onBarDown(th, event.shiftKey);//, !event.shiftKey);
                // SetVisible(Div,false);
            }
            else if(SelectedElement==Slider || SelectedElement==Text){
                // alert(event.type);
                if(event.type=="mousedown")
                    yMouseDown = event.pageY;//GetSvgCoordinates(svg, event).y;
                else if(event.type=="touchstart") {
                    // alert(1)
                    // if(event.changedTouches.length!=1){
                    //     LockTouchMove=false;
                    //     return;
                    // }
                    let touchobj = event.changedTouches[0]; // reference first touch point
                    // alert(2)
                    yMouseDown = parseInt(touchobj.pageY); // get x coord of touch point
                    LockTouchMove=true;
                }
                // alert(yMouseDown);
                ySliderDown = Number(Slider.getAttributeNS(null, 'y'));

                svg.addEventListener('mousemove', th.OnMouseMove, false);
                addEventListener('mouseup', th.OnMouseUp, false);
                addEventListener('touchend', th.OnMouseUp, false);
                svg.addEventListener('touchmove', th.OnMouseMove, false);
                event.preventDefault();


                //  addEventListener('touchcancel', OnTouchCancel, false);
                //  addEventListener('touchend', OnTouchEnd, false);
                //  addEventListener('touchmove', OnTouchMove, false);
                //  addEventListener('touchstart ', OnTouchStart, false);

                // ontouchcancel 	The event occurs when the touch is interrupted
                // ontouchend 	The event occurs when a finger is removed from a touch screen
                // ontouchmove 	The event occurs when a finger is dragged across the screen
                // ontouchstart 	The event occurs when a finger is placed on a touch screen
            }
            // event.preventDefault();
            // event.stopPropagation();
            // return false;
        }
        th.OnMouseMove=function (event) {
            // alert("1");
            // event.preventDefault();
            // let xy = {'x':event.pageX, 'y':event.pageY};//GetSvgCoordinates(svg, event);
            let dy; //= event.pageY - yMouseDown;
            if(event.type=="mousemove")
                dy= event.pageY - yMouseDown;
            else if(event.type=="touchmove") {
                // alert(1)
                // if(event.changedTouches.length!=1){
                //     LockTouchMove=false;
                //     return;
                // }
                let touchobj = event.changedTouches[0] // reference first touch point
                // alert(2)
                dy = parseInt(touchobj.pageY)  - yMouseDown;// get x coord of touch point
                // yMouseDown = parseInt(touchobj.entX) // get x coord of touch point
                //  alert(3)
                LockTouchMove=true;
                // event.preventDefault();
                // alert( event.defaultPrevented());
            }
            // event.type="";

            let ySlider = ySliderDown + dy;
            let FonTop = Number(th.Fon.getAttributeNS(null, 'y'));
            let FonHeight = Number(th.Fon.getAttributeNS(null, 'height'));
            if (ySlider < FonTop - SliderHeight/2) // /2)
                ySlider = FonTop - SliderHeight/2; // /2;
            else if (ySlider > FonTop + FonHeight - SliderHeight/2) // /2)
                ySlider = FonTop + FonHeight - SliderHeight/2; // /2;
            let Position=(FonTop+FonHeight-ySlider - SliderHeight/2) / FonHeightScr/ K;//*th.Data[Unit];
            Position=(Position*th.BarMaxGlb)/th.Data[th.Unit];
    //        console.log(Position);
   //         if(Position==0)
     //           Position=Position;
            th.SetPosition(Position);
            event.preventDefault();
        };
        th.OnMouseUp=function (event) {
            event.preventDefault();
            svg.removeEventListener('mousemove', th.OnMouseMove, false);
            removeEventListener('mouseup', th.OnMouseUp, false);
            removeEventListener('touchend', th.OnMouseUp, false);
            svg.removeEventListener('touchmove', th.OnMouseMove, false);
            LockTouchMove=false;
        }
        th.OnKeyDown=function(event) {
            if (event.key == "Enter") {
                let Value = Edit.value;
                Value = Number(Value);
                th.SetPosition(Value /  th.Data[th.Unit]);
            }
            if (event.key == "Enter" || event.key == "Escape")
                SetVisible(Div, false);
        }
        let LineW=1.5;
        let TextHeight = 25;
        var FonHeightScr; /// distance of max height of fon on screen (from up button to down button)
        function PaintFon(){
            // console.log(th.Data[th.Unit])
            // console.log(th.BarMaxGlb)
            if(th.BarMaxGlb==0)
                th.BarMaxGlb=1E-6;
            {

                FonHeightScr=H - SliderHeight - 2*BtnHeight-LineW;//TextHeight ;
                // console.log(FonHeightScr)
                // console.log(H)
                // console.log(SliderHeight)
                // console.log(TextHeight)
                // console.log(th.Index)
                // console.log(th.PWM)
                let FH=FonHeightScr * K*th.Data[th.Unit] / th.BarMaxGlb;
                if(FH>FonHeightScr) /// fon is more max height
                    FH=FonHeightScr;
//                SetNode(th.Fon, { y: T + SliderHeight / 2 + LineW+FonHeightScr -FH, height: FH});
//                SetNode(th.Fon, { y: SliderHeight / 2+ LineW + BtnHeight, height: FH});
                SetNode(th.Fon, { y: SliderHeight / 2+ LineW + BtnHeight-FH+FonHeightScr, height: FH});
              //  SetNode(th.Fon, { y: T + H  - TextHeight - LineW - BtnHeight-SliderHeight / 2-FonHeightScr, height: FH});
            }
        }
        let BtnHeight;
        function CreateElements() {
            let SliderDx = W / 20;
            BtnHeight=17 - LineW;
            /// th.BtnUp.Value='del', 'add', ''-deactive series
            if (!bView && !th.BtnUp) {
                th.BtnUp = new MButton({"svg": svg, W: W - 2 * (SliderDx + LineW), H: BtnHeight,
               //     T: T + SliderHeight/2 + LineW - 17, Text:'add',
                    T: LineW, Text:'add',
                    L: L + SliderDx + LineW, Index: th.Index});//, onBeforeDown: OnBeforeDownBtnUp});
                th.BtnUp.Value='add';
            }
            if (!th.BtnDown) {
                th.BtnDown = new MButton({"svg": svg, W: W - 2 * (SliderDx + LineW), H: BtnHeight,
                    T:  T + H  - TextHeight,//T + SliderHeight/2 + LineW - 17,
                    L: L + SliderDx + LineW, Index: th.Index,
                    ButtonDownColor:'#7c3f31'});//, onBeforeDown: OnBeforeDownBtnDown });
            }
            if (!th.Fon) {
                th.Fon = GetNode(null, "rect", { x: L + SliderDx + LineW, rx: 5, ry: 5, //y: T + SliderHeight/2 + LineW
                    width: W - 2 * (SliderDx + LineW), //height: H - SliderHeight - TextHeight,
                    stroke: Color, 'stroke-width': 2 * 0, fill: '#707070'});
                //+++ if(!bView)// && th.Index!=0)
                //     th.Fon.style.cursor = 'pointer';
                svg.appendChild(th.Fon)
            }
            if (!th.Bar) {
                th.Bar = GetNode(svg, "rect", { x: L + SliderDx + LineW, y: T, width: W - 2 * (SliderDx + LineW),
                    height: SliderHeight + TextHeight, rx: 5, ry: 5, 'stroke-width': 2 * LineW, stroke: Color, fill: Color});
                //+++ if(!bView)// && th.Index!=0)
                //     th.Bar.style.cursor = 'pointer';
            }
            let SliderW=(W - 2 * +LineW)/1.5;
            if (!Slider) {
                let SColor='#7c3f31';
                if(th.Index==0)
                    SColor='#0000bf';
                Slider = GetNode(svg, "rect", {x: L + LineW, width: SliderW, height: SliderHeight,
                    rx: 5, ry: 5, fill: SColor, stroke: '#BBBBBB', 'stroke-width': 2});
                SetVisible(Slider, false);
                Slider.style.cursor = 'pointer';
            }

            if(!Text) {
                let FontSize = (th.W - 35) / 6 + 9;
                if (FontSize < 9)
                    FontSize = 9;
                else if (FontSize > 12)
                    FontSize = 12;
                FontSize = 12;
                Text = GetNode(svg, "text", {x: L + SliderW/2,
                    'font-size': FontSize, fill: '#DDDDDD', 'text-anchor': 'middle', 'dominant-baseline': 'middle'});//, unselectable:'on'});
                SetVisible(Text, false);
                Text.style.cursor = 'pointer';
            }

            //parent = document.body;
            Div = document.createElement('div');
            Edit = document.createElement('input');
            Edit.type = 'number';
            Edit.style.width = '70px';
            Div.style.width = '180px';
            Edit.min = 0;
            Edit.style.background = '#c5c5c5';
            Edit.style.color = '#000';
            SetVisible(Div, false);
            // Div.style.position = 'fixed';
            // Div.style.zIndex = 200;
            Edit.onkeydown = th.OnKeyDown;
            Label = document.createElement('label');
            Label.style.background = '#c5c5c5';
            Label.textContent = "%22";
            Div.appendChild(Edit);
            Div.appendChild(Label);
            // parent.appendChild(Div);
            document.body.appendChild(Div);
        }

        // th.ClickTimeout;
        // th.EventG;
        th.onClickTimeout = function(){
            th.ClickTimeout = undefined;
         //   console.log("Click");
            th.OnMouseClickM(th.EventG);
        };
        th.OnMouseClick = function (event) {
            // return; ///-------- remove return
            // let Slider, Text, Edit, Div, Label; /// in Slider
            if(event.target==Slider || event.target==Text) {
                event.preventDefault(); // prevent default click behavior

                // let SelectedElement = event.target;
                // if(SelectedElement==th.Bar){
                //     console.log("y1");
                // }
                // th.OnMouseDblClick(event);
                // return;
                if (th.ClickTimeout) {
                    th.ClickTimeout = undefined;
                    // console.log("dblClick")
                    th.OnMouseDblClick(event);
                    // LockDblTouch=true;
                }
                else {
                    th.EventG = event;
                    th.ClickTimeout = setTimeout(th.onClickTimeout, 500);
                }
            }
        };

        th.OnMouseClickM = function (event) {
            LockDblTouch=true;
            setTimeout(function(){LockDblTouch=false}, 700);
            let SelectedElement = event.target;
            if (SelectedElement == Text || SelectedElement==Slider) {
                //            Edit.value = (th.Position *th.Data[th.Unit]).toFixed(Log10(th.K) + 2);
//                Edit.value = th.BtnDown.Text.textContent;
                Edit.value = Text.textContent;
                let P = SvgToCoordinate(svg, Number(Text.getAttributeNS(null, 'x')), Number(Text.getAttributeNS(null, 'y')));
                Div.style.left = P.x-25;//Number(Text.getAttributeNS(null, 'x')); //th.H + th.T + 10-20;
                Div.style.top = P.y - 10; //Number(Text.getAttributeNS(null, 'y')); //th.H + th.T + 10-20;
                SetVisible(Div,true);
                // Div.style.position = 'fixed';
                // Div.style.zIndex = 200;
                Div.style.position="absolute";
                Div.style.display="block";
                Edit.autofocus = true;
                Div.focus();
                Edit.focus();
                Edit.select();
                Edit.autofocus = false;
                event.preventDefault() // prevent default click behavior
            }
        };

        th.OnMouseDblClick = function (event) {
            LockDblTouch=true;
            setTimeout(function(){LockDblTouch=false}, 700);
            let SelectedElement = event.target;
            // if(SelectedElement==th.Bar){
            //     console.log("y2");
            // }
            // else{
            //     console.log("n2");
            // }

          //  console.log("SelectedElement");
            if(!bView && RegimeEdit=="AllCh" && (SelectedElement==th.Fon || SelectedElement==th.Bar)){
                if(onBarDown)
                    onBarDown(th, event.shiftKey);//, !event.shiftKey);
                SetVisible(Div,false);
                event.preventDefault(); // prevent default click behavior
                event.stopPropagation();
                // return false;
            }

//             else if (SelectedElement == Text || SelectedElement==Slider) {
//                 //            Edit.value = (th.Position *th.Data[th.Unit]).toFixed(Log10(th.K) + 2);
// //                Edit.value = th.BtnDown.Text.textContent;
//                 Edit.value = Text.textContent;
//                 let P = SvgToCoordinate(svg, Number(Text.getAttributeNS(null, 'x')), Number(Text.getAttributeNS(null, 'y')));
//                 Div.style.left = P.x-25;//Number(Text.getAttributeNS(null, 'x')); //th.H + th.T + 10-20;
//                 Div.style.top = P.y - 10; //Number(Text.getAttributeNS(null, 'y')); //th.H + th.T + 10-20;
//                 SetVisible(Div,true);
//                 Edit.autofocus = true;
//                 Div.focus();
//                 Edit.focus();
//                 Edit.select();
//                 Edit.autofocus = false;
//
//             }
        };
        th.SetParam(JParam);
        CreateElements();
        svg.addEventListener('mousedown', th.OnMouseDown, false);
        // addEventListener('dblclick', OnMouseDblClick, false);
      //  addEventListener('click', th.OnMouseClick, false);
        MouseM.AddOnMouseClick(th.OnMouseClick);
        svg.addEventListener('touchstart', th.OnMouseDown, false);//OnTouchStart, false);

        // addEventListener('mousemove', OnMouseMove, false);
        // addEventListener('mouseup', OnMouseUp, false);
        // addEventListener('touchend', OnMouseUp, false);
        // addEventListener('touchmove', OnMouseMove, false);
    }
    // function OnTouchCancel (event){
    //     alert("OnTouchCancel");
    // };
    // function OnTouchEnd (event){
    //     alert("OnTouchEnd");
    // };
    // function OnTouchMove (event){
    //     alert("OnTouchMove");
    // };
    // function OnTouchStart (event){
    //     alert("OnTouchMove");
    // };

//function MChartBar(JParam, JPWMParam, JSpectr) {
    let th = this;//MChartBar.prototype;
    th.Name = "";
    th.svg = JParam.svg;
    th.ABar = [];
    th.ABK = []; /// array of BtnK [K0, K1, ...]
    th.JBU = {}; /// object-array of BtnUnit {'%':100, Lux:2,...}
    th.JPWM=JPWMParam;
    th.Index=JParam.Index;
    th.Fon;
    th.onChangeK;
    th.onChangeUnit;
    RegimeEdit="AllCh";
    let onChangeBarPosition;
    let onBeforeDownBtnDown;
    let x0, x1, y0, y1;
    let K=1;
    let bView;//, TextK, TextInfo;
    let RectPMax;
    let PMax;

    let LineL;/// left axes
    let ALine=[]; /// for net
    let ALineT=[]; /// for net

    th.GetRegimeEdit=function(){
        return RegimeEdit;
    };

    th.SetRegimeEdit=function(Value) {
        RegimeEdit = Value;
        let Cursor;
        if(RegimeEdit=="MainCh"){
            for (let iB = 0; iB < th.ABar.length; iB++)
                if (th.ABar[iB].Regime == 'Hide')
                    th.ABar[iB].SetRegime("Line");
            Cursor="default";
        }
        else if(RegimeEdit=="AllCh")
            Cursor="pointer";
        // for(let iB=1; iB<th.ABar.length; iB++){
            // th.ABar[iB].Fon.style.cursor = Cursor;
            // th.ABar[iB].Bar.style.cursor = Cursor;
        // }
    };

    function GetAxisMax()
    /// return{yMax:_, dy:_, yCount:_, p:_}
    /// here use only y, therefore x can be any: time, sec, x
    {
        let yMax = th.ABar[0].Data[th.ABar[0].Unit];
        if (yMax<0)
            return {yMax: 100, dy: 10, yCount: 10, p: 2};

        yMax /= K;
        let p = Math.floor(Log10(yMax));
        // console.log('p='+p);
        let yMax1 = yMax / Math.pow(10, p);
        //  console.log('dy='+dy);
        let dy = 0;
        let dp = 1;
        if (yMax1 < 1.3)
            dy = 0.1;
        else if (yMax1 < 2.3)
            dy = 0.2;
        else if (yMax1 < 3) {
            dy = 0.25;
            dp = 2;
        }
        else if (yMax1 < 6)
            dy = 0.5;
        else
            dy = 1;
        dy = dy * Math.pow(10, p);
        let yCount = Math.ceil(yMax / dy);
        yMax1 = yCount * dy;
        p = Math.max(-p + dp, 0);
        return {yMax: yMax1, dy: dy, yCount: yCount + 1, p: p};
    }
    function BuildNet(){

        let AxisL = GetAxisMax();
        let x1 = Number(th.ABar[0].Fon.getAttributeNS(null, 'x'))-11;
        let x2 = Number(th.ABar[th.ABar.length-1].Fon.getAttributeNS(null, 'x'))
            +Number(th.ABar[th.ABar.length-1].Fon.getAttributeNS(null, 'width'))+5;
        let y1 = Number(th.ABar[0].Fon.getAttributeNS(null, 'y'));
        let y2 = y1+Number(th.ABar[0].Fon.getAttributeNS(null, 'height'));
        let UMax= th.ABar[0].Data[th.ABar[0].Unit]/K;
        let kU=(y2-y1)/UMax;

        if(th.ABar[0].Unit=="W"){
            let U=Math.max(PMax, 0);
            SetNode(RectPMax, {x: x1 , y: y1 , width:x2-x1 , height: Math.max(0,y2-kU*U-y1)});//RSvg.y0/2});
            RectPMax.style.display = "block";
        }
        else
            RectPMax.style.display = "none";

        SetNode(LineL, {x1: x1, x2: x1, y1:y1, y2:y2,  stroke: '#ffffff', 'stroke-width': 0.5}); /// left axis
        let Visible=true;
        for(let i=0; i<ALine.length; i++){
            let U=Math.min(i*2*AxisL.dy, UMax);
            // if(U>UMax)
            //     U=UMax;
            if(Visible){
                SetNode(ALine[i], {x1: x1, y1: y2-kU*U, x2: x2, y2: y2-kU*U,
                    stroke: '#ffffff', 'stroke-width': 0.2, 'stroke-dasharray': "2, 3"});
                ALineT[i].textContent =U;
                ALineT[i].style.cursor='default';
                SetNode(ALineT[i], {x: x1-5, y: y2-kU*U, 'text-anchor': 'end',
                    'font-size': 11, fill: '#DDDDDD', 'dominant-baseline': 'middle' });
            }
            SetVisible(ALine[i], Visible);
            SetVisible(ALineT[i], Visible && (UMax==U || Math.abs(UMax-U)>AxisL.dy/2));
            Visible=(U!=UMax);
        }
        return;

        // RCrdL.y1 = AxisL.yMax;
        // RCrdR.y0 = AxisR.yMin;
        // RCrdR.y1 = AxisR.yMax;
        //
        // let iy;
        // for (iy = 0; iy < AxisL.yCount; iy++) {
        //     let yL = iy * (RCrdL.y1 - RCrdL.y0) / (AxisL.yCount - 1) + RCrdL.y0;
        //     let Sxy = Crd2Crd(RCrdL, RSvg, {x: 0, y: yL});
        //     if (iy < ALeft.length) {
        //         SetNode(ALeft[iy], {y1: Sxy.y, y2: Sxy.y});
        //         if(iy>0)
        //             ALeft[iy].style.display = 'block';
        //         SetNode(ALeftT[iy], {y: Sxy.y});
        //         ALeftT[iy].style.display = 'block';
        //     }
        //     else {
        //         ALeft.push(GetNode(th.svg, "line", {
        //             x1: RSvg.x0, y1: Sxy.y, x2: RSvg.x1, y2: Sxy.y,
        //             stroke: '#ffffff', 'stroke-width': 0.2, 'stroke-dasharray': "2, 3"
        //         }));
        //         if(iy==0)
        //             ALeft[iy].style.display = 'none';
        //         ALeftT.push(GetNode(th.svg, "text", {x: RSvg.x0 - 5, y: Sxy.y, 'text-anchor': 'end',
        //             'font-size': 11, fill: '#DDDDDD', 'dominant-baseline': 'middle' }));//, unselectable:'on'});
        //         ALeftT[iy].style.cursor = 'pointer';
        //     }
        //     if (0.001 <= AxisL.dy && AxisL.yMax < 10000)
        //         ALeftT[iy].textContent = yL.toFixed(AxisL.p);
        //     else
        //         ALeftT[iy].textContent = yL.toExponential(1);
        // }
        //
        // for (; iy < ALeft.length; iy++) {
        //     ALeft[iy].style.display = 'none';
        //     ALeftT[iy].style.display = 'none';
        // }

    }
    th.GetBarMaxValue=function() {
        let Max = -1;
        for (let iB = 1; iB < th.ABar.length; iB++)
            if(th.ABar[iB].Regime!='Hide'){ //Selected && th.ABar[iB].Enabled){
                let P = th.ABar[iB];
                if (Max < P.Value)
                    Max = P.Value;
            }
        return Max;
    };

    th.GetBarMaxPositionEdit=function(){ /// th.ABar[0] not use
        if(th.ABar[0].Unit=='%'){
            let Max = 0;
            for (let iB = 1; iB < th.ABar.length; iB++)
                if(th.ABar[iB].Regime=='Edit'){
                    let P = th.ABar[iB].Position;
                    if (Max < P)
                        Max = P;
                }
            return Max;
        }
        let Sum = 0;
        for (let iB = 1; iB < th.ABar.length; iB++)
            if(th.ABar[iB].Regime=='Edit')//Selected && th.ABar[iB].Enabled){
                Sum+= th.ABar[iB].Position*th.ABar[iB].Data[th.ABar[iB].Unit];
        Sum/=th.ABar[0].Data[th.ABar[0].Unit];
        return Sum;
    };

    th.OnBeforeChangePositionBar=function (Bar, V) {
        let IndexBar = Bar.Index;
        if (IndexBar == 0) {
            if (V <= 0) {
                V = 1E-6;
                th.ABar[0].SetPosition(V, false);
            }
            let k = V / th.GetBarMaxPositionEdit();
            /// will test
            for (let i = 1; i < th.ABar.length; i++)
                if (th.ABar[i].Regime == 'Edit')//Selected)// && th.ABar[i].Enabled)
                {
                    let P = th.ABar[i].Position * k;
                    if (P < 0 || P > 1) {
                        th.ABar[0].SetPosition(th.GetBarMaxPositionEdit(), false);
                        return false;
                    }
                }

            for (let i = 1; i < th.ABar.length; i++)
                if (th.ABar[i].Regime == 'Edit')//Selected)// && th.ABar[i].Enabled)
                {
                    let P = th.ABar[i];
                    if(P.Position==0)
                        P.SetPosition(1E-6 * k);
                    else
                        P.SetPosition(P.Position * k);
                }
        }
        else //if(th.ABar[0].Selected)
            th.ABar[0].SetPosition(th.GetBarMaxPositionEdit(), false);
        if (bView) {
            // if(IndexBar==0)
            //      for (let iB = 0; iB < th.ABar.length; iB++)
            //          th.ABar[iB].SetValue(th.ABar[iB].Position);
            // else
            //     th.ABar[IndexBar].SetValue(th.ABar[IndexBar].Position);
            //

            // if (th.JBU['%'])
            //     th.JBU['%'].Text.textContent ='% '+(J['%']/BarCount).toFixed(Log10(K) + 1);
            // if (th.JBU.Lm) {
            //     th.JBU.Lm.Text.textContent = "Lm "+J.Lm.toFixed(1);
            // }
            // if (th.JBU.Lux)
            //     th.JBU.Lux.Text.textContent = 'Lux '+J.Lux.toFixed(0);
            // if (th.JBU.W)
            //     th.JBU.W.Text.textContent = 'W '+J.W.toFixed(1);

            let Sum=0;
            let SumLux=0;
            let SumLm=0;
            let SumW=0;
            let Count=0;
            for (let iB=1; iB<th.ABar.length; iB++) {
                //if(th.ABar[iB].Regime=="Edit")
                {
                    Sum += th.ABar[iB].Value;
                    SumLux +=th.ABar[iB].Value*th.ABar[iB].Data["Lux"];
                    SumLm +=th.ABar[iB].Value*th.ABar[iB].Data["Lm"];
                    SumW +=th.ABar[iB].Value*th.ABar[iB].Data["W"];
                    Count++;
                }
            }
            th.JBU['%'].Text.textContent=ValueUnit2Text(Sum/Count,"%", K);
            if(th.JBU.Lux)
                th.JBU.Lux.Text.textContent=ValueUnit2Text(SumLux,"Lux");
            if(th.JBU.Lm)
                th.JBU.Lm.Text.textContent=ValueUnit2Text(SumLm,"Lm");
            if(th.JBU.W)
                th.JBU.W.Text.textContent=ValueUnit2Text(SumW,"W");

            th.SendPWMValue();
            // let AV=[];
            // for (let iB = 0; iB < th.ABar.length; iB++)
            //     AV.push(th.ABar[iB].Position);
            // th.SetValue(AV);
        }
        if (onChangeBarPosition)
            onChangeBarPosition(th, IndexBar, V);
        return true;
    };

    th.SendPWMValue=function(){
        if(bLightEdit) {
            let J = {};
            th.GetCBarValueToJson(J, true, bView);
            let JS={"Data":{}};
            for(p in J["Data"])
            {
                JS["Data"][p]={};
                JS["Data"][p]["VManual"]={};
                JS["Data"][p]["VManual"]["V"]=J["Data"][p]["V"];
                JS["Data"][p]["VManual"]["TOffMs"]=dTManualOffMs;
            }
            SendPWMValue(JS);
        }
    };

    th.RefreshUnit=function(){
        J={};//'%':0, Lux:0, Lm:0, W:0}
        for(p in th.ABar[1].Data)
            J[p]=0;
        let BarCount=0;
        for (let i = 1; i < th.ABar.length; i++)
            //if(th.ABar[i].Selected && th.ABar[i].Enabled)
        {
            BarCount++;
            for (p in th.ABar[i].Data)
                J[p] += th.ABar[i].Data[p] * th.ABar[i].Value;
        }

        if (th.JBU['%'])
            th.JBU['%'].Text.textContent=ValueUnit2Text(J['%']/BarCount, "%", K);
        //           th.JBU['%'].Text.textContent ='% '+(J['%']/BarCount).toFixed(Log10(K) + 1);
        if (th.JBU.Lm) {
            //        th.JBU.Lm.Text.textContent = "Lm "+J.Lm.toFixed(1);
            th.JBU.Lm.Text.textContent=ValueUnit2Text(J.Lm, "Lm");
        }
        if (th.JBU.Lux)
        //       th.JBU.Lux.Text.textContent = 'Lux '+J.Lux.toFixed(0);
            th.JBU.Lux.Text.textContent = ValueUnit2Text(J.Lux, "Lux");
        if (th.JBU.W)
            th.JBU.W.Text.textContent=ValueUnit2Text(J.W, "W");
        //        th.JBU.W.Text.textContent = 'W '+J.W.toFixed(1);
    };

    function OnBeforeDownBtnDown(Btn, bDown){
        if(onBeforeDownBtnDown)
            onBeforeDownBtnDown(Btn, bDown);
        else if(th.ABar[Btn.Index].Regime!='Hide'){
            let iMin=Btn.Index;
            let iMax=Btn.Index;
            if(Btn.Index==0)
                iMax=th.ABar.length-1;
            for(let iB=iMin; iB<=iMax; iB++)
                if(th.ABar[iB].Regime!="Disabled"  && th.ABar[iB].Regime!="Hide") {
                    if (bDown)
                        th.ABar[iB].SetRegime('Edit');
                    else
                        th.ABar[iB].SetRegime('Line');
                }
        }
        if(bView)
            th.OnBeforeChangePositionBar(th.ABar[Btn.Index], th.ABar[Btn.Index].Position);
    }
    function OnBarDown(Bar_, bShiftKey){
        //if (Bar_.Index <= 0)
          //  return;

        // function BarHide(Bar) {
        //     Bar.SetRegime('Hide');
        //     th.CTime.ASL[Bar.Index].SetActive(false);
        // };
        //
        // function BarLine(Bar) {
        //     th.CTime.ASL[Bar.Index].SetActive(true);
        //     let iP = th.CTime.ASL[Bar.Index].FindPoint(th.CTime.SliderSec);
        //     Bar.SetRegime('Line');
        // };
        let iBBegin=0;
        if (bShiftKey){
            let BarR=iBBegin;//=Bar.Regime;
            for (let iB = 1; iB < th.ABar.length; iB++) {
                let Bar = th.ABar[iB];
                if (Bar != Bar_ && Bar.Regime != 'Hide')
                    BarR--;
                else if(Bar != Bar_)
                    BarR++;
            }
            //BarLine(Bar_);
            Bar_.SetRegime('Line');
            for (let iB = iBBegin; iB < th.ABar.length; iB++) {
                let Bar = th.ABar[iB];
                if (Bar != Bar_) {
                    if (BarR<0)
                        Bar.SetRegime('Hide');
                    //                      BarHide(Bar);
                    else
                        Bar.SetRegime('Line');
                    //                 BarLine(Bar);
                }
            }
        }
        else /// !bShiftKey
            for(let iB=0; iB<th.ABar.length; iB++) {
                let Bar = th.ABar[iB];
                if (Bar == Bar_) {
                    if (Bar.Regime != 'Hide')
                        Bar.SetRegime('Hide');
                    //BarHide(Bar);
                    else
                        Bar.SetRegime('Line');
                    //BarLine(Bar);

                }
            }
        let CountBarV=0;
        for(let iB=iBBegin; iB<th.ABar.length; iB++)
            if(th.ABar[iB].Regime!='Hide')
                CountBarV++;
        if(CountBarV==0) {
            if (Bar_.Index != 0)
                Bar_.SetRegime('Line');
            //        BarLine(Bar_);
            else
                th.ABar[1].SetRegime('Line');
            //BarLine(th.CBar.ABar[1]);
        }
        if(th.onAfterBarDown)
            th.onAfterBarDown();
    }
    function SetParam (JParam, JPWMParam, JSpectr) {
     //   console.log("JParam="+JSON.stringify(JParam));
    //    console.log("JPWMParam="+JSON.stringify(JPWMParam));
    //    console.log("JSpectr="+JSON.stringify(JSpectr));
        th.Name = JParam.Name;
        th.Index = JParam.Index;
        onSelect=JParam.onSelect;
        onChangeBarPosition = JParam.onChangeBarPosition;
        PMax=JParam.PMax;
        bView = JParam.bView;
        x0 = Number(JParam.x0);
        x1 = Number(JParam.x1);
        y0 = Number(JParam.y0);
        y1 = Number(JParam.y1);
        onBeforeDownBtnDown=JParam.onBeforeDownBtnDown;
        th.onAfterBarDown=JParam.onAfterBarDown;

 //       let LG = GetNode(null, "linearGradient", {id: 'linear-gradient'+th.id, y1:'100%', y2: 0, x1: 0,x2: 0});
//        let LG = GetNode(null, "linearGradient", {id: 'linear-gradient', y1:'100%', y2: 0, x1: 0,x2: 0});
  //      GetNode(LG, "stop", {offset:0, 'stop-color': '#0'});
  //      GetNode(LG, "stop", {offset:'100%', 'stop-color': '#ffffff'});
    //    document.body.appendChild(LG);
  //      th.svg.appendChild(LG);

        let W_ = x1 - x0 + 1;
        let H_ = y1 - y0 + 1;
        let r = Math.min(H_, W_) / 15;
        if(r>10)
            r=10;

        th.Fon = GetNode( th.svg, "rect", {x:x0, y:y0, width:W_, height:H_, rx:r, ry:r, fill:'#444444'});
        RectPMax=GetNode(th.svg, "rect", {x: 0, y: 0, width: 0, height: 0, fill: '#ff0000', 'fill-opacity':"0.2"});
        LineL=GetNode(th.svg, "line", {}); /// left axes, upper th.Fon
        for(let i=0; i<20; i++) {
            ALine.push(GetNode(th.svg, "line", {}));
            ALineT.push(GetNode(th.svg, "text", {}));
        }
        x0+=32; /// place for Axes

        let JB = {};
        let Max = -1;
        let iB;
        let JSpectrD;
        if(JSpectr)
            JSpectrD= JSpectr.Data;
        let Count = 1;
        for (iB = 0; iB < JPWMParam.length; iB++) /// find pwm
        {
            let JPWMParamD = JPWMParam[iB];
            JB[String(iB)] = {};
            let JBD = JB[String(iB)];
            JBD.GPIO_PWM = JPWMParamD.GPIO_PWM;
            JBD.IndexChanel = JPWMParamD.IndexChanel;
            JBD.Data={'%':100, Lux:JPWMParamD.Lux, Lm:JPWMParamD.Lm, W:JPWMParamD.W};
           if (JSpectrD && JSpectrD[JPWMParamD.GPIO_PWM])
               JBD.Position = JSpectrD[JPWMParamD.GPIO_PWM];
            else
                JBD.Position = 0;
            if (JBD.Position > Max)
                Max = JBD.Position;
            JBD.Color = JPWMParamD.Color;
            JBD.bView = bView;
            JBD.Index = iB;
            JBD.svg = th.svg;
            JBD.onBeforeChangePosition = th.OnBeforeChangePositionBar;
        }
        JB.Count = iB;// + 1;
        let Border = 10;
        W_ = (x1 - x0 - 2 * Border) / JB.Count;
        H_ = (y1 - y0) / 1;
        let dx = W_ / 10;
        W_ -= dx;

        for (let i = 0; i < JB.Count; i++) {
            let JBD;
            JBD = JB[String(i)];
            JBD.W = W_;
            JBD.H = H_ - 20 - 2 * Border;
            JBD.L = x0 + Border + dx / 2 + (W_ + dx) * i;
            JBD.T = y0 + Border;
            JBD.K = K;
            JBD.onBarDown=OnBarDown;
        //    JBD.Parent=this;
            th.ABar[i] = new MBar(JBD);
            th.ABar[i].BtnDown.onBeforeDown=OnBeforeDownBtnDown;
            if(th.ABar[i].BtnUp)
                th.ABar[i].BtnUp.onBeforeDown=JParam.onBeforeDownBtnUp;
        }

        let BW = 40;
        let iBK = Log10(K);
        let AV=[1,5,25,100];
        for (let i = 0; i < 4; i++) {
            th.ABK[i] = new MButton({
                "svg": th.svg, W: BW, H: 20, T: H_ - 25 - Border, L: Border + (BW + 5) * i + 5, Text: "x" + AV[i], Value: AV[i],
                Index: i, onBeforeDown: onBeforeDownChangeK});
        }
        J={};
      //  console.log(th.ABar.length);
        for (let i = 1; i < th.ABar.length; i++) {
            for(p in th.ABar[i].Data)
                if(th.ABar[i].Data[p]>0)
                    J[p]=true;
        }
        BW = 60;
        let i=0;
        for(p in th.ABar[1].Data)
            if(J[p])
            {
                th.JBU[p] = new MButton({
                    "svg": th.svg, W: BW, H: 20, T: H_ - 25 - Border, L: Border + (BW + 5) * (i+3) + 5, Text: p, Value: p,
                    Index: i, onBeforeDown: onBeforeDownChangeUnit});
                i++;
            }

        // // th.svg.call(zoom);
        // var dblclickTarget = th.svg.on("dblclick.zoom");
        // var mouseScrollTarget = th.svg.on("mousewheel.zoom");
        //
        // function eventProxy(fn){
        //     return function(){
        //         // Enable events if enableEvents=== true
        //         if(enableEvents){
        //             fn.apply(this, arguments)
        //         }
        //     }
        // };
        //
        // th.svg.on("wheel.zoom", eventProxy(dblclickTarget))
        //    th.svg.on("mousewheel.zoom", eventProxy(mouseScrollTarget));



        bLockChange=false;
        if(!onBeforeDownBtnDown)
            onBeforeDownChangeK(th.ABK[0], true);
       // th.ABar[0].Refresh();
    }
    function onBeforeDownChangeK(Bt, bDown){//, Sender2) {
        for (let i = 0; i < th.ABK.length; i++) {
            if (th.ABK[i] != Bt)
                th.ABK[i].Down(false, false);
        }
        K=Bt.Value;
        for (let i = 0; i < th.ABar.length; i++) {
            th.ABar[i].SetK(K);
        }
        if(th.onChangeK)
            th.onChangeK(K);
        BuildNet();
        return !Bt.bDown;
    }

    function onBeforeDownChangeUnit(Bt, bDown){//}, Sender2) {
        for (p in th.JBU) {
            if (th.JBU[p] != Bt)
                th.JBU[p].Down(false, false);
        }
        U=Bt.Value;
        let BarMaxGlb=-1;
        for(iB=0; iB<th.ABar.length; iB++)
            if(th.ABar[iB].Data[U]>BarMaxGlb)
                BarMaxGlb=th.ABar[iB].Data[U];
        for (let iB = 0; iB < th.ABar.length; iB++)
            th.ABar[iB].SetUnit(U, BarMaxGlb);
        if(th.onChangeUnit)
            th.onChangeUnit(U);
        BuildNet();
        if(bView)
            th.OnBeforeChangePositionBar(th.ABar[1], th.ABar[1].Value); /// refresh ABar[0]
        return !Bt.bDown;
    }
    function OnMouseDown (event){
        if(onSelect)
            if(event.target.parentNode==th.svg)
                onSelect(th);
    }
    th.GetCBarValueToJson = function (Json, bFull, bOnlyEdit) { /// {PWM:Value (0-1) ,...}
        let Count=0;
        Json.Data = {};

        for (let iB = 1; iB < th.ABar.length; iB++) {
            let B = th.ABar[iB];
            if(!bOnlyEdit || th.ABar[iB].Regime=="Edit") {
                Json.Data[String(B.IndexChanel)]={};
                let J=Json.Data[String(B.IndexChanel)];//["VManual"]={}
                J["GPIO_PWM"]=B.GPIO_PWM;
                if (bFull)// {
                    J["V"] = B.Value;
                //              console.log(JSON.stringify(Json))
                // }
//            Json.Data[String(iB)] = B.Value;
                else
                    J["V"] = Number(B.Value.toFixed(5));
                //J["TOffMs"]=dTManualOffMs;



//                 Json.Data[String(iB-1)]={};
//                 Json.Data[String(iB-1)].PWM=B.PWM;
//                 if (bFull)// {
//                     Json.Data[String(iB-1)].VTemp = B.Value;
//                 //              console.log(JSON.stringify(Json))
//                 // }
// //            Json.Data[String(iB)] = B.Value;
//                 else
//                     Json.Data[String(iB-1)].VTemp = Number(B.Value.toFixed(5));
//                 Count++;
            }
        }
        let a=0;
        /// !!! Json.Count = Count;  not write else PWMChanel.Type!=LED wil del
       // Json.Count = Count; /// not save ABar[0]
    };

    th.SetValue=function(AV){/// AV - [V,...]
        for (let i = 0; i < th.ABar.length; i++)
            th.ABar[i].SetValue(AV[i]);
        // let J={};
        // th.GetCBarValueToJson(J, true);
        // // for(let iB=0; iB<th.ABar.length; iB++)
        // //     J.push([th.ABar[iB].PWM, th.ABar[iB].Value]);
        // SendPWMValue(J);
        th.SendPWMValue();
    };

    th.Free=function(){
        for(let iB=0; iB<th.ABar.length; iB++) {
            th.ABar[iB].Free();
            delete th.ABar[iB];
        }
       while (th.svg.lastChild) {
           th.svg.removeChild(th.svg.lastChild);
       }
        removeEventListener('mousedown', OnMouseDown, false);
    };

    SetParam(JParam, JPWMParam, JSpectr);
    th.svg.addEventListener('mousedown', OnMouseDown, false);
}
let JPWMParam, JACBar, JPWMValue;
let ACBar=[];
let iSelectCBar=-1;
//   let Table;
let ASvgCBar=[];
let EditCBar;

//    function LoadCBar(state){
//        parent.SaveLoadCBar('none');
//    };

function SaveCBar(){
    let JPWMValue={};
    ACBar[0].GetCBarValueToJson(JPWMValue, false, true);
    JACBar=GetJACBar();
    /// todo add JPWMValue to JACBar
    /// JPWMValue {"PWMValue":{"Count":5,"Data":{PWM: 0.1, "1":0.13, ...}}
    /// JACBar = [JCBar,...] = [ { "Name": "Name1", "Data": {iPWM: 0.3, "1": 0.6, "3": 0.2,..} },…]
    JACBar.push({"Name":EditCBar.value, "Data":JPWMValue.Data});
//    console.log("JACBar="+JSON.stringify(JACBar));
 //   if(esp==8266)
        SaveJSONToFile("GalleryCBar.txt", JACBar);
   // else
     //   SaveJSONToFile("/GalleryCBar.txt", JACBar);
    SaveLoadCBar('none');
}
function GetACBar(){
    if(iSelectCBar<0) {
        alert("No spectrum is selected");
        return;
    }
//        let ABar=ACBar[iSelectCBar].ABar;
//        for(let iB=1; iB<ABar.length; iB++)
//            if(ABar[iB].Regime=='Edit'){
//                JPWMParam
//            }
    let JPWMValue={};
    ACBar[iSelectCBar].GetCBarValueToJson(JPWMValue, true, true);
    Light.SetCBar(JPWMValue);
    SaveLoadCBar('none');
}
// function sleep(ms) {
//     return new Promise(resolve => setTimeout(resolve, ms));
// };

function DelCBar(){
    if(iSelectCBar<0) {
        alert("No spectrum is selected");
        return;
    }
    //   console.log(JSON.stringify(JACBar));
    JACBar.splice(iSelectCBar, 1);
    SaveJSONToFile("GalleryCBar.txt", JACBar);
    sleep2(500); /// need sleep else will download older version of gallery file
    //    console.log(JSON.stringify(JACBar));
    RefreshCBar();
}
//    function GetJPWMParam() {
//        return GetJSONFromServer({"LPWMChanel":{}});
//    };

function GetJACBar() {
    return GetJSONFromFile("GalleryCBar.txt");
}
function GetJACBarPWMParam(bLoadJACTime){
    if(!JPWMParam)
        JPWMParam=GetJPWMParam();
    if(bLoadJACTime) {
  //      console.log("bLoadJACTime="+bLoadJACTime);
        JACBar = GetJACBar();
    }
}
//
//    function GetCount(J){
//        let Count=0;
//        for(p in J)
//            Count++;
//        return Count;
//    };

//    function OnChangeBarPosition(CBar){
//
//    };

function OnSelectCBar (CBar) {
//        for(let i=0; i<ACBar.length; i++)
//            if(ACBar[i]==CBar && iSelectCBar==i)
//                return;
    if(JACBarAdd.Save)
        return;
    for(let i=0; i<ACBar.length; i++)
        if (ACBar[i]==CBar) {
            SetNode(ACBar[i].Fon, {'fill': '#2a442d'});
            iSelectCBar = i;
            ACBar[i].SendPWMValue();
        }
        else
            SetNode(ACBar[i].Fon, {'fill': '#444444'});
}
function CreateCBar(svg, Edit, iCell, APWMSelect) {
//return;
 //   console.log("++++CreateCBar+++++++++++++");
    //  GetFromServer();
    //  let svg = document.getElementById('idSVGSpectr');
    let H = Number(svg.getAttributeNS(null, 'height'));
    let W = Number(svg.getAttributeNS(null, 'width'));
    let B = 0;
//        console.log(svg);
//        console.log(JSON.stringify(JSpectr))
    //  console.log('APWMParam='+JSON.stringify(APWMParam))
    let JCBarGraph = {svg: svg, //onChange: OnChangeBarPosition,
        x0: B, x1: W - 2 * B,
        y0: B, y1: H - 2 * B, bView: 1, //onBeforeBarDown:OnBeforeBarDown,
        PMax:JLightAll["LLight"]["PMax"],
        //  onChangeBarPosition: OnChangeBarPosition,
        onSelect: OnSelectCBar
        //  onBeforeDownBtnDown: OnBeforeDownBtnDown
        //      onBeforeDownBtnUp: OnBeforeDownBtnUp
    }; /// not svg

    let APWMParam = [{"Regime": 2, "Name": "Main", "Color": 0xffffff, "GPIO_PWM": "-", "Lm": 0, "Lm": 0, "Lux": 0, "W": 0}]; /// main bar
    let JPWMParam=GetJPWMParam();

    /// Calc ABar[0].Data = APWMParam[0] - max value for %, Lm, Lux, W
    let SumLux=0;
    let SumLm=0;
    let SumW=0;
    let IndexChanel=0;
    for (v in JPWMParam.Data) {
//        if (JPWMParam.Data[v].Type == "LED" && JPWMParam.Data[v].PWM >= 0) {
        if (JPWMParam.Data[v]["GPIO_PWM"] != "-" && JPWMParam.Data[v]["Regime"]=="Auto") {
            JPWMParam.Data[v].IndexChanel=IndexChanel;
            APWMParam.push(JPWMParam.Data[v]);
            SumLux+=JPWMParam.Data[v].Lux;
            SumLm+=JPWMParam.Data[v].Lm;
            SumW+=JPWMParam.Data[v].W;
        }
        IndexChanel++;
        // else
        //     delete JPWMParam.Data[v];
    }
    APWMParam[0]['Lux']=SumLux;
    APWMParam[0]['Lm']=SumLm;
    APWMParam[0]['W']=SumW;
    //    console.log("APWMParam="+JSON.stringify(APWMParam));
//        if(!JACBarAdd.Save)
//            Edit.value=JACBar[iCell].Name;

    let CBar=new MChartBar(JCBarGraph, APWMParam);//, JSpectr);
    ACBar.push(CBar);
    CBar.ABK[0].Down(true);
//    if(CBar.JBU['%'])
    CBar.JBU['%'].Down(true);
    CBar.SetRegimeEdit(JACBarAdd.RegimeEdit);

    //  let JACBar=GetJACBar();
    if(JACBarAdd.Save)
        Edit.value="Name";
    else
        Edit.value=JACBar[iCell].Name;
    // console.log("JACBar="+JSON.stringify(JACBar));
    let AV=[0];
    for(let iC=1; iC<APWMParam.length; iC++) {
        bFind=false;
        //   console.log("APWMParam[iC].PWM="+APWMParam[iC].PWM);
        //   console.log("JACBar[iCell].Data="+JSON.stringify(JACBar[iCell].Data));
        let JD;
        if(JACBarAdd.Save)
            JD=JPWMValue.Data;
        else
            JD=JACBar[iCell].Data;
        for (p in JD)
            if (GetGPIO(JD[p].GPIO_PWM) == GetGPIO(APWMParam[iC].GPIO_PWM)) {
                //     console.log("p="+p);
                AV.push(JD[p].V);
                bFind = true;
                break;
            }

        if(!bFind)
            AV.push(-1);
    }
  //  console.log("AV="+JSON.stringify(AV));
    let SelectCount=0;
    for(let iB=0; iB<CBar.ABar.length; iB++) {
        if(AV[iB]>=0) {
            let f=APWMSelect.indexOf(CBar.ABar[iB].GPIO_PWM);
            if(f>=0 ) {
                CBar.ABar[iB].SetRegime('Edit');
                SelectCount++;
            }
            else
                CBar.ABar[iB].SetRegime('Hide');
        }
        else
            CBar.ABar[iB].SetRegime('Hide');
//            CBar.ABar[iB].Regime!='Edit'{
//                JPWMValue
//                CBar.ABar[iB].SetRegime('Hide');
//                CBar.ABar[iB].
        //   }
        //            CBar.ABar[iB].SetRegime('Disable');
        let V=AV[iB];
        //  if(V<0 && iB!=0)
        if(CBar.ABar[iB].Regime=='Hide' || JACBarAdd.Save)
            for(p in JPWMValue.Data)
//                if(JPWMValue.Data[p]["VManual"].GPIO_PWM==CBar.ABar[iB]["VManual"].GPIO_PWM){
                if(GetGPIO(JPWMValue.Data[p].GPIO_PWM)==GetGPIO(CBar.ABar[iB].GPIO_PWM)){
                    V=JPWMValue.Data[p].V;
                    break;
                }
        CBar.ABar[iB].SetPosition(V, iB==CBar.ABar.length-1);
        CBar.ABar[iB].SetValue(V);
    }
    CBar.ABar[0].SetValue(CBar.ABar[0].Position);
    if(SelectCount>0)
        CBar.ABar[0].SetRegime('Edit');
    for(p in CBar.JBU)
        if(CBar.JBU[p].Value==JACBarAdd.Unit){
            CBar.JBU[p].Down(true);
            break;
        }
}
function BuildTableACBar(APWMSelect){
    let CountCell,ColCount;
    if(JACBarAdd.Save){
        CountCell=1;
        ColCount=1;
    }
    else{
        CountCell=GetJCount(JACBar);
        ColCount=1;
    }
 //   console.log("CountCell="+CountCell);
    let RowCount=CountCell/ColCount;
    let Table=document.getElementById('idTableACBar');
  //  let div=Table;////document.getElementById('idFrameACBar');
    let Ch=document.getElementById("idSvgCBar");
    // let w=Math.min(Ch.getAttributeNS(null, 'width'), document.body.clientWidth*0.88-30);
    let w=Math.min(Ch.getAttributeNS(null, 'width'), document.body.clientWidth*0.9-1);
    let h=Math.min(Ch.getAttributeNS(null, 'height'), document.body.clientHeight*0.5);
    // let h=Ch.getAttributeNS(null, 'height');
    let iCell=0;
    for(let iR=0; iR<RowCount && iCell<CountCell; iR++){
        let tr = document.createElement('tr');
        tr.style.height=h+50;
        Table.appendChild(tr);
       // let W = Table.getAttributeNS(null, 'width');
        for(let iC=0; iC<ColCount && iCell<CountCell; iC++){
            let td = document.createElement('td');
            ASvgCBar[iC]=document.createElementNS("http://www.w3.org/2000/svg", 'svg');
             SetNode(ASvgCBar[iC],{'width': w, 'height':h});
            td.appendChild(ASvgCBar[iC]);

            EditCBar = document.createElement('input');
            EditCBar.type = 'text';
            EditCBar.style.width = Table.width;
            EditCBar.style.background = '#c5c5c5';
            EditCBar.style.color = '#000';
            EditCBar.style.border=0;
            //    SetNode(Edit, {'width':500, 'background':'#c5c5c5', 'color':'#000', 'border':0});
            //   td.appendChild(EditCBar);
            // <button class="button" onclick='LoadCBar("block")'>Load bars</button>
            let Div = document.createElement('div');
            Div.appendChild(EditCBar);

            td.appendChild(Div);
            tr.appendChild(td);

            CreateCBar(ASvgCBar[iC], EditCBar, iCell, APWMSelect, JPWMValue);
            iCell++;
        }
    }
}
let APWMSelectCBar;
let JACBarAdd={"Unit":"%", "Save":true};
function RefreshCBar(APWMSelectCBar_, JPWMValue_, JACBarAdd_) {
    if(APWMSelectCBar_)
        APWMSelectCBar=APWMSelectCBar_;
    if(JPWMValue_)
        JPWMValue=JPWMValue_;
    if(JACBarAdd_)
        JACBarAdd=JACBarAdd_;

    iSelectCBar=-1;
    let B=document.getElementById("BtnDelCBar");
    SetVisible(B, !JACBarAdd.Save);
    B=document.getElementById("BtnGetACBar");
    SetVisible(B, !JACBarAdd.Save);
    B=document.getElementById("BtnSaveCBar");
    SetVisible(B, JACBarAdd.Save);

    //   alert("LoadCBarData");
    bLoaded = false;
    ClearCBar();
    GetJACBarPWMParam(!JACBarAdd.Save && JACBar==undefined);
//    console.log("JACBar="+JSON.stringify(JACBar));
    BuildTableACBar(APWMSelectCBar);
    bLoaded = true;
}
function ClearCBar(){
    //return;
    for(let i=0; i<ACBar.length; i++){
    //    console.log("i="+i);
        ACBar[i].Free();
        delete ACBar[i];
        delete ASvgCBar[i];
    }
    ACBar=[];
    ASvgCBar=[];

    Table=document.getElementById('idTableACBar');
  //  console.log("Table.getElementsByTagName('tr').length="+Table.getElementsByTagName('tr').length);
    for (; Table.getElementsByTagName('tr').length > 0; ){
    //    console.log("delRow");
        Table.deleteRow(0);
        //  return;
    }
   // console.log("Table.getElementsByTagName('tr').length="+Table.getElementsByTagName('tr').length);
}