rootpage.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>grapheqd</title>
<meta name="viewport" content="width=device-width">
<style type="text/css">
body {
  font-family:sans-serif;
  font-size:3vmin;
  color:white;
  padding:0;
  margin:0;
  background-color:black;
  height:100vh;
}
#errorPane {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  opacity:0.3;
  background-color:#ccc;
  visibility:hidden;
  padding:0;
  margin:0;
  z-index:998;
}
#errorText {
  width:100%;
  position:absolute;
  top:50%;
  left:0;
  text-align:center;
  vertical-align:middle;
  opacity:1;
  background-color:red;
  visibility:hidden;
  color:white;
  font-weight:bold;
  font-size:large;
  padding:0.1em 0em 0.1em 0em;
  margin:0;
  z-index:999;
}
#about {
  width:100%;
  text-align:center;
  white-space:nowrap;
  margin-top:3%;
  font-size:50%;
}
a {
  color:darkcyan;
}
#grapheqd {
  width:90%;
  height:30%;
  margin:0 auto 0 auto;
  padding-top:10%;
}
.channel {
  width:49%;
  height:100%;
  display:inline-block;
}
.band {
  width:3.2%;
  height:100%;
  display:inline-block;
  margin-right:0.5%;
}
.bar {
  width:100%;
  height:3%;
  margin-top:0px;
  margin-bottom:10%;
  background-color:cyan;
  opacity:0.2;
}
.hz {
  font-size:10%;
  color:darkcyan;
  text-align:center;
}
.status {
  width:100%;
  margin-top:2%;
  text-align:center;
}
#mono, #stereo, #hz44100, #hz48000 {
  color:cyan;
  opacity:0.2;
}
#mono, #hz44100 {
  margin-right:10%;
}
#stereo, #hz48000 {
  margin-left:10%;
}
</style>
</head>
<body>
<div id="grapheqd">
<div class="channel">
<div class="band">
<div id="left0_24" class="bar"></div>
<div id="left0_23" class="bar"></div>
<div id="left0_22" class="bar"></div>
<div id="left0_21" class="bar"></div>
<div id="left0_20" class="bar"></div>
<div id="left0_19" class="bar"></div>
<div id="left0_18" class="bar"></div>
<div id="left0_17" class="bar"></div>
<div id="left0_16" class="bar"></div>
<div id="left0_15" class="bar"></div>
<div id="left0_14" class="bar"></div>
<div id="left0_13" class="bar"></div>
<div id="left0_12" class="bar"></div>
<div id="left0_11" class="bar"></div>
<div id="left0_10" class="bar"></div>
<div id="left0_9" class="bar"></div>
<div id="left0_8" class="bar"></div>
<div id="left0_7" class="bar"></div>
<div id="left0_6" class="bar"></div>
<div id="left0_5" class="bar"></div>
<div id="left0_4" class="bar"></div>
<div id="left0_3" class="bar"></div>
<div id="left0_2" class="bar"></div>
<div id="left0_1" class="bar"></div>
<div id="left0_0" class="bar"></div>
<div id="left0hz" class="hz"></div>
</div><div class="band">
<div id="left1_24" class="bar"></div>
<div id="left1_23" class="bar"></div>
<div id="left1_22" class="bar"></div>
<div id="left1_21" class="bar"></div>
<div id="left1_20" class="bar"></div>
<div id="left1_19" class="bar"></div>
<div id="left1_18" class="bar"></div>
<div id="left1_17" class="bar"></div>
<div id="left1_16" class="bar"></div>
<div id="left1_15" class="bar"></div>
<div id="left1_14" class="bar"></div>
<div id="left1_13" class="bar"></div>
<div id="left1_12" class="bar"></div>
<div id="left1_11" class="bar"></div>
<div id="left1_10" class="bar"></div>
<div id="left1_9" class="bar"></div>
<div id="left1_8" class="bar"></div>
<div id="left1_7" class="bar"></div>
<div id="left1_6" class="bar"></div>
<div id="left1_5" class="bar"></div>
<div id="left1_4" class="bar"></div>
<div id="left1_3" class="bar"></div>
<div id="left1_2" class="bar"></div>
<div id="left1_1" class="bar"></div>
<div id="left1_0" class="bar"></div>
<div id="left1hz" class="hz"></div>
</div><div class="band">
<div id="left2_24" class="bar"></div>
<div id="left2_23" class="bar"></div>
<div id="left2_22" class="bar"></div>
<div id="left2_21" class="bar"></div>
<div id="left2_20" class="bar"></div>
<div id="left2_19" class="bar"></div>
<div id="left2_18" class="bar"></div>
<div id="left2_17" class="bar"></div>
<div id="left2_16" class="bar"></div>
<div id="left2_15" class="bar"></div>
<div id="left2_14" class="bar"></div>
<div id="left2_13" class="bar"></div>
<div id="left2_12" class="bar"></div>
<div id="left2_11" class="bar"></div>
<div id="left2_10" class="bar"></div>
<div id="left2_9" class="bar"></div>
<div id="left2_8" class="bar"></div>
<div id="left2_7" class="bar"></div>
<div id="left2_6" class="bar"></div>
<div id="left2_5" class="bar"></div>
<div id="left2_4" class="bar"></div>
<div id="left2_3" class="bar"></div>
<div id="left2_2" class="bar"></div>
<div id="left2_1" class="bar"></div>
<div id="left2_0" class="bar"></div>
<div id="left2hz" class="hz"></div>
</div><div class="band">
<div id="left3_24" class="bar"></div>
<div id="left3_23" class="bar"></div>
<div id="left3_22" class="bar"></div>
<div id="left3_21" class="bar"></div>
<div id="left3_20" class="bar"></div>
<div id="left3_19" class="bar"></div>
<div id="left3_18" class="bar"></div>
<div id="left3_17" class="bar"></div>
<div id="left3_16" class="bar"></div>
<div id="left3_15" class="bar"></div>
<div id="left3_14" class="bar"></div>
<div id="left3_13" class="bar"></div>
<div id="left3_12" class="bar"></div>
<div id="left3_11" class="bar"></div>
<div id="left3_10" class="bar"></div>
<div id="left3_9" class="bar"></div>
<div id="left3_8" class="bar"></div>
<div id="left3_7" class="bar"></div>
<div id="left3_6" class="bar"></div>
<div id="left3_5" class="bar"></div>
<div id="left3_4" class="bar"></div>
<div id="left3_3" class="bar"></div>
<div id="left3_2" class="bar"></div>
<div id="left3_1" class="bar"></div>
<div id="left3_0" class="bar"></div>
<div id="left3hz" class="hz"></div>
</div><div class="band">
<div id="left4_24" class="bar"></div>
<div id="left4_23" class="bar"></div>
<div id="left4_22" class="bar"></div>
<div id="left4_21" class="bar"></div>
<div id="left4_20" class="bar"></div>
<div id="left4_19" class="bar"></div>
<div id="left4_18" class="bar"></div>
<div id="left4_17" class="bar"></div>
<div id="left4_16" class="bar"></div>
<div id="left4_15" class="bar"></div>
<div id="left4_14" class="bar"></div>
<div id="left4_13" class="bar"></div>
<div id="left4_12" class="bar"></div>
<div id="left4_11" class="bar"></div>
<div id="left4_10" class="bar"></div>
<div id="left4_9" class="bar"></div>
<div id="left4_8" class="bar"></div>
<div id="left4_7" class="bar"></div>
<div id="left4_6" class="bar"></div>
<div id="left4_5" class="bar"></div>
<div id="left4_4" class="bar"></div>
<div id="left4_3" class="bar"></div>
<div id="left4_2" class="bar"></div>
<div id="left4_1" class="bar"></div>
<div id="left4_0" class="bar"></div>
<div id="left4hz" class="hz"></div>
</div><div class="band">
<div id="left5_24" class="bar"></div>
<div id="left5_23" class="bar"></div>
<div id="left5_22" class="bar"></div>
<div id="left5_21" class="bar"></div>
<div id="left5_20" class="bar"></div>
<div id="left5_19" class="bar"></div>
<div id="left5_18" class="bar"></div>
<div id="left5_17" class="bar"></div>
<div id="left5_16" class="bar"></div>
<div id="left5_15" class="bar"></div>
<div id="left5_14" class="bar"></div>
<div id="left5_13" class="bar"></div>
<div id="left5_12" class="bar"></div>
<div id="left5_11" class="bar"></div>
<div id="left5_10" class="bar"></div>
<div id="left5_9" class="bar"></div>
<div id="left5_8" class="bar"></div>
<div id="left5_7" class="bar"></div>
<div id="left5_6" class="bar"></div>
<div id="left5_5" class="bar"></div>
<div id="left5_4" class="bar"></div>
<div id="left5_3" class="bar"></div>
<div id="left5_2" class="bar"></div>
<div id="left5_1" class="bar"></div>
<div id="left5_0" class="bar"></div>
<div id="left5hz" class="hz"></div>
</div><div class="band">
<div id="left6_24" class="bar"></div>
<div id="left6_23" class="bar"></div>
<div id="left6_22" class="bar"></div>
<div id="left6_21" class="bar"></div>
<div id="left6_20" class="bar"></div>
<div id="left6_19" class="bar"></div>
<div id="left6_18" class="bar"></div>
<div id="left6_17" class="bar"></div>
<div id="left6_16" class="bar"></div>
<div id="left6_15" class="bar"></div>
<div id="left6_14" class="bar"></div>
<div id="left6_13" class="bar"></div>
<div id="left6_12" class="bar"></div>
<div id="left6_11" class="bar"></div>
<div id="left6_10" class="bar"></div>
<div id="left6_9" class="bar"></div>
<div id="left6_8" class="bar"></div>
<div id="left6_7" class="bar"></div>
<div id="left6_6" class="bar"></div>
<div id="left6_5" class="bar"></div>
<div id="left6_4" class="bar"></div>
<div id="left6_3" class="bar"></div>
<div id="left6_2" class="bar"></div>
<div id="left6_1" class="bar"></div>
<div id="left6_0" class="bar"></div>
<div id="left6hz" class="hz"></div>
</div><div class="band">
<div id="left7_24" class="bar"></div>
<div id="left7_23" class="bar"></div>
<div id="left7_22" class="bar"></div>
<div id="left7_21" class="bar"></div>
<div id="left7_20" class="bar"></div>
<div id="left7_19" class="bar"></div>
<div id="left7_18" class="bar"></div>
<div id="left7_17" class="bar"></div>
<div id="left7_16" class="bar"></div>
<div id="left7_15" class="bar"></div>
<div id="left7_14" class="bar"></div>
<div id="left7_13" class="bar"></div>
<div id="left7_12" class="bar"></div>
<div id="left7_11" class="bar"></div>
<div id="left7_10" class="bar"></div>
<div id="left7_9" class="bar"></div>
<div id="left7_8" class="bar"></div>
<div id="left7_7" class="bar"></div>
<div id="left7_6" class="bar"></div>
<div id="left7_5" class="bar"></div>
<div id="left7_4" class="bar"></div>
<div id="left7_3" class="bar"></div>
<div id="left7_2" class="bar"></div>
<div id="left7_1" class="bar"></div>
<div id="left7_0" class="bar"></div>
<div id="left7hz" class="hz"></div>
</div><div class="band">
<div id="left8_24" class="bar"></div>
<div id="left8_23" class="bar"></div>
<div id="left8_22" class="bar"></div>
<div id="left8_21" class="bar"></div>
<div id="left8_20" class="bar"></div>
<div id="left8_19" class="bar"></div>
<div id="left8_18" class="bar"></div>
<div id="left8_17" class="bar"></div>
<div id="left8_16" class="bar"></div>
<div id="left8_15" class="bar"></div>
<div id="left8_14" class="bar"></div>
<div id="left8_13" class="bar"></div>
<div id="left8_12" class="bar"></div>
<div id="left8_11" class="bar"></div>
<div id="left8_10" class="bar"></div>
<div id="left8_9" class="bar"></div>
<div id="left8_8" class="bar"></div>
<div id="left8_7" class="bar"></div>
<div id="left8_6" class="bar"></div>
<div id="left8_5" class="bar"></div>
<div id="left8_4" class="bar"></div>
<div id="left8_3" class="bar"></div>
<div id="left8_2" class="bar"></div>
<div id="left8_1" class="bar"></div>
<div id="left8_0" class="bar"></div>
<div id="left8hz" class="hz"></div>
</div><div class="band">
<div id="left9_24" class="bar"></div>
<div id="left9_23" class="bar"></div>
<div id="left9_22" class="bar"></div>
<div id="left9_21" class="bar"></div>
<div id="left9_20" class="bar"></div>
<div id="left9_19" class="bar"></div>
<div id="left9_18" class="bar"></div>
<div id="left9_17" class="bar"></div>
<div id="left9_16" class="bar"></div>
<div id="left9_15" class="bar"></div>
<div id="left9_14" class="bar"></div>
<div id="left9_13" class="bar"></div>
<div id="left9_12" class="bar"></div>
<div id="left9_11" class="bar"></div>
<div id="left9_10" class="bar"></div>
<div id="left9_9" class="bar"></div>
<div id="left9_8" class="bar"></div>
<div id="left9_7" class="bar"></div>
<div id="left9_6" class="bar"></div>
<div id="left9_5" class="bar"></div>
<div id="left9_4" class="bar"></div>
<div id="left9_3" class="bar"></div>
<div id="left9_2" class="bar"></div>
<div id="left9_1" class="bar"></div>
<div id="left9_0" class="bar"></div>
<div id="left9hz" class="hz"></div>
</div><div class="band">
<div id="left10_24" class="bar"></div>
<div id="left10_23" class="bar"></div>
<div id="left10_22" class="bar"></div>
<div id="left10_21" class="bar"></div>
<div id="left10_20" class="bar"></div>
<div id="left10_19" class="bar"></div>
<div id="left10_18" class="bar"></div>
<div id="left10_17" class="bar"></div>
<div id="left10_16" class="bar"></div>
<div id="left10_15" class="bar"></div>
<div id="left10_14" class="bar"></div>
<div id="left10_13" class="bar"></div>
<div id="left10_12" class="bar"></div>
<div id="left10_11" class="bar"></div>
<div id="left10_10" class="bar"></div>
<div id="left10_9" class="bar"></div>
<div id="left10_8" class="bar"></div>
<div id="left10_7" class="bar"></div>
<div id="left10_6" class="bar"></div>
<div id="left10_5" class="bar"></div>
<div id="left10_4" class="bar"></div>
<div id="left10_3" class="bar"></div>
<div id="left10_2" class="bar"></div>
<div id="left10_1" class="bar"></div>
<div id="left10_0" class="bar"></div>
<div id="left10hz" class="hz"></div>
</div><div class="band">
<div id="left11_24" class="bar"></div>
<div id="left11_23" class="bar"></div>
<div id="left11_22" class="bar"></div>
<div id="left11_21" class="bar"></div>
<div id="left11_20" class="bar"></div>
<div id="left11_19" class="bar"></div>
<div id="left11_18" class="bar"></div>
<div id="left11_17" class="bar"></div>
<div id="left11_16" class="bar"></div>
<div id="left11_15" class="bar"></div>
<div id="left11_14" class="bar"></div>
<div id="left11_13" class="bar"></div>
<div id="left11_12" class="bar"></div>
<div id="left11_11" class="bar"></div>
<div id="left11_10" class="bar"></div>
<div id="left11_9" class="bar"></div>
<div id="left11_8" class="bar"></div>
<div id="left11_7" class="bar"></div>
<div id="left11_6" class="bar"></div>
<div id="left11_5" class="bar"></div>
<div id="left11_4" class="bar"></div>
<div id="left11_3" class="bar"></div>
<div id="left11_2" class="bar"></div>
<div id="left11_1" class="bar"></div>
<div id="left11_0" class="bar"></div>
<div id="left11hz" class="hz"></div>
</div><div class="band">
<div id="left12_24" class="bar"></div>
<div id="left12_23" class="bar"></div>
<div id="left12_22" class="bar"></div>
<div id="left12_21" class="bar"></div>
<div id="left12_20" class="bar"></div>
<div id="left12_19" class="bar"></div>
<div id="left12_18" class="bar"></div>
<div id="left12_17" class="bar"></div>
<div id="left12_16" class="bar"></div>
<div id="left12_15" class="bar"></div>
<div id="left12_14" class="bar"></div>
<div id="left12_13" class="bar"></div>
<div id="left12_12" class="bar"></div>
<div id="left12_11" class="bar"></div>
<div id="left12_10" class="bar"></div>
<div id="left12_9" class="bar"></div>
<div id="left12_8" class="bar"></div>
<div id="left12_7" class="bar"></div>
<div id="left12_6" class="bar"></div>
<div id="left12_5" class="bar"></div>
<div id="left12_4" class="bar"></div>
<div id="left12_3" class="bar"></div>
<div id="left12_2" class="bar"></div>
<div id="left12_1" class="bar"></div>
<div id="left12_0" class="bar"></div>
<div id="left12hz" class="hz"></div>
</div><div class="band">
<div id="left13_24" class="bar"></div>
<div id="left13_23" class="bar"></div>
<div id="left13_22" class="bar"></div>
<div id="left13_21" class="bar"></div>
<div id="left13_20" class="bar"></div>
<div id="left13_19" class="bar"></div>
<div id="left13_18" class="bar"></div>
<div id="left13_17" class="bar"></div>
<div id="left13_16" class="bar"></div>
<div id="left13_15" class="bar"></div>
<div id="left13_14" class="bar"></div>
<div id="left13_13" class="bar"></div>
<div id="left13_12" class="bar"></div>
<div id="left13_11" class="bar"></div>
<div id="left13_10" class="bar"></div>
<div id="left13_9" class="bar"></div>
<div id="left13_8" class="bar"></div>
<div id="left13_7" class="bar"></div>
<div id="left13_6" class="bar"></div>
<div id="left13_5" class="bar"></div>
<div id="left13_4" class="bar"></div>
<div id="left13_3" class="bar"></div>
<div id="left13_2" class="bar"></div>
<div id="left13_1" class="bar"></div>
<div id="left13_0" class="bar"></div>
<div id="left13hz" class="hz"></div>
</div><div class="band">
<div id="left14_24" class="bar"></div>
<div id="left14_23" class="bar"></div>
<div id="left14_22" class="bar"></div>
<div id="left14_21" class="bar"></div>
<div id="left14_20" class="bar"></div>
<div id="left14_19" class="bar"></div>
<div id="left14_18" class="bar"></div>
<div id="left14_17" class="bar"></div>
<div id="left14_16" class="bar"></div>
<div id="left14_15" class="bar"></div>
<div id="left14_14" class="bar"></div>
<div id="left14_13" class="bar"></div>
<div id="left14_12" class="bar"></div>
<div id="left14_11" class="bar"></div>
<div id="left14_10" class="bar"></div>
<div id="left14_9" class="bar"></div>
<div id="left14_8" class="bar"></div>
<div id="left14_7" class="bar"></div>
<div id="left14_6" class="bar"></div>
<div id="left14_5" class="bar"></div>
<div id="left14_4" class="bar"></div>
<div id="left14_3" class="bar"></div>
<div id="left14_2" class="bar"></div>
<div id="left14_1" class="bar"></div>
<div id="left14_0" class="bar"></div>
<div id="left14hz" class="hz"></div>
</div><div class="band">
<div id="left15_24" class="bar"></div>
<div id="left15_23" class="bar"></div>
<div id="left15_22" class="bar"></div>
<div id="left15_21" class="bar"></div>
<div id="left15_20" class="bar"></div>
<div id="left15_19" class="bar"></div>
<div id="left15_18" class="bar"></div>
<div id="left15_17" class="bar"></div>
<div id="left15_16" class="bar"></div>
<div id="left15_15" class="bar"></div>
<div id="left15_14" class="bar"></div>
<div id="left15_13" class="bar"></div>
<div id="left15_12" class="bar"></div>
<div id="left15_11" class="bar"></div>
<div id="left15_10" class="bar"></div>
<div id="left15_9" class="bar"></div>
<div id="left15_8" class="bar"></div>
<div id="left15_7" class="bar"></div>
<div id="left15_6" class="bar"></div>
<div id="left15_5" class="bar"></div>
<div id="left15_4" class="bar"></div>
<div id="left15_3" class="bar"></div>
<div id="left15_2" class="bar"></div>
<div id="left15_1" class="bar"></div>
<div id="left15_0" class="bar"></div>
<div id="left15hz" class="hz"></div>
</div><div class="band">
<div id="left16_24" class="bar"></div>
<div id="left16_23" class="bar"></div>
<div id="left16_22" class="bar"></div>
<div id="left16_21" class="bar"></div>
<div id="left16_20" class="bar"></div>
<div id="left16_19" class="bar"></div>
<div id="left16_18" class="bar"></div>
<div id="left16_17" class="bar"></div>
<div id="left16_16" class="bar"></div>
<div id="left16_15" class="bar"></div>
<div id="left16_14" class="bar"></div>
<div id="left16_13" class="bar"></div>
<div id="left16_12" class="bar"></div>
<div id="left16_11" class="bar"></div>
<div id="left16_10" class="bar"></div>
<div id="left16_9" class="bar"></div>
<div id="left16_8" class="bar"></div>
<div id="left16_7" class="bar"></div>
<div id="left16_6" class="bar"></div>
<div id="left16_5" class="bar"></div>
<div id="left16_4" class="bar"></div>
<div id="left16_3" class="bar"></div>
<div id="left16_2" class="bar"></div>
<div id="left16_1" class="bar"></div>
<div id="left16_0" class="bar"></div>
<div id="left16hz" class="hz"></div>
</div><div class="band">
<div id="left17_24" class="bar"></div>
<div id="left17_23" class="bar"></div>
<div id="left17_22" class="bar"></div>
<div id="left17_21" class="bar"></div>
<div id="left17_20" class="bar"></div>
<div id="left17_19" class="bar"></div>
<div id="left17_18" class="bar"></div>
<div id="left17_17" class="bar"></div>
<div id="left17_16" class="bar"></div>
<div id="left17_15" class="bar"></div>
<div id="left17_14" class="bar"></div>
<div id="left17_13" class="bar"></div>
<div id="left17_12" class="bar"></div>
<div id="left17_11" class="bar"></div>
<div id="left17_10" class="bar"></div>
<div id="left17_9" class="bar"></div>
<div id="left17_8" class="bar"></div>
<div id="left17_7" class="bar"></div>
<div id="left17_6" class="bar"></div>
<div id="left17_5" class="bar"></div>
<div id="left17_4" class="bar"></div>
<div id="left17_3" class="bar"></div>
<div id="left17_2" class="bar"></div>
<div id="left17_1" class="bar"></div>
<div id="left17_0" class="bar"></div>
<div id="left17hz" class="hz"></div>
</div><div class="band">
<div id="left18_24" class="bar"></div>
<div id="left18_23" class="bar"></div>
<div id="left18_22" class="bar"></div>
<div id="left18_21" class="bar"></div>
<div id="left18_20" class="bar"></div>
<div id="left18_19" class="bar"></div>
<div id="left18_18" class="bar"></div>
<div id="left18_17" class="bar"></div>
<div id="left18_16" class="bar"></div>
<div id="left18_15" class="bar"></div>
<div id="left18_14" class="bar"></div>
<div id="left18_13" class="bar"></div>
<div id="left18_12" class="bar"></div>
<div id="left18_11" class="bar"></div>
<div id="left18_10" class="bar"></div>
<div id="left18_9" class="bar"></div>
<div id="left18_8" class="bar"></div>
<div id="left18_7" class="bar"></div>
<div id="left18_6" class="bar"></div>
<div id="left18_5" class="bar"></div>
<div id="left18_4" class="bar"></div>
<div id="left18_3" class="bar"></div>
<div id="left18_2" class="bar"></div>
<div id="left18_1" class="bar"></div>
<div id="left18_0" class="bar"></div>
<div id="left18hz" class="hz"></div>
</div><div class="band">
<div id="left19_24" class="bar"></div>
<div id="left19_23" class="bar"></div>
<div id="left19_22" class="bar"></div>
<div id="left19_21" class="bar"></div>
<div id="left19_20" class="bar"></div>
<div id="left19_19" class="bar"></div>
<div id="left19_18" class="bar"></div>
<div id="left19_17" class="bar"></div>
<div id="left19_16" class="bar"></div>
<div id="left19_15" class="bar"></div>
<div id="left19_14" class="bar"></div>
<div id="left19_13" class="bar"></div>
<div id="left19_12" class="bar"></div>
<div id="left19_11" class="bar"></div>
<div id="left19_10" class="bar"></div>
<div id="left19_9" class="bar"></div>
<div id="left19_8" class="bar"></div>
<div id="left19_7" class="bar"></div>
<div id="left19_6" class="bar"></div>
<div id="left19_5" class="bar"></div>
<div id="left19_4" class="bar"></div>
<div id="left19_3" class="bar"></div>
<div id="left19_2" class="bar"></div>
<div id="left19_1" class="bar"></div>
<div id="left19_0" class="bar"></div>
<div id="left19hz" class="hz"></div>
</div><div class="band">
<div id="left20_24" class="bar"></div>
<div id="left20_23" class="bar"></div>
<div id="left20_22" class="bar"></div>
<div id="left20_21" class="bar"></div>
<div id="left20_20" class="bar"></div>
<div id="left20_19" class="bar"></div>
<div id="left20_18" class="bar"></div>
<div id="left20_17" class="bar"></div>
<div id="left20_16" class="bar"></div>
<div id="left20_15" class="bar"></div>
<div id="left20_14" class="bar"></div>
<div id="left20_13" class="bar"></div>
<div id="left20_12" class="bar"></div>
<div id="left20_11" class="bar"></div>
<div id="left20_10" class="bar"></div>
<div id="left20_9" class="bar"></div>
<div id="left20_8" class="bar"></div>
<div id="left20_7" class="bar"></div>
<div id="left20_6" class="bar"></div>
<div id="left20_5" class="bar"></div>
<div id="left20_4" class="bar"></div>
<div id="left20_3" class="bar"></div>
<div id="left20_2" class="bar"></div>
<div id="left20_1" class="bar"></div>
<div id="left20_0" class="bar"></div>
<div id="left20hz" class="hz"></div>
</div><div class="band">
<div id="left21_24" class="bar"></div>
<div id="left21_23" class="bar"></div>
<div id="left21_22" class="bar"></div>
<div id="left21_21" class="bar"></div>
<div id="left21_20" class="bar"></div>
<div id="left21_19" class="bar"></div>
<div id="left21_18" class="bar"></div>
<div id="left21_17" class="bar"></div>
<div id="left21_16" class="bar"></div>
<div id="left21_15" class="bar"></div>
<div id="left21_14" class="bar"></div>
<div id="left21_13" class="bar"></div>
<div id="left21_12" class="bar"></div>
<div id="left21_11" class="bar"></div>
<div id="left21_10" class="bar"></div>
<div id="left21_9" class="bar"></div>
<div id="left21_8" class="bar"></div>
<div id="left21_7" class="bar"></div>
<div id="left21_6" class="bar"></div>
<div id="left21_5" class="bar"></div>
<div id="left21_4" class="bar"></div>
<div id="left21_3" class="bar"></div>
<div id="left21_2" class="bar"></div>
<div id="left21_1" class="bar"></div>
<div id="left21_0" class="bar"></div>
<div id="left21hz" class="hz"></div>
</div><div class="band">
<div id="left22_24" class="bar"></div>
<div id="left22_23" class="bar"></div>
<div id="left22_22" class="bar"></div>
<div id="left22_21" class="bar"></div>
<div id="left22_20" class="bar"></div>
<div id="left22_19" class="bar"></div>
<div id="left22_18" class="bar"></div>
<div id="left22_17" class="bar"></div>
<div id="left22_16" class="bar"></div>
<div id="left22_15" class="bar"></div>
<div id="left22_14" class="bar"></div>
<div id="left22_13" class="bar"></div>
<div id="left22_12" class="bar"></div>
<div id="left22_11" class="bar"></div>
<div id="left22_10" class="bar"></div>
<div id="left22_9" class="bar"></div>
<div id="left22_8" class="bar"></div>
<div id="left22_7" class="bar"></div>
<div id="left22_6" class="bar"></div>
<div id="left22_5" class="bar"></div>
<div id="left22_4" class="bar"></div>
<div id="left22_3" class="bar"></div>
<div id="left22_2" class="bar"></div>
<div id="left22_1" class="bar"></div>
<div id="left22_0" class="bar"></div>
<div id="left22hz" class="hz"></div>
</div><div class="band">
<div id="left23_24" class="bar"></div>
<div id="left23_23" class="bar"></div>
<div id="left23_22" class="bar"></div>
<div id="left23_21" class="bar"></div>
<div id="left23_20" class="bar"></div>
<div id="left23_19" class="bar"></div>
<div id="left23_18" class="bar"></div>
<div id="left23_17" class="bar"></div>
<div id="left23_16" class="bar"></div>
<div id="left23_15" class="bar"></div>
<div id="left23_14" class="bar"></div>
<div id="left23_13" class="bar"></div>
<div id="left23_12" class="bar"></div>
<div id="left23_11" class="bar"></div>
<div id="left23_10" class="bar"></div>
<div id="left23_9" class="bar"></div>
<div id="left23_8" class="bar"></div>
<div id="left23_7" class="bar"></div>
<div id="left23_6" class="bar"></div>
<div id="left23_5" class="bar"></div>
<div id="left23_4" class="bar"></div>
<div id="left23_3" class="bar"></div>
<div id="left23_2" class="bar"></div>
<div id="left23_1" class="bar"></div>
<div id="left23_0" class="bar"></div>
<div id="left23hz" class="hz"></div>
</div><div class="band">
<div id="left24_24" class="bar"></div>
<div id="left24_23" class="bar"></div>
<div id="left24_22" class="bar"></div>
<div id="left24_21" class="bar"></div>
<div id="left24_20" class="bar"></div>
<div id="left24_19" class="bar"></div>
<div id="left24_18" class="bar"></div>
<div id="left24_17" class="bar"></div>
<div id="left24_16" class="bar"></div>
<div id="left24_15" class="bar"></div>
<div id="left24_14" class="bar"></div>
<div id="left24_13" class="bar"></div>
<div id="left24_12" class="bar"></div>
<div id="left24_11" class="bar"></div>
<div id="left24_10" class="bar"></div>
<div id="left24_9" class="bar"></div>
<div id="left24_8" class="bar"></div>
<div id="left24_7" class="bar"></div>
<div id="left24_6" class="bar"></div>
<div id="left24_5" class="bar"></div>
<div id="left24_4" class="bar"></div>
<div id="left24_3" class="bar"></div>
<div id="left24_2" class="bar"></div>
<div id="left24_1" class="bar"></div>
<div id="left24_0" class="bar"></div>
<div id="left24hz" class="hz"></div>
</div><div class="band">
<div id="left25_24" class="bar"></div>
<div id="left25_23" class="bar"></div>
<div id="left25_22" class="bar"></div>
<div id="left25_21" class="bar"></div>
<div id="left25_20" class="bar"></div>
<div id="left25_19" class="bar"></div>
<div id="left25_18" class="bar"></div>
<div id="left25_17" class="bar"></div>
<div id="left25_16" class="bar"></div>
<div id="left25_15" class="bar"></div>
<div id="left25_14" class="bar"></div>
<div id="left25_13" class="bar"></div>
<div id="left25_12" class="bar"></div>
<div id="left25_11" class="bar"></div>
<div id="left25_10" class="bar"></div>
<div id="left25_9" class="bar"></div>
<div id="left25_8" class="bar"></div>
<div id="left25_7" class="bar"></div>
<div id="left25_6" class="bar"></div>
<div id="left25_5" class="bar"></div>
<div id="left25_4" class="bar"></div>
<div id="left25_3" class="bar"></div>
<div id="left25_2" class="bar"></div>
<div id="left25_1" class="bar"></div>
<div id="left25_0" class="bar"></div>
<div id="left25hz" class="hz"></div>
</div><div class="band">
<div id="left26_24" class="bar"></div>
<div id="left26_23" class="bar"></div>
<div id="left26_22" class="bar"></div>
<div id="left26_21" class="bar"></div>
<div id="left26_20" class="bar"></div>
<div id="left26_19" class="bar"></div>
<div id="left26_18" class="bar"></div>
<div id="left26_17" class="bar"></div>
<div id="left26_16" class="bar"></div>
<div id="left26_15" class="bar"></div>
<div id="left26_14" class="bar"></div>
<div id="left26_13" class="bar"></div>
<div id="left26_12" class="bar"></div>
<div id="left26_11" class="bar"></div>
<div id="left26_10" class="bar"></div>
<div id="left26_9" class="bar"></div>
<div id="left26_8" class="bar"></div>
<div id="left26_7" class="bar"></div>
<div id="left26_6" class="bar"></div>
<div id="left26_5" class="bar"></div>
<div id="left26_4" class="bar"></div>
<div id="left26_3" class="bar"></div>
<div id="left26_2" class="bar"></div>
<div id="left26_1" class="bar"></div>
<div id="left26_0" class="bar"></div>
<div id="left26hz" class="hz"></div>
</div>
<div class="status">
<span id="mono">Mono</span>
<span id="stereo">Stereo</span>
</div>
</div><div class="channel" style="float:right">
<div class="band">
<div id="right0_24" class="bar"></div>
<div id="right0_23" class="bar"></div>
<div id="right0_22" class="bar"></div>
<div id="right0_21" class="bar"></div>
<div id="right0_20" class="bar"></div>
<div id="right0_19" class="bar"></div>
<div id="right0_18" class="bar"></div>
<div id="right0_17" class="bar"></div>
<div id="right0_16" class="bar"></div>
<div id="right0_15" class="bar"></div>
<div id="right0_14" class="bar"></div>
<div id="right0_13" class="bar"></div>
<div id="right0_12" class="bar"></div>
<div id="right0_11" class="bar"></div>
<div id="right0_10" class="bar"></div>
<div id="right0_9" class="bar"></div>
<div id="right0_8" class="bar"></div>
<div id="right0_7" class="bar"></div>
<div id="right0_6" class="bar"></div>
<div id="right0_5" class="bar"></div>
<div id="right0_4" class="bar"></div>
<div id="right0_3" class="bar"></div>
<div id="right0_2" class="bar"></div>
<div id="right0_1" class="bar"></div>
<div id="right0_0" class="bar"></div>
<div id="right0hz" class="hz"></div>
</div><div class="band">
<div id="right1_24" class="bar"></div>
<div id="right1_23" class="bar"></div>
<div id="right1_22" class="bar"></div>
<div id="right1_21" class="bar"></div>
<div id="right1_20" class="bar"></div>
<div id="right1_19" class="bar"></div>
<div id="right1_18" class="bar"></div>
<div id="right1_17" class="bar"></div>
<div id="right1_16" class="bar"></div>
<div id="right1_15" class="bar"></div>
<div id="right1_14" class="bar"></div>
<div id="right1_13" class="bar"></div>
<div id="right1_12" class="bar"></div>
<div id="right1_11" class="bar"></div>
<div id="right1_10" class="bar"></div>
<div id="right1_9" class="bar"></div>
<div id="right1_8" class="bar"></div>
<div id="right1_7" class="bar"></div>
<div id="right1_6" class="bar"></div>
<div id="right1_5" class="bar"></div>
<div id="right1_4" class="bar"></div>
<div id="right1_3" class="bar"></div>
<div id="right1_2" class="bar"></div>
<div id="right1_1" class="bar"></div>
<div id="right1_0" class="bar"></div>
<div id="right1hz" class="hz"></div>
</div><div class="band">
<div id="right2_24" class="bar"></div>
<div id="right2_23" class="bar"></div>
<div id="right2_22" class="bar"></div>
<div id="right2_21" class="bar"></div>
<div id="right2_20" class="bar"></div>
<div id="right2_19" class="bar"></div>
<div id="right2_18" class="bar"></div>
<div id="right2_17" class="bar"></div>
<div id="right2_16" class="bar"></div>
<div id="right2_15" class="bar"></div>
<div id="right2_14" class="bar"></div>
<div id="right2_13" class="bar"></div>
<div id="right2_12" class="bar"></div>
<div id="right2_11" class="bar"></div>
<div id="right2_10" class="bar"></div>
<div id="right2_9" class="bar"></div>
<div id="right2_8" class="bar"></div>
<div id="right2_7" class="bar"></div>
<div id="right2_6" class="bar"></div>
<div id="right2_5" class="bar"></div>
<div id="right2_4" class="bar"></div>
<div id="right2_3" class="bar"></div>
<div id="right2_2" class="bar"></div>
<div id="right2_1" class="bar"></div>
<div id="right2_0" class="bar"></div>
<div id="right2hz" class="hz"></div>
</div><div class="band">
<div id="right3_24" class="bar"></div>
<div id="right3_23" class="bar"></div>
<div id="right3_22" class="bar"></div>
<div id="right3_21" class="bar"></div>
<div id="right3_20" class="bar"></div>
<div id="right3_19" class="bar"></div>
<div id="right3_18" class="bar"></div>
<div id="right3_17" class="bar"></div>
<div id="right3_16" class="bar"></div>
<div id="right3_15" class="bar"></div>
<div id="right3_14" class="bar"></div>
<div id="right3_13" class="bar"></div>
<div id="right3_12" class="bar"></div>
<div id="right3_11" class="bar"></div>
<div id="right3_10" class="bar"></div>
<div id="right3_9" class="bar"></div>
<div id="right3_8" class="bar"></div>
<div id="right3_7" class="bar"></div>
<div id="right3_6" class="bar"></div>
<div id="right3_5" class="bar"></div>
<div id="right3_4" class="bar"></div>
<div id="right3_3" class="bar"></div>
<div id="right3_2" class="bar"></div>
<div id="right3_1" class="bar"></div>
<div id="right3_0" class="bar"></div>
<div id="right3hz" class="hz"></div>
</div><div class="band">
<div id="right4_24" class="bar"></div>
<div id="right4_23" class="bar"></div>
<div id="right4_22" class="bar"></div>
<div id="right4_21" class="bar"></div>
<div id="right4_20" class="bar"></div>
<div id="right4_19" class="bar"></div>
<div id="right4_18" class="bar"></div>
<div id="right4_17" class="bar"></div>
<div id="right4_16" class="bar"></div>
<div id="right4_15" class="bar"></div>
<div id="right4_14" class="bar"></div>
<div id="right4_13" class="bar"></div>
<div id="right4_12" class="bar"></div>
<div id="right4_11" class="bar"></div>
<div id="right4_10" class="bar"></div>
<div id="right4_9" class="bar"></div>
<div id="right4_8" class="bar"></div>
<div id="right4_7" class="bar"></div>
<div id="right4_6" class="bar"></div>
<div id="right4_5" class="bar"></div>
<div id="right4_4" class="bar"></div>
<div id="right4_3" class="bar"></div>
<div id="right4_2" class="bar"></div>
<div id="right4_1" class="bar"></div>
<div id="right4_0" class="bar"></div>
<div id="right4hz" class="hz"></div>
</div><div class="band">
<div id="right5_24" class="bar"></div>
<div id="right5_23" class="bar"></div>
<div id="right5_22" class="bar"></div>
<div id="right5_21" class="bar"></div>
<div id="right5_20" class="bar"></div>
<div id="right5_19" class="bar"></div>
<div id="right5_18" class="bar"></div>
<div id="right5_17" class="bar"></div>
<div id="right5_16" class="bar"></div>
<div id="right5_15" class="bar"></div>
<div id="right5_14" class="bar"></div>
<div id="right5_13" class="bar"></div>
<div id="right5_12" class="bar"></div>
<div id="right5_11" class="bar"></div>
<div id="right5_10" class="bar"></div>
<div id="right5_9" class="bar"></div>
<div id="right5_8" class="bar"></div>
<div id="right5_7" class="bar"></div>
<div id="right5_6" class="bar"></div>
<div id="right5_5" class="bar"></div>
<div id="right5_4" class="bar"></div>
<div id="right5_3" class="bar"></div>
<div id="right5_2" class="bar"></div>
<div id="right5_1" class="bar"></div>
<div id="right5_0" class="bar"></div>
<div id="right5hz" class="hz"></div>
</div><div class="band">
<div id="right6_24" class="bar"></div>
<div id="right6_23" class="bar"></div>
<div id="right6_22" class="bar"></div>
<div id="right6_21" class="bar"></div>
<div id="right6_20" class="bar"></div>
<div id="right6_19" class="bar"></div>
<div id="right6_18" class="bar"></div>
<div id="right6_17" class="bar"></div>
<div id="right6_16" class="bar"></div>
<div id="right6_15" class="bar"></div>
<div id="right6_14" class="bar"></div>
<div id="right6_13" class="bar"></div>
<div id="right6_12" class="bar"></div>
<div id="right6_11" class="bar"></div>
<div id="right6_10" class="bar"></div>
<div id="right6_9" class="bar"></div>
<div id="right6_8" class="bar"></div>
<div id="right6_7" class="bar"></div>
<div id="right6_6" class="bar"></div>
<div id="right6_5" class="bar"></div>
<div id="right6_4" class="bar"></div>
<div id="right6_3" class="bar"></div>
<div id="right6_2" class="bar"></div>
<div id="right6_1" class="bar"></div>
<div id="right6_0" class="bar"></div>
<div id="right6hz" class="hz"></div>
</div><div class="band">
<div id="right7_24" class="bar"></div>
<div id="right7_23" class="bar"></div>
<div id="right7_22" class="bar"></div>
<div id="right7_21" class="bar"></div>
<div id="right7_20" class="bar"></div>
<div id="right7_19" class="bar"></div>
<div id="right7_18" class="bar"></div>
<div id="right7_17" class="bar"></div>
<div id="right7_16" class="bar"></div>
<div id="right7_15" class="bar"></div>
<div id="right7_14" class="bar"></div>
<div id="right7_13" class="bar"></div>
<div id="right7_12" class="bar"></div>
<div id="right7_11" class="bar"></div>
<div id="right7_10" class="bar"></div>
<div id="right7_9" class="bar"></div>
<div id="right7_8" class="bar"></div>
<div id="right7_7" class="bar"></div>
<div id="right7_6" class="bar"></div>
<div id="right7_5" class="bar"></div>
<div id="right7_4" class="bar"></div>
<div id="right7_3" class="bar"></div>
<div id="right7_2" class="bar"></div>
<div id="right7_1" class="bar"></div>
<div id="right7_0" class="bar"></div>
<div id="right7hz" class="hz"></div>
</div><div class="band">
<div id="right8_24" class="bar"></div>
<div id="right8_23" class="bar"></div>
<div id="right8_22" class="bar"></div>
<div id="right8_21" class="bar"></div>
<div id="right8_20" class="bar"></div>
<div id="right8_19" class="bar"></div>
<div id="right8_18" class="bar"></div>
<div id="right8_17" class="bar"></div>
<div id="right8_16" class="bar"></div>
<div id="right8_15" class="bar"></div>
<div id="right8_14" class="bar"></div>
<div id="right8_13" class="bar"></div>
<div id="right8_12" class="bar"></div>
<div id="right8_11" class="bar"></div>
<div id="right8_10" class="bar"></div>
<div id="right8_9" class="bar"></div>
<div id="right8_8" class="bar"></div>
<div id="right8_7" class="bar"></div>
<div id="right8_6" class="bar"></div>
<div id="right8_5" class="bar"></div>
<div id="right8_4" class="bar"></div>
<div id="right8_3" class="bar"></div>
<div id="right8_2" class="bar"></div>
<div id="right8_1" class="bar"></div>
<div id="right8_0" class="bar"></div>
<div id="right8hz" class="hz"></div>
</div><div class="band">
<div id="right9_24" class="bar"></div>
<div id="right9_23" class="bar"></div>
<div id="right9_22" class="bar"></div>
<div id="right9_21" class="bar"></div>
<div id="right9_20" class="bar"></div>
<div id="right9_19" class="bar"></div>
<div id="right9_18" class="bar"></div>
<div id="right9_17" class="bar"></div>
<div id="right9_16" class="bar"></div>
<div id="right9_15" class="bar"></div>
<div id="right9_14" class="bar"></div>
<div id="right9_13" class="bar"></div>
<div id="right9_12" class="bar"></div>
<div id="right9_11" class="bar"></div>
<div id="right9_10" class="bar"></div>
<div id="right9_9" class="bar"></div>
<div id="right9_8" class="bar"></div>
<div id="right9_7" class="bar"></div>
<div id="right9_6" class="bar"></div>
<div id="right9_5" class="bar"></div>
<div id="right9_4" class="bar"></div>
<div id="right9_3" class="bar"></div>
<div id="right9_2" class="bar"></div>
<div id="right9_1" class="bar"></div>
<div id="right9_0" class="bar"></div>
<div id="right9hz" class="hz"></div>
</div><div class="band">
<div id="right10_24" class="bar"></div>
<div id="right10_23" class="bar"></div>
<div id="right10_22" class="bar"></div>
<div id="right10_21" class="bar"></div>
<div id="right10_20" class="bar"></div>
<div id="right10_19" class="bar"></div>
<div id="right10_18" class="bar"></div>
<div id="right10_17" class="bar"></div>
<div id="right10_16" class="bar"></div>
<div id="right10_15" class="bar"></div>
<div id="right10_14" class="bar"></div>
<div id="right10_13" class="bar"></div>
<div id="right10_12" class="bar"></div>
<div id="right10_11" class="bar"></div>
<div id="right10_10" class="bar"></div>
<div id="right10_9" class="bar"></div>
<div id="right10_8" class="bar"></div>
<div id="right10_7" class="bar"></div>
<div id="right10_6" class="bar"></div>
<div id="right10_5" class="bar"></div>
<div id="right10_4" class="bar"></div>
<div id="right10_3" class="bar"></div>
<div id="right10_2" class="bar"></div>
<div id="right10_1" class="bar"></div>
<div id="right10_0" class="bar"></div>
<div id="right10hz" class="hz"></div>
</div><div class="band">
<div id="right11_24" class="bar"></div>
<div id="right11_23" class="bar"></div>
<div id="right11_22" class="bar"></div>
<div id="right11_21" class="bar"></div>
<div id="right11_20" class="bar"></div>
<div id="right11_19" class="bar"></div>
<div id="right11_18" class="bar"></div>
<div id="right11_17" class="bar"></div>
<div id="right11_16" class="bar"></div>
<div id="right11_15" class="bar"></div>
<div id="right11_14" class="bar"></div>
<div id="right11_13" class="bar"></div>
<div id="right11_12" class="bar"></div>
<div id="right11_11" class="bar"></div>
<div id="right11_10" class="bar"></div>
<div id="right11_9" class="bar"></div>
<div id="right11_8" class="bar"></div>
<div id="right11_7" class="bar"></div>
<div id="right11_6" class="bar"></div>
<div id="right11_5" class="bar"></div>
<div id="right11_4" class="bar"></div>
<div id="right11_3" class="bar"></div>
<div id="right11_2" class="bar"></div>
<div id="right11_1" class="bar"></div>
<div id="right11_0" class="bar"></div>
<div id="right11hz" class="hz"></div>
</div><div class="band">
<div id="right12_24" class="bar"></div>
<div id="right12_23" class="bar"></div>
<div id="right12_22" class="bar"></div>
<div id="right12_21" class="bar"></div>
<div id="right12_20" class="bar"></div>
<div id="right12_19" class="bar"></div>
<div id="right12_18" class="bar"></div>
<div id="right12_17" class="bar"></div>
<div id="right12_16" class="bar"></div>
<div id="right12_15" class="bar"></div>
<div id="right12_14" class="bar"></div>
<div id="right12_13" class="bar"></div>
<div id="right12_12" class="bar"></div>
<div id="right12_11" class="bar"></div>
<div id="right12_10" class="bar"></div>
<div id="right12_9" class="bar"></div>
<div id="right12_8" class="bar"></div>
<div id="right12_7" class="bar"></div>
<div id="right12_6" class="bar"></div>
<div id="right12_5" class="bar"></div>
<div id="right12_4" class="bar"></div>
<div id="right12_3" class="bar"></div>
<div id="right12_2" class="bar"></div>
<div id="right12_1" class="bar"></div>
<div id="right12_0" class="bar"></div>
<div id="right12hz" class="hz"></div>
</div><div class="band">
<div id="right13_24" class="bar"></div>
<div id="right13_23" class="bar"></div>
<div id="right13_22" class="bar"></div>
<div id="right13_21" class="bar"></div>
<div id="right13_20" class="bar"></div>
<div id="right13_19" class="bar"></div>
<div id="right13_18" class="bar"></div>
<div id="right13_17" class="bar"></div>
<div id="right13_16" class="bar"></div>
<div id="right13_15" class="bar"></div>
<div id="right13_14" class="bar"></div>
<div id="right13_13" class="bar"></div>
<div id="right13_12" class="bar"></div>
<div id="right13_11" class="bar"></div>
<div id="right13_10" class="bar"></div>
<div id="right13_9" class="bar"></div>
<div id="right13_8" class="bar"></div>
<div id="right13_7" class="bar"></div>
<div id="right13_6" class="bar"></div>
<div id="right13_5" class="bar"></div>
<div id="right13_4" class="bar"></div>
<div id="right13_3" class="bar"></div>
<div id="right13_2" class="bar"></div>
<div id="right13_1" class="bar"></div>
<div id="right13_0" class="bar"></div>
<div id="right13hz" class="hz"></div>
</div><div class="band">
<div id="right14_24" class="bar"></div>
<div id="right14_23" class="bar"></div>
<div id="right14_22" class="bar"></div>
<div id="right14_21" class="bar"></div>
<div id="right14_20" class="bar"></div>
<div id="right14_19" class="bar"></div>
<div id="right14_18" class="bar"></div>
<div id="right14_17" class="bar"></div>
<div id="right14_16" class="bar"></div>
<div id="right14_15" class="bar"></div>
<div id="right14_14" class="bar"></div>
<div id="right14_13" class="bar"></div>
<div id="right14_12" class="bar"></div>
<div id="right14_11" class="bar"></div>
<div id="right14_10" class="bar"></div>
<div id="right14_9" class="bar"></div>
<div id="right14_8" class="bar"></div>
<div id="right14_7" class="bar"></div>
<div id="right14_6" class="bar"></div>
<div id="right14_5" class="bar"></div>
<div id="right14_4" class="bar"></div>
<div id="right14_3" class="bar"></div>
<div id="right14_2" class="bar"></div>
<div id="right14_1" class="bar"></div>
<div id="right14_0" class="bar"></div>
<div id="right14hz" class="hz"></div>
</div><div class="band">
<div id="right15_24" class="bar"></div>
<div id="right15_23" class="bar"></div>
<div id="right15_22" class="bar"></div>
<div id="right15_21" class="bar"></div>
<div id="right15_20" class="bar"></div>
<div id="right15_19" class="bar"></div>
<div id="right15_18" class="bar"></div>
<div id="right15_17" class="bar"></div>
<div id="right15_16" class="bar"></div>
<div id="right15_15" class="bar"></div>
<div id="right15_14" class="bar"></div>
<div id="right15_13" class="bar"></div>
<div id="right15_12" class="bar"></div>
<div id="right15_11" class="bar"></div>
<div id="right15_10" class="bar"></div>
<div id="right15_9" class="bar"></div>
<div id="right15_8" class="bar"></div>
<div id="right15_7" class="bar"></div>
<div id="right15_6" class="bar"></div>
<div id="right15_5" class="bar"></div>
<div id="right15_4" class="bar"></div>
<div id="right15_3" class="bar"></div>
<div id="right15_2" class="bar"></div>
<div id="right15_1" class="bar"></div>
<div id="right15_0" class="bar"></div>
<div id="right15hz" class="hz"></div>
</div><div class="band">
<div id="right16_24" class="bar"></div>
<div id="right16_23" class="bar"></div>
<div id="right16_22" class="bar"></div>
<div id="right16_21" class="bar"></div>
<div id="right16_20" class="bar"></div>
<div id="right16_19" class="bar"></div>
<div id="right16_18" class="bar"></div>
<div id="right16_17" class="bar"></div>
<div id="right16_16" class="bar"></div>
<div id="right16_15" class="bar"></div>
<div id="right16_14" class="bar"></div>
<div id="right16_13" class="bar"></div>
<div id="right16_12" class="bar"></div>
<div id="right16_11" class="bar"></div>
<div id="right16_10" class="bar"></div>
<div id="right16_9" class="bar"></div>
<div id="right16_8" class="bar"></div>
<div id="right16_7" class="bar"></div>
<div id="right16_6" class="bar"></div>
<div id="right16_5" class="bar"></div>
<div id="right16_4" class="bar"></div>
<div id="right16_3" class="bar"></div>
<div id="right16_2" class="bar"></div>
<div id="right16_1" class="bar"></div>
<div id="right16_0" class="bar"></div>
<div id="right16hz" class="hz"></div>
</div><div class="band">
<div id="right17_24" class="bar"></div>
<div id="right17_23" class="bar"></div>
<div id="right17_22" class="bar"></div>
<div id="right17_21" class="bar"></div>
<div id="right17_20" class="bar"></div>
<div id="right17_19" class="bar"></div>
<div id="right17_18" class="bar"></div>
<div id="right17_17" class="bar"></div>
<div id="right17_16" class="bar"></div>
<div id="right17_15" class="bar"></div>
<div id="right17_14" class="bar"></div>
<div id="right17_13" class="bar"></div>
<div id="right17_12" class="bar"></div>
<div id="right17_11" class="bar"></div>
<div id="right17_10" class="bar"></div>
<div id="right17_9" class="bar"></div>
<div id="right17_8" class="bar"></div>
<div id="right17_7" class="bar"></div>
<div id="right17_6" class="bar"></div>
<div id="right17_5" class="bar"></div>
<div id="right17_4" class="bar"></div>
<div id="right17_3" class="bar"></div>
<div id="right17_2" class="bar"></div>
<div id="right17_1" class="bar"></div>
<div id="right17_0" class="bar"></div>
<div id="right17hz" class="hz"></div>
</div><div class="band">
<div id="right18_24" class="bar"></div>
<div id="right18_23" class="bar"></div>
<div id="right18_22" class="bar"></div>
<div id="right18_21" class="bar"></div>
<div id="right18_20" class="bar"></div>
<div id="right18_19" class="bar"></div>
<div id="right18_18" class="bar"></div>
<div id="right18_17" class="bar"></div>
<div id="right18_16" class="bar"></div>
<div id="right18_15" class="bar"></div>
<div id="right18_14" class="bar"></div>
<div id="right18_13" class="bar"></div>
<div id="right18_12" class="bar"></div>
<div id="right18_11" class="bar"></div>
<div id="right18_10" class="bar"></div>
<div id="right18_9" class="bar"></div>
<div id="right18_8" class="bar"></div>
<div id="right18_7" class="bar"></div>
<div id="right18_6" class="bar"></div>
<div id="right18_5" class="bar"></div>
<div id="right18_4" class="bar"></div>
<div id="right18_3" class="bar"></div>
<div id="right18_2" class="bar"></div>
<div id="right18_1" class="bar"></div>
<div id="right18_0" class="bar"></div>
<div id="right18hz" class="hz"></div>
</div><div class="band">
<div id="right19_24" class="bar"></div>
<div id="right19_23" class="bar"></div>
<div id="right19_22" class="bar"></div>
<div id="right19_21" class="bar"></div>
<div id="right19_20" class="bar"></div>
<div id="right19_19" class="bar"></div>
<div id="right19_18" class="bar"></div>
<div id="right19_17" class="bar"></div>
<div id="right19_16" class="bar"></div>
<div id="right19_15" class="bar"></div>
<div id="right19_14" class="bar"></div>
<div id="right19_13" class="bar"></div>
<div id="right19_12" class="bar"></div>
<div id="right19_11" class="bar"></div>
<div id="right19_10" class="bar"></div>
<div id="right19_9" class="bar"></div>
<div id="right19_8" class="bar"></div>
<div id="right19_7" class="bar"></div>
<div id="right19_6" class="bar"></div>
<div id="right19_5" class="bar"></div>
<div id="right19_4" class="bar"></div>
<div id="right19_3" class="bar"></div>
<div id="right19_2" class="bar"></div>
<div id="right19_1" class="bar"></div>
<div id="right19_0" class="bar"></div>
<div id="right19hz" class="hz"></div>
</div><div class="band">
<div id="right20_24" class="bar"></div>
<div id="right20_23" class="bar"></div>
<div id="right20_22" class="bar"></div>
<div id="right20_21" class="bar"></div>
<div id="right20_20" class="bar"></div>
<div id="right20_19" class="bar"></div>
<div id="right20_18" class="bar"></div>
<div id="right20_17" class="bar"></div>
<div id="right20_16" class="bar"></div>
<div id="right20_15" class="bar"></div>
<div id="right20_14" class="bar"></div>
<div id="right20_13" class="bar"></div>
<div id="right20_12" class="bar"></div>
<div id="right20_11" class="bar"></div>
<div id="right20_10" class="bar"></div>
<div id="right20_9" class="bar"></div>
<div id="right20_8" class="bar"></div>
<div id="right20_7" class="bar"></div>
<div id="right20_6" class="bar"></div>
<div id="right20_5" class="bar"></div>
<div id="right20_4" class="bar"></div>
<div id="right20_3" class="bar"></div>
<div id="right20_2" class="bar"></div>
<div id="right20_1" class="bar"></div>
<div id="right20_0" class="bar"></div>
<div id="right20hz" class="hz"></div>
</div><div class="band">
<div id="right21_24" class="bar"></div>
<div id="right21_23" class="bar"></div>
<div id="right21_22" class="bar"></div>
<div id="right21_21" class="bar"></div>
<div id="right21_20" class="bar"></div>
<div id="right21_19" class="bar"></div>
<div id="right21_18" class="bar"></div>
<div id="right21_17" class="bar"></div>
<div id="right21_16" class="bar"></div>
<div id="right21_15" class="bar"></div>
<div id="right21_14" class="bar"></div>
<div id="right21_13" class="bar"></div>
<div id="right21_12" class="bar"></div>
<div id="right21_11" class="bar"></div>
<div id="right21_10" class="bar"></div>
<div id="right21_9" class="bar"></div>
<div id="right21_8" class="bar"></div>
<div id="right21_7" class="bar"></div>
<div id="right21_6" class="bar"></div>
<div id="right21_5" class="bar"></div>
<div id="right21_4" class="bar"></div>
<div id="right21_3" class="bar"></div>
<div id="right21_2" class="bar"></div>
<div id="right21_1" class="bar"></div>
<div id="right21_0" class="bar"></div>
<div id="right21hz" class="hz"></div>
</div><div class="band">
<div id="right22_24" class="bar"></div>
<div id="right22_23" class="bar"></div>
<div id="right22_22" class="bar"></div>
<div id="right22_21" class="bar"></div>
<div id="right22_20" class="bar"></div>
<div id="right22_19" class="bar"></div>
<div id="right22_18" class="bar"></div>
<div id="right22_17" class="bar"></div>
<div id="right22_16" class="bar"></div>
<div id="right22_15" class="bar"></div>
<div id="right22_14" class="bar"></div>
<div id="right22_13" class="bar"></div>
<div id="right22_12" class="bar"></div>
<div id="right22_11" class="bar"></div>
<div id="right22_10" class="bar"></div>
<div id="right22_9" class="bar"></div>
<div id="right22_8" class="bar"></div>
<div id="right22_7" class="bar"></div>
<div id="right22_6" class="bar"></div>
<div id="right22_5" class="bar"></div>
<div id="right22_4" class="bar"></div>
<div id="right22_3" class="bar"></div>
<div id="right22_2" class="bar"></div>
<div id="right22_1" class="bar"></div>
<div id="right22_0" class="bar"></div>
<div id="right22hz" class="hz"></div>
</div><div class="band">
<div id="right23_24" class="bar"></div>
<div id="right23_23" class="bar"></div>
<div id="right23_22" class="bar"></div>
<div id="right23_21" class="bar"></div>
<div id="right23_20" class="bar"></div>
<div id="right23_19" class="bar"></div>
<div id="right23_18" class="bar"></div>
<div id="right23_17" class="bar"></div>
<div id="right23_16" class="bar"></div>
<div id="right23_15" class="bar"></div>
<div id="right23_14" class="bar"></div>
<div id="right23_13" class="bar"></div>
<div id="right23_12" class="bar"></div>
<div id="right23_11" class="bar"></div>
<div id="right23_10" class="bar"></div>
<div id="right23_9" class="bar"></div>
<div id="right23_8" class="bar"></div>
<div id="right23_7" class="bar"></div>
<div id="right23_6" class="bar"></div>
<div id="right23_5" class="bar"></div>
<div id="right23_4" class="bar"></div>
<div id="right23_3" class="bar"></div>
<div id="right23_2" class="bar"></div>
<div id="right23_1" class="bar"></div>
<div id="right23_0" class="bar"></div>
<div id="right23hz" class="hz"></div>
</div><div class="band">
<div id="right24_24" class="bar"></div>
<div id="right24_23" class="bar"></div>
<div id="right24_22" class="bar"></div>
<div id="right24_21" class="bar"></div>
<div id="right24_20" class="bar"></div>
<div id="right24_19" class="bar"></div>
<div id="right24_18" class="bar"></div>
<div id="right24_17" class="bar"></div>
<div id="right24_16" class="bar"></div>
<div id="right24_15" class="bar"></div>
<div id="right24_14" class="bar"></div>
<div id="right24_13" class="bar"></div>
<div id="right24_12" class="bar"></div>
<div id="right24_11" class="bar"></div>
<div id="right24_10" class="bar"></div>
<div id="right24_9" class="bar"></div>
<div id="right24_8" class="bar"></div>
<div id="right24_7" class="bar"></div>
<div id="right24_6" class="bar"></div>
<div id="right24_5" class="bar"></div>
<div id="right24_4" class="bar"></div>
<div id="right24_3" class="bar"></div>
<div id="right24_2" class="bar"></div>
<div id="right24_1" class="bar"></div>
<div id="right24_0" class="bar"></div>
<div id="right24hz" class="hz"></div>
</div><div class="band">
<div id="right25_24" class="bar"></div>
<div id="right25_23" class="bar"></div>
<div id="right25_22" class="bar"></div>
<div id="right25_21" class="bar"></div>
<div id="right25_20" class="bar"></div>
<div id="right25_19" class="bar"></div>
<div id="right25_18" class="bar"></div>
<div id="right25_17" class="bar"></div>
<div id="right25_16" class="bar"></div>
<div id="right25_15" class="bar"></div>
<div id="right25_14" class="bar"></div>
<div id="right25_13" class="bar"></div>
<div id="right25_12" class="bar"></div>
<div id="right25_11" class="bar"></div>
<div id="right25_10" class="bar"></div>
<div id="right25_9" class="bar"></div>
<div id="right25_8" class="bar"></div>
<div id="right25_7" class="bar"></div>
<div id="right25_6" class="bar"></div>
<div id="right25_5" class="bar"></div>
<div id="right25_4" class="bar"></div>
<div id="right25_3" class="bar"></div>
<div id="right25_2" class="bar"></div>
<div id="right25_1" class="bar"></div>
<div id="right25_0" class="bar"></div>
<div id="right25hz" class="hz"></div>
</div><div class="band">
<div id="right26_24" class="bar"></div>
<div id="right26_23" class="bar"></div>
<div id="right26_22" class="bar"></div>
<div id="right26_21" class="bar"></div>
<div id="right26_20" class="bar"></div>
<div id="right26_19" class="bar"></div>
<div id="right26_18" class="bar"></div>
<div id="right26_17" class="bar"></div>
<div id="right26_16" class="bar"></div>
<div id="right26_15" class="bar"></div>
<div id="right26_14" class="bar"></div>
<div id="right26_13" class="bar"></div>
<div id="right26_12" class="bar"></div>
<div id="right26_11" class="bar"></div>
<div id="right26_10" class="bar"></div>
<div id="right26_9" class="bar"></div>
<div id="right26_8" class="bar"></div>
<div id="right26_7" class="bar"></div>
<div id="right26_6" class="bar"></div>
<div id="right26_5" class="bar"></div>
<div id="right26_4" class="bar"></div>
<div id="right26_3" class="bar"></div>
<div id="right26_2" class="bar"></div>
<div id="right26_1" class="bar"></div>
<div id="right26_0" class="bar"></div>
<div id="right26hz" class="hz"></div>
</div>
<div class="status">
<span id="hz44100">44100 Hz</span>
<span id="hz48000">48000 Hz</span>
</div>
</div>
<div id="about">
<a href="https://ogris.de/grapheqd/" target="_blank">grapheqd</a>
</div>
</div>

<div id="errorPane"></div>
<div id="errorText">Connection lost!</div>

<script>
<!--
/* avoid concurrent invocations of reconnect() by onerror/onclose */
var reconnectID;
/* fill in Mono/Stereo, 44100/48000, and frequencies of bands just on the
   first response */
var is_first_response;

var OPACITY_BRIGHT = 0.8;
var OPACITY_FADE = 0.5;
var OPACITY_DARK = 0.2;


function toggleErrorPane (visibility) {
  var errorPane = document.getElementById("errorPane");

  if (errorPane.style.visibility != visibility) {
    errorPane.style.visibility = visibility;
    document.getElementById("errorText").style.visibility = visibility;
  }
}

function labelChannel (rate, channel)
{
  /* from fill_bands() */
  var buckets = [ 0, 1, 2, 3, 4, 5, 7, 9, 11, 15, 18, 23, 28, 37, 46, 57, 69,
                  92, 115, 148, 181, 236, 292, 378, 464, 604, 744 ];

  for (var col = 0; col < 27; col++) {
    var elemID = channel + col + "hz";
    var freq = (buckets[col] + 1) * rate / 2048;

    if (freq < 1000)
      freq = Math.floor(freq);
    else
      freq = Math.floor(freq / 100) / 10 + "k";

    document.getElementById(elemID).innerHTML = freq;
  }
}

function displayParameters (data)
{
  var is_stereo = (data["channels"] == 2);
  var is_44100hz = (data["rate"] == 44100);

  document.getElementById("mono").style.opacity = (is_stereo ? OPACITY_DARK : OPACITY_BRIGHT);
  document.getElementById("stereo").style.opacity = (is_stereo ? OPACITY_BRIGHT : OPACITY_DARK);
  document.getElementById("hz44100").style.opacity = (is_44100hz ? OPACITY_BRIGHT : OPACITY_DARK);
  document.getElementById("hz48000").style.opacity = (is_44100hz ? OPACITY_DARK : OPACITY_BRIGHT);

  ["left", "right"].forEach(channel => labelChannel(data["rate"], channel));
}

function displayChannel (data, channel)
{
  for (var col = 0; col < 27; col++) {
    var elemID = channel + col + "_";
    var row;
    for (row = 0; row < data[channel][col]; row++) {
      document.getElementById(elemID + row).style.opacity = OPACITY_BRIGHT;
    }
    for (; row < 25; row++) {
      var s = document.getElementById(elemID + row).style;
      s.opacity = (s.opacity == OPACITY_BRIGHT ? OPACITY_FADE : OPACITY_DARK);
    }
    row = data["peak" + channel][col];
    if (row > 0) {
      row--;
      document.getElementById(elemID + row).style.opacity = OPACITY_BRIGHT;
    }
  }
}

function processData (response)
{
  try {
    var data = JSON.parse(response);

    if (is_first_response) {
      is_first_response = false;
      displayParameters(data);
    }

    ["left", "right"].forEach(channel => displayChannel(data, channel));
  } catch (e) {
    toggleErrorPane("visible");
  }
}

function reconnect () {
  if (reconnectID == null) {
    reconnectID = window.setTimeout(startRequest, 1000);
    toggleErrorPane("visible");
  }
}

function startRequest () {
  reconnectID = null;
  is_first_response = true;

  var host = window.location.host;
  var ws = new WebSocket("ws://" + host + "/json");

  ws.onerror = function (ev) {
    reconnect();
  };

  ws.onclose = function (ev) {
    reconnect();
  };

  ws.onopen = function (ev) {
    toggleErrorPane("hidden");
  };

  ws.onmessage = function (ev) {
    processData(ev.data);
  };
}

startRequest();

-->
</script>
</body>
</html>