[HTML] scala numerica su legenda continua #103

pigreco · 2020-01-08T13:04:44Z

Grazie a questo codice HTML (by Ludovico Frate @ludovico85) preso da qui è possibile aggiungere una legenda continua, come questa:

questo il codice:

<html>
<body>
<body style="background-color:white">
<p style="font-size:14px;font-family:arial;">my title</p>
<p style="font-size:12px;font-family:arial;">lowest value</p>
<canvas id="myCanvas" width="50" height="300">
</canvas>
<p style="font-size:12px;font-family:arial;">highest value</p>
 <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.rect(0, 0, canvas.width, canvas.height);


      // add linear gradient
      var grd = context.createLinearGradient(0,0,0,300, canvas.width, canvas.height);
      // light blue
      grd.addColorStop(0, '#2b83ba');   
      // dark blue
      grd.addColorStop(0.25, '#9dd3a7');
       // dark blue
      grd.addColorStop(0.50, '#ffedaa');
       // dark blue
      grd.addColorStop(0.75, '#f99e59');
       // dark blue
      grd.addColorStop(1, 'red');
      
      context.fillStyle = grd;
      context.fill();
    </script> 
</body>
</html>

vorrei aggiungere, sul lato destro, una scala di valori (es: 0,25,50,75,100)

grazie!

gbvitrano · 2020-01-08T13:15:10Z

Puoi modificare la scala come meglio credi, è molto semplice, la posizione dei colori è data dai numeri 1, 0.90, 0.60 e cosi via, la posizione intermedia è lo .050 il colore lo modifichi cambiamdo il codice.
La posizione va dal basso verso l'alto

gbvitrano · 2020-01-08T13:21:07Z

il colore che vuoi aggiungere tu in questo caso è #001932
se deve stare in alto:

// colore Totò
grd.addColorStop(0, '#001932');

gbvitrano · 2020-01-09T10:00:51Z

`

my title

lowest value

  // add linear gradient
  var grd = context.createLinearGradient(0,0,0,300, canvas.width, canvas.height);
  // light blue
  grd.addColorStop(0, '#2b83ba');   
  // dark blue
  grd.addColorStop(0.25, '#9dd3a7');
   // dark blue
  grd.addColorStop(0.50, '#ffedaa');
   // dark blue
  grd.addColorStop(0.75, '#f99e59');
   // dark blue
  grd.addColorStop(1, 'red');
  
  context.fillStyle = grd;
  context.fill();
</script></td>
  <td width="5" height="320">&nbsp;</td>
  <td width="140" height="320" align="left" valign="top"><div id="0" style="position: relative; top:5px;"><i class="fa fa-angle-left" aria-hidden="true"> - </i>0</div>
  <div id="50" style="position: relative; top:135px;"><i class="fa fa-angle-left" aria-hidden="true"> - </i>50</div>
  <div id="100" style="position: relative; top:260px;"><i class="fa fa-angle-left" aria-hidden="true"> - </i>100</div></td>
</tr>
<tr>
  <td colspan="3"><p style="font-size:12px;font-family:arial;">highest value</p></td>
</tr>
</tbody>

`

gbvitrano · 2020-01-09T10:02:44Z

gbvitrano · 2020-01-09T10:09:36Z

Ho inerito lo script della scala del colore dentro una tabella

visto che non conosco la posizione definitiva dove va inserito l'oggetto, ho posizionato i div con le scritte 0 50 e 100 in una posizione relativa alla tabella, modicando il valore top puoi adattarli alla tua pagina, se necessario

gbvitrano · 2020-01-09T10:11:14Z

il segno < è un font awesome, per cui dei far caricare anche il css esterno
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
già inserito nel codice html :-)

pigreco · 2020-01-09T10:17:38Z

@gbvitrano devo usare lo script nel compositore di stampe di QGIS:

avvio il compositore;
aggiungo una etichetta
incollo lo script
metto la spunta su HTML

gbvitrano · 2020-01-09T10:27:08Z

forse ho capito il problema... invece di usare un'etichetta ho usato aggiungi file html, ma ho fatto caricare il file da un server esterno

gbvitrano · 2020-01-09T10:29:51Z

Come pensavo, non viene caricato il css esterno quindi occore commentare

gbvitrano · 2020-01-09T10:33:06Z

Ecco il nuovo codice, ma le freccine sono più brutte :-)

<body>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
<body style="background-color:white">
   <table width="200" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td colspan="3"><p style="font-size:14px;font-family:arial;">my title</p></td>
    </tr>
    <tr>
      <td colspan="3"><p style="font-size:12px;font-family:arial;">lowest value</p></td>
    </tr>
    <tr align="center">
      <td width="60" height="320"><canvas id="myCanvas" width="50" height="300">
  </canvas>
  <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.rect(0, 0, canvas.width, canvas.height);
      // add linear gradient
      var grd = context.createLinearGradient(0,0,0,300, canvas.width, canvas.height);
      // light blue
      grd.addColorStop(0, '#2b83ba');   
      // dark blue
      grd.addColorStop(0.25, '#9dd3a7');
       // dark blue
      grd.addColorStop(0.50, '#ffedaa');
       // dark blue
      grd.addColorStop(0.75, '#f99e59');
       // dark blue
      grd.addColorStop(1, 'red');
      context.fillStyle = grd;
      context.fill();
    </script></td>
      <td width="5" height="320">&nbsp;</td>
      <td width="140" height="320" align="left" valign="top"><div id="0" style="position: relative; top:5px;"><-0</div>
      <div id="50" style="position: relative; top:135px;"><- 50</div>
      <div id="100" style="position: relative; top:260px;"><-100</div></td>
    </tr>
    <tr>
      <td colspan="3"><p style="font-size:12px;font-family:arial;">highest value</p></td>
    </tr>
    </tbody>
</table>
</body>
</html>```

ludovico85 · 2020-01-09T10:34:33Z

Si bisogna utilizzare l'etichetta e spuntare visualizza come html e non aggiungere direttamente l'html.

gbvitrano · 2020-01-09T10:39:09Z

etichetta, visualizza come html ed ho elimato il css esterno :-)

pigreco · 2020-01-09T11:00:38Z

@gbvitrano e @ludovico85

chissà se è possibile fare una legenda continua ma orizzontale!!!

pigreco · 2020-01-09T12:43:07Z

potrei girarla, ma il testo no!!!

pigreco · 2020-01-09T13:41:14Z

questo codice

<body>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
<body style="background-color:white">
   <table width="200" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td colspan="3"><p style="font-size:20px;font-family:arial;">Grazie Gianni
    <tr>
      <td colspan="3"><p style="font-size:15px;font-family:arial;">cose che pampine</p></td>
    </tr>
    <tr align="center">
      <td width="50" height="300"><canvas id="myCanvas" width="50" height="300">
  </canvas>
  <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.rect(0, 0, canvas.width, canvas.height);
      // add linear gradient
      var grd = context.createLinearGradient(0,0,0,300, canvas.width, canvas.height);
      // light blue
      grd.addColorStop(0, '#2b83ba');   
      // dark blue
      grd.addColorStop(0.25, '#9dd3a7');
       // dark blue
      grd.addColorStop(0.50, '#ffedaa');
       // dark blue
      grd.addColorStop(0.75, '#f99e59');
       // dark blue
      grd.addColorStop(1, 'red');
      context.fillStyle = grd;
      context.fill();
    </script></td>
      <td width="0" height="320">&nbsp;</td>
      <td width="140" height="300" align="left" valign="top">
	  <div id="0" style="position: relative; top:0px;">→ 0</div>
	  <div id="25" style="position: relative; top:55px;">→ 25</div>
      <div id="50" style="position: relative; top:110px;">→ 50</div>
	  <div id="75" style="position: relative; top:165px;">→ 75</div>
      <div id="100" style="position: relative; top:220px;">→ 100</div></td>
    </tr>
    <tr>
      <td colspan="3"><p style="font-size:16px;font-family:arial;">Grazie Ludovico</p></td>
    </tr>
    </tbody>
</table>
</body>
</html>

genera questo

HTML VIEWER
https://jsonformatter.org/html-viewer/64367a

ludovico85 · 2020-01-09T13:49:41Z

Orizzontale!
https://jsfiddle.net/ludovico85/qk28fnu7/

<table width="200" border="0" cellspacing="0" cellpadding="0">
    <tr>
	<td colspan = "5" align="center" style="position: relative; left:0px; text-align:center">my legend YlGn</td>
	</tr>
	<tr>
	<td colspan = "2" align="center" width="25%" style="position: relative; left:0px; text-align:center">lowest<br>value</td>
	<td align="left" width="50%" style="position: relative; left:0px;">&nbsp;</td>
    <td colspan = "2" align="center" width="25%" style="position: relative; left:0px; text-align:center">highest<br>value</td>
	</tr>
	<tr align="center">
	  <td width="5" height="10">&nbsp;</td>
	  <td  colspan = "3" width="320" height="60"><canvas id="myCanvas1" width="300" height="50">
  </canvas>
  <script>
      var canvas = document.getElementById('myCanvas1');
      var context = canvas.getContext('2d');
      context.rect(0, 0, canvas.width, canvas.height);
      // add linear gradient
      var grd = context.createLinearGradient(0,0,300,0, canvas.width, canvas.height);
      // light blue
      grd.addColorStop(0, '#ffffcc');   
      // dark blue
      grd.addColorStop(0.25, '#c2e699');
       // dark blue
      grd.addColorStop(0.50, '#78c679');
       // dark blue
      grd.addColorStop(0.75, '#31a354');
       // dark blue
      grd.addColorStop(1, '#006837');
      context.fillStyle = grd;
      context.fill();
    </script>
	</td>
	<td width="5" height="10">&nbsp;</td>
    </tr>
	<tr>
	<td colspan = "2" align="center" width="25%" style="position: relative; left:0px;text-align:center">0</td>
    <td align="center" width="50%">50</td>
    <td colspan = "2" align="center" width="25%" style="position: relative; left:0px;text-align:center">100</td>
	</tr>
</table>

ludovico85 · 2020-01-09T14:05:28Z

Orizzontale ma un po' più pulito e con qualche miglioria

https://jsfiddle.net/ludovico85/qk28fnu7/15/

<html>
<style>
body {
  font-size: 12px;
  font-family: arial;
}
</style>
<table width="200" border="0" cellspacing="0" cellpadding="0">
  <tr>
	  <td colspan = "5" align="center" style="position: relative; left:0px; text-align:center">
    <h3>my legend YlGn</h3>
    </td>
  </tr>
	<tr>
	  <td colspan = "2" align="center" width="25%" style="position: relative; left:0px; text-align:center">
      lowest<br>value<br>&#8681
    </td>
	  <td align="left" width="50%" style="position: relative; left:0px;">&nbsp;</td>
    <td colspan = "2" align="center" width="25%" style="position: relative; left:0px; text-align:center">
    highest<br>value<br>&#8681
    </td>
	</tr>
	<tr align="center">
	  <td width="0%" height="0%">&nbsp;</td>
	  <td  colspan = "3" width="320" height="60">
    <canvas id="myCanvas1" width="300" height="50"></canvas>
        <script>
      		var canvas = document.getElementById('myCanvas1');
      		var context = canvas.getContext('2d');
      		context.rect(0, 0, canvas.width, canvas.height);
      		// add linear gradient
      		var grd = context.createLinearGradient(0,0,300,0, canvas.width, canvas.height);
      		// light yellow
      		grd.addColorStop(0, '#ffffcc');   
      		// light green
      		grd.addColorStop(0.25, '#c2e699');
       		// green
      		grd.addColorStop(0.50, '#78c679');
       		// green
      		grd.addColorStop(0.75, '#31a354');
       		// dark green
      		grd.addColorStop(1, '#006837');
      		context.fillStyle = grd;
      		context.fill();
    		</script>
	  </td>
	  <td width="0%" height="0%">&nbsp;</td>
  </tr>
	<tr>
	  <td colspan = "2" align="center" width="25%" style="position: relative; left:0px;text-align:center">0</td>
    <td align="center" width="50%">50</td>
    <td colspan = "2" align="center" width="25%" style="position: relative; left:0px;text-align:center">100</td>
	</tr>
</table>
</body>
</html>

pigreco · 2020-01-09T14:11:22Z

Ciao @ludovico85 (grazie)
il codice di sopra si comporta diversamente in QGIS, (il primo è QGIS)

ludovico85 · 2020-01-09T14:24:25Z

Non elegante ma devi giocare con i parametri width in % delle due colonne vuote che sono poste a destra e sinistra del div contenente il riempimento (cerca <td width="18%" height="0%"> )

<html>
<style>
body {
  font-size: 12px;
  font-family: arial;
  width: 100%;
}
</style>
<body>
<table width="200" border="0" cellspacing="0" cellpadding="0">
  <tr>
	  <td colspan = "5" align="center" style="position: relative; left:0px; text-align:center">
    <h3>my legend YlGn</h3>
    </td>
  </tr>
	<tr>
	  <td colspan = "2" align="center" width="25%" style="position: relative; left:0px; text-align:center">
      lowest<br>value<br>&#8681
    </td>
	  <td align="left" width="50%" style="position: relative; left:0px;">&nbsp;</td>
    <td colspan = "2" align="center" width="25%" style="position: relative; left:0px; text-align:center">
    highest<br>value<br>&#8681
    </td>
	</tr>
	<tr align="center">
	  <td width="18%" height="0%">&nbsp;</td>
	  <td  colspan = "3" width="320" height="30">
    <canvas id="myCanvas1" width="300" height="50"></canvas>
        <script>
      		var canvas = document.getElementById('myCanvas1');
      		var context = canvas.getContext('2d');
      		context.rect(0, 0, canvas.width, canvas.height);
      		// add linear gradient
      		var grd = context.createLinearGradient(0,0,300,0, canvas.width, canvas.height);
      		// light yellow
      		grd.addColorStop(0, '#ffffcc');   
      		// light green
      		grd.addColorStop(0.25, '#c2e699');
       		// green
      		grd.addColorStop(0.50, '#78c679');
       		// green
      		grd.addColorStop(0.75, '#31a354');
       		// dark green
      		grd.addColorStop(1, '#006837');
      		context.fillStyle = grd;
      		context.fill();
    		</script>
	  </td>
	  <td width="18%" height="0%">&nbsp;</td>
  </tr>
	<tr>
	  <td colspan = "2" align="center" width="25%" style="position: relative; left:0px;text-align:center">0</td>
    <td align="center" width="50%">50</td>
    <td colspan = "2" align="center" width="25%" style="position: relative; left:0px;text-align:center">100</td>
	</tr>
</table>
</body>
</html>

pigreco · 2020-01-09T16:00:57Z

@ludovico85
risolto
avevo creato un riquadro piccolo, appena l'ho ridimensionato sono apparse le cifre, grazie

ora mi tocca fare una bella ricetta!!! ;-)

pigreco · 2020-01-23T16:41:52Z

chiudo issue
spero presto di fare ricetta.

grazie a tutti

pigreco · 2020-02-02T16:53:58Z

qui plugin per QGIS 3

https://www.geoproc.com/be/bccbar3.htm

gbvitrano closed this as completed Jan 9, 2020

gbvitrano reopened this Jan 9, 2020

pigreco closed this as completed Jan 23, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[HTML] scala numerica su legenda continua #103

[HTML] scala numerica su legenda continua #103

pigreco commented Jan 8, 2020 •

edited

gbvitrano commented Jan 8, 2020 •

edited

gbvitrano commented Jan 8, 2020 •

edited

gbvitrano commented Jan 9, 2020 •

edited

gbvitrano commented Jan 9, 2020

gbvitrano commented Jan 9, 2020

gbvitrano commented Jan 9, 2020

pigreco commented Jan 9, 2020

gbvitrano commented Jan 9, 2020

gbvitrano commented Jan 9, 2020 •

edited

gbvitrano commented Jan 9, 2020 •

edited

ludovico85 commented Jan 9, 2020

gbvitrano commented Jan 9, 2020

pigreco commented Jan 9, 2020 •

edited

pigreco commented Jan 9, 2020

pigreco commented Jan 9, 2020

ludovico85 commented Jan 9, 2020 •

edited

ludovico85 commented Jan 9, 2020 •

edited

pigreco commented Jan 9, 2020

ludovico85 commented Jan 9, 2020

pigreco commented Jan 9, 2020

pigreco commented Jan 23, 2020

pigreco commented Feb 2, 2020

[HTML] scala numerica su legenda continua #103

[HTML] scala numerica su legenda continua #103

Comments

pigreco commented Jan 8, 2020 • edited

gbvitrano commented Jan 8, 2020 • edited

gbvitrano commented Jan 8, 2020 • edited

gbvitrano commented Jan 9, 2020 • edited

gbvitrano commented Jan 9, 2020

gbvitrano commented Jan 9, 2020

gbvitrano commented Jan 9, 2020

pigreco commented Jan 9, 2020

gbvitrano commented Jan 9, 2020

gbvitrano commented Jan 9, 2020 • edited

gbvitrano commented Jan 9, 2020 • edited

ludovico85 commented Jan 9, 2020

gbvitrano commented Jan 9, 2020

pigreco commented Jan 9, 2020 • edited

pigreco commented Jan 9, 2020

pigreco commented Jan 9, 2020

ludovico85 commented Jan 9, 2020 • edited

ludovico85 commented Jan 9, 2020 • edited

pigreco commented Jan 9, 2020

ludovico85 commented Jan 9, 2020

pigreco commented Jan 9, 2020

pigreco commented Jan 23, 2020

pigreco commented Feb 2, 2020

pigreco commented Jan 8, 2020 •

edited

gbvitrano commented Jan 8, 2020 •

edited

gbvitrano commented Jan 8, 2020 •

edited

gbvitrano commented Jan 9, 2020 •

edited

gbvitrano commented Jan 9, 2020 •

edited

gbvitrano commented Jan 9, 2020 •

edited

pigreco commented Jan 9, 2020 •

edited

ludovico85 commented Jan 9, 2020 •

edited

ludovico85 commented Jan 9, 2020 •

edited