So i want to have my atom transparent, for ease of use when coding without further screens on my laptop. I dislike the solutions for getting atom transparent (,like in this post, as it seems quite messy). Now i'm interested, whether it would be possible to make an atom theme, which makes atom transparent?
I think you need to tap into the electron attributes. More specifically, the new BrowserWindow function:
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({transparent: true, frame: false})
win.show()
I have not made an atom theme before, but I have attempted to make an electron app. As you can tell, making a frameless transparent browser window is probably your goal. From there on, you would want to adjust the opaque attribute of the transparency. I think CSS is your friend there. Even in the theme link that you posted suggests to modify the CSS file to customize the opacity to your likings.
Related
I recently came across a fairly new cordova plugin called cordova-plugin-qrscanner (https://github.com/bitpay/cordova-plugin-qrscanner). I have been using other QR Scanners before, but those simply overlay some kind of native camera UI until the QR has been scanned and then return back to the app.
However, the approach of this plugin is a bit different. The camera is actually shown "behind" your app and you have to make everything transparent in order to see it.
This is very interesting because you can then easily add custom overlays with HTML and CSS. However, I am not quite sure what the best approach is here.
After adding the plugin and simply calling QRScanner.scan(displayContents); you can't see anything, but the scanner is already running in the background. I then recursively removed any styles (see simplest way to remove all the styles in a page) from the app and set the background-color to transparent to see if it worked. It did, but I could obviously still see the text that was displayed before.
I guess I could create and push a new page with my overlay on it, set the background-color to transparent and then navigate back once the code has been scanned. But this feels really hacky.
Does anyone have a better solution for this?
For example, is there a way to "swap" the whole visible part of the app with the overlay and restore the state after the code has been scanned?
Thanks for your help.
EDIT:
It's not the same plugin, but this article is relevant to my question.
http://www.joshmorony.com/ionic-go-create-a-pokemon-go-style-interface-in-ionic-2/
Applying the css styles works, but again, the rest of the app is not usable then.
#Andreas I had the some problem a few weeks ago. Here is how I fixed it:
1) First of all, create a class called lowOpacity on your theme/variables.scss, it has to be global, if you create it in the page's scss adding it dynamically won't work:
.lowOpacity {
opacity: 0;
}
2) When you show the qrScanner, you should apply the class to the ion-app element, and optionally register a backbutton action:
this.qrScanner.show().then(()=>{
let unregister = this.platform.registerBackButtonAction(()=>{
this.closeQrScanner();
unregister();
});
window.document.querySelector('ion-app').classList.add('lowOpacity');
});
3) Remeber to remove the class after the qrScanner scanned something ot was closed:
closeQrScanner() {
this.qrScanner.hide().then(()=>{
window.document.querySelector('ion-app').classList.remove('lowOpacity');
}); // hide camera preview
}
ngOnDestroy() {
this.closeQrScanner();
}
Hope it helps
I wouldn't make the app transparent, since I don't see the point of that.
Instead you would just show the contents of the camera in a div in your page, and layer other HTML elements on top of that using a higher z-index than the element containing the camera image.
As #vrijdenker said you should display the camera content to the right level and do not weirdly hack the CSS.
To do that you can remote debug your app to localise the camera container and apply some CSS on it to modify the z-index / display / etc.
Remote debug on Android:
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
Remote debug on iOS:
https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html
You can do that on real device or on simulator
I have some CSS for displaying a reflection on an element which uses -webkit-gradient to fade out:
.foo { -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.5)), color-stop(0.7, transparent)); }
On browsers which support -webkit-box-reflect such as chrome, this displays a reflection of the element which gradually fades out as expected.
On browsers which don't support it at all, no reflection is show.
However, on Android's browser, a reflection is shown, but doesn't fade out.
Is there any way of getting Android to either:
fade out the reflection, or
not show the reflection at all.
I know I could use javascript to detect the browser and change the style accordingly, but I'd much prefer a CSS-only solution.
Without an example file or link, it is a little difficult to see what you need.
I also played with some reflection stuff a few months ago and didn't find anything that could do what you describe. I have some steps to get you what you want, outside of code. I recommend the item you wish to reflect be a PNG on a transparent background, to start.
The steps:
1.Take the image into your favorite image manipulation program (ex. Photoshop)
Double or extend the image canvas the necessary amount to include the reflection in the appropriate direction
Duplicate the layer (Photoshop-Layer/Duplicate Layer)
Reflect the image. (Photoshop-Layer/Image Rotation/Flip Canvas (your direction))
Move the duplicated layer such that it appears as a mirror using the Move tool
Select the Marquis tool, and set the edge blur to about 50% of your original image width.
Drag your cursor over the "reflected" layer, don't worry if it says the selection lines won't be visible, unless it says nothing was selected. If it says nothing was selected, reduce your edge blur to about 25% and try again.
Once you have a selection, be it visible or not, delete the selected area. This should give you a "reflected" look.
If desired, add a background on a layer below everything else.
Save your image as a jpg if you don't have a transparent background or a png if you do. Use it in place of the image you were reflecting and fading with code. This will be mostly browser compatible.
CSS isn't designed to handle stuff like that. In other words: no, it's not possible.
I'm having similar problems trying to do things with background gradients in the Android browser, and it appears completely unsupported
Unfortunately the above answer is right, there isn't a way to split your declaration up in a nice progressively enhanced way. You could use JavaScript/modernizr as you mentioned, and at least set a support class(es) so you don't actually have to flip the style within code.
You could try reproducing this effect with a HTML canvas element, using drawImage with your image and transforming it. Although canvas can be slow in mobile webkit.
Good luck
do gradients work at all in the android browser?
if they do, make sure you're using the correct version. There's an old webkit format you may need to use.
If not, just use modernizr to hide it on places that don't support gradients.
Context
I'm working on an application with PyGtk that would more or less work as a panel, much like gnome-panel. Ideally, on the panel i am making, i want a button without border (NB: i am in the process of learning GUI coding with PyGtk).
Problem
I have understood from another thread as well as documentation that the gtk_button_set_relief(GtkButton, GTK_RELIEF_NONE) cancels the button relief on GTK_STATE_NORMAL only. Hence when hovering the button, relief appears again (side note: this is frankly annoying that such options are partially worked out really).
An alternative to the problem is to use a GtkLabel and make a GtkEventBox its parent and make it function as a button. There is an issue however: while a GtkButton font has a relief, the GtkLabel's has none. See screenshot here below:
From left to right: GtkLabel without font relief and GtkButton with font relief
Questions
Now perhaps you can help me to solve the above with your suggestions. What i am thinking of is:
What is causing the relief of the font on these GtkWidgets: the theme or the Gtk base itself?
How can i add relief to the font of the label? OR
How can i remove the border relief of the button in all states?
More generally, how can can i create my own widget (subclassing either GtkLabel or GtkButton) using PyGtk? (I have seen an example on this thread, but that's C i believe)
Is there any alternative i haven't thought of?
Should i use another GUI library altogether?
Thanks.
Benjamin :)
Edit: the former resize-grip handle issue with GtkEventBox appears to be the effect of a Gtk+ bug.
I'm building an application, which is cross-platform (Linux, Win, OS X), and especially does graphics stuff via Cairo(mm), supported by a little bit of GTK+ scaffolding (i.e. DrawingArea). I now need some UI elements, which require a certain custom look. Ideally they should also be displayed as transparent overlay (i.e. different opacities for different parts of the UI).
As GTK+ is hard to customize (e.g. I want an edit-field with the suggestion-list above it), and me basically exactly knowing how I'd achieve this with HTML/CSS, the question popped up: Why not just let libwebkit handle the UI stuff?
I don't have much experience with WebKit, so what I need to know is:
Does my above reasoning make sense to anybody else?
CSS has opacity, can I interface WebKit in such way that it renders onto an RGBA-offscreen surface, with alpha-values inherited from the layout-processing of the CSS styles?
Even if 2. would not work, has anybody used libwebkit on an offscreen surface, which AFAIK requires redirection of keyboard and mouse interactions, probably via GTK+s provisions?
Is it possible to render web content over a clear background using WebKit?
is probably as good as it gets.
Mac OSX Finder has a search feature that darkens everything but the part that matches.
(source: justaddwater.dk)
Is there a way to emulate it via CSS? I was thinking about adding a semi-transparent black div with opacity 50. But how then do I cut a hole in it?? and possibly make the edge fuzzy?
Any suggestions?
Check out the Expose jquery plugin from the jQuery TOOLS collection. I think it will accomplish exactly what you are looking for. They even have a demo of styling the mask with a background image.
Due to the irregular shapes, you're probably looking for an image. And due to the need for varying levels of transparency, you probably want a .png that would just be stuck over the selected item.
Good question, one way would be to have a "selected" png that had the glowing circle cover the selected one, and a different just dark png cover everything else.
EDIT: But you would probably want to use a library like jquery rather than coding everything from scrath your self, as to not reinvent the wheel and save TONS of time :D
maybe a PNG image will work, a square with hole