slides.json

{
  "box_size": {
    "width": 90,
    "height": 35
  },

  "slides" : [
    {
      "title": "RATATUI",
      "content": [
        {"type": "Image", "content": "./images/ratatui.png", "rect": { "x": 28, "y": 8, "width": 34, "height": 19 }},
        {"type": "Line", "content": "A Rust library for creating", "rect": { "x": 32, "y": 27, "width": 30, "height": 1 }, "color": "#FFFFee"},
        {"type": "Line", "content": "TERMINAL USER INTERFACES", "rect": { "x": 33, "y": 28, "width": 30, "height": 1 }, "color": "#FFFF00"}
      ]
    },

    {
      "title": "FIRST PC",
      "content": [
        { "type": "Image", "content": "./images/atari800xe.png", "rect": { "x": 18, "y": 9, "width": 56, "height": 23 }}
      ]
    },

    {
      "title": "BASIC",
      "content": [
        { "type": "Image", "content": "./images/atari_basic.jpg", "rect": { "x": 18, "y": 10, "width": 50, "height": 18 }}
      ]
    },

    {
      "title": "MAGIC",
      "content": [
        { "type": "Image", "content": "./images/magical_stone.jpg", "rect": { "x": 18, "y": 6, "width": 54, "height": 29 }}
      ]
    },

    {
      "title": "whoami",
      "content": [
        { "type": "Image", "content": "./images/warlock.png", "rect": { "x": 8, "y": 13, "width": 19, "height": 13 }},
        { "type": "Line", "content": "Lukas `Chleba` Franek", "rect": { "x": 35, "y": 13, "width": 25, "height": 1 }, "color": "#FFFF00"},
        {
          "type": "Paragraph",
          "rect": { "x": 35, "y": 15, "width": 44, "height": 9 },
          "content": "▸ 📁 github.com/Chleba\n\n▸ 🚧 Web, Embedded, Games, Desktop, Mobile\n\n▸ 📦 Alpine Linux package maintainer\n\n▸ 🌐 www.chleba.org",
          "color": "#FFFFEE"
        }
      ]
    },

    {
      "title": "as_ref()",
      "content": [
        { "type": "Image", "content": "./images/ubi.jpg", "rect": { "x": 27, "y": 15, "width": 15, "height": 10 } },
        { "type": "Image", "content": "./images/geewa.jpg", "rect": { "x": 8, "y": 20, "width": 8, "height": 6 } },
        { "type": "Image", "content": "./images/apollogames.jpg", "rect": { "x": 50, "y": 12, "width": 9, "height": 7 } },
        { "type": "Image", "content": "./images/prusa.jpg", "rect": { "x": 45, "y": 20, "width": 19, "height": 12 } },
        { "type": "Image", "content": "./images/narodni_divadlo.png", "rect": { "x": 25, "y": 26, "width": 13, "height": 9 } },
        { "type": "Image", "content": "./images/praha.png", "rect": { "x": 36, "y": 8, "width": 8, "height": 6 } },
        { "type": "Image", "content": "./images/skoda.png", "rect": { "x": 65, "y": 9, "width": 10, "height": 7 } },
        { "type": "Image", "content": "./images/szn.jpg", "rect": { "x": 15, "y": 10, "width": 10, "height": 7 } }
      ]
    },

    {
      "title": "NEW LOVE",
      "content": [
        { "type": "Image", "content": "./images/rust.jpg", "rect": { "x": 27, "y": 8, "width": 34, "height": 19 } },
        { "type": "Line", "content": "💚println!(\"Hello World!\")💚", "rect": { "x": 30, "y": 28, "width": 28, "height": 1 }, "color": "#FFFF00"}
      ]
    },

    {
      "title": "LEARNING",
      "content": [
        { "type": "Paragraph", 
          "content": "▸ rustlings: https://github.com/rust-lang/rustlings\n▸ #1 APP (hello world) is CLI\n▸ CLI > TUI\n▸ TUI: Ratatui\n▸ rust + ratatui = netscanner", 
          "rect": { "x": 20, "y": 8, "width": 58, "height": 5 }, "color": "#FFFFFF"
        },
        { "type": "Image", "content": "./images/netscanner.png", "rect": { "x": 22, "y": 16, "width": 48, "height": 17 } }
      ]
    },

    {
      "title": "CLI vs TUI",
      "content": [
        { "type": "Image", "content": "./images/netscanner.png", "rect": { "x": 9, "y": 9, "width": 24, "height": 10 } },
        {
          "type": "Paragraph",
          "rect": { "x": 39, "y": 10, "width": 44, "height": 6 },
          "content": "Netscanner\n▸ nmap\n▸ arpscan\n▸ iw|airport\n▸ ping\n▸ etc..",
          "color": "#FFFFEE"
        },

        { "type": "Image", "content": "./images/mc.png", "rect": { "x": 9, "y": 22, "width": 24, "height": 10 } },
        {
          "type": "Paragraph",
          "rect": { "x": 39, "y": 22, "width": 44, "height": 7 },
          "content": "Midnight commander\n▸ cp\n▸ ls\n▸ mv\n▸ ftp\n▸ ssh\n▸ etc..",
          "color": "#FFFFEE"
        }
      ]
    },

    {
      "title": "TUI LIB",
      "content": [
        {"type": "Image", "content": "./images/ratatui.png", "rect": { "x": 28, "y": 10, "width": 34, "height": 19 }}
      ]
    },

    {
      "title": "RATATUI",
      "content": [
        { "type": "Image", "content": "./images/ratatui.png", "rect": { "x": 62, "y": 11, "width": 19, "height": 12 } },
        {
          "type": "Paragraph",
          "rect": { "x": 9, "y": 10, "width": 38, "height": 19},
          "content": "▸ lightweight immediate mode \n  graphics library\n\n▸ fork of tui-rs library \n  (since Feb 2023)\n\n▸ handling keyboard & mouse events\n\n▸ support various backends\n  (Crossterm, Termion or Termwiz)\n\n▸ many build-in widgets\n  (Canvas, Gauge, Table, Chart, ...)\n\n▸ simple dynamic layout system\n  using constraints",
          "color": "#FFFFEE"
        }
      ]
    },

    {
      "title": "TEMPLATES",
      "content": [
        {
          "type": "Paragraph",
          "rect": { "x": 9, "y": 10, "width": 68, "height": 19},
          "content": "▸ using `cargo-generate`: github.com/ratatui-org/templates\n\n▸ `cargo generate ratatui-org/templates`\n\n▸ options:\n  ▸ simple (without async)\n  ▸ simple async\n  ▸ components",
          "color": "#FFFFEE"
        },
        { "type": "Image", "content": "./images/cargo-generate.png", "rect": { "x": 6, "y": 21, "width": 79, "height": 9 } }
      ]
    },

    {
      "title": "LAYOUT",
      "content": [
        {
          "type": "Paragraph",
          "rect": { "x": 15, "y": 9, "width": 68, "height": 19},
          "content": "▸ Coordinate system:\n  ▸ from left to right\n  ▸ from top to bottom\n\n▸ Layout struct:\n  ▸ Length\n  ▸ Min\n  ▸ Max\n  ▸ Ratio\n  ▸ Percentage",
          "color": "#FFFFEE"
        },
        { "type": "Image", "content": "./images/layout.png", "rect": { "x": 52, "y": 9, "width": 28, "height": 14 } },
        {"type": "CodeHighlight", 
          "content": "let layout = Layout::default()\n.direction(Direction::Vertical)\n.constraints(vec![\n  Constraint::Percentage(50),\n  Constraint::Percentage(50),\n])\n.split(frame.size());", 
          "rect": {"x": 15, "y": 23, "width": 40, "height": 10}
        }
      ]
    },

    {
      "title": "RENDER",
      "content": [
        {
          "type": "Paragraph",
          "rect": { "x": 15, "y": 7, "width": 68, "height": 19},
          "content": "▸ immediate mode\n  ▸ redraw UI every frame\n  ▸ no permanent widget object in memory",
          "color": "#FFFFEE"
        },
        { "type": "Image", "content": "./images/immediate.png", "rect": { "x": 6, "y": 13, "width": 38, "height": 9 } },
        { "type": "Image", "content": "./images/retained.png", "rect": { "x": 48, "y": 13, "width": 38, "height": 9 } },
        {"type": "CodeHighlight", 
          "content": "loop {\n  terminal.draw(|frame| {\n    if state.condition {\n      frame.render_widget(SomeWidget::new(), layout);\n    } else {\n      frame.render_widget(AnotherWidget::new(), layout);\n    }\n  })?;\n}", 
          "rect": {"x": 15, "y": 23, "width": 70, "height": 10}
        }
      ]
    },

    {
      "title": "",
      "content": [
        { "type": "BigText", "content": "WIDGETS:", "rect": { "x": 28, "y": 16, "width": 35, "height": 22 } }
      ]
    },

    {
      "title": "Block",
      "content": [
        {"type": "Block", "content": "block's title", "rect": {"x": 35, "y": 10, "width": 20, "height": 10}},
        {"type": "CodeHighlight", 
          "content": "Block::default()\n.borders(Borders::ALL)\n.title(\"block's title\")", 
          "rect": {"x": 35, "y": 24, "width": 40, "height": 10}
        }
      ]
    },

    {
      "title": "Table",
      "content": [
        { "type": "Image", "content": "./images/table.png", "rect": { "x": 12, "y": 8, "width": 67, "height": 13 } },
        { "type": "CodeHighlight", 
          "content": "let rows = [Row::new(vec![\"Cell1\", \"Cell2\", \"Cell3\"])];\nlet width = [Constraint::Min(3),Constraint::Min(3),Constraint::Min(3)];", 
          "rect": {"x": 10, "y": 22, "width": 75, "height": 2}
        },
        { "type": "CodeHighlight", 
          "content": "Table::new(rows, widths)\n.columns_spacing(1)\n.header(Row::new(vec![\"Col1\", \"Col2\", \"Col3\"]))\n.highlight_style(Style::new().reversed())\n.highlight_symbol(\">>>\")", 
          "rect": {"x": 15, "y": 25, "width": 60, "height": 10}
        }
      ]
    },

    {
      "title": "Sparkline",
      "content": [
        {"type": "Sparkline", "data": [0, 1, 2, 3, 4, 5, 10, 5, 5, 4, 1, 3, 2, 6, 7, 3, 9, 7], "max": 10, "direction": "RightToLeft", "rect": {"x": 34, "y": 10, "width": 50, "height": 10}},
        {"type": "CodeHighlight", "content": "Sparkline::default()\n.data(&[1, 2, 3, 4, 5])\n.max(5)\n.direction(RenderDirection::LeftToRight)", "rect": {"x": 25, "y": 24, "width": 40, "height": 10}}
      ]
    },

    {
      "title": "Canvas",
      "content": [
        { "type": "Image", "content": "./images/canvas.png", "rect": { "x": 17, "y": 8, "width": 57, "height": 15 } },
        {"type": "CodeHighlight", 
          "content": "Canvas::default()\n.x_bounds(&[-50.0, 50.0])\n.y_bounds(-50.0, 50.0)\n.paint(|ctx| {\n  ctx.draw(&Line {\n    x1: 0.0, y1: 0.0, x2: 10.0, y2: 10.0, color: Color::White\n  })\n})", 
          "rect": {"x": 15, "y": 24, "width": 70, "height": 10}
        }
      ]
    },

    {
      "title": "canvas::Map",
      "content": [
        { "type": "Image", "content": "./images/canvasmap.png", "rect": { "x": 21, "y": 6, "width": 52, "height": 29 }}
      ]
    },

    {
      "title": "List",
      "content": [
        { "type": "Image", "content": "./images/list.png", "rect": { "x": 23, "y": 7, "width": 44, "height": 12 } },
        { "type": "CodeHighlight", 
          "content": "let items = [\"Item1\", \"Item2\", \"Item3\"])];", 
          "rect": {"x": 15, "y": 22, "width": 75, "height": 2}
        },
        { "type": "CodeHighlight", 
          "content": "List::new(items)\n.direction(ListDirection::BottomToTop)\n.highlight_style(\n  Style::default()\n  .add_modifier(Modifier::ITALIC)\n)\n.highlight_symbol(\">>>\")", 
          "rect": {"x": 15, "y": 24, "width": 60, "height": 10}
        }
      ]
    },

    {
      "title": "and many more",
      "content": [
        {
          "type": "Paragraph",
          "rect": { "x": 19, "y": 10, "width": 68, "height": 19},
          "content": "▸ BarChart\n\n▸ Calendar\n\n▸ Chart\n\n▸ Clear\n\n▸ LineGauge\n\n▸ Gauge\n\n▸ Paragraph\n\n▸ Scrollbar",
          "color": "#FFFFEE"
        },
        {
          "type": "Paragraph",
          "rect": { "x": 36, "y": 10, "width": 68, "height": 19},
          "content": "▸ Tabs\n\n-------------------------------------\n\n▸ tui-menu\n\n▸ tui-nodes\n\n▸ tui-scrollview\n\n▸ tui-widget-list",
          "color": "#FFFFEE"
        },
        {
          "type": "Paragraph",
          "rect": { "x": 58, "y": 14, "width": 68, "height": 19},
          "content": "▸ ratatui-image\n\n▸ throbber-tui\n\n▸ tui-big-text\n\n▸ tui-logger",
          "color": "#FFFFEE"
        }
      ]
    },

    {
      "title": "",
      "content": [
        { "type": "BigText", "content": "SHOWCASE:", "rect": { "x": 28, "y": 16, "width": 35, "height": 22 } }
      ]
    },

    {
      "title": "Krabby-gotchi",
      "content": [
        { "type": "Image", "content": "./images/krabby.JPG", "rect": { "x": 28, "y": 9, "width": 35, "height": 22 } },
        { "type": "Paragraph", 
          "content": "🦀 Crustacious companion 🦀", 
          "rect": { "x": 32, "y": 6, "width": 58, "height": 2 }, "color": "#FFFFFF"
        },
        { "type": "Line", "content": "https://github.com/DrCheeseFace/Krabby-gotchi", "rect": { "x": 24, "y": 31, "width": 65, "height": 1 }, "color": "#FFFF00"}
      ]
    },

    {
      "title": "AI SNAKE",
      "content": [
        { "type": "Image", "content": "./images/snake.png", "rect": { "x": 18, "y": 12, "width": 56, "height": 18 } },
        { "type": "Paragraph", 
          "content": "A neural network learns to play snakes in a terminal", 
          "rect": { "x": 20, "y": 8, "width": 58, "height": 2 }, "color": "#FFFFFF"
        },
        { "type": "Line", "content": "https://github.com/bones-ai/rust-snake-ai-ratatui", "rect": { "x": 22, "y": 30, "width": 65, "height": 1 }, "color": "#FFFF00"}
      ]
    },

    {
      "title": "Bevy render",
      "content": [
        { "type": "Image", "content": "./images/bevy.png", "rect": { "x": 28, "y": 10, "width": 37, "height": 20 } },
        { "type": "Paragraph", 
          "content": "Bevy  inside the terminal", 
          "rect": { "x": 34, "y": 7, "width": 58, "height": 2 }, "color": "#FFFFFF"
        },
        { "type": "Line", "content": "https://github.com/cxreiff/bevy_ratatui_render", "rect": { "x": 23, "y": 30, "width": 65, "height": 1 }, "color": "#FFFF00"}
      ]
    },

    {
      "title": "Openapi-tui",
      "content": [
        { "type": "Image", "content": "./images/openapi-tui.png", "rect": { "x": 12, "y": 12, "width": 66, "height": 17 } },
        { "type": "Paragraph", 
          "content": "Terminal UI to list, browse and run APIs \ndefined with OpenAPI v3.0 and v3.1 spec.", 
          "rect": { "x": 25, "y": 7, "width": 58, "height": 2 }, "color": "#FFFFFF"
        },
        { "type": "Line", "content": "https://github.com/zaghaghi/openapi-tui", "rect": { "x": 27, "y": 31, "width": 65, "height": 1 }, "color": "#FFFF00"}
      ]
    },

    {
      "title": "Yazi",
      "content": [
        { "type": "Image", "content": "./images/yazi.png", "rect": { "x": 12, "y": 12, "width": 68, "height": 17 } },
        { "type": "Paragraph", 
          "content": "Yazi - ⚡️ Blazing Fast Terminal File Manager", 
          "rect": { "x": 20, "y": 8, "width": 58, "height": 2 }, "color": "#FFFFFF"
        },
        { "type": "Line", "content": "https://github.com/sxyazi/yazi", "rect": { "x": 29, "y": 30, "width": 65, "height": 1 }, "color": "#FFFF00"}
      ]
    },

    {
      "title": "Iamb",
      "content": [
        { "type": "Image", "content": "./images/iamb.png", "rect": { "x": 12, "y": 10, "width": 66, "height": 21 } },
        { "type": "Paragraph", 
          "content": "Iamb - Matrix client that uses Vim keybindings", 
          "rect": { "x": 22, "y": 7, "width": 58, "height": 2 }, "color": "#FFFFFF"
        },
        { "type": "Line", "content": "https://github.com/ulyssa/iamb", "rect": { "x": 31, "y": 31, "width": 65, "height": 1 }, "color": "#FFFF00"}
      ]
    },

    {
      "title": "",
      "content": [
        { "type": "BigText", "content": "AWESOME LIST:", "rect": { "x": 19, "y": 12, "width": 55, "height": 22 } },
        { "type": "Paragraph", 
          "content": "      List of TUI crates and applications \nthat are made for or using `ratatui` and `tui-rs`.", 
          "rect": { "x": 22, "y": 18, "width": 58, "height": 2 }, "color": "#FFFFFF"
        },
        { "type": "Line", "content": "https://github.com/ratatui-org/awesome-ratatui", "rect": { "x": 22, "y": 22, "width": 65, "height": 1 }, "color": "#FFFF00"}
      ]
    },

    {
      "title": "",
      "content": [
        { "type": "Image", "content": "./images/ratatui.png", "rect": { "x": 8, "y": 13, "width": 19, "height": 12 }},
        { "type": "Line", "content": "🧀 Ratatui 🧀", "rect": { "x": 35, "y": 13, "width": 25, "height": 1 }, "color": "#FFFF00"},
        {
          "type": "Paragraph",
          "rect": { "x": 35, "y": 15, "width": 44, "height": 9 },
          "content": "▸ 📁 github.com/ratatui-org/ratatui\n\n▸ 📒 github.com/ratatui-org\n\n▸ 📣 discord: https://discord.gg/pMCEU9hNEj\n\n▸ 🌐 http://ratatui.rs",
          "color": "#FFFFEE"
        }
      ]
    }
  ]
}