Jump to content
MSFN is made available via donations, subscriptions and advertising revenue. The use of ad-blocking software hurts the site. Please disable ad-blocking software or set an exception for MSFN. ×

The webpage as wallpaper technique


murderbus
 Share

Recommended Posts

Hi everyone. I've been lurking for a while. Periodically I like to run this technique past people since it's not a really common approach to customizing one's desktop environment. I think it's pretty good, though.

The idea is to set the desktop background as a webpage. So what, you ask? Well, you can use javascript to imbed ActiveX controls, which means you can custom program desktop "widgets" in DHTML. It's really easy.

Here are some examples of what my desktop looks like:

L_desktop1.jpg.png

L_desktop2.jpg.png

Here is a .rar which contains all of the files that you need to make this possible:

desktop.rar

In the RAR is a .reg file which you have to run to disable activeX warnings on your desktop. You don't NEED to run it, but it's annoying not to. Please note: this ONLY disables the warnings for web pages run locally. You DON'T NEED TO WORRY about this disabling your security when you're surfing the web, only if you download a malicious web page MANUALLY and run it. Which will never happen.

Just unpack the folder to D:\Desk2, run the .reg file, and then set desktop.html as your background. If you don't have a D: drive, it will still work, but you have to edit the HTML and replace the places where it says "D:\" with "C:\". You will also need to edit "\txtfiles\lastfile.txt" and "\scripts\desktop.css". Trust me, it will be TOTALLY OBVIOUS how to do this. There are about 13 instances of "D:\" at the very top of the html file, and the css and txt file are pretty obvious, too.

This isn't really a template for a desktop, it's more of an example. I have very limited javascript knowledge (though I know C++), and I cobbled this together from online code examples and a little trial and error. You can customize this however you want.

I have another much more complex example with embedded search functions and command prompt. Maybe I will upload that in a little bit. Enjoy!

Link to comment
Share on other sites


So it looks like not many people will care, but I updated the code substantially. Now you only have to change THREE directories to get it to work on your computer.

Desktop2.rar is the new version.

Here are the lines you must change: The first is at the VERY top of "desktop.html". I highlighted it with comments. The next (the background) is in \scripts\desktop.css at the VERY TOP. The final instance is \txtfiles\lastfile.txt. I added some extra comments, too, and fixed a minor bug in text-file read-in and read-out, so everything will work perfectly smoothly now.

As before, you can edit the layout and style easily and intuitively with desktop.css.

Is there any interest in more complex desktop widgets? I programmed a calendar, as well as imbedded search functions and a command prompt.

Edited by murderbus
Link to comment
Share on other sites

Here's a slightly more visually appealing example. Notice on the bottom-left there are text entry bars - just type something in and hit enter to open a browser with the specific search or run a console command. Bottom-right is the calendar.

L_desktop3.jpg.png

The layout still isn't stellar in this example, but you get the idea. I made drop-down menus but they're not in this version, though there's an included dropdown.js you might be able to figure out if you were motivated.

desktop3.rar

Background theme here is "Anorganic". Anyone else program their desktop in this way using HTML / Javascript?

Edited by murderbus
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    No registered users viewing this page.


×
×
  • Create New...