Daten in (fast) Echtzeit auslesen und per HTML darstellen..

jerch · Freitag 9. Dezember 2011, 18:04

Marcos hat geschrieben: Raphaël hab ich mir natürlich angeschaut, aber da gibts auch nur scale, mit dem man mit Werten wie 0.5 oder so skalieren kann, vom Urzustand des Objekts her.
Aber das ganze "mach das immer so groß wie das Fenster proportional" geht nicht, weil das ja in irgendnem Element drin liegt im HTML.
Skalieren geht nur wenn das direkt als SVG ausgeliefert wird.

Das ist nicht ganz richtig. Mal auf die Schnelle zusammengestellt:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
  <script type="text/javascript" src="js/raphael-min.js"></script>
  <style>
    html, body {width:100%;height:100%;padding:0;margin:0}
  </style>
</head>
<body>
<div id="test" style="width:100%;height:100%;background:#ccc"></div>
<script type="text/javascript">
  var paper = Raphael("test", "100%", "100%");
  paper.canvas.setAttribute('viewBox', '0 0 100 100');
  var c = paper.circle(50, 50, 40);
</script>
</body>
</html>

Über die Bindung des SVG-Containers an ein variables HTML-Elternelement lässt sich das ohne JS-Interaktion skalieren. Wichtig hierfür ist das Attribut viewBox, mit dessen Hilfe Dein inneres Koordinatensystem angepasst wird.

Marcos · Samstag 10. Dezember 2011, 14:41

jerch hat geschrieben:
Marcos hat geschrieben: Raphaël hab ich mir natürlich angeschaut, aber da gibts auch nur scale, mit dem man mit Werten wie 0.5 oder so skalieren kann, vom Urzustand des Objekts her.
Aber das ganze "mach das immer so groß wie das Fenster proportional" geht nicht, weil das ja in irgendnem Element drin liegt im HTML.
Skalieren geht nur wenn das direkt als SVG ausgeliefert wird.
Das ist nicht ganz richtig. Mal auf die Schnelle zusammengestellt:
Code: Alles auswählen
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
  <script type="text/javascript" src="js/raphael-min.js"></script>
  <style>
    html, body {width:100%;height:100%;padding:0;margin:0}
  </style>
</head>
<body>
<div id="test" style="width:100%;height:100%;background:#ccc"></div>
<script type="text/javascript">
  var paper = Raphael("test", "100%", "100%");
  paper.canvas.setAttribute('viewBox', '0 0 100 100');
  var c = paper.circle(50, 50, 40);
</script>
</body>
</html>
Über die Bindung des SVG-Containers an ein variables HTML-Elternelement lässt sich das ohne JS-Interaktion skalieren. Wichtig hierfür ist das Attribut viewBox, mit dessen Hilfe Dein inneres Koordinatensystem angepasst wird.

Bei Grafik scheint das ja zu gehen, aber wenn du mal statt paper.circle was mit paper.text machst dann tuts schon wieder nicht mehr.
Scheint an der Art zu liegen wie Raphael Text behandelt?
Vielleicht wenn dieser in Pfade gewandelt werden würde, dann vielleicht, aber so..
Oder übersehe ich da was?

jerch · Samstag 10. Dezember 2011, 16:53

Wenn ich obiges Bsp. um diese Zeile

Code: Alles auswählen

var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!");

erweitere, funktioniert es wie erwartet.

Marcos · Freitag 4. Mai 2012, 08:38

Hierzu wollte ich euch jetzt noch was feines vorstellen, für diese Textanpassung hat jetzt endlich jemand ne JS-Library gemacht:
http://fittextjs.com/

Nur falls jemand per Google auf der Suche nach dem gleichen Problem hier über den Beitrag stolpert.

Zum Rest:
Das hab ich jetzt mit Tornado versucht.
Das Problem war aber das ich die Werte in der Datenbank ständig aus irgendwelchen anderen Werten zusammenrechnen musste, anstatt sie direkt auslesen zu können.
Wir haben uns dann bemüht Zugriff auf die Telefonanlage selber zu bekommen - denn von dort kamen ja die Daten für die Datenbank - aber stattdessen kam die Firma dann selber mit einem entsprechenden Tool an, das die Firma dann gekauft hat.
War also alles für die Katz - aber zum die Recherche zum Thema Comet, SVG etc. war sehr aufschlußreich

jerch · Freitag 4. Mai 2012, 10:42

Für die Katz - naja, die lernt eben nie aus

Bezüglich des Push/Poll-Problem - websockets hats seit Dezember letzten Jahres zu einer RFC Nummer geschafft (rfc6455) und dürfte wohl in den Grundzügen stabil sein. Webkitklons, Firefox und Opera bringen den Standard schon mit (z.T. allerdings noch in veralteter Protokollversion), IE soll mit Version 10 nachziehen. Damit sollte websockets in benutzbare Gefilde vorstossen.