Skip to content

Commit

Permalink
Add separate text and border color. Add URL encoding of image label
Browse files Browse the repository at this point in the history
  • Loading branch information
@bezzer
bezzer committed May 31, 2016
1 parent 17cca8a commit 7b42626
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 29 deletions.
31 changes: 20 additions & 11 deletions main.go
View file
Expand Up @@ -20,7 +20,8 @@ type Placeholder struct {
StrokeWidth int
Fill string
FillEnd string
Stroke string
StrokeColor string
TextColor string
Message string
ShowText bool
}
Expand All @@ -33,8 +34,8 @@ const svgTemplate = "<svg width=\"{{.Width}}\" height=\"{{.Height}}\" xmlns=\"ht
"<stop offset=\"100%\" stop-color=\"#{{.FillEnd}}\"/>" +
"</linearGradient>" +
"{{end}}" +
"<rect x=\"{{.StrokeWidth}}\" y=\"{{.StrokeWidth}}\" width=\"{{.BorderWidth}}\" height=\"{{.BorderHeight}}\" style=\"fill:{{if .FillEnd}}url(#lg){{else}}#{{.Fill}}{{end}};stroke:#{{.Stroke}};stroke-width:{{.StrokeWidth}}\"/>" +
"<text x=\"50%\" y=\"50%\" font-size=\"18\" text-anchor=\"middle\" alignment-baseline=\"middle\" font-family=\"monospace, sans-serif\" fill=\"#{{.Stroke}}\">"+
"<rect x=\"{{.StrokeWidth}}\" y=\"{{.StrokeWidth}}\" width=\"{{.BorderWidth}}\" height=\"{{.BorderHeight}}\" style=\"fill:{{if .FillEnd}}url(#lg){{else}}#{{.Fill}}{{end}};stroke:#{{.StrokeColor}};stroke-width:{{.StrokeWidth}}\"/>" +
"<text x=\"50%\" y=\"50%\" font-size=\"18\" text-anchor=\"middle\" alignment-baseline=\"middle\" font-family=\"monospace, sans-serif\" fill=\"#{{.TextColor}}\">"+
"{{if .ShowText}}" +
"{{if .Message}}" +
"{{.Message}}" +
Expand All @@ -52,19 +53,20 @@ const strokeWidth = 2
var templates = template.Must(template.New("svg").Parse(svgTemplate))

// Patern matcher for SVG URLs
var svgPatern = regexp.MustCompile(`\/(\d+)(?:x(\d+))?(?:\/([\da-f]{6}|[\da-f]{3})(?:-([\da-f]{6}|[\da-f]{3}))?)?(?:\/([\da-f]{6}|[\da-f]{3})(?:\/(.+))?)?`)
var svgPatern = regexp.MustCompile(`\/(\d+)(?:x(\d+))?(?:\/([\da-f]{6}|[\da-f]{3})(?:-([\da-f]{6}|[\da-f]{3}))?)?(?:\/([\da-f]{6}|[\da-f]{3})(?:-([\da-f]{6}|[\da-f]{3}))?(?:\/(.+))?)?`)

// Handler for URL paths /svg/WIDTH/HEIGHT/[FILL/STROKE]
func svg(w http.ResponseWriter, r *http.Request) {
var showText bool
var width, height int
var fill, fillEnd, stroke, message string
var fill, fillEnd, strokeColor, textColor, message string

// Lowercase the path to simpify the regex
path := strings.ToLower(r.URL.Path)

fill = "DEDEDE"
stroke = "555555"
textColor = "555555"
strokeColor = "555555"

if svgPatern.MatchString(path) {
// Output SVG
Expand All @@ -89,11 +91,17 @@ func svg(w http.ResponseWriter, r *http.Request) {
}
// Stroke colour
if len(matches[5]) > 0 {
stroke = matches[5]
textColor = matches[5]
}

// Border color
if len(matches[6]) > 0 {
message = matches[6]
strokeColor = matches[6]
} else {
strokeColor = textColor;
}
// Text
if len(matches[7]) > 0 {
message = matches[7]
}
} else {
// Show error image
Expand All @@ -107,7 +115,8 @@ func svg(w http.ResponseWriter, r *http.Request) {
Width: width,
Fill: fill,
FillEnd: fillEnd,
Stroke: stroke,
StrokeColor: strokeColor,
TextColor: textColor,
StrokeWidth: strokeWidth,
Message: message,
ShowText: showText,
Expand All @@ -124,7 +133,7 @@ func svg(w http.ResponseWriter, r *http.Request) {
if rendererr != nil {
log.Printf("Error rendering template: %v", rendererr)
} else {
log.Printf("SVG Placeholder of width %d, height %d, fill %s and stroke %s generated. Message: %s", width, height, fill, stroke, message)
log.Printf("SVG Placeholder of width %d, height %d, fill %s and stroke %s generated. Message: %s", width, height, fill, strokeColor, message)
}
}

Expand Down
15 changes: 15 additions & 0 deletions www/css/site.css
View file
Expand Up @@ -177,6 +177,21 @@ h2 {
font-size: 1rem;
color: #CCC;
}
.code {
color: #333;
background-color: rgba(255,255,255,0.9);
padding: 0.5rem;
border-radius: 2px;
display: block;
width: auto;
}
.code .highlight {
color: #7B1E7A;
font-weight: bold;
}
.code pre {
margin: 0;
}

@media only screen and (max-width:480px) {
.pics-social, .pics-disclaimer {
Expand Down
29 changes: 17 additions & 12 deletions www/index.html
View file
Expand Up @@ -3,7 +3,7 @@
<head>
<title>Placeholder pics</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta name="description" content="Placeholder pics is the lightest way to include placeholder images in your designs" />
<meta name="description" content="Placeholder pics is the lightest way to include placeholder images in your designs using Scalable Vector Graphics (SVG)" />
<!-- Twitter Card data -->
<meta name="twitter:card" content="Placeholder pics, sub kilobyte placeholder images">
<meta name="twitter:site" content="@bezzerbud">
Expand Down Expand Up @@ -34,11 +34,11 @@
<h1><i class="icon-photo"></i> placeholder.pics</h1>
<div class="pics-container pics-info">
<p>
The lightest way to include placeholder images in your designs.
The lightest way to include placeholder pictures in your designs.
All images are lovingly served up as sub-kilobyte, fully optimized
Scalable Vector Graphics (SVGs) in any size or color you need.
You can even add a short description to keep track of what goes
where in your mockups.
Scalable Vector Graphics (SVG) in any size or color you need.
You can even add a short label to keep track of what goes
where in your designs and mockups.
</p>
</div>
</div>
Expand All @@ -64,8 +64,9 @@ <h2>Try it out</h2>
</div>
<div class="pics-input color">
<label for="foreground">Foreground: </label>
<input type="hidden" value="" id="foreground">
<button class="foreground jscolor {valueElement: 'foreground', required:false}"><span class="clear">&#215;</span></button>
<input type="hidden" value="" id="foregroundText">
<input type="hidden" value="" id="foregroundBorder">
<button class="foregroundText jscolor {valueElement: 'foregroundText', required:false}">Text<span class="clear">&#215;</span></button><button class="foregroundBorder jscolor {valueElement: 'foregroundBorder', required:false}">Border<span class="clear">&#215;</span></button>
<span class="optional">Optional</span>
</div>
<div class="pics-input">
Expand All @@ -82,16 +83,20 @@ <h2>Try it out</h2>
<div class="pics-about">
<div class="pics-container">
<h2>Build your own URL</h2>
<p>The <strong>placeholder.pics</strong> service works uses a simple URL format to define the size, colours, and message used for your image.
<p>The <strong>placeholder.pics</strong> service uses a simple URL format to define the size, colours, and label used for your image.
The format that image URLs must follow is:
</p>
<ol>
<li>The URL must start with <strong>/svg/</strong></li>
<li>URLs that specify only a single dimension will be square, for example a request to <strong>/svg/100</strong> will return an svg that is 100 pixels wide and 100 pixels high</li>
<li>Width and height is specified via <strong>WIDTH</strong>x<strong>HEIGHT</strong></li>
<li>Background color can be either a single 3 or 6 character hex color code, or a gradient by defining a start color and stop color with <strong>START</strong>-<strong>STOP</strong></li>
<li>Foreground or text and border color can be a 3 or 6 character hex color code. Background color must be defined in order to set a foreground color</li>
<li>A description can be set as the last part of the URL. Descriptions should be short and take into account the size of the image being requested. Foreground and background color is required when using a description</li>
<li>Width and height is specified via <strong>WIDTH</strong>x<strong>HEIGHT</strong>
<div class="code">/svg/<span class="highlight">100x100</span></div></li>
<li>Background color can be either a single 3 or 6 character hex color code, or a gradient by defining a start color and stop color with <strong>START</strong>-<strong>STOP</strong>
<div class="code">/svg/100x100/<span class="highlight">888888</span></div></li>
<li>Foreground text and border color can be specified as a single 3 or 6 character hex color code or two colors separated by a dash <strong>TEXT</strong>-<strong>BORDER</strong>. Background color must be defined in order to set a foreground color
<div class="code">/svg/100x100/888888/<span class="highlight">EEE</span></div></li>
<li>A label can be defined using the last part of the URL. Labels should be short and take into account the size of the image being requested. Foreground and background colors must be specified first when using a label
<div class="code">/svg/100x100/888888/<span class="highlight">My Label</span></div></li>
</ol>
</div>
</div>
Expand Down
18 changes: 12 additions & 6 deletions www/js/site.js
View file
Expand Up @@ -4,12 +4,14 @@
height: "",
backgroundStart: "",
backgroundEnd: "",
foreground: "",
foregroundText: "",
foregroundBorder: "",
message: ""
};
var defaultBackground = "DEDEDE";
var defaultForeground = "555555";
var baseURL = window.location.href + "svg/";
var location = window.location;
var baseURL = location.protocol + "//" + window.location.hostname + (location.port? ":" + location.port : "") + "/svg/";

// Connect elemensts based on ID
var connectElement = function(elemId) {
Expand Down Expand Up @@ -62,7 +64,8 @@
connectElement("height");
connectElement("backgroundStart");
connectElement("backgroundEnd");
connectElement("foreground");
connectElement("foregroundText");
connectElement("foregroundBorder");
connectElement("message");

// Auto update copyright year
Expand Down Expand Up @@ -91,16 +94,19 @@
}
}

if (data.foreground) {
colors += (data.backgroundStart ? "/" : "/" + defaultBackground + "/") + data.foreground.replace("#", "");
if (data.foregroundText) {
colors += (data.backgroundStart ? "/" : "/" + defaultBackground + "/") + data.foregroundText.replace("#", "");
if (data.foregroundBorder) {
colors += "-" + data.foregroundBorder.replace("#","");
}
}

if (data.message) {
if (!colors) {
colors = "/" + defaultBackground + "/" + defaultForeground;
}

urlMessage = "/" + data.message;
urlMessage = "/" + encodeURIComponent(data.message);
}

// Build the URL
Expand Down

0 comments on commit 7b42626

Please sign in to comment.