weblab-instrument
Version:
communication with instrument through usb
274 lines (242 loc) • 9.17 kB
JSX
;
var msoActionCreators = require("../actions/mso-consoleActionCreators");
var msoStore = require("../stores/mso-consoleStore");
var AppKnob = require("./AppKnobCtrl.jsx");
var AppChannelMenu = require("./AppChannelMenu.jsx");
var KnobStepPclass ={
CH1:"mini ui inverted yellow icon button positionCH1Plus",
CH2:"mini ui inverted blue icon button positionCH2Plus",
CH3:"mini ui inverted red icon button positionCH3Plus",
CH4:"mini ui inverted green icon button positionCH4Plus",
HOR:"mini ui inverted icon button position HorPlus"
},
KnobStepMclass ={
CH1:"mini ui inverted yellow icon button positionCH1Minus",
CH2:"mini ui inverted blue icon button positionCH2Minus",
CH3:"mini ui inverted red icon button positionCH3Minus",
CH4:"mini ui inverted green icon button positionCH4Minus",
HOR:"mini ui inverted icon button position HorMinus"
},
iKnobStepPclass ={
CH1:"mini ui inverted yellow icon button scale CH1Plus",
CH2:"mini ui inverted blue icon button scale CH2Plus",
CH3:"mini ui inverted red icon button scale CH3Plus",
CH4:"mini ui inverted green icon button scale CH4Plus",
HOR:"mini ui inverted icon button scale HorPlus"
},
iKnobStepMclass ={
CH1:"mini ui inverted yellow icon button scale CH1Minus",
CH2:"mini ui inverted blue icon button scale CH2Minus",
CH3:"mini ui inverted red icon button scale CH3Minus",
CH4:"mini ui inverted green icon button scale CH4Minus",
HOR:"mini ui inverted icon button scale HorMinus"
},
knobClassInfo ={
CH1:"ch1Knob",
CH2:"ch2Knob",
CH3:"ch3Knob",
CH4:"ch4Knob",
HOR:"horKnob"
};
var self;
var AppDoubleKnob = React.createClass({
getInitialState: function() {
return {
keyValue: 0,
ChOnOff:'',
unitIcon:'users icon'
};
},
componentWillMount: function() {
},
inputChangePos: function(e){
console.log(e.nativeEvent.target.value);
console.log(e.target.id);
// $('#ch1_position').value = e.nativeEvent.target.value.toString();
var inputId ='#'+ e.target.id;
var val = parseFloat($(inputId).val());
// $('#CH1').val(100);
console.log($(inputId).val());
console.log(inputId);
$(inputId)[0].step = 10;
$(inputId).val(val);
console.log($(inputId));
},
inputChangeScal:function(e){
var inputId ='#'+ e.target.id;
var val = parseFloat($(inputId).val());
console.log(e.nativeEvent.target.value);
console.log(inputId);
console.log();
if(val > 12){
$(inputId).val(12);
}
else if(val < 0){
$(inputId).val(0);
}
$('.shape.scale').shape('flip down');
},
mouseWheel: function(e){
console.log(e);
},
componentDidMount: function() {
self = this;
$('.dropdown.scale')
.dropdown({
on: 'hover'
});
// $('.ui.menu .dropdown')
// .dropdown({
// delay: {
// show : 100,
// hide : 300,
// touch : 50
// },
// transition: 'drop',
// // onChange:function(value, text, $choice){
// // console.log(value);
// // },
// on: 'hover'
// });
// });
// $('.ch1Knob').knob({
// 'min': 0,
// 'max': 50,
// 'step':2,
// 'width':50,
// 'angleArc':180,
// 'angleOffset':90,
// 'thickness': '.5',
// 'release': function (v) {
// console.log('release value = '+v);
// },
// 'change' : function (v) {
// console.log('knob value = '+v);
// }
// });
// $('.toggle.checkbox')
// .checkbox({
// onChecked: function(){
// console.log("toggle.checkbox onChecked");
// },
// onUnchecked: function(){
// console.log("toggle.checkbox onUnChecked");
// },
// onChange: function(){
// console.log("toggle.checkbox onChange");
// }
// });
},
componentWillUnmount: function() {
},
render: function() {
// var UpStyle={
// position:"relative",
// left:"0px",
// top:"0px"
// },
// DownStyle={
// position:"relative",
// left:"0px
// top:"0px"
// },
// VerticalKnobStyle={
// position:"relative",
// width:"150px",
// margin:"0px"
// };
// var LeftStyle={
// position:"relative",
// left:"10px",
// top:"10px"
// },
// RightStyle={
// position:"relative",
// left:"10px",
// top:"10px"
// },
// horKnobStyle={
// position:"relative",
// width:"300px",
// margin:"auto"
// };
// var verInfiniteKnobClear={
// position:"absolute",
// left:"30px",
// top:"30px"
// },
// verKnobClearl={
// position:"absolute",
// left:"25px",
// top:"25px"
// },
// horInfiniteKnobClear={
// position:"absolute",
// left:"30px",
// top:"30px"
// },
// horKnobClear={
// position:"absolute",
// left:"25px",
// top:"25px"
// };
if(this.props.chnum !="")
{
// var ScaleKnobStyle=DownStyle;
// var PosKnobStyle=UpStyle;
// var KnobGroupStyle=VerticalKnobStyle;
var divDiretion="ui horizontal divider";
// var infiniteKnob_clear=verInfiniteKnobClear;
// var Knob_clear=verKnobClearl;
// var positionP=iKnobStepPclass[this.props.chnum];
// var positionM=iKnobStepMclass[this.props.chnum];
// var scaleP=KnobStepPclass[this.props.chnum];
var scaleM=KnobStepMclass[this.props.chnum];
var knobClass = knobClassInfo[this.props.chnum];
}
else
{
// var ScaleKnobStyle=LeftStyle;
// var PosKnobStyle=RightStyle;
// var KnobGroupStyle=horKnobStyle;
var divDiretion="ui none";
// var infiniteKnob_clear=horInfiniteKnobClear;
// var Knob_clear=horKnobClear;
// var positionP="mini ui icon button";
// var positionM="mini ui icon button";
// var scaleP="mini ui icon button";
// var scaleM="mini ui icon button";
}
var moadlMenu=<AppChannelMenu ch_class={this.props.ch_class} chnum={this.props.chnum} diviClass={divDiretion}/>;
console.log('render bouble knob');
// <div className="ui fluid search selection dropdown scale">
// <input type="hidden" name="country" />
// <i className="dropdown icon"></i>
// <div className="default text">Select Country</div>
// <div className="menu">
// <div className="item" data-value="af"><i className="af flag"></i>Afghanistan</div>
// <div className="item" data-value="ax"><i className="ax flag"></i>Aland Islands</div>
// <div className="item" data-value="al"><i className="al flag"></i>Albania</div>
// <div className="item" data-value="dz"><i className="dz flag"></i>Algeria</div>
// </div>
// </div>
return (
<div >
<div className = "ui mini input">
<input id={this.props.chnum+'pos'} type = "number" name="h_position" onWheel={this.inputChangePos} onInput={this.inputChangePos} defaultValue='0' style={{width:"80"} }/>
</div>
<div className="ui left pointing label">
Position
</div>
{moadlMenu}
<div className = "ui mini input">
<input id={this.props.chnum+'scale'} type = "number" name="v_scale" onWheel={this.inputChangeScal} onInput={this.inputChangeScal} defaultValue='0' style={{width:"80"} } />
</div>
<div className="ui left pointing label">
Scale
</div>
</div>
);
},
});
module.exports = AppDoubleKnob;