Skip to content

Commit 4d0cf5e

Browse files
committed
feat(v2): proof of concept endpoint with improved trimming and sizing
trims whitespace and sizes to final size when needed
1 parent 15dd0cf commit 4d0cf5e

File tree

8 files changed

+308
-5
lines changed

8 files changed

+308
-5
lines changed

app/Actions/CreateIconStackImage.php

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<?php
2+
3+
namespace App\Actions;
4+
5+
use App\Helpers\Encoders\FontAwesome\v5\FontAwesomeV5Encoder;
6+
use Lorisleiva\Actions\Concerns\AsAction;
7+
use Intervention\Image\Facades\Image as Image;
8+
9+
class CreateIconStackImage
10+
{
11+
use AsAction;
12+
13+
public function handle(array $params)
14+
{
15+
// OPEN ICON DEFAULT IMAGE
16+
$img = file_get_contents(resource_path('images/icon.png'));
17+
$img = Image::make($img);
18+
19+
// INPUTS
20+
$icon = data_get($params, 'icon') ?: null;
21+
$on = data_get($params, 'on') ?: $this->getDefaultOnIcon();
22+
23+
// RESIZE THE ICON
24+
$size = data_get($params, 'size') ?: 30;
25+
$size = round($size * 1.5);
26+
if ($size % 2 == 0) {
27+
$size += 1;
28+
}
29+
$iconSize = data_get($params, 'iconsize') ?: ($size * 0.3);
30+
$voffset = data_get($params, 'voffset') ?: 0;
31+
$hoffset = data_get($params, 'hoffset') ?: 0;
32+
33+
$img->resize($size, $size, function ($constraint) {
34+
$constraint->aspectRatio();
35+
});
36+
37+
$large_color = (data_get($params, 'oncolor') ?: data_get($params, 'color')) ?: '000000';
38+
$img->text($this->getUnicodeCharFromIcon($on), $size / 2, $size / 2, function ($font) use ($on, $img, $size, $large_color) {
39+
$font->file($this->getIconFontPath($on));
40+
$font->size($size * 0.8);
41+
$font->color($large_color);
42+
$font->align('center');
43+
$font->valign('center');
44+
});
45+
46+
$small_color = data_get($params, 'color') ?: null;
47+
$img->text($this->getUnicodeCharFromIcon($icon), ($size / 2) + $hoffset, ($size / 2) + $voffset, function ($font) use ($icon, $img, $size, $iconSize, $large_color, $small_color) {
48+
$font->file($this->getIconFontPath($icon));
49+
$font->size($iconSize);
50+
$font->color($small_color ?: $large_color);
51+
$font->align('center');
52+
$font->valign('center');
53+
});
54+
55+
$label = data_get($params, 'label') ?: null;
56+
$labelOffset = data_get($params, 'labelOffset') ?: 0;
57+
if (!is_null($label)) {
58+
59+
// ADD THE LABEL
60+
$img->text($this->getUnicodeCharFromIcon('fa-circle'), $size * 0.8, $size * 0.8, function ($font) use ($img, $size, $params) {
61+
$font->file($this->getIconFontPath('fa-circle'));
62+
$font->size($size * 0.44);
63+
$font->color(data_get($params, 'labelColor') ?: 'D9534F');
64+
$font->align('center');
65+
$font->valign('center');
66+
});
67+
68+
// ADD THE LABEL TEXT
69+
$img->text($label, $size * 0.8 + $labelOffset, $size * 0.8, function ($font) use ($img, $size, $params) {
70+
$font->file($this->getTextFontPath());
71+
$font->size($size * 0.25);
72+
$font->color(data_get($params, 'labelTextColor') ?: 'FFFFFF');
73+
$font->align('center');
74+
$font->valign('center');
75+
});
76+
}
77+
78+
// trim whitespace
79+
$img->trim('top-left', ['top', 'bottom', 'left', 'right'], 1);
80+
81+
// resize to requested size
82+
$img->resize(null, data_get($params, 'size') ?: 30, function ($constraint) {
83+
$constraint->aspectRatio();
84+
});
85+
86+
return $img;
87+
}
88+
89+
protected function getDefaultOnIcon()
90+
{
91+
return 'fa-circle-regular';
92+
}
93+
94+
protected function getIconFontPath($icon)
95+
{
96+
return FontAwesomeV5Encoder::getFile($icon);
97+
}
98+
99+
protected function getTextFontPath()
100+
{
101+
return base_path('resources/fonts/monofonto.ttf');
102+
}
103+
104+
protected function getUnicodeCharFromIcon($icon)
105+
{
106+
return FontAwesomeV5Encoder::getUnicodeFromIcon($icon);
107+
}
108+
}
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<?php
2+
3+
namespace App\Http\Controllers\API\v2\FontAwesome\v5;
4+
5+
use App\Actions\CreateIconStackImage;
6+
use App\Http\Controllers\Controller as Controller;
7+
use Illuminate\Http\Request;
8+
9+
class IconStackController extends Controller
10+
{
11+
public function show(Request $request)
12+
{
13+
$img = CreateIconStackImage::run($request->all());
14+
return $img->response('png');
15+
}
16+
}

composer.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"laravel/tinker": "^2.7",
1717
"laravel/vapor-cli": "^1.39",
1818
"laravel/vapor-core": "^2.22",
19+
"lorisleiva/laravel-actions": "^2.4",
1920
"spatie/laravel-markdown": "^2.2"
2021
},
2122
"require-dev": {
@@ -67,4 +68,4 @@
6768
"minimum-stability": "dev",
6869
"prefer-stable": true,
6970
"version": "1.22.1"
70-
}
71+
}

composer.lock

Lines changed: 148 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

public/css/app.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -686,6 +686,15 @@ video {
686686
.p-2 {
687687
padding: 0.5rem;
688688
}
689+
.p-16 {
690+
padding: 4rem;
691+
}
692+
.p-10 {
693+
padding: 2.5rem;
694+
}
695+
.p-4 {
696+
padding: 1rem;
697+
}
689698
.px-2 {
690699
padding-left: 0.5rem;
691700
padding-right: 0.5rem;
@@ -706,6 +715,10 @@ video {
706715
padding-top: 0.5rem;
707716
padding-bottom: 0.5rem;
708717
}
718+
.py-0 {
719+
padding-top: 0px;
720+
padding-bottom: 0px;
721+
}
709722
.pt-4 {
710723
padding-top: 1rem;
711724
}
@@ -903,10 +916,18 @@ video {
903916
display: grid;
904917
}
905918

919+
.md\:p-10 {
920+
padding: 2.5rem;
921+
}
922+
906923
.md\:py-10 {
907924
padding-top: 2.5rem;
908925
padding-bottom: 2.5rem;
909926
}
927+
928+
.md\:pb-10 {
929+
padding-bottom: 2.5rem;
930+
}
910931
}
911932

912933
@media (min-width: 1024px) {

resources/views/layouts/app-nav.blade.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
@section('nav')
44
<!-- This example requires Tailwind CSS v2.0+ -->
55
<nav x-data="{ mobileMenuOpen: false }">
6-
<div class="container mx-auto px-4 py-1 md:py-10">
6+
<div class="container mx-auto px-4 py-0 md:pb-10">
77
<div class="relative flex items-center justify-between h-16">
88
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
99
<!-- Mobile menu button-->
@@ -26,7 +26,7 @@ class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hove
2626
<div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
2727
<div class="flex-shrink-0 flex items-center">
2828
<img class="block h-8 w-auto"
29-
src="/api/v1/font-awesome/v5/icon-stack?size=200&icon=fa-map-marker-alt&color=fff&on=fa-map-solid&oncolor=777&iconsize=48&hoffset=66&voffset=20"
29+
src="/v2/font-awesome/v5/icon-stack?size=64&icon=fa-map-marker-alt&color=fff&on=fa-map-solid&oncolor=777&iconsize=25&hoffset=33&voffset=8"
3030
alt="MapMarker.io Logo">
3131
<span class="hidden md:inline-block font-bold text-xl ml-2 text-gray-50">MapMarker.io</span>
3232
</div>

resources/views/layouts/app.blade.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
99
</head>
1010

11-
<body class="antialiased bg-zinc-900">
11+
<body class="antialiased bg-zinc-900 p-2 md:p-10">
1212
@section('nav') @show
1313
<div class="min-h-screen">
1414
@section('content') @show

routes/web.php

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,14 @@
5151
});
5252
});
5353
});
54+
55+
Route::group(['prefix' => 'v2', 'namespace' => 'v2'], function () {
56+
// FONT-AWESOME
57+
Route::group(['prefix' => 'font-awesome', 'namespace' => 'FontAwesome'], function () {
58+
// FONT-AWESOME 5
59+
Route::group(['prefix' => 'v5', 'namespace' => 'v5'], function () {
60+
Route::get('icon-stack', 'IconStackController@show');
61+
});
62+
});
63+
});
5464
});

0 commit comments

Comments
 (0)