Use factor for gradient also for better rendering

mostly for bed

Author: luc-github

esp8266/data/printer.tpl

@@ -170,6 +170,7 @@ Updaterange('speed');
 Updaterange('flow');
 var pulse=true;
 var initialization_done = false;
+var pos=0;
 function displaytemp(temperature, target,item,factor){
 var displaypicture = "<svg height=\"30px \" width=\"300px \" xmlns=\"http://wwww.w3.org/2000/svg\">\n<linearGradient id=\"gradient\">\n";
 var description = String (temperature) + "/";
@@ -178,8 +179,12 @@ else description += "Off ";
 displaypicture+="<stop class=\"begin\" style=\"stop-color:green;\" offset=\"0%\"/>\n";
 displaypicture+="<stop class=\"middle\" style=\"stop-color:yellow;\" offset=\"100%\"/>\n</linearGradient>\n<linearGradient id=\"gradient2\">\n";
 displaypicture+="<stop class=\"middle\" style=\"stop-color:yellow;\" offset=\"0%\"/>\n<stop class=\"end\" style=\"stop-color:red;\" offset=\"100%\"/>\n";
-displaypicture+="</linearGradient>\n<rect x=\"10\" y=\"4\" width=\"24\" height=\"21\" style=\"fill:url(#gradient)\" />\n";
-displaypicture+="<rect x=\"34\" y=\"4\" width=\"280\" height=\"21\" style=\"fill:url(#gradient2)\" />\n<line x1=\"";
+displaypicture+="</linearGradient>\n<rect x=\"10\" y=\"4\" width=\"";
+displaypicture+= String(Math.round( 24*factor ));
+displaypicture+="\" height=\"21\" style=\"fill:url(#gradient)\" />\n";
+displaypicture+="<rect x=\"";
+displaypicture+= String(10+Math.round( 24*factor ));
+displaypicture+="\" y=\"4\" width=\"280\" height=\"21\" style=\"fill:url(#gradient2)\" />\n<line x1=\"";
 displaypicture+=String(parseFloat(target)*factor+10);
 displaypicture+="\" y1=\"4\" x2=\"";
 displaypicture+=String(parseFloat(target)*factor+10);