CaptchaReactNeuron

9

12/19/2019 10:26:34 PM

Details

diff --git a/NeuralNetwork/NeuralNetwork.UI.Web/Scripts/Site/Pages/ReactAppPage.jsx b/NeuralNetwork/NeuralNetwork.UI.Web/Scripts/Site/Pages/ReactAppPage.jsx
index 20070f6..4625abc 100644
--- a/NeuralNetwork/NeuralNetwork.UI.Web/Scripts/Site/Pages/ReactAppPage.jsx
+++ b/NeuralNetwork/NeuralNetwork.UI.Web/Scripts/Site/Pages/ReactAppPage.jsx
@@ -6,10 +6,11 @@ class ReactAppPage extends React.Component {
         super(props);
         this.api = new API_TextRecognising();
         this.state =
-        {
-            TextRecognising_Result: "",
-            TextRecognising_Learn: ""
-        };
+            {
+                TextRecognising_Result: "",
+                TextRecognising_Learn: "",
+                sliderValue: 1
+            };
 
         this.api = new API_TextRecognising();
 
@@ -18,6 +19,7 @@ class ReactAppPage extends React.Component {
         this._OnClick_Button_Recognized = this._OnClick_Button_Recognized.bind(this);
         this._OnClick_Button_Learn = this._OnClick_Button_Learn.bind(this);
         this.handleInputChange = this.handleInputChange.bind(this);
+        this.handleSliderChange = this.handleSliderChange.bind(this);
     }
 
     componentDidMount() {
@@ -30,6 +32,11 @@ class ReactAppPage extends React.Component {
         this.setState({ TextRecognising_Learn: event.target.value });
     }
 
+    handleSliderChange(event) {
+        this.setState({ sliderValue: event.target.value });
+        this.canvas.ChangeThickness(event.target.value);
+    }
+
     _OnClick_Button_Clear() {
         this.canvas.ClearCanvas();
         this.setState({ TextRecognising_Result: "", TextRecognising_Learn: "" });
@@ -57,7 +64,7 @@ class ReactAppPage extends React.Component {
         return (
             <div>
                 <div className="CanvasContainer">
-                    <canvas ref={"CanvasElem"} width="500" height="300"/>
+                    <canvas ref={"CanvasElem"} width="500" height="300" />
                 </div>
 
                 <button
@@ -77,7 +84,7 @@ class ReactAppPage extends React.Component {
                     <div className="input-group-prepend">
                         <span className="input-group-text" id="basic-addon1">Result:</span>
                     </div>
-                    <input type="text" readOnly="readonly" value={this.state.TextRecognising_Result} className="form-control" aria-describedby="basic-addon1"/>
+                    <input type="text" readOnly="readonly" value={this.state.TextRecognising_Result} className="form-control" aria-describedby="basic-addon1" />
                 </div>
 
                 <div className="input-group mb-3">
@@ -89,7 +96,11 @@ class ReactAppPage extends React.Component {
                             Обучить
                         </button>
                     </div>
-                    <input type="text" value={this.state.TextRecognising_Learn} className="form-control" onChange={this.handleInputChange}/>
+                    <input type="text" value={this.state.TextRecognising_Learn} className="form-control" onChange={this.handleInputChange} />
+                </div>
+
+                <div className="slidecontainer">
+                    <input type="range" min="1" max="10" step="0.5" value={this.state.sliderValue} className="slider" onChange={this.handleSliderChange} />
                 </div>
             </div>
         );