[Themes] Frosty Mint (w/Windows glass-like effect)

[PewienTyp]

A github user found this nice Windows minty theme that I really like. I've gone ahead and create it and named it "Frosty Mint". It is considered experimental! The glass effect is applied via CoreWM

Uses html2canvas to emulate the glass-like effect you get in (ex) Windows 7.

Demo: http://osjsv2.0o.no Video: https://www.youtube.com/watch?v=9paj_BfgnaE Screenshot: http://i.imgur.com/OAm7foN.jpg

TODO

• [x] Add basic theme to repository
• [x] Add frosty window support to CoreWM
• [x] Pixel-perfect effect
• [x] Update Button styles
• [x] Update Switcher styles
• [x] Update Progressbar styles
• [x] Look into why it is not applying correctly when changing themes
• [ ] The effect is applied too late sometimes because of animation. Make better
• [ ] Improve performance
• [ ] When applied to very dark background the contrast is too low
• [ ] Apply effect to Menus ?
• [ ] Apply effect to Panels ?
• [ ] Apply effect to Notifications ?
• [ ] If we want the above, this might be a better aproach:
  • [ ] Create a FrostEffect helper
  • [ ] In CoreWM make a proxy to catch menu requests
  • [ ] In CoreWM apply effect in createDesktopNotification()
  • [ ] In CoreWM apply effect in initPanels()

    Installation

git clone https://github.com/niklasvh/html2canvas.git vendor/html2canvas

In src/conf/999-custom.json

{
  "settings" : {
    "frontend" : {
      "Core" : {
        "Preloads":         {
          "html2canvas": {"type": "javascript", "src": "/vendor/html2canvas/html2canvas.min.js"}
        }
      }
    }
  }
}

make config themes

Then just activate the theme!

Original message

From @PewienTyp

I found beauty theme which is ideally suited to the os.js

[andersevenrud]

That looks pretty sweet! I would have to look into on how to make this "glass" effect correctly.

I really like the Green/White combo

[PewienTyp]

I like green and transparency too :smile:

[PewienTyp]

Glass effect is maybe opacity:0.x and blur. Little demo: http://jsfiddle.net/8d99vj96/

[andersevenrud]

Something like that, yeah.

I will experiment a bit with it. I'll get back to you after I-ve had my lunch :smile:

[andersevenrud]

Unfortunately I cannot get the frosting/glass effect to work. It seems it requires an actual Image and does not work at all with colors and will not blur DOM contents :(

[PewienTyp]

Can you make this demo public?

[PewienTyp]

I found something like os.js http://altaica.altervista.org but os.js is better.

[andersevenrud]

I found something like os.js http://altaica.altervista.org but os.js is better.

That looks like "Clouddesk". It is a closed-source enterprise type Cloud Desktop. There are quite a few more of them, but from what I've seen, most of them are not under active development.

Still. Thanks ;)

[andersevenrud]

Can you make this demo public?

Yes, I will push this as soon as it is ready for mainstream. I have not finished the colors, paddings, buttons etc.

[andersevenrud]

@PewienTyp I have found a way to achieve the glass/blur effect with DOM elements.

I create a PNG "screenshot" of the document with html2canvas, then take the section that lies under the window and clip and insert it into the window top with CSS blur. I'm working on a implementation ;)

[PewienTyp]

Or you can try with this: http://blurjs.com/

[andersevenrud]

That library only blurs images just like CSS does, so it won't work in this case. I need support for blurring DOM elements, and with html2canvas you can emulate this somewhat

[andersevenrud]

@PewienTyp And voila, it works :smile:

Only thing missing that it updates when you move the window around.

[PewienTyp]

Very Nice :)

[andersevenrud]

@PewienTyp Done some testing with blurring in the DOM and I'm afraid it is way to slow in the current state (and my computer is pretty good). Guess we'll have to wait for a hardware accelerated feature for this :/

However, just making it work with the background works quite well.

[andersevenrud]

@PewienTyp It sure looks nice with DOM blurring though .... sigh!

[andersevenrud]

@PewienTyp As you can see here, without DOM blurring it looks kinda weird:

[andersevenrud]

@PewienTyp Sorry for all the spam, but I actually improved the DOM blurring. Check it out... only a few more improvments, and I think it might actually work :P

Video of it in action: https://www.youtube.com/watch?v=9paj_BfgnaE

[PewienTyp]

Now it's time for right-click menu. I think it will be easy

[andersevenrud]

It already works just like the windows, so essentialy done

[andersevenrud]

@PewienTyp I have made it available on the demo-site for testing. Please note that it is a bit quirky and can have bad performance (depending on your system)... also has a couple of bugs.

But hey... it works! I will add a theme option to enable/disable the DOM blur effect later

[MrSchism]

It looks awesome!

What's the OS/WM for the first original screenshot, @PewienTyp ?

[PewienTyp]

It's only a concept from http://solmiler.deviantart.com/art/Windows-10-UI-Concept-502337159

[MrSchism]

There's a strange bug on this theme...I'm opening another issue to report it.

[andersevenrud]

Conclusion: This causes some serious performance issues with the current libraries. If you have more than 4 windows open it all turns to shit. I will wait for a native solution to come by.

I replaced this with the theme named "Glass" which is the same except for the frosty effect.

[TitanNano]

the up-coming backdrop-filter css property will give you the functionality you need here :)

[andersevenrud]

@TitanNano Sorry for very late response, but it went way over my head -- because this issue was closed!

I'll definately look into that. I didn't even know of it -- thanks! :)