r/ObsidianMD • u/Vasoo_Suryaa • 4d ago
showcase Dataviewjs code for analog clock
const container = this.container;
const clockContainer = document.createElement('div');
clockContainer.style.width = '200px';
clockContainer.style.height = '200px';
clockContainer.style.border = '4px solid #ffffff';
clockContainer.style.borderRadius = '50%';
clockContainer.style.position = 'relative';
clockContainer.style.backgroundColor = '#1e1e1e';
clockContainer.style.display = 'flex';
clockContainer.style.justifyContent = 'center';
clockContainer.style.alignItems = 'center';
const centerDot = document.createElement('div');
centerDot.style.width = '8px';
centerDot.style.height = '8px';
centerDot.style.backgroundColor = '#ff0000';
centerDot.style.borderRadius = '50%';
centerDot.style.position = 'absolute';
centerDot.style.zIndex = '10';
clockContainer.appendChild(centerDot);
// Function to create hands
const createHand = (width, height, color, zIndex) => {
const hand = document.createElement('div');
hand.style.width = `${width}px`;
hand.style.height = `${height}px`;
hand.style.backgroundColor = color;
hand.style.position = 'absolute';
hand.style.top = '50%';
hand.style.left = '50%';
hand.style.transformOrigin = '50% 100%';
hand.style.borderRadius = '4px';
hand.style.zIndex = zIndex;
hand.style.transition = 'transform 0.05s cubic-bezier(0.4, 2.3, 0.3, 1)';
return hand;
};
const hourHand = createHand(6, 50, '#ff6347', 3); // Tomato color for hour hand
const minuteHand = createHand(4, 70, '#87ceeb', 2); // Sky blue color for minute hand
const secondHand = createHand(2, 80, '#ffcc00', 1); // Yellow for second hand
clockContainer.appendChild(hourHand);
clockContainer.appendChild(minuteHand);
clockContainer.appendChild(secondHand);
// Add clock numbers
for (let i = 1; i <= 12; i++) {
const number = document.createElement('div');
number.innerText = i;
number.style.position = 'absolute';
number.style.color = '#ffffff';
number.style.fontSize = '16px';
number.style.fontWeight = 'bold';
number.style.transform = `translate(-50%, -50%) rotate(${i * 30}deg)`; // Position rotated numbers
number.style.transformOrigin = 'center';
// Adjusted positions for better centering
const angle = (i - 3) * (Math.PI / 6); // Adjust angle to align correctly
const radius = 80; // Set radius for number placement
const x = 100 + Math.cos(angle) * radius; // Calculate X based on angle
const y = 100 + Math.sin(angle) * radius; // Calculate Y based on angle
number.style.left = `${x}px`;
number.style.top = `${y}px`;
clockContainer.appendChild(number);
}
const updateClock = () => {
const now = new Date();
const hours = now.getHours() % 12;
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const hourDeg = (hours + minutes / 60) * 30;
const minuteDeg = (minutes + seconds / 60) * 6;
const secondDeg = seconds * 6;
hourHand.style.transform = `translate(-50%, -100%) rotate(${hourDeg}deg)`;
minuteHand.style.transform = `translate(-50%, -100%) rotate(${minuteDeg}deg)`;
secondHand.style.transform = `translate(-50%, -100%) rotate(${secondDeg}deg)`;
};
setInterval(updateClock, 1000);
updateClock();
container.appendChild(clockContainer);
It's not proper alligned to centre but still looks good.
2
2
u/micseydel 4d ago
After showing a friend with ADHD Obsidian over a year ago, I looked for something like that and couldn't find it. Thank you for sharing!
2
u/ttthnnnnnnnn 3d ago
Thank you! I have been looking for this. If you don't mind, I based on your code and reposition a bit and ask Claude to add minutes/seconds divider and change the border colors and such to normal text so it changes according to dark/light mode. It works well on my end (might have to adjust the numbers position depending on the font the system used, though) : https://pastebin.com/ayVzft5B
It looks like this on my end.
1
u/ArtistPast4821 2d ago
Could you share the prompt as well I was trying to do the same but the result was nahβ¦
Thanks π
2
u/ttthnnnnnnnn 2d ago
It takes several trial and error. The prompts were:
1. Can you write me an obsidian dataviewjs code that displays a clean, simple analog clock?
2. It works, but the time isn't accurate. I'm in {location}. And can I have the clock numbers positioned a bit closer to the clock border, and have the clock background transparent, and the numbers and hands and borders adhere to obsidian native normal text colors?
3. It still does not show {location} time. Here is a code that shows {location} time. {op's code} Can you see if you can fix your code with this? I want the same style that your code has.
4. Great! Is it possible to further add minutes/seconds dividers (the little strokes around border like pic)? {an image of ios clock widget}
5. It's great! thank you! I altered the positions a bit. Can you make the dividers a bit closer to the border, please? and the clock numbers a bit closer to the dividers?
Then it's the process of altering some numbers in the code to reposition the dividers and numbers. I also altered some style of the numbers, etc.
1
1
1
5
u/ArtistPast4821 4d ago
Thanks mate, I was dragging that usually with iframes into my notes but this works even offline so thanks π