

         var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById(YOUR_ELEMENT_ID).innerHTML = this.responseText;
                }
            };
            xhttp.open("GET", "/events", true);
            xhttp.send()
			


function Int2HTMLHex(number)
{
  if (number < 0)
  {
    number = 0xFFFFFFFF + number + 1;
  }
  
  var hex = number.toString(16).toUpperCase();
hex = '#' + hex;
  return hex;
}

function X_Or(num1, num2)
{
 var Result = (num1 ^ num2)

return(Result);
}


var colorPicker = new iro.ColorPicker("#demoWheel", {
  width: 290,
  height: 360,
  handleRadius: 8,
  handleUrl: null,
  // handleUrl: "#test",
  handleOrigin: {y: 0, x: 0},
  colors: [
    '#f00',
    '#0f0',
    '#00f',
  ],
  // borderWidth: 2,
  padding: 8,
  wheelLightness: true,
  wheelAngle: 270,
  wheelDirection: 'anticlockwise',
  layoutDirection: 'vertical',
  // transparency: true,
  layout: [
    {
      component: iro.ui.Wheel,
      options: {
      }
    },
    {
      component: iro.ui.Slider,
      options: {
        sliderType: 'value'
      }
    },
    {
      component: iro.ui.Slider,
      options: {
        sliderType: 'value',
        activeIndex: 2,
      }
    },
  ]
  });

function SendMessageText (  )
   {
    const Text = document.getElementById('set_neo_text');
	const Color = document.getElementById('Bu14');
	const BkgColor = document.getElementById('Bu15');
   var Buffer = "[Text] = " + Text.value + " [Color] = " + Color.value + " [Bkg] = " + BkgColor.value;
    Buffer = Buffer.replace("#", "0x"); // Replace first #  because will not be transmit
	Buffer = Buffer.replace("#", "0x");  // and second #  tuncate the whole ret of the String
 //  alert(Buffer);
    
	  var xhr = new XMLHttpRequest();
     
	xhr.open("GET", "/neopat?simple=" + Buffer, true); 
    xhr.send();	

 
    }


 function SendMessage ( text )
   {
    if ( text != "" )
    {
	  var xhr = new XMLHttpRequest();
     
 // so replace it width hex as marker
	xhr.open("GET", "/pattern?simple=" + text, true); 
    xhr.send();	

    }
    }



function SendNeoPixel(value)
{

if (value == 13)
SendMessageText();	
	else 
	{		
var text = value;
SendMessage(value);

	}


}



 function SendMessageRGB ( text )
   {
    if ( text != "" )
    {
	  var xhr = new XMLHttpRequest();
     var S1 = text;             //# can't be Send
	 var S2 = S1.replace('#', 'hex'); // get empty Result
 // so replace it width hex as marker
	xhr.open("GET", "/color1?rgb=" + S2, true); 
    xhr.send();	

    }
    }



 function SendMessageRGBa ( text )
   {
    if ( text != "" )
    {
	  var xhr = new XMLHttpRequest();
	xhr.open("GET", "/color2?rgba=" + text, true); }
    xhr.send();	
    }



const SendHandler = function() {

const value1 = document.getElementById('color_rgb');
const value2 = document.getElementById('color_rgba');
   
   SendMessageRGB(value1.value);
   SendMessageRGBa(value2.value);
   
}


colorPicker.on('input:change', function(color) {
  const x = document.getElementById("color_rgb");
	x.value =  color.hexString;
  const y = document.getElementById("color_rgba");
  y.value =  color.rgbaString;	
  

  const farbe = document.getElementById('getcolor');

var SZahl = x.value.replace("#","0x");
var Zahl = parseInt(SZahl);
    
Zahl =  X_Or(0xffffff, Zahl);

  
  farbe.style.backgroundColor = x.value;   
  var HtmlHex = Int2HTMLHex(Zahl);
  farbe.style.color = HtmlHex;
  SendHandler();
  
	
  })


function DisableButtons() {

for (var i=1; i< 14; i++)
{

var text = "Bu";
   text += i;
 const Button = document.getElementById(text);
   Button.disabled = true;
   }
   
}



function EnableButtons() {

for (var i=1; i< 14; i++)
{

var text = "Bu";
   text += i;
 const Button = document.getElementById(text);
   Button.disabled = false;
   }
   
}






