text alignment for widthxheight images

This commit is contained in:
Gavin McDonald
2025-08-24 11:13:18 -04:00
parent 3ab19e01fd
commit a981cf98d7
6 changed files with 69 additions and 60 deletions

View File

@@ -1,8 +1,8 @@
defmodule LabelmakerWeb.Constants do
@defaults %{
align: "center",
color: "black",
font: "Helvetica",
align: "center",
height: "",
label: "",
label_too_long: false,

View File

@@ -20,8 +20,8 @@ defmodule LabelmakerWeb.LabelController do
unless File.exists?(filepath) do
basic_settings(options)
|> size_settings(options)
|> outline_settings(options)
|> size_settings(options)
|> final_settings(options)
|> generate_image()
end
@@ -51,11 +51,11 @@ defmodule LabelmakerWeb.LabelController do
]
end
defp size_settings(args, %{align: align, height: height, width: width} = options) do
defp size_settings(args, %{align: alignment, height: height, width: width} = options) do
args ++
[
"-gravity",
align,
Tools.process_gravity(alignment),
"-size",
"#{width}x#{height}",
"caption:#{String.slice(options.label, 0, Constants.max_label_length())}"
@@ -87,9 +87,6 @@ defmodule LabelmakerWeb.LabelController do
defp generate_image(args) do
File.mkdir_p!(@label_dir)
# IO.puts("-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-")
# IO.inspect(args)
{_, 0} = System.cmd("magick", args)
end
end

View File

@@ -1,39 +1,40 @@
defmodule LabelmakerWeb.RadioComponent do
use Phoenix.Component
# props: class, is_dm, settings, options
attr :class, :string, default: ""
attr :selected, :string, required: true
attr :options, :list, required: true
# class="mt-1 block w-full rounded border border-gray-300 px-3 py-2 bg-secondary-light text-fg-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 focus:ring-primary"
attr :event_name, :string, required: true
def radio_component(assigns) do
~H"""
<fieldset class={["flex flex-col w-full", @class]}>
<div class="inline-flex overflow-hidden rounded w-full">
<%= for {option, index} <- Enum.with_index(@options) do %>
<label class={[
"flex justify-center cursor-pointer w-full px-3 py-2
<label
for={"radio-#{option}"}
class={[
"flex justify-center cursor-pointer w-full px-3 py-2
text-sm font-medium capitalize border border-gray-300
transition hover:text-primary-dark dark:hover:text-primary-light",
if(@selected == option,
do:
"bg-selected border-gray-600 dark:bg-selected-dark dark:text-fg-dark dark:border-gray-300 font-bold",
else:
"bg-secondary-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 hover:bg-primary-dark hover:bg-primary-light"
),
if(index == 0, do: "rounded-l", else: ""),
if(index == length(@options) - 1, do: "rounded-r", else: ""),
if(index != 0, do: "border-l border-gray-300", else: "")
]}>
if(@selected == option,
do:
"bg-selected-light border-gray-600 dark:bg-selected-dark dark:text-fg-dark dark:border-gray-300 font-bold",
else:
"bg-secondary-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 hover:bg-primary-dark hover:bg-primary-light"
),
if(index == 0, do: "rounded-l", else: ""),
if(index == length(@options) - 1, do: "rounded-r", else: ""),
if(index != 0, do: "border-l border-gray-300", else: "")
]}
>
<input
type="radio"
name="cardStyle"
value={option}
name="radio_option"
id={"radio-#{option}"}
checked={@selected == option}
phx-change="set_card_style"
phx-value-style={option}
phx-click={@event_name}
phx-value-option={option}
class="sr-only"
/>
{option}

View File

@@ -19,18 +19,6 @@ defmodule LabelmakerWeb.Home do
}
end
def handle_event("update_preview", %{"bg" => bg}, socket) do
preview_background =
case bg do
"r" -> "bg-[linear-gradient(to_right,_black_33%,_white_67%)]"
"b" -> "bg-[linear-gradient(to_bottom,_black_33%,_white_67%)]"
"c" -> ""
_ -> "bg-[linear-gradient(to_right,_black_33%,_white_67%)]"
end
{:noreply, assign(socket, :preview_background, preview_background)}
end
def handle_event("update_label", params, socket) do
assigns =
socket.assigns
@@ -43,6 +31,22 @@ defmodule LabelmakerWeb.Home do
{:noreply, assign(socket, assigns)}
end
def handle_event("update_preview", %{"bg" => bg}, socket) do
preview_background =
case bg do
"r" -> "bg-[linear-gradient(to_right,_black_33%,_white_67%)]"
"b" -> "bg-[linear-gradient(to_bottom,_black_33%,_white_67%)]"
"c" -> ""
_ -> "bg-[linear-gradient(to_right,_black_33%,_white_67%)]"
end
{:noreply, assign(socket, :preview_background, preview_background)}
end
def handle_event("update_alignment", %{"option" => option}, socket) do
{:noreply, assign(socket, :align, option)}
end
def handle_event("make_label", params, socket) do
{:noreply, redirect(socket, to: ~p"/#{params["label"]}?#{Map.drop(params, ["label"])}")}
end

View File

@@ -149,12 +149,16 @@
</div>
</div>
<.radio_component options={Constants.permitted_alignments()} selected={@align} />
<.radio_component
options={Constants.permitted_alignments()}
selected={@align}
event_name="update_alignment"
/>
</form>
<div class="text-center">
<a href={@link}>
<button class="inline-block bg-primary text-fg-light dark:text-fg-dark px-4 py-2 rounded hover:bg-highlight focus:ring-fg-light focus:dark:ring-fg-dark">
<button class="inline-block bg-primary text-fg-light px-4 py-2 rounded hover:bg-highlight focus:ring-fg-light focus:dark:ring-fg-dark">
Create
</button>
</a>

View File

@@ -21,7 +21,7 @@ defmodule LabelmakerWeb.Tools do
|> Map.new(fn {k, v} -> {String.to_atom(k), v} end)
|> Enum.map(fn
{:align, align} ->
{:align, process_alignment(align |> String.downcase())}
{:align, align |> String.downcase()}
{:font, font} ->
{:font, Constants.font_map()[String.downcase(font)]}
@@ -35,9 +35,6 @@ defmodule LabelmakerWeb.Tools do
{:label_too_long, _} ->
{:label_too_long, String.length(parameters["label"]) > Constants.max_label_length()}
{:link, _} ->
{:link, generate_link(parameters)}
{:preview_height, _} ->
{:preview_height, calculate_preview_height(parameters)}
@@ -51,7 +48,7 @@ defmodule LabelmakerWeb.Tools do
pair
end)
|> Enum.filter(fn
{:align, align} -> align in Constants.permitted_gravity()
{:align, align} -> align in Constants.permitted_alignments()
{:color, color} -> color in Constants.colors()
{:font, font} -> font in Map.values(Constants.font_map())
{:outline, outline} -> outline in Constants.outlines()
@@ -60,17 +57,21 @@ defmodule LabelmakerWeb.Tools do
end)
|> Map.new()
Map.merge(Constants.defaults(), parameters)
parameters = Map.merge(Constants.defaults(), parameters)
Map.put(parameters, :link, generate_link(parameters))
end
defp process_alignment("left"), do: "west"
defp process_alignment("middle"), do: "center"
defp process_alignment("right"), do: "east"
defp process_alignment(alignment), do: alignment |> String.downcase()
def process_gravity("left"), do: "west"
def process_gravity("middle"), do: "center"
def process_gravity("right"), do: "east"
def process_gravity(alignment), do: alignment |> String.downcase()
defp process_height("", parameters) do
parameters["width"] |> String.to_integer() |> max(0) |> min(Constants.max_height())
end
defp process_height("", _parameters), do: ""
# defp process_height("", parameters) do
# parameters["width"] |> String.to_integer() |> max(0) |> min(Constants.max_height())
# end
defp process_height(height, _parameters) do
height |> String.to_integer() |> max(0) |> min(Constants.max_height())
@@ -84,17 +85,19 @@ defmodule LabelmakerWeb.Tools do
end
end
defp generate_link(%{"height" => "", "label" => label, "width" => ""} = parameters) do
~p"/#{label}?#{Map.take(parameters, ["color", "font", "outline", "size"])}"
defp generate_link(%{height: "", label: label, width: ""} = parameters) do
~p"/#{label}?#{Map.take(parameters, [:color, :font, :outline, :size])}"
end
defp generate_link(%{"label" => label} = parameters) do
~p"/#{label}?#{Map.take(parameters, ["color", "font", "height", "outline", "width"])}"
defp generate_link(%{label: label} = parameters) do
~p"/#{label}?#{Map.take(parameters, [:align, :color, :font, :height, :outline, :width])}"
end
defp process_width("", parameters) do
parameters["height"] |> String.to_integer() |> max(0) |> min(Constants.max_width())
end
defp process_width("", _parameters), do: ""
# defp process_width("", parameters) do
# parameters["height"] |> String.to_integer() |> max(0) |> min(Constants.max_width())
# end
defp process_width(width, _parameters) do
width |> String.to_integer() |> max(0) |> min(Constants.max_width())