- ajout des composants CalcCanvasComponent et SectionCanvasComponent

- sections paramétrées : section trapézoïdale : ajout de l'affichage graphique des tirants

src/app/app.module.ts

@@ -19,6 +19,8 @@ import { AppErrorModule } from './error.module';
 import { CalculatorResultsComponent } from './components/calculator-results/calculator-results.component';
 import { SectionResultsComponent } from './components/section-results/section-results.component';
 import { GenericCalculatorComponent } from './calculators/generic/calculator.component';
+import { CalcCanvasComponent } from './components/canvas/canvas.component';
+import { SectionCanvasComponent } from './components/section-canvas/section-canvas.component';
 
 @NgModule({
   imports: [
@@ -38,7 +40,8 @@ import { GenericCalculatorComponent } from './calculators/generic/calculator.com
     ParamFieldLineComponent, SelectFieldLineComponent,
     CondDistriComponent, LechaptCalmonComponent, SectionParametreeComponent, GenericCalculatorComponent,
     AlertDialog,
-    CalculatorResultsComponent, SectionResultsComponent
+    CalculatorResultsComponent, SectionResultsComponent,
+    CalcCanvasComponent, SectionCanvasComponent
   ],
   entryComponents: [AlertDialog],
   bootstrap: [AppComponent]

src/app/calculators/generic/calculator.component.ts

@@ -268,8 +268,8 @@ export class GenericCalculatorComponent implements OnInit, DoCheck, Observer {
                 this.resultsComponent.addFixedResult(p, p.v, nDigits);
     }
 
-    private addSectionFixedResult(val: number, label: string, nDigits: number) {
-        this.sectionResultsComponent.addResult(val, label, nDigits);
+    private addSectionFixedResult(val: number, label: string, nDigits: number, drawLabel: string = undefined) {
+        this.sectionResultsComponent.addResult(val, label, nDigits, drawLabel);
     }
 
     private doComputeSection() {
@@ -285,74 +285,77 @@ export class GenericCalculatorComponent implements OnInit, DoCheck, Observer {
         let prec: number = this.getParameterValue("Pr"); // précision
         let nDigits = -Math.log10(prec);
 
+        let Y = prms.Y.v; // tirant d'eau original (doit être fourni à acSection.Calc() sous peine d'être modifié par les appels successifs car c'est en même temps un paramètre et une variable temporaire)
+
         // charge spécifique
-        let Hs = sect.Calc_Hs();
-        this.addSectionFixedResult(Hs, "La charge spécifique (m)", nDigits);
+        let Hs = sect.Calc("Hs", Y);
+        this.addSectionFixedResult(Hs, "La charge spécifique (m)", nDigits, "Hs");
 
         // charge critique
-        let Hsc = sect.Calc_Hsc();
-        this.addSectionFixedResult(Hsc, "La charge critique (m)", nDigits);
+        let Hsc = sect.Calc("Hsc", Y);
+        this.addSectionFixedResult(Hsc, "La charge critique (m)", nDigits, "Hsc");
 
         // largeur au miroir
-        let B = sect.Calc_B();
+        let B = sect.Calc("B", Y);
         this.addSectionFixedResult(B, "La largeur au miroir (m)", nDigits);
 
         // périmètre hydraulique
-        let P = sect.Calc_P();
+        let P = sect.Calc("P", Y);
         this.addSectionFixedResult(P, "Le périmètre mouillé (m)", nDigits);
 
         // surface hydraulique
-        let S = sect.Calc_S();
+        let S = sect.Calc("S", Y);
         this.addSectionFixedResult(S, "La surface mouillée (m2)", nDigits);
 
         // rayon hydraulique
-        let R = sect.Calc_R();
+        let R = sect.Calc("R", Y);
         this.addSectionFixedResult(R, "Le rayon hydraulique (m)", nDigits);
 
         // vitesse moyenne
-        let V = sect.Calc_V();
+        let V = sect.Calc("V", Y);
         this.addSectionFixedResult(V, "La vitesse moyenne (m/s)", nDigits);
 
         // nombre de Froude
-        let Fr = sect.Calc_Fr();
+        let Fr = sect.Calc("Fr", Y);
         this.addSectionFixedResult(Fr, "Le Froude", nDigits);
 
         // tirant d'eau critique
-        let Yc = sect.Calc_Yc();
-        this.addSectionFixedResult(Yc, "Le tirant d'eau critique (m)", nDigits);
+        let Yc = sect.Calc("Yc", Y);
+        this.addSectionFixedResult(Yc, "Le tirant d'eau critique (m)", nDigits, "Yc");
 
         // tirant d'eau normal
-        let Yn = sect.Calc_Yn();
-        this.addSectionFixedResult(Yn, "Le tirant d'eau normal (m)", nDigits);
+        let Yn = sect.Calc("Yn", Y);
+        this.addSectionFixedResult(Yn, "Le tirant d'eau normal (m)", nDigits, "Yn");
 
         // tirant d'eau fluvial
-        let Yf = sect.Calc_Yf();
-        this.addSectionFixedResult(Yf, "Le tirant d'eau fluvial (m)", nDigits);
+        let Yf = sect.Calc("Yf", Y);
+        this.addSectionFixedResult(Yf, "Le tirant d'eau fluvial (m)", nDigits, "Yf");
 
         // tirant d'eau torrentiel
-        let Yt = sect.Calc_Yt();
-        this.addSectionFixedResult(Yt, "Le tirant d'eau torrentiel (m)", nDigits);
+        let Yt = sect.Calc("Yt", Y);
+        this.addSectionFixedResult(Yt, "Le tirant d'eau torrentiel (m)", nDigits, "Yt");
 
         // tirant d'eau conjugué
-        let Yco = sect.Calc_Yco();
-        this.addSectionFixedResult(Yco, "Le tirant d'eau conjugué (m)", nDigits);
+        let Yco = sect.Calc("Yco", Y);
+        this.addSectionFixedResult(Yco, "Le tirant d'eau conjugué (m)", nDigits, "Yco");
 
         // perte de charge
-        let J = sect.Calc_J();
+        let J = sect.Calc("J", Y);
         this.addSectionFixedResult(J, "La perte de charge (m/m)", nDigits);
 
         // Variation linéaire de l'énergie spécifique
-        let IJ = sect.Calc('I-J');
+        let IJ = sect.Calc("I-J", Y);
         this.addSectionFixedResult(IJ, "Variation linéaire de l'énergie spécifique (m/m)", nDigits);
 
         // impulsion hydraulique
-        let Imp = sect.Calc_Imp();
+        let Imp = sect.Calc("Imp", Y);
         this.addSectionFixedResult(Imp, "Impulsion (m/m)", nDigits);
 
         // contrainte de cisaillement
-        let Tau0 = sect.Calc_Tau0();
+        let Tau0 = sect.Calc("Tau0", Y);
         this.addSectionFixedResult(Tau0, "La force tractrice (N)", nDigits);
 
+        this.sectionResultsComponent.section = sect;
         this._showResultsSection = true;
     }
 

src/app/components/canvas/canvas.component.ts

+import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+
+@Component({
+    selector: 'calc-canvas',
+    template: `<canvas #canvas
+    [attr.width] = '_width'
+    [attr.height] = '_height'>
+    </canvas>
+    `
+})
+export class CalcCanvasComponent implements AfterViewInit {
+    private _width: number = 300;
+    private _height: number = 200;
+
+    public get width(): number {
+        return this._calcCanvas.nativeElement.width;
+    }
+
+    @Input()
+    public set width(w: number) {
+        this._width = w;
+    }
+
+    public get height(): number {
+        return this._calcCanvas.nativeElement.height;
+    }
+
+    @Input()
+    public set height(h: number) {
+        this._height = h;
+    }
+
+    private _context2d: CanvasRenderingContext2D;
+
+    @ViewChild("canvas")
+    private _calcCanvas: ElementRef;
+
+    ngAfterViewInit() { // wait for the view to init before using the element
+        this._context2d = this._calcCanvas.nativeElement.getContext("2d");
+
+        //this._context2d.fillStyle = 'blue';
+        // this._context2d.fillRect(10, 10, 350, 350);
+
+        // this.drawRect(0, 0, this._width, this._height);
+    }
+
+    public clear() {
+        this._context2d.clearRect(0, 0, this.width, this.height);
+    }
+
+    public setStrokeColor(r: number, g: number, b: number) {
+        let col: string = "rgb(" + r + "," + g + "," + b + ")";
+        this._context2d.strokeStyle = col;
+    }
+
+    public setFillColor(r: number, g: number, b: number) {
+        let col: string = "rgb(" + r + "," + g + "," + b + ")";
+        this._context2d.fillStyle = col;
+    }
+
+    public setFont(f: string) {
+        this._context2d.font = f;
+    }
+
+    public fillText(s: string, x: number, y: number, align: string = undefined) {
+        if (align != undefined)
+            this._context2d.textAlign = align;
+        this._context2d.fillText(s, x, y);
+    }
+
+    public setLineWidth(w: number) {
+        this._context2d.lineWidth = w;
+    }
+
+    public setLineDash(d: number[]) {
+        this._context2d.setLineDash(d);
+    }
+
+    public resetLineDash() {
+        this._context2d.setLineDash([]);
+    }
+
+    public drawRect(x1: number, y1: number, w: number, h: number) {
+        this._context2d.strokeRect(x1, y1, w, h);
+    }
+
+    public drawLine(x1: number, y1: number, x2: number, y2: number) {
+        this._context2d.beginPath();
+        this._context2d.moveTo(x1, y1);
+        this._context2d.lineTo(x2, y2);
+        this._context2d.stroke();
+    }
+
+    public get context2d(): CanvasRenderingContext2D {
+        return this._context2d;
+    }
+}

src/app/components/section-canvas/section-canvas.component.ts

+import { Component, ViewChild, AfterViewInit } from '@angular/core';
+
+import { acSection, cSnTrapez, ParamsSectionTrapez } from 'jalhyd';
+
+import { CalcCanvasComponent } from '../canvas/canvas.component';
+
+@Component({
+    selector: 'section-canvas',
+    template: `<calc-canvas #calcCanvas
+    [width] = '_size'
+    [height] = '_size'>
+    </calc-canvas>
+    `
+})
+export class SectionCanvasComponent implements AfterViewInit {
+    /**
+     * taille du canvas (pixels)
+     */
+    private _size: number = 400;
+
+    /**
+     * marges gauche/droite pour le texte (pixels)
+     */
+    private _textMargin: number = 80;
+
+    /**
+     * marge haut pour les pointillés (pixels)
+     */
+    // private _topMargin: number = 40;
+
+    /**
+     * marge basse (pixels)
+     */
+    private _bottomMargin: number = 5;
+
+    /**
+     * facteurs d'échelle (coordonnées en m <-> coordonnées en pixels)
+     */
+    private _scaleX: number;
+    private _scaleY: number;
+
+    // valeur max X danas le repère de la section
+    private _sectionMaxX: number;
+
+    private _section: acSection;
+
+    // tirants
+    private _levels: Object[];
+
+    @ViewChild("calcCanvas")
+    private _calcCanvas: CalcCanvasComponent;
+
+    public set section(s: acSection) {
+        this._section = s;
+        if (this._section != undefined)
+            this.draw();
+    }
+
+    ngAfterViewInit() { // wait for the view to init before using the element
+        // this.draw();
+    }
+
+    public reset() {
+        this._section = undefined;
+        this._levels = [];
+    }
+
+    public addLevel(val: number, label: string, rgb: {}) {
+        this._levels.push({ val, label, rgb });
+    }
+
+    // max des niveaux à représenter
+    private getMaxLevel(): number {
+        // max de la cote de berge et des niveaux (qui sont triés)
+        return Math.max(this._section.prms.YB.v, this._levels[this._levels.length - 1]["val"]);
+    }
+
+    private drawSectionTrapez() {
+        let sect: cSnTrapez = <cSnTrapez>this._section;
+        let prms: ParamsSectionTrapez = <ParamsSectionTrapez>sect.prms;
+
+        // cote de berge
+        let yb = prms.YB.v;
+
+        // largeur de la partie pentue
+        let lp = prms.Fruit.v * prms.YB.v;
+        // console.log("lp " + lp);
+
+        // largeur totale de la section
+        let maxWidth: number = lp * 2 + prms.LargeurFond.v;
+
+        // hauteur totale de la section
+        // let height: number = prms.YB.v;
+        let maxHeight: number = this.getMaxLevel();
+        if (maxHeight == yb)
+            maxHeight *= 1.2;
+        // console.log("h ", height);
+
+        this._scaleX = (this._size - 2 * this._textMargin) / maxWidth;
+        // this._scaleY = (this._size - this._bottomMargin - this._topMargin) / height;
+        this._scaleY = (this._size - this._bottomMargin) / maxHeight;
+
+        let margin = this._textMargin / this._size;
+        //let top = this._topMargin / this._size;
+
+
+        // contour de la section
+
+        this._calcCanvas.setStrokeColor(0, 0, 0);
+        this._calcCanvas.setLineWidth(5);
+        this.drawSectionLine(0, yb, lp, 0);
+        this.drawSectionLine(lp, 0, lp + prms.LargeurFond.v, 0);
+        this._sectionMaxX = 2 * lp + prms.LargeurFond.v;
+        this.drawSectionLine(lp + prms.LargeurFond.v, 0, this._sectionMaxX, yb);
+
+        // this._calcCanvas.setStrokeColor(255, 0, 0);
+        // this._calcCanvas.drawLine(10, 10, 100, 200);
+
+        // pointillés du haut
+        this._calcCanvas.setLineWidth(2);
+        this._calcCanvas.setLineDash([5]);
+        this._calcCanvas.setStrokeColor(128, 128, 128);
+        this.drawSectionLine(0, yb, 0, maxHeight);
+        this.drawSectionLine(this._sectionMaxX, yb, this._sectionMaxX, maxHeight);
+    }
+
+    private drawText(s: string, x: number, y: number, align: string) {
+        this._calcCanvas.fillText(s, this._textMargin + x * this._scaleX, this._size - this._bottomMargin - y * this._scaleY, align);
+    }
+
+    private drawLine(x1: number, y1: number, x2: number, y2: number) {
+        // console.log("line " + x1 + " " + y1 + " " + x2 + " " + y2);
+        this._calcCanvas.drawLine(x1 * this._scaleX, this._size - y1 * this._scaleY, x2 * this._scaleX, this._size - y2 * this._scaleY);
+    }
+
+    private drawSectionLine(x1: number, y1: number, x2: number, y2: number) {
+        // console.log("sect line " + x1 + " " + y1 + " " + x2 + " " + y2);
+        // console.log(this._textMargin + x1 * this._scaleX, this._size - this._bottomMargin - y1 * this._scaleY, this._textMargin + x2 * this._scaleX, this._size - this._bottomMargin - y2 * this._scaleY);
+        this._calcCanvas.drawLine(this._textMargin + x1 * this._scaleX, this._size - this._bottomMargin - y1 * this._scaleY, this._textMargin + x2 * this._scaleX, this._size - this._bottomMargin - y2 * this._scaleY);
+    }
+
+    private drawSection() {
+        if (this._section instanceof cSnTrapez)
+            this.drawSectionTrapez();
+    }
+
+    private logObject(obj: {}, m?: string) {
+        // évite le message "Value below was evaluated just now" dans le debugger de Chrome
+        if (m == undefined)
+            console.log(JSON.stringify(obj));
+        else
+            console.log(m + " " + JSON.stringify(obj));
+    }
+
+    private sortLevels() {
+        // this.logObject(this._levels);
+        this._levels.sort((a, b) => {
+            if (a["val"] < b["val"])
+                return -1;
+            if (a["val"] > b["val"])
+                return 1;
+            return 0;
+        })
+        // this.logObject(this._levels, "levels ");
+    }
+
+    private drawLevels() {
+        let left = true;
+
+        this._calcCanvas.resetLineDash();
+        this._calcCanvas.setLineWidth(1);
+        this._calcCanvas.setFont("12px sans- serif")
+        for (let l of this._levels) {
+            let y = l["val"];
+            let col = l["rgb"];
+            this._calcCanvas.setStrokeColor(col["r"], col["g"], col["b"]);
+            this.drawSectionLine(0, y, this._sectionMaxX, y);
+
+            this._calcCanvas.setFillColor(col["r"], col["g"], col["b"]);
+            if (left)
+                this.drawText(l["label"], 0, y, "right");
+            else
+                this.drawText(l["label"], this._sectionMaxX, y, "left");
+            left = !left;
+        }
+    }
+
+    // contour du canvas
+    private drawFrame() {
+        this._calcCanvas.clear();
+        this._calcCanvas.resetLineDash();
+        this._calcCanvas.setStrokeColor(128, 128, 128);
+        this._calcCanvas.drawRect(0, 0, this._calcCanvas.width, this._calcCanvas.height);
+    }
+
+    private draw() {
+        this.sortLevels();
+        this.drawFrame();
+        this.drawSection();
+        this.drawLevels();
+    }
+}

src/app/components/section-results/section-results.component.html

@@ -5,4 +5,5 @@
             <td class="result_value">{{r.value}}</td>
         </tr>
     </table>
-</div>
\ No newline at end of file
+</div>
+<section-canvas #sectionCanvas></section-canvas>
\ No newline at end of file

src/app/components/section-results/section-results.component.ts

-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+
+import { acSection } from 'jalhyd';
+
+import { SectionCanvasComponent } from '../section-canvas/section-canvas.component';
 
 @Component({
     selector: 'section-results',
@@ -30,12 +34,33 @@ export class SectionResultsComponent {
     */
     private _results: Object[] = [];
 
+    private static labelColors: { [key: string]: any; } = {
+        "Hs": { r: 255, g: 0, b: 0 },
+        "Hsc": { r: 0, g: 0, b: 255 },
+        "Yn": { r: 16, g: 128, b: 16 },
+        "Yf": { r: 128, g: 128, b: 128 },
+        "Yt": { r: 0, g: 0, b: 0 },
+        "Yc": { r: 255, g: 128, b: 0 },
+        "Yco": { r: 255, g: 0, b: 255 },
+    };
+
+    @ViewChild("sectionCanvas")
+    private _sectionCanvas: SectionCanvasComponent;
+
     public reset() {
         this._results = [];
+        this._sectionCanvas.reset();
+    }
+
+    public set section(section: acSection) {
+        this._sectionCanvas.section = section;
     }
 
-    public addResult(v: number, l: string, fixedPrec: number) {
+    public addResult(v: number, l: string, fixedPrec: number, drawLabel: string) {
         this._results.push({ "label": l, "value": v.toFixed(fixedPrec) });
+        if (drawLabel != undefined) {
+            this._sectionCanvas.addLevel(v, drawLabel + " = " + v.toFixed(fixedPrec), SectionResultsComponent.labelColors[drawLabel]);
+        }
     }
 
     private getResultClass(i: number) {