Teslalogger Dashboard

MaTi · 16. Januar 2020 um 16:26

Moin, moin,
ich habe auch ein Update gemacht. Leider wird bei mir auch kein Bild angezeigt, welches ich im richtigen Ordner hinterlegt habe.
Viele Grüße aus dem Norden.

Twizy2016 · 16. Januar 2020 um 16:36

Version 1.37.3.0. Jetzt läuft es bei mir
Foto konnte ich auch einfach über den Explorer vom PC aus rein kopieren.

bassmaster · 16. Januar 2020 um 16:55

habt ihr mal probiert Strg + F5? Das ist neu laden ohne Cach.
Hat das Bild irgendwelche Sonderzeichen? Einfach mal umbenennen 123.jpg

MaTi · 16. Januar 2020 um 17:10

es ist doch richtig das Bild in den Ordner teslalogger-web/admin/wallpapers zu kopieren?

Amigolino · 16. Januar 2020 um 17:18

Hallo zusammen, auch bei mir leider Fehlanzeige. Leerer Ordner gleich rote Schrift, dass kein Bild im Ordner ist. mit Bild „m3.jpg“ verschwindet die Meldung aber nur ein schwarzer Hintergrund.

Die CSS-Datei habe ich im share teslalogger-web gefunden, diese liegt im Ordner admin und das Bild im Ordner Wallpapers… Dort liegt auch mein Bild m3.jpg mit 364kb

Habe die Daten (Hardcopys und mein Bild) jetzt mal an Christian per Mail gesendet, weil er vorhin mal danach gefragt hatte.

Smash · 16. Januar 2020 um 17:47

Bei mir dasselbe Problem, kein Wallpaper:

Bin gerade etwas ratlos.

dashboard.css

[code]html {
height: 100%;
}

body {
font-size: 20px;
background-color: black;
font-family: Roboto;

background-size: cover;
background-color: black; 
background-repeat: no-repeat;
background-position: center center;

}

#panel {
position: absolute;
top: 40px;
left: 0;
width: 100%;
text-align: center;
font-size: 80px;
color: #EAEAEA;
}

#headline {
font-size: 60px;
}

#rangeline {
margin-top: 50px;
vertical-align: middle;
color: #D1D1D1;
font-size: 80x;
}

#range {
margin-left:10px;
}

#km {
font-size: 32px;
}

#percent {
font-size: 32px;
}

#car_statusLabel {
margin-top: 50px;
font-size: 60px;
color:#EAEAEA;
text-shadow: 4px 4px 4px #555;
}
#car_status {
margin-top: 10px;
font-size: 48px;
color:#EAEAEA;
}

#error {
color:red;
font-size: 30px;
}

#clock {
position: absolute;
left: 20px;
bottom: 20px;
font-size: 80px;
color: #EAEAEA;
}

@media all and (max-width: 1000px) {
#panel { font-size: 60px; }

#headline { font-size: 48px; }

#rangeline { margin-top: 25px; font-size: 60px;	}

#km { font-size: 24px; }
#percent {font-size: 32px; }

#car_statusLabel { margin-top: 25px; font-size: 30px; 	}

#car_status { font-size: 36px; } 

#batimg	{ height: 50px; }

#clock { font-size: 60px; }

}

@media all and (max-width: 700px) {
#panel { font-size: 40px; }

#headline { font-size: 30px; }

#rangeline { margin-top: 25px; font-size: 40px;	}

#km { font-size: 16px; }
#percent {font-size: 16px; }

#car_statusLabel { margin-top: 25px; font-size: 30px; 	}

#car_status { font-size: 24px; } 

#batimg	{ height: 30px; }

#clock { font-size: 40px; }

}
[/code]

dashboard.php

<!DOCTYPE html>
<?php
require("language.php");
?>
<html lang="<?php echo $json_data["Language"]; ?>">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="apple-mobile-web-app-title" content="Teslalogger Dashboard">
    <link rel="apple-touch-icon" href="img/apple-touch-icon.png">
    <title>Teslalogger Dashboard</title>
	<link rel="stylesheet" href="dashboard.css?v=<?=time()?>" />
	<link rel="stylesheet" href="my_dashboard.css?v=<?=time()?>" />
	<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,300italic' rel='stylesheet' type='text/css'>
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script>

	$( function() {
	<?php 
		$f = scandir("wallpapers");
		if (count($f) > 3)
		{
			echo("$('#error').text('');\n");
			echo("$('body').css('background-image','url(\"wallpapers/" .$f[3]. "\")');\n");
		}
	?>

		GetCurrentData();
		
		setInterval(function()
		{
			GetCurrentData();	
		}
		,60000);
	} );

	function GetCurrentData()
	{
		updateClock();
	
		$.ajax({
		  url: "current_json.php",
		  dataType: "json"
		  }).done(function( jsonData ) {
			$('#ideal_battery_range_km').text(jsonData["ideal_battery_range_km"].toFixed(0));
			$('#battery_level').text(jsonData["battery_level"]);

			if (jsonData["charging"])
			{
				$('#car_statusLabel').text("Wird geladen:");
				$('#car_status').html(jsonData["charger_power"] + " kW / +" + jsonData["charge_energy_added"] + " kWh<br>" + jsonData["charger_voltage"]+"V / " + jsonData["charger_actual_current"]+"A / "+ jsonData["charger_phases"]+"P");
			}
			else if (jsonData["driving"])
			{
				$('#car_statusLabel').text("Fahren:");
				$('#car_status').text(jsonData["speed"] + " km/h / " + jsonData["power"]+"PS");
			}
			else if (jsonData["online"])
			{
				var text = "Online";

				if (jsonData["is_preconditioning"])
					text = text + "<br>Preconditioning";

				if (jsonData["sentry_mode"])
					text = text + "<br>Sentry Mode";

				if (jsonData["battery_heater"])
					text = text + "<br>Battery Heater";

				$('#car_statusLabel').text("Status:");
				$('#car_status').html(text);
			}
			else if (jsonData["sleeping"])
			{
				$('#car_statusLabel').text("Status:");
				$('#car_status').text("Schlafen");
			}
			else
			{
				$('#car_statusLabel').text("Status:");
				$('#car_status').text("Offline");
			}
			
		});
	}

	function updateClock()
	{
		var currentTime = new Date ( );

		var currentHours = currentTime.getHours ( );
		var currentMinutes = currentTime.getMinutes ( );
		var currentSeconds = currentTime.getSeconds ( );
		
		currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
		var currentTimeString = currentHours + ":" + currentMinutes;
		
		$('#clock').text(currentTimeString);
	}

  function BackgroudRun($target, $text)
  {
	  $.ajax($target, {
		data: {
			id: ''
		}
		})
		.then(
		function success(name) {
			alert($text);
		},
		function fail(data, status) {
			alert($text);
		}
	);
  }
  </script>
  </head>
  <body>
  <div id="panel">
	  <div id="headline">Teslalogger Dashboard</div>
	  <div id="rangeline"><img id="batimg" src="img/bat-icon.png">
	  <span id="ideal_battery_range_km" style="">-</span><font id="km">km</font>
	  <span id="battery_level" style="">-</span><font id="percent">%</font>
	  </div>
	  <div id="car_statusLabel">-</div>
	  <div id="car_status">-</div>
	  <div id="error">No wallpapers found in \\raspberry\teslalogger-web\admin\wallpapers</div>
  </div>
  <div id="clock">00:00</div>
  </body>
</html>

bassmaster · 16. Januar 2020 um 18:09

Alle, die einen schwarzes Bild sehen, sollen Mal den Seitenquelltext schicken.
In Chrome ist das : rechte Maustaste und dann Seitenquelltext Anzeigen.

MaTi · 16. Januar 2020 um 18:24

hier der Seitenquelltext:

[code]

Teslalogger Dashboard

-km -%

-

No wallpapers found in \\raspberry\teslalogger-web\admin\wallpapers

00:00

[/code]

bassmaster · 16. Januar 2020 um 18:40

Ok, das habe ich mir schon gedacht:

$(‚body‘).css(‚background-image‘,‚url(„wallpapers/.gitignore“)‘)

Ich werde heute Nacht das beheben.

bassmaster · 16. Januar 2020 um 23:06

Alle die nur schwarz gesehen haben, bitte nochmal updaten.

bassmaster · 16. Januar 2020 um 23:26

Muss mir noch überlegen, ob mir das gefällt. Das ist OpenWeathermap.org. Benutze ich für OpenHab2 schon seit 2 oder 3 Jahre.
openweathermap.org/widgets-constructor

Amigolino · 17. Januar 2020 um 04:21

Leider keine Veränderung bei mir…
Also ich habe noch immer einen schwarzen Hintergrund.

Das Problem scheint diese Zeile zu sein: $(‚body‘).css(‚background-image‘,‚url(„wallpapers/._aaa.jpg“)‘);
Meine Datei hat den Namen aaa.jpg

Hier der neue Quelltext (nach dem Update):

[code]

Teslalogger Dashboard

-km -%

-

No wallpapers found in \\raspberry\teslalogger-web\admin\wallpapers

00:00

[/code]

Nierotter · 17. Januar 2020 um 05:24

Dann benenne deine Datei doch mal um in ._aaa.jpg
Bei mir war das die Lösung

eMobilityJS · 17. Januar 2020 um 05:30

Korrekt, das ist das Problem. Du benutzt macOS, dort werden die ._ Dateien, die meist nur ein paar Steuerzeichen enthalten, erzeugt aber nicht angezeigt. Ich lösche sie immer via ssh Zugang weg um Probleme zu verhinder.
Der Vorschlag mit dem umbenennen funktioniert zwar, kann aber dazu fürhren das, wenn das entsprechende Laufwerk wieder mit dem Mac verbunden ist, das Bild gelöscht wird, weil macOS die Datei aktualisiert.

Ich muss mal schauen, es gab mal Tools die im Hintergrund laufen und verhindern das diese Dateien auf externen Laufwerken erzeugt werden.

bassmaster · 17. Januar 2020 um 06:05

Das wusste ich nicht. Ich such halt nach *.jpg dann baue ich das noch ein.

eMobilityJS · 17. Januar 2020 um 06:18

Für die macOS Benutzer mit dem Problem der ._ Dateien:

Schaut Euch mal die folgende Software an:
[url]http://www.zeroonetwenty.com/blueharvest/[/url]

Sie kostet zwar $15,- tut aber seit Jahren zuverlässig ihren Dienst und verhindert so Problem die durch die Hilfsdateien auftreten können auf allen externen Laufwerken (Netzwerk oder USB).

Ich habe nichts mit dieser Firma zu tun, nutze das Tool aber selber seit vielen Jahren und bin durchaus überzeugt davon.

RetoH · 17. Januar 2020 um 06:35

Ich hab mir das eher so vorgestellt.

bassmaster · 17. Januar 2020 um 08:03

Ja, das gefällt mir super, aber welchen hast du da genommen?

RetoH · 17. Januar 2020 um 08:15

Ganz ehrlich? Photoshop.
Ich hätte mir vorgestellt man nimmt die Daten aus der openweathermap api, zeigt die Temperaturen an und wählt anhand list.weather das passende icon aus. Iconsets gibt es ja zu genüge…
openweathermap.org/forecast5#parameter

Cupra · 17. Januar 2020 um 08:17

In welcher Auflösung braucht man das Bild?