@Paladin: Langsam tippen ist nach "zwei mal so einen Text ausm Kopf raus tippen" zu viel verlangt
Displaygröße sind 400*240 Pixel.
Die beiden Gauges sind derzeit mit dem Generator hier Unter Nutzung der folgenden Daten erstellt (Spoiler -> Codeblock). Mittelpositionen der Gauges im Bild sind x=41,y=68 und x=278,y=68
Die Icons der Buttons haben derzeit eine Größe von 30x30 (Tanken), 40x40 (< >) oder 50x50 (Settings & Home) Pixel wobei nur die Pfeile einen Rahmen außen rum bekommen haben.
Skalieren lassen sie sich ja im Normalfall ganz gut.
Format der Bilder geht JPG und PNG out of the box - der Rest wird hald umkonvertiert.
Hintergrund immer #000, Hauptfarbe im Regelfall #fff - bei der kleinen Tempanzeige die BMW-M-Farben:
rgba(69,153,254,.70)
rgba(3, 30, 73)
rgba(238,4,5,.70)
Ansonsten sei deiner Kreativität keine Grenze gesetzt
<!doctype html>
<html>
<head>
<title>Gauges as Components</title>
<script src="gauge.min.js"></script>
</head>
// https://canvas-gauges.com/documentation/user-guide/using-as-component
<body>
<!-- Injecting radial gauge -->
<canvas data-type="radial-gauge"
data-width="100"
data-height="100"
data-units="Nm"
data-title="false"
data-borders="false"
data-value="0"
data-min-value="0"
data-max-value="600"
data-major-ticks="0,100,200,300,400,500,600"
data-minor-ticks="4"
data-stroke-ticks="true"
data-highlights='[
{ "from": 0, "to": 600, "color": "rgba(213,72,57,.70)" }
]'
data-color-plate="#000"
data-color-major-ticks="#222"
data-color-minor-ticks="#222"
data-color-title="#fff"
data-color-units="#fff"
data-color-numbers="#fff"
data-value-box="true"
data-font-value="Led"
data-font-numbers-size="30"
data-font-units-size="30"
// needle
data-needle="false"
></canvas>
<canvas data-type="radial-gauge"
data-width="100"
data-height="100"
data-units="kW"
data-title="false"
data-borders="false"
data-value="0"
data-min-value="0"
data-max-value="200"
data-major-ticks="0,50,100,150,200"
data-minor-ticks="5"
data-stroke-ticks="true"
data-highlights='[
{ "from": 0, "to": 200, "color": "rgba(213,72,57,.70)" }
]'
data-color-plate="#000"
data-color-major-ticks="#222"
data-color-minor-ticks="#222"
data-color-title="#fff"
data-color-units="#fff"
data-color-numbers="#fff"
data-value-box="true"
data-font-value="Led"
data-font-numbers-size="30"
data-font-units-size="30"
// needle
data-needle="false"
></canvas>
</body>
</html>
Alles anzeigen