mirror of
https://github.com/visioncortex/vtracer.git
synced 2026-04-08 11:11:38 -07:00
Initial Release
This commit is contained in:
Chris Tsang
283
docs/index.html
Executable file
283
docs/index.html
Executable file
@@ -0,0 +1,283 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>VTracer</title>
|
||||
<link rel="apple-touch-icon" sizes="192x192" href="/assets/apple-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/assets/apple-icon.png">
|
||||
<!-- UIkit CSS -->
|
||||
<link rel="stylesheet" href="./uikit/css/uikit.min.css" />
|
||||
|
||||
<!-- UIkit JS -->
|
||||
<script src="./uikit/js/uikit.min.js"></script>
|
||||
<script src="./uikit/js/uikit-icons.min.js"></script>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.uk-dark body,
|
||||
.uk-dark .container {
|
||||
background: #fff;
|
||||
}
|
||||
.uk-light body,
|
||||
.uk-light .container,
|
||||
.uk-light .uk-modal-dialog {
|
||||
background: #2e2e2e;
|
||||
}
|
||||
@media screen and (prefers-color-scheme: dark) {
|
||||
html {
|
||||
background: #2e2e2e;
|
||||
}
|
||||
}
|
||||
#droptext {
|
||||
background: #00275D;
|
||||
border: 2px dashed #CC972E;
|
||||
}
|
||||
#droptext.hovering {
|
||||
border: 2px dashed #fff;
|
||||
}
|
||||
.uk-navbar-right.uk-padding-small {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
#export,
|
||||
.uk-button-group .uk-button.selected {
|
||||
color: #fff;
|
||||
background: #00275D;
|
||||
border-color: #CC972E;
|
||||
}
|
||||
.uk-dark #export,
|
||||
.uk-dark .uk-button-group .uk-button.selected {
|
||||
border-width: 2px;
|
||||
}
|
||||
.uk-dark #droptext {
|
||||
border-width: 4px;
|
||||
}
|
||||
.uk-button-group > button {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media only screen and (min-width: 1280px) {
|
||||
.uk-button-group > button {
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
}
|
||||
}
|
||||
#canvas-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#svg, #frame {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
#svg > path:hover {
|
||||
stroke: #ff0;
|
||||
}
|
||||
#droptext {
|
||||
height: 100%;
|
||||
color: #CC972E;
|
||||
}
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
background: #00275D;
|
||||
border-color: #CC972E;
|
||||
}
|
||||
input[type=range]::-moz-range-thumb {
|
||||
background: #00275D;
|
||||
border-color: #CC972E;
|
||||
}
|
||||
input[type=range]::-ms-thumb {
|
||||
background: #00275D;
|
||||
border-color: #CC972E;
|
||||
}
|
||||
#gallery, #options {
|
||||
border-top: 1px solid #686868;
|
||||
}
|
||||
#gallery {
|
||||
border-bottom: 1px solid #686868;
|
||||
}
|
||||
.galleryitem {
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
margin: 1px;
|
||||
}
|
||||
.galleryitem:hover {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
border: 2px solid #CC972E;
|
||||
}
|
||||
.galleryitem img {
|
||||
max-height: 120px;
|
||||
}
|
||||
.uk-text-meta {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="uk-dark">
|
||||
<input type="file" id="imageInput" accept="image/*" style="display: none;">
|
||||
<div class="container uk-padding" uk-grid>
|
||||
<div class="uk-width-1-1 uk-navbar-container uk-navbar-transparent" uk-navbar>
|
||||
<div class="uk-navbar-left uk-text-large uk-text-bolder">
|
||||
<a class="uk-logo" href="#"><img style="height: 50px; margin: -30px 0 -25px 0;" src="./assets/visioncortex-logo-light.svg"></a>
|
||||
|
||||
VTracer
|
||||
</div>
|
||||
<div class="uk-navbar-right uk-padding-small">
|
||||
<a id="export" class="uk-button uk-button-primary">Download as SVG</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="progressregion" class="uk-width-1-1 uk-padding-small" style="display: none;">
|
||||
<progress id="progressbar" class="uk-progress uk-align-right" value="0" max="100" style="width: 98%;"></progress>
|
||||
</div>
|
||||
<div class="uk-width-3-4">
|
||||
<div id="gallery" class="uk-padding">
|
||||
<div class="uk-inline" uk-slider>
|
||||
<ul id="galleryslider" class="uk-slider-items uk-child-width-1-6 uk-grid uk-grid-small">
|
||||
|
||||
</ul>
|
||||
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
|
||||
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
|
||||
</div>
|
||||
<a class="uk-align-right uk-text-meta" style="margin:-5px;" uk-toggle="target: #credits-modal">Credits</a>
|
||||
</div>
|
||||
<div id="drop" class="uk-padding uk-flex uk-flex-center">
|
||||
<div id="canvas-container" class="uk-width-1-1" style="height: 480px;">
|
||||
<div id="droptext" class="uk-flex uk-flex-middle uk-flex-center">
|
||||
<p>Drag an image here or <a href="#" id="imageSelect">Select file</a></p>
|
||||
</div>
|
||||
<canvas id="frame"></canvas>
|
||||
<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="options" class="uk-width-1-4 uk-height-1-1 uk-grid-small uk-flex uk-flex-center" uk-grid>
|
||||
|
||||
<div class="uk-width-1-1 uk-flex uk-flex-right">
|
||||
|
||||
</div>
|
||||
|
||||
<p></p>
|
||||
|
||||
<div class="uk-width-1-1 uk-flex uk-flex-right">
|
||||
<div class="uk-text-bold" uk-tooltip="pos:left; title: Algorithm for segmentation and grouping of pixel clusters">
|
||||
Clustering
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-width-1-1 uk-flex uk-flex-right">
|
||||
<div class="uk-button-group">
|
||||
<button id="clustering-binary" class="uk-button uk-button-default" uk-tooltip="Black & White (Binary Image)">B/W</button>
|
||||
<button id="clustering-color" class="selected uk-button uk-button-default" uk-tooltip="True Color Image">Color</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-width-1-1 uk-flex uk-flex-right">
|
||||
<div uk-tooltip="pos: left; title: Discard patches small than X px in size">
|
||||
Filter Speckle <span class="uk-text-meta">(Cleaner)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="filterspecklevalue" class="uk-width-1-6">
|
||||
4
|
||||
</div>
|
||||
<div class="uk-width-5-6">
|
||||
<input id="filterspeckle" class="uk-range" type="range" min="1" max="16" step="1" value="4">
|
||||
</div>
|
||||
|
||||
<div class="clustering-color-options uk-width-1-1 uk-flex uk-flex-right">
|
||||
<div uk-tooltip="pos: left; title: Number of significant bits to use in a RGB channel">
|
||||
Color Precision <span class="uk-text-meta">(More accurate)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="colorprecisionvalue" class="clustering-color-options uk-width-1-6">
|
||||
6
|
||||
</div>
|
||||
<div class="clustering-color-options uk-width-5-6">
|
||||
<input id="colorprecision" class="uk-range" type="range" min="1" max="8" step="1" value="6">
|
||||
</div>
|
||||
|
||||
<div class="clustering-color-options uk-width-1-1 uk-flex uk-flex-right">
|
||||
<div uk-tooltip="pos: left; title: Color difference between gradient layers">
|
||||
Gradient Step <span class="uk-text-meta">(Less layers)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="layerdifferencevalue" class="clustering-color-options uk-width-1-6">
|
||||
16
|
||||
</div>
|
||||
<div class="clustering-color-options uk-width-5-6">
|
||||
<input id="layerdifference" class="uk-range" type="range" min="0" max="255" step="1" value="16">
|
||||
</div>
|
||||
|
||||
<div class="uk-width-1-1 uk-flex uk-flex-right">
|
||||
<div class="uk-text-bold" uk-tooltip="pos: left; title: Algorithm for converting clusters to shapes">
|
||||
Curve Fitting
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-width-1-1 uk-flex uk-flex-right">
|
||||
<div class="uk-button-group">
|
||||
<button id="none" class="uk-button uk-button-default" uk-tooltip="Exact cluster boundary">PIXEL</button>
|
||||
<button id="polygon" class="uk-button uk-button-default" uk-tooltip="Simplify to Polygon">Polygon</button>
|
||||
<button id="spline" class="selected uk-button uk-button-default" uk-tooltip="Smooth and Curve-fit">Spline</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spline-options uk-width-1-1 uk-flex uk-flex-right">
|
||||
<div uk-tooltip="pos: left; title: Minimum Momentary Angle (in degrees) to be considered a corner (to be kept after smoothing)">
|
||||
Corner Threshold <span class="uk-text-meta">(Smoother)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cornervalue" class="spline-options uk-width-1-6">
|
||||
60
|
||||
</div>
|
||||
<div class="spline-options uk-width-5-6">
|
||||
<input id="corner" class="uk-range" type="range" min="0" max="180" step="1" value="60">
|
||||
</div>
|
||||
|
||||
<div class="spline-options uk-width-1-1 uk-flex uk-flex-right">
|
||||
<div uk-tooltip="pos: left; title: Perform Iterative Subdivide Smooth until all segments are shorter than this length">
|
||||
Segment Length <span class="uk-text-meta">(More coarse)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lengthvalue" class="spline-options uk-width-1-6">
|
||||
4
|
||||
</div>
|
||||
<div class="spline-options uk-width-5-6">
|
||||
<input id="length" class="uk-range" type="range" min="3.5" max="10" step="0.5" value="4">
|
||||
</div>
|
||||
|
||||
<div class="spline-options uk-width-1-1 uk-flex uk-flex-right">
|
||||
<div uk-tooltip="pos: left; title: Minimum Angle Displacement (in degrees) to be considered a cutting point between curves">
|
||||
Splice Threshold <span class="uk-text-meta">(More accurate)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="splicevalue" class="spline-options uk-width-1-6">
|
||||
45
|
||||
</div>
|
||||
<div class="spline-options uk-width-5-6">
|
||||
<input id="splice" class="uk-range" type="range" min="0" max="180" step="1" value="45">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="credits-modal" uk-modal>
|
||||
<div id="credits-modal-content" class="uk-modal-dialog uk-modal-body">
|
||||
<p>Image Credits</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.body.classList.remove('uk-dark');
|
||||
document.body.classList.add('uk-light');
|
||||
}
|
||||
</script>
|
||||
<script src="./bootstrap.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user