2020-05-10 07:58:48 -03:00
/*
2021-04-22 17:51:19 -03:00
* Copyright ( c ) 2020 , Linus Groh < linusg @ serenityos . org >
2020-05-10 07:58:48 -03:00
*
2021-04-22 05:24:48 -03:00
* SPDX - License - Identifier : BSD - 2 - Clause
2020-05-10 07:58:48 -03:00
*/
2021-04-30 19:53:18 -03:00
# include <LibGUI/Action.h>
2020-05-10 07:58:48 -03:00
# include <LibGUI/Application.h>
2020-10-31 18:23:42 -03:00
# include <LibGUI/Icon.h>
2021-04-30 19:53:18 -03:00
# include <LibGUI/Menu.h>
# include <LibGUI/Menubar.h>
2020-05-10 07:58:48 -03:00
# include <LibGUI/Painter.h>
# include <LibGUI/Widget.h>
# include <LibGUI/Window.h>
# include <LibGfx/Bitmap.h>
2020-12-29 14:25:13 -03:00
# include <LibGfx/FontDatabase.h>
2020-05-10 07:58:48 -03:00
# include <LibGfx/Painter.h>
# include <LibGfx/Path.h>
2021-03-12 13:29:37 -03:00
# include <unistd.h>
2020-05-10 07:58:48 -03:00
const int WIDTH = 780 ;
const int HEIGHT = 600 ;
class Canvas final : public GUI : : Widget {
C_OBJECT ( Canvas )
public :
virtual ~ Canvas ( ) override ;
private :
Canvas ( ) ;
RefPtr < Gfx : : Bitmap > m_bitmap ;
void draw ( ) ;
virtual void paint_event ( GUI : : PaintEvent & ) override ;
} ;
Canvas : : Canvas ( )
{
2021-07-21 13:02:15 -03:00
m_bitmap = Gfx : : Bitmap : : try_create ( Gfx : : BitmapFormat : : BGRx8888 , { WIDTH , HEIGHT } ) ;
2020-05-10 07:58:48 -03:00
draw ( ) ;
}
Canvas : : ~ Canvas ( )
{
}
void Canvas : : paint_event ( GUI : : PaintEvent & event )
{
GUI : : Painter painter ( * this ) ;
2021-05-09 05:11:30 -03:00
painter . add_clip_rect ( event . rect ( ) ) ;
painter . draw_scaled_bitmap ( rect ( ) , * m_bitmap , m_bitmap - > rect ( ) ) ;
2020-05-10 07:58:48 -03:00
}
void Canvas : : draw ( )
{
GUI : : Painter painter ( * m_bitmap ) ;
painter . fill_rect ( { 20 , 20 , 100 , 100 } , Color : : Magenta ) ;
painter . draw_rect ( { 20 , 140 , 100 , 100 } , Color : : Yellow ) ;
painter . fill_rect_with_gradient ( Gfx : : Orientation : : Horizontal , { 140 , 20 , 100 , 100 } , Color : : Yellow , Color : : DarkGreen ) ;
painter . fill_rect_with_gradient ( Gfx : : Orientation : : Vertical , { 140 , 140 , 100 , 100 } , Color : : Red , Color : : Blue ) ;
painter . fill_rect_with_dither_pattern ( { 260 , 20 , 100 , 100 } , Color : : MidGray , Color : : Black ) ;
painter . fill_rect_with_checkerboard ( { 260 , 140 , 100 , 100 } , { 10 , 10 } , Color : : LightGray , Color : : White ) ;
painter . draw_line ( { 430 , 35 } , { 465 , 70 } , Color : : Green ) ;
painter . draw_line ( { 465 , 70 } , { 430 , 105 } , Color : : Green ) ;
painter . draw_line ( { 430 , 105 } , { 395 , 70 } , Color : : Green ) ;
painter . draw_line ( { 395 , 70 } , { 430 , 35 } , Color : : Green ) ;
painter . draw_rect ( { 395 , 35 , 70 , 70 } , Color : : Blue ) ;
painter . draw_ellipse_intersecting ( { 395 , 35 , 70 , 70 } , Color : : Red ) ;
painter . draw_rect ( { 380 , 20 , 100 , 100 } , Color : : Yellow ) ;
painter . fill_rect ( { 380 , 140 , 100 , 100 } , Color : : Blue ) ;
painter . draw_triangle ( { 430 , 140 } , { 380 , 140 } , { 380 , 240 } , Color : : Green ) ;
painter . draw_triangle ( { 430 , 240 } , { 480 , 140 } , { 480 , 240 } , Color : : Red ) ;
painter . draw_rect ( { 380 , 140 , 100 , 100 } , Color : : Yellow ) ;
painter . draw_line ( { 500 , 20 } , { 750 , 20 } , Color : : Green , 1 , Gfx : : Painter : : LineStyle : : Solid ) ;
2020-05-10 12:17:26 -03:00
painter . draw_line ( { 500 , 30 } , { 750 , 30 } , Color : : Red , 5 , Gfx : : Painter : : LineStyle : : Solid ) ;
painter . draw_line ( { 500 , 45 } , { 750 , 45 } , Color : : Blue , 10 , Gfx : : Painter : : LineStyle : : Solid ) ;
2020-05-10 07:58:48 -03:00
2020-05-10 12:17:26 -03:00
painter . draw_line ( { 500 , 60 } , { 750 , 60 } , Color : : Green , 1 , Gfx : : Painter : : LineStyle : : Dotted ) ;
painter . draw_line ( { 500 , 70 } , { 750 , 70 } , Color : : Red , 5 , Gfx : : Painter : : LineStyle : : Dotted ) ;
painter . draw_line ( { 500 , 85 } , { 750 , 85 } , Color : : Blue , 10 , Gfx : : Painter : : LineStyle : : Dotted ) ;
painter . draw_line ( { 500 , 100 } , { 750 , 100 } , Color : : Green , 1 , Gfx : : Painter : : LineStyle : : Dashed ) ;
painter . draw_line ( { 500 , 110 } , { 750 , 110 } , Color : : Red , 5 , Gfx : : Painter : : LineStyle : : Dashed ) ;
painter . draw_line ( { 500 , 125 } , { 750 , 125 } , Color : : Blue , 10 , Gfx : : Painter : : LineStyle : : Dashed ) ;
2020-05-10 07:58:48 -03:00
painter . draw_line ( { 500 , 140 } , { 500 , 240 } , Color : : Green , 1 , Gfx : : Painter : : LineStyle : : Solid ) ;
2020-05-10 12:17:26 -03:00
painter . draw_line ( { 510 , 140 } , { 510 , 240 } , Color : : Red , 5 , Gfx : : Painter : : LineStyle : : Solid ) ;
painter . draw_line ( { 525 , 140 } , { 525 , 240 } , Color : : Blue , 10 , Gfx : : Painter : : LineStyle : : Solid ) ;
painter . draw_line ( { 540 , 140 } , { 540 , 240 } , Color : : Green , 1 , Gfx : : Painter : : LineStyle : : Dotted ) ;
painter . draw_line ( { 550 , 140 } , { 550 , 240 } , Color : : Red , 5 , Gfx : : Painter : : LineStyle : : Dotted ) ;
painter . draw_line ( { 565 , 140 } , { 565 , 240 } , Color : : Blue , 10 , Gfx : : Painter : : LineStyle : : Dotted ) ;
2020-05-10 07:58:48 -03:00
2020-05-10 12:17:26 -03:00
painter . draw_line ( { 580 , 140 } , { 580 , 240 } , Color : : Green , 1 , Gfx : : Painter : : LineStyle : : Dashed ) ;
painter . draw_line ( { 590 , 140 } , { 590 , 240 } , Color : : Red , 5 , Gfx : : Painter : : LineStyle : : Dashed ) ;
painter . draw_line ( { 605 , 140 } , { 605 , 240 } , Color : : Blue , 10 , Gfx : : Painter : : LineStyle : : Dashed ) ;
2020-05-10 07:58:48 -03:00
painter . draw_line ( { 640 , 190 } , { 740 , 240 } , Color : : Green , 1 , Gfx : : Painter : : LineStyle : : Solid ) ;
painter . draw_line ( { 640 , 140 } , { 740 , 240 } , Color : : Red , 5 , Gfx : : Painter : : LineStyle : : Solid ) ;
painter . draw_line ( { 690 , 140 } , { 740 , 240 } , Color : : Blue , 10 , Gfx : : Painter : : LineStyle : : Solid ) ;
painter . draw_line ( { 740 , 190 } , { 640 , 240 } , Color : : Green , 1 , Gfx : : Painter : : LineStyle : : Solid ) ;
painter . draw_line ( { 740 , 140 } , { 640 , 240 } , Color : : Red , 5 , Gfx : : Painter : : LineStyle : : Solid ) ;
painter . draw_line ( { 690 , 140 } , { 640 , 240 } , Color : : Blue , 10 , Gfx : : Painter : : LineStyle : : Solid ) ;
2021-07-21 13:02:15 -03:00
auto bg = Gfx : : Bitmap : : try_load_from_file ( " /res/html/misc/90s-bg.png " ) ;
2020-05-10 07:58:48 -03:00
painter . draw_tiled_bitmap ( { 20 , 260 , 480 , 320 } , * bg ) ;
painter . draw_line ( { 40 , 480 } , { 20 , 260 } , Color : : Red ) ;
painter . draw_line ( { 40 , 480 } , { 120 , 300 } , Color : : Red ) ;
painter . draw_quadratic_bezier_curve ( { 40 , 480 } , { 20 , 260 } , { 120 , 300 } , Color : : Blue ) ;
painter . draw_line ( { 240 , 280 } , { 80 , 420 } , Color : : Red , 3 ) ;
painter . draw_line ( { 240 , 280 } , { 260 , 360 } , Color : : Red , 3 ) ;
painter . draw_quadratic_bezier_curve ( { 240 , 280 } , { 80 , 420 } , { 260 , 360 } , Color : : Blue , 3 ) ;
auto path = Gfx : : Path ( ) ;
path . move_to ( { 60 , 500 } ) ;
path . line_to ( { 90 , 540 } ) ;
path . quadratic_bezier_curve_to ( { 320 , 500 } , { 220 , 400 } ) ;
path . line_to ( { 300 , 440 } ) ;
path . line_to ( { 90 , 460 } ) ;
2021-04-14 20:30:32 -03:00
path . elliptical_arc_to ( { 260 , 540 } , { 40 , 30 } , 0 , true , false ) ;
2020-05-10 07:58:48 -03:00
path . close ( ) ;
painter . fill_path ( path , Color : : Yellow , Gfx : : Painter : : WindingRule : : EvenOdd ) ;
2021-07-21 13:02:15 -03:00
auto buggie = Gfx : : Bitmap : : try_load_from_file ( " /res/graphics/buggie.png " ) ;
2020-05-10 07:58:48 -03:00
painter . blit ( { 280 , 280 } , * buggie , buggie - > rect ( ) , 0.5 ) ;
2021-01-22 11:22:15 -03:00
painter . draw_scaled_bitmap ( { 360 , 280 , buggie - > rect ( ) . width ( ) * 2 , buggie - > rect ( ) . height ( ) * 2 } , * buggie , buggie - > rect ( ) ) ;
2020-05-10 07:58:48 -03:00
painter . draw_rect ( { 20 , 260 , 480 , 320 } , Color : : DarkGray ) ;
painter . draw_rect ( { 520 , 260 , 240 , 80 } , Color : : DarkGray ) ;
painter . draw_text ( { 520 , 260 , 240 , 80 } , " CenterLeft " , Gfx : : TextAlignment : : CenterLeft , Color : : White ) ;
painter . draw_text ( { 520 , 260 , 240 , 80 } , " Center " , Gfx : : TextAlignment : : Center , Color : : White ) ;
painter . draw_text ( { 520 , 260 , 240 , 80 } , " CenterRight " , Gfx : : TextAlignment : : CenterRight , Color : : White ) ;
painter . draw_text ( { 520 , 260 , 240 , 80 } , " TopLeft " , Gfx : : TextAlignment : : TopLeft , Color : : White ) ;
painter . draw_text ( { 520 , 260 , 240 , 80 } , " TopRight " , Gfx : : TextAlignment : : TopRight , Color : : White ) ;
2021-05-20 21:03:02 -03:00
painter . draw_text ( { 520 , 260 , 240 , 80 } , " BottomLeft " , Gfx : : TextAlignment : : BottomLeft , Color : : White ) ;
painter . draw_text ( { 520 , 260 , 240 , 80 } , " BottomRight " , Gfx : : TextAlignment : : BottomRight , Color : : White ) ;
2020-05-10 07:58:48 -03:00
painter . draw_rect ( { 520 , 360 , 240 , 30 } , Color : : DarkGray ) ;
painter . draw_text ( { 520 , 360 , 240 , 30 } , " Emojis! 🙂😂🐞🦄 " , Gfx : : TextAlignment : : Center , Color : : White ) ;
painter . draw_rect ( { 520 , 410 , 240 , 80 } , Color : : DarkGray ) ;
2020-12-29 14:25:13 -03:00
painter . draw_text ( { 520 , 415 , 240 , 20 } , " Normal text " , Gfx : : FontDatabase : : default_font ( ) , Gfx : : TextAlignment : : CenterLeft , Color : : Red ) ;
2021-05-20 13:40:48 -03:00
painter . draw_text ( { 520 , 430 , 240 , 20 } , " Bold text " , Gfx : : FontDatabase : : default_font ( ) . bold_variant ( ) , Gfx : : TextAlignment : : CenterLeft , Color : : Green ) ;
2020-12-29 14:25:13 -03:00
painter . draw_text ( { 520 , 450 , 240 , 20 } , " Normal text (fixed width) " , Gfx : : FontDatabase : : default_fixed_width_font ( ) , Gfx : : TextAlignment : : CenterLeft , Color : : Blue ) ;
2021-05-20 13:55:23 -03:00
painter . draw_text ( { 520 , 465 , 240 , 20 } , " Bold text (fixed width) " , Gfx : : FontDatabase : : default_fixed_width_font ( ) . bold_variant ( ) , Gfx : : TextAlignment : : CenterLeft , Color : : Yellow ) ;
2020-05-10 07:58:48 -03:00
2021-01-03 13:36:04 -03:00
auto font = Gfx : : BitmapFont : : load_from_file ( " /res/fonts/PebbletonBold14.font " ) ;
2020-05-10 07:58:48 -03:00
painter . draw_rect ( { 520 , 510 , 240 , 30 } , Color : : DarkGray ) ;
painter . draw_text ( { 520 , 510 , 240 , 30 } , " Hello friends! :^) " , * font , Gfx : : TextAlignment : : Center , Color : : White ) ;
painter . fill_rect ( { 520 , 560 , 10 , 20 } , Color : : White ) ;
painter . fill_rect ( { 530 , 560 , 10 , 20 } , Color : : WarmGray ) ;
painter . fill_rect ( { 540 , 560 , 10 , 20 } , Color : : LightGray ) ;
painter . fill_rect ( { 550 , 560 , 10 , 20 } , Color : : MidGray ) ;
painter . fill_rect ( { 560 , 560 , 10 , 20 } , Color : : DarkGray ) ;
painter . fill_rect ( { 570 , 560 , 10 , 20 } , Color : : Black ) ;
painter . fill_rect ( { 580 , 560 , 10 , 20 } , Color : : Blue ) ;
painter . fill_rect ( { 590 , 560 , 10 , 20 } , Color : : MidBlue ) ;
painter . fill_rect ( { 600 , 560 , 10 , 20 } , Color : : DarkBlue ) ;
painter . fill_rect ( { 610 , 560 , 10 , 20 } , Color : : Cyan ) ;
painter . fill_rect ( { 620 , 560 , 10 , 20 } , Color : : MidCyan ) ;
painter . fill_rect ( { 630 , 560 , 10 , 20 } , Color : : DarkCyan ) ;
painter . fill_rect ( { 640 , 560 , 10 , 20 } , Color : : Green ) ;
painter . fill_rect ( { 650 , 560 , 10 , 20 } , Color : : MidGreen ) ;
painter . fill_rect ( { 660 , 560 , 10 , 20 } , Color : : DarkGreen ) ;
painter . fill_rect ( { 670 , 560 , 10 , 20 } , Color : : Yellow ) ;
painter . fill_rect ( { 680 , 560 , 10 , 20 } , Color : : Red ) ;
painter . fill_rect ( { 690 , 560 , 10 , 20 } , Color : : MidRed ) ;
painter . fill_rect ( { 700 , 560 , 10 , 20 } , Color : : DarkRed ) ;
painter . fill_rect ( { 710 , 560 , 10 , 20 } , Color : : Magenta ) ;
painter . fill_rect ( { 720 , 560 , 10 , 20 } , Color : : MidMagenta ) ;
update ( ) ;
}
int main ( int argc , char * * argv )
{
2020-07-04 09:05:19 -03:00
auto app = GUI : : Application : : construct ( argc , argv ) ;
2020-05-10 07:58:48 -03:00
2021-01-16 13:42:31 -03:00
if ( pledge ( " stdio recvfd sendfd rpath " , nullptr ) < 0 ) {
2020-11-01 16:37:48 -03:00
perror ( " pledge " ) ;
return 1 ;
}
if ( unveil ( " /res " , " r " ) < 0 ) {
perror ( " unveil " ) ;
return 1 ;
}
if ( unveil ( nullptr , nullptr ) < 0 ) {
perror ( " unveil " ) ;
return 1 ;
}
2020-05-10 07:58:48 -03:00
auto window = GUI : : Window : : construct ( ) ;
window - > set_double_buffering_enabled ( true ) ;
window - > set_title ( " LibGfx Demo " ) ;
window - > set_resizable ( false ) ;
Misc: Use automatic window positioning in more applications
This is a follow up to #2936 / d3e3b4ae56aa79d9bde12ca1f143dcf116f89a4c.
Affected programs:
- Applications: Browser (Download, View source, Inspect DOM tree, JS
console), Terminal (Settings)
- Demos: Cube, Eyes, Fire, HelloWorld, LibGfxDemo, WebView,
WidgetGallery
- DevTools: HackStudio, Inspector, Profiler
- Games: 2048, Minesweeper, Snake, Solitaire
- Userland: test-web
A few have been left out where manual positioning is done on purpose,
e.g. ClipboardManager (to be close to the menu bar) or VisualBuilder (to
preserve alignment of the multiple application windows).
2020-08-15 12:24:05 -03:00
window - > resize ( WIDTH , HEIGHT ) ;
2020-10-31 18:23:42 -03:00
2021-07-21 16:21:03 -03:00
auto & file_menu = window - > add_menu ( " &File " ) ;
2021-05-12 13:50:48 -03:00
file_menu . add_action ( GUI : : CommonActions : : make_quit_action ( [ & ] ( auto & ) { app - > quit ( ) ; } ) ) ;
2021-04-30 19:53:18 -03:00
2020-10-31 18:23:42 -03:00
auto app_icon = GUI : : Icon : : default_icon ( " app-libgfx-demo " ) ;
window - > set_icon ( app_icon . bitmap_for_size ( 16 ) ) ;
2020-05-10 07:58:48 -03:00
window - > set_main_widget < Canvas > ( ) ;
window - > show ( ) ;
2020-07-04 09:05:19 -03:00
return app - > exec ( ) ;
2020-05-10 07:58:48 -03:00
}