Suppression des sliders

ARIG-Robotique · May 21, 2017 · 5ca75d1 · 5ca75d1
1 parent eb783a3
commit 5ca75d1
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 41 deletions.
diff --git a/public-src/src/app/servo-control/servo-control.component.html b/public-src/src/app/servo-control/servo-control.component.html
@@ -1,47 +1,54 @@
-<div class="row">
-  <div class="col-4 col-xl-2">
-    <label class="form-group has-float-label">
-      <input class="form-control"
-             type="number"
-             [min]="servo.minPosition"
-             [max]="servo.maxPosition"
-             placeholder="Position"
-             [(ngModel)]="servo.currentPosition"/>
-      <span>Position</span>
-    </label>
-  </div>
-
-  <div class="col-6 col-xl-4">
+<div class="form-inline">
+  <label class="form-group has-float-label">
     <input class="form-control"
-           type="range"
+           type="number"
            [min]="servo.minPosition"
            [max]="servo.maxPosition"
+           placeholder="Position"
            [(ngModel)]="servo.currentPosition"/>
-  </div>
+    <span>Position</span>
+  </label>
 
-  <div class="col-2 col-xl-1">
-    <label class="form-group has-float-label">
-      <input class="form-control"
-             type="number"
-             [min]="servo.minSpeed"
-             [max]="servo.maxSpeed"
-             placeholder="Vitesse"
-             [(ngModel)]="servo.currentSpeed">
-      <span>Vitesse</span>
-    </label>
+  <div class="btn-group">
+    <button class="btn btn-info" (click)="incrementPosition(-100)">
+      <fa name="minus"></fa>
+      100
+    </button>
+    <button class="btn btn-info" (click)="incrementPosition(-10)">
+      <fa name="minus"></fa>
+      10
+    </button>
   </div>
-
-  <div class="col-12 col-xl-6">
-    <div class="btn-group" data-toggle="buttons">
-      <label class="btn btn-success"
-             *ngFor="let position of servo.positions"
-             [ngClass]="{active: position.value === servo.currentPosition}">
-        <input type="radio"
-               [checked]="position.value === servo.currentPosition"
-               [value]="position.value"
-               (click)="servo.currentPosition = position.value">
-        {{position.name}}
-      </label>
-    </div>
+  <div class="btn-group">
+    <button class="btn btn-info" (click)="incrementPosition(10)">
+      <fa name="plus"></fa>
+      10
+    </button>
+    <button class="btn btn-info" (click)="incrementPosition(100)">
+      <fa name="plus"></fa>
+      100
+    </button>
   </div>
+
+  <label class="form-group has-float-label">
+    <input class="form-control"
+           type="number"
+           [min]="servo.minSpeed"
+           [max]="servo.maxSpeed"
+           placeholder="Vitesse"
+           [(ngModel)]="servo.currentSpeed">
+    <span>Vitesse</span>
+  </label>
 </div>
+<div class="btn-group" data-toggle="buttons">
+  <label class="btn btn-success"
+         *ngFor="let position of servo.positions"
+         [ngClass]="{active: position.value === servo.currentPosition}">
+    <input type="radio"
+           [checked]="position.value === servo.currentPosition"
+           [value]="position.value"
+           (click)="servo.currentPosition = position.value">
+    {{position.name}}
+  </label>
+</div>
+
diff --git a/public-src/src/app/servo-control/servo-control.component.scss b/public-src/src/app/servo-control/servo-control.component.scss
@@ -1,3 +1,4 @@
-.form-group, .btn-group .btn {
-  margin-bottom: 0;
+.form-inline > * {
+  margin-right: 0.5em;
+  margin-bottom: 0.5em;
 }
diff --git a/public-src/src/app/servo-control/servo-control.component.ts b/public-src/src/app/servo-control/servo-control.component.ts
@@ -40,4 +40,8 @@ export class ServoControlComponent implements OnInit, DoCheck {
     this.servosService.setPosition(this.robot, this.servo, this.servo.currentPosition, this.servo.currentSpeed);
   }
 
+  incrementPosition(value: number) {
+    this.servo.currentPosition += value;
+  }
+
 }