courbe-amont-aval
v1.0.10
Published
Cette librairie est installé via [Angular CLI](https://github.com/angular/angular-cli) version 15.2.0.
Readme
CourbeAmontAval
Cette librairie est installé via Angular CLI version 15.2.0.
🖥️ Installation du package
npm i courbe-amont-avalOU
(préférence pour )
yarn add courbe-amont-aval=> Ou Si vous avez reçu le fichier de la librarie ,il suffit de l'inclure dans votre application
et d'installer le package dans la librairie en vous dirigeant vers le repertoire
cd projects\courbe-amont-aval\Dans ce même script executé la commande ci-dessous
yarn install✨ Inclure dans votre Module
Veuillez mettre dans votre module la ligne (Soit module principal app.module.ts) Soit celui qui va utiliser votre composant
...
import { CourbeAmontAvalModule } from 'courbe-amont-aval';
imports:[
...
CourbeAmontAvalModule
]
};🚀 Utilisation
Code Html : Par défaut l'accès se fait sur le http://localhost:51000/Acquisition Un paramètrage d'ip sera surement nécessaire mais vous pourrez déjà voir un message de ce type
<CourbeAmontAval></CourbeAmontAval>Champs Input:
| Input | Valeur Défaut |
| ------- | ---------------- |
| NomBobine | (Vide) |
| AdresseIP | 172.0.0.1 |
| Port | 51000 |
| ControllerBaseUrl | Acquisition |
| colorErreur | #FF3A43 |
| colorSchemeAval | {
name: 'myScheme',
selectable: true,
group: ScaleType.Ordinal,
domain: ['#40112e', '#7aa3e5','#a8385d']
} |
colorSchemeAmont | {
name: 'myScheme2',
selectable: true,
group: ScaleType.Ordinal,
domain: ['#a8385d', '#7aa3e5','#40112e']
} |
📶 API Angular
NomBobine
Le nom de la bobine doit être mappé comme cela:
<CourbeAmontAval [NomBobine]="MaBobine"></CourbeAmontAval>Il est préférable d'affecter le nom via une fonction A chaque changement du paramètre, un appel API est effectué pour recharger
{
public MaBobine:string ="123456";
// Va permettre de changer la bobine en cours par celle demandé de l'api
ChangementDeBobine(bobine) {
this.MaBobine = bobine;
}
}Renseigner la bonne api
Vous avez la possibilité de changer l'api pour que la route soit bien adapté
Il suffit d'ajouter des inputs directement
<CourbeAmontAval [AdresseIP]="'192.168.1.10'" [Port]="51000" [ControllerBaseUrl]="'api/Acquisition'" ></CourbeAmontAval>==> appelle effectué avec cette exemple http://192.168.1.10:51000/api/Acquisition/[ROUTE] OU
via des variables
<CourbeAmontAval [AdresseIP]="AdresseIP" [Port]="Port" [ControllerBaseUrl]="ControllerBaseUrl" ></CourbeAmontAval>Et intégrer dans la partie typescript
{
public AdresseIP:string ="192.168.1.10";
public Port:number=51000;
public ControllerBaseUrl:string="api/Acquisition";
// Va permettre de changer la bobine en cours par celle demandé de l'api
ChangementDeBobine(bobine) {
this.MaBobine = bobine;
}
}En sachant que deux routes sont attendu sur un protocole GET:
[HttpGet]
[Route("TraitementData/{NomBobine}")]
ET
[HttpGet]
[Route("Parametres")]Changement couleur Courbe
Pour changer la couleur des erreurs qui par défaut à l'hexa : #FF3A43 
<CourbeAmontAval [colorErreur]="'#123456'"></CourbeAmontAval>OU via une variable
<CourbeAmontAval [colorErreur]="CouleurErreur"></CourbeAmontAval>et via le typescript du composant
{
public CouleurErreur:string ="#123456";
}
======================================================================================================
Pour changer les autres couleurs amont et aval qui est séparé en trois partie Tête, Corps et Queue
<CourbeAmontAval [colorSchemeAval]="schemeAval" [colorSchemeAmont]="schemeAmont"></CourbeAmontAval>
import { Color } from '@swimlane/ngx-charts';
{
public CouleurErreur:string =
schemeAval:Color = {
name: 'myScheme',
selectable: true,
group: ScaleType.Ordinal,
domain: ['#40112e', '#7aa3e5','#a8385d'] // Partie des hexa à changer pour la couleur allant de gauche à droite
};
schemeAmont:Color = {
name: 'myScheme2',
selectable: true,
group: ScaleType.Ordinal,
domain: ['#40112e', '#7aa3e5','#a8385d'] // Partie des hexa à changer pour la couleur allant de gauche à droite
};
}
Attention car l'ordre change selon si on est amont ou en aval Aval => Queue,Corp,Aval Amont => Tete,Corp,Queue
Montrer/Cacher les titres Amont/Aval
Par défaut ils sont montré
Cacher
<CourbeAmontAval [DisplayTitre]="false" ></CourbeAmontAval>Montrer
<CourbeAmontAval [DisplayTitre]="true" ></CourbeAmontAval>
Redimenssionner les graphiques en px
Par défaut les graphiques prendront le maximum de place dans une div Il est possible de leur définir à chacun une taille (Mettre 0 si vous voulez mettre la valeur par défaut)
<CourbeAmontAval [viewAval]="viewAval" [viewAmont]="viewAval" ></CourbeAmontAval>
{
viewAval = [400,300]; // Largeur,Hauteur en px
viewAmont = [400,300];
}
Output Donnée bobine
Lorsque vous changez votre bobine, un appel Api se fera automatiquement, il peut-être intéréssant de récupérer le données de la bobine lu des calculs affectés
Vous pouvez alors ajouter l'output BobineRecu
<CourbeAmontAval (BobineRecu)="ReceptionBobine($event)" ></CourbeAmontAval>import { TraitementData } from 'courbe-amont-aval/lib/Model/TraitementData';
{
/// Récupération des données dans traitement data
ReceptionBobine(event:TraitementData) {
}
}Voici un exemple de json reçu
{
"resultatProfil": {
"QueueAval": {
"indexDebutRegion": 4,
"indexFinRegion": 2331,
"ecartType": 6.2660403,
"hmoy": 0,
"hmax": 0,
"hmin": 0,
"nbDesserrage": 0,
"lgDesserage": 0,
"nbDecalage": 0,
"lstIndexDesserage": [],
"lstIndexDecalage": [],
"isFinDesserage": false
},
"CorpAval": {
"indexDebutRegion": 2332,
"indexFinRegion": 6718,
"ecartType": 1.2477196,
"hmoy": 0,
"hmax": 0,
"hmin": 0,
"nbDesserrage": 0,
"lgDesserage": 0,
"nbDecalage": 0,
"lstIndexDesserage": [],
"lstIndexDecalage": [],
"isFinDesserage": false
},
"TeteAval": {
"indexDebutRegion": 6719,
"indexFinRegion": 9046,
"ecartType": 0.5329925,
"hmoy": 0,
"hmax": 0,
"hmin": 0,
"nbDesserrage": 0,
"lgDesserage": 0,
"nbDecalage": 0,
"lstIndexDesserage": [],
"lstIndexDecalage": [],
"isFinDesserage": false
},
"TeteAmont": {
"indexDebutRegion": 11486,
"indexFinRegion": 13813,
"ecartType": 0.82115024,
"hmoy": 1.1887555,
"hmax": 3.2056901,
"hmin": -1.3047545,
"nbDesserrage": 0,
"lgDesserage": 0,
"nbDecalage": 3,
"lstIndexDesserage": [],
"lstIndexDecalage": [
{
"indexDebut": 11486,
"indexFin": 12262
},
{
"indexDebut": 13266,
"indexFin": 13291
},
{
"indexDebut": 13371,
"indexFin": 13388
}
],
"isFinDesserage": false
},
"CorpAmont": {
"indexDebutRegion": 13814,
"indexFinRegion": 15602,
"ecartType": 1.0244002,
"hmoy": 1.7684081,
"hmax": 2.1652849,
"hmin": -1.8102629,
"nbDesserrage": 0,
"lgDesserage": 0,
"nbDecalage": 1,
"lstIndexDesserage": [],
"lstIndexDecalage": [
{
"indexDebut": 14452,
"indexFin": 14537
}
],
"isFinDesserage": false
},
"QueueAmont": {
"indexDebutRegion": 15603,
"indexFinRegion": 17928,
"ecartType": 8.179386,
"hmoy": 2.8047452,
"hmax": 70.14379,
"hmin": -2.935118,
"nbDesserrage": 0,
"lgDesserage": 0,
"nbDecalage": 6,
"lstIndexDesserage": [],
"lstIndexDecalage": [
{
"indexDebut": 15539,
"indexFin": 15612
},
{
"indexDebut": 16126,
"indexFin": 16355
},
{
"indexDebut": 16379,
"indexFin": 16659
},
{
"indexDebut": 17844,
"indexFin": 17853
},
{
"indexDebut": 17879,
"indexFin": 17880
},
{
"indexDebut": 17906,
"indexFin": 17907
}
],
"isFinDesserage": false
}
},
"largeurOeil": 104.91998,
"largeurMeplat": 0,
"penteBobine": 0.23223895,
"lstIndexMax": [
{
"isEmpty": false,
"x": 621.4359,
"y": 1.8798218
},
etc liste des max par zone détecté
],
"isMeplat": false,
"indexMeplat": {
"indexDebut": 17926,
"indexFin": 0
},
"ecartPointX": 0.042999998, // Ecart entre deux points
"nomBobine": "123456Rapport.txt", // nomfichier
"dataOrdonnee": [
{
"isEmpty": false,
"x": 0,
"y": 280
},
{
"isEmpty": false,
"x": 0.042999994,
"y": 280
}
Liste de tous les points du graphique
],
"largeurExterieur": 665.8119,
"totalDesserage": 0,
"totalDecalage": 10
}📶 API C#
Voici le code nécéssaire à implémenter
Code des Models qui doit être transmis
Classe TraitementData
public class TraitementData
{
// ===========================================================
// Propriétés des calculs sur le profil
public Dictionary<EnumRegionData, RegionData> ResultatProfil { get; set; } = new Dictionary<EnumRegionData, RegionData>();
/// <summary>
/// Largeur de l'oeil calculé
/// </summary>
public float LargeurOeil { get; set; }
/// <summary>
/// Largeur du meplat
/// </summary>
public float LargeurMeplat { get; set; } = 0.0f;
/// <summary>
/// Pente sur la bobine
/// </summary>
public float PenteBobine { get; set; } = 0.0f;
/// <summary>
/// Liste des Max pour le calcul de la pente
/// </summary>
public List<PointF> LstIndexMax { get; set; } = new List<PointF>();
/// <summary>
/// Détection si largeur méplat
/// </summary>
public bool IsMeplat { get; set; } = false;
/// <summary>
/// Liste des index où se trouve le méplat
/// </summary>
public DoubleIndex IndexMeplat { get; set; } = new DoubleIndex();
/// <summary>
/// Ecart des x par rapport à l'index
/// </summary>
public float EcartPointX { get; set; } = 0.0f;
/// <summary>
/// Nom de la Bobine
/// </summary>
public string NomBobine { get; set; } = "";
/// <summary>
/// Liste des points
/// </summary>
public List<PointF> DataOrdonnee { get; private set; } = new List<PointF>();
/// <summary>
/// Largeur Exterieur de la bobine (sans le noyau)
/// </summary>
public float LargeurExterieur { get; set; }
/// <summary>
/// Total desserage trouvé sur la bobine
/// </summary>
public int TotalDesserage { get; set; }
/// <summary>
/// Total decalage trouvé sur la bobine
/// </summary>
public int TotalDecalage { get; set; }
/// <summary>
/// Valeur limite à fond du capteur
/// </summary>
public float ValeurMaxFondCapteur = 500.0f;
/// <summary>
///
/// </summary>
public DateTime dateTraitement = DateTime.MinValue;
}
public class RegionData
{
/// <summary>
/// Index Où se trouve l'index de début de région sur la List<PointF> reçu
/// </summary>
public int IndexDebutRegion { get; set; }
/// <summary>
/// Index Où se trouve l'index de fin de région sur la List<PointF> reçu
/// </summary>
public int IndexFinRegion { get; set; }
/// <summary>
/// Ecart Type de la Zone
/// </summary>
public float EcartType { get; set; }
/// <summary>
/// Il s’agit de la moyenne des distances en Y mesurées dans la zone.
/// </summary>
public float Hmoy { get; set; }
/// <summary>
/// La formule est distance maxi mesurée – la moyenne Corp (Hmoyc).
/// </summary>
public float Hmax { get; set; }
/// <summary>
/// La formule est la distance mini mesuré – la moyenne Corp
/// </summary>
public float Hmin { get; set; }
/// <summary>
/// Nombre de fois où l'on a détecté des absences de mesure supérieures ou égales à 1 mm
/// </summary>
public int NbDesserrage { get; set; }
/// <summary>
/// Cumul des longueurs unitaires de chaque desserrage.
/// </summary>
public float LgDesserage { get; set; }
/// <summary>
/// Nombre de fois ou le rapport H/L est supérieur à 0.5
/// Ces décalages peuvent générer un risque de pliures ou de dégradations des spires et ce que ce soit en face supérieure ou inférieure.
/// </summary>
public int NbDecalage { get; set; }
/// <summary>
/// Index des Desserage de la zone
/// Permettant de les retrouvés
/// </summary>
public List<DoubleIndex> LstIndexDesserage { get; set; } = new List<DoubleIndex>();
/// <summary>
/// Zone dans lequelle on a détecté un décalage
/// </summary>
public List<DoubleIndex> LstIndexDecalage { get; set; } = new List<DoubleIndex>();
/// <summary>
/// IsFinDesserage permet de savoir si à la fin on ne détecte pas un desserage entre deux zone
/// </summary>
public bool IsFinDesserage { get; set; }
/// <summary>
/// Constructeur Vide par défaut les valeurs sont 0
/// </summary>
public RegionData() {
}
}
public class DoubleIndex
{
public int IndexDebut { get; set; }
public int IndexFin { get; set; }
}
public enum EnumRegionData
{
QueueAval,
CorpAval,
TeteAval,
TeteAmont,
CorpAmont,
QueueAmont
}Classe Paramètre : Deux paramètres seront néccessairement créé
public class Parametre
{
public Parametre(string Nom,string NomCode, string description,float Valeur,string DefaultValeur, string Icone,string Limite)
{
this.Nom = Nom;
this.Valeur = Valeur;
this.Icone = Icone;
this.Description = description;
this.DefaultValeur = DefaultValeur;
this.Limite = Limite;
this.NomCode = NomCode;
}
/// <summary>
/// Id auto généré du parametre
/// </summary>
public int IdParametre { get; set; }
/// <summary>
/// Nom du parametre
/// </summary>
public string Nom { get; set;}
/// <summary>
/// Nom du parametre dans le code
/// </summary>
public string NomCode { get; set; }
/// <summary>
/// Valeur du parametre
/// </summary>
public float Valeur { get; set;}
/// <summary>
/// Icone du parametre affichage
/// </summary>
public string Icone { get; set; }
public string Description { get; set; }
public string DefaultValeur { get; set; }
public string Limite { get; set;}
/// <summary>
/// Date et heure de la dernière modification
/// </summary>
public DateTime DateModification { get; set; } = DateTime.Now;
}
Et enfin à implémenté dans vos Controller (Exemple de controller)
[Route("[controller]")]
[ApiController]
public class AcquisitionController : ControllerBase
{
}📶 Route Paramètres
Première Route Api à indiquer Elle permet de limiter l'affichage en y, il faut indiquer la valeur maximum et la valeur minimum qu'on souhaite imposer
/// <summary>
/// Permet d'affecter la valeur max et la valeur minimum à afficher sur le graphique
/// </summary>
/// <returns></returns>
[HttpGet]
[Route("Parametres")]
public JsonResult GetParametre() // nom de fonction changeable
{
List<Parametre> lstParam = new();
// =====> Changer cette valeur pour l'affichage du bas des y
Parametre paramMinimumYDisplay = new Parametre("MinimumYDisplay", "MinimumYDisplay", "", -10.0f, "", "", ""); // Paramètre a modifier
// =====> Changer cette valeur pour l'affichage du haut des y
Parametre paramMaximumYDisplay = new Parametre("MaximumYDisplay", "MaximumYDisplay", "", 35.0f, "", "", ""); // Paramètre a modifier
//Ajout des parametres dans la liste qu'on renvoit
lstParam.Add(paramMinimumYDisplay);
lstParam.Add(paramMaximumYDisplay);
return new JsonResult(lstParam);
}📶 Route TraitementData
Deuxième route à faire
/// <summary>
/// Récupération du dernier traitement d'analyse de bobine
/// </summary>
/// <param name="traitementData"></param>
/// <returns></returns>
[HttpGet]
[Route("TraitementData/{NomBobine}")]
public JsonResult GetTraitementByName(String NomBobine)
{
var retour = null;
if(retour == null)
{
// recherche du fichier
string contenuFichierTraitementData = RechercheFichier(nomBobine);
// Si le retour de la fonction nous donne bien du contenu dans le fichier
if (contenuFichierTraitementData != "")
{
try
{
// On va essayer de déserialisé la donnée
var lstParam = contenuFichierTraitementData.Split(Environment.NewLine); // La décomposition du fichier la première ligne possède la plupart des caractéristiques
var DonneesBrute = lstParam[0];
// Serialisation des divers données de la bobine
TraitementData data = JsonConvert.DeserializeObject<TraitementData>(DonneesBrute);
// Affectation du fichier de points
for (int i = 2; i < lstParam.Length; i++)
{
var Coordonnee = lstParam[i].Split(";"); // Décomposition des coordonnée pour chaque ligne
var x = 0.0f;
var y = 0.0f;
Single.TryParse(Coordonnee[0],out x);
Single.TryParse(Coordonnee[1], out y);
data.DataOrdonnee.Add(new PointF(x,y));
}
retour = data;
}
catch(Exception ex)
{
// Erreur lors de la décomposition
// Mettre trace içi
// retour null par défaut
}
} else
{
// Sinon on retourne null la bobine demandé n'existe pas
// Inséré trace içi bobine non trouvé
}
}
return new JsonResult(retour);
}
Chargement de fichier
Une fonction sera à écrire pour finir l'implantation
/// <summary>
/// Fonction a implémenter où l'on doit aller lire tout le contenu du fichier
/// </summary>
/// <returns></returns>
private string RechercheFichier(String NomBobine)
{
return "";
}
🍬 CSS
Width prendre toute la largeur avec les deux courbes
il faut pour cela jouer avec les deep (Faire attention à l'encapsulation) Exemple en dessous
::ng-deep .flexrow{
margin-top: 0;
width: 49%;
}