bwheatie / scenic_layout_o_matic Goto Github PK

Layout Library for Elixir's Scenic framework.

License: MIT License

Elixir 100.00%

scenic_layout_o_matic's Introduction

Layout-O-Matic

The 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.

Layout Engine for Scenic Framework (documentation).

Installation

{:scenic_layout_o_matic, "~> 0.4.0"}

Example App

https://github.com/BWheatie/layout_demo

Usage

Layouts 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.

defmodule LayoutDemo.Scene.Home do
  use Scenic.Scene

  alias Scenic.Graph
  alias LayoutOMatic.Layouts.Components.Layout, as: Components.Layout
  alias LayoutOMatic.Layouts.Grid

  @viewport Application.get_env(:my_app, :viewport)
            |> Map.get(:size)


  @graph Graph.build()
         |> add_specs_to_graph(Grid.simple({0, 0}, @viewport_size, [:top, :right, :bottom, :left, :center])),
           id: :root_grid
         )

  def init(_, opts) do
    id_list = [
      :this_button,
      :that_button,
      :other_button,
      :another_button
    ]

    graph =
      Enum.reduce(id_list, @graph, fn id, graph ->
        graph
        |> Scenic.Components.button("Button", id: id, styles: %{width: 80, height: 40})
      end)

    {:ok, new_graph} = AutoLayout.auto_layout(graph, :left_group_grid, id_list)
    {:ok, opts, push: new_graph}
  end
end

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.

Walkthrough

A more thorough walkthrough is available.

Supported Primitives

Circle
Rectangle
RoundedRectangle

Supported Components

All but RadioGroups. Still need to figure those out.

Transforms

Currently if an object is rotated, the Layout-O-Matic will not respect that as it will likely impact the size of the object.

Motivation

Scenic 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.

Contributing

Pull 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.

Please make sure to update tests as appropriate.

scenic_layout_o_matic's People

Contributors

Stargazers

Watchers

Forkers

axelson somersbmatthews

scenic_layout_o_matic's Issues

Size-to-fit in autolayouts

Would like to be able to pass in a size_to_fit: bool as an opt to ensure primitives fit in a grid. Circles are a good place to start. Need to do some discovery to determine a like CSS api to mimic.

Autolayout Toggles

Need to use the same general template from buttons to autolayout toggles. Will need to check core scenic code in order to set default sizes. Likely will involve font metrics.

Diverging Dependencies

mbp:scenic_observer pyop$ mix deps.get
Resolving Hex dependencies...
Dependency resolution completed:
New:
  elixir_make 0.6.0
  font_metrics 0.3.1
  msgpax 2.2.4
  scenic 0.10.2
  scenic_driver_glfw 0.10.1
  scenic_layout_o_matic 0.1.0
* Getting scenic (Hex package)
* Getting scenic_driver_glfw (Hex package)
* Getting scenic_layout_o_matic (Hex package)
* Getting font_metrics (Hex package)
* Getting msgpax (Hex package)
* Getting elixir_make (Hex package)
Dependencies have diverged:
* scenic_driver_glfw (Hex package)
  the :targets option for dependency scenic_driver_glfw

  > In mix.exs:
    {:scenic_driver_glfw, "~> 0.10", [env: :prod, repo: "hexpm", hex: "scenic_driver_glfw", targets: :host]}

  does not match the :targets option calculated for

  > In deps/scenic_layout_o_matic/mix.exs:
    {:scenic_driver_glfw, "~> 0.10", [env: :prod, hex: "scenic_driver_glfw", repo: "hexpm", optional: false]}

  Remove the :targets restriction from your dep
** (Mix) Can't continue due to errors on dependencies

Auto Layout checkboxes

Need to use the same general template from buttons to autolayout checkboxes. Will need to check core scenic code in order to set default sizes. Likely will involve font metrics.

Dropdown

Currently auto-layouted dropdowns are separated by drop-height. This is due to a UX issue with overlapping dropdowns as the unactive dropdown below or above will overlap the elements of the active dropdown. Not sure is this should be resolved in this library or if it should be figured out in Scenic core.

Breaks if you don't pass in width or height

Example error:

Launcher.Scene.Home crashed during init
Scene Args: nil
%CaseClauseError{term: %{button_font_size: 25}}
-->     (scenic_layout_o_matic) lib/layouts/components/button.ex:25: LayoutOMatic.Layouts.Components.Button.translate/1
    (scenic_layout_o_matic) lib/layouts/components/autolayout.ex:88: LayoutOMatic.Layouts.Components.AutoLayout.do_layout/3
    (elixir) lib/enum.ex:1948: Enum."-reduce/3-lists^foldl/2-0-"/3
    (scenic_layout_o_matic) lib/layouts/components/autolayout.ex:62: LayoutOMatic.Layouts.Components.AutoLayout.auto_layout/3
    (launcher) lib/launcher/scenes/home.ex:98: Launcher.Scene.Home.add_buttons_to_graph/1
    (launcher) lib/launcher/scenes/home.ex:66: Launcher.Scene.Home.init/2
    (scenic) lib/scenic/scene.ex:866: Scenic.Scene.handle_continue/2
    (stdlib) gen_server.erl:637: :gen_server.try_dispatch/4

Autolayout slider

Need to use the same general template from buttons to autolayout slider. Will need to check core scenic code in order to set default sizes. Likely will involve font metrics.

Autolayout Dropdowns

Need to use the same general template from buttons to autolayout dropdowns. Will need to check core scenic code in order to set default sizes. Likely will involve font metrics.

Autolayout textfield

Need to use the same general template from buttons to autolayout textfield. Will need to check core scenic code in order to set default sizes. Likely will involve font metrics.

Fix roundedrectangle

Need to move rectangles to using %Layout{} in order for more than 2 rows to work properly.

Will be able to copy/paste from rectangle after that file is fixed.

Fix rectangle autolayouts