Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Share your use-case #1

Closed
sindresorhus opened this issue Jan 9, 2020 · 133 comments
Closed

Share your use-case #1

sindresorhus opened this issue Jan 9, 2020 · 133 comments

Comments

@sindresorhus
Copy link
Owner

sindresorhus commented Jan 9, 2020

There are probably a lot of cool use-cases for this app that I wouldn't think of. Please share your use-case here and I'll put the best ones in the readme and App Store description.


Here are some that I have found:

More here:

Resource heavy / noisy (better as screensaver #25):

@sindresorhus sindresorhus pinned this issue Jan 9, 2020
@marcofugaro
Copy link

marcofugaro commented Jan 9, 2020

Animated creative code experiments. For example this or this. Or even this one but with the mousemove instead of click.

On a side note, is mouse interaction possible? Like at least the mousemove event?

@gbougakov
Copy link

GIPHY TV is awesome with this https://giphy.com/tv/search/chonky-cats

@sindresorhus
Copy link
Owner Author

On a side note, is mouse interaction possible? Like at least the mousemove event?

Possible to add support for that, yes. Can you open a separate issue about that?

@sindresorhus
Copy link
Owner Author

Someone suggested setting https://www.omfgdogs.com/ as the wallpaper 🤣

@pablopunk
Copy link
Contributor

pablopunk commented Jan 10, 2020

I quickly made https://time.pablopunk.com/ to display the time. Duuuuude that was so easy. I plan to do more stuff like this in the future, it's so powerful.

@gleich
Copy link
Contributor

gleich commented Jan 10, 2020

A great use case is using gitstalk. It's super fast so it works really well with Plash. Below is an example of how I use it (dark mode enabled and set the opacity to half):
Screen Shot 2020-01-10 at 8 20 55 AM

@withoutwax
Copy link

withoutwax commented Jan 10, 2020

Would it be possible to save multiple website and toggle them with ⌘ + number key?

@shanlh
Copy link

shanlh commented Jan 11, 2020

I found that the image directly using Unsplash may not be displayed completely in full screen, so I made https://plash-fullscreen.now.sh, you can display any image with the url parameter like this https://plash-fullscreen.now.sh?url=YOUR URL

@sindresorhus
Copy link
Owner Author

@shanlh Are you sure you used the correct resolution in the Unsplash URL parameter? It works perfectly for me and others.

Your thing is definitely useful so people don't have to manually input their resolution though. 👌

@shanlh
Copy link

shanlh commented Jan 11, 2020

@sindresorhus I use https://source.unsplash.com/random by default, only use background-size: cover; make it full screen, people can pass his own Unsplash link to url parameter for higher definition pictures.

@sindresorhus
Copy link
Owner Author

@pablopunk Would be cool to be able to customize the clock slightly. For example, not show seconds and choose the color of the background and the clock.

@pablopunk
Copy link
Contributor

pablopunk commented Jan 12, 2020

@sindresorhus you got it 😉

https://github.com/pablopunk/time#customize-options

Any more suggestions? I was thinking about text size and stuff like that

@sindresorhus
Copy link
Owner Author

@pablopunk Nice! I opened an issue with some feedback in your repo.

@JavaGT
Copy link

JavaGT commented Jan 13, 2020

https://teamtrees.org/ with CSS as follows provides a nice, subtly animated wallpaper. NOTE: requires refreshing for counter updates.

#donationAmountCard,
.banner,
.bg-gradient-white-to-grey,
.bg-dark-blue {
display: none;
}

@sindresorhus
Copy link
Owner Author

sindresorhus commented Jan 13, 2020

Tip: The Plash web view background is transparent. So if you don't set a background color in your website or remove it from a website, your actual wallpaper will show through. This enables a lot of cool use-cases. You could, for example, place something interactive over your normal static wallpaper, or only show a dynamic wallpaper on part of the screen.


Example use-case.

Show Google Calendar on top of your normal wallpaper

Screen Shot 2021-03-30 at 17 24 55

  1. Add https://calendar.google.com as a website.
  2. Enable “Use print styles ”. (This simplifies the calendar layout) (This options requires macOS 11)
  3. Add this to the "CSS" field:
* {
	background-color: transparent !important;
	color: white !important;
}

.QQYuzf,
.gboEAb,
header.NkK3Fc,
.Hrn1mc {
	display: none !important;
}

[role="grid"] * {
	border-color: rgba(255, 255, 255, 0.3) !important;
}

.tNDBE:not(.Wyo4Qe),
.SGWAac,
.QIadxc:last-child {
	border: none !important;
}

[data-chips-dialog] {
	background-color: rgba(0 0 0 / 80%) !important;
}

@pablopunk
Copy link
Contributor

pablopunk commented Jan 13, 2020

FYI I updated https://github.com/pablopunk/time with all the options you suggested @sindresorhus. Looking good!

Captura de pantalla 2020-01-13 a las 17 42 12

@eccorley
Copy link

Really happy with how well it works with a gyrosco.pe dashboard (https://gyrosco.pe). The age updates in realtime and I can interact with it even with Browsing Mode disabled.

Thanks for another great tool @sindresorhus!

Screen Shot 2020-01-13 at 2 10 39 PM

@sindresorhus
Copy link
Owner Author

Another nice thing you could do with the transparency support: Show a clock directly on top of your existing wallpaper:

Screenshot 2020-01-15 at 01 26 12

Use this URL: https://time.pablopunk.com/?seconds&fg=white&bg=transparent&font=SFMono-Regular,Consolas,%27Liberation%20Mono%27,Menlo,monospace

@JavaGT
Copy link

JavaGT commented Jan 15, 2020

Nice stock tracking on wallpaper using Sharsies
Screen Shot 2020-01-15 at 11 08 48 PM
URL: https://app.sharesies.nz/portfolio
CSS:

[class^="Toolbar__right__"],
[class^="Modal__link__"],
[class^="ListMenuWithIcon__listing__"],
[class^="spacing__spaceBelow32__"],
[class^="Page__underline__"],
[class^="Toolbar__left__"],
[class^="ListFlyOutMenu__menu__"] {
  display: none !important;
}
#app > div {
  max-width: 100vw !important;
}
[class^="index__swipeableArea__"] > * {
  transform: none !important;
}
[class^="index__swipeableArea__"] > * > * {
  width: calc(100% / 3) !important;
}
[class^="index__controls__"] {
  opacity: 0 !important;
}
[class^="Toolbar__toolbar__"] > * {
  flex-grow: 1 !important;
}

@tobie
Copy link

tobie commented Jan 16, 2020

…and another clock:

Screen Shot 2020-01-16 at 12 23 52

URL: http://www.helvetictoc.com/

CSS:

body.day, body.night { 
  background-color: transparent;
  color: white
}

div.screen {
  margin: 4%;
  font-size: 100px !important;
  bottom: 0;
  top: auto;
}

#colophon { display: none }

@ha404
Copy link

ha404 commented Jan 21, 2020

sample

URL: https://calendar.google.com/

body {
	padding: 3% 53% 3% 3%;
	background: transparent !important;
}

header,
button {
	display: none !important;
}

.SGWAac {
	border: none !important;
}

@mirshko
Copy link

mirshko commented Jan 21, 2020

https://www.manifest.app/

Web based stickie notes

@patrickpistor
Copy link

patrickpistor commented Jan 22, 2020

A low poly town that has clouds and traffic that extends indefinitely. Use this custom CSS for the best effect.

#about-button {
    display: none;
}

https://demos.littleworkshop.fr/infinitown

@dixiklo9
Copy link

dixiklo9 commented Jan 25, 2020

Tip: The Plash web view background is transparent. So if you don't set a background color in your website or remove it it from a website, your actual wallpaper will show through. This enables a lot of cool use-cases. You could, for example, place something interactive over your normal static wallpaper, or only show a dynamic wallpaper on part of the screen.

Example use-case. Show Google Calendar on top of your normal wallpaper:

Screenshot 2020-01-13 at 12 28 21

  1. Set https://calendar.google.com/ as URL.
  2. In preferences, lower the opacity to 70%.
  3. Add this as "Custom CSS":
* {
	background-color: transparent !important;
	color: white !important;
}

.QQYuzf,
.gboEAb,
header.NkK3Fc,
.Hrn1mc {
	display: none !important;
}

Can anyone help me to display the iCloud calendar without sidebar etc like the Google calendar? https://www.icloud.com/calendar/

@sindresorhus
Copy link
Owner Author

@dixiklo9 Go to https://www.icloud.com/calendar/ and select "Month" view.

Then use this CSS override:

* {
	background-color: transparent !important;
	color: white !important;
	border: 0 !important;
}

#sc1993,
.sc-view.main-header,
.sc-view.main-footer {
	display: none !important;
}

.sc-view.month-calendar {
	position: fixed !important;
}

And the result:

Screenshot 2020-01-26 at 13 20 59 Redacted

Right-click when in "Browsing Mode" and choose "Inspect Element" to be able to debug and tweak it further. For example, if you want the borders, you could remove border: 0 !important;.

@dixiklo9
Copy link

@dixiklo9 Go to https://www.icloud.com/calendar/ and select "Month" view.

Then use this CSS override:

* {
	background-color: transparent !important;
	color: white !important;
	border: 0 !important;
}

#sc1993,
.sc-view.main-header,
.sc-view.main-footer {
	display: none !important;
}

.sc-view.month-calendar {
	position: fixed !important;
}

And the result:

Screenshot 2020-01-26 at 13 20 59 Redacted

Right-click when in "Browsing Mode" and choose "Inspect Element" to be able to debug and tweak it further. For example, if you want the borders, you could remove border: 0 !important;.

Thank you very much for the CSS code and the tip for tweaking.
Just a short note. In the bottom row there is an overlap of the days with the dates. How to fix the bug?

@raguay
Copy link

raguay commented Feb 3, 2020

I just started a tutorial series of making backgrounds
for Plash using Svelte and Nodejs. The first tutorial
is basic project setup and the beginnings with a random
background changer every 30 minutes, a Time display, and
the time display as a circle meter. I'll be adding more
to it over time. You can read there series here: https://www.customct.com/#/tutorials/plashserver/series

The GitHub repository has the current code for the project.

@KingMario
Copy link

Do you have the source code of this website? Thank you
@longyanjiang https://github.com/jonathontoon/manifest

@ced404
Copy link

ced404 commented Sep 27, 2022

Classic Matrix code rain, really good looking and some options: https://github.com/Rezmason/matrix

@zoealmonjob
Copy link

zoealmonjob commented Sep 30, 2022

Hey there, I've been super impressed with Plash and really want to thank @sindresorhus for creating it! There's one issue I've been running into though, when I try to replicate this user's setup:

Desktop as a canvas: https://twitter.com/thesolarmonk/status/1469762780848820226

When I add sprout.place into Plash and log in, the interface works for about a second until I get this screen:

Screen Shot 2022-09-30 at 10 21 50 AM

Does anyone have a clue what could be causing the issue, or if I need to add an extra bit of code somewhere?

In any case, I'll definitely continue using Plash. Thanks to the creator for their hard work, and to everyone here for sharing such cool ideas!

@liwuhou
Copy link

liwuhou commented Oct 2, 2022

Classic Matrix code rain, really good looking and some options: https://github.com/Rezmason/matrix

It's pretty cool!!!

@liwuhou
Copy link

liwuhou commented Oct 2, 2022

I found some cool sites, like programmer's music player:https://musicforprogramming.net/latest/
image

And the Rectangles :https://rectangles.app?full_screen=true
image

@blakegearin
Copy link

I realize this won't be a popular option, but figured it was worth mentioning.

Tabs for a Cause (source) was made as a new tab replacement showing some ads to raise money for charity. You can customize the background as well as display widgets like a clock, to-do lists, bookmarks, and search engine.

URL to use with Plash: https://tab.gladly.io/newtab/

@PavelSafronov
Copy link

https://slowroads.io/

Requires a bit of JS to start driving (or you can use the browsing mode):

function triggerMouseEvent (node, eventType) {
    var clickEvent = document.createEvent ('MouseEvents');
    clickEvent.initEvent (eventType, true, true);
    node.dispatchEvent (clickEvent);
}
function turnOnAutoDrive() {
    var targetNode = document.getElementById('autodrive-button'); 
    triggerMouseEvent (targetNode, "mouseover");
    triggerMouseEvent (targetNode, "mousedown");
    triggerMouseEvent (targetNode, "mouseup");
    triggerMouseEvent (targetNode, "click");
}

// get past the splash screen
document.getElementById('splash-loader').click();

// after everything is loaded, start auto-driving
setTimeout(() => {
    turnOnAutoDrive();
}, 10 * 1024);

Screenshot 2022-11-07 at 9 39 21 AM

@MiracleXYZ
Copy link

MiracleXYZ commented Jan 7, 2023

I cannot believe no one has yet pointed out MagicMirror², an awesome open source modular mirror platform. What it does is to create a web page that can display a lot of information, like time, weather, calendar, to-do list, stock prices, etc. It's initially designed for Raspberry Pi, but can run perfectly on Macs, making it a perfect match for Plash.

A screenshot after I have everything configured:

Snipaste_2023-01-08_04-16-14

Installation

First install nodejs and npm. For example, using Homebrew

brew install nodejs

Then follow the instructions at Installation & Usage starting from Step 2:

cd ~
git clone https://github.com/MichMich/MagicMirror
cd MagicMirror/
npm run install-mm
cp config/config.js.sample config/config.js
npm run server

Then navigate to http://localhost:8080 - you should see a simple MagicMirror webpage up and running.

Start Server on Startup

If you close the terminal right now, the webpage will be down. Additional steps are needed to have the server run 24/7. Just follow the instructions at Autostarting your MagicMirror. The only modification is that the content of mm.sh should be

cd ./MagicMirror
npm run server

according to our use case.

Modify CSS

Navigate to directory css and copy custom.css.sample to custom.css. Make sure to add these lines:

:root {
  cursor: default; /* prevent cursor from disappearing in Browsing Mode */
  --color-background: transparent;

  --color-text: #fff;
  --color-text-dimmed: #fff;
  --color-text-bright: #fff;

  --gap-body-top: 20px;
  --gap-body-right: 60px;
  --gap-body-bottom: 60px;
  --gap-body-left: 80px;
}

Here I set --gap-body-left a little bit higher because I place my Dock on the left. For most cases, just set left equal to right and increase bottom. And feel free to modify other lines if needed.

Plash Setup

This should be easy. Just add http://localhost:8080 (port can be changed in config/config.js), no need to add any CSS or JS. Browse mode works as well.

More Customization

Modify config/config.js to configure the modules. And you can install third-party modules as well! Feel free to read MagicMirror² Documentation and customize your own MagicMirror, or rather, MagicDesktop!

Here's a list of modules I use in the screenshot:


Updates

On a Light Background

Add the following lines to css/custom.css to make the display clearer if you're on a light background.

.module {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  padding: 10px;
}

@Terabyte1385
Copy link

How about NASA Image of the Day? That sounds like a reasonable use case.

@harshvardhaniimi
Copy link

How about NASA Image of the Day? That sounds like a reasonable use case.

#1 (comment)

@ilaoyao
Copy link

ilaoyao commented Feb 19, 2023

https://github.com/pablopunk/time
custom css:

#time {
position:absolute;
left:2rem;
bottom:-0.2rem;
font-weight:400;
font-size:3rem;
font-family:Copperplate;
color:#8A95A9;
/*background-color:#91A0A5;
opacity: 0.75;
padding:0 0.5rem 0 0.5rem;
*/
}

截屏2023-02-19 18 26 59

Repository owner deleted a comment from fpuhan Mar 6, 2023
Repository owner deleted a comment from fpuhan Mar 6, 2023
@xkloveme
Copy link

image
https://inftab.com

@rajatkantinandi
Copy link

Google calendar week view:
https://calendar.google.com/calendar/u/0/r/week

Set styles to make everything transparent except events, current day so that they are clearly visible. Also, hide scrollbar to make it cleaner.
CSS styles:

*:not([data-opens-details="true"]):not([data-opens-details="true"] *):not([aria-label*="today"]) {
	background-color: transparent !important;
	color: white !important;
}

.QQYuzf,
.gboEAb,
header.NkK3Fc,
.Hrn1mc {
	display: none !important;
}

*::-webkit-scrollbar {
  display: none;
}

Also, turn on Use print styles.

Screenshot:

Screenshot 2023-03-22 at 12 36 05 PM

@Holipori
Copy link

Simple but fun: I loaded a video as your dynamic live wallpaper, just like the Wallpaper Engine app in Windows.

I created a local website with the help of New Bing, which consists of only one file named 'index.html'. Use the code below and replace the video name with your own.

<html>
<head>
<style>
* {
  margin: 0;
  padding: 0;
}

video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}
</style>
</head>
<body>
<video src="video.mp4" autoplay loop muted></video>
</body>
</html>

@program247365
Copy link

This... https://floor796.com/

@PrayagS
Copy link

PrayagS commented Apr 16, 2023

This... floor796.com

This one is awesome. I added the following under CSS rules to hide the header,

.header {
	visibility: hidden;
}

@program247365
Copy link

Another cool site for Plash - https://oimo.io/works/clock/

@danielfalbo
Copy link

Want your Macbook to look as if it just came out of Blade Runner 2049? Archillect TV.

archillecttv.mov

@praharshjain
Copy link

praharshjain commented Jun 2, 2023

Use this to confuse people - https://wintest.andrewstech.me/

Use the below CSS to hide ads -

.adsbygoogle { display: none!important; width: 0px!important;; height: 0px!important; }

@simon-zk
Copy link

Use this to confuse people - https://wintest.andrewstech.me/

the ads makes it worthless

@praharshjain
Copy link

praharshjain commented Jun 12, 2023

Use this to confuse people - https://wintest.andrewstech.me/

the ads makes it worthless

@simon-zk Added CSS to hide ads, also updated original comment with the CSS

@ProjectToronto
Copy link

I made this using chatgpt https://plashaddon.prjctkraken.repl.co/ and it works perfectly for this and I use "The drive youtube video" only issue is loops so feel free to improve it.

@ProjectToronto
Copy link

Fixed it just right click on the video and hit loop

@m1kx
Copy link

m1kx commented Jul 28, 2023

Hi, I just released the first version of a website, which can display animated apple music album covers in full screen, which can make really great wallpapers! You just have to input an album url (e.g. https://music.apple.com/us/album/eternal-atake-deluxe-luv-vs-the-world-2/1502707380) and select the desired resolution (both in browsing mode). The covers are saved in the background and you can iterate through them by double clicking. The url is https://cover.mikaco.de/.
Feel free to suggest features/improvements, I hope you like it :)

Repository owner locked and limited conversation to collaborators Aug 14, 2023
@sindresorhus sindresorhus converted this issue into discussion #136 Aug 14, 2023
@sindresorhus sindresorhus unpinned this issue Aug 15, 2023

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
None yet
Projects
None yet
Development

No branches or pull requests