Unity

Merge lp:~unity-team/unity/unity.new-quicklist-rendering into lp:unity

  1. unity.new-quicklist-rendering
  2. Merge into trunk
Proposed by Mirco Müller
Status: Merged
Approved by: Gord Allott
Approved revision: no longer in the source branch.
Merged at revision: 357
Proposed branch: lp:~unity-team/unity/unity.new-quicklist-rendering
Merge into: lp:unity
Diff against target: 629 lines (+608/-0)
2 files modified
unity-private/launcher/quicklist-view.vala (+147/-0)
unity/quicklist-rendering.vala (+461/-0)
To merge this branch: bzr merge lp:~unity-team/unity/unity.new-quicklist-rendering
Reviewer Review Type Date Requested Status
Gord Allott (community) Approve
Review via email: mp+28870@code.launchpad.net

Description of the change

modified:
  unity-private/launcher/quicklist-view.vala
  unity/quicklist-rendering.vala

Added the new texture-parts rendering for the quicklist/tooltip background, to go along with the new (still to be pushed) CtkMenuExpandable and related chagnes. The old rendering calls are not deleted yet intentionally, because they are still used. Those will be removed once CtkMenuExpndable landed in clutk trunk. Working on that right now.

The new approach, to facilitate the reveal-animation in an efficient way, is to render the quicklist/tooltip background in three "layers" with split-up masks/parts: blurred with 3-5 masks applied, tint-dot-highlight with 3-5 masks applied, 3-5 texture-parts holding the drop-shadow and outline. The different masks/parts:

* top
* first optional dynamic part which can grow (using texture-repeating)
* anchor
* second optional dynamic part which can grow (using texture-repeating)
* bottom

If this is still unclear I can provide you with a schematic drawing visualizing this better.

For the convenience of the reviewer, I added temp. image-dumps in the constructor of QuicklistMenu for verification of rendering of the new calls:

/tmp/anchor-mask.png
/tmp/outline-shadow-dyn.png
/tmp/bottom-mask.png
/tmp/outline-shadow-top.png
/tmp/dyn-mask.png
/tmp/tint-dot-highlight.png
/tmp/outline-shadow-anchor.png
/tmp/top-mask.png
/tmp/outline-shadow-bottom.png

These will of course not be merged into trunk once this branch is approved.

To post a comment you must log in.
Revision history for this message
Gord Allott (gordallott) wrote :

Everything seems to be rendered okay here, checked the /tmp files and they look correct to me. if you want me to send you the files in my /tmp so you can check i would be glad to. launchpad really needs attachments on merge requests ;)

review: Approve
Revision history for this message
Mirco Müller (macslow) wrote :

> if you want me to send you the files in my /tmp so you can check i would be glad to.

Yes, if you still have them, that would be nice. Thanks!

> launchpad really needs attachments on merge requests ;)

+1

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
=== modified file 'unity-private/launcher/quicklist-view.vala'
--- unity-private/launcher/quicklist-view.vala 2010-06-28 18:12:21 +0000
+++ unity-private/launcher/quicklist-view.vala 2010-06-30 11:55:50 +0000
@@ -475,6 +475,153 @@
475 old_height = 0;475 old_height = 0;
476 cached_x = 0.0f; // needed to fix LP: #525905476 cached_x = 0.0f; // needed to fix LP: #525905
477 cached_y = 0.0f; // needed to fix LP: #526335477 cached_y = 0.0f; // needed to fix LP: #526335
478
479 // test new cairo-based texture-part drawing calls
480 int width = 150;
481 int height = 25;
482 float radius = 7.0f;
483 float anchor_width = 15.0f;
484 float anchor_height = 20.0f;
485 float line_width = 1.0f;
486 float[] rgba = {1.0f, 1.0f, 1.0f, 1.0f};
487 float[] rgba_tint = {0.1f, 0.1f, 0.1f, 0.5f};
488 float[] rgba_hl = {1.0f, 1.0f, 1.0f, 0.5f};
489 float[] rgba_shadow = {0.0f, 0.0f, 0.0f, 1.0f};
490 float[] rgba_line = {1.0f, 1.0f, 1.0f, 1.0f};
491 uint shadow_size = 5;
492
493 {
494 Cairo.Surface surf;
495
496 Unity.QuicklistRendering.Menu.outline_shadow_top (out surf,
497 width,
498 height,
499 anchor_width,
500 radius,
501 shadow_size,
502 rgba_shadow,
503 line_width,
504 rgba_line);
505 surf.write_to_png ("/tmp/outline-shadow-top.png");
506 }
507
508 {
509 Cairo.Surface surf;
510
511 Unity.QuicklistRendering.Menu.outline_shadow_dyn (out surf,
512 width,
513 height,
514 anchor_width,
515 shadow_size,
516 rgba_shadow,
517 line_width,
518 rgba_line);
519 surf.write_to_png ("/tmp/outline-shadow-dyn.png");
520 }
521
522 {
523 Cairo.Surface surf;
524
525 Unity.QuicklistRendering.Menu.outline_shadow_anchor (out surf,
526 width,
527 height,
528 anchor_width,
529 anchor_height,
530 shadow_size,
531 rgba_shadow,
532 line_width,
533 rgba_line);
534 surf.write_to_png ("/tmp/outline-shadow-anchor.png");
535 }
536
537 {
538 Cairo.Surface surf;
539
540 Unity.QuicklistRendering.Menu.outline_shadow_bottom (out surf,
541 width,
542 height,
543 anchor_width,
544 radius,
545 shadow_size,
546 rgba_shadow,
547 line_width,
548 rgba_line);
549 surf.write_to_png ("/tmp/outline-shadow-bottom.png");
550 }
551
552 {
553 Cairo.Surface surf;
554
555 Unity.QuicklistRendering.Menu.tint_dot_hl (out surf,
556 width + 20,
557 3 * height,
558 87.0f,
559 25.0f,
560 62.5f,
561 rgba_tint,
562 rgba_hl);
563 surf.write_to_png ("/tmp/tint-dot-highlight.png");
564 }
565
566 {
567 Cairo.Surface surf;
568
569 Unity.QuicklistRendering.Menu.top_mask (out surf,
570 width,
571 height,
572 radius,
573 anchor_width,
574 true,
575 false,
576 line_width,
577 rgba);
578 surf.write_to_png ("/tmp/top-mask.png");
579 }
580
581 {
582 Cairo.Surface surf;
583
584 Unity.QuicklistRendering.Menu.dyn_mask (out surf,
585 width,
586 height,
587 anchor_width,
588 true,
589 false,
590 line_width,
591 rgba);
592 surf.write_to_png ("/tmp/dyn-mask.png");
593 }
594
595 {
596 Cairo.Surface surf;
597
598 Unity.QuicklistRendering.Menu.anchor_mask (out surf,
599 width,
600 height,
601 anchor_width,
602 anchor_height,
603 true,
604 false,
605 line_width,
606 rgba);
607 surf.write_to_png ("/tmp/anchor-mask.png");
608 }
609
610 {
611 Cairo.Surface surf;
612
613 Unity.QuicklistRendering.Menu.bottom_mask (out surf,
614 width,
615 height,
616 radius,
617 anchor_width,
618 true,
619 false,
620 line_width,
621 rgba);
622 surf.write_to_png ("/tmp/bottom-mask.png");
623 }
624
478 }625 }
479 }626 }
480}627}
481628
=== modified file 'unity/quicklist-rendering.vala'
--- unity/quicklist-rendering.vala 2010-06-08 09:52:30 +0000
+++ unity/quicklist-rendering.vala 2010-06-30 11:55:50 +0000
@@ -283,6 +283,467 @@
283 }283 }
284284
285 private static void285 private static void
286 _setup (out Cairo.Surface surf,
287 out Cairo.Context cr,
288 bool outline,
289 int width,
290 int height,
291 bool negative)
292 {
293 // create context
294 if (outline)
295 surf = new Cairo.ImageSurface (Cairo.Format.ARGB32, width, height);
296 else
297 surf = new Cairo.ImageSurface (Cairo.Format.A8, width, height);
298
299 cr = new Cairo.Context (surf);
300
301 // clear context
302 cr.scale (1.0f, 1.0f);
303 if (outline)
304 {
305 cr.set_source_rgba (0.0f, 0.0f, 0.0f, 0.0f);
306 cr.set_operator (Cairo.Operator.CLEAR);
307 }
308 else
309 {
310 cr.set_operator (Cairo.Operator.OVER);
311 if (negative)
312 cr.set_source_rgba (0.0f, 0.0f, 0.0f, 0.0f);
313 else
314 cr.set_source_rgba (1.0f, 1.0f, 1.0f, 1.0f);
315 }
316 cr.paint ();
317 }
318
319 private static void
320 _draw (Cairo.Context cr,
321 bool outline,
322 float line_width,
323 float* rgba,
324 bool negative,
325 bool stroke)
326 {
327 // prepare drawing
328 cr.set_operator (Cairo.Operator.SOURCE);
329
330 // actually draw the mask
331 if (outline)
332 {
333 cr.set_line_width (line_width);
334 cr.set_source_rgba (rgba[0], rgba[1], rgba[2], rgba[3]);
335 }
336 else
337 {
338 if (negative)
339 cr.set_source_rgba (1.0f, 1.0f, 1.0f, 1.0f);
340 else
341 cr.set_source_rgba (0.0f, 0.0f, 0.0f, 0.0f);
342 }
343
344 // stroke or fill?
345 if (stroke)
346 cr.stroke_preserve ();
347 else
348 cr.fill_preserve ();
349 }
350
351 private static void
352 _finalize (Cairo.Context cr,
353 bool outline,
354 float line_width,
355 float* rgba,
356 bool negative,
357 bool stroke)
358 {
359 // prepare drawing
360 cr.set_operator (Cairo.Operator.SOURCE);
361
362 // actually draw the mask
363 if (outline)
364 {
365 cr.set_line_width (line_width);
366 cr.set_source_rgba (rgba[0], rgba[1], rgba[2], rgba[3]);
367 }
368 else
369 {
370 if (negative)
371 cr.set_source_rgba (1.0f, 1.0f, 1.0f, 1.0f);
372 else
373 cr.set_source_rgba (0.0f, 0.0f, 0.0f, 0.0f);
374 }
375
376 // stroke or fill?
377 if (stroke)
378 cr.stroke ();
379 else
380 cr.fill ();
381 }
382
383 private static void
384 _top_mask_path (Cairo.Context cr,
385 float anchor_width,
386 int width,
387 int height,
388 float radius,
389 bool outline)
390 {
391 // create path
392 cr.move_to (anchor_width + 0.5f, 0.0f);
393 cr.line_to (anchor_width + 0.5f, (double) height - radius - 0.5f);
394 cr.arc_negative (anchor_width + radius + 0.5f,
395 (double) height - radius - 0.5f,
396 radius,
397 180.0f * GLib.Math.PI / 180.0f,
398 90.0f * GLib.Math.PI / 180.0f);
399 cr.line_to ((double) width - radius - 0.5f, (double) height - 0.5f);
400 cr.arc_negative ((double) width - radius - 0.5f,
401 (double) height - radius - 0.5f,
402 radius,
403 90.0f * GLib.Math.PI / 180.0f,
404 0.0f * GLib.Math.PI / 180.0f);
405 cr.line_to ((double) width - 0.5f, 0.0f);
406 if (!outline)
407 cr.close_path ();
408 }
409
410 private static void
411 _dyn_mask_path (Cairo.Context cr,
412 float anchor_width,
413 int width,
414 int height,
415 bool outline)
416 {
417 // create path
418 cr.move_to (anchor_width + 0.5f, 0.0f);
419 cr.line_to (anchor_width + 0.5f, (double) height);
420 if (outline)
421 cr.move_to ((double) width - 0.5f, (double) height);
422 else
423 cr.line_to ((double) width - 0.5f, (double) height);
424 cr.line_to ((double) width - 0.5f, 0.0f);
425 if (!outline)
426 cr.close_path ();
427 }
428
429 private static void
430 _anchor_mask_path (Cairo.Context cr,
431 float anchor_width,
432 float anchor_height,
433 int width,
434 int height,
435 bool outline)
436 {
437 // create path
438 cr.move_to (anchor_width + 0.5f, 0.0f);
439 cr.line_to (anchor_width + 0.5f,
440 ((double) height - anchor_height) / 2.0f);
441 cr.line_to (0.5f,
442 (((double) height - anchor_height) + anchor_height) / 2.0f);
443 cr.line_to (anchor_width + 0.5f,
444 (double) height - ((double) height - anchor_height) / 2.0f);
445 cr.line_to (anchor_width + 0.5f, (double) height);
446 if (outline)
447 cr.move_to ((double) width - 0.5f, (double) height);
448 else
449 cr.line_to ((double) width - 0.5f, (double) height);
450 cr.line_to ((double) width - 0.5f, 0.0f);
451 }
452
453 private static void
454 _bottom_mask_path (Cairo.Context cr,
455 float anchor_width,
456 int width,
457 int height,
458 float radius,
459 bool outline)
460 {
461 // create path
462 cr.move_to (anchor_width + 0.5f, (double) height);
463 cr.line_to (anchor_width + 0.5f, radius + 0.5f);
464 cr.arc (anchor_width + radius + 0.5f,
465 radius + 0.5f,
466 radius,
467 180.0f * GLib.Math.PI / 180.0f,
468 270.0f * GLib.Math.PI / 180.0f);
469 cr.line_to ((double) width - radius - 0.5f, 0.5f);
470 cr.arc ((double) width - radius - 0.5f,
471 radius + 0.5f,
472 radius,
473 270.0f * GLib.Math.PI / 180.0f,
474 0.0f * GLib.Math.PI / 180.0f);
475 cr.line_to ((double) width - 0.5f, (double) height);
476 if (!outline)
477 cr.close_path ();
478 }
479
480 private static void
481 _mask (Cairo.Context cr)
482 {
483 cr.set_operator (Cairo.Operator.CLEAR);
484 cr.fill_preserve ();
485 }
486
487 private static void
488 _outline (Cairo.Context cr,
489 float line_width,
490 float[] rgba_line)
491 {
492 cr.set_operator (Cairo.Operator.SOURCE);
493 cr.set_source_rgba (rgba_line[0],
494 rgba_line[1],
495 rgba_line[2],
496 rgba_line[3]);
497 cr.set_line_width (line_width);
498 cr.stroke ();
499 }
500
501 public static void
502 outline_shadow_top (out Cairo.Surface surf,
503 int width,
504 int height,
505 float anchor_width,
506 float corner_radius,
507 uint shadow_radius,
508 float[] rgba_shadow,
509 float line_width,
510 float[] rgba_line)
511 {
512 Cairo.Context cr;
513
514 _setup (out surf, out cr, true, width, height, false);
515 _top_mask_path (cr, anchor_width, width, height, corner_radius, false);
516 _draw (cr, true, line_width, rgba_shadow, false, false);
517 Ctk.surface_blur (surf, shadow_radius);
518 _mask (cr);
519 _outline (cr, line_width, rgba_line);
520 }
521
522 public static void
523 outline_shadow_dyn (out Cairo.Surface surf,
524 int width,
525 int height,
526 float anchor_width,
527 uint shadow_radius,
528 float[] rgba_shadow,
529 float line_width,
530 float[] rgba_line)
531 {
532 Cairo.Context cr;
533
534 _setup (out surf, out cr, true, width, height, false);
535 _dyn_mask_path (cr, anchor_width, width, height, false);
536 _draw (cr, true, line_width, rgba_shadow, false, false);
537 Ctk.surface_blur (surf, shadow_radius);
538 _mask (cr);
539 cr.new_path ();
540 _dyn_mask_path (cr, anchor_width, width, height, true);
541 _outline (cr, line_width, rgba_line);
542 }
543
544 public static void
545 outline_shadow_anchor (out Cairo.Surface surf,
546 int width,
547 int height,
548 float anchor_width,
549 float anchor_height,
550 uint shadow_radius,
551 float[] rgba_shadow,
552 float line_width,
553 float[] rgba_line)
554 {
555 Cairo.Context cr;
556
557 _setup (out surf, out cr, true, width, height, false);
558 _anchor_mask_path (cr, anchor_width, anchor_height, width, height, false);
559 _draw (cr, true, line_width, rgba_shadow, false, false);
560 Ctk.surface_blur (surf, shadow_radius);
561 _mask (cr);
562 cr.new_path ();
563 _anchor_mask_path (cr, anchor_width, anchor_height, width, height, true);
564 _outline (cr, line_width, rgba_line);
565 }
566
567 public static void
568 outline_shadow_bottom (out Cairo.Surface surf,
569 int width,
570 int height,
571 float anchor_width,
572 float corner_radius,
573 uint shadow_radius,
574 float[] rgba_shadow,
575 float line_width,
576 float[] rgba_line)
577 {
578 Cairo.Context cr;
579
580 _setup (out surf, out cr, true, width, height, false);
581 _bottom_mask_path (cr, anchor_width, width, height, corner_radius, true);
582 _draw (cr, true, line_width, rgba_shadow, false, false);
583 Ctk.surface_blur (surf, shadow_radius);
584 _mask (cr);
585 _outline (cr, line_width, rgba_line);
586 }
587
588 public static void
589 tint_dot_hl (out Cairo.Surface surf,
590 int width,
591 int height,
592 float hl_x,
593 float hl_y,
594 float hl_size,
595 float[] rgba_tint,
596 float[] rgba_hl)
597 {
598 Cairo.Context cr;
599 Cairo.Surface dots_surf;
600 Cairo.Context dots_cr;
601 Cairo.Pattern dots_pattern;
602 Cairo.Pattern hl_pattern;
603
604 // create normal context
605 surf = new Cairo.ImageSurface (Cairo.Format.ARGB32, width, height);
606 cr = new Cairo.Context (surf);
607
608 // create context for dot-pattern
609 dots_surf = new Cairo.ImageSurface (Cairo.Format.ARGB32, 4, 4);
610 dots_cr = new Cairo.Context (dots_surf);
611
612 // clear normal context
613 cr.scale (1.0f, 1.0f);
614 cr.set_source_rgba (0.0f, 0.0f, 0.0f, 0.0f);
615 cr.set_operator (Cairo.Operator.CLEAR);
616 cr.paint ();
617
618 // prepare drawing for normal context
619 cr.set_operator (Cairo.Operator.OVER);
620
621 // create path in normal context
622 cr.rectangle (0.0f, 0.0f, (double) width, (double) height);
623
624 // fill path of normal context with tint
625 cr.set_source_rgba (rgba_tint[0],
626 rgba_tint[1],
627 rgba_tint[2],
628 rgba_tint[3]);
629 cr.fill_preserve ();
630
631 // create pattern in dot-context
632 dots_cr.set_operator (Cairo.Operator.CLEAR);
633 dots_cr.paint ();
634 dots_cr.scale (1.0f, 1.0f);
635 dots_cr.set_operator (Cairo.Operator.OVER);
636 dots_cr.set_source_rgba (rgba_hl[0],
637 rgba_hl[1],
638 rgba_hl[2],
639 rgba_hl[3]);
640 dots_cr.rectangle (0.0f, 0.0f, 1.0f, 1.0f);
641 dots_cr.fill ();
642 dots_cr.rectangle (2.0f, 2.0f, 1.0f, 1.0f);
643 dots_cr.fill ();
644 dots_pattern = new Cairo.Pattern.for_surface (dots_surf);
645
646 // fill path of normal context with dot-pattern
647 cr.set_operator (Cairo.Operator.OVER);
648 cr.set_source (dots_pattern);
649 dots_pattern.set_extend (Cairo.Extend.REPEAT);
650 cr.fill_preserve ();
651
652 // draw highlight
653 cr.set_operator (Cairo.Operator.OVER);
654 hl_pattern = new Cairo.Pattern.radial (hl_x,
655 hl_y,
656 0.0f,
657 hl_x,
658 hl_y,
659 hl_size);
660 hl_pattern.add_color_stop_rgba (0.0f,
661 rgba_hl[0],
662 rgba_hl[1],
663 rgba_hl[2],
664 rgba_hl[3]);
665 hl_pattern.add_color_stop_rgba (1.0f, 1.0f, 1.0f, 1.0f, 0.0f);
666 cr.set_source (hl_pattern);
667 cr.fill ();
668 }
669
670 public static void
671 top_mask (out Cairo.Surface surf,
672 int width,
673 int height,
674 float radius,
675 float anchor_width,
676 bool negative,
677 bool outline,
678 float line_width,
679 float[] rgba)
680 {
681 Cairo.Context cr;
682
683 _setup (out surf, out cr, outline, width, height, negative);
684 _top_mask_path (cr, anchor_width, width, height, radius, outline);
685 _finalize (cr, outline, line_width, rgba, negative, outline);
686 }
687
688 public static void
689 dyn_mask (out Cairo.Surface surf,
690 int width,
691 int height,
692 float anchor_width,
693 bool negative,
694 bool outline,
695 float line_width,
696 float[] rgba)
697 {
698 Cairo.Context cr;
699
700 _setup (out surf, out cr, outline, width, height, negative);
701 _dyn_mask_path (cr, anchor_width, width, height, outline);
702 _finalize (cr, outline, line_width, rgba, negative, outline);
703 }
704
705 public static void
706 anchor_mask (out Cairo.Surface surf,
707 int width,
708 int height,
709 float anchor_width,
710 float anchor_height,
711 bool negative,
712 bool outline,
713 float line_width,
714 float[] rgba)
715 {
716 Cairo.Context cr;
717
718 _setup (out surf, out cr, outline, width, height, negative);
719 _anchor_mask_path (cr,
720 anchor_width,
721 anchor_height,
722 width,
723 height,
724 outline);
725 _finalize (cr, outline, line_width, rgba, negative, outline);
726 }
727
728 public static void
729 bottom_mask (out Cairo.Surface surf,
730 int width,
731 int height,
732 float radius,
733 float anchor_width,
734 bool negative,
735 bool outline,
736 float line_width,
737 float[] rgba)
738 {
739 Cairo.Context cr;
740
741 _setup (out surf, out cr, outline, width, height, negative);
742 _bottom_mask_path (cr, anchor_width, width, height, radius, outline);
743 _finalize (cr, outline, line_width, rgba, negative, outline);
744 }
745
746 private static void
286 _round_rect_anchor (Cairo.Context cr,747 _round_rect_anchor (Cairo.Context cr,
287 double aspect, // aspect-ratio748 double aspect, // aspect-ratio
288 double x, // top-left corner749 double x, // top-left corner