Gauge plugin - war: Web Plugin und Ajax

[NetFritz]

Hallo
CometVisu SVN 2045
Ich habe mir auf meinen RPi eine JQuery-Ajax Seite erstellt.
Es handelt sich um 7 canavas Gauge Messgeräte die über Ajax aktualisiert werden.
Ich habe diese Seite auf meinen WG in der CV mit dem Web-Plugin eingebunden.
Rufe ich jetzt in der CV die Page auf, so wird diese Ajax-Seite im Web-Plugin meistens nicht dargestellt.
Erst wenn die CV das Web-Plugin refrescht wird die Seite dargestellt.
Eigentlich brauche ich den refresch nicht, die Messwerte werden ja von Ajax aus aktualisiert.
Ich nehme mal an wenn die CV die Web-Plugin Seite geladen hat, ist die Ajax Seite auf den RPi noch nicht voll aufgebaut.
Firebug zeigt beim ersten laden den Status 200 OK an.
Wie bekomme ich die Ajax Seite gleich angezeigt ?
Gruß NetFritz

    <page name="wetter" visible="false">
      <group name="">
         <layout colspan="12"/>
         <web src="http://192.168.2.46/my_wetter/my_wetter.php" width="1530px" height="180px" frameborder="false" refresh="30" ><layout colspan="12"/> </web>
      </group> 

      weiter mit Diagramm und Web-Plugin Wetterwarnung
    </page>

       jQuery(document).ready(function(){
		   init(); // Initalisierung  
		   func_ajax();
           var refreshId = setInterval(function() {
             func_ajax();
           }, 10000);
        });
	  
	    function func_ajax(data) {
     		$.ajax({
             url: "load_value.php", 
             datatype: "json",
             type: "GET",
             success: function(data) { 
			     var value = data.split(":"); 
			     radial1.setValueAnimatedAverage(value[0]);
			     radial1.setValueAnimatedLatest(value[2]);
			     radial2.setValueAnimated (value[3]);
			     radial3.setValueAnimated (value[4]);
			     radial4.setValueAnimated (value[5]);
			     radial5.setValueAnimated (value[6]);
			     radial6.setValueAnimated (value[7]);
			     radial7.setValueAnimated (value[8]);
			}
          });
      }

[Chris M.]

Vorschlag auf die Schnelle (insb. für mich ):
Statt die Krücke über das Web-Widget zu nehmen - warum nicht gleich das ganze als CV-Plugin gestalten und das Ajax gleich direkt einlesen?

Könnte evtl. auch für andere interessant sein

[NetFritz]

Hallo

@Chris M.
Statt die Krücke über das Web-Widget zu nehmen - warum nicht gleich das ganze als CV-Plugin gestalten und das Ajax gleich direkt einlesen?

Das ist aber leider nicht so einfach.

Habe die CV jetzt mal mit Opera und Chrome getestet und da wird sofort die Ajax Seite geladen.
Nur in Firefox 26.0 nicht.

Jetzt bin ich ziemlich ratlos.

Gruß NetFritz

[NetFritz]

Hallo
So jetzt will ich mal ein CV-Plugin schreiben.

Dazu habe eine Kopie von meiner visu_svn in visu_test erstellt.
In der structur_custom.js habe das line-Plugin von Pure eingefügt und umbenannt in gauge.

Da wo <line/> stand habe ich mal Text eingefügt.

In der visu_config.xml habe ich <gauge></gauge> eingefügt.
Wenn ich dann die CV aufrufe habe ich dort den Text stehen.

Ich habe da noch ein paar JavaScript Dateien, wo kann ich die den laden?
In der Index.html wohl nicht, dann werden sie beim nächsten SVN update überschrieben.

Gruß NetFritz

[NetFritz]

Hallo

Ich habe die javascript Dateien
steelseries-min.js und tween-min.js aus
https://github.com/HanSolo/SteelSeries-Canvas
in das Verzeichnis dependencies kopiert.

In der index.html lade ich die beiden javascripts mit
<script src="dependencies/tween-min.js" type="text/javascript"></script>
<script src="dependencies/steelseries-min.js" type="text/javascript"></script>

Rufe ich dann die CV mit Firebug auf so kann ich diese beiden Dateien in Firebug unter Scripts nicht finden.
Ich habe den Eindruck das sie nicht geladen werden.

Die structure_custom.js sieht jetzt so aus.

basicdesign.addCreator('gauge', {
  create: function( element, path, flavour, type ) {
  
          var radial = new steelseries.WindDirection('canvasWindDir1', {
                        size: 150,
                        titleString: "Wind",
                        });
  
    var $e = $(element);
    var ret_val = $('<canvas id="canvasWindDir1" width="201" height="201"></canvas>').data({
      path: path,
      type: 'line'
    });
    basicdesign.setWidgetLayout( ret_val, $e );
    return ret_val;
  }
});

In der Firebug Konsole bekomme ich dadurch wohl folgenden Fehler:
ReferenceError: steelseries is not defined
var radial = new steelseries.WindDirection('canvasWindDir1', {

Was kann das sein?

PS
In der Index.html habe ich noch folgendes eingefügt:
ScriptsToInclude.push( "dependencies/jquery.svg.min.js" );
ScriptsToInclude.push( "dependencies/tween-min.js" );
Aber immer noch der gleiche Fehler.

PS1
Nach Leerung des Anwender Cache werden die Script geladen.
In der Firebug Konsole habe ich jetzt folgenden Fehler in der steelseries-min.js.
TypeError: t is null

...,1),tt.onMotionChanged=function(n){v=n.target._ pos;v>90?(v=180-v,p||this.setRoll...
Gruß NetFritz

[NetFritz]

Hallo
Ja Endlich wird mir das Gauge Instrument in der CV angezeigt.
Voraussetzung ist erst mal das ich ein Click Event auslöse.
Hier meine structure_custom.js

 basicdesign.addCreator('gauge', {
  create: function( element, path, flavour, type ) {  
      var $e = $(element);
$("div").click(function(event){
//   alert("In diesen DIV geklickt!"); 
  
        radial1 = new steelseries.WindDirection('canvasWindDir1', {
                  size: 201,
                  lcdVisible: true,
        });
           radial1.setFrameDesign(steelseries.FrameDesign.BLACK_METAL);
        radial1.setBackgroundColor(steelseries.BackgroundColor.DARK_GRAY);
        radial1.setForegroundType(steelseries.ForegroundType.TYPE1);
        radial1.setPointerColor(steelseries.ColorDef.RED);
        radial1.setPointerTypeAverage(steelseries.PointerType.TYPE1);        
        radial1.setValueAnimatedLatest(0);
        radial1.setValueAnimatedAverage(0);
 });   

    var ret_val = $('<canvas id="canvasWindDir1" width="201" height="201"></canvas>').data({
      path: path,
      type: 'line'
    });
    basicdesign.setWidgetLayout( ret_val, $e );
    return ret_val;
  }
});

Durch das Click-Event wird canavas später aufgerufen,

Was für ein Event müsste man da eintragen das canavas Gauge erst später geladen wird?

Auch möchte ich in der config.xml auch ein paar Einstellungen, wie breite und höhe mitgeben.
Die Gauge-Anzeige soll auch auf eine GrAdr reagieren.
Wie mach ich das?

Gruß NetFritz

[Chris M.]

So jetzt will ich mal ein CV-Plugin schreiben.
[...]
In der structur_custom.js habe das line-Plugin von Pure eingefügt und umbenannt in gauge.
[...]
Ich habe da noch ein paar JavaScript Dateien, wo kann ich die den laden?

Du bist schneller als ich antworten kann

Dein Ansatz entspricht der Erstellung eines Widgets, nicht der eines Plugins.
Der Unterschied ist der, dass ein Widget sehr leichtgewichtig ist, ein Plugin dafür durchaus mehr Ressourcen brauchen darf, wie z.B. weitere JavaScript-Dateien.
=> Hier wäre ein Plugin der richtige (bessere) Weg.

Ein Plugin lässt sich ganz einfach erstellen - mache einen neuen Unterordner im Verzeichnis /plugins/.
Dort kommt in die Dateie structure_plugin.js der direkt einzubindende Code (fast identisch zu dem, den Du inzwischen schon hast).
Außerdem kommen in das Verzeichnis alle weiteren Dateien die Du brauchst (JavaScript-Bibliotheken, Bilder, ...)

Am Schluss muss nur noch in der Config-Datei natürlich das Plugin aktiviert werden.

Was für ein Event müsste man da eintragen das canavas Gauge erst später geladen wird?

Verstehe ich jetzt gerade nicht ganz. Zu welchen Zeitpunkt soll das Event ausgelöst werden?

Evtl. ist ja

$("#pages").triggerHandler("done")

die Antwort, das aufgerufen wird, wenn die Seite fertig gebaut wurde.
(Das lässt sich ganz leicht über bindActionForLoadingFinished(fn) nutzen...)

Auch möchte ich in der config.xml auch ein paar Einstellungen, wie breite und höhe mitgeben.
Die Gauge-Anzeige soll auch auf eine GrAdr reagieren.

Klau einfach mal bei anderen Widgets oder Plugins. Das <line> Widget ist zwar vom Source sehr übersichtlich, aber halt sehr fern von jeglicher Funktion...

[NetFritz]

Hallo
So alles umgebaut auf Plugin.

@Chris M.
$("#pages").triggerHandler("done")
die Antwort, das aufgerufen wird, wenn die Seite fertig gebaut wurde.
(Das lässt sich ganz leicht über bindActionForLoadingFinished(fn) nutzen...)

Das verstehe ich jetzt nicht, bin kein JavaScript Spezi.
Ich habe den Aufruf von "steelseries.WindDirection" in eine click Event Function gelegt.
Wenn ich das nicht mache wird ein Fehler in der Firebug Konsole angezeigt.

TypeError: t is null

...,1),tt.onMotionChanged=function(n){v=n.target._  pos;v>90?(v=180-v,p||this.setRoll...

Dieser Fehler kommt von "steelseries.WindDirection"

Was muss ich den jetzt als Ersatz vom click Event machen?
Wie muss ich den
$("#pages").triggerHandler("done")
mit bindActionForLoadingFinished(fn) nutzen ?

Kleines Beispiel wäre klasse.

Gruß NetFritz

$("div").click(function(event){        
        radial = new steelseries.WindDirection('actor', {
                  size: 201,
                  lcdVisible: true
        });    
});

[NetFritz]

Hallo
Ich habe mal das
https://github.com/HanSolo/SteelSeries-Canvas
auf einer Extra Seite die "demoExtras.html" zum laufen gebracht.
Dort wird

        windDir1 = new steelseries.WindDirection('canvasWindDir1', {
                            size: 201,
                            lcdVisible: true
                            });

So aufgerufen:
<canvas id="canvasWindDir1" width="201" height="201"></canvas>

Wenn ich z.B. dann die id so ändere 'id="canvasWindDir111"' dann wird in der Firebug Konsole der gleiche Fehler angezeigt wie in der CV.

So wird der Fehler wohl daran liegen, das wenn 'new steelseries' aufgerufen wird noch kein HTML Element dynamisch erzeugt ist.
In der structure_plugin.js erzeuge ich das HTML Elent so.

     // create the actor
       var $actor = $('<div><canvas id="actor1"></canvas></div>');                   
       ret_val.append( $actor );

Wie kann ich den das HTML Element vor dem Aufruf von 'new steelseries' erzeugen?
Ich habe es schon mal mit

$( ".clearfix div" ).append( '<div><canvas id="actor"></canvas></div>' );

versucht, aber ".clearfix div" ist wohl nicht richtig?
Die ganze Seite ist dann zerhakt, aber das Gauge Messinstrument wird angezeigt.

Gruß NetFritz

[Chris M.]

Was muss ich den jetzt als Ersatz vom click Event machen?
Wie muss ich den
$("#pages").triggerHandler("done")
mit bindActionForLoadingFinished(fn) nutzen ?

Ich weiß immer noch nicht, was Du genau brauchst. Vermutlich da ich diese Gauges nicht kenne.
=> Schreinb doch mal, wann (im Vergleich zum pauschalen Seitenaufbau) Du welches Event wofür brauchst.

Ein Nutzungsbeispiel für bindActionForLoadingFinished findest Du z.B. in plugins/rsslog/structure_plugin.js Zeile 76. Hier sorgt der Creator des Plugins dafür, dass nach dem die Seite komplett aufgebaut wurde die Funktion refreshRSSlog(rss); aufgerufen wird um sich eben dann mit Inhalt zu befüllen (so ich mich noch richtig erinnere...)

So wird der Fehler wohl daran liegen, das wenn 'new steelseries' aufgerufen wird noch kein HTML Element dynamisch erzeugt ist.
In der structure_plugin.js erzeuge ich das HTML Elent so.

     // create the actor
       var $actor = $('<div><canvas id="actor1"></canvas></div>');                   
       ret_val.append( $actor );

Wie kann ich den das HTML Element vor dem Aufruf von 'new steelseries' erzeugen?
Ich habe es schon mal mit

$( ".clearfix div" ).append( '<div><canvas id="actor"></canvas></div>' );

versucht, aber ".clearfix div" ist wohl nicht richtig?
Die ganze Seite ist dann zerhakt, aber das Gauge Messinstrument wird angezeigt.

Naja, das $( ".clearfix div" ) selektiert alle Elemente wo das vorkommt - also fast überall. Und folglich wird überall ein '<div><canvas id="actor"></canvas></div>' eingefügt...
=> Der Selektor ist viel zu generisch!

Je nach dem, wie das "steelseries" aufgebaut ist, kann es reichen dass das HTML-Element schon erzeugt wurde, was mit dem $('<div><canvas id="actor1"></canvas></div>') passiert.
Oder es muss tatsächlich in den DOM eingehängt werden, was außerhalb des Creators passiert. D.h. dann kommst Du nicht drum rum das bindActionForLoadingFinished zu verwenden.

Wenn der unbedingt über eine ID gehen möchte, dann wird's wohl das bindActionForLoadingFinished werden.
Wenn's auch ein <canvas> direkt sein darf, dann könnte auch ein $actor.find('canvas')[0] tun. (<- ungetestet, rein aus dem Kopf)

[NetFritz]

Hallo
So es läuft bis auf ein paar Kleinigkeiten.
Hier mal einen Auszug aus der
config.xml

        <gauge type="WindDirection" titleString="Wind" size="200" format="%.1f C">
          <layout colspan="2" rowspan="4"/>
          <address transform="DPT:9.001" mode="read" variant="">0/2/1</address>
        </gauge>
        <gauge type="Radial" titleString="Windstaerke" unitString="km/h" minValue="0" maxValue="100" size="200" lcdVisible="true" format="%.1f C">
          <layout colspan="2" rowspan="4"/>
          <address transform="DPT:9.001" mode="read" variant="">0/2/1</address>
        </gauge>

und der structure_plugin.js

$.includeScripts([
  'plugins/gauge/gauge/tween-min.js',
  'plugins/gauge/gauge/steelseries-min.js'
], templateEngine.pluginLoaded );

VisuDesign_Custom.prototype.addCreator("gauge", {
    create: function( page, path, element,type ) {
        var $p = $(page);
        var $e = $(element);
        // create the main structure
        var ret_val = basicdesign.createDefaultWidget( 'gauge', $e, path, type, this.update );

        function uniqid() {
            var newDate = new Date;
            return newDate.getTime();
        }
        var id = "gauge_" + uniqid();
        var radialid = uniqid();
        var radial = {};
        
        // and fill in widget specific data    
        ret_val.data( {
                'type' : $p.attr('type'),
         'titleString' : $p.attr('titleString'),
          'unitString' : $p.attr('unitString'),
            'minValue' : $p.attr('minValue'),
            'maxValue' : $p.attr('maxValue'),
          'lcdVisible' : $p.attr('lcdVisible' ) || 'false',
                'size' : $p.attr('size'),
             'format'  : $p.attr('format')
        } );    
        var data = ret_val.data();
        var titleString = data.titleString;    
        var type = data.type;    
        var size = data.size;
        var unitString = data.unitString;    
        var lcdVisible = data.lcdVisible;    
        var minValue = data.minValue;
        var maxValue = data.maxValue;

        // create the actor
        var $actor = $("<canvas id=" + id + "></canvas>");
        ret_val.append( $actor ); 

        templateEngine.bindActionForLoadingFinished(function() {
            radial[radialid] = new steelseries[type](id, {            
                     titleString : [titleString],
                      unitString : [unitString],
                            size : [size],
                       lcdVisibl : [lcdVisible]
            });            
            if (type == 'Radial') {
               radial[radialid].setFrameDesign(steelseries.FrameDesign.BLACK_METAL);
               radial[radialid].setBackgroundColor(steelseries.BackgroundColor.DARK_GRAY);
               radial[radialid].setForegroundType(steelseries.ForegroundType.TYPE1);
               radial[radialid].setPointerColor(steelseries.ColorDef.RED);
               //radial[radialid].setPointerTypeAverage(steelseries.PointerType.TYPE1);
               radial[radialid].setMinValue(minValue);
               radial[radialid].setMaxValue(maxValue);
               radial[radialid].setValueAnimated(50);
            } else if(type == 'WindDirection'){
                radial[radialid].setFrameDesign(steelseries.FrameDesign.BLACK_METAL);
                radial[radialid].setBackgroundColor(steelseries.BackgroundColor.DARK_GRAY);
                radial[radialid].setForegroundType(steelseries.ForegroundType.TYPE1);
                radial[radialid].setPointerColor(steelseries.ColorDef.RED);
                radial[radialid].setPointerTypeAverage(steelseries.PointerType.TYPE1);
                radial[radialid].setValueAnimatedLatest(80);
                radial[radialid].setValueAnimatedAverage(90);
            }
        });
         return ret_val;    
    }
});

Es hapert noch an der Anzeige der Gruppenadressen in den Messgeräten.
Ich habe auch schon ein paar Stunden gesucht aber noch keine Lösung gefunden.
Ja und auch das DIV ist mit 50% Bildschirmbreite viel zu groß muss wohl noch mit CSS was gemacht werden.

Gruß NetFritz

und ein Bildschirmfoto von der CV

[Chris M.]

Sehr schön!

Check den Code einfach mal als neues Plugin ein, da kann nicht viel kaputt gehen (ist ja alles in einem Verzeichnis gekapselt) und jeder kann mittesten.

Es hapert noch an der Anzeige der Gruppenadressen in den Messgeräten.
Ich habe auch schon ein paar Stunden gesucht aber noch keine Lösung gefunden.

Spontan sehe ich da keine Funktion die beim Update aufgerufen wird und auch nicht wie die GAs aboniert werden. Schau doch mal im info-Widget, das dürfte das ziemlich simpel umsetzen.

Ja und auch das DIV ist mit 50% Bildschirmbreite viel zu groß muss wohl noch mit CSS was gemacht werden.

Hm, funktioniert der ganze Layout Code?
Das sieht man am leichtesten im DOM-Tree, ob dieses Widget so aussieht wie die anderen..

(Um selber mal einen Blick drauf werfen zu können fehlt mir einfach ausreichend Code. Am einfachsten per SVN Repository. Im Zweifel aber auch den Plugin-Ordner ZIPen und verschicken. Ist ja ein Design-Prinzip der Plugins, dass die sich per Ordner austauschen lassen)

[NetFritz]

Habe das Plugin "gauge" ins SVN eingefügt.
Unter "http://wiregatexxx/visu_xxx/plugins/gauge/lib/demoExtras.html"
kann man die Möglichkeiten von SteelSeries-Canvas ansehen.
Unter https://github.com/HanSolo/SteelSeries-Canvas habe nichts zur
License gefunden.
Bitte kontrollieren ob es dort Einschränkungen gibt.

Meine config.xml sieht so aus.
<plugin name="gauge"/>

    <page name="gauge" visible="false">
      <group name="gauge">
        <layout colspan="12"/>
        <gauge type="WindDirection" titleString="Wind" size="200" format="%.1f C">
          <layout colspan="2" />
          <address transform="DPT:9.001" mode="read" variant="">5/0/15</address>
        </gauge>
        <gauge type="Radial" titleString="Windstaerke" unitString="km/h" minValue="0" maxValue="100" size="200" lcdVisible="true" format="%.1f C">
          <layout colspan="2" rowspan="4"/>
          <address transform="DPT:9.001" mode="read" variant="">5/0/15</address>
        </gauge>    
      </group>
    </page>

An der CSS und Anzeige value der Grpadr. hat sich noch nichts getan.
Da brauche ich noch Unterstützung.

Habe soeben den CSS Fehler gefunden.
In der structure_plugin.js jetzt
create: function( element, path, flavour, type ) {
var $e = $(element);
und überall wo ein $p wahr ein $e eingesetzt.

Gruß NetFritz

[Chris M.]

Sehr gut , komme aber vermutlich erst am Wochenende dazu es zu testen

[MicHau]

Nur als Hinweis: Du musst irgendwann auch die visu_config.xsd anpassen, damit das neue Plugin in der XML und im Editor richtig verwendet werden kann.