Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@tinchox5
tinchox5 committed Jul 20, 2024
1 parent 5073a69 commit bc5dbae
Show file tree
Hide file tree
Showing 10 changed files with 144 additions and 175 deletions.
18 changes: 9 additions & 9 deletions assets/css/orbit.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/css/orbit.min.css.map
View file

Large diffs are not rendered by default.

152 changes: 56 additions & 96 deletions examples/watch.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,37 +12,22 @@
<script type="module" src="../src/orbit.js" defer></script>
<title>Orbit</title>
<style>
body>.orbit-zone {
--o-lenght: 350px;
background-color: black;
width: 300px;
height: 380px;
overflow: hidden;
}

body {
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 500;
font-style: normal;
}


[class*='orbit-'] {
border: none
}



.minute {
stroke: darkmagenta;
}

.second {
stroke: orangered;
body>.orbit-zone {
--o-lenght: 350px;
background-color: black;
width: 300px;
height: 380px;
overflow: hidden;
}

hr.orbiter {
margin: 0;
[class*='orbit-'], .satellite {
border: none
}

.black-spot {
Expand All @@ -55,79 +40,70 @@
outline: 2px solid rgb(232 226 218)
}

.mini {
background-color: rgb(255, 255, 255);

outline: 2px solid rgb(254, 254, 254);
}



.white-spot {
border: 1px inset #0000002b;
background-color: rgb(229, 229, 229);
outline: 2px solid rgb(229, 229, 229);

}

.hours {
background-color: transparent;
border: none;
}


.big {
height: 3px;
border-radius: 2px;
}

.small-clock .small .spoke {
height: 1px;
border-radius: 2px;
background-color: gray;
}

.small-clock .medium .spoke {
height: 2px;
border-radius: 2px;
background-color: rgb(0, 0, 0);
}

.small-clock .hours .satellite {
font-size: x-small;
border: none;
background-color: transparent;
font-weight: 600;
.mini {
background-color: rgb(255, 255, 255);
outline: 2px solid rgb(254, 254, 254);
}

.small-clock .needle {
background-color: rgb(255, 64, 25);
height: 1.5px;
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.537))
}
.small-clock {
.small .spoke {
height: 1px;
border-radius: 2px;
background-color: gray;
}

.medium .spoke {
height: 2px;
border-radius: 2px;
background-color: rgb(0, 0, 0);
}

.hours .satellite {
font-size: x-small;
border: none;
background-color: transparent;
font-weight: 600;
}

.needle {
background-color: rgb(255, 64, 25);
height: 1.5px;
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.537))
}

.needle-center {
background-color: rgb(255, 64, 25);
}

.small-clock .needle-center {
background-color: rgb(255, 64, 25);
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.537))
}


.transparent {
background-color: transparent;
}

.satellite {
border: none
}

.clock>.center {
border: 3px solid rgb(232, 226, 218);
background-color: black;
}

.hour,
.minute {
filter: drop-shadow(4px 4px 7px black)
filter: drop-shadow(4px 4px 5px black)
}

.hours {
Expand Down Expand Up @@ -157,24 +133,23 @@

<body>
<div class="orbit-zone">
<div class="orbit-12 range-160 from-320">
<div class="satellite outer-orbit transparent">
<img src="../assets/alarm-clock.png" class="invert-color" width="25">

<div class="orbit-12 range-90 from-315 fit-range">
<div class="satellite grow-2x outer-orbit transparent">
<img src="../assets/alarm-clock.png" class="invert-color capsule " width="25">
</div>
<div class="satellite outer-orbit">
<img src="../assets/moon.png" width="25">
<div class="satellite grow-2x outer-orbit transparent ">
<img src="../assets/moon.png" class="" width="25">
</div>

</div>
<!-- curved text -->
<div class="orbit-11 from-298 range-125">
<o-label label-color="rgb(163,163,163)" class="gap-2 quarter-inner-orbit ">ALARM 7:00AM</o-label>
<o-label label-color="rgb(163,163,163)" text-anchor="end"
class="digital-clock gap-4 quarter-inner-orbit "></o-label>
<div class="orbit-11 from-270 range-180">
<o-label label-color="rgb(163,163,163)" text-anchor="middle" >ALARM 7:00AM</o-label>
<o-label label-color="rgb(163,163,163)" text-anchor="middle" class="digital-clock"></o-label>
</div>
<div class="orbit-11 from-160 range-40 ">
<o-label flip label-color="rgb(163,163,163)">500 • 30 • 12</o-label>

<o-label flip text-anchor="middle" label-color="rgb(163,163,163)">500 • 30 • 12</o-label>
</div>

<div class="calendar orbit-11 from-215 range-30">
Expand All @@ -183,12 +158,9 @@
<o-label flip bg-color="rgb(163,163,163)" text-anchor="middle" class="current gap-3 rounded">23</o-label>
<o-label flip bg-color="rgb(57,57,57)" label-color="rgb(163,163,163)" text-anchor="middle"
class="gap-3 rounded next">24</o-label>

</div>
<div class="orbit-12 from-227 range-12 ">

<o-label flip label-color="white" text-anchor="middle" class="outer-orbit day-name">FRI</o-label>

<o-label flip label-color="white" text-anchor="middle" class="outer-orbit day-name"></o-label>
</div>

<!-- big clock ticks -->
Expand Down Expand Up @@ -617,7 +589,6 @@
function analogWatch() {
// Get the current time
const now = new Date()

// Get the current hour, minute, and second
const hour = now.getHours()
const minute = now.getMinutes()
Expand All @@ -626,14 +597,11 @@
const pastDate = new Date();
pastDate.setDate(today - 1);
const pastDay = pastDate.getDate();

// Future today (1 today later)
const futureDate = new Date();
futureDate.setDate(today + 1);
const futureDay = futureDate.getDate();

const currentDayName = now.toLocaleString('en', { weekday: 'short' });

const shortDayName = currentDayName.slice(0, 3);

// Calculate the angles of the hour, minute, and second hands
Expand All @@ -649,33 +617,25 @@
const minuteHand = document.querySelector('.xm')
const secondHand = document.querySelector('.xs')

const digitalClock = document.querySelector('.digital-clock')
const curvedText = digitalClock.querySelector('textPath')
const curvedText = document.querySelector('.digital-clock textPath')

const calendar = document.querySelector('.calendar')
const current = calendar.querySelector('.current textPath')
const previous = calendar.querySelector('.previous textPath')
const next = calendar.querySelector('.next textPath')
const current = document.querySelector('.calendar .current textPath')
const previous = document.querySelector('.calendar .previous textPath')
const next = document.querySelector('.calendar .next textPath')
const dayName = document.querySelector('.day-name textPath')


// Set the transform style of each hand element with angle correction
hourHand.style.setProperty('--o-angle-composite', hourAngle - 90 + 'deg')
minuteHand.style.setProperty('--o-angle-composite', minuteAngle - 90 + 'deg')
secondHand.style.setProperty('--o-angle-composite', secondAngle - 90 + 'deg')


curvedText.innerHTML = `${hour}:${minute}, ${hour}H ${minute}M`

current.innerHTML = `${today}`
previous.innerHTML = `${futureDay}`
next.innerHTML = `${pastDay}`

dayName.innerHTML = `${shortDayName}`


}

// Call the analogWatch function every second
setInterval(analogWatch, 1000)
</script>
Expand Down
38 changes: 22 additions & 16 deletions src/js/orbit-label.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,26 +114,30 @@ createTextPath(pathId, path) {
'textPath'
);

const { labelColor, gap, textAnchor} = this.getAttributes()
const { labelColor, fitRange, textAnchor} = this.getAttributes()
textPath.setAttribute('href', `#${pathId}`);
textPath.setAttribute('color', labelColor);;
textPath.setAttribute('alignment-baseline', 'middle');


if (textAnchor === 'start') {
textPath.setAttribute('startOffset', '0%');
textPath.setAttribute('text-anchor', 'start');
}
if (textAnchor === 'middle') {
const textLength = text.textContent.length;
const pathLength = path.getTotalLength();
const startOffset = (pathLength - textLength - (gap * 2)) / 4;

textPath.setAttribute('startOffset', startOffset);
} else if (textAnchor === 'end') {
const textLength = text.textContent.length;
const pathLength = path.getTotalLength();
const startOffset = (pathLength - textLength - gap * 4) / 2 ;

textPath.setAttribute('startOffset', startOffset);
textPath.setAttribute('startOffset', '50%');
textPath.setAttribute('text-anchor', 'middle');
}

if (textAnchor === 'end') {
textPath.setAttribute('startOffset', '100%');
textPath.setAttribute('text-anchor', 'end');
}

if (fitRange) {
text.setAttribute('textLength', path.getTotalLength());
}




textPath.textContent = this.textContent;

Expand All @@ -147,6 +151,7 @@ getAttributes() {
getComputedStyle(this).getPropertyValue('r') || 0
)
const flip = this.hasAttribute('flip')
const fitRange = this.hasAttribute('fit-range')
const lineCap =
getComputedStyle(this).getPropertyValue('--o-linecap') || 'butt'
const gap = parseFloat(
Expand All @@ -169,7 +174,7 @@ getAttributes() {
innerOuter = strokeWithPercentage * 2
}
if (this.classList.contains('quarter-outer-orbit')) {
innerOuter = strokeWithPercentage * 3.75
innerOuter = strokeWithPercentage * 1.75
}
if (this.classList.contains('inner-orbit')) {
innerOuter = 0
Expand All @@ -190,7 +195,8 @@ getAttributes() {
labelAngle,
flip,
textAnchor,
lineCap
lineCap,
fitRange
}
}

Expand Down
6 changes: 6 additions & 0 deletions src/js/orbit-progress.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,9 +129,15 @@ export class OrbitProgress extends HTMLElement {
if (this.classList.contains('outer-orbit')) {
innerOuter = strokeWithPercentage * 2
}
if (this.classList.contains('quarter-outer-orbit')) {
innerOuter = strokeWithPercentage * 1.75
}
if (this.classList.contains('inner-orbit')) {
innerOuter = 0
}
if (this.classList.contains('quarter-inner-orbit')) {
innerOuter = strokeWithPercentage * 0.75
}
const realRadius = 50 + innerOuter - strokeWithPercentage
const maxAngle = range // User-defined max angle
return {
Expand Down
6 changes: 6 additions & 0 deletions src/js/orbit-sector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,9 +111,15 @@ export class OrbitSector extends HTMLElement {
if (this.classList.contains('outer-orbit')) {
innerOuter = strokeWithPercentage * 2
}
if (this.classList.contains('quarter-outer-orbit')) {
innerOuter = strokeWithPercentage * 1.75
}
if (this.classList.contains('inner-orbit')) {
innerOuter = 0
}
if (this.classList.contains('quarter-inner-orbit')) {
innerOuter = strokeWithPercentage * 0.75
}
const realRadius = 50 + innerOuter - strokeWithPercentage
const sectorAngle = calcularExpresionCSS(rawAngle)
console.log(sectorAngle)
Expand Down
1 change: 0 additions & 1 deletion src/scss/_capsule.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ There are some utilties to modify capsule orientation content.
display: flex;
width: inherit;
height: auto;
padding: 5px;
position: absolute;
align-items: center;
justify-content: center;
Expand Down
Loading

0 comments on commit bc5dbae

Please sign in to comment.