Conrod: Tulis Panduan / Tutorial

Dibuat pada 11 Jul 2015  ·  22Komentar  ·  Sumber: PistonDevelopers/conrod

Panduan mungkin harus disusun agar terlihat seperti ini:

  • [x] 1. Apa itu Conrod

    • [x] Ringkasan singkat GUI 2D, kasus penggunaan Conrod.

    • [x] beberapa tangkapan layar / demo video

    • [x] daftar widget yang tersedia

    • [x] tautan ke contoh

    • [x] Pengenalan singkat ke "Mode Segera" alias _OMG mengapa saya membuat Widget SETIAP BINGKAI?! _

    • [x] bagaimana IMGUI bekerja (jelaskan caching dll)

    • [x] mengapa kami menggunakan IMGUI (pro / kontra)

    • [x] "Pola Pembangun" (mengapa menggunakannya, bagaimana cara kerjanya)

  • [] 2. Menggunakan Conrod (untuk membuat GUI aplikasi dasar)

    • [] Panduan menunjukkan cara menggunakan Conrod untuk membuat GUI dengan aplikasi demonstrasi kecil.

    • [] Siapkan jendela dasar menggunakan glium.

    • [] Buat demo App struct dengan beberapa data tiruan.

    • [] Menulis fungsi ui untuk aplikasi.

    • [] Buat daftar ID menggunakan makro widget_ids! (belum diterapkan) .

    • [] Gambarlah widget dasar (yaitu Button ).

    • [] Demo Positionable , Colorable , dll. Ciri-ciri (tunjukkan di mana menemukan semua metode / sifat pembangun yang tersedia untuk widget di dokumen).

    • [] Widget yang sedikit lebih rumit ( DropDownList )

    • [] Lampirkan widget ke "kanvas" induk (demo kanvas internal yang berbeda).

  • [] 3. Menggunakan dan Menyesuaikan Theme s

    • [] Penjelasan tentang bagaimana Conrod menggunakan Theme s.

    • [] Cara menggunakan Theme (dimuat dari json).

    • [] Cara membuat Theme (digunakan dalam aplikasi demo dari bab sebelumnya).

    • [] Cara menambahkan gaya widget khusus ke Theme .

  • [] 4. Mendesain Widget khusus menggunakan sifat Conrod Widget

    • [] Mulailah dari dasar dengan mendemonstrasikan cara menghasilkan Button .

    • [] Diskusikan bagaimana status widget disimpan dalam Graph dan bagaimana setiap tipe ID / indeks saling berhubungan satu sama lain.

    • [] Lanjutkan ke contoh yang lebih canggih dalam membuat widget dari widget lain.

  • [] 5. Cara menggunakan Conrod dengan backend Anda sendiri

    • [] Demo cara menggunakan conrod's render::Primitives untuk menggambar ke backend kustom.

  • [] 6. Berkontribusi pada Conrod

    • [] Detail tentang jeroan perpustakaan

    • [] Widget baru dipersilakan dll

Saya pikir akan masuk akal untuk melakukan ini dalam penurunan harga untuk saat ini (yaitu GUIDE.md ) tetapi saya terbuka untuk saran lain: +1:

discussion draft help wanted

Komentar yang paling membantu

Saya rasa memiliki contoh placeholder "hello world" untuk bab "Using Conrod" akan sangat bagus. Saya tidak dapat menemukan contoh minimal yang sederhana, dan karena bagian dari panduan ini belum ditulis, dan sepertinya saya tidak dapat memahaminya sendiri, saya tidak tahu harus mulai dari mana dengan perpustakaan ini .

Saya merasa jika saya punya itu, saya mungkin bisa mencari tahu menggunakan dokumentasi dari sana.

Jika ada yang tahu di mana saya dapat menemukan contoh minimal seperti ini, atau ingin menambahkan ini ke bab "Menggunakan Conrod" sebagai placeholder, itu akan sangat dihargai.

Semua 22 komentar

Hai, saya tahu itu tidak terlalu membantu untuk hanya membuat permintaan tanpa menawarkan bantuan, tetapi apakah perlu mempertimbangkan untuk menambahkan tuts diskusi sekitar menggunakan conrod sebagai lapisan GUI saat menggunakan kerangka kerja tingkat yang lebih rendah (daripada piston) (seperti glium atau gfx-rs) ) untuk grafik sebenarnya?

Itulah situasi saya saat ini. Saya menggunakan gfx-rs untuk grafis utama b / c im melakukan hal 2d charmap / tilemap pada bidang mesh + barang shader. Saya ingin menggunakan piston untuk porsi GUI saat mengambil semua bagasi piston-idiomatik (atau mengambilnya pada tingkat yang paling tidak diperlukan .. misalnya bagaimana menggunakan piston saat saya membuat jendela melalui panggilan ketan mentah?).

@olsonjeffery poin yang bagus! Saya telah mengedit komentar di atas dengan bab ke-5. Tidak masalah btw, ide / permintaan apa pun diterima: +1:

Saya mulai banyak menggunakan Conrod pada proyek nyata, dan saya membutuhkannya untuk didokumentasikan untuk kemungkinan pengembang di masa depan. Jadi saya berpikir saya mungkin akan mencoba membaca panduan ini. Bentuk apa yang harus diambil? File penurunan harga? Halaman web? Wiki?

@jarrett itu akan luar biasa! Ya, menurut saya GUIDE.md di tingkat teratas mungkin adalah ide yang bagus untuk saat ini: +1: Saya akan menambahkannya ke komentar teratas.

Daftar widget yang tersedia kedaluwarsa - Widget gambar ditambahkan di # 696.

@Phlosioneer terima kasih, diperbaiki di # 731.

Beberapa tautan rusak diperbaiki https://github.com/PistonDevelopers/conrod/pull/829

Saya pemula dalam hal karat dan conrod (dan github), namun saya ingin membantu orang tentang cara memulai dengan conrod. Saya pikir akan berguna untuk mendokumentasikan bagaimana saya mengikuti poin-poin penting di sini. Saya akan membuat aplikasi demo sederhana berdasarkan bagaimana hal-hal ditata di bawah 2) poin.

sejauh ini saya memiliki kode ini:
https://github.com/zen3ger/conrod-guessing_game

Saya terbuka untuk saran apa pun!

Saya rasa memiliki contoh placeholder "hello world" untuk bab "Using Conrod" akan sangat bagus. Saya tidak dapat menemukan contoh minimal yang sederhana, dan karena bagian dari panduan ini belum ditulis, dan sepertinya saya tidak dapat memahaminya sendiri, saya tidak tahu harus mulai dari mana dengan perpustakaan ini .

Saya merasa jika saya punya itu, saya mungkin bisa mencari tahu menggunakan dokumentasi dari sana.

Jika ada yang tahu di mana saya dapat menemukan contoh minimal seperti ini, atau ingin menambahkan ini ke bab "Menggunakan Conrod" sebagai placeholder, itu akan sangat dihargai.

Oke, saya punya sedikit halo dunia sederhana, tapi apa yang harus saya lakukan dengannya? Posting di github dan link? Saya baru mengenal praktik open source ini.

Juga: apakah panduannya ada di suatu tempat di github? Saya belum dapat menemukannya dengan mudah, tetapi itu tidak berarti tidak ada. Saya ingin mencoba 2 di atas - setelah menghabiskan beberapa hari melalui latihan yang diharapkan untuk itu.

Bagaimana seharusnya kode ditautkan ke panduan? Saya dapat memberikan contoh singkat dalam teks, tetapi mungkin berguna untuk memiliki semua kode yang tersedia juga.

@bobgates hebat, saya sangat menghargai minat Anda untuk membantu dalam hal ini!

Panduan ini disertakan dalam repo conrod sebagai komentar-dokumen dalam modul publik di repo src - conrod/src/guide/ . Ini memungkinkan pengguna untuk membuat panduan dari src menggunakan cargo doc dan juga berarti kita dapat menggunakan docs.rs untuk menghostingnya . Ini juga berarti kita dapat menggunakan cargo test untuk menguji contoh kode sebaris.

Saya pikir bab pertama harus menjadi contoh yang baik tentang bagaimana menangani tautan dll, tetapi beri tahu kami jika ada yang tidak jelas dari titik itu.

Bagaimana seharusnya kode ditautkan ke panduan? Saya dapat memberikan contoh singkat dalam teks, tetapi mungkin berguna untuk memiliki semua kode yang tersedia juga.

Sepakat! Mungkin kita bisa memiliki subdirektori examples/tutorial/ dengan nama contoh seperti examples/tutorial/hello_world_01.rs untuk setiap bagian kode yang relevan dengan tutorial hello world sebagai contoh. Sebagai referensi, saya sangat menyukai cara glium melakukan ini dengan menyediakan sumber yang diperbarui untuk setiap langkah utama dalam tutorial seperti 01.rs , 02.rs , dll.

Halo, pemula yang berkarat dan berkarat di sini. Agak sulit untuk mengetahui conrod hanya dengan menggunakan contoh. Secara khusus, sulit untuk membedakan mana yang merupakan kode boilerplate dan mana yang bukan. Jadi, saya mengusulkan bab "Mulai Cepat" untuk panduan ini. Bab "Mulai Cepat" itu harus berisi kode penting yang diperlukan setiap program konrod untuk berfungsi - dengan kata lain, templat penggunaan umum. Template akan menjelaskan untuk apa setiap wilayah kode itu dimaksudkan dan komentar di template itu juga akan menandai di mana sisa program ditempatkan sesuai dengan custom conrod.

Kegunaan untuk pembaca:

  • Pemula - akan dapat membandingkan template dengan contoh untuk mempelajari kode.
  • Berpengalaman - dapat menyalin template ke dalam proyek baru untuk mulai membuat UI segera.

@Ironmaggot mungkin ini bisa didasarkan pada contoh hello_world.rs - Saya pikir ini mungkin contoh paling sederhana yang tidak menggunakan modul support .

@mitchmindtree Saya mencoba menggunakan contoh hello_world.rs dan mencoba mengubahnya menjadi representasi "spiritual" dari apa yang saya maksud. Saya kemungkinan besar melakukan kesalahan dalam contoh ini, tetapi saya harap orang-orang dapat memahami apa yang ingin saya sampaikan dengan ini.

Ada beberapa masalah dengan hello_world.rs . Sebagian besar contoh lainnya tampaknya memiliki bagian "Id" yang terpisah. Saya menganggap bahwa bagian seperti itu diperlukan setelah UI menjadi lebih kompleks daripada hello_world.rs . Saya pikir harus ada bagian khusus untuk itu di template juga. Demikian pula, harus ada bagian untuk hal-hal lain yang diperlukan setelah program menjadi lebih kompleks. Meskipun, karena kurangnya pengetahuan saya tentang Conrod, saya tidak dapat memikirkannya.

Bagian lain yang saya tidak tahu di mana harus menempatkan adalah bagian di mana "jus" dari aplikasi harus pergi. Anda tahu, bagian dari aplikasi yang UI-nya dibuat dan bagaimana seharusnya perilakunya dalam kaitannya dengan bagian lain.

Dalam contoh di bawah ini, saya menulis /* comments */ . Saya tidak tahu cukup banyak untuk membuat template lebih lanjut.


Contoh tampilan template - Klik untuk memperluas

//! A simple example that demonstrates using conrod within a basic `winit` window loop, using
//! `glium` to render the `conrod::render::Primitives` to screen.

#[cfg(all(feature="winit", feature="glium"))] #[macro_use] extern crate conrod;

fn main() {
    feature::main();
}

#[cfg(all(feature="winit", feature="glium"))]
mod feature {
    use conrod::{self, widget, Colorable, Positionable, Widget};
    use conrod::backend::glium::glium::{self, Surface};

    pub fn main() {
        /* GRAPHICS OPTIONS--------------------------------------------------------------------
        Define window details here. If you have an .ini file where users can set preferences for 
        graphics options, this would be the place they are read and stored. Place here graphics 
        settings such as resolution, vsync on/off, multisampling level, etc. Contents of this 
        section will be used in INITIALIZATION PROCEDURES. */

        const WIDTH: u32 = 400;
        const HEIGHT: u32 = 200;

        /* INITIALIZATION PROCEDURES--------------------------------------------
        Following blocks of code build the necessary infrastructure for conrod's 
        functioning.*/

        // Building the window
        let mut events_loop = glium::glutin::EventsLoop::new();
        let window = glium::glutin::WindowBuilder::new()
            .with_title("Hello Conrod!")
            .with_dimensions(WIDTH, HEIGHT);
        let context = glium::glutin::ContextBuilder::new()
            .with_vsync(true)
            .with_multisampling(4);
        let display = glium::Display::new(window, context, &events_loop).unwrap();

        // construct our `Ui`.
        let mut ui = conrod::UiBuilder::new([WIDTH as f64, HEIGHT as f64]).build();

        // Generate the widget identifiers.
        widget_ids!(struct Ids { text });
        let ids = Ids::new(ui.widget_id_generator());

        // Add a `Font` to the `Ui`'s `font::Map` from file.
        const FONT_PATH: &'static str =
            concat!(env!("CARGO_MANIFEST_DIR"), "/assets/fonts/NotoSans/NotoSans-Regular.ttf");
        ui.fonts.insert_from_file(FONT_PATH).unwrap();

        // A type used for converting `conrod::render::Primitives` into `Command`s that can be used
        // for drawing to the glium `Surface`.
        let mut renderer = conrod::backend::glium::Renderer::new(&display).unwrap();

        // The image map describing each of our widget->image mappings (in our case, none).
        let image_map = conrod::image::Map::<glium::texture::Texture2d>::new();

        let mut events = Vec::new();

        'render: loop {
            /* RENDERING LOOP'S INFRASTRUCTURE--------------------------------------
            Following code is the plumbing which should be present in every render loop
            for conrod to function as intended. This section gets the events ready 
            for processing. (Needs some sort of laconic explanation WHY the things here 
            are the way they are.)*/

            events.clear();

            // Get all the new events since the last frame.
            events_loop.poll_events(|event| { events.push(event); });

            // If there are no new events, wait for one.
            if events.is_empty() {
                events_loop.run_forever(|event| {
                    events.push(event);
                    glium::glutin::ControlFlow::Break
                });
            }

            // Process the events.
            for event in events.drain(..) {

                /* INPUT PROCESSING------------------------------------------------------
                Use this section of the code to process the input. Add new matches here
                for input as you develop functionality for them. This section's responsibility
                should be to receive the input events and prepare them for "ui" event 
                handling. */

                // Break from the loop upon `Escape` or closed window.
                match event.clone() {
                    glium::glutin::Event::WindowEvent { event, .. } => {
                        match event {
                            glium::glutin::WindowEvent::Closed |
                            glium::glutin::WindowEvent::KeyboardInput {
                                input: glium::glutin::KeyboardInput {
                                    virtual_keycode: Some(glium::glutin::VirtualKeyCode::Escape),
                                    ..
                                },
                                ..
                            } => break 'render,
                            _ => (),
                        }
                    }
                    _ => (),
                };

                // Use the `winit` backend feature to convert the winit event to a conrod input.
                let input = match conrod::backend::winit::convert_event(event, &display) {
                    None => continue,
                    Some(input) => input,
                };

                // Handle the input with the `Ui`.
                ui.handle_event(input);

                // Set the widgets.
                let ui = &mut ui.set_widgets();

               /* BUILDING OF THE USER INTERFACE-----------------------------------
                This is the place where you write the code for the elements of your UI.
                This section should be responsible for all your widgets, buttons,
                primitives and text which will appear on the screen during the use. */

                // "Hello World!" in the middle of the screen.
                widget::Text::new("Hello World!")
                    .middle_of(ui.window)
                    .color(conrod::color::WHITE)
                    .font_size(32)
                    .set(ids.text, ui);
            }

            // Draw the `Ui` if it has changed.
            if let Some(primitives) = ui.draw_if_changed() {
                renderer.fill(&display, primitives, &image_map);
                let mut target = display.draw();
                target.clear_color(0.0, 0.0, 0.0, 1.0);
                renderer.draw(&display, &mut target, &image_map).unwrap();
                target.finish().unwrap();
            }
        }
    }
}

#[cfg(not(all(feature="winit", feature="glium")))]
mod feature {
    pub fn main() {
        println!("This example requires the `winit` and `glium` features. \
                 Try running `cargo run --release --features=\"winit glium\" --example <example_name>`");
    }
}

Kerja bagus @Ironmaggot! Itu membantu menjernihkan beberapa hal. Saya pikir itu bisa menjadi dasar yang baik, jika kita bisa mendapatkan satu template kerja yang dapat digunakan untuk membangun program dengan komentar, itu akan sangat berguna bagi orang-orang.

Saya sangat tertarik untuk membantu dalam hal ini. Namun, saya berada di perahu yang sama dengan Anda @Ironmaggot karena saya tidak cukup tahu untuk membuat template itu.

Saya akan sangat menghargai bantuan dari seseorang yang mengetahui perpustakaan ini lebih baik daripada saya. Bahkan setelah memulai aplikasi dan memiliki UI yang berfungsi, saya mengalami masalah dalam mengembangkannya karena saya tidak mengerti bagaimana struktur perpustakaan.

Saat ini saya membaca kode Conrod dan mencoba mencari tahu semuanya, tetapi jika seseorang yang tahu lebih banyak tentang ini akan bersedia untuk menunjukkan saya di mana saya dapat menemukan informasi / kode yang baik tentangnya, atau menulis struktur dasar tentang bagaimana itu. semua berfungsi, itu akan sangat berguna . Bagaimanapun saya akan membantu menulis tutorial ini yang diharapkan akan membuka perpustakaan ini untuk orang lain dalam situasi saya.

Conrod tampaknya sangat baik, tetapi cukup tidak dapat digunakan karena kurangnya panduan.
Contohnya bagus untuk dimiliki, tetapi jumlah kode boilerplate terlalu tinggi untuk digunakan oleh siapa saja yang hanya ingin memulai. Misalnya, sama sekali tidak jelas apa yang perlu Anda impor sendiri karena semua tanda fitur, dll.

Saya pikir 2. Using Conrod (to create a basic app GUI) dimaksudkan untuk alamat ini - sayangnya sejak saya pertama kali memeriksa conrod (hampir 1,5 tahun yang lalu), belum ada kemajuan untuk ini. Apakah ini berarti conrod ditinggalkan?

Saya mengambil template yang telah saya buat untuk diri saya sendiri, menulis ulang, mendokumentasikan dan mengunggahnya.
Mungkin ini sedikit membantu sampai seseorang menemukan waktu (dan motivasi) untuk menulis panduan ini.
https://github.com/Finnerale/conrod-boilerplate

Hai teman-teman, saya pikir mungkin ide yang bagus untuk menggunakan mdBook . Itu yang membuat buku Rust dibuat.

Halo. Saya baru tahu tentang Conrod dan menurut saya itu sangat luar biasa! Saya akan menggunakannya untuk proyek saya berikutnya, dan menyumbangkan apa pun yang saya bisa. Tapi untuk saat ini, saya hanya ingin menambah diskusi dengan mengatakan apa yang saya perjuangkan, sebagai pemula.

Saya merasa sangat sulit untuk memahami peran semua perpustakaan dan kerangka kerja yang digunakan. Beranda dan pengantar Apa itu Conrod? sebutkan satu ton di antaranya: winit, gfx, glium, piston, vulkano, glutin, sdl2, glfw, raw opengl ...

Saya yakin semua dependensi itu memiliki tujuan, pro dan kontra. Saya telah membaca beberapa dokumentasi mereka, hanya untuk memahami apakah mereka sesuai dengan kasus penggunaan saya atau tidak, tetapi saya masih jauh dari memiliki gambaran yang lengkap.

Misalnya, dalam kasus saya, saya ingin menulis program GUI lintas platform (Win / Mac / Linux X11), untuk digunakan sebagai utilitas mandiri dan sebagai plugin VST (target build berbeda.) Saya tidak membutuhkan grafik 3D, atau mesin game. Kombinasi backend apa yang harus saya pilih? Bagaimana dengan orang-orang yang mengembangkan game? Saya pikir bab kecil tentang pemilihan backend akan banyak berguna, ditulis oleh seseorang yang sudah tahu apa semua perpustakaan itu, pro dan kontra mereka.

Juga, tip singkat tentang cara menggunakan impor peti dan / atau tanda fitur untuk melakukan pemilihan tersebut juga akan berguna bagi kami pemula. Saya masih mempelajari Rust dan saat ini saya tidak tahu bagian kode apa yang benar-benar menerima bendera yang disetel oleh --features "winit glium" di halaman Bangun dan jalankan contoh !

FYI, Anda mungkin harus memeriksa peti lain, sebelum Anda memilih salah satu.
Beberapa yang saya temukan termasuk

@ derpmarine168 terima kasih. Beberapa yang belum pernah saya lihat sebelumnya. Saya memeriksa semuanya, inilah kesan saya:

  • orbTk menggunakan libSDL sebagai backend, yang merupakan kaleng cacing IMHO dan neraka yang berlebihan / ketergantungan, kecuali Anda sedang mengembangkan aplikasi game atau multimedia dan berkomitmen untuk SDL karena alasan lain. Menjalankan ldd pada biner hello world membuat saya takut untuk tidak menggunakannya.
  • GTK-rs dan GTK secara umum sangat bagus jika Anda menargetkan desktop Linux atau menulis aplikasi dengan UI yang besar dan kompleks, tetapi IMHO bukan pilihan terbaik untuk utilitas / plugin kecil multi-platform dengan UI minimal, seperti yang saya ' m mencoba untuk melakukan.
  • Azul tampaknya membawa bagian dari mesin rendering Firefox !? : heran: Itu ide yang bagus dan pandangan yang bagus tentang kecelakaan kereta Electron, tapi mungkin sedikit berlebihan? Aku akan mengingatnya. Tampaknya cukup dipoles dan memiliki dokumentasi yang melimpah. Ini agak lebih berat, dengan rilis build hello world mengambil 6.6MB pada disk dan 30MB RSS, dibandingkan dengan demo Conrod winit glium: 4.1MB pada disk dan 22MB RSS (tentu saja aplikasi Electron biasa membutuhkan 400MB RAM, jadi ya saya ' m membelah rambut lol)
  • Cedar, Relm, dan Limn adalah karya eksperimental / belum
  • Windows GUI jelas khusus untuk Windows.

Saya akan menulis beberapa kode untuk membiasakan diri dengan Conrod dan Azul, untuk mencari tahu mana yang lebih cocok dengan kasus penggunaan saya. Terima kasih atas petunjuk Anda!

Saya berhasil mendapatkan dunia halo untuk bekerja. Anda dapat menemukan file untuk diunduh, serta tulisan jelek bagaimana saya sampai di sana di bawah lucidbrot / conrod-howto .

Hal yang paling membantu adalah ketika saya menemukan panduan tersebut tersembunyi di folder sumber conrod_core. Perlu diperhatikan bahwa bab ketiga yang ditautkan belum ditautkan di README.

Sebelum Anda menautkannya sekarang, perlu juga ditunjukkan bahwa itu tampaknya tidak sepenuhnya mutakhir atau ada beberapa hal yang hilang. Itu mungkin masalah lapisan 8, tapi mungkin perlu pengerjaan ulang.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

pedrohex picture pedrohex  ·  7Komentar

mitchmindtree picture mitchmindtree  ·  3Komentar

malikolivier picture malikolivier  ·  4Komentar

gkbrk picture gkbrk  ·  3Komentar

JGHFunRun picture JGHFunRun  ·  9Komentar