{"id":20072218,"url":"https://github.com/bwheatie/scenic_layout_o_matic","last_synced_at":"2026-05-07T23:01:35.358Z","repository":{"id":54456412,"uuid":"194883420","full_name":"BWheatie/scenic_layout_o_matic","owner":"BWheatie","description":"Layout Library for Elixir's Scenic framework.","archived":false,"fork":false,"pushed_at":"2021-01-16T01:35:08.000Z","size":244,"stargazers_count":42,"open_issues_count":6,"forks_count":2,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-15T01:21:48.114Z","etag":null,"topics":["elixir","scenic-framework"],"latest_commit_sha":null,"homepage":null,"language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BWheatie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-02T14:49:23.000Z","updated_at":"2024-02-04T11:49:51.000Z","dependencies_parsed_at":"2022-08-13T16:10:52.710Z","dependency_job_id":null,"html_url":"https://github.com/BWheatie/scenic_layout_o_matic","commit_stats":null,"previous_names":["bwheatie/layout_o_matic"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BWheatie%2Fscenic_layout_o_matic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BWheatie%2Fscenic_layout_o_matic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BWheatie%2Fscenic_layout_o_matic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BWheatie%2Fscenic_layout_o_matic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BWheatie","download_url":"https://codeload.github.com/BWheatie/scenic_layout_o_matic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252571403,"owners_count":21769828,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["elixir","scenic-framework"],"created_at":"2024-11-13T14:38:59.369Z","updated_at":"2025-12-12T00:14:42.662Z","avatar_url":"https://github.com/BWheatie.png","language":"Elixir","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Layout-O-Matic\n\nThe Layout-O-Matic slices and dices your viewport in 2 easy steps. With the Layout-O-Matic getting web-like layouts is such a breeze.\n\nLayout Engine for [Scenic Framework](https://github.com/boydm/scenic)\n([documentation](http://hexdocs.pm/scenic_layout_o_matic/)).\n\n## Installation\n\n```elixir\n{:scenic_layout_o_matic, \"~\u003e 0.4.0\"}\n```\n\n## Example App\n[https://github.com/BWheatie/layout_demo](https://github.com/BWheatie/layout_demo)\n\n## Usage\nLayouts are hard. Layouts _with_ CSS are hard. Layouts _without_ CSS can be both freeing and frustrating. While Scenic is intended for fixed resolution displays, not everyone is comfortable coding fixed {x,y}. What the Layout-O-Matic aims to do is bring familiarity of CSS grid to Scenic to make layouts as comfortable and semantic as possible.\n\n```elixir\ndefmodule LayoutDemo.Scene.Home do\n  use Scenic.Scene\n\n  alias Scenic.Graph\n  alias LayoutOMatic.Layouts.Components.Layout, as: Components.Layout\n  alias LayoutOMatic.Layouts.Grid\n\n  @viewport Application.get_env(:my_app, :viewport)\n            |\u003e Map.get(:size)\n\n\n  @graph Graph.build()\n         |\u003e add_specs_to_graph(Grid.simple({0, 0}, @viewport_size, [:top, :right, :bottom, :left, :center])),\n           id: :root_grid\n         )\n\n  def init(_, opts) do\n    id_list = [\n      :this_button,\n      :that_button,\n      :other_button,\n      :another_button\n    ]\n\n    graph =\n      Enum.reduce(id_list, @graph, fn id, graph -\u003e\n        graph\n        |\u003e Scenic.Components.button(\"Button\", id: id, styles: %{width: 80, height: 40})\n      end)\n\n    {:ok, new_graph} = AutoLayout.auto_layout(graph, :left_group_grid, id_list)\n    {:ok, opts, push: new_graph}\n  end\nend\n```\n`Components.Layout.auto_layout/3` and `Primitives.Layout.auto_layout/3` are the two functions you will use. They each take a graph, the `group_id` you want to apply the objects to, and a list of ids(which can be used later to easily access those objects). Simply replace your list of ids and the component or primitive you want generated and watch the Layout-O-Matic do all the work for you.\n\n## Walkthrough\nA more thorough [walkthrough](./walkthrough.md) is available.\n\n## Supported Primitives\n* Circle\n* Rectangle\n* RoundedRectangle\n\n## Supported Components\nAll but RadioGroups. Still need to figure those out.\n\n## Transforms\nCurrently if an object is rotated, the Layout-O-Matic will not respect that as it will likely impact the size of the object.\n\n## Motivation\nScenic is a very exciting framework for the Elixir community especially for embedded applications. The motivation for this project is not to bring the web to Scenic but rather to bring some of the familiar layout apis to Scenic. When I started a project I was quickly frustrated in dynamically placing buttons in a view. This library is to bring some familiar tooling for layouts to Scenic.\n\n## Contributing\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. If there is a CSS-like property you believe would be a useful addition please first use the library to make sure it isn't already possible. After, open an issue to discuss it's purpose and why it would be valueable for Scenic development. As Scenic is not for web development, ideally this library would only include the most valuable tools to build great applications.\n\nPlease make sure to update tests as appropriate.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbwheatie%2Fscenic_layout_o_matic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbwheatie%2Fscenic_layout_o_matic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbwheatie%2Fscenic_layout_o_matic/lists"}