Arc de cercle

[(gile)]

Salut,

Ce coup ci, rien à voir avec AutoCAD, juste un peu de géométrie.

J'ai voulu m'essayer un peu plus sérieusement à ASP .NET (de la programmation web "côté serveur") avec une nouvelle page sur gileCAD qui permet de déterminer les différents dimensions d'un arc de cercle en en spécifiant deux.

Côté "vue" (HTML/CSS), placer les composants sur une image depuis le CSS est presque aussi pénible faire une boite de dialogue en DCL. Le wysiwyg de Visual Studio ne fonctionne pas vraiment et j'ai du tout faire par tâtonnements. Je n'ai pu tester que sur Firefox et Edge (IE ne prends pas en charge certaines fonctionnalités  du CSS).

Côté "programme", j'étais bien plus à l'aise, on fait tout en C# .NET.

[lili2006]

Bonjour à toutes et tous,

 

Merci (gile), sympa cette appli !😃

[Fraid]

Bonjour,

Impressionnant, je ne connaissais pas cette possibilité avec ASP.

Je viens d'essayer sur Chrome, cela fonctionne aussi.

J'utilise l’élément html <canvas> pour dessiner sur une page html.

C'est coté client, et utilise du javascript qu'on peut écrire en Autolisp après extraction de données d'objets (polylignes, lignes, cercles, arcs, texte et hachures). 

Mais la technologie ASP donne envie et offre apparemment bien plus de possibilités.

[(gile)]

Merci à vous.

@Fraid Je suis vraiment débutant en programmation Web. Je n'ai jamais fait que ce petit site et quelques services web pour tester. J'ai utilisé très peu de JavaScript (trois fonctions dans la page maitre pour changer de thème et une autre dans cette page pour remettre à zéro les résultats quand une liste déroulante est modifiée).

Le framework ASP .NET permet des trucs intéressants que j'ai essayé d'utiliser comme l'utilisation d'une "page maitre" et de "pages de contenu" mais le véritable intérêt, c'est la programmation côté serveur (il faut que l'hébergeur permette l'utilisation de ASP .NET). Tous les calculs sont faits en C# dans un fichier .cs séparé (code behind) exactement comme on le fait avec une application Windows ou WPF. Ici ça ne représente pas énormément de code (environ 300 lignes avec les commentaires), mais on peut utiliser toute la puissance de .NET sans que le client n'ait à installer .NET (cette page web est utilisable depuis MAC ou Linux -il risque d'y avoir des problèmes de taille d'affichage avec Android).
Et en plus, on fait tout depuis Visual Studio.

[Fraid]

Sinon, après un F12 sur ton site, j'ai regarder ton css.

Je pense qu'il y a moyen de l' alléger.

Déjà la première ligne body{...}  doit suffire puisque c'est descendant, 

On commence par les éléments embrassant, puis on règles le cas par cas.

Les variables déclarées par root sont mieux au début du css (si tu veux appliquée une couleur à un élément déclaré avant ...)

regarde bien les valeurs qui se répètent.

Quote

Je suis vraiment débutant en programmation Web

C'est pire qu'en Autolisp, il y a tellement de technologie différentes qui évoluent sans cesse que débutant nous le resterons.

[(gile)]

57 minutes ago, Fraid said:

Je pense qu'il y a moyen de l' alléger.

Très certainement, il doit y avoir une dizaine d'années que j'ai fait ça à partir d'exemples glanés dans des tutoriels et depuis, j'ai ajouté des couches sans chercher vraiment à optimiser... En tous cas, merci pour la remarque.

Je ne pense pas qu'il soit très judicieux que je publie les codes de cette page web (trop de liens avec le reste du site), mais, pour ceux que ça intéresse, voici ceux d'une application WPF similaire (plus l'exécutable en fichier joint).

Le code XAML qui décrit la fenêtre (pendant du HTML/CSS) :

<Window x:Class="DimensionsArc.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DimensionsArc"
        mc:Ignorable="d"
        Title="Dimensions dans l'arc de cercle" Height="562" Width="836" ResizeMode="NoResize">
    <Window.CommandBindings>
        <CommandBinding Command="{x:Static local:MainWindow.CalculCmd}"
                        Executed="CalculCmdExecuted"
                        CanExecute="CalculCmdCanExecute" />
    </Window.CommandBindings>
    <Grid Height="533" Width="830">
        <Grid.Background>
            <ImageBrush ImageSource="DimensionsArc.png" Stretch="None" />
        </Grid.Background>
        <Label Content="Précision :" HorizontalAlignment="Left" Margin="50,54,0,0" VerticalAlignment="Top"/>
        <ComboBox HorizontalAlignment="Left" Margin="118,58,0,0" VerticalAlignment="Top" Width="70"
                  ItemsSource="{Binding Precisions}" SelectedValue="{Binding Format}"/>
        <TextBlock Margin="429,30,301,470" VerticalAlignment="Center" HorizontalAlignment="Center" Width="60" 
                   Background="#FDF6E3" Foreground="#268BD2" TextAlignment="Center" Text="{Binding Arc}" />
        <TextBlock Margin="483,128,247,372" VerticalAlignment="Center" HorizontalAlignment="Center" Width="60" 
                   Background="#FDF6E3" Foreground="#268BD2" TextAlignment="Center" Text="{Binding Fleche}"/>
        <TextBlock Margin="425,237,305,263" VerticalAlignment="Center" HorizontalAlignment="Center" Width="60" 
                   Background="#FDF6E3" Foreground="#268BD2" TextAlignment="Center" Text="{Binding Corde}"/>
        <TextBlock Margin="425,312,305,188" VerticalAlignment="Center" HorizontalAlignment="Center" Width="60" 
                   Background="#FDF6E3" Foreground="#268BD2" TextAlignment="Center" Text="{Binding Angle}"/>
        <TextBlock Margin="592,348,138,152" VerticalAlignment="Center" HorizontalAlignment="Center" Width="60" 
                   Background="#FDF6E3" Foreground="#268BD2" TextAlignment="Center" Text="{Binding Rayon}"/>
        <Label Margin="46,309,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="225">
            Entrer deux valeurs pour lancer le calcul
        </Label>
        <ComboBox Margin="50,348,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="110" 
                  ItemsSource="{Binding Dimensions}" SelectedIndex="{Binding TypeDimension1}"/>
        <ComboBox Margin="50,387,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="110" 
                  ItemsSource="{Binding Dimensions}" SelectedIndex="{Binding TypeDimension2}"/>
        <TextBox Margin="176,349,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="60" TextAlignment="Right" 
                 Text="{Binding Dimension1, UpdateSourceTrigger=PropertyChanged}"/>
        <TextBox Margin="176,388,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="60" TextAlignment="Right" 
                 Text="{Binding Dimension2, UpdateSourceTrigger=PropertyChanged}"/>
        <Button Margin="50,445,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="75" 
                Command="{x:Static local:MainWindow.CalculCmd}">Calculer</Button>
    </Grid>
</Window>

Le 'code behind' (C#) avec les calculs :

using System.ComponentModel;
using System.Linq;
using System.Windows;
using System.Windows.Input;

using static System.Math;

namespace DimensionsArc
{
    public enum TypeDimension { Angle, Arc, Corde, Fleche, Rayon }

    /// <summary>
    /// Logique d'interaction pour MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        #region INotifyPropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;

        private void NotifyPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion;

        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;
        }

        double angle, arc, corde, fleche, rayon, dim1, dim2;
        string dimension1, dimension2, format = "0";
        bool validDimension1, validDimension2;
        TypeDimension typeDimension1 = TypeDimension.Corde;
        TypeDimension typeDimension2 = TypeDimension.Fleche;

        #region Propriétés (Binding)
        public string Angle
        {
            get { return Degres(angle).ToString(format) + "°"; }
            set { angle = Radians(double.Parse(value.TrimEnd('°'))); NotifyPropertyChanged(nameof(Angle)); }
        } 

        public string Arc
        {
            get { return arc.ToString(format); }
            set { arc = double.Parse(value); NotifyPropertyChanged(nameof(Arc)); }
        }

        public string Corde
        {
            get { return corde.ToString(format); }
            set { corde = double.Parse(value); NotifyPropertyChanged(nameof(Corde)); }
        }

        public string Fleche
        {
            get { return fleche.ToString(format); }
            set { fleche = double.Parse(value); NotifyPropertyChanged(nameof(Fleche)); }
        }

        public string Rayon
        {
            get { return rayon.ToString(format); }
            set { rayon = double.Parse(value); NotifyPropertyChanged(nameof(Rayon)); }
        }

        public string[] Precisions =>
            new[] { "0", "0.0", "0.00", "0.000", "0.0000" };

        public string Format
        {
            get { return format; }
            set { format = value; NotifyPropertyChanged(nameof(Format)); Calculer(); }
        }

        public string[] Dimensions =>
            new[] { "Angle (°)", "Longueur d'arc", "Corde", "Flèche", "Rayon" };

        public int TypeDimension1
        {
            get { return (int)typeDimension1; }
            set
            {
                typeDimension1 = (TypeDimension)value;
                Reset();
                NotifyPropertyChanged(nameof(TypeDimension1));
            }
        }

        public int TypeDimension2
        {
            get { return (int)typeDimension2; }
            set
            {
                typeDimension2 = (TypeDimension)value;
                Reset();
                NotifyPropertyChanged(nameof(TypeDimension2));
            }
        }

        public string Dimension1
        {
            get { return dimension1; }
            set
            {
                dimension1 = value;
                validDimension1 = 
                    double.TryParse(dimension1, out dim1) && 
                    0.0 < dim1 && 
                    (typeDimension1 != TypeDimension.Angle || dim1 < 360.0);
                NotifyPropertyChanged(nameof(Dimension1));
            }
        }

        public string Dimension2
        {
            get { return dimension2; }
            set
            {
                dimension2 = value;
                validDimension2 = 
                    double.TryParse(dimension2, out dim2) && 
                    0.0 < dim2 && 
                    (typeDimension2 != TypeDimension.Angle || dim2 < 360.0);
                NotifyPropertyChanged(nameof(Dimension2));
            }
        }

        private void Reset() => Angle = Arc = Corde = Fleche = Rayon = "0";
        #endregion

        #region Command (Binding)
        public static RoutedCommand CalculCmd = new RoutedCommand();

        private void CalculCmdExecuted(object sender, ExecutedRoutedEventArgs e) =>
            Calculer();

        private void CalculCmdCanExecute(object sender, CanExecuteRoutedEventArgs e) =>
            e.CanExecute = typeDimension1 != typeDimension2 && validDimension1 && validDimension2;
        #endregion

        #region Calculs
        private void Calculer()
        {
            switch (typeDimension1)
            {
                case TypeDimension.Angle:
                    angle = Radians(dim1);
                    switch (typeDimension2)
                    {
                        case TypeDimension.Rayon:
                            rayon = dim2;
                            CalculerAngleRayon();
                            break;
                        case TypeDimension.Arc:
                            arc = dim2;
                            CalculerAngleArc();
                            break;
                        case TypeDimension.Corde:
                            corde = dim2;
                            CalculerAngleCorde();
                            break;
                        case TypeDimension.Fleche:
                            fleche = dim2;
                            CalculerAngleFleche();
                            break;
                    }
                    break;
                case TypeDimension.Arc:
                    arc = dim1;
                    switch (typeDimension2)
                    {
                        case TypeDimension.Angle:
                            angle = Radians(dim2);
                            CalculerAngleArc();
                            break;
                        case TypeDimension.Corde:
                            corde = dim2;
                            CalculerArcCorde();
                            break;
                        case TypeDimension.Fleche:
                            fleche = dim2;
                            CalculerArcFleche();
                            break;
                        case TypeDimension.Rayon:
                            rayon = dim2;
                            CalculerArcRayon();
                            break;
                    }
                    break;
                case TypeDimension.Corde:
                    corde = dim1;
                    switch (typeDimension2)
                    {
                        case TypeDimension.Angle:
                            angle = Radians(dim2);
                            CalculerAngleCorde();
                            break;
                        case TypeDimension.Arc:
                            arc = dim2;
                            CalculerArcCorde();
                            break;
                        case TypeDimension.Fleche:
                            fleche = dim2;
                            CalculerCordeFleche();
                            break;
                        case TypeDimension.Rayon:
                            rayon = dim2;
                            CalculerCordeRayon();
                            break;
                    }
                    break;
                case TypeDimension.Fleche:
                    fleche = dim1;
                    switch (typeDimension2)
                    {
                        case TypeDimension.Angle:
                            angle = Radians(dim2);
                            CalculerAngleFleche();
                            break;
                        case TypeDimension.Arc:
                            arc = dim2;
                            CalculerArcFleche();
                            break;
                        case TypeDimension.Corde:
                            corde = dim2;
                            CalculerCordeFleche();
                            break;
                        case TypeDimension.Rayon:
                            rayon = dim2;
                            CalculerFlecheRayon();
                            break;
                    }
                    break;
                case TypeDimension.Rayon:
                    rayon = dim1;
                    switch (typeDimension2)
                    {
                        case TypeDimension.Angle:
                            angle = Radians(dim2);
                            CalculerAngleRayon();
                            break;
                        case TypeDimension.Arc:
                            arc = dim2;
                            CalculerArcRayon();
                            break;
                        case TypeDimension.Corde:
                            corde = dim2;
                            CalculerCordeRayon();
                            break;
                        case TypeDimension.Fleche:
                            fleche = dim2;
                            CalculerFlecheRayon();
                            break;
                    }
                    break;
            }

            // affichage des résultats dans la page.
            var values = new[] { angle, arc, corde, fleche, rayon };
            if (values.Any(v => double.IsNaN(v)))
            {
                Reset();
            }
            else
            {
                Arc = arc.ToString(Format);
                Corde = corde.ToString(Format);
                Fleche = fleche.ToString(Format);
                Rayon = rayon.ToString(Format);
                Angle = Degres(angle).ToString(Format) + "°";
            }
        }

        private double Radians(double degres) => degres * PI / 180.0;

        private double Degres(double radians) => radians * 180.0 / PI;

        private void CalculerAngleRayon()
        {
            arc = angle * rayon;
            double demiCorde = rayon * Sin(angle * 0.5);
            corde = 2.0 * demiCorde;
            fleche = demiCorde * Sin(angle * 0.25);
        }

        private void CalculerAngleFleche()
        {
            double demiCorde = fleche / Tan(angle * 0.25);
            corde = 2.0 * demiCorde;
            rayon = demiCorde / Sin(angle * 0.5);
            arc = angle * rayon;
        }

        private void CalculerAngleCorde()
        {
            double demiCorde = corde * 0.5;
            rayon = demiCorde / Sin(angle * 0.5);
            fleche = demiCorde * Tan(angle * 0.25);
            arc = angle * rayon;
        }

        private void CalculerAngleArc()
        {
            rayon = arc / angle;
            double demiCorde = rayon * Sin(angle * 0.5);
            corde = 2.0 * demiCorde;
            fleche = demiCorde * Tan(angle * 0.25);
        }

       private void CalculerFlecheRayon()
        {
            double apotheme = rayon - fleche;
            corde = 2 * Sqrt(rayon * rayon - apotheme * apotheme);
            angle = 2.0 * Acos(apotheme / rayon);
            arc = angle * rayon;
        }

        private void CalculerCordeRayon()
        {
            double demiCorde = corde * 0.5;
            fleche = rayon - Sqrt(rayon * rayon - demiCorde * demiCorde);
            angle = 2.0 * Asin(demiCorde / rayon);
            arc = angle * rayon;
        }

        private void CalculerCordeFleche()
        {
            double demiCorde = corde * 0.5;
            angle = 4.0 * Atan2(fleche, demiCorde);
            rayon = demiCorde / Sin(angle * 0.5);
            arc = angle * rayon;
        }

        private void CalculerArcRayon()
        {
            if (2.0 * PI * rayon < arc)
            {
                corde = double.NaN;
                fleche = double.NaN;
                angle = double.NaN;
            }
            else
            {
                angle = arc / rayon;
                corde = 2.0 * rayon * Sin(angle * 0.5);
                fleche = rayon - rayon * Cos(angle * 0.5);
            }
        }

        private void CalculerArcFleche()
        {
            if (0.36230568 * arc < fleche) //(1.138216853 * arc < fleche * PI)
            {
                rayon = double.NaN;
                corde = double.NaN;
                angle = double.NaN;
            }
            else
            {
                double k = 2.0 * fleche / arc;
                double a = 2.0 * k;
                for (int i = 0; i < 8; i++)
                {
                    a -= (Cos(a) + k * a - 1.0) / (-Sin(a) + k);
                }
                angle = 2.0 * a;
                rayon = arc / angle;
                corde = 2.0 * rayon * Sin(a);
            }
        }

        private void CalculerArcCorde()
        {
            if (arc <= corde)
            {
                rayon = double.NaN;
                fleche = double.NaN;
                angle = double.NaN;
            }
            else
            {
                double k = corde / arc;
                double a = Sqrt(6.0 - 6.0 * k);
                for (int i = 0; i < 8; i++)
                {
                    a -= (Sin(a) - k * a) / (Cos(a) - k);
                }
                angle = 2.0 * a;
                rayon = arc / angle;
                fleche = rayon - rayon * Cos(a);
            }
        }
        #endregion
    }
}

 

DimensionsArc.zip

[Curlygoth]

Vraiment sympa cette nouvelle page !

merci pour le partage ça m'evitera d'ouvrir mon classeur excel calcul XD

[Fraid]

Merci pour ce partage.

du coup j'ai une question.

Tu utilise #region une "C# preprocessor directives"

Cela te permet d'encapsuler les variables à l’intérieur de celle ci, si j'ai bien compris.

est ce pour évité de créer une nouvelle class?

Mon réflexe serais de construire un objet dans une class à part en Java.

Est ce qu'il faut j'oublie cela?

[(gile)]

12 hours ago, Fraid said:

Tu utilise #region une "C# preprocessor directives"

J'imagine que tu as vu ça dans le code source de la page web. Ce que tu vois dans ce "code source" n'est pas ce que j'ai écrit dans Visual Studio, c'est ce qu'à généré Visual Studio à la compilation.
En bref, quand tu crées un un nouveau WebForm (avec ou sans page maitre) dans Visual Studio, deux fichiers sont automatiquement créés : un fichier .aspx dans lequel on définit l'apparence de la page avec des balises html et asp (pour les contrôles) et, si besoin des scripts JavaScript ; et un autre fichier .aspx.cs dans lequel une classe est prévue pour écrire le "code behind", autrement dit le fonctionnement des contrôles aspx exécuté côté serveur.

C'est la même chose que pour une application WPF (CF ci-dessus), Visual Studio crée automatiquement un fichier .xaml et un fichier .xaml.cs pour le code behind.

Le code de la page en aspx dans Visual Studio :

<%@ Page Title="" Language="C#" MasterPageFile="~/GileCAD.Master" AutoEventWireup="true" CodeBehind="DimensionsArc.aspx.cs" Inherits="gileCAD.WebForm12" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <script type="text/javascript">
        function resetOutput() {
            ["<%= txtAngle.ClientID %>", "<%= txtArc.ClientID %>", "<%= txtCorde.ClientID %>", "<%= txtFleche.ClientID %>", "<%= txtRayon.ClientID %>"]
            .forEach((id) => { document.getElementById(id).value = "";
            })
        }
    </script>
    <p id="titre">
        Dimensions dans un arc de cercle
    </p>
    <div id="dimArcImage">
        <asp:TextBox runat="server" ID="txtArc" ClientIDMode="Static" CssClass="output txtArc" Enabled="true" />
        <asp:TextBox runat="server" ID="txtCorde" ClientIDMode="Static" CssClass="output txtCorde" Enabled="false" />
        <asp:TextBox runat="server" ID="txtAngle" ClientIDMode="Static" CssClass="output txtAngle" Enabled="false" />
        <asp:TextBox runat="server" ID="txtFleche" ClientIDMode="Static" CssClass="output txtFleche" Enabled="false" />
        <asp:TextBox runat="server" ID="txtRayon" ClientIDMode="Static" CssClass="output txtRayon" Enabled="false" />
        <asp:DropDownList runat="server" ID="cboDimension1" CssClass="ddl ddlDim1" onchange="resetOutput()">
            <asp:ListItem>Angle</asp:ListItem>
            <asp:ListItem>Arc</asp:ListItem>
            <asp:ListItem>Corde</asp:ListItem>
            <asp:ListItem>Flèche</asp:ListItem>
            <asp:ListItem>Rayon</asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList runat="server" ID="cboDimension2" CssClass="ddl ddlDim2"  onchange="resetOutput()">
            <asp:ListItem>Angle</asp:ListItem>
            <asp:ListItem>Arc</asp:ListItem>
            <asp:ListItem>Corde</asp:ListItem>
            <asp:ListItem>Flèche</asp:ListItem>
            <asp:ListItem>Rayon</asp:ListItem>
        </asp:DropDownList>
        <asp:TextBox runat="server" ID="txtDimension1" CssClass="input txtDim1" />
        <asp:TextBox runat="server" ID="txtDimension2" CssClass="input txtDim2" />
        <asp:Button runat="server" ID="btnCalcul" CssClass="btnCalcul" Text="Calculer" OnClick="btnCalculer_Click" />
        <asp:Label runat="server" ID="lblPrecision" CssClass="lblPrecision" Text="Précision :" />
        <asp:DropDownList runat="server" ID="ddlPrecision" CssClass="ddl ddlPrecision" AutoPostBack="true" OnSelectedIndexChanged="btnCalculer_Click">
            <asp:ListItem Selected="True">0</asp:ListItem>
            <asp:ListItem>0.0</asp:ListItem>
            <asp:ListItem>0.00</asp:ListItem>
            <asp:ListItem>0.000</asp:ListItem>
            <asp:ListItem>0.0000</asp:ListItem>
        </asp:DropDownList>
    </div>
</asp:Content>

 

[Fraid]

Quote

généré Visual Studio à la compilation

d'accord, je n'avais pas compris cela.