mirror of
https://github.com/visioncortex/vtracer.git
synced 2025-12-07 01:26:12 -08:00
299 lines
13 KiB
HTML
299 lines
13 KiB
HTML
<!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>
|
|
<script type="text/javascript">
|
|
(function(c,l,a,r,i,t,y){
|
|
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
|
|
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
|
|
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
|
|
})(window, document, "clarity", "script", "403biw7tra");
|
|
</script>
|
|
<style>
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.uk-dark body,
|
|
.uk-dark .container {
|
|
background: #fff;
|
|
}
|
|
.uk-dark #vc-logo-light {
|
|
display: none;
|
|
}
|
|
.uk-light #vc-logo {
|
|
display: none;
|
|
}
|
|
.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;
|
|
height: max-content;
|
|
}
|
|
#svg, #frame {
|
|
position: absolute;
|
|
width: 100%;
|
|
margin-bottom: 50px;
|
|
}
|
|
#svg > path:hover {
|
|
stroke: #ff0;
|
|
}
|
|
#droptext {
|
|
height: 480px;
|
|
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;
|
|
}
|
|
#drop, #gallery, #options {
|
|
border-top: 1px solid #686868;
|
|
}
|
|
#gallery {
|
|
padding-bottom: 0;
|
|
}
|
|
.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 id="vc-logo" class="uk-logo" href="//www.visioncortex.org"><img style="height: 50px; margin: -30px 0 -25px 0;" src="./assets/visioncortex-logo.svg"></a>
|
|
<a id="vc-logo-light" class="uk-logo" href="//www.visioncortex.org"><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 class="uk-button uk-button-default" href="//github.com/visioncortex/vtracer">GitHub</a>
|
|
|
|
<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="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, Cmd-V to paste 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 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">Photo Credits</a>
|
|
</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="0" max="128" 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="128" 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">(Less 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>
|