pipe line added

master
JayPY Code 2021-05-20 17:32:33 +04:30
parent 5d52808b04
commit ac2e9b8be3
6 changed files with 269 additions and 182 deletions

View File

@ -44,6 +44,9 @@
</div> </div>
<div class="measurement-pipe"> <div class="measurement-pipe">
<div class="line">
<div class="background"></div>
</div>
<div class="marks"> <div class="marks">
<div class="marker top"> <div class="marker top">
<span class="top">0</span> <span class="top">0</span>

View File

@ -1,50 +1,88 @@
let pipe_bottom_gap, pipe_top_gap;
const NewMeasurementCircle = (id, labels = []) => { const NewMeasurementCircle = (id, labels = []) => {
let element = document.getElementById(id); let element = document.getElementById(id);
let ul = document.createElement('ul'); let ul = document.createElement("ul");
const CreateLabel = (label, length = 10) => { const CreateLabel = (label, length = 10) => {
for (let i = 0; i < length; i++) { for (let i = 0; i < length; i++) {
let li = document.createElement('li'); let li = document.createElement("li");
if (i == 0) { if (i == 0) {
let span = document.createElement('span'); let span = document.createElement("span");
span.innerText = label; span.innerText = label;
li.appendChild(span); li.appendChild(span);
li.className = 'label' li.className = "label";
} }
if (i == 5) li.className = 'half'; if (i == 5) li.className = "half";
ul.appendChild(li); ul.appendChild(li);
}
} }
};
for (let label of labels) { for (let label of labels) {
CreateLabel(label, labels.indexOf(label) == labels.length - 1 ? 1 : 10); CreateLabel(label, labels.indexOf(label) == labels.length - 1 ? 1 : 10);
} }
element.appendChild(ul); element.appendChild(ul);
} };
const ChangeMeasurementCircleArrow = (id, to) => { const ChangeMeasurementCircleArrow = (id, to) => {
let min = -270, max = 0; let min = -270,
let element = document.querySelector(`#${id} div.arrow`); max = 0;
let rotate = (to * (max - min) / 100) + min; let element = document.querySelector(`#${id} div.arrow`);
element.style.transform = `rotate(${rotate}deg)`; let rotate = (to * (max - min)) / 100 + min;
} element.style.transform = `rotate(${rotate}deg)`;
};
const ShowIconByName = (name) => { const ShowIconByName = (name) => {
document.querySelector(`div.icons div.icon.${name}`).classList.add('show'); document.querySelector(`div.icons div.icon.${name}`).classList.add("show");
} };
const HideIconByName = (name) => { const HideIconByName = (name) => {
document.querySelector(`div.icons div.icon.${name}`).classList.remove('show'); document.querySelector(`div.icons div.icon.${name}`).classList.remove("show");
} };
NewMeasurementCircle('temp', [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]); const SetPipePercent = (key = "top", percent = 0) => {
let top_max = 390,
top_min = 36,
bottom_max = 562,
bottom_min = 915;
ShowIconByName('sun'); let line = document.querySelector(
"div.measurement-pipe div.line div.background"
);
if (pipe_bottom_gap == null) pipe_bottom_gap = bottom_min;
if (pipe_top_gap == null) pipe_top_gap = top_min;
switch (key) {
case "top":
pipe_top_gap = (percent / 100) * (top_max - top_min) + top_min;
break;
case "bottom":
pipe_bottom_gap =
(percent / 100) * (bottom_max - bottom_min) + bottom_min;
break;
}
line.setAttribute(
"style",
`clip-path: polygon(0% 60px, 0% 100%, 0 100%, 0 ${pipe_top_gap}px, 100% ${pipe_top_gap}px, 100% ${pipe_bottom_gap}px, 0 ${pipe_bottom_gap}px, 0 100%, 100% calc(100% - 75px), 100% 0%)`
);
};
NewMeasurementCircle("temp", [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]);
ShowIconByName("sun");
SetPipePercent("bottom", 35);
setTimeout(() => { setTimeout(() => {
ChangeMeasurementCircleArrow('temp', 66.5); SetPipePercent("top", 25);
setTimeout(() => {
ShowIconByName('temp'); ChangeMeasurementCircleArrow("temp", 66.5);
}, 500); setTimeout(() => {
}, 3000); SetPipePercent("bottom", 55);
ShowIconByName("temp");
}, 500);
}, 3000);

View File

@ -1,22 +1,24 @@
@import "./measurement.pipe/measurement.pipe.background.scss"; @import "./measurement.pipe/measurement.pipe.background.scss";
@import "./measurement.pipe/measurement.pipe.marks.scss"; @import "./measurement.pipe/measurement.pipe.marks.scss";
@import "./measurement.pipe/measurement.pipe.marker.scss"; @import "./measurement.pipe/measurement.pipe.marker.scss";
@import "./measurement.pipe/measurement.pipe.line.scss";
div.measurement-pipe { div.measurement-pipe {
position: absolute; position: absolute;
left: 350px; left: 350px;
height: 100vh; height: 100vh;
width: 450px; width: 450px;
overflow: hidden; overflow: hidden;
z-index: 2; z-index: 2;
border-radius: 40% 0 0 40%; border-radius: 40% 0 0 40%;
@include background(); @include background();
@include marks(); @include marks();
@include marker(); @include marker();
@include line();
} }

View File

@ -0,0 +1,44 @@
@mixin line {
div.line {
position: absolute;
top: 0;
left: -162px;
right: 0;
bottom: 0;
div.background {
position: absolute;
top: 0;
left: 50px;
right: 0;
bottom: 0;
width: 50vw;
background: radial-gradient(
circle at calc(1920px / 2.6),
transparent,
transparent 61.6%,
white 61.7%,
white 65%,
transparent 65.1%
);
// cut from the center l-t r-t r-b l-b
// clip-path: polygon(
// 0% 60px,
// 0% 100%,
// 0 100%,
// 0 $gap-top,
// 100% $gap-top,
// 100% $gap-bottom,
// 0 $gap-bottom,
// 0 100%,
// 100% calc(100% - 76px),
// 100% 0%
// );
z-index: -1;
}
}
}

View File

@ -1,111 +1,111 @@
@mixin marker { @mixin marker {
$font-size: 30px; $font-size: 30px;
div.marker {
position: absolute;
top: 0;
left: 418px;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
span {
position: absolute;
color: white;
font-size: $font-size;
text-align: right;
&::before {
content: "";
div.marker {
position: absolute; position: absolute;
top: 0;
left: 418px;
right: 0;
bottom: 0;
display: flex; background-color: white;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
span { border-radius: 1em;
position: absolute; }
color: white;
font-size: $font-size; &.bottom::before,
&.top::before {
width: 50px;
height: 2px;
}
text-align: right; &.bottom-middle,
&.top-middle {
font-size: 1.5em;
color: transparent;
&::before { &::before {
content: ""; top: 50%;
position: absolute; transform: translateY(-50%);
background-color: white; width: 20px;
height: 5px;
border-radius: 1em;
}
&.bottom::before,
&.top::before {
width: 50px;
height: 2px;
}
&.bottom-middle,
&.top-middle {
font-size: 1.5em;
color: transparent;
&::before {
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 5px;
}
}
}
&.top span {
&.top {
top: 0;
&::before {
top: 100%;
left: -2px;
}
}
&.top-middle {
top: 120px;
left: -50px;
}
&.bottom-middle {
top: 250px;
left: -120px;
}
&.bottom {
top: 388px;
left: -190px;
}
}
&.bottom span {
&.top {
bottom: 387px;
left: -190px;
&::before {
top: 100%;
}
}
&.bottom-middle {
bottom: 120px;
left: -50px;
}
&.top-middle {
bottom: 250px;
left: -120px;
}
&.bottom {
bottom: 0px;
&::before {
left: 1px;
}
}
} }
}
} }
&.top span {
&.top {
top: 0;
&::before {
top: 100%;
left: 5px;
}
}
&.top-middle {
top: 120px;
left: -50px;
}
&.bottom-middle {
top: 250px;
left: -120px;
}
&.bottom {
top: 388px;
left: -190px;
}
}
&.bottom span {
&.top {
bottom: 387px;
left: -190px;
&::before {
top: 100%;
}
}
&.bottom-middle {
bottom: 120px;
left: -50px;
}
&.top-middle {
bottom: 250px;
left: -120px;
}
&.bottom {
bottom: 0px;
&::before {
left: 7px;
}
}
}
}
} }

View File

@ -1,49 +1,49 @@
@mixin marks { @mixin marks {
$gap-top: 390px; $gap-top: 390px;
$gap-bottom: 550px; $gap-bottom: 562px;
div.marks { div.marks {
position: absolute; position: absolute;
top: 0; top: 0;
left: -170px; left: -170px;
right: 0; right: 0;
bottom: 0; bottom: 0;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
left: 50px; left: 50px;
right: 0; right: 0;
bottom: 0; bottom: 0;
width: 50vw; width: 50vw;
background: radial-gradient( background: radial-gradient(
circle at calc(1920px / 2.6), circle at calc(1920px / 2.6),
transparent, transparent,
transparent 64.6%, transparent 64.6%,
white 64.7%, white 64.7%,
white 65%, white 65%,
transparent 65.1% transparent 65.1%
); );
// cut from the center l-t r-t r-b l-b // cut from the center l-t r-t r-b l-b
clip-path: polygon( clip-path: polygon(
0% 65px, 0% 60px,
0% 100%, 0% 100%,
0 100%, 0 100%,
0 $gap-top, 0 $gap-top,
100% $gap-top, 100% $gap-top,
100% $gap-bottom, 100% $gap-bottom,
0 $gap-bottom, 0 $gap-bottom,
0 100%, 0 100%,
100% calc(100% - 96px), 100% calc(100% - 85px),
100% 0% 100% 0%
); );
z-index: -1; z-index: -1;
}
} }
}
} }