Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sample viewer #2

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Sample viewer #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
abedfb2
Add script that builds an html page showing all sample images.
jskripsky Mar 4, 2014
a77c9b9
Add usage notes.
jskripsky Mar 4, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions Organizer/Sample-Viewer/createHtmlPage.fsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
// Running the following lines in F# interactive will create three files:
// - training.png
// - validation.png
// - digits.html
//
// Note:
// - run "PossibleSolution.fsx" before running this script
// - the file "digits.html.template" is expected to be in the current directory
// - the new files will be created in the current directory

open System.IO
open System.Drawing
open System.Drawing.Imaging

let (width, height) = (28, 28)
let digitsPerRow = 100

let offset idx = (idx % digitsPerRow * width), (idx / digitsPerRow * height)

// Store array of digits as a single PNG image.
let saveAsPng (digits: Observation[]) (fileName: string) =
let len = digits.Length
let rows = (len + digitsPerRow - 1) / digitsPerRow

use bmp = new Bitmap(digitsPerRow * width, rows * height)
let drawDigit digit (x, y) =
let colors = [|0..255|] |> Array.map (fun c -> Color.FromArgb (c, c, c))
let drawPixel i p = bmp.SetPixel (x + i % width, y + i / width, colors.[p])
digit.Pixels |> Array.iteri drawPixel

digits |> Array.iteri (fun i d -> drawDigit d (offset i))
bmp.Save(fileName, ImageFormat.Png)

saveAsPng training "training.png"
saveAsPng validation "validation.png"

// Create HTML page by populating the template.
let populateWithDigits digits name (text: string) =
let items = digits |> Array.mapi (fun i d ->
let (x, y) = offset i
sprintf "<li><div style='background-position: -%dpx -%dpx'></div><label>%d</label></li>" x y d.Label)
text.Replace (sprintf "{%s}" name, String.concat "\n" items)

let html =
File.ReadAllText("digits.html.template")
|> populateWithDigits training "training"
|> populateWithDigits validation "validation"

File.WriteAllText("digits.html", html)
49 changes: 49 additions & 0 deletions Organizer/Sample-Viewer/digits.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
body {
font: 14px Verdana;
}

h2 {
clear: left;
font-weight: normal;
margin-top: 8px;
margin-bottom: 8px;
}

div.container {
height: 40%;
width: 98%;
padding: 8px;
overflow-y: scroll;
background-color: #f0f0f0;
border: 1px solid gray;
margin-bottom: 24px;
}

ol {
padding-left: 0;
margin: 0;
}

li {
display: block;
float: left;
width: 28px;
height: 48px;
margin-bottom: 10px;
border: 1px solid gray;
background: white;
margin-right: -1px;
}

li div {
width: 28px;
height: 28px;
border-bottom: 1px solid gray;
}

li label {
display: block;
text-align: center;
width: 28px;
}

24 changes: 24 additions & 0 deletions Organizer/Sample-Viewer/digits.html.template
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<html>
<head>
<link type="text/css" rel="stylesheet" href="digits.css">
<style>
#Training div { background-image: url('training.png'); }
#Validation div { background-image: url('validation.png'); }
</style>
</head>
<body>
<h2>Training sample</h2>
<div class="container">
<ol id="Training">
{training}
</ol>
</div>

<h2>Validation sample</h2>
<div class="container">
<ol id="Validation">
{validation}
</ol>
</div>
</body>
</html>