Formulare dynamisch erstellen und den jeweiligen Objekt zuroden.

xorg1990 · 16. Feb. 2015

Jo hi, ich habe mal eine Frage was das dynamische erstellen von Formularen betrifft, muss aber dazu weiter ausholen.

Zunächst erst einmal begriff Erklärung:
"Grabber" = Eine Softerware/Hardware Kombination die Funksignale aufzeichnet und visualisiert (eine art audio visualizer)

"window" oder "Grabber-window" = Das eigentliche grabber window, jedes window hat unterschiedlich Eigenschaften (scrollintervall, Frequenz, Signalstärke, fft Zeugs bla bla bla.

Ich möchte jeden Funkamateur die Möglichkeit bieten einen Grabber einzurichten, aber nur über email kontrakt als Registrierung, damit ich ein weinig Kontrolle drüber habe wer sich da registriert... das ist keine Spielerei was ich da Programmiere.

Aktuell ist der Plan so:
es wird ein Formular geben wo man einstellt wie viele windows der jeweilige Owner haben möchte(es gibt verschiedene Anwendungszwecke für die grabber und nicht mehr als 5 wegen widnows der Performance). Passend dazu muss man in selben Formular zu jeden Window ein id eingeben z.B.: "DM4TR_MF_NormalCW". das wäre dann zugleich die id des jeweiligen canvases.

Die ganzen Einstellung speicher ich in 2 json Dateien ab.
Dei general.json beihaltet die Einstellung der Seite, sprich das Design.
schaut so aus:

Code:

{
"MainBgColor" : "#333",
"Callsign" : "DM4TR",
"GrabberID" : "DM4TR_MF",
"Grabbers" : {
		"DM4TR_MF_NormalCW" : {
		"width" : 893,
		"height" : 768,
		"bgcolor" : "#3F3F3F"
			}
		},
"Stream_URL" : "ws://192.168.2.106:3000"

}

Und die Grabber-settings.json, die window Einstellungen.

Code:

{
	"Grabber" : {
		"DM4TR_MF_NormalCW" : {
		"UserRate" : 192000,
		"DSP_Window" : "DSP.HANN",
		"ScrollInter"  : 40,
        	"FFTInputLength" : 16384,
        	"F_min" : 0, 
        	"F_max" : 2000,
        	"db_from" : -120,
        	"db_to" : 0, 
        	"colors" : "['#000000', '#1a0a6a', '#0b03ca', '#402afd', '#745dfa', '#9689f6', '#b3b2f5', '#d2dbf6', '#ffffff']",
        	"brighness" : 1,
        	"contrast": 1
			}
	}
}

Die Grabber id ist zugleich canvas id als auch Objekt key "DM4TR_MF_NormalCW"

Nun habe ich ein Datei namens options.html, die beinhaltet das Formular samt Design.
Und an diesen Punkt komme ich nicht weiter. Ich weiß nicht wie ich die Formulare mit den jeweilig Window, verbinden soll.

Code:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
</head>
<article class="tabs">

	<section id="Window Settings">
		<h2><a href="#Window Settings">Window Settings</a></h2>
		<p>
		<label for=DecibelsForm>Enter Decibels:</label>
		<form id="DecibelsForm">
			From: <input type="number" name="rangeFrom" value=120>dBFs<br>
			To : <input type="number" name="rangeTo" value=0>dBFs
			<br>
			<input type="submit" value="Feuer frei">
		</form>
		<br>
		<form for="FrequencyForm">Visible singal range:</form>
		<form id="FrequencyForm">
			From: <input type="number" name="Fmin" value=150>Hz<br>
		 	To: <input type="number" name="Fmax" value=500>Hz
		    <br>
		    <input type="submit" value="Feuer frei">
		</form>
		<br>
		<label for="ScrollInterForm">WF Scroll Interval:</label>
		<form id="ScrollInterForm">
		    <input type="number" name="ScrollInter" value=200>ms
		    <br>
		    <input type="Submit" value="Feuer frei">
		</form>
		<br>
		<label for"ColorScale"><a href="https://vis4.net/labs/multihue/#colors=lightyellow, orange, deeppink, darkred|steps=9|bez=1|coL=1">Set a colorscale array from Chorma.js</a></label>
		<form id="ColorScale">
			<input type="text" name="colorScale" value="['#000000', '#11061b', '#180d2f', '#1d0f44', '#21115a', '#241172', '#25118a', '#2510a3', '#220ebc', '#1c0ad6', '#0f04f1', '#3c00f2', '#6200d8', '#7700bf', '#8500a7', '#8e008f', '#950078', '#990061', '#9b004a', '#9b0034', '#9b001e', '#990000', '#a52d00', '#b04700', '#bb5e00', '#c57400', '#cf8900', '#d99e00', '#e2b300', '#ebc900', '#f3de00', '#fbf400', '#ffff28', '#ffff4b', '#ffff64', '#ffff7a', '#ffff8f', '#ffffa2', '#ffffb5', '#ffffc8', '#ffffda', '#ffffed', '#ffffff']"> 
			<input type="submit" value="Feuer frei">
		</form>
		<br>
		<form id="ColorAdjust"></form>
		<label for="brighness-slider">Brigthness:</label><br>
		<input type="range" min="-100" max="100" id="brighness-slider" name="brighness-slider" value="0" step="1" onchange="this.form.submit()">
		<br>
		<label for="contrast-slider">Contrast:</label><br>
		<input type="range" min="-50" max="50" id="contrast-slider" name="contrast-slider" value="0" step="1" onchange="this.form.submit()">
		</form>
		</p>
	</section>
	
	<section id="FFT Settings">
		<h2><a href="#FFT Settings">FFT Settings</a></h2>
		<p>
		<label for="FFTlength">FFT input length:</label>
		<form id="FFTlength">
		<select onchange="this.form.submit()">
			 <option value = 32>32</option>
		     <option value = 64>64</option>
		     <option value = 128>128</option>
		     <option value = 256>256</option>
			 <option value = 512>512</option>
		     <option value = 1024>1024</option>
		     <option value = 2048>2048</option>
		     <option value = 4096>4096</option>
		     <option value = 8192>8192</option>
		     <option selected="selected" value = 16384>16384</option>
		     <option value = 32768>32768</option>
		     <option value = 65536>65536</option>
		     <option value = 131072>131072</option>
		     <option value = 262144>262144</option>
		     <option value = 524288>524288</option>
		 </select>
		</form>
		<br>
		<label for="WindowFunction">WindowFunction for actual WF:</label>
		<form id="WindowFunction">
		<select onchange="this.form.submit()">
		 	<option value = "DSP.HAMMING">Hamming</option>
			<option selected="selected" value = "DSP.HANN">Hann</option>
			<option value = "DSP.BARTLETT">Bartlett</option>
		    <option value = "DSP.BARTLETTHANN">BARTLETT-HANN</option>
			<option value = "DSP.BLACKMAN">Blackman</option>
			<option value = "DSP.COSINE">Cosine</option>
			<option value = "DSP.GAUSS">Gaus</option>
			<option value = "DSP.LANCZOS">LANCZOS</option>
			<option value = "DSP.RECTANGULAR">RECTANGULAR</option>
			<option value = "DSP.TRIANGULAR">Triangular</option>
			<option value = "null">Null</option>
		</select>
		</form>
		</p>
	</section>
	
	<section id="tab3">
		<h2><a href="#tab3">Tab 3</a></h2>
		<p>This content appears on tab 3.</p>
	</section>

</article>
</body>
</html>

Meine Hauptseite schaut aktuell so aus:

Code:

<!DOCTYPE html>

<head>
    <title>Playing sound with WebAudio API</title>
     <link rel="stylesheet" href="css/admin.css">
    <script src="lib/audiolib.js"></script>
   <script  src="lib/resampler.js"></script>
    <script src="lib/Player.js"></script>
    <script src="lib/Window.js"></script>
   <script  src="lib/chroma.js"></script>
   <script  src="lib/dsp.js"></script>
   <script  src="lib/WindowFunction.js"></script>
   <script  src="lib/colorScaleHelper.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <script>
   $(document).ready(function(){
	   //init variables
	   var NumOfWindows = 0;
	   var GrabberSettings = null;
	   var Admin = true;
	   var GrabberStack = {};
	   //get setting via json
	   $.getJSON("settings/general.json", function(data){
		//set Mainbackground color  with jquery;
		$("body").css({background: data.MainBgColor});
		//create Player class
		Player = new player(data.GrabberID, data.Stream_URL);
		
	   		$.each(data.Grabbers, function(key, value){
	   			NumOfWindows++;
	   			//erstelle div (frame) um canvas damit Formular angehängt werden kann 
	   			$("<div></div>").attr({
	   				class : key,
	   			}).css({
	   				width: value.width,
	   				height: value.height+600+"px",
	   				background : "red"
	   			}).appendTo("#Analaysers");
	   			//erstelle canvas
	   			$("<canvas></canvas>").attr({
	   				id : key,
	   				width: value.width,
	   				height: value.height,
	   			}).css({
	   				display: "block",
	   				background: value.bgcolor
	   			}).prependTo("."+key);	   			
	   			GrabberStack[key] = {}//add the Grabber-window as  empty object to the GrabberStack object
	   			GrabberStack[key]["Player"] = new player(data.GrabberID, data.Stream_URL),
	   			GrabberStack[key]["Window"] = new Window(key,data.GrabberID)
	   			
	   			//normal_cw_widnow = new Window(key,data.GrabberID);
	   			//console.log(conversationObj.DM4TR_MF_NormalCW.Player.getSampleRate());
	   		});
	   		
	   		$.getJSON("settings/Grabber-settings.json", function(loadedData){
	   			//loop through Grabber(s)
	   			$.each(loadedData.Grabber, function(key, value){
	   				if(key in GrabberStack){
	   					GrabberStack[key]["Resampler"] = new Resampler(GrabberStack[key]["Player"].getSampleRate(),value.UserRate,4096);
	   					GrabberStack[key]["DSP_Window"] = new wf(value.DSP_Window);
	   					//set values on window 
	   					GrabberStack[key]["Window"].setSamplerate(value.UserRate, GrabberStack[key]["Player"].getSampleRate());
	   					GrabberStack[key]["Window"].setFrequency(value.F_min,value.F_max);
	   					GrabberStack[key]["Window"].setFFT_size(value.FFTInputLength);
	   					GrabberStack[key]["Window"].setPowerUnits(value.db_from,value.db_to);
	   					GrabberStack[key]["Window"].setColors(value.colors);
	   					GrabberStack[key]["Window"].setBrighness(value.brighness);
	   					GrabberStack[key]["Window"].setContrast(value.contrast);
	   					GrabberStack[key]["Window"].setScrollIntervall(value.ScrollInter);
	   					//set callbacks
	   					//callback from Payer, get teh date from player and wirte in resampler
	   				  	GrabberStack[key]["Player"].SamplesCallback = function(sampleBuffer){
	   				  		GrabberStack[key]["Resampler"].resample(sampleBuffer);
	                  	}
	   					//callback from resampler, write data in dsp Window Function  
	   				 	GrabberStack[key]["Resampler"].resampleOutput  = function(resampledBuffer){
	   				 		GrabberStack[key]["DSP_Window"].performWindow(resampledBuffer);
	   	                }
	   					//callback from dspWidnowm, wirte date in Grabber widnow last process
	   				 	GrabberStack[key]["DSP_Window"].windowCallback = function(windowSample){
	   				 		GrabberStack[key]["Window"].pushSample(windowSample);
	   	               }
						//not use teh measured decibels
	   		           GrabberStack[key]["Player"].dBCallback = function(dB){
	   		            	//document.getElementById("dB").innerHTML = dB +"    dB";
	   		            	//normal_cw_widnow.setDecibel(dB);
	   		           }
	   				 	
	   				}else{
	   					console.log("Ein Fehler im Grabber Stack")
	   				}
	   			});//inner ajax request  ende
	   		});
	   }).done(function(){
  			//erzeuge Formulre wenn Admin
  			if(Admin == true){
  					$.each(GrabberStack, function(key, value){
  						//appand formular frame
  						$("<div></div>").attr({
  							class : "formFrame"	
  						}).appendTo("."+key);
  						$(".formFrame").load("admin/options.html .tabs")
  						if($(".formFrame").length){
  							console.log("daa")
  						}
  					});//ende each
  					
  					
  					
  					$.getJSON("settings/Grabber-settings.json", function(loadedData){
  			   			//loop through Grabber(s)
  			   			$.each(loadedData.Grabber, function(key, value){
  			   				
  			   			});
  					});
  			}else{
  				alert("kein Admin");
  			}
	   });//first ajax request ende done()
   });//document.ready
    </script>
</head>

<body>

<div id="Analaysers">
	 <canvas id="colorScaleHelper" width="150" height="55" style="display: block; background-color: #d8d5c7 ;"></canvas>
</div>
<table border="1">
<tr>
    <td>WebAudiorate</td>
    <td width="150" id="WebAudiorate"> </td>
    <td>Hz</td>
  </tr>
  <tr>
    <td>Samplerate</td>
    <td width="150" id="SR"> </td>
    <td>Hz</td>
  </tr>
  <tr>
    <td>Width of one FFT-bin</td>
    <td width="150"  id="BinWidth"> </td>
    <td>Hz</td>
  </tr>
  <tr>
    <td>Max freq range:</td>
    <td width="150" id="SigRange"> </td>
    <td>Hz</td>
  </tr>
    <td>FFT window time</td>
    <td width="150" id="FFT_Time"> </td>
    <td>s</td>
  </tr>
  <tr>
    <td>Overlap from scroll interval</td>
    <td width="150" id="OSI"> </td>
    <td>%</td>
  </tr>
</table>
</body>
</html>

Irgendwo gibt es noch ein <canvas id="colorScaleHelper", das muss auch noch mit zu jeden Grabber-Window erstellt werden + die Tabelle und hat auch noch was zu sagen.

Mir erscheint die Vorgangsweise sehr kompliziert, ist das tatsächlich so oder geht das auch schöner?

Wie ich die Formulare mit den window verbinde wüsste ich auch ne Möglichkeit und zwar indem man jeden Formular die class der Grabber id gibt und dann auswerte bei submit von form class sowieso geht in grabberstack Object in key sowieso und löse da Methode sowieso aus...

Ach und php ist nicht, basiert alles auf nodeJS.

Ps: ich weiß nicht warum beim "copy paste" die tabs so verwuscheln, egal einfach durch jsbeautifier jagen. Rechtschreibfehler ignorieren.

tsseh · 17. Feb. 2015

xorg1990 schrieb:
Die ganzen Einstellung speicher ich in 2 json Dateien ab.
Dei general.json beihaltet die Einstellung der Seite, sprich das Design.
Und die Grabber-settings.json, die window Einstellungen.

also hast du 2 json dateien pro user, die über die options.html erzeugt werden und über die hauptseite ausgelesen werden müssen?
du brauchst also eine user verwaltung. login dann session und über diese kannst du bei bedarf deine json daten erzeugen bzw. in der options.html deine session daten aktualisieren.

xorg1990 · 17. Feb. 2015

hesst schrieb:
also hast du 2 json dateien pro user, die über die options.html erzeugt werden

Jo, 2 Dateien pro User, aber erzeugt werden die json Dateien nicht in der Options.html. Die Option html erhält nur die Formulare.
Das erzeugen wie separat gemacht, dazu gibt es dann eine save button auf der Seite.

Wenn ein user meint er braucht 5 Windows, dann lade ich über jquery 5 mal die Options.html in die Hauptseite rein.
Aber ich lade nicht den gesamten Html Content sondern nur ein bestimmtes div in die Hauptseite rein.
...nach dieser Zeile suchen $(".formFrame").load("admin/options.html .tabs")

Nun gilt es aber zu sagen Forumlar x gehört zu window x, Formular y gehört zu window y usw, und der Kreis schlisst sich nicht so richtig für mich.

Normalerweise sagt man bei Formular submit "window1.setContrast(this.value)" Nun gibt es aber kein Objekt widnow1. Ich muss also irgendwie einen andren weg finden wie ich an die setContrast Methode rankomme,natürlich an die setContrast Methode vorm richtigen Grabber-Window.

tsseh · 18. Feb. 2015

xorg1990 schrieb:
Nun gilt es aber zu sagen Forumlar x gehört zu window x, Formular y gehört zu window y usw, und der Kreis schlisst sich nicht so richtig für mich.

ist dein problem rauszufinden, welches formular zu welchem window gehört? prinzipiell hast du die information ja irgendwo, du lädst es ja schließlich 5 mal bei 5 fenstern.
oder ist dein problem diese zuordnung an die richtige stelle zu bringen?
an den server? direkt in js an ein objekt?
bei ersterem einfach in einem hidden value das fenster übertragen.
bei letzterem das fenster-objekt suchen und wert setzen.

xorg1990 · 18. Feb. 2015

hesst schrieb:
ist dein problem rauszufinden, welches formular zu welchem window gehört?

ja genau.

hesst schrieb:
bei letzterem das fenster-objekt suchen und wert setzen.

Dazu musste ich aber erst einmal herzufinden an welches fenster-objekt der submit gesendet werden soll.
Ah mir fällt gerade ein ich kann ja via jquery das onsubmit Attribut so ab ändern das gleich zum richtigen fenster-objekt springe.

die Fenster-Objekte sind ja im var GrabberStack objekt abgespeichert also kann ich hergehen und sagen onsubmit="GrabberStack.fensterObjekt.Resampler.setSamplrate()" z.B..

Sollte doch so gehen oder??

Formulare dynamisch erstellen und den jeweiligen Objekt zuroden.

xorg1990

New member

tsseh

Lounge-Member

xorg1990

New member

tsseh

Lounge-Member

xorg1990

New member