Egalware/egwcorelib
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'release/AddGaugeBtnEffect'

Browse Source
This commit is contained in:
Samuele Locatelli
2023-02-17 09:30:49 +01:00
parent cf77a57bd1 cb6b1e05ff
commit cee9e19dc7
4 changed files with 84 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitlab-ci.yml
+1 -1
View File
@@ -1,5 +1,5 @@
variables:
VERS_MAIN: '1.3'
VERS_MAIN: '1.4'
NEW_REL: ''
NUM_REL: '0.1.2.3'
NUM_DEB: '0.1.2-beta.3'
EgwCoreLib.BlazorTest/Pages/Index.razor
+60 -9
View File
@@ -3,26 +3,77 @@
<PageTitle>Index</PageTitle>
<div>
<div class="containerCard">
<DtCard></DtCard>
<div class="row py-4" style="background-color: #ACDDAC;">
<div class="col-4">
</div>
<div class="col-4">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="RadialGrad2">
<stop offset="0%" stop-color="#000000" />
<stop offset="80%" stop-color="#151515" />
<stop offset="90%" stop-color="#444444" />
<stop offset="100%" stop-color="#878787" />
</radialGradient>
</defs>
<rect width="100" height="100" rx="50" fill="url(#RadialGrad2)" fill-opacity="0.5">
</rect>
<text id="TitleElem" x="10%" y="50%" class="text-light" style="font-size:2rem;">Titolo</text>
<text x="10%" y="70%" class="text-light" style="font-size:0.8rem;">testo più lungo
<animate attributeName="x"
values="100%;-100%"
dur="5s"
begin="2s"
repeatCount="indefinite" />
</text>
<g transform="translate(50%,50%)">
</g>
</svg>
</div>
<div class="col-4">
</div>
@*<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<rect width="10" height="10">
<animate attributeName="rx"
values="0;5;0"
dur="5s"
repeatCount="indefinite" />
</rect>
</svg>*@
</div>
<div class="containerBtnEntrEsc">
<BottoniEntrEsc></BottoniEntrEsc>
<div class="row py-4" style="background-color: #34495E;">
<div class="col-4">
</div>
<div class="col-4">
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="RadialGrad2">
<stop offset="0%" stop-color="#000000" />
<stop offset="80%" stop-color="#151515" />
<stop offset="90%" stop-color="#444444" />
<stop offset="100%" stop-color="#878787" />
</radialGradient>
</defs>
<rect width="10" height="10" rx="5" fill="url(#RadialGrad2)" fill-opacity="0.5">
</rect>
</svg>
</div>
<div class="col-4">
</div>
</div>
<div class="row">
<div class="col-12 col-md-4 col-lg-2 containerCalendario">
<div class="col-12 containerCalendario">
<div class="calendario">
<div class="d-flex justify-content-between">
<div>
<CircleGauge Titolo="9:00" Testo="Caricate" maxVal="480" currVal="540" strokeColorVal="#F1C40F"></CircleGauge>
<CircleGauge Titolo="9:00" Testo="Caricate" maxVal="480" currVal="540" strokeColorVal="#F1C40F" ShowCircleBtn="true"></CircleGauge>
</div>
<div>
<CircleGauge Titolo="4:00" Testo="Lavorate" maxVal="480" currVal="240" strokeColorVal="#00FF00"></CircleGauge>
<CircleGauge Titolo="4:00" Testo="Lavorate" maxVal="480" currVal="240" strokeColorVal="#00FF00" ShowCircleBtn="true"></CircleGauge>
</div>
</div>
<div class="containerBtnTemp">
<button>
<button class="btn btn-sm btn-warning">
TEMP
</button>
</div>
EgwCoreLib.Razor/CircleGauge.razor
+17 -4
View File
@@ -2,13 +2,26 @@
<svg viewBox="0 0 200 200" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="@innRad" fill="none" stroke="rgba(189, 195, 199, 0.5)" stroke-width="@sWidth" />
<circle cx="100" cy="100" r="@innRad" fill="none" stroke="@strokeColorVal" stroke-width="@sWidth" stroke-linecap="round" transform="rotate(-90,100,100)" stroke-dasharray="calc(@innRad * 6.28 * @valInner / @maxVal) calc(@innRad * 6.28 * (@maxVal - @valInner) / @maxVal)" />
<g transform="translate(100,100)">
<text id="TitleElem" style="@StyleTitolo" x="0" y="0">@Titolo</text>
<text x="0" y="30" style="@StyleTesto">@Testo</text>
</g>
@if (ShowCircleBtn)
{
<defs>
<radialGradient id="RadialGrad2">
<stop offset="0%" stop-color="#000000" />
<stop offset="80%" stop-color="#151515" />
<stop offset="90%" stop-color="#444444" />
<stop offset="100%" stop-color="#878787" />
</radialGradient>
</defs>
<circle cx="100" cy="100" r="@(innRad-sWidth)" fill="url(#RadialGrad2)" fill-opacity="0.5">
</circle>
}
@if (showOuter)
{
<circle cx="100" cy="100" r="@outRad" fill=none stroke="rgba(189, 195, 199, 0.5)" class="bg-opacity-25" stroke-width="@sWidth" />
<circle cx="100" cy="100" r="@outRad" fill=none stroke="@strokeColorVal" stroke-width="@sWidth" stroke-linecap="round" transform="rotate(-90,100,100)" stroke-dasharray="calc(@outRad * 6.28 * @valOuter / @maxVal) calc(@outRad * 6.28 * (@maxVal - @valOuter) / @maxVal)" />
}
<g transform="translate(100,100)">
<text id="TitleElem" style="@StyleTitolo" x="0" y="0">@Titolo</text>
<text x="0" y="30" style="@StyleTesto">@Testo</text>
</g>
</svg>
EgwCoreLib.Razor/CircleGauge.razor.cs
+6 -1
View File
@@ -19,6 +19,11 @@ namespace EgwCoreLib.Razor
public string StyleTesto { get; set; } = "font-size: 1em; fill: gray;";
[Parameter]
public string strokeColorVal { get; set; } = "#00FF66";
/// <summary>
/// Indica se mostrare o meno il btn centrale
/// </summary>
[Parameter]
public bool ShowCircleBtn { get; set; } = false;
/// <summary>
/// Valore da rappresentare
@@ -33,7 +38,7 @@ namespace EgwCoreLib.Razor
/// <summary>
/// Spessore dei cerchida disegnare
/// Spessore dei cerchi da disegnare
/// </summary>
[Parameter]
public int sWidth { get; set; } = 10;