kopia lustrzana https://github.com/msurguy/SquiggleCam
added CSS back into SVG output, added credits
Maksim
rodzic
4844c7dae3
commit
6084654601
100
src/App.vue
100
src/App.vue
|
|
@ -9,6 +9,43 @@
|
|||
</div>
|
||||
|
||||
<div class="accordion">
|
||||
<div class="option">
|
||||
<input type="checkbox" id="toggle2" class="toggle" />
|
||||
<label class="title" for="toggle2">Paper Settings</label>
|
||||
|
||||
<div class="content">
|
||||
<div class="paper-chooser">
|
||||
<div class="button-group stretch">
|
||||
<label>Color:</label>
|
||||
<button v-bind:class="{ active: settings.black === false }" class="btn" @click="settings.black = false">White</button>
|
||||
<button class="btn" v-bind:class="{ active: settings.black === true }" @click="settings.black = true">Black</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slider">
|
||||
<span class="metric">
|
||||
{{widthInCM}}cm
|
||||
</span>
|
||||
<span class="label">
|
||||
Width
|
||||
</span>
|
||||
<input type="range" min="200" max="500" v-model="settings.width">
|
||||
<div class="output">{{ settings.width }}</div>
|
||||
</div>
|
||||
|
||||
<div class="slider">
|
||||
<span class="metric">
|
||||
{{widthInCM}}cm
|
||||
</span>
|
||||
<span class="label">
|
||||
Height
|
||||
</span>
|
||||
<input type="range" min="200" max="500" v-model="settings.height">
|
||||
<div class="output">{{ settings.height }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option">
|
||||
<input type="checkbox" checked id="toggle1" class="toggle" />
|
||||
<label class="title" for="toggle1">
|
||||
|
|
@ -76,27 +113,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option">
|
||||
<input type="checkbox" id="toggle2" class="toggle" />
|
||||
<label class="title" for="toggle2">Paper Settings</label>
|
||||
<div class="content">
|
||||
<div class="slider">
|
||||
<span class="label">
|
||||
Width
|
||||
</span>
|
||||
<input type="range" min="200" max="500" v-model="settings.width">
|
||||
<div class="output">{{ settings.width }}</div>
|
||||
</div>
|
||||
|
||||
<div class="slider">
|
||||
<span class="label">
|
||||
Height
|
||||
</span>
|
||||
<input type="range" min="200" max="500" v-model="settings.height">
|
||||
<div class="output">{{ settings.height }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option">
|
||||
<input type="checkbox" id="toggle3" class="toggle" />
|
||||
|
|
@ -172,7 +188,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section-title">
|
||||
|
|
@ -184,10 +199,17 @@
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<div class="credits">
|
||||
<p>
|
||||
Project by <a target="_blank" href="http://twitter.com/msurguy">@msurguy</a>
|
||||
<br>Source on <span class="fa fa-github"></span><a href="http://github.com/msurguys/SquiggleCam">Github</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
<main>
|
||||
<div v-if="canvasData" class="svg-container" style="padding: 10px; overflow: visible" ref="container">
|
||||
<svg-chart ref="svgResult" :lines="lines" :width="settings.width" :height="settings.height"></svg-chart>
|
||||
<div v-if="canvasData" class="svg-container" ref="container">
|
||||
<svg-chart ref="svgResult" :black="settings.black" :lines="lines" :width="settings.width" :height="settings.height"></svg-chart>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
|
@ -214,6 +236,7 @@
|
|||
lines: [],
|
||||
inputType: "upload",
|
||||
settings: {
|
||||
black: false,
|
||||
frequency: 150,
|
||||
amplitude: 1,
|
||||
lineCount: 50,
|
||||
|
|
@ -261,7 +284,7 @@
|
|||
'settings.amplitude': function(){
|
||||
this.processImage();
|
||||
},
|
||||
'settings.minBrightess': function(){
|
||||
'settings.minBrightness': function(){
|
||||
this.processImage();
|
||||
},
|
||||
'settings.maxBrightness': function(){
|
||||
|
|
@ -273,11 +296,21 @@
|
|||
'settings.contrast': function(){
|
||||
this.processImage();
|
||||
},
|
||||
'settings.black': function(){
|
||||
this.processImage();
|
||||
},
|
||||
'canvasData': function(){
|
||||
this.processImage();
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
widthInCM(){
|
||||
return Math.round(10*this.settings.width / 38)/10;
|
||||
},
|
||||
heightInCM(){
|
||||
return Math.round(10*this.settings.height / 38)/10;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
downloadSVG(){
|
||||
const svgDoctype = '<?xml version="1.0" standalone="no"?>'
|
||||
|
|
@ -327,6 +360,7 @@
|
|||
const minBrightness = parseInt(config.minBrightness);
|
||||
const maxBrightness = parseInt(config.maxBrightness);
|
||||
const spacing = parseFloat(config.spacing);
|
||||
const black = config.black;
|
||||
|
||||
// Create some defaults for squiggle-point array
|
||||
let squiggleData = [];
|
||||
|
|
@ -339,7 +373,6 @@
|
|||
let currentHorizontalPixelIndex = 0;
|
||||
let contrastFactor = (259 * (contrast + 255)) / (255 * (259 - contrast)); // This was established through experiments
|
||||
let horizontalLineSpacing = Math.floor(height / lineCount); // Number of pixels to advance in vertical direction
|
||||
//console.log(horizontalLineSpacing);
|
||||
|
||||
// Iterate line by line (top line to bottom line) in increments of horizontalLineSpacing
|
||||
//let tmpCounter = 0;
|
||||
|
|
@ -367,8 +400,13 @@
|
|||
b = (0.2125 * (imagePixels.data[4*currentHorizontalPixelIndex] + brightness)) + (0.7154 * (imagePixels.data[4*(currentHorizontalPixelIndex + 1)]+ brightness)) + (0.0721 * (imagePixels.data[4*(currentHorizontalPixelIndex + 2)] + brightness));
|
||||
}
|
||||
|
||||
if (black) {
|
||||
b = Math.min(255-minBrightness,255-b); // Set minimum line curvature to value set by the user
|
||||
z = Math.max(maxBrightness-b,0); // Set maximum line curvature to value set by the user
|
||||
} else {
|
||||
b = Math.max(minBrightness,b); // Set minimum line curvature to value set by the user
|
||||
z = Math.max(maxBrightness-b,0); // Set maximum line curvature to value set by the user
|
||||
}
|
||||
|
||||
// The magic of the script, determines how high / low the squiggle goes
|
||||
r = config.amplitude * z / lineCount;
|
||||
|
|
@ -387,7 +425,6 @@
|
|||
}])
|
||||
.then(result => {
|
||||
this.lines = [];
|
||||
|
||||
result.forEach( line => {
|
||||
this.lines.push({values: line});
|
||||
})
|
||||
|
|
@ -413,22 +450,21 @@
|
|||
this.$refs.webcam.start();
|
||||
},
|
||||
onError(error) {
|
||||
//console.log("On Error Event", error);
|
||||
console.log("On Error Event", error);
|
||||
},
|
||||
onCameras(cameras) {
|
||||
this.webcam.devices = cameras;
|
||||
//console.log("On Cameras Event", cameras);
|
||||
console.log("On Cameras Event", cameras);
|
||||
},
|
||||
onCameraChange(deviceId) {
|
||||
this.webcam.deviceId = deviceId;
|
||||
this.webcam.camera = deviceId;
|
||||
//console.log("On Camera Change Event", deviceId);
|
||||
},
|
||||
onInputSelected(type) {
|
||||
this.inputType = type;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" :view-box.camel="viewbox" :width="width" :height="height">
|
||||
<svg :style="{ background: background}" xmlns="http://www.w3.org/2000/svg" :view-box.camel="viewbox" :width="width" :height="height">
|
||||
<g>
|
||||
<svg-chart-line :d="line" v-for="(line, index) in lines" :key="index"></svg-chart-line>
|
||||
<svg-chart-line :d="line" :stroke="stroke" v-for="(line, index) in lines" :key="index"></svg-chart-line>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -13,11 +13,25 @@
|
|||
components: {
|
||||
svgChartLine
|
||||
},
|
||||
props: ["lines", "options","width","height"],
|
||||
props: ["lines", "black","width","height"],
|
||||
computed: {
|
||||
viewbox() {
|
||||
return `0 0 ${this.width} ${this.height}`;
|
||||
},
|
||||
background(){
|
||||
return this.black ? '#000000' : '#FFFFFF'
|
||||
},
|
||||
stroke(){
|
||||
return {
|
||||
color: this.black ? '#FFFFFF' : '#000000',
|
||||
fill: 'none',
|
||||
width: '2px'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
<template>
|
||||
<path :d="pathD" style="stroke-width: 1.5px; fill: none; stroke: #000000;"></path>
|
||||
<path v-bind:style="{strokeWidth: stroke.width, fill: stroke.fill, stroke: stroke.color}" :d="pathD"></path>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "svgChartLine",
|
||||
props: ["d"],
|
||||
props: ["d", "stroke"],
|
||||
computed: {
|
||||
pathD() {
|
||||
let path = "";
|
||||
|
||||
this.d.values.forEach((point, index) => {
|
||||
if (index === 0) {
|
||||
path += `M ${point[0]},${point[1]}`;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,10 @@ body {
|
|||
color: #d2d2d2;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #298bff;
|
||||
}
|
||||
|
||||
.btn:not(:disabled):not(.disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -173,19 +177,31 @@ aside {
|
|||
background-image: linear-gradient(-90deg, #2e2e2e 0%, #353535 100%);
|
||||
box-shadow: 0 0 5px 0 #0f0f0f;
|
||||
flex: 0 0 270px;
|
||||
transform: translate(0px, 0px);
|
||||
//transform: translate(0px, 0px);
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
|
||||
&.hidden {
|
||||
transform: translate(-300px, 0);
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//height: 100%;
|
||||
//min-height: ;
|
||||
//transition: transform 0.3s ease-in-out;
|
||||
//
|
||||
//&.hidden {
|
||||
// transform: translate(-300px, 0);
|
||||
//}
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
position: -webkit-sticky; /* Safari */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
align-self: flex-start;
|
||||
|
||||
.svg-container {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
|
|
@ -324,11 +340,22 @@ input[type="range"]:focus::-ms-fill-upper {
|
|||
font-size: 12px;
|
||||
color: #d2d2d2;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.metric {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
line-height: 18px;
|
||||
left: 0;
|
||||
font-family: Monaco, monospace;
|
||||
font-size: 12px;
|
||||
color: #d2d2d2;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
margin-top: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.output {
|
||||
margin-top: 28px;
|
||||
|
|
@ -418,9 +445,13 @@ input[type="range"]:focus::-ms-fill-upper {
|
|||
|
||||
.toggle:checked {
|
||||
& + .title + .content {
|
||||
max-height: 500px;
|
||||
max-height: 600px;
|
||||
}
|
||||
& + .title:before {
|
||||
transform: rotate(135deg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.credits {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue