Blue Blazer

Hello, i've hesitated to put this blog post on KDE, afraid being told this is a crazy idea.Finally i'm open for challenges, at least this post shows an idea.

Plasma is maturing, more widgets have been added. As a result it enables some other possiblites.

Recently i've seen the beauty of Ribbon UI in Office 14 and Windows 7.
And googling the Ribbon UI on Linux, found two implementations:
GTK# version in Mono:

It seems to be (maybe intended to be) 1-1 copy of M$'s Ribbon UI, where's their creativities?

Vtk designer's menustrip:

Looks OK ,and that's all. It's just bigger icons on a bar.....

Not satisfied with the above two, i'm writing my own:

My Korat::MenuBar's Features:

• Adaptive layout according to width (use own greedy relaxing algorithm), similar to M$'s Ribbon UI.
• Users are very easy to wrap their graphics widgets to be adaptive layoutable. You just need to provide only three other functions (typedef QList WeightList;):
  • QList availableWidths();
    
  • qreal getWidth(const WeightList &);
  • void adjustWidth(const WeightList &);
• Use plasma extensively: theme, palette, Plasma::IconWidget, Plasma::LineEdit etc....,

Pics comming....
Widest：

Medium:

Narrow:

Too narrow, scroll button appears:


Also i'm thinking of bringing more powers and beauties of plasma and graphics model/view to normal widget based application, so i start a Korat UI project(plan):

Its goal is to provide a normal QWidget - Korat::MainWindow,
which correctly provide a view on a QGraphicsWidget - Korat::MainWindowGraphics

Feature plan of Korat::MainWindow:

1. Fully QGraphicsWidget based, goes deeper on the way that Plasma::Dialog do, correctly manage the layout for you (handle spacing, margins, theme change etc...), It's auto themed according to your plasma theme, provide animated layout(Kinetic ?), and other animation effects.
   
2. Integrate KRunner into the main window. Application and its plugins can provide its own krunner plugin, the main window manage/merge them, To quickly search this application's actions, help info, quickly tag the document etc... anything that krunner can do. (You can see from my above pics, there's a filter button and a lineedit besides the tabbar, that's it).
   
3. Ribbon like menubar as i mentioned above, but merge the application and its plugins' sub actions( maybe need to extend kde's xml gui somehow )
   
4. Provide optional Drawers on four corners of central graphics widget, optional Docks on four edges of central graphics widget. Manage their position,size,layout to ease your programming .
   
5. A statusbar(notification area) on bottom.

The Korat::MainWindow's base architecture is done and the Ribbon like Menubar is nearly finished (some scrolling bugs not fixed yet).

Future plan:

1. brainstorm and implement the Drawer, Dock, StatusBar.
2. Port(hack) my own version of KJots to use this UI, since it's one of my favourite KDE application, so it deserves to have a beautiful and easy to use GUI.
   
3. Experiment XML Gui support.
   

Source code under trunk/playground/base/plasma/widgets/koratbar

Thanks for reading, finally a pic for "korat“ , kudos for plasma developers.

修补了Amarok2编码检测的bug.........
Amarok2可以像千千静听那样显示歌词了，
感谢Sanfanling的IrcShow-X，So cool
把IrcShow-X通过XEmbed集成进了amarok2的Context View,
理论上可以将符合XEmbed规范的任意窗口(甚至Firefox, Openoffice)嵌入到Amarok2中去 ：）



Amarok2中的Dolphin文件浏览器 ：）


Google在Chrome里声称的“安全”的沙盒技术也是基于这个原理，
每个Tab是单独的进程，浏览器进程也是独立出来的，
Linux下的实现每个Tab通过XEmbed或其他组件技术？嵌入到浏览器中，
而浏览器通过Socket或dbus等IPC手段控制Tab,
这样任何个Tab挂掉或被恶意脚本“攻陷”都理论上不会挂掉/影响浏览器进程，
而浏览器进程挂掉的话，各个Tab就自动变成单个单个的窗口：）

Hello, i've implement gnome's global menu in Bespin's XBar.
Now xbar users can get global menu both for GTK and Qt4 applications.
Pics comming....
Gnome's Epiphany web browser:

KOffice2's Krita application:

I just dumplicate the mail and add some more pics :)
Moved to kdereview/plasma/applets/

It's mainly an applet for input methods, so that persons use difference input methods can share the same user interface and the unified systemsettings input method configure integration.
And also include a standalone application and a control module for systemsettings now.

Its main features:

• Multiple backend support, currently support SCIM and IBus(1.1.0+ version)
• Able to float out and embbed into panel dynamically, The floating statusbar(a qwidget) is just a view on the same qgraphicswidget.
• Skin support:
  1. You can choose the skin to follow current plasma theme, then it will auto switch skin when user change plasma theme.
  2. Use custom theme, support install theme from Get Hot New Stuff
  3. Internally use javascript to layout svg, enable the abilities to do adaptive svg layout and "theme" the layout.
• KCModule based configure, config pages for ui, backends are combined to one dialog.
• Provide a standalone version with floating statusbar only if you don't want to add the applet to panel.
  

Its design is simple, just provide a dbus service for input methods
Backends(SCIM,IBus, fcitx ...) <-------->dbus<---------->kimpanel (org.kde.impanel)
communicate by signals only.

Currently the above features are finished, Except:

• Only one kcmodule for ui now, haven't provide kcmodule for backend,
• The kcmodule is working, but lack help text, theme auto preview , other eyecandies........
• The extra two themes are only make for horizontal statusbar and horizontal candidate window layout only, but default theme fully working.
  

And it's also stable now, no crashes in my everyday use.

The backend need to be configured before test this applet, see backend/scim/README and backend/ibus/README
You can even mix use SCIM and IBus for different types of programs(eg. scim for qt, IBus for xim and gtk), but you still have the same user interface
and can't tell the difference without looking at their logo icon.

I'd like to include it in KDE 4.3 but it will be soft freeze is in early April,
So i think i have to ask for review now.

Pics comming

异形窗口一般是采用图片作背景，形状不是规则的方形窗口。
不少程序为了追求漂亮的外观都会实现它，如windows media player等软件。
而图像的Alpha值是和透明度相关的，采用部分半透明的背景能够能加提升视觉效果。

在Qt中实现异形窗体一般采用setMask()，
实现透明也有setWindowOpacity()，
但这并不是最高效的方式。

而直接使用窗口管理器的接口来设置背景透明度却不能得到一个各部分透明度不同的控件（窗口）背景。

直接与Xlib打交道是一种解决方法。

其实Qt提供了一个简便的方法来供您使用，
如果你有支持复合(Composite)的窗口管理器，如(compiz或者kwin)，
就可以去除不必要的控件闪烁，并获得显著的性能提升。

首先要这样初始化你的程序。

int main(int argc, char *argv[]) {
bool argbVisual=false;
Display *dpy = XOpenDisplay(0); // 打开显示接口
if (!dpy) {
qWarning("Cannot connect to the X server");
exit(1);
}

int screen = DefaultScreen(dpy);
Colormap colormap = 0;
Visual *visual = 0;
int eventBase, errorBase;

if (XRenderQueryExtension(dpy, &eventBase, &errorBase)) {
int nvi;
XVisualInfo templ;
templ.screen = screen;
templ.depth = 32;
templ.c_class = TrueColor;
XVisualInfo *xvi = XGetVisualInfo(dpy, VisualScreenMask
VisualDepthMask
VisualClassMask, &templ, &nvi);

for (int i = 0; i < style="color: rgb(255, 0, 0);"> XRenderPictFormat *format = XRenderFindVisualFormat(dpy,
xvi[i].visual);
if (format->type == PictTypeDirect && format->direct.alphaMask) {
visual = xvi[i].visual;
colormap = XCreateColormap(dpy, RootWindow(dpy, screen),
visual, AllocNone);
argbVisual=true;
break;
}
}
}
if (argbVisual == true) {
qWarning("Found ARGB visual. Starting app...");
}
else {
qWarning("Couldn't find ARGB visual... Exiting.");
}


QApplication app(dpy, argc, argv,
Qt::HANDLE(visual), Qt::HANDLE(colormap)); // 最关键的一行
return app.exec();
}

然后在你要渲染的Widget的paintEvent里面这样做：

// 也可以用png，这里用的是svg格式背景
QSvgRender *render = new QSvgRenderer(QLatin1String("my_background.svg"));

void Widget::paintEvent(QPaintEvent *e)
{
QPainter p(this);
p.setRenderHint(QPainter::Antialiasing);
p.setClipRect(e->rect());

p.save();
// QPainter使用混合扩展模式中的源覆盖模式，很重要！不然会得到白色背景
p.setCompositionMode(QPainter::CompositionMode_Source);
// 使用“透明”颜色来填充背景
p.fillRect(rect(), Qt::transparent);
p.restore();

//也可以不用一个QPixmap cache,直接在Widget上画，Qt有Backing store(类似于double buffer)来避免闪烁，使用cache好处是只需要在resizeEvent()那里更新cache就好了。
cache.fill(Qt::transparent);
QPainter p(&cache);
p.setRenderHint(QPainter::Antialiasing);
renderer->render(&p);

p.end();

p.drawPixmap(0, 0, cache);
if (iconShown) {
p.drawPixmap(20, 20, icon);
}

}

现在的Widget就是一个以my_background.svg为背景，各个部分有不同透明度的控件了，
并且渲染得到了显卡的加速:)

需要更详细完善的例子，可以参考KRunner的源代码:
http://websvn.kde.org/trunk/KDE/kdebase/workspace/krunner/krunnerapp.cpp?view=markup
http://websvn.kde.org/trunk/KDE/kdebase/workspace/krunner/krunnerdialog.cpp?view=markup



对scim呆板的界面厌烦了，对gtk不怎么感冒。
想要一个漂亮的能和系统主题相适应的输入法面板。

于是自己写了一个:）

• 支持透明，支持采用Svg来作皮肤。KDE4 下面根据当前桌面(Plasma)主题自动换皮肤、和文字配色方案。还能根据你是否启用桌面效果调整外观。
• 图形界面和后端是分开的，将来支持ibus也是可以做到的。
• 简洁小巧，图形界面程序只有68k大，scim后端支持程序只有176k大小。
  

默认Oxygen主题下效果

Clean Blend主题下效果