Store Page
Wallpaper Engine
All Discussions Screenshots Artwork Broadcasts Videos Workshop News Guides Reviews

Wallpaper Engine

Store Page
View Stats:
Global Achievements
Grimm Apr 12, 2017 @ 6:55am
Clock wallpapers
Hey,

I am currently trying to make my own wallpaper for the first time. I want a wallpaper with my own image (which i already have on the editor). On top of that i want to have a clock that actually displays the right time, but i need a json file for that or something. Anyone who could help?
< >
Showing 1-15 of 17 comments
Renekie Apr 12, 2017 @ 12:23pm 
u need to add ur pic to a html file and code a clock into it
#1
Zapzarap May 9, 2017 @ 7:43am 
clock code:
<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</head>

<body onload="startTime()">

<div id="txt"></div>

</body>
</html>
#2
Grimm Feb 8, 2018 @ 11:14am 
So im having a little problem here. Once im importing my html file WE keeps saying index.html is not found and the imported name of the document is index.html.txt so my PC doesnt recognise it (probably) any tips?
#3
Arthesian Feb 8, 2018 @ 11:04pm 
you need to remove the extension ".txt", this makes it a plain text file ( probably saved with Notepad )

For windows 8+:

If you open the folder where the file is in, go to the top bar in windows explorer to the tab "view"

At the right side, you will see 3 checkboxes, one of which will say : "File name extensions", check this one.

You will now see the 'complete' name of all files, and see the file is actually names "index.html.txt", remove the '.txt' ( it will show an error; something like : you are changing the file type, are you sure? -- just click yes )
#4
Grimm Feb 11, 2018 @ 6:11am 
Thank you for the help, that actually works! Now one more problem, when i import the whole file it just shows me the time and nothing else. (I want to do it with a certain photo, so how do i manage to get that done?)
#5
Arthesian Feb 11, 2018 @ 8:36am 
you could replace :

<body onload="startTime()">

with :

<body onload="startTime()" style="background-image:url('background.jpg'); background-size:cover;background-position:center">

Make sure you have an image named 'background.jpg in the same folder as the 'index.html' ( or change the name in 'url()' accordingly if you want to use another name/filetype.
#6
Grimm Feb 12, 2018 @ 6:59am 
Again thanks for the help, it worked again. Now im stuck for the third time. I'm trying to upload a 1920x1080 picture but the image comes out distorted. A part of the photo is cut off and replaced on the top side of the photo. See link for image:

https://gyazo.com/78995927e0577cc1a8a664306539e0e6

Again any way to prevent this? Its not my intention to distort the image :)
#7
Arthesian Feb 12, 2018 @ 8:22am 
it shouldn't do that with the code I provided..... could you paste the code you are currently using to place/position the background image?

use the code between : [code] >> your code here << [/code], for readability :D
#8
Grimm Feb 13, 2018 @ 10:39am 
So i think this is the code you are asking for, if it's not just ask me what to copy paste since i am really bad at programming and stuff.

#background {
background-image:url("background.jpg");
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background-size:cover;
filter:blur(5px);
-webkit-filter:blur(5px);
}
#9
Arthesian Feb 13, 2018 @ 12:49pm 
You should only need :

#background { background-image:url("background.jpg"); background-position:center; background-size:cover; width:100vw; height:100vh; filter:blur(5px); }

to center the image, and make it ''full screen''
#10
Grimm Feb 14, 2018 @ 7:59am 
Sadly, this didnt help. I pasted your text but this screen still stays misformed. Any ideas?
#11
Arthesian Feb 14, 2018 @ 10:18am 
well... you could at leas try to set

" background-repeat: none" -- to see if it's actually CSS behaviour or not.... if you will see black bars after you have implemented this rule, you know it's because the image was repeated ( and thus not properly scaled to fit the screen ) -- if it still remains the same, there is some other issue....
#12
Grimm Feb 15, 2018 @ 6:13am 
I dont see any black bars, and the image still remains the same...
#13
RoyalHemlock Dec 2, 2018 @ 12:21am 
Originally posted by Arthesian:
well... you could at leas try to set

" background-repeat: none" -- to see if it's actually CSS behaviour or not.... if you will see black bars after you have implemented this rule, you know it's because the image was repeated ( and thus not properly scaled to fit the screen ) -- if it still remains the same, there is some other issue....

How would you adjust the time in the clock? Say if you want to be 11 hours faster/slower to show a different time zone?
#14
Arthesian Dec 21, 2018 @ 12:43am 
Originally posted by RoyalHemlock:
How would you adjust the time in the clock? Say if you want to be 11 hours faster/slower to show a different time zone?

It's in sync with your local system time. There is currently no option to have it set to a different timezone.

A solution would be to change your local system time ( windows timezone )....

But I'm not sure if that is what you are looking for....
#15
< >
Showing 1-15 of 17 comments
Per page: 1530 50

Wallpaper Engine > General Discussions > Topic Details
Date Posted: Apr 12, 2017 @ 6:55am
Posts: 17

Discussions Rules and Guidelines