Beispiel #1
0
        public Layout(PlotSettings settings)
        {
            var plotter = new TinyPlotter(settings);

            var exprInput = new HTMLInputElement {
                Type = InputType.Text
            };

            exprInput.Value = "sin(3x)";

            var evalInput = new HTMLInputElement {
                Type = InputType.Text
            };

            evalInput.Value = "plus(5^2, sin(div(pi, 2)))";

            var variableInput = new HTMLInputElement {
                Type = InputType.Text
            };

            variableInput.Value = "x";

            var deltaXInput = new HTMLInputElement {
                Type = InputType.Text
            };

            deltaXInput.Value = "0.005";

            var xminInput = new HTMLInputElement {
                Type = InputType.Text
            };

            xminInput.Value = settings.Viewport.XMin.ToString();

            var xmaxInput = new HTMLInputElement {
                Type = InputType.Text
            };

            xmaxInput.Value = settings.Viewport.XMax.ToString();

            var yminInput = new HTMLInputElement {
                Type = InputType.Text
            };

            yminInput.Value = settings.Viewport.YMin.ToString();

            var ymaxInput = new HTMLInputElement {
                Type = InputType.Text
            };

            ymaxInput.Value = settings.Viewport.YMax.ToString();

            var resultDiv = new HTMLDivElement();

            resultDiv.Style.FontSize = "18px";
            resultDiv.Style.MaxWidth = "300px";

            var btnPlot = new HTMLButtonElement
            {
                InnerHTML = "Plot with derivative",
                OnClick   = ev =>
                {
                    Func <HTMLInputElement, bool> IsNaN = x => double.IsNaN(Script.ParseFloat(x.Value));

                    var isNotValid = exprInput.Value == "" ||
                                     variableInput.Value == "" ||
                                     IsNaN(deltaXInput) ||
                                     IsNaN(xminInput) ||
                                     IsNaN(xmaxInput) ||
                                     IsNaN(yminInput) ||
                                     IsNaN(ymaxInput);


                    if (isNotValid)
                    {
                        Write("<h1 style='color:red'>Input is not valid!</h1>", resultDiv);
                        return;
                    }

                    var result = Parser.TryParseInput(exprInput.Value);
                    if (result.WasSuccessful)
                    {
                        // set the settings
                        plotter.Settings.StepX         = Script.ParseFloat(deltaXInput.Value);
                        plotter.Settings.Viewport.XMin = Script.ParseFloat(xminInput.Value);
                        plotter.Settings.Viewport.XMax = Script.ParseFloat(xmaxInput.Value);
                        plotter.Settings.Viewport.YMin = Script.ParseFloat(yminInput.Value);
                        plotter.Settings.Viewport.YMax = Script.ParseFloat(ymaxInput.Value);

                        resultDiv.InnerHTML = "";
                        var f  = result.Value;
                        var df = Expr.Differentiate(f, variableInput.Value);

                        var fLambda    = Expr.Lambdify(f, variableInput.Value);
                        var dfLambda   = Expr.Lambdify(df, variableInput.Value);
                        var curveColor = RandomColor();

                        plotter.Settings.Curves.Clear();
                        plotter.Settings.Curves.Add(new Curve {
                            Map = fLambda, Color = curveColor
                        });
                        plotter.Settings.Curves.Add(new Curve {
                            Map = dfLambda, Color = Grayscale(curveColor)
                        });
                        plotter.Draw();

                        var rgbCurveColor = RGB(curveColor);
                        var rgbGrayColor  = RGB(Grayscale(curveColor));

                        var msgParsed  = "<strong style='color:" + rgbCurveColor + "'>" + f.ToString() + "</strong>";
                        var derivative = "<strong style='color:" + rgbGrayColor + "'>" + df.ToString() + "</strong>";
                        Write("<hr /> Parsed: <br />" + msgParsed + "<br /> Derivative: <br /> " + derivative + "<hr />", resultDiv);
                    }
                    else
                    {
                        var error = string.Join("<br />", result.Expectations);
                        Write("<h1 style='color:red'>" + error + "</h1>", resultDiv);
                    }
                }
            };


            var btnEvaluate = new HTMLButtonElement
            {
                InnerHTML = "Evaluate",
                OnClick   = ev =>
                {
                    if (evalInput.Value == "")
                    {
                        Write("<h1 style='color:red'>Input is not valid!</h1>", resultDiv);
                        return;
                    }

                    var result = Parser.TryParseInput(evalInput.Value);
                    if (result.WasSuccessful)
                    {
                        resultDiv.InnerHTML = "";
                        var expression = result.Value;
                        var eval       = Expr.Evaluate(expression);

                        Write("<h4 style='color:green'>" +
                              "Parsed: " + expression.ToString() + "<br />" +
                              "Answer: " + eval.ToString()
                              + "</h4>", resultDiv);
                    }
                    else
                    {
                        var error = string.Join("<br />", result.Expectations);
                        Write("<h1 style='color:red'>" + error + "</h1>", resultDiv);
                    }
                }
            };

            var slider = new HTMLInputElement {
                Type = InputType.Range
            };

            btnEvaluate.Style.Width  = "90%";
            btnEvaluate.Style.Margin = "5px";
            btnEvaluate.Style.Height = "40px";
            btnPlot.Style.Margin     = "5px";
            btnPlot.Style.Height     = "40px";
            btnPlot.Style.Width      = "90%";

            var layout = Table(
                Row(Table(
                        Row(Label("Expression"), exprInput),
                        Row(Label("Variable"), variableInput),
                        Row(Label("XAxis step"), deltaXInput),
                        Row(Label("XMin"), xminInput),
                        Row(Label("XMax"), xmaxInput),
                        Row(Label("YMin"), yminInput),
                        Row(Label("YMax"), ymaxInput),
                        Row(btnPlot, 2),
                        Row(new HTMLHRElement(), 2),
                        Row(Label("Expression"), evalInput),
                        Row(btnEvaluate, 2),
                        Row(resultDiv, 2)),
                    Table(
                        Row(plotter.Canvas)))
                );

            this.container = layout;
        }
Beispiel #2
0
        public Layout(PlotSettings settings)
        {
            var plotter = new TinyPlotter(settings);

            var exprInput = new HTMLInputElement { Type = InputType.Text };
            exprInput.Value = "sin(3x)";

            var evalInput = new HTMLInputElement { Type = InputType.Text };
            evalInput.Value = "plus(5^2, sin(div(pi, 2)))";

            var variableInput = new HTMLInputElement { Type = InputType.Text };
            variableInput.Value = "x";

            var deltaXInput = new HTMLInputElement { Type = InputType.Text };
            deltaXInput.Value = "0.005";

            var xminInput = new HTMLInputElement { Type = InputType.Text };
            xminInput.Value = settings.Viewport.XMin.ToString();

            var xmaxInput = new HTMLInputElement { Type = InputType.Text };
            xmaxInput.Value = settings.Viewport.XMax.ToString();

            var yminInput = new HTMLInputElement { Type = InputType.Text };
            yminInput.Value = settings.Viewport.YMin.ToString();

            var ymaxInput = new HTMLInputElement { Type = InputType.Text };
            ymaxInput.Value = settings.Viewport.YMax.ToString();

            var resultDiv = new HTMLDivElement();
            resultDiv.Style.FontSize = "18px";
            resultDiv.Style.MaxWidth = "300px";

            var btnPlot = new HTMLButtonElement
            {
                InnerHTML = "Plot with derivative",
                OnClick = ev =>
                {
                    Func<HTMLInputElement, bool> IsNaN = x => double.IsNaN(Script.ParseFloat(x.Value));

                    var isNotValid = exprInput.Value == ""
                                  || variableInput.Value == ""
                                  || IsNaN(deltaXInput)
                                  || IsNaN(xminInput)
                                  || IsNaN(xmaxInput)
                                  || IsNaN(yminInput)
                                  || IsNaN(ymaxInput);

                    if (isNotValid)
                    {
                        Write("<h1 style='color:red'>Input is not valid!</h1>", resultDiv);
                        return;
                    }

                    var result = Parser.TryParseInput(exprInput.Value);
                    if (result.WasSuccessful)
                    {
                        // set the settings
                        plotter.Settings.StepX = Script.ParseFloat(deltaXInput.Value);
                        plotter.Settings.Viewport.XMin = Script.ParseFloat(xminInput.Value);
                        plotter.Settings.Viewport.XMax = Script.ParseFloat(xmaxInput.Value);
                        plotter.Settings.Viewport.YMin = Script.ParseFloat(yminInput.Value);
                        plotter.Settings.Viewport.YMax = Script.ParseFloat(ymaxInput.Value);

                        resultDiv.InnerHTML = "";
                        var f = result.Value;
                        var df = Expr.Differentiate(f, variableInput.Value);

                        var fLambda = Expr.Lambdify(f, variableInput.Value);
                        var dfLambda = Expr.Lambdify(df, variableInput.Value);
                        var curveColor = RandomColor();

                        plotter.Settings.Curves.Clear();
                        plotter.Settings.Curves.Add(new Curve { Map = fLambda, Color = curveColor });
                        plotter.Settings.Curves.Add(new Curve { Map = dfLambda, Color = Grayscale(curveColor) });
                        plotter.Draw();

                        var rgbCurveColor = RGB(curveColor);
                        var rgbGrayColor = RGB(Grayscale(curveColor));

                        var msgParsed = "<strong style='color:" + rgbCurveColor + "'>" + f.ToString() + "</strong>";
                        var derivative = "<strong style='color:" + rgbGrayColor + "'>" + df.ToString() + "</strong>";
                        Write("<hr /> Parsed: <br />" + msgParsed + "<br /> Derivative: <br /> " + derivative + "<hr />", resultDiv);
                    }
                    else
                    {
                        var error = string.Join("<br />", result.Expectations);
                        Write("<h1 style='color:red'>" + error + "</h1>", resultDiv);
                    }

                }
            };

            var btnEvaluate = new HTMLButtonElement
            {
                InnerHTML = "Evaluate",
                OnClick = ev =>
                {
                    if (evalInput.Value == "")
                    {
                        Write("<h1 style='color:red'>Input is not valid!</h1>", resultDiv);
                        return;
                    }

                    var result = Parser.TryParseInput(evalInput.Value);
                    if (result.WasSuccessful)
                    {
                        resultDiv.InnerHTML = "";
                        var expression = result.Value;
                        var eval = Expr.Evaluate(expression);

                        Write("<h4 style='color:green'>" +
                                "Parsed: " + expression.ToString() + "<br />" +
                                "Answer: " + eval.ToString()
                            + "</h4>", resultDiv);
                    }
                    else
                    {
                        var error = string.Join("<br />", result.Expectations);
                        Write("<h1 style='color:red'>" + error + "</h1>", resultDiv);
                    }

                }
            };

            var slider = new HTMLInputElement { Type = InputType.Range };

            btnEvaluate.Style.Width = "90%";
            btnEvaluate.Style.Margin = "5px";
            btnEvaluate.Style.Height = "40px";
            btnPlot.Style.Margin = "5px";
            btnPlot.Style.Height = "40px";
            btnPlot.Style.Width = "90%";

            var layout = Table(
                    Row(Table(
                            Row(Label("Expression"), exprInput),
                            Row(Label("Variable"), variableInput),
                            Row(Label("XAxis step"), deltaXInput),
                            Row(Label("XMin"), xminInput),
                            Row(Label("XMax"), xmaxInput),
                            Row(Label("YMin"), yminInput),
                            Row(Label("YMax"), ymaxInput),
                            Row(btnPlot, 2),
                            Row(new HTMLHRElement(), 2),
                            Row(Label("Expression"), evalInput),
                            Row(btnEvaluate, 2),
                            Row(resultDiv, 2)),
                        Table(
                            Row(plotter.Canvas)))
                );

            this.container = layout;
        }