ESP8266 SVG per Variable ändern

International Deutsch
1

Hallo, ich habe mir einen NodeMCU V2 zugelegt und mache gerade meine ersten Schritte.
Ich habe einen Laage Sensor, den ich auch schon einbinden konnte.
Jetzt will ich mir die Laage per Socket im Browser optisch schön darstellen.
Dazu habe ich mir ein SVG erstellt.
Doch danach komme ich gerade nicht weiter.
Ich versuche per Javascript eine Variable aus dem SVG zu ändern..
Nach langem Versuchen habe ich leider immer noch keinen Erfolg.
Vlt kann mir jemand einen Tipp geben..

Hier ein paar Codesnips.. und SRY... schon viel zusammen kopiert und nicht schön gemacht...
Meine Website:

void buildWebsite(){
  buildJavascript();
  webSite="<!DOCTYPE HTML><HTML>\n";
  webSite+="<META name='viewport' content='width=device-width, initial-scale=1'>\n";
  webSite+=javaScript;
  webSite+="<BODY>\n";
  webSite+="
<B>This is the ESP website ...</B>

\n";
  webSite+="Runtime = <A ID='runtime'></A>
\n";
  webSite+="Runtime2 = <A ID='runtime2'></A>
\n";
  webSite+="websockCount = <A ID='websockCount'></A>

\n";
  
  webSite+="<TABLE BORDER=1 WIDTH=200px BGCOLOR='cornsilk' STYLE='border-collapse:collapse;text-align:center'>\n"; 
  webSite+="<TR><TD>Slidervalue1 = <A ID='Sliderval1'></A>
\n";
  webSite+="<TD>Slidervalue2 = <A ID='Sliderval2'></A>
</TR>\n";
  webSite+="<TR><TD><INPUT ID='slider1' TYPE='range' ONCHANGE='Slider1()' STYLE='writing-mode:bt-lr;-webkit-appearance:slider-vertical;' orient='vertical'></TD>\n";
  webSite+="<TD><INPUT ID='slider2' TYPE='range' ONCHANGE='Slider2()' STYLE='writing-mode:bt-lr;-webkit-appearance:slider-vertical;' orient='vertical'></TD></TR>\n";
  webSite+="</TABLE>\n"; 
  
  webSite+="<TABLE BORDER=1 WIDTH=200px BGCOLOR='cornsilk' STYLE='border-collapse:collapse;text-align:center'>\n"; 
  webSite+="<TR><TD>Slidervalue3 = <A ID='Sliderval3'></A>
\n";
  webSite+="<TD>Slidervalue4 = <A ID='Sliderval4'></A>
</TR>\n";
  webSite+="<TR><TD><INPUT ID='slider3' TYPE='range' ONCHANGE='Slider3()' STYLE='writing-mode:bt-lr;-webkit-appearance:slider-vertical;' orient='vertical'></TD>\n";
  //********** ONCHANGE works in IE, use ONINPUT in Firefox and Chrome **********
  webSite+="<TD><INPUT ID='slider4' TYPE='range' ONCHANGE='Slider4()' STYLE='writing-mode:bt-lr;-webkit-appearance:slider-vertical;' orient='vertical'></TD></TR>\n";
  //webSite+="<TR><TD><BUTTON ID='button4' ONCLICK='button4()' STYLE='width:110px;height:40px'></BUTTON></TD></TR>\n";
  webSite+="</TABLE>\n"; 
  webSite+="\n";
  webSite+="\n";
  webSite+="<svg id = 'test' width='400' height='400' xmlns='http://www.w3.org/2000/svg'>";
  webSite+="<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->";
  webSite+="<g>";
  webSite+="<title>background</title>";
  webSite+="<rect fill='#fff' id='canvas_background' height='402' width='402' y='-1' x='-1'/>";
  webSite+="<g display='none' overflow='visible' y='0' x='0' height='100%' width='100%' id='canvasGrid'>";
  webSite+="<rect fill='url(#gridpattern)' stroke-width='0' y='0' x='0' height='100%' width='100%'/>";
  webSite+="</g>";
  webSite+="</g>";
  webSite+="<g>";
  webSite+="<title>Layer 1</title>";
  webSite+="<rect id='svg_8' height='400' width='402' y='0' x='-1' fill-opacity='null' stroke-opacity='null' stroke-width='1.5' stroke='#000' fill='#fff'/>";
  webSite+="<ellipse ry='180' rx='180' id='svg_9' cy='200' cx='200' stroke-width='1.5' stroke='#000' fill='#fff'/>";
  webSite+="<ellipse ry='100' rx='100' id='svg_6' cy='200' cx='200' stroke-width='1.5' stroke='#000' fill='#fff'/>";
  webSite+="<line stroke-linecap='null' stroke-linejoin='null' id='svg_2' y2='414.61667' x2='200.5' y1='0' x1='199.5' fill-opacity='null' stroke-opacity='null' stroke-width='1.5' stroke='#000' fill='none'/>";
  webSite+="<line stroke-linecap='null' stroke-linejoin='null' id='svg_3' y2='199.5' x2='403.5' y1='200.5' x1='-5.5' fill-opacity='null' stroke-opacity='null' stroke-width='1.5' stroke='#000' fill='none'/>";
  webSite+="<line stroke-linecap='null' stroke-linejoin='null' id='svg_4' y2='-15.38333' x2='415.5' y1='422.61665' x1='-22.50001' fill-opacity='null' stroke-opacity='null' stroke-width='1.5' stroke='#000' fill='none'/>";
  webSite+="<line stroke-linecap='null' stroke-linejoin='null' id='svg_5' y2='422.61667' x2='421.5' y1='-27.38333' x1='-28.49999' fill-opacity='null' stroke-opacity='null' stroke-width='1.5' stroke='#000' fill='none'/>";
  webSite+="<ellipse ry='30' rx='30' id='svg_7' cy='200' cx='200' stroke-opacity='null' stroke-width='1.5' stroke='#000' fill='#1A333F'/>";
  webSite+="</g>";
  webSite+="</svg>";
}

Mein Javascript:

void buildJavascript(){
  javaScript="<SCRIPT>\n";
  javaScript+="InitWebSocket();\n";
  javaScript+="function InitWebSocket(){\n";
  javaScript+="  websock=new WebSocket('ws://'+window.location.hostname+':88/');\n";
  javaScript+="  websock.onmessage=function(evt){\n";
  javaScript+="    JSONobj=JSON.parse(evt.data);\n";
  javaScript+="    document.getElementById('runtime').innerHTML=JSONobj.runtime;\n";
  javaScript+="    document.getElementById('runtime2').innerHTML=JSONobj.runtime2;\n";
  javaScript+="    document.getElementById('websockCount').innerHTML=JSONobj.websockCount;\n";
  javaScript+="    document.getElementByID('laageyw').innerHTML=JSONobj.laageyw;\n";
  javaScript+="    document.getElementById('slider1').value=JSONobj.sliderVal1;\n";   
  javaScript+="    document.getElementById('Sliderval1').innerHTML=JSONobj.sliderVal1;\n"; 
  javaScript+="    document.getElementById('slider2').value=JSONobj.sliderVal2;\n";   
  javaScript+="    document.getElementById('Sliderval2').innerHTML=JSONobj.sliderVal2;\n"; 
  javaScript+="    document.getElementById('slider3').value=JSONobj.sliderVal3;\n";   
  javaScript+="    document.getElementById('Sliderval3').innerHTML=JSONobj.sliderVal3;\n"; 
  javaScript+="    document.getElementById('slider4').value=JSONobj.sliderVal4;\n";   
  javaScript+="    document.getElementById('Sliderval4').innerHTML=JSONobj.sliderVal4;\n"; 
  javaScript+="    document.getElementById('button1').innerHTML=JSONobj.LEDonoff1;\n"; 
  javaScript+="  }\n";
  javaScript+="}\n";

  javaScript+="function Slider1(){\n";
  javaScript+="  sliderVal1=document.getElementById('slider1').value;\n";
  javaScript+="  websock.send('sliderVal1='+sliderVal1);\n";
  javaScript+="}\n";

  javaScript+="function Slider2(){\n";
  javaScript+="  sliderVal2=document.getElementById('slider2').value;\n";
  javaScript+="  websock.send('sliderVal2='+sliderVal2);\n";
  javaScript+="}\n";

  javaScript+="function Slider4(){\n";
  javaScript+="  sliderVal4=document.getElementById('slider4').value;\n";
  javaScript+="  websock.send('sliderVal4='+sliderVal4);\n";
  javaScript+="}\n";

  javaScript+="function Slider3(){\n";
  javaScript+="  sliderVal3=document.getElementById('slider3').value;\n";
  javaScript+="  websock.send('sliderVal3='+sliderVal3);\n";
  javaScript+="}\n";
 
  javaScript+="</SCRIPT>\n";
}

socket:

if(millis()>wait001){
    laageyw++;
    websockCount++;
    String LEDswitch1="LED = OFF";
    if(LEDonoff1==true)LEDswitch1="LED = ON";
    JSONtxt="{\"runtime\":\""+millis2time()+"\","+              // JSON requires double quotes
             "\"runtime2\":\""+(String)laageyw+"\","+
             "\"laageyw\":\""+(String)laageyw+"\","+
             "\"websockCount\":\""+(String)websockCount+"\","+
             "\"sliderVal1\":\""+(String)sliderVal1+"\","+
             "\"sliderVal2\":\""+(String)sliderVal2+"\","+
             "\"sliderVal3\":\""+(String)sliderVal3+"\","+
             "\"sliderVal4\":\""+(String)sliderVal4+"\","+
            // "\"LEDmillis\":\""+(String)LEDmillis+"\","+
            "\"LEDonoff1\":\""+LEDswitch1+"\"}";
    webSocket.broadcastTXT(JSONtxt);
    wait001=millis()+websockMillis;
  }

Jetzt würde ich gerne noch bei diesem Element cy & cx dynamisch ändern..

webSite+="<ellipse ry='30' rx='30' id='svg_7' cy='200' cx='200' stroke-opacity='null' stroke-width='1.5' stroke='#000' fill='#1A333F'/>";

Danke für jedes Beispiel das mich weiter bring..

2

Was bezeichnest du als "SVG" ?

3

Hallo,

ich denke Du must da mit sprintf () arbeiten. Schau dir mal unter Beispiele ESP8266 Webserver Advanced Web Server an da wird genau sowas gemacht.

void drawGraph() {
	String out = "";
	char temp[100];
	out += "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"400\" height=\"150\">\n";
 	out += "<rect width=\"400\" height=\"150\" fill=\"rgb(250, 230, 210)\" stroke-width=\"1\" stroke=\"rgb(0, 0, 0)\" />\n";
 	out += "<g stroke=\"black\">\n";
 	int y = rand() % 130;
 	for (int x = 10; x < 390; x+= 10) {
 		int y2 = rand() % 130;
 		sprintf(temp, "<line x1=\"%d\" y1=\"%d\" x2=\"%d\" y2=\"%d\" stroke-width=\"1\" />\n", x, 140 - y, x + 10, 140 - y2);
 		out += temp;
 		y = y2;
 	}
	out += "</g>\n</svg>\n";

	server.send ( 200, "image/svg+xml", out);
}
4

HotSystems:
Was bezeichnest du als "SVG" ?

SVG: Scalable Vector Graphics

5

uxomm:
SVG: Scalable Vector Graphics

Ahh...ok, danke uxomm.

6

Versuch es mal so!

Webseite

webSite+="<span id='ellipse'></span>";

Javascript:

  javaScript+="    document.getElementById('Sliderval4').innerHTML=JSONobj.sliderVal4;\n"; 
  javaScript+="    document.getElementById('ellipse').innerHTML=JSONobj.ellipse;\n"; 
  javaScript+="  }\n";
  javaScript+="}\n";

socket:

int cy, cx;

             "\"sliderVal4\":\""+(String)sliderVal4+"\","+
             "\"ellipse\":\"<ellipse ry='30' rx='30' id='svg_7' cy='"+(String)cy+"' cx='"+(String)cx+"' stroke-opacity='null' stroke-width='1.5' stroke='#000' fill='#1A333F'/>\","+
            "\"LEDonoff1\":\""+LEDswitch1+"\"}";
    webSocket.broadcastTXT(JSONtxt);
    wait001=millis()+websockMillis;
  }

Ungetestet, da ich noch nie mit Websockets und SVG gearbeitet habe.

Rentner:
ich denke Du must da mit sprintf () arbeiten.

Kann er.
Muss er aber nicht.

Gruß Fips