enhance(client): improve clock widget

This commit is contained in:
syuilo 2022-08-06 16:39:09 +09:00
parent dea5e6207e
commit 3a9da78901
2 changed files with 24 additions and 50 deletions

View File

@ -1,44 +1,16 @@
<template> <template>
<svg class="mbcofsoe" viewBox="0 0 10 10" preserveAspectRatio="none"> <svg class="mbcofsoe" viewBox="0 0 10 10" preserveAspectRatio="none">
<template v-if="props.graduations === 'dots'"> <template v-if="props.graduations === 'dots'">
<circle
v-for="(angle, i) in graduationsMinor"
:cx="5 + (Math.sin(angle) * (5 - graduationsPadding))"
:cy="5 - (Math.cos(angle) * (5 - graduationsPadding))"
:r="i % 5 == 0 ? 0 : 0.05"
:fill="minorGraduationColor"
/>
<circle <circle
v-for="(angle, i) in graduationsMajor" v-for="(angle, i) in graduationsMajor"
:cx="5 + (Math.sin(angle) * (5 - graduationsPadding))" :cx="5 + (Math.sin(angle) * (5 - graduationsPadding))"
:cy="5 - (Math.cos(angle) * (5 - graduationsPadding))" :cy="5 - (Math.cos(angle) * (5 - graduationsPadding))"
:r="0.125" :r="0.125"
:fill="majorGraduationColor" :fill="(props.twentyfour ? h : h % 12) === i ? nowColor : majorGraduationColor"
/> :opacity="!props.fadeGraduations || (props.twentyfour ? h : h % 12) === i ? 1 : Math.max(0, 1 - (angleDiff(hAngle, angle) / Math.PI) - numbersOpacityFactor)"
</template>
<template v-else-if="props.graduations === 'dotsMajor'">
<circle
v-for="(angle, i) in graduationsMajor"
:cx="5 + (Math.sin(angle) * (5 - graduationsPadding))"
:cy="5 - (Math.cos(angle) * (5 - graduationsPadding))"
:r="0.125"
:fill="majorGraduationColor"
/> />
</template> </template>
<template v-else-if="props.graduations === 'numbers'"> <template v-else-if="props.graduations === 'numbers'">
<text
v-for="(angle, i) in texts"
:x="5 + (Math.sin(angle) * (5 - textsPadding))"
:y="5 - (Math.cos(angle) * (5 - textsPadding))"
text-anchor="middle"
dominant-baseline="middle"
font-size="0.75"
fill="currentColor"
>
{{ i === 0 ? (props.twentyfour ? '24' : '12') : i }}
</text>
</template>
<template v-else-if="props.graduations === 'numbersCurrent'">
<text <text
v-for="(angle, i) in texts" v-for="(angle, i) in texts"
:x="5 + (Math.sin(angle) * (5 - textsPadding))" :x="5 + (Math.sin(angle) * (5 - textsPadding))"
@ -47,8 +19,8 @@
dominant-baseline="middle" dominant-baseline="middle"
:font-size="(props.twentyfour ? h : h % 12) === i ? 1 : 0.7" :font-size="(props.twentyfour ? h : h % 12) === i ? 1 : 0.7"
:font-weight="(props.twentyfour ? h : h % 12) === i ? 'bold' : 'normal'" :font-weight="(props.twentyfour ? h : h % 12) === i ? 'bold' : 'normal'"
:fill="(props.twentyfour ? h : h % 12) === i ? currentHTextColor : 'currentColor'" :fill="(props.twentyfour ? h : h % 12) === i ? nowColor : 'currentColor'"
:opacity="(props.twentyfour ? h : h % 12) === i ? 1 : 0.5" :opacity="!props.fadeGraduations || (props.twentyfour ? h : h % 12) === i ? 1 : Math.max(0, 1 - (angleDiff(hAngle, angle) / Math.PI) - numbersOpacityFactor)"
> >
{{ i === 0 ? (props.twentyfour ? '24' : '12') : i }} {{ i === 0 ? (props.twentyfour ? '24' : '12') : i }}
</text> </text>
@ -91,33 +63,34 @@ import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import { globalEvents } from '@/events.js'; import { globalEvents } from '@/events.js';
// https://stackoverflow.com/questions/1878907/how-can-i-find-the-difference-between-two-angles
const angleDiff = (a: number, b: number) => {
const x = Math.abs(a - b);
return Math.abs((x + Math.PI) % (Math.PI * 2) - Math.PI);
};
const graduationsPadding = 0.5; const graduationsPadding = 0.5;
const textsPadding = 0.5; const textsPadding = 0.6;
const handsPadding = 1; const handsPadding = 1;
const handsTailLength = 0.7; const handsTailLength = 0.7;
const hHandLengthRatio = 0.75; const hHandLengthRatio = 0.75;
const mHandLengthRatio = 1; const mHandLengthRatio = 1;
const sHandLengthRatio = 1; const sHandLengthRatio = 1;
const graduationsMinor = (() => { const numbersOpacityFactor = 0.35;
const angles: number[] = [];
for (let i = 0; i < 60; i++) {
const angle = Math.PI * i / 30;
angles.push(angle);
}
return angles;
})();
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
thickness?: number; thickness?: number;
offset?: number; offset?: number;
twentyfour?: boolean; twentyfour?: boolean;
graduations?: 'none' | 'dots' | 'dotsMajor' | 'numbers' | 'numbersCurrent'; graduations?: 'none' | 'dots' | 'numbers';
fadeGraduations?: boolean;
}>(), { }>(), {
numbers: false, numbers: false,
thickness: 0.1, thickness: 0.1,
offset: 0 - new Date().getTimezoneOffset(), offset: 0 - new Date().getTimezoneOffset(),
twentyfour: false, twentyfour: false,
graduations: 'dots', graduations: 'dots',
fadeGraduations: true,
}); });
const graduationsMajor = computed(() => { const graduationsMajor = computed(() => {
@ -148,7 +121,7 @@ const minorGraduationColor = ref<string>();
const sHandColor = ref<string>(); const sHandColor = ref<string>();
const mHandColor = ref<string>(); const mHandColor = ref<string>();
const hHandColor = ref<string>(); const hHandColor = ref<string>();
const currentHTextColor = ref<string>(); const nowColor = ref<string>();
const s = computed(() => now.value.getSeconds()); const s = computed(() => now.value.getSeconds());
const m = computed(() => now.value.getMinutes()); const m = computed(() => now.value.getMinutes());
const h = computed(() => now.value.getHours()); const h = computed(() => now.value.getHours());
@ -170,7 +143,7 @@ function calcColors() {
sHandColor.value = dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.3)'; sHandColor.value = dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.3)';
mHandColor.value = tinycolor(computedStyle.getPropertyValue('--fg')).toHexString(); mHandColor.value = tinycolor(computedStyle.getPropertyValue('--fg')).toHexString();
hHandColor.value = accent; hHandColor.value = accent;
currentHTextColor.value = accent; nowColor.value = accent;
} }
calcColors(); calcColors();

View File

@ -7,6 +7,7 @@
:thickness="widgetProps.thickness" :thickness="widgetProps.thickness"
:offset="tzOffset" :offset="tzOffset"
:graduations="widgetProps.graduations" :graduations="widgetProps.graduations"
:fade-graduations="widgetProps.fadeGraduations"
:twentyfour="widgetProps.twentyFour" :twentyfour="widgetProps.twentyFour"
/> />
<div v-if="widgetProps.showLabel" class="label offset">{{ tzOffsetLabel }}</div> <div v-if="widgetProps.showLabel" class="label offset">{{ tzOffsetLabel }}</div>
@ -43,7 +44,7 @@ const widgetPropsDef = {
}, },
thickness: { thickness: {
type: 'radio' as const, type: 'radio' as const,
default: 0.1, default: 0.2,
options: [{ options: [{
value: 0.1, label: 'thin', value: 0.1, label: 'thin',
}, { }, {
@ -54,19 +55,19 @@ const widgetPropsDef = {
}, },
graduations: { graduations: {
type: 'radio' as const, type: 'radio' as const,
default: 'dots', default: 'numbers',
options: [{ options: [{
value: 'none', label: 'None', value: 'none', label: 'None',
}, { }, {
value: 'dots', label: 'Dots', value: 'dots', label: 'Dots',
}, {
value: 'dotsMajor', label: 'Dots (major)',
}, { }, {
value: 'numbers', label: 'Numbers', value: 'numbers', label: 'Numbers',
}, {
value: 'numbersCurrent', label: 'Numbers (current)',
}], }],
}, },
fadeGraduations: {
type: 'boolean' as const,
default: true,
},
twentyFour: { twentyFour: {
type: 'boolean' as const, type: 'boolean' as const,
default: false, default: false,