Frage Zustände grafisch darstellen

[DoTTi_L]

Hallo!
Ich habe vor Zustände von Bewegungsmeldern auf dem Grundriss des Hauses darstellen. Ein roter Kreis an der Stelle wo sich der Bewegungsmelder befindet soll anzeigen das sich da was bewegt hat und ein weiser Kreis mit schwarzem Rand soll anzeigen, dass alles OK ist(also nichts bewegt sich).

Ich bekomme die Daten aus einer MySQL Datenbank. Eine "1" für "Da bewegt sich was" und eine "0" für "Da ist alles OK". Zur Zeit werden die Daten mit AJAX als Text dargestellt.

Hab es mit Canvas probiert. Jedoch dauert es viel zulange alles richtig zu positionieren und das Hintergrundbild wird nicht immer geladen. Muss die Seite immer öfters laden und manchmal erscheint es, meistens aber nicht. Und daher meine Frage ob es da was anderes, vielleicht auch einfacheres gibt.

MfG
Alex

 

[DoTTi_L]

Mit jCanvas kann man Elemente leicht verschiebbar machen, das könnte helfen, die Positionen schnell festzulegen.

Danke! Werde es mal mit jCanvas probieren. Kann ich die Koordinaten dann einfach im Quelltext vom Browser rauslesen/kopieren nachdem ich alles positioniert habe?

Hier mal der Code. Hatte zuerst vor die Fläche farbig darzustellen wo sich was bewegen sollte, jedoch finde ich die Idee mit den Kreisen, welche die Bewegungsmelder symbolisieren, besser.

<section id="banner">
        <div class="content">
            <header>
                <h1>Übersicht</h1>
                <p>Live Übersicht</p>
            </header>
                <canvas id="canvas"; width="1100"; height="500"></canvas>
        </div>
    </section>

Im body steht noch *onload="draw();"*, wollte es eigentlich in ein div geben aber das hat nicht funktioniert.

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var img = new Image();
   
    img.src = 'images/Erdgeschoss.PNG';
   
    ctx.beginPath();
    ctx.fillStyle = "red";
    ctx.drawImage(img, 200, 0);
    ctx.fillRect(75, 50, 100, 400);
    ctx.stroke();
  }
}

 

[DoTTi_L]

Vielen Dank für die Links und Tipps!!!!
Habe noch ein Raster hinzugefügt und ein paar Kreise platziert. In den nächsten Tagen die werde ich die Änderung der Farben je nach Zustand des Bewegungsmelders machen/versuchen.