Lobo_Corp/playground-frontend
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Activity

optimized pendulum visual
All checks were successful
Build, Test & Push Frontend / quality-check (pull_request) Successful in 1m58s
Details
Build, Test & Push Frontend / docker (pull_request) Has been skipped
Details

Browse Source
This commit is contained in:
Lobo
2026-02-23 09:43:34 +01:00
parent c160fb4bc8
commit aceb0ea24e
3 changed files with 76 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/app/pages/algorithms/pendulum/pendulum.component.html
View File

@@ -5,29 +5,41 @@
<mat-card-content>
<app-information [algorithmInformation]="algoInformation"/>
<div class="controls-container">
<div class="slider-control-container">
<p style="white-space: nowrap">{{ 'PENDULUM.TRAIL_DECAY_TIME' | translate }}</p>
<ngx-slider [(value)]="simParams.trailDecay" [options]="trailDecayOptions" ></ngx-slider>
<p style="white-space: nowrap">{{ 'PENDULUM.ATTRACTION' | translate }}</p>
<ngx-slider [(value)]="simParams.g" [options]="gravityOptions" ></ngx-slider>
<div class="sliders-grid">
<div class="slider-item">
<p>{{ 'PENDULUM.TRAIL_DECAY_TIME' | translate }}</p>
<ngx-slider [(value)]="simParams.trailDecay" [options]="trailDecayOptions" ></ngx-slider>
</div>
<div class="slider-item">
<p>{{ 'PENDULUM.ATTRACTION' | translate }}</p>
<ngx-slider [(value)]="simParams.g" [options]="gravityOptions" ></ngx-slider>
</div>
<div class="slider-item">
<p>{{ 'PENDULUM.L1_LENGTH' | translate }}</p>
<ngx-slider [(value)]="simParams.l1" [options]="lengthOptions" ></ngx-slider>
</div>
<div class="slider-item">
<p>{{ 'PENDULUM.L2_LENGTH' | translate }}</p>
<ngx-slider [(value)]="simParams.l2" [options]="lengthOptions" ></ngx-slider>
</div>
<div class="slider-item">
<p>{{ 'PENDULUM.M1_MASS' | translate }}</p>
<ngx-slider [(value)]="simParams.m1" [options]="massOptions" ></ngx-slider>
</div>
<div class="slider-item">
<p>{{ 'PENDULUM.M2_MASS' | translate }}</p>
<ngx-slider [(value)]="simParams.m2" [options]="massOptions" ></ngx-slider>
</div>
<div class="slider-item full-width">
<p>{{ 'PENDULUM.DAMPING' | translate }}</p>
<ngx-slider [(value)]="simParams.damping" [options]="dampingOptions" ></ngx-slider>
</div>
</div>
<div class="slider-control-container">
<p style="white-space: nowrap">{{ 'PENDULUM.L1_LENGTH' | translate }}</p>
<ngx-slider [(value)]="simParams.l1" [options]="lengthOptions" ></ngx-slider>
<p style="white-space: nowrap">{{ 'PENDULUM.L2_LENGTH' | translate }}</p>
<ngx-slider [(value)]="simParams.l2" [options]="lengthOptions" ></ngx-slider>
</div>
<div class="slider-control-container">
<p style="white-space: nowrap">{{ 'PENDULUM.M1_MASS' | translate }}</p>
<ngx-slider [(value)]="simParams.m1" [options]="massOptions" ></ngx-slider>
<p style="white-space: nowrap">{{ 'PENDULUM.M2_MASS' | translate }}</p>
<ngx-slider [(value)]="simParams.m2" [options]="massOptions" ></ngx-slider>
</div>
<div class="slider-control-container">
<p style="white-space: nowrap">{{ 'PENDULUM.DAMPING' | translate }}</p>
<ngx-slider [(value)]="simParams.damping" [options]="dampingOptions" ></ngx-slider>
</div>
<div class="slider-control-container">
<div class="actions-container">
<button mat-raised-button color="primary" (click)="pushPendulum(true)">
{{ 'PENDULUM.POKE_M1' | translate }}
</button>
@@ -38,6 +50,7 @@
{{ 'PENDULUM.RESET' | translate }}
</button>
</div>
<div class="legend" style="margin-top: 10px">
<span><span class="legend-color L1"></span> L1</span>
<span><span class="legend-color L2"></span> L2</span>

41
src/app/pages/algorithms/pendulum/pendulum.component.scss
View File

@@ -0,0 +1,41 @@
.sliders-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
margin-bottom: 1.5rem;
.slider-item {
display: flex;
align-items: center;
gap: 1rem;
margin-right: 1rem;
p {
width: 100px;
flex-shrink: 0;
margin: 0;
font-size: 0.9rem;
}
ngx-slider {
flex-grow: 1;
}
&.full-width {
grid-column: 1 / -1;
}
}
}
.actions-container {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1rem;
}
@media (max-width: 900px) {
.sliders-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
}

6
src/styles.scss
View File

@@ -359,12 +359,6 @@ canvas {
margin-bottom: 1rem;
}
.slider-control-container {
display: flex;
align-items: center;
gap: 10px;
}
/* Sorting Visualization & Canvas */
.sorting-visualization-area,
.visualization-area {