search

opendatasicilia / tansignari

"T'ansignari e t'appeddiri"
http://tansignari.opendatasicilia.it
Creative Commons Attribution 4.0 International
18 stars 10 forks source link

[HTML] scala numerica su legenda continua #103

Closed pigreco closed 4 years ago

pigreco commented 4 years ago

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

image

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)

image

grazie!

gbvitrano commented 4 years ago

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

immagine 2020-01-08_14h12_07

gbvitrano commented 4 years ago

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

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

gbvitrano commented 4 years ago

`

my title

lowest value
 
0
50
100

highest value
`
gbvitrano commented 4 years ago

2020-01-09_10h58_07

gbvitrano commented 4 years ago

Ho inerito lo script della scala del colore dentro una tabella immagine 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 commented 4 years ago

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 commented 4 years ago

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

  1. avvio il compositore;
  2. aggiungo una etichetta
  3. incollo lo script
  4. metto la spunta su HTML

image

gbvitrano commented 4 years ago

2020-01-09_11h25_16

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 commented 4 years ago

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

immagine

gbvitrano commented 4 years ago

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 commented 4 years ago

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

gbvitrano commented 4 years ago

2020-01-09_11h38_12

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

pigreco commented 4 years ago

@gbvitrano e @ludovico85

image

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

pigreco commented 4 years ago

potrei girarla, ma il testo no!!!

image

pigreco commented 4 years ago

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

image

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

ludovico85 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

ludovico85 commented 4 years ago

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 commented 4 years ago

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

image

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

pigreco commented 4 years ago

chiudo issue spero presto di fare ricetta.

grazie a tutti

pigreco commented 4 years ago

qui plugin per QGIS 3

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

image