Bei mir ist es jetzt ein Jahr her, ein Freund von kam mit nem Raspberry angeschleppt. Ich hatte von Openhab gelesen und hab einfach mal angefangen. Ich hatte beruflich programmiert ( Mit Delphi ) aber der Umstieg zu Java, Html, CSS usw ist mir nicht leicht gefallen. Es gibt zwar alle Informationen im Netz, aber nirgendwo zusammen, alles muß man sich zusammensuchen. Auch unterscheiden sich grundsätzliche Prinzipien zwischen Java und Delphi ( Delphi ist absolut pingelig, was die Typen angeht, bei Java ist es scheinbar vollkommen egal ).violine21 hat geschrieben: ↑13. Feb 2021 19:36 Alles fing 2014 mit der Solarthermie an. Hätte mir einer gesagt, das ich mich irgendwann mit Web-Programmierung
und undokumentierten Schnittstellen herumschlage, ich glaube, ich hätte nur mit dem Kopf geschüttelt.
Mit den kleinen Erfolgen kam die Lust auf mehr.
Noch mal zu deinen SVG-Grafiken :
Hast du in deiner Version von Inkscape unter Datei den Punkt "Kopie speichern " ? Damit kannst du die Größe der SVG-Datei teilweise mehr als halbieren, ohne etwas zu verlieren, wenn du als "Optimiertes SVG" speicherst.
Als Beispiel die komplette Uhr :
Code: Alles auswählen
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"/>
<script src="script/guinnesutils.js"></script>
<style>
.skaleText {
font-family:sans-serif;
font-size:20px;
font-variant-caps:normal;
font-variant-east-asian:normal;
font-variant-ligatures:normal;
font-variant-numeric:normal;
font-weight:bold;
text-align:center;
text-anchor:middle;
vertical-align:middle;
}
.skaleTicks {
fill:none;
stroke-width:5;
stroke:#000;
}
.datetext {
fill:#ffffff;
font-family:sans-serif;
font-size:15px;
font-weight:bold;
text-align:center;
text-anchor:middle;
vertical-align:middle;
line-height:1.25;
stroke-width:.27738;
}
</style>
<script>
const lCenter = innerWidth / 2; // Mittelpunkt in Pixel
const r = lCenter * 0.74; // Radius in Pixeln
const SVGSize = innerWidth / 4.15 + "mm";
function SetSVGSize () {
var lSVG = document.querySelector("#MainSVG");
lSVG.setAttribute("width",SVGSize);
lSVG.setAttribute("height",SVGSize);
}
function UpdateSecond ( aSecond ) {
var Angle = aSecond * 6 + 180;
var lSecondPointer = document.querySelector("#Sekundenzeiger");
lSecondPointer.setAttribute("transform", "rotate(" + Angle + " 100 100)");
}
function UpdateMinute ( aMinute,aSecond ) {
var Angle = aMinute * 6 - 90 + (aSecond * 6/60);
var lMinutePointer = document.querySelector("#Minutenzeiger");
lMinutePointer.setAttribute("transform", "rotate(" + Angle + " 100 100)");
}
function UpdateHour ( aHour,aMinute ) {
var Angle = aHour * 30 - 90 + (aMinute * 0.5);
var lHourPointer = document.querySelector("#Stundenzeiger");
lHourPointer.setAttribute("transform", "rotate(" + Angle + " 100 100)");
}
function UpdateDate ( aDay, aMonth, aYear) {
var HS = "" + aDay + ".";
var DateStr = HS.padStart(3,"0");
HS = "" + aMonth;
DateStr = DateStr + HS.padStart(2,"0") + "." + aYear;
var lDateText = document.querySelector("#dateText");
lDateText.innerHTML = DateStr;
}
function getData () {
var lDate = new Date;
UpdateSecond(lDate.getSeconds());
UpdateMinute(lDate.getMinutes(),lDate.getSeconds());
UpdateHour(lDate.getHours(), lDate.getMinutes());
UpdateDate(lDate.getDate(),lDate.getMonth() + 1,lDate.getFullYear());
}
window.setInterval(getData,1000);
</script>
</head>
<body>
<svg id="MainSVG" width="200mm" height="200mm" version="1.1" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="Stundenzeiger" transform="rotate(0 100 100)">
<circle cx="100" cy="100" r="3.863" style="stroke-linecap:round;stroke-width:1.162;stroke:#000"/>
<path d="m100 95.649v8.6724l59.458-4.3202z" style="stroke-width:.26458px;stroke:#000"/>
</symbol>
<symbol id="Minutenzeiger" transform="rotate(0 100 100)">
<circle cx="100" cy="100" r="3.863" style="fill:none;stroke-linecap:round;stroke-width:1.162;stroke:#000"/>
<path d="m100 95.649v8.6724l69.999-4.3214z" style="stroke-width:.26458px;stroke:#000"/>
</symbol>
<symbol id="Sekundenzeiger" transform="rotate(0 100 100)">
<circle cx="100" cy="100" r="80" style="fill:none;stroke-linecap:round;stroke-width:2.3601;stroke:none"/>
<path d="m100 93.143v86.857z" style="fill:none;stroke-linecap:round;stroke-width:2.3601;stroke:#f00"/>
<rect transform="rotate(90)" x="80.642" y="-102.18" width="12.501" height="4.4166" ry="1.6938" style="fill:#f00;stroke-linecap:round;stroke-width:1.6449;stroke:#f00"/>
<circle cx="100" cy="100" r="2" style="fill:#f00;stroke-linecap:round;stroke-width:2.265;stroke:#f00"/>
</symbol>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset dx="1.5" dy="4" in="SourceAlpha" result="translatedObject"/>
<feGaussianBlur in="translatedObject" result="blurredObject" stdDeviation="1.5"/>
<feBlend in="SourceGraphic" in2="blurredObject"/>
</filter>
</defs>
<g id="Zifferblatt">
<g transform="translate(.26727 -2.94)">
<text x="100" y="170" class="skaleText">6</text>
<text x="70" y="161.96152" class="skaleText">7</text>
<text x="48.038475" y="140" class="skaleText">8</text>
<text x="40" y="110" class="skaleText">9</text>
<text x="48.038475" y="80" class="skaleText">10</text>
<text x="70" y="58.038475" class="skaleText">11</text>
<text x="100" y="50" class="skaleText">12</text>
<text x="130" y="58.038475" class="skaleText">1</text>
<text x="151.96152" y="80" class="skaleText">2</text>
<text x="160" y="110" class="skaleText">3</text>
<text x="151.96152" y="140" class="skaleText">4</text>
<text x="130" y="161.96152" class="skaleText">5</text>
</g>
<g id="ZifferblattOZahlen">
<circle cx="100" cy="100" r="80" class="skaleTicks"/>
<path d="m100 170v10" class="skaleTicks"/>
<path d="m92.16 174.59-0.52264 4.9726" class="skaleTicks"/>
<path d="m84.407 173.36-1.0396 4.8907" class="skaleTicks"/>
<path d="m76.824 171.33-1.5451 4.7553" class="skaleTicks"/>
<path d="m69.495 168.52-2.0337 4.5677" class="skaleTicks"/>
<path d="m65 160.62-5 8.6602" class="skaleTicks"/>
<path d="m55.916 160.68-2.9389 4.0451" class="skaleTicks"/>
<path d="m49.815 155.74-3.3457 3.7157" class="skaleTicks"/>
<path d="m44.264 150.18-3.7157 3.3456" class="skaleTicks"/>
<path d="m39.324 144.08-4.0451 2.9389" class="skaleTicks"/>
<path d="m39.378 135-8.6603 5" class="skaleTicks"/>
<path d="m31.484 130.51-4.5677 2.0337" class="skaleTicks"/>
<path d="m28.671 123.18-4.7553 1.5451" class="skaleTicks"/>
<path d="m26.639 115.59-4.8907 1.0396" class="skaleTicks"/>
<path d="m25.411 107.84-4.9726 0.52265" class="skaleTicks"/>
<path d="m30 100h-10" class="skaleTicks"/>
<path d="m25.411 92.16-4.9726-0.52264" class="skaleTicks"/>
<path d="m26.639 84.407-4.8907-1.0396" class="skaleTicks"/>
<path d="m28.671 76.824-4.7553-1.5451" class="skaleTicks"/>
<path d="m31.484 69.495-4.5677-2.0337" class="skaleTicks"/>
<path d="m39.378 65-8.6603-5" class="skaleTicks"/>
<path d="m39.324 55.916-4.0451-2.9389" class="skaleTicks"/>
<path d="m44.264 49.815-3.7157-3.3457" class="skaleTicks"/>
<path d="m49.815 44.264-3.3457-3.7157" class="skaleTicks"/>
<path d="m55.916 39.324-2.9389-4.0451" class="skaleTicks"/>
<path d="m65 39.378-5-8.6603" class="skaleTicks"/>
<path d="m69.495 31.484-2.0337-4.5677" class="skaleTicks"/>
<path d="m76.824 28.671-1.5451-4.7553" class="skaleTicks"/>
<path d="m84.407 26.639-1.0396-4.8907" class="skaleTicks"/>
<path d="m92.16 25.411-0.52264-4.9726" class="skaleTicks"/>
<path d="m100 30v-10" class="skaleTicks"/>
<path d="m107.84 25.411 0.52265-4.9726" class="skaleTicks"/>
<path d="m115.59 26.639 1.0396-4.8907" class="skaleTicks"/>
<path d="m123.18 28.671 1.5451-4.7553" class="skaleTicks"/>
<path d="m130.51 31.484 2.0337-4.5677" class="skaleTicks"/>
<path d="m135 39.378 5-8.6603" class="skaleTicks"/>
<path d="m144.08 39.324 2.9389-4.0451" class="skaleTicks"/>
<path d="m150.18 44.264 3.3456-3.7157" class="skaleTicks"/>
<path d="m155.74 49.815 3.7157-3.3457" class="skaleTicks"/>
<path d="m160.68 55.916 4.0451-2.9389" class="skaleTicks"/>
<path d="m160.62 65 8.6602-5" class="skaleTicks"/>
<path d="m168.52 69.495 4.5677-2.0337" class="skaleTicks"/>
<path d="m171.33 76.824 4.7553-1.5451" class="skaleTicks"/>
<path d="m173.36 84.407 4.8907-1.0396" class="skaleTicks"/>
<path d="m174.59 92.16 4.9726-0.52264" class="skaleTicks"/>
<path d="m170 100h10" class="skaleTicks"/>
<path d="m174.59 107.84 4.9726 0.52265" class="skaleTicks"/>
<path d="m173.36 115.59 4.8907 1.0396" class="skaleTicks"/>
<path d="m171.33 123.18 4.7553 1.5451" class="skaleTicks"/>
<path d="m168.52 130.51 4.5677 2.0337" class="skaleTicks"/>
<path d="m160.62 135 8.6602 5" class="skaleTicks"/>
<path d="m160.68 144.08 4.0451 2.9389" class="skaleTicks"/>
<path d="m155.74 150.18 3.7157 3.3456" class="skaleTicks"/>
<path d="m150.18 155.74 3.3456 3.7157" class="skaleTicks"/>
<path d="m144.08 160.68 2.9389 4.0451" class="skaleTicks"/>
<path d="m135 160.62 5 8.6602" class="skaleTicks"/>
<path d="m130.51 168.52 2.0337 4.5677" class="skaleTicks"/>
<path d="m123.18 171.33 1.5451 4.7553" class="skaleTicks"/>
<path d="m115.59 173.36 1.0396 4.8907" class="skaleTicks"/>
<path d="m107.84 174.59 0.52265 4.9726" class="skaleTicks"/>
<path d="m100 170v10" class="skaleTicks"/>
</g>
</g>
<g transform="translate(-3.0588 -.23529)">
<rect x="66" y="57" width="80" height="22" ry="3.5" style="stroke-linecap:round;stroke-width:1.0484;stroke:#808080"/>
<text x="70" y="75" class="datetext" xml:space="preserve">
<tspan id="dateText" x="134" y="73.5" >31.01.1899</tspan>
</text>
</g>
<g>
<use filter="url(#f1)" xlink:href="#Stundenzeiger"/>
<use filter="url(#f1)" xlink:href="#Minutenzeiger"/>
<use filter="url(#f1)" xlink:href="#Sekundenzeiger"/>
</g>
</svg>
<script>
SetSVGSize();
</script>
</body>
</html>