init
Dirk Heilig
commit
f99c568576
|
|
@ -0,0 +1,2 @@
|
|||
dist
|
||||
node_modules/
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
.PHONY: dev-deploy pretty build build-src build-png build-assets default-target clean
|
||||
|
||||
|
||||
|
||||
default-target: build
|
||||
|
||||
clean:
|
||||
rm -rf dist node_modules
|
||||
|
||||
dev-deploy: build
|
||||
rsync -rv dist/* shnbk.de:domains/3dcalc.shnbk.de/htdocs/
|
||||
|
||||
pretty:
|
||||
prettier -w src/**/*.html **/*.md
|
||||
|
||||
dist:
|
||||
mkdir dist
|
||||
|
||||
build: build-assets build-png build-src
|
||||
|
||||
build-src: dist
|
||||
minify -ar src/ -o dist
|
||||
|
||||
build-png: dist
|
||||
pngcrush -q -d dist src/*.png
|
||||
|
||||
build-assets: dist node_modules
|
||||
minify node_modules/bulma/css/bulma.min.css -o dist/bulma.min.css
|
||||
|
||||
node_modules: package.json
|
||||
npm i
|
||||
touch node_modules
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
# Filament 3D Coast Calculator
|
||||
|
||||
Hiermit werden Druckkosten beim C3re berechnet.
|
||||
|
||||
Die Berechnung Basiert auf 4 Festen werten und 2-3 Userwerten.
|
||||
|
||||
Der user gibt ein (Werte aus dem Slicer):
|
||||
|
||||
- Druckdauer
|
||||
- Ob er Pool-Filament nutzen will und wenn ja:
|
||||
- Wie viel in g
|
||||
|
||||
Mit diesen Angaben werden die Kosten berechnet.
|
||||
|
||||
Die Fixwerte sind in der index.html relativ weit oben angegeben.
|
||||
|
||||
Berechnet wird, wenn kein Filament genutzt wird
|
||||
|
||||
```
|
||||
Druckdauer * `pricePerPrintingHourInEuro`
|
||||
```
|
||||
|
||||
Mit Pool-Filament wird berechnet:
|
||||
|
||||
```
|
||||
Druckdauer * `pricePerPrintingHourInEuro` + `pricePerGrammPoolFilamentInEuro` * `poolFilamentInGramm`
|
||||
```
|
||||
|
||||
In beiden Fällen wird dann auf die nächsten vollen wert von `roundUpStep` aufgerundet und dann wird noch identifierAddition dazu addiert.
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"name": "filament_3d_coast_calculater",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "filament_3d_coast_calculater",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"bulma": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/bulma": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.2.tgz",
|
||||
"integrity": "sha512-D7GnDuF6seb6HkcnRMM9E739QpEY9chDzzeFrHMyEns/EXyDJuQ0XA0KxbBl/B2NTsKSoDomW61jFGFaAxhK5A=="
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"bulma": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.2.tgz",
|
||||
"integrity": "sha512-D7GnDuF6seb6HkcnRMM9E739QpEY9chDzzeFrHMyEns/EXyDJuQ0XA0KxbBl/B2NTsKSoDomW61jFGFaAxhK5A=="
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"name": "filament_3d_coast_calculater",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"bulma": "^1.0.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,227 @@
|
|||
<html class="theme-light">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>3D-Druck Kostenrechner</title>
|
||||
<script>
|
||||
// THIS IS CONFIGURATION
|
||||
const pricePerPrintingHourInEuro = 0.3;
|
||||
const pricePerMaterialGrammInEuro = 0.025;
|
||||
const roundUpStep = 0.5;
|
||||
const identifierAddition = 0.03;
|
||||
</script>
|
||||
<link rel="stylesheet" href="./bulma.min.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="block" id="filamentcalc">
|
||||
<style>
|
||||
body {
|
||||
padding: 2em;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.box {
|
||||
border: 0.125em solid #dbdbdb;
|
||||
}
|
||||
#logo {
|
||||
float: right;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.selected {
|
||||
filter: brightness(90%);
|
||||
text-decoration: underline;
|
||||
}
|
||||
.box {
|
||||
margin: 2em auto 0;
|
||||
max-width: 50em;
|
||||
}
|
||||
.b button {
|
||||
float: right;
|
||||
margin-right: 1em;
|
||||
}
|
||||
input {
|
||||
margin-left: 1em;
|
||||
width: 5em;
|
||||
}
|
||||
h2 {
|
||||
margin-bottom: 0.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
</style>
|
||||
<section class="hero">
|
||||
<div class="hero-body">
|
||||
<h1 class="title">3D-Druck Filamentkostenrechner</h1>
|
||||
<p id="logo" class="image is-128x128">
|
||||
<img src="logo.png" />
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<!--todo: frage und antwortbuttons in eine box packen-->
|
||||
<div class="columns box">
|
||||
<div class="column is-full b">
|
||||
Wo kommt dein Filament her?
|
||||
<button class="button" id="pool_filament">Pool Filament</button>
|
||||
|
||||
<button class="button" id="own_filament">
|
||||
Eigenes/Spenden- Filament
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns box step2">
|
||||
<div class="column">
|
||||
<label for="printtime_h">Druckzeit</label>
|
||||
</div>
|
||||
<div class="column">
|
||||
<input
|
||||
id="printtime_h"
|
||||
class="half"
|
||||
type="number"
|
||||
min="0"
|
||||
max="1000"
|
||||
step="1"
|
||||
placeholder="0"
|
||||
/>
|
||||
<label for="printtime_h">h</label>
|
||||
|
||||
<input
|
||||
id="printtime_m"
|
||||
class="half"
|
||||
type="number"
|
||||
min="0"
|
||||
max="5000"
|
||||
step="1"
|
||||
placeholder="0"
|
||||
/>
|
||||
<label for="printtime_m">m</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns box step2 material">
|
||||
<div class="column">
|
||||
<label for="material">Materialmenge</label>
|
||||
</div>
|
||||
<div class="column">
|
||||
<input
|
||||
id="material"
|
||||
type="number"
|
||||
min="0"
|
||||
max="1000"
|
||||
step="1"
|
||||
placeholder="0"
|
||||
/>
|
||||
<label for="material">g</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns box step2">
|
||||
<div class="column"><label for="cost_euro">Kosten in €</label></div>
|
||||
<div class="column">
|
||||
<input id="cost_euro" type="text" aria-disabled="true" disabled />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns box step2">
|
||||
<div class="column is-two">
|
||||
<h2>Wie entsteht der Preis?</h2>
|
||||
<ul>
|
||||
<li>
|
||||
Pro Druckstunde fallen <span id="pricePerHour">...</span> € Kosten
|
||||
für Strom und Verschleiß an.
|
||||
</li>
|
||||
<li>
|
||||
Pool-Filament wird mit <span id="pricePerMaterial">...</span> €
|
||||
pro kg berechnet.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
Beide Kosten werden addiert und auf die nächsten
|
||||
<span id="roundUpLimit">...</span> € aufgerundet.<span
|
||||
id="idtext"
|
||||
>
|
||||
(Zusätzlich wird <span id="idval"></span> € addiert damit wir
|
||||
auf der Abrechnung den Verwendungszweck erkennen können.)</span
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const pool_filament = document.getElementById("pool_filament");
|
||||
const own_filament = document.getElementById("own_filament");
|
||||
const step1 = document.getElementsByClassName("step1");
|
||||
const step2 = document.getElementsByClassName("step2");
|
||||
|
||||
const printtime_h = document.getElementById("printtime_h");
|
||||
const printtime_m = document.getElementById("printtime_m");
|
||||
const material = document.getElementById("material");
|
||||
const cost_euro = document.getElementById("cost_euro");
|
||||
|
||||
let ownFilament;
|
||||
pool_filament.addEventListener("click", function () {
|
||||
for (let i = 0; i < step2.length; i++) {
|
||||
step2[i].style.display = "flex";
|
||||
}
|
||||
ownFilament = false;
|
||||
updateCost();
|
||||
});
|
||||
|
||||
own_filament.addEventListener("click", function () {
|
||||
for (let i = 0; i < step2.length; i++) {
|
||||
const el = step2[i];
|
||||
if (el.classList.contains("material")) {
|
||||
el.style.display = "none";
|
||||
} else {
|
||||
el.style.display = "flex";
|
||||
}
|
||||
}
|
||||
ownFilament = true;
|
||||
updateCost();
|
||||
});
|
||||
printtime_h.addEventListener("input", updateCost);
|
||||
printtime_m.addEventListener("input", updateCost);
|
||||
material.addEventListener("input", updateCost);
|
||||
function updateCost() {
|
||||
pricePerHour.innerHTML = pricePerPrintingHourInEuro.toFixed(2);
|
||||
pricePerMaterial.innerHTML = (
|
||||
pricePerMaterialGrammInEuro * 1000
|
||||
).toFixed(2);
|
||||
roundUpLimit.innerHTML = roundUpStep.toFixed(2);
|
||||
idval.innerHTML = identifierAddition.toFixed(2);
|
||||
if (identifierAddition === 0) {
|
||||
idtext.style.display = "none";
|
||||
} else {
|
||||
idtext.style.display = "inherit";
|
||||
}
|
||||
const printtime =
|
||||
parseInt("0" + printtime_h.value) * 60 +
|
||||
parseInt("0" + printtime_m.value);
|
||||
const materialcost =
|
||||
parseInt("0" + material.value) * pricePerMaterialGrammInEuro;
|
||||
let totalcost = (printtime * pricePerPrintingHourInEuro) / 60;
|
||||
if (!ownFilament) {
|
||||
totalcost += materialcost;
|
||||
}
|
||||
totalcost = Math.ceil(totalcost / roundUpStep) * roundUpStep;
|
||||
if (totalcost > 0) {
|
||||
totalcost += identifierAddition;
|
||||
}
|
||||
console.log(totalcost);
|
||||
cost_euro.value = totalcost.toFixed(2) + " €";
|
||||
|
||||
if (ownFilament) {
|
||||
own_filament.classList.add("selected");
|
||||
pool_filament.classList.remove("selected");
|
||||
} else {
|
||||
pool_filament.classList.add("selected");
|
||||
own_filament.classList.remove("selected");
|
||||
}
|
||||
}
|
||||
updateCost();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Loading…
Reference in New Issue