<div class=type_select id=dev_select>
<button style="float:right;" onclick="this.parentNode.style.display='none';"><i class="fa fa-times"></i></button>
<br>
<div class="type">
<button onclick="remove_dev()"><i class="fa fa-trash"></i> Delete</button>
</div>
<div class=inner_div>
<h3>Tubes</h3>
<div class="type">
<img src="/celltest/dev_png/R1.png" onclick="select('tube','R1')">
</div>
<div class="type">
<img src="/celltest/dev_png/R2.png" onclick="select('tube','R2')">
</div>
<div class="type">
<img src="/celltest/dev_png/R3.png" onclick="select('tube','R3')">
</div>
<div class="type">
<img src="/celltest/dev_png/R4.png" onclick="select('tube','R4')">
</div>
<div class="type">
<img src="/celltest/dev_png/R5.png" onclick="select('tube','R5')">
</div>
<div class="type">
<img src="/celltest/dev_png/R6.png" onclick="select('tube','R6')">
</div>
<div class="type">
<img src="/celltest/dev_png/R7.png" onclick="select('tube','R7')">
</div>
<div class="type">
<img src="/celltest/dev_png/R8.png" onclick="select('tube','R8')">
</div>
<div class="type">
<img src="/celltest/dev_png/R9.png" onclick="select('tube','R9')">
</div>
<div class="type">
<img src="/celltest/dev_png/R10.png" onclick="select('tube','R10')">
</div>
<div class="type">
<img src="/celltest/dev_png/R11.png" onclick="select('tube','R11')">
</div>
<div class="type">
<img src="/celltest/dev_png/R12.png" onclick="select('tube','R12')">
</div>
<div class="type">
<img src="/celltest/dev_png/R14.png" onclick="select('tube','R14')">
</div>
<div class="type">
<img src="/celltest/dev_png/R15.png" onclick="select('tube','R15')">
</div>
<div class="type">
<img src="/celltest/dev_png/R27.png" onclick="select('tube','R27')">
</div>
<div class="type">
<img src="/celltest/dev_png/R28.png" onclick="select('tube','R28')">
</div>
<div class="type">
<img src="/celltest/dev_png/R35.png" onclick="select('tube','R35')">
</div>
<div class="type">
<img src="/celltest/dev_png/R36.png" onclick="select('tube','R36')">
</div>

<h3>Valves</h3>
<div class="type">
Manual<br>
<img src="/celltest/dev_png/V1.png" onclick="select('valve','V1','manual')" title="manual valve">
</div>
<div class="type">
Magnetic<br>
<img src="/celltest/dev_png/V1.png" onclick="select('valve','V1','auto')" title="Magnetic valve">
</div>
<div class="type">
Readonly<br>
<img src="/celltest/dev_png/V1.png" onclick="select('valve','V1','readonly')" title="Magnetic valve">
</div>
<div class="type">
Magnetic NO<br>
<img src="/celltest/dev_png/V2.png" onclick="select('valve','V2','auto')" title="Magnetic valve normally open">
</div>
<div class="type">
Readonly NO<br>
<img src="/celltest/dev_png/V2.png" onclick="select('valve','V2','readonly')" title="Magnetic valve normally open">
</div>

<div class="type">
Manual 3-way<br>
<img src="/celltest/dev_png/V3.png" onclick="select('valve','V3_1','manual')" title="Manual 3-way walve">
</div>
<br>
<div class="type">
3-way type 1 automatic<br>
<div style="display:inline-block;"><img src="/celltest/dev_png/V3_v.png" onclick="select('valve','V3_1','auto')" title="3-way walve mode 1 automatic"><br>On</div>
<div style="display:inline-block;"><img src="/celltest/dev_png/V3_s.png" onclick="select('valve','V3_1','auto')" title="3-way walve mode 1 automatic"><br>Off</div>
</div>

<div class="type">
3-way type 2 automatic<br>
<div style="display:inline-block;"><img src="/celltest/dev_png/V3_h.png" onclick="select('valve','V3_2','auto')" title="3-way walve mode 2 automatic"><br>On</div>
<div style="display:inline-block;"><img src="/celltest/dev_png/V3_s.png" onclick="select('valve','V3_2','auto')" title="3-way walve mode 2 automatic"><br>Off</div>
</div>

<div class="type">
3-way type 3 automatic<br>
<div style="display:inline-block;"><img src="/celltest/dev_png/V3_v.png" onclick="select('valve','V3_3','auto')" title="3-way walve mode 3 automatic"><br>On</div>
<div style="display:inline-block;"><img src="/celltest/dev_png/V3_h.png" onclick="select('valve','V3_3','auto')" title="3-way walve mode 3 automatic"><br>Off</div>
</div>
<br>
<div class="type">
3-way type 1 readonly<br>
<div style="display:inline-block;"><img src="/celltest/dev_png/V3_v.png" onclick="select('valve','V3_1','readonly')" title="3-way walve mode 1 readonly"><br>On</div>
<div style="display:inline-block;"><img src="/celltest/dev_png/V3_s.png" onclick="select('valve','V3_1','readonly')" title="3-way walve mode 1 readonly"><br>Off</div>
</div>

<div class="type">
3-way type 2 readonly<br>
<div style="display:inline-block;"><img src="/celltest/dev_png/V3_h.png" onclick="select('valve','V3_2','readonly')" title="3-way walve mode 2 readonly"><br>On</div>
<div style="display:inline-block;"><img src="/celltest/dev_png/V3_s.png" onclick="select('valve','V3_2','readonly')" title="3-way walve mode 2 readonly"><br>Off</div>
</div>

<div class="type">
3-way type 3 readonly<br>
<div style="display:inline-block;"><img src="/celltest/dev_png/V3_v.png" onclick="select('valve','V3_3','readonly')" title="3-way walve mode 3 readonly"><br>On</div>
<div style="display:inline-block;"><img src="/celltest/dev_png/V3_h.png" onclick="select('valve','V3_3','readonly')" title="3-way walve mode 3 readonly"><br>Off</div>
</div>



<!--
<h3>Wires</h3>
-->

<h3>Datalog</h3>
<div class="type">
<button onclick="select('device','simple','milivolt')" title="Voltage measurement (mV)">mV</button>
</div>
<div class="type">
<button onclick="select('device','simple','volt')" title="Voltage measurement (V)">V</button>
</div>
<div class="type">
<button onclick="select('device','simple','ampeare')" title="Current measurement (A)">A</button>
</div>
<div class="type">
<button onclick="select('device','simple','miliampeare')" title="Current measurement (mA)">mA</button>
</div>
<div class="type">
<button onclick="select('device','Tlog','readonly')" title="Temperature measurement">&deg;C</button>
</div>
<div class="type">
<button onclick="select('device','Tlog','readonly_K')" title="Temperature measurement">&deg;K</button>
</div>
<div class="type">
<button onclick="select('device','simple','percent')" title="Percentage measurement">%</button>
</div>
<div class="type">
<img src="/celltest/dev_png/M5.png" onclick="select('device','simple','pressure')" title="Pressure gauge">
</div>
<div class="type">
<img src="/celltest/dev_png/M8.png" onclick="select('device','simple','DPS')" title="Differential pressure gauge">
</div>


<h3>Devices</h3>
<div class="type">
MFC<br>
<img src="/celltest/dev_png/m1.png" onclick="select('mfc','MFC','auto')" title="Mass flow controler">
</div>
<div class="type">
Ball<br>
<img src="/celltest/dev_png/m3.png" onclick="select('mfc','MFC','manual')" title="Ball flow meter">
</div>
<div class="type">
Readonly<br>
<img src="/celltest/dev_png/m1.png" onclick="select('mfc','MFC','readonly')" title="Mass flow meter">
</div>
<div class="type">
Multiplexed<br>
<img src="/celltest/dev_png/m1.png" onclick="select('mfc','MFC','multiplex')" title="Mass flow controler with multiplexed gasses">
</div>

<div class="type">
Multiplexer<br>
<img src="/celltest/dev_png/m4.png" onclick="select('complex','Multiplex','auto')" title="Gas multiplexer">
</div>

<div class="type">
<button type=button onclick="select('complex','Tempcontrol','auto')" title="Temperature contrroler">Temperature</button>
</div>

<div class="type">
<button type=button onclick="select('complex','PSU','auto')" title="DC power supply">PSU</button>
</div>

<div class="type">
<button type=button onclick="select('complex','PID','auto')" title="Feedback regulator">PID</button>
</div>


<div class="type">
Switch<br>
<img src="/celltest/dev_png/Switch.png" onclick="select('valve','Switch','auto')" title="Output relay">
</div>

<div class="type">
PD<br>
<img src="/celltest/dev_png/M7.png" onclick="select('pcontrol','M7','auto')" title="Pressure regulator (downstream control)">
</div>

<div class="type">
PU<br>
<img src="/celltest/dev_png/M6.png" onclick="select('pcontrol','M6','auto')" title="Pressure regulator (upstream control)">
</div>

<div class="type">
Manual PD<br>
<img src="/celltest/dev_png/M7.png" onclick="select('pcontrol','M7','manual')" title="Manual pressure regulator (downstream control)">
</div>

<div class="type">
Manual PU<br>
<img src="/celltest/dev_png/M6.png" onclick="select('pcontrol','M6','manual')" title="Manual pressure regulator (upstream control)">
</div>


<h3>Misc</h3>

<div class="type">
<img src="/celltest/dev_png/R21.png" onclick="select('tube','R21')">
</div>

<div class="type">
<img src="/celltest/dev_png/R22.png" onclick="select('tube','R22')">
</div>

<div class="type">
<img src="/celltest/dev_png/R23.png" onclick="select('tube','R23')">
</div>
<div class="type">
<img src="/celltest/dev_png/R24.png" onclick="select('tube','R24')">
</div>
<div class="type">
<img src="/celltest/dev_png/R25.png" onclick="select('tube','R25')">
</div>
<div class="type">
<img src="/celltest/dev_png/R26.png" onclick="select('tube','R26')">
</div>

<div class="type">
<img src="/celltest/dev_png/R29.png" onclick="select('tube','R29')">
</div>
<div class="type">
<img src="/celltest/dev_png/R30.png" onclick="select('tube','R30')">
</div>
<div class="type">
<img src="/celltest/dev_png/R31.png" onclick="select('tube','R31')">
</div>
<div class="type">
<img src="/celltest/dev_png/R32.png" onclick="select('tube','R32')">
</div>

<div class="type">
<img src="/celltest/dev_png/R33.png" onclick="select('tube','R33')">
</div>
<div class="type">
<img src="/celltest/dev_png/R34.png" onclick="select('tube','R34')">
</div>

<div class="type">
<img src="/celltest/dev_png/D6.png" onclick="select('tube','D6')">
</div>

</div>
</div>


<style>

.inner_div {
    height:90%;
    width:100%;
    overflow-y:auto;
}

.type_select {
    z-index: 10;
    position: absolute;
    background: white;
    border-style:solid;
    padding:5px;
    float:left;
    width:500px;
    height:700px;
    border:1px solid;
    border-color:red;
    margin-left:20px;
    margin-right:10px;
    display:none;
}

.type {
    display:inline-block;
    padding:5px;
    text-align:center;
    vertical-align:middle;
}

</style>
