pipe line added
parent
5d52808b04
commit
ac2e9b8be3
|
@ -44,6 +44,9 @@
|
|||
</div>
|
||||
|
||||
<div class="measurement-pipe">
|
||||
<div class="line">
|
||||
<div class="background"></div>
|
||||
</div>
|
||||
<div class="marks">
|
||||
<div class="marker top">
|
||||
<span class="top">0</span>
|
||||
|
|
108
public/script.js
108
public/script.js
|
@ -1,50 +1,88 @@
|
|||
let pipe_bottom_gap, pipe_top_gap;
|
||||
|
||||
const NewMeasurementCircle = (id, labels = []) => {
|
||||
let element = document.getElementById(id);
|
||||
let ul = document.createElement('ul');
|
||||
let element = document.getElementById(id);
|
||||
let ul = document.createElement("ul");
|
||||
|
||||
const CreateLabel = (label, length = 10) => {
|
||||
for (let i = 0; i < length; i++) {
|
||||
let li = document.createElement('li');
|
||||
if (i == 0) {
|
||||
let span = document.createElement('span');
|
||||
span.innerText = label;
|
||||
li.appendChild(span);
|
||||
li.className = 'label'
|
||||
}
|
||||
if (i == 5) li.className = 'half';
|
||||
ul.appendChild(li);
|
||||
}
|
||||
const CreateLabel = (label, length = 10) => {
|
||||
for (let i = 0; i < length; i++) {
|
||||
let li = document.createElement("li");
|
||||
if (i == 0) {
|
||||
let span = document.createElement("span");
|
||||
span.innerText = label;
|
||||
li.appendChild(span);
|
||||
li.className = "label";
|
||||
}
|
||||
if (i == 5) li.className = "half";
|
||||
ul.appendChild(li);
|
||||
}
|
||||
};
|
||||
|
||||
for (let label of labels) {
|
||||
CreateLabel(label, labels.indexOf(label) == labels.length - 1 ? 1 : 10);
|
||||
}
|
||||
for (let label of labels) {
|
||||
CreateLabel(label, labels.indexOf(label) == labels.length - 1 ? 1 : 10);
|
||||
}
|
||||
|
||||
element.appendChild(ul);
|
||||
}
|
||||
element.appendChild(ul);
|
||||
};
|
||||
|
||||
const ChangeMeasurementCircleArrow = (id, to) => {
|
||||
let min = -270, max = 0;
|
||||
let element = document.querySelector(`#${id} div.arrow`);
|
||||
let rotate = (to * (max - min) / 100) + min;
|
||||
element.style.transform = `rotate(${rotate}deg)`;
|
||||
}
|
||||
let min = -270,
|
||||
max = 0;
|
||||
let element = document.querySelector(`#${id} div.arrow`);
|
||||
let rotate = (to * (max - min)) / 100 + min;
|
||||
element.style.transform = `rotate(${rotate}deg)`;
|
||||
};
|
||||
|
||||
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) => {
|
||||
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(() => {
|
||||
ChangeMeasurementCircleArrow('temp', 66.5);
|
||||
setTimeout(() => {
|
||||
ShowIconByName('temp');
|
||||
}, 500);
|
||||
}, 3000);
|
||||
SetPipePercent("top", 25);
|
||||
|
||||
ChangeMeasurementCircleArrow("temp", 66.5);
|
||||
setTimeout(() => {
|
||||
SetPipePercent("bottom", 55);
|
||||
ShowIconByName("temp");
|
||||
}, 500);
|
||||
}, 3000);
|
||||
|
|
|
@ -1,22 +1,24 @@
|
|||
@import "./measurement.pipe/measurement.pipe.background.scss";
|
||||
@import "./measurement.pipe/measurement.pipe.marks.scss";
|
||||
@import "./measurement.pipe/measurement.pipe.marker.scss";
|
||||
@import "./measurement.pipe/measurement.pipe.line.scss";
|
||||
|
||||
div.measurement-pipe {
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
|
||||
left: 350px;
|
||||
left: 350px;
|
||||
|
||||
height: 100vh;
|
||||
width: 450px;
|
||||
height: 100vh;
|
||||
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 marks();
|
||||
@include marker();
|
||||
@include background();
|
||||
@include marks();
|
||||
@include marker();
|
||||
@include line();
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,111 +1,111 @@
|
|||
@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;
|
||||
top: 0;
|
||||
left: 418px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
background-color: white;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
color: white;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
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 {
|
||||
content: "";
|
||||
&::before {
|
||||
top: 50%;
|
||||
|
||||
position: absolute;
|
||||
transform: translateY(-50%);
|
||||
|
||||
background-color: white;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
width: 20px;
|
||||
height: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,49 +1,49 @@
|
|||
@mixin marks {
|
||||
$gap-top: 390px;
|
||||
$gap-bottom: 550px;
|
||||
$gap-top: 390px;
|
||||
$gap-bottom: 562px;
|
||||
|
||||
div.marks {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -170px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
div.marks {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -170px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
&::before {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 50vw;
|
||||
width: 50vw;
|
||||
|
||||
background: radial-gradient(
|
||||
circle at calc(1920px / 2.6),
|
||||
transparent,
|
||||
transparent 64.6%,
|
||||
white 64.7%,
|
||||
white 65%,
|
||||
transparent 65.1%
|
||||
);
|
||||
background: radial-gradient(
|
||||
circle at calc(1920px / 2.6),
|
||||
transparent,
|
||||
transparent 64.6%,
|
||||
white 64.7%,
|
||||
white 65%,
|
||||
transparent 65.1%
|
||||
);
|
||||
|
||||
// cut from the center l-t r-t r-b l-b
|
||||
clip-path: polygon(
|
||||
0% 65px,
|
||||
0% 100%,
|
||||
0 100%,
|
||||
0 $gap-top,
|
||||
100% $gap-top,
|
||||
100% $gap-bottom,
|
||||
0 $gap-bottom,
|
||||
0 100%,
|
||||
100% calc(100% - 96px),
|
||||
100% 0%
|
||||
);
|
||||
// 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% - 85px),
|
||||
100% 0%
|
||||
);
|
||||
|
||||
z-index: -1;
|
||||
}
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue