Day 60 - Knob

Developer
Arnelle Balane
Size
6,525 Kb
Views
18,216
  1. Day 60 - Knob Previews
  2. Day 60 - Knob HTML Codes
  3. Day 60 - Knob CSS Codes
  4. Day 60 - Knob JS Codes

How do I make an day 60 - knob?

Implementation of Day 60 design from @npaulflavius' 100 Days UI Challenge. What is a day 60 - knob? How do you make a day 60 - knob? This script and codes were developed by Arnelle Balane on 14 October 2022, Friday.

Day 60 - Knob Previews
IQ Test

Day 60 - Knob - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Day 60 - Knob</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="knob"> <div class="knob-outer"> <div class="knob-inner"> <div class="knob-arrow up"></div> <div class="knob-value">0</div> <div class="knob-arrow down"></div> <div class="knob-value-progress"></div> </div> <div class="knob-indicator contrast" data-angle="0"></div> <div class="knob-indicator brightness" data-angle="0"></div> </div> <div class="progress-label contrast">Contrast</div> <div class="progress-label brightness">Brightness</div> <svg class="progress-bars" width="500" height="500"> <path d="M 240 445 A 190 195 0 1 1 240 55" fill="transparent" stroke="#dbdbdb" stroke-width="10" stroke-linecap="round"></path> <path d="M 240 445 A 190 195 0 1 1 240 55" fill="transparent" stroke="#f47231" stroke-width="10" stroke-linecap="round" stroke-dasharray="605 605" id="contrast-progress"></path> <path d="M 260 445 A 190 195 0 1 0 260 55" fill="transparent" stroke="#dbdbdb" stroke-width="10" stroke-linecap="round"></path> <path d="M 260 445 A 190 195 0 1 0 260 55" fill="transparent" stroke="#208ef4" stroke-width="10" stroke-linecap="round" stroke-dasharray="605 605" id="brightness-progress"></path> </svg>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Day 60 - Knob - Script Codes CSS Codes

/** Mixins **/
/** Base Styles **/
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box;
}
html { font-size: 62.5%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100vh; font-family: "Roboto", "Myriad Pro", sans-serif; line-height: 1; background: url("http://i1067.photobucket.com/albums/u422/arnellebalane/background_zpsifao5spd.jpg") center center no-repeat; background-size: cover; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
/** Knob Styles **/
.knob { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 50rem; height: 50rem; position: relative;
}
.knob-outer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 33rem; height: 33rem; position: relative; z-index: 1; border-radius: 50%; background-color: #42444a; overflow: hidden;
}
.knob-outer::before { content: ""; position: absolute; left: -10rem; bottom: 5rem; width: 10rem; height: 10rem; border-radius: 50%; box-shadow: 0 0 10rem 10rem #d5a362; opacity: 0.25;
}
.knob-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 24rem; height: 24rem; position: relative; border-radius: 50%; background-color: #f2f2f2; overflow: hidden;
}
.knob-value { width: 12rem; height: 12rem; margin: 2rem 0; position: relative; z-index: 1; font-size: 6rem; font-weight: 100; text-align: center; line-height: 12rem; color: #71727b; border-radius: 50%; background-color: #fff;
}
.knob-value-progress { height: 0; position: absolute; left: 0; right: 0; bottom: 0; background-color: #d8e3ea; -webkit-transition: height 500ms ease-out; transition: height 500ms ease-out;
}
.knob-arrow { width: 4rem; height: 1.5rem; position: relative; z-index: 1; cursor: pointer; outline: none;
}
.knob-arrow::before,
.knob-arrow::after { content: ""; width: 2.4rem; height: 3px; position: absolute; top: 0; left: 50%; background-color: #ccc; -webkit-transform-origin: left center; transform-origin: left center; -webkit-transform: rotate(30deg); transform: rotate(30deg);
}
.knob-arrow::after { -webkit-transform: rotate(150deg); transform: rotate(150deg);
}
.knob-arrow.down::before,
.knob-arrow.down::after { top: auto; bottom: 0; -webkit-transform: rotate(-30deg); transform: rotate(-30deg);
}
.knob-arrow.down::after { -webkit-transform: rotate(-150deg); transform: rotate(-150deg);
}
.knob-indicator { width: 1rem; height: 1rem; border: 1px solid #fff; position: absolute; top: calc(50% - 0.5rem); left: calc(50% - 0.5rem); z-index: 1; border-radius: 50%; cursor: pointer; -webkit-transition: background-color 250ms ease-out; transition: background-color 250ms ease-out;
}
.knob-indicator:hover { background-color: #fff;
}
.progress-label { width: 10rem; position: absolute; top: 50%; font-size: 1.4rem; text-align: center; text-transform: uppercase; color: #a0a2a9;
}
.progress-label.contrast { left: -2.5rem; -webkit-transform: rotate(-90deg); transform: rotate(-90deg);
}
.progress-label.brightness { right: -2.5rem; -webkit-transform: rotate(90deg); transform: rotate(90deg);
}
/** Progress Bars Styles **/
.progress-bars { position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
.progress-bars path { stroke-dashoffset: 605; -webkit-transition: stroke-dashoffset 500ms ease-out; transition: stroke-dashoffset 500ms ease-out;
}

Day 60 - Knob - Script Codes JS Codes

'use strict';
var knob = $('.knob-value');
var knobProgress = $('.knob-value-progress');
var contrastProgress = $('#contrast-progress');
var contrastIndicator = $('.knob-indicator.contrast');
var brightnessProgress = $('#brightness-progress');
var brightnessIndicator = $('.knob-indicator.brightness');
var draggedIndicator = null;
setKnobValue(45, true);
setContrast(40);
setBrightness(70);
$(document).on('click', '.knob-arrow', function (e) { e.stopPropagation(); var knobValue = +knob.text(); if ($(this).is('.up') && knobValue < 100) { setKnobValue(knobValue + 1); } else if ($(this).is('.down') && knobValue > 0) { setKnobValue(knobValue - 1); }
});
$(document).on('click', knobInteract);
$(document).on('mousedown', '.knob-indicator', function () { draggedIndicator = $(this);
});
$(document).on('mousemove', function (e) { if (draggedIndicator) { knobInteract(e); }
});
$(document).on('mouseup', function () { draggedIndicator = null;
});
function knobInteract(e) { var origin = { x: window.innerWidth / 2, y: window.innerHeight / 2 }; var target = { x: e.pageX, y: e.pageY }; var angle = angleBetween(origin, target); angle = (angle + 90) % 360; if (angle > 3 && angle < 177) { var contrast = (angle - 3) / 174 * 100; setContrast(contrast); } else if (angle > 183 && angle < 357) { var brightness = 100 - (angle - 183) / 174 * 100; setBrightness(brightness); }
}
function setKnobValue(value) { var initial = arguments.length <= 1 || arguments[1] === undefined ? false : arguments[1]; knob.text(value); knobProgress.css('height', value + '%');
}
function setContrast(value) { var totalLength = contrastProgress[0].getTotalLength(); var percentage = value / 100; var progress = totalLength - totalLength * percentage; var angle = 174 * percentage + 93; var indicator = getPointAtAngleFrom({ x: 0, y: 0 }, angle, 142); contrastProgress.css('stroke-dashoffset', progress); contrastIndicator.css('transform', ['translateX(' + indicator.x + 'px)', 'translateY(' + indicator.y + 'px)'].join(' '));
}
function setBrightness(value) { var totalLength = brightnessProgress[0].getTotalLength(); var percentage = value / 100; var progress = totalLength - totalLength * percentage; var angle = 174 - (174 * percentage + 87); var indicator = getPointAtAngleFrom({ x: 0, y: 0 }, angle, 142); brightnessProgress.css('stroke-dashoffset', progress); brightnessIndicator.css('transform', ['translateX(' + indicator.x + 'px)', 'translateY(' + indicator.y + 'px)'].join(' '));
}
function getPointAtAngleFrom(origin, angle, distance) { angle = deg2rad(angle); return { x: origin.x + Math.cos(angle) * distance, y: origin.y + Math.sin(angle) * distance };
}
function deg2rad(angle) { return angle * (Math.PI / 180);
}
function rad2deg(angle) { return angle * (180 / Math.PI);
}
function angleBetween(origin, target) { var dy = target.y - origin.y; var dx = target.x - origin.x; var angle = rad2deg(Math.atan(dy / dx)); if (angle < 0 && dy < 0) { return 180 + angle; } else if (angle < 0 && dy >= 0) { return 360 + angle; } else if (dx > 0) { return 180 + angle; } return angle;
}
Day 60 - Knob - Script Codes
Day 60 - Knob - Script Codes
Home Page Home
Developer Arnelle Balane
Username arnellebalane
Uploaded October 14, 2022
Rating 4.5
Size 6,525 Kb
Views 18,216
Do you need developer help for Day 60 - Knob?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Arnelle Balane (arnellebalane) Script Codes
Name
Day 48 - Speedometer
Day 41 - File Upload Widget
Day 77 - Choose Category
Virtual Filesystem
Day 11 - Calendar Card
Yummy Food App
Pixel mario
Running pixel mario
Day 78 - TV UI - Player Card
Day 85 - Cinema Application
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!