changed version expanded readme

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "egui_graphs"
-version = "0.0.15"
+version = "0.0.16"
 authors = ["Dmitrii Samsonov <[email protected]>"]
 license = "MIT"
 homepage = "https://github.com/blitzarx1/egui_graphs"

README.md

@@ -34,8 +34,78 @@ interactions vs egui draw benchmarks | [ ]
 documentation, tests, example        | [ ]
 </pre>
 
-## Example
+## Examples
 
 ![ezgif-4-3e4e4469e6](https://user-images.githubusercontent.com/32969427/233863786-11459176-b741-4343-8b42-7d9b3a8239ee.gif)
 
-You can also check the [example](https://github.com/blitzarx1/egui_graph/tree/master/example) for usage references and settings description.
+### Basic
+#### Step 1: Setting up the ExampleApp struct. 
+
+First, let's define the ExampleApp struct that will hold the graph elements and settings. The struct contains two fields: elements and settings. The elements field stores the graph's nodes and edges, while settings contains the configuration options for the GraphView widget.
+```rust 
+pub struct ExampleApp {
+    elements: Elements,
+    settings: Settings,
+}
+```
+
+#### Step 2: Implementing the new() function. 
+
+Next, implement the new() function for the ExampleApp struct. This function initializes the graph settings with default values and generates the graph elements.
+```rust
+impl ExampleApp {
+    fn new(_: &CreationContext<'_>) -> Self {
+        let settings = Settings::default();
+        let elements = generate_graph();
+        Self { settings, elements }
+    }
+}
+```
+
+#### Step 3: Implementing the update() function. 
+
+Now, implement the update() function for the ExampleApp. This function creates a GraphView widget with the elements and settings, and adds it to the central panel using the ui.add() function.
+```rust 
+impl App for ExampleApp {
+    fn update(&mut self, ctx: &Context, _: &mut eframe::Frame) {
+        let widget = &GraphView::new(&self.elements, &self.settings);
+        egui::CentralPanel::default().show(ctx, |ui| {
+            ui.add(widget);
+        });
+    }
+}
+```
+#### Step 4: Generating the graph elements. 
+
+Create a helper function called generate_graph() that initializes the nodes and edges for the graph. In this example, we create three nodes with unique positions and three edges connecting them in a triangular pattern.
+```rust 
+fn generate_graph() -> Elements {
+    let mut nodes = HashMap::new();
+    nodes.insert(0, Node::new(egui::Vec2::new(0., 30.)));
+    nodes.insert(1, Node::new(egui::Vec2::new(-30., 0.)));
+    nodes.insert(2, Node::new(egui::Vec2::new(30., 0.)));    let mut edges = HashMap::new();
+    edges.insert((0, 1), vec![Edge::new(0, 1, 0)]);
+    edges.insert((1, 2), vec![Edge::new(1, 2, 0)]);
+    edges.insert((2, 0), vec![Edge::new(2, 0, 0)]);    Elements::new(nodes, edges)
+}
+```
+
+#### Step 5: Running the application. 
+
+Finally, run the application using the run_native() function with the specified native options and the ExampleApp.
+```rust 
+fn main() {
+    let native_options = eframe::NativeOptions::default();
+    run_native(
+        "egui_graphs_basic_demo",
+        native_options,
+        Box::new(|cc| Box::new(ExampleApp::new(cc))),
+    )
+    .unwrap();
+}
+```
+You can further customize the appearance and behavior of your graph by modifying the settings or adding more nodes and edges as needed. Don't forget to apply changes return from the widget.
+
+---
+
+You can check more advanced [interactive example](https://github.com/blitzarx1/egui_graph/tree/master/examples/interactive) for usage references, settings description and changes apply demonstration.

examples/basic/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "basic"
-version = "0.0.15"
+version = "0.0.16"
 authors = ["Dmitrii Samsonov <[email protected]>"]
 license = "MIT"
 edition = "2021"

examples/interactive/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "interactive"
-version = "0.0.15"
+version = "0.0.16"
 authors = ["Dmitrii Samsonov <[email protected]>"]
 license = "MIT"
 edition = "2021"