Browse Source

measurement circle created

master
JayPY Code 7 months ago
parent
commit
891a3aea3f
10 changed files with 272 additions and 3 deletions
  1. +11
    -1
      public/index.html
  2. +33
    -0
      public/script.js
  3. +1
    -0
      public/style.min.css
  4. +7
    -2
      public/style.min.css.map
  5. +36
    -0
      src/components/measurement.circle.arrow.scss
  6. +41
    -0
      src/components/measurement.circle.content.scss
  7. +78
    -0
      src/components/measurement.circle.marks.scss
  8. +21
    -0
      src/components/measurement.circle.scss
  9. +24
    -0
      src/components/measurement.circle.warn.scss
  10. +20
    -0
      src/style.scss

+ 11
- 1
public/index.html View File

@ -8,10 +8,20 @@
<title>Settings</title>
<link rel="stylesheet" href="./style.min.css">
<script src="../scripts/ws.client.js"></script>
</head>
<body>
<div id="speed" class="measurement-circle">
<div class="warn"></div>
<div class="value">
<span class="value">0</span>
<span class="type">KM/H</span>
</div>
<div class="name">SPEED</div>
<div class="arrow"></div>
</div>
<script src="./script.js"></script>
</body>
</html>

+ 33
- 0
public/script.js View File

@ -0,0 +1,33 @@
const NewMeasurementCircle = (id, labels = []) => {
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);
}
}
for (let label of labels) {
CreateLabel(label, labels.indexOf(label) == labels.length - 1 ? 1 : 10);
}
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)`;
}
NewMeasurementCircle('speed', [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]);

+ 1
- 0
public/style.min.css
File diff suppressed because it is too large
View File


+ 7
- 2
public/style.min.css.map
File diff suppressed because it is too large
View File


+ 36
- 0
src/components/measurement.circle.arrow.scss View File

@ -0,0 +1,36 @@
@mixin arrow {
$width: 40%;
$height: 8px;
$background: linear-gradient(
90deg,
rgba(0, 38, 81, 1) 0%,
rgba(242, 52, 52, 1) 34%,
#fab347 50%,
#fab347 64%,
rgba(242, 52, 52, 1) 94%,
transparent 100%
);
div.arrow {
position: absolute;
top: 50%;
left: 50%;
margin-top: -2.5px;
transform-origin: top left;
width: $width;
height: $height;
background-image: $background;
border-radius: 0 1em 1em 0;
z-index: 2;
transform: rotate(-270deg);
transition: all 1s;
}
}

+ 41
- 0
src/components/measurement.circle.content.scss View File

@ -0,0 +1,41 @@
@mixin content {
$value-color: white;
$type-color: rgba(white, 0.7);
div.value {
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 2;
span.value {
font-size: 3.5vw;
color: $value-color;
}
span.type {
font-size: 1vw;
color: $type-color;
}
}
div.name {
position: absolute;
bottom: 25%;
left: 50%;
transform: translateX(-50%);
font-size: 2vw;
color: $type-color;
}
}

+ 78
- 0
src/components/measurement.circle.marks.scss View File

@ -0,0 +1,78 @@
@mixin marks {
$text-size: 200%;
$text-color: white;
$background-color: rgba(white, 0.7);
ul {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
li {
position: absolute;
top: 50%;
height: 8px;
width: 50%;
list-style: none;
transform-origin: top right;
&::before {
content: "";
position: absolute;
top: calc(5px / 2);
width: 14px;
height: 3px;
background-color: $background-color;
}
&.half::before {
width: 20px;
}
&.label {
display: flex;
align-items: center;
&::before {
background-color: white;
width: 24px;
}
span {
padding: 40px;
font-size: $text-size;
}
}
span {
position: absolute;
color: $text-color;
transform-origin: center center;
}
@for $i from 1 to 101 {
&:nth-child(#{$i}) {
transform: rotate(#{(($i - 1) * 3deg) - 90deg}) translate(0, -50%);
span {
@if $i == 1 {
transform: rotate(90deg);
} @else {
transform: rotate(#{((($i - 1) / 10) * -30deg) + 90deg});
}
}
}
}
}
}
}

+ 21
- 0
src/components/measurement.circle.scss View File

@ -0,0 +1,21 @@
@import "./measurement.circle.marks.scss";
@import "./measurement.circle.arrow.scss";
@import "./measurement.circle.content.scss";
@import "./measurement.circle.warn.scss";
div.measurement-circle {
position: relative;
width: 40vw;
height: 40vw;
border-radius: 50%;
background: rgb(0, 38, 81);
background: radial-gradient(circle, rgba(0, 38, 81, 1) 60%, rgba(0, 119, 204, 1) 70%);
@include marks();
@include arrow();
@include content();
@include warn();
}

+ 24
- 0
src/components/measurement.circle.warn.scss View File

@ -0,0 +1,24 @@
@mixin warn {
$color: #ee0e0e;
$size: 20px;
div.warn {
position: absolute;
top: -#{$size};
left: -#{$size};
width: calc(100% + #{$size * 2});
height: calc(100% + #{$size * 2});
border-radius: 50%;
z-index: -1;
background-color: $color;
clip: rect(0, calc(20vw + #{$size}), calc(20vw + #{$size}), 0);
transform: rotate(90deg);
}
}

+ 20
- 0
src/style.scss View File

@ -0,0 +1,20 @@
* {
border: none;
outline: none;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #131313;
height: 100vh;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
overflow: hidden;
}
@import "./components/measurement.circle.scss";

Loading…
Cancel
Save