How to fork a KDE widget from system dir in my home dir? - qml

I have a KDE4 desktop on an enterprise server (CentOS 7) where I don't have root access. Yes, KDE 4 still.
I want to take the default Pager widget (which displays the virtual desktops on the panel) and modify it so that it does not display the window outlines on the desktop indicators. It obscures the workspace name text.
I found this old thread which attempts to do the same, but it was never resolved, and they were not restricted to non-root solutions as I am.
My attempt was to copy the widget files from the system directory into my home directory and make a new version with hacked QML (see changes at end).
But after restarting KDE, I do not see the new widget available to use when right clicking the panel and going through the Add widget dialog.
I cannot find much relevant documentation on KDE4 anymore. Does anyone remember what to do?
Forking the widget as org.kde.pager-nowinoutline
$ mkdir -p ~/.kde/share/apps/plasma/packages
$ cp -r /usr/share/kde4/apps/plasma/packages/org.kde.pager ~/.kde/share/apps/plasma/packages/org.kde.pager-nowinoutline
metadata.desktop
[Desktop Entry]
Name=Pager (No window outlines)
Icon=user-desktop
Type=Service
X-KDE-ServiceTypes=Plasma/Applet
X-Plasma-MainScript=ui/main.qml
X-KDE-PluginInfo-Author=
X-KDE-PluginInfo-Email=
X-KDE-PluginInfo-Name=org.kde.pager-nowinoutline
X-KDE-PluginInfo-Version=1.0
X-KDE-PluginInfo-Category=Windows and Tasks
X-KDE-PluginInfo-Depends=
X-KDE-PluginInfo-License=GPL
X-KDE-PluginInfo-EnabledByDefault=true
content/ui/main.qml
// ...
// Comment out this part responsible for drawing the window outlines
/*
Repeater {
model: windows
Rectangle {
id: windowRect
// ...
}
// ...
}
*/
// ...

I got it to work by keeping the same widget name (in both the directory structure and metadata.desktop.
$ cp -r /usr/share/kde4/apps/plasma/packages/org.kde.pager ~/.kde/share/apps/plasma/packages
This is enough so that, when you restart KDE (or alternatively, remove and re-add the widget in the panel), your $HOME version will override the system version.
As for the QML, I couldn't just comment out all that as I did in the original question, as it broke some other functionality such that the widget wouldn't even load.
I ended up just adding
visible: false
within the context of
Repeater {
model: windows
Rectangle {
id: windowRect
and that prevents the windows from being drawn.

Related

Scene rendering goes dark after calling LoadScene/LoadLevel [duplicate]

I completed Unity's roll-a-ball tutorial and it works fine. I changed a couple of materials to make it look better. I also added a C# script that should restart the level when the player falls off of the ground (I disables the walls). I am using Unity 5.5.
It initially looks like this:
But when I go off the edge and the level restarts, it looks like this:
It sometimes looks like this for a few seconds after opening unity when the editor is loading.
Here is the script:
using UnityEngine;
using System.Collections;
public class DeathTrigger : MonoBehaviour {
// Use this for initialization
void Start () {
}
// Update is called once per frame
void Update () {
}
void OnTriggerEnter (Collider other)
{
if (other.gameObject.CompareTag("Player"))
Application.LoadLevel(Application.loadedLevel);
}
}
Any ideas on what's causing this?
The colors and materials are loaded. This is a lighting problem because lighliting is still calculating in the background. This will likely occur in the Editor only. This should not happen in the build.
Depending on your Unity version, you can fix this by going to Windows --> Lighting --> Settings then go to the Scene tab. Scroll down and disable Auto Generate checkbox then click the Generate Lightning button.
For older version of Unity with no Auto Generate checkbox, see here.
After play with Lighting tools, only one thing should be change on Lighting Setting for every scene.
Window > Rendering > Lighting (Unity 2020)
Click at Environment Tab
At Environment Lighting, change Source from Skybox to Color.
Select white color from Ambient Color.
Done. Try test it.
Before
After
I found many solutions online but I was missing out a step, so I hope this helps.
Most solutions indicated to go to Windows->Lightning, then untick Auto and Click Generate Lighting. My problem was that while I was pressing the generate button I did not have all of my scenes loaded for preview (at least not the scene I had problems with), so it was only applying light generation to the loaded scenes. Make sure all scenes are loaded when generating the lights.
Try Clearing Baked Data if you are using unity version around 5.5
Go to Windows->Lightning->Untick Auto->Now Click dropdown arrow of Build Button which is near Auto(Check Box) -> Select Clear Baked Data.
Now try Your code which looks fine although SceneManager.LoadScene (1); is enough.
Also unloading the previous scene and setting new scene as active scene is a good practice.
This worked for me.
File > Build settings > player Settings > (on the left) Graphics > (Top-Right) gear icon > Reset
I'm a newbie and none of the advice on web helped me. However when I went to Window > Rendering > Lightning > scene tab; If "lightning setting" says “none”, click on it and choose “demo”- setting. Press “generate”.
So it seems like it was missing settings all together which made the scene go dark when loaded.
I encountered the exact same problem. What worked for me was to set Directional Light > Light > Mode to Realtime. (it was Baked, for some reason)
I hope this can help someone in the future.

How to install Yii imagesgallerymanager extension

I am trying to create a image gallery and I found the following extension:
http://www.yiiframework.com/extension/imagesgallerymanager/
I chose this extenion because it is the best evaluated. My problem is that I don't understand how to install it. I am new using Yii, so I'm lost.
The instrunctions are these:
Checkout source code to your project, for example to ext.galleryManager.
Install and configure image component(https://bitbucket.org/z_bodya/yii-image).
Add tables for gallery into database (there is sql scheme and migration samples in migrations folder in extension)
Import gallery models to project, by adding "ext.galleryManager.models.*" to import in config/main.php
Add GalleryController to application or module controllerMap.
Configure and save gallery model
Render widget for gallery
Please, someone could to explain how to install and configure image component to me? I don't understand where I have to put the code. The instruction about how to do it, says something like this:
application main config components
'image'=>array(
'class'=>'application.extensions.image.CImageComponent',
// GD or ImageMagick
'driver'=>'GD',
// ImageMagick setup path
'params'=>array('directory'=>'D:/Program Files/ImageMagick-6.4.8-Q16'),
),
调用方法():
$image = Yii::app()->image->load('images/test.jpg');
$image->resize(400, 100)->rotate(-45)->quality(75)->sharpen(20);
$image->save(); // or $image->save('images/small.jpg');
第二种:
Yii::import('application.extensions.image.Image');
$image = new Image('images/test.jpg');
$image->resize(400, 100)->rotate(-45)->quality(75)->sharpen(20);
$image->render();
Should I to paste the previous code in ../config/main.php? Sorry but I am a bit confussed
Thank you very much.
I would recommend you to git clone the yii-demo-blog from z_bodya (a yii developer). There are already implementations of his yii extensions (image-attachment, image-gallery, tinymce+elfinder), using this command:
git clone https://bitbucket.org/z_bodya/yii-demo-blog.git
then follow the instruction on that page https://bitbucket.org/z_bodya/yii-demo-blog.
Then study the workflow of his galleryManager at https://bitbucket.org/z_bodya/gallerymanager
Also read books on Yii, I recommend:
Web Application Development with Yii and PHP
Author: Jeffrey Winesett
http://www.amazon.com/dp/1849518726?tag=gii20f-20
Yii Application Development Cookbook
Author: Alexander Makarov
http://www.amazon.com/dp/B00BKZHDGS?tag=gii20f-20
It looks correct. Can you please make sure that entry 'images' is within the 'components' array? Your config file (main.php) should look like this:
//other options
'components' => array(
'image' => array(
'class'=>'application.extensions.image.CImageComponent',
// GD or ImageMagick
'driver'=>'GD',
// ImageMagick setup path
'params'=>array('directory'=>'D:/Program Files/ImageMagick-6.4.8-Q16'),
),
//.. other components
)
You call $image->render() to show the actual image. It should be in the controller or view file.
You call Yii::import() before you use the class. This is done so that Yii knows where to find your class.
Before you start
Here are some initial points, you should go through, to learn, if this extension is for you:
If you're not sure, if yii-gallery-manager extension is for you and want to play a little bit with this, before incorporating it into your application, then follow to "Demo application" section at the end of this text.
Gallery Manager is only a set of widgets, models, behaviors and controllers, which provides gallery management functionality to your own models and modules. It is not a ready, out-of-the box solution in form of entire module for managing galleries. Plus, it is also gallery manager only. It is meant for backend and does not provide you with anything special for frontend. You must write your own code for presenting particular gallery basing on data provided by yii-gallery-manager extension.
Because galleries are attached to one of your models and are kept in separate tables, using Gallery Manager widget causes changes to be immediately on-line. In other word, user editing any model doesn't have to save it or can even cancel editing it, but changes made by him/her in Gallery Manager are immediately sent (via AJAX), immediately stored in database and are public at once. You should probably pass this information to users of your application. And even consider some implementation, that will make post invisible, if user is editing it and changing galleries.
Gallery Manager extension is backed-up by quite powerful yii-image extension (actually a Yii port of famous Kohana image manipulation class) and offers you automated generation of previews for each uploaded image, including many cool graphical effects and image transformations.
Extension uses Twitter Bootstrap styles. If you're using it in your application as well, you'll have gallery manager matching styles of your entire application. If you don't use Bootstrap, you don't need to install it (yii-gallery-manager requires only bootstrap.css file as it uses styles from it), but you'll probably have gallery manager in different styling than rest of your application.
If you're convinced to use this extension, then continue reading. If resign, you can scroll to the end of this text, where I put some alternatives.
Preparation stage
To install and use this extension in your application you need:
yii-gallery-manager extension itself,
yii-image extension,
Twitter Bootstrap's styles.
Main repository (at BitBucket) for both extensions are not clonable due to some bug. You should use files added to Download section in extension page at yiiframework.com or alternatively (for main extension only) mirror code repository at GitHub.
Decompress their contents into extensions folder in your application and optionally, change their folders' names.
As for Twitter Bootstrap, you only need it's styles (bootstrap.css) which are used by extension. You don't need entire library.
After unpacking yii_image extension, you need to add it's configuration to your application's configuration array (in protected/config/main.php, if you didn't change this).
It should be:
'image'=>array
(
'class'=>'application.extensions.image.CImageComponent',
'driver'=>'GD'
)
if you want to use default PHP's GD library for image processing, or:
'image'=>array
(
'class'=>'application.extensions.image.CImageComponent',
'driver'=>'ImageMagick',
'params'=>array('directory'=>'D:/Program Files/ImageMagick-6.4.8-Q16')
)
if you want to use ImageMagick library.
Double check, if path/alias (application.extensions.image here) are correct and valid. Most operations in yii-gallery-manager extension are made via POST/AJAX and debugging them is a little bit harder. Wrong path/alias to yii-image extension is first source of problems with Gallery Manager not uploading images correctly.
Adding yii-gallery-manager to your application
I decided to use behavior-based approach, because using behaviors is more flexible.
Here are steps, that I took to add yii-gallery-manager to my application:
Download (and unpack to extensions folder) yii-gallery-manager and yii-image extension, if you haven't done this yet.
Go to migrations folder in yii-gallery-manager and either import schema.mysql.sql to your SQL database or use contents of schema.migration file as base for your new migration (yiic create [name]) and save it. Consider changes discussed later (Using migrations section). Finally, run the migration (yiic migrate).
Add ext.yiiimage.*, ext.gallerymanager.* and ext.gallerymanager.models.* to import section of your application's configuration array. Adjust path to these extensions accordingly to where you put them.
Add image extension to components section of your configuration array (see above).
Consider updating yii-gallery-manager and yii-image extension with files found in demo application (see below) as they seems to be a bit newer.
Copy GalleryController.php from yii-gallery-manager extension's folder to location of your controllers (usually protected/controllers) or keep it in original place and add this to main configuration of your application:
'controllerMap'=>array
(
'gallery'=>'ext.gallerymanager.GalleryController'
),
Adding behavior and views
Now, your application should be ready to use this extension. All, that is left is to add behavior to your model:
public function behaviors()
{
return array
(
'galleryBehavior'=>array
(
'class'=>'GalleryBehavior',
'idAttribute'=>'gallery_id',
'versions'=>array
(
'small'=>array
(
'centeredpreview'=>array(98, 98)
),
'medium'=>array
(
'resize'=>array(800, NULL)
)
),
'name'=>TRUE,
'description'=>TRUE
)
);
}
Where name and description decides whether you want to save these kind of data along with each of your gallery to database and idAttribute refers to field in your model, which will store foreign key to gallery. For information about versions, refer to next chapter.
Finally, modify your views. Extension comes with ready widget for managing image galleries:
<?php if($model->galleryBehavior->getGallery() === NULL): ?>
<p>Before add photos to product gallery, you need to save the product first.</p>
<?php else: ?>
<?php $this->widget('GalleryManager', array
(
'gallery' => $model->galleryBehavior->getGallery(),
)); ?>
<?php endif; ?>
As for presenting image galleries in front end, you're completely on your own. This is backend's gallery manager, not full solution, right. So, as for frontend, it offers you nothing more, than a pure array of data, with which you can do whatever you need or want:
<?php $photos = $content->galleryBehavior->getGalleryPhotos(); ?>
Tuning up
Files, folders and paths
By default, yii-gallery-manager uploads all gallery-related images to gallery folder in web-root of your application. This setting is stored as galleryDir property of GalleryPhoto. I don't know, what reasons caused extension's author to store path to galleries directly in each photo model, instead of Gallery model or even inside GalleryManager widget. But, it is like it is.
And, due to construction of this extension (based on widgets and behavior attached to your own model, operating on POST/AJAX only) there is no way to modify this setting dynamically, in your application. If you need to change directory for your gallery images, you need to simply alter public $galleryDir = 'gallery'; line in GalleryPhoto model.
Auto-generated versions (previews)
Using versions key in galleryBehavior array you can declare, how many (and in what dimensions) previews will be auto-generated for each uploaded image. It is an array like this:
'versions'=>array
(
'small'=>array
(
'centeredpreview'=>array(98, 98)
),
'medium'=>array
(
'resize'=>array(800, NULL)
)
)
Each element in master array represents one preview generated automatically for each image upload. For each preview you can set as many operations, as you want. Each operation (subarray key -- for example centeredpreview) refers to selected image operation -- a method found in Image class in yii-image_ extension. Subarray value is an array of arguments passed to this method (operation parameters).
Examples for resizing preview:
'resize'=>array(500, 500) will resize image to fixed 500 x 500 pixels dimensions, ignoring its original aspect ratio,
'resize'=>array(800, NULL) will resize image to have longer edge set to 800 pixels and shorter edge relatively to original image ratio,
'centeredpreview'=>array(450, 450) will resize image as in second example and then crop it (cut off 450 x 450 pixels in center of image).
Resizing images is most popular operation made for auto-generated previews, but Image class provides you with a lot of graphical effects and image transformations. You can emboss, sharpen, negate image, flip it and rotate it etc.
If this is only possible, try to set fixed value here and do not change it later. Extension provides you with a nifty tool for updating all versions (previews) of images later -- you need to call $model->galleryBehavior->changeConfig(); on each model, which versions / previews are about to change. But, this isn't recommended way, as this will modify many files on-the-fly and can even bloat your server (if you have really big number of galleries there).
Keep in mind, that versions array is kept (serialized) in database for each of your gallery. Therefore, you have to call $model->galleryBehavior->changeConfig(); for each of gallery already stored in database, after changing versions settings.
Widget preview
Using the same methods, a preview for Gallery Manager widget is generated. It's line 147 of GalleryPhoto model, inside setImage method:
Yii::app()->image->load($path)->resize(300, null)->save(Yii::getPathOfAlias('webroot') . '/' .$this->galleryDir . '/_' . $this->getFileName('') . '.' . $this->galleryExt);
It generates too big preview (300 px longer edge, while actual widget uses 140 px at max) and produces over all not so cool effect, with a large piece of white empty space below each image preview. If found out that, changing this line to:
Yii::app()->image->load($path)->centeredpreview(140, 140)->crop(140, 120)->save(Yii::getPathOfAlias('webroot') . '/' .$this->galleryDir . '/_' . $this->getFileName('') . '.' . $this->galleryExt);
And changing following lines in assets/galleryManager.css:
line 126, .GalleryEditor .caption p selector, add white-space: nowrap; line,
line 33, .GalleryEditor .photo selector, change line-height: 1; to line-height: 0.7;,
line 144, .GalleryEditor .image-preview selector, change height: 88px; to height: 120px;,
will produce a much better effect. But, this is my private opinion. Note, that you should add first change in any conditions, even if you don't change anything else, as it seems, extension's author forgot about this line. Without it, long photo descriptions spans into many lines, ugly messing around in edit and delete buttons' background.
Another thing, that was missed by extension's author is adding this style to the end of ``:
.sorter
{
overflow: auto;
height: 400px;
}
Without this assets/galleryManager.css, images area in your gallery won't be vertically scrollable and you will have no access to other photos, if you upload many images to particular gallery. Remember to remove assets after applying these changes, to actually see them on-line.
Using migrations
If you're using migrations to update database, then note, that schema.migration file found in migrations folder in yii-gallery-manager extension folder has some problems, that should be / must be corrected.
First thign is, that you should add $this->dropForeignKey('fk_gallery_photo_gallery1', 'gallery_photo'); to your down() method to clean everything, what was created by up() method; add it before dropping extension's tables:
public function down()
{
/**
* Drop yii-gallery-manager extension tables.
*/
$this->dropForeignKey('fk_gallery_photo_gallery1', 'gallery_photo');
$this->dropTable('gallery_photo');
$this->dropTable('gallery');
}
And, if you're using behavior, you should modify all your tables / models, that will be using galleries, and add new column, that will hold gallery ID per particular model. Name this column the same way as you name idAttribute parameter in behavior configuration. By default, it should be named gallery_id. I suggest to alter this name only, if it conflicts with something in your model or application:
$this->addColumn('contents', 'gallery_id', "integer DEFAULT NULL COMMENT 'Foregin key to Gallery -- gallery for this content' AFTER `content_id`");
Debugging
You can use modified piece of code from GalleryController::actionAjaxUpload() to do pretty nice debugging. Put this code somewhere (in some view?) and execute:
<?php
$model = new GalleryPhoto();
$model->gallery_id = 123;
$model->file_name = 'test1';
$model->setImage('test2');
?>
It helped me discover problems with database (incorrect table names) in first place and it brought me answer, why the heck images are not uploaded? After three hours of searching, I found out, that Yii isn't able to find CImageComponent. I wasn't able to discover this earlier, because all upload-related events occurs in post-only, ajax-mode mood, which is quite hard to debug.
Demo application
There's a nice looking and (nearly) ready to use demo application found at BitBucket (this time repository is cloneable): https://bitbucket.org/z_bodya/yii-demo-blog. It contains Gallery Manager and other extensions made by this author.
When you get it running, don't be surprised, that you see no sign of gallery manager at first. To see it in action, you should edit any post (or create new one), because gallery manager widget has been included only in this view (and in post view in frontend, once particular view contains some gallery).
This is very simple demo, and need some sort of work to port it to working application. But, for sure this is a good starting point for dealing with all troubles you may have with this extension. And a nice thing from author, that he wanted to spare his time not only on writing extension itself, but also for providing working demo application. Big thumb up from my side! :>
Note, that cloned code does not contain assets folder and protected/runtime folder. You should create these two in point 2.5 (before changing folder permissions) of instruction mentioned in BitBucket repository.
Therefore, steps for installing demo application are this:
Clone repository (git clone git#bitbucket.org:z_bodya/yii-demo-blog.git).
Install composer dependencies (run php composer.phar install or composer install inside protected folder).
Create missing folders (mkdir assets, mkdir protected/runtime).
Change folder permissions (chmod -R 777 assets protected/runtime gallery uploads images in most situations).
Run application in your browser, login using demo/demo, go to control panel and edit (or create and save first) any post found there.
Read [this article](Installing Composer to PHP on Windows.txt) if you don't have Composer on your Windows and need to install it.
Note, that demo applications includes gallery's cover image functionality, requested by some user and implemented as a part of separate branch. It is not included in master branch and since branches at BitBucket are not accessible right now, you can only get this feature by hand-copying changed code.
Sources and information
Here is a list of pages, you may wish to visit to read more about yii-gallery-manager:
extension page at yiiframework.com,
main code repository at BitBucket,
mirror code repository at GitHub,
demo application at BitBucket.
Main repository at BitBucket is not accessible (the moment of writing it) and does not provide a code to clone. You should use GitHub mirror instead or download .tar.gz file from extension page at yiiframework.com.
There's also a forum discussion on this extension, but last post (unanswered) is over two years old now. So, this forum is pretty useless.
Some alternatives
If, for any reason, yii-gallery-manager is not an option for you, you can consider these alternatives:
https://code.google.com/p/yii-gallery-extension/
https://github.com/Crisu83/yii-imagemanager
https://github.com/drumaddict/angular-yii
in your composer.json file add
"require": {
...
"z_bodya/yii-gallery-manager": "dev-default"
},
then run
composer update

App works as desired in debug mode but crashes in Rally environment

I have created an app that creates a grid dynamically, as well as lets the user make changes to one of the grid columns via a 'numberfield' editor. Everything is working great in the debug environment but when I try to edit one of the fields in the Rally environment it crashes the app. From the looks of it, the iframe containing the app is just reloading altogether.
Now, here's the weird part that may be a clue to what's going on. The app crashes after I click elsewhere on the app (committing the change) but if I scroll the mouse wheel somewhere on the app, the spinner loses focus (no up/down arrows) and then if I click somewhere the edits are applied and the app doesn't crash. Once again in the debug mode I don't need to go through this, I can just click elsewhere and the changes are applied.
This is a known issue with 2.0p5 that will be fixed with the next release of the SDK. Basically it's using a sledgehammer to respond to the fact that something was edited and refreshing it. Since the new SDK can communicate with the message bus this is totally unnecessary...
In the meantime you should be able to patch your app by defining a global Rally.getApp function that returns your app instance to prevent the hard refresh:
//In your app definition give it an xtype:
Ext.define('My.App', {
extend: 'Rally.app.App',
//...
alias: 'widget.myapp'
//...
});
//Find the app instance by its xtype and return it
Rally.getApp = function() {
return Ext.ComponentQuery.query('myapp')[0];
};
You can then delete that code once 2.0p6 is released and you upgrade.

AIR application Mouse.hide() not working

I created a fullscreen app with the following to hide the mouse...
// need this hack to hide the mouse for AIR for some reason...for OSX
// http://blog.formatlos.de/2008/11/16/air-hiding-the-mouse/
stage.nativeWindow.activate();
stage.nativeWindow.orderToBack();
stage.nativeWindow.orderToFront();
Mouse.hide();
This works on my machine at home running OSX Lion...but when this is installed on the client's machine (also running OSX...I need to find out the version), the mouse does not hide?
When I take out the 3 line hack before the Mouse.hide(), the mouse does not hide on my machine. Will test this out on the client's machine too.
Anyone experience this before?
Are you including flash.ui.Mouse in your code?
import flash.ui.Mouse;
Take a look in this site: http://samhassan.co.uk/2008/10/08/air-10-mousehide-work-around/
You could try to hide mouse cursor when the first enterFrame event is fired. Some elements are not fully available till the first frame is build:
// i.e. on main app initilize event handler
addEventListener(Event.ENTER_FRAME, onEnterFrame);
private function onEnterFrame(event:Event):void {
Mouse.hide();
removeEventListener(Event.ENTER_FRAME, onEnterFrame);
}
This way, you have not to rely on hacks or workarounds.

Is it possible to render web content over a clear background using WebKit?

I'm trying to gauge the possibility of a patch to WebKit which would allow all rendered graphics to be rendered onto a fully transparent background.
The desired effect is to render web content without any background at all, it should appear to float over the desktop (or whatever is displayed behind the browser window).
Has anyone seen an app do this? (I can think of some terminal emulators that can.) If anyone has worked inside of WebKit (or possibly Gecko?) do you think it would be possible to do this?
Update: I've come to realize that Mac OSX dashboard widgets use this exact technique. So, this must be possible.
Update 2: I've compiled WebKit on linux and noticed the configure options include:
--enable-dashboard-support
enable Dashboard support default=yes
I'm getting closer. Can anyone help?
Update 3: I continue to find references to this in posts on various related mailing lists.
https://lists.webkit.org/pipermail/webkit-dev/2008-September/005019.html
https://lists.webkit.org/pipermail/webkit-dev/2009-June/008182.html
Solved!
Through ongoing research, scouring forums and source code repositories, I peiced together the necessary steps to accomplish this using only libwebkit and a standard compiz desktop (any Xorg desktop with compositing should do).
For a current libwebkit (1.1.10-SVN), there is an Ubuntu PPA:
deb http://ppa.launchpad.net/webkit-team/ppa/ubuntu jaunty main
deb-src http://ppa.launchpad.net/webkit-team/ppa/ubuntu jaunty main
As far as the code goes, the key is calling webkit_web_view_set_transparent.
And of course the system you're running it on should have a capable graphics card (intel, radeon, or nvidia) and be running a compositing window manager (like Compiz).
And finally, to actually see transparency, the content you're viewing must set a transparent background using CSS3, otherwise it's still completely opaque.
It's as simple as:
BODY { background-color: rgba(0,0,0,0); }
Here' is the full sample for the simplest possible webkit browser app, with transparency support:
#include <gtk/gtk.h>
#include <webkit/webkit.h>
static void destroy_cb(GtkWidget* widget, gpointer data) {
gtk_main_quit();
}
int main(int argc, char* argv[]) {
gtk_init(&argc, &argv);
if(!g_thread_supported())
g_thread_init(NULL);
// Create a Window, set colormap to RGBA
GtkWidget* window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
GdkScreen *screen = gtk_widget_get_screen(window);
GdkColormap *rgba = gdk_screen_get_rgba_colormap (screen);
if (rgba && gdk_screen_is_composited (screen)) {
gtk_widget_set_default_colormap(rgba);
gtk_widget_set_colormap(GTK_WIDGET(window), rgba);
}
gtk_window_set_default_size(GTK_WINDOW(window), 800, 800);
g_signal_connect(window, "destroy", G_CALLBACK(destroy_cb), NULL);
// Optional: for dashboard style borderless windows
gtk_window_set_decorated(GTK_WINDOW(window), FALSE);
// Create a WebView, set it transparent, add it to the window
WebKitWebView* web_view = web_view = WEBKIT_WEB_VIEW(webkit_web_view_new());
webkit_web_view_set_transparent(web_view, TRUE);
gtk_container_add (GTK_CONTAINER(window), GTK_WIDGET(web_view));
// Load a default page
webkit_web_view_load_uri(web_view, "http://stackoverflow.com/");
// Show it and continue running until the window closes
gtk_widget_grab_focus(GTK_WIDGET(web_view));
gtk_widget_show_all(window);
gtk_main();
return 0;
}
Back in Safari 1.3 and 2, there was a hidden debug menu (invoked via the Terminal: defaults write com.apple.Safari IncludeDebugMenu 1) that included a “Use Transparent Window” option.
http://www.macosxhints.com/article.php?story=20050418015445258
http://www.wiredatom.com/blog/2005/10/20/safari-transparency/
Not sure if this was a WebKit thing or a Safari thing though.
(In Safari 3, the debug menu seems to have been replaced by the “Develop” menu (enable in Preferences > Advanced) which doesn’t have the transparent window option.)
Basically you want to be setting the ARGB colour space to be sending to the window manager. Obviously only window managers that support compositing will be able to take advantage of this.
You might want to talk to the screenlet and compiz developers they should be able to help out more.
This gist works for me, as of 2013, tested only with ubuntu:
https://gist.github.com/pouria-mellati/7771779
I have a new solution which is really easy to do, for a single screenshot. It's using node.js with phantom.js library.
install node.js
run 'npm install -g phantomjs' in console/terminal
save the following as script.js and run it from console 'phantomjs script.js'
var page = require('webpage').create();
page.viewportSize = { width: 1920, height: 1500 };
page.open("http://www.theWebYouWantToRender");
page.onLoadFinished = function(status) {
page.evaluate(function() {
document.body.style.background = 'transparent';
});
page.render('render.png');
phantom.exit();
};
profit? :) enjoy