Bots de conversa de Telegram amb Google Apps Script

Bots de conversa	Exemples	Dades pràctiques		Recursos CITCEA
Google Apps Script	Projectes	Interacció		Inici

Funcions per generar les formes dels gràfics SVG dels exemples

A continuació comentarem les funcions que hem emprat als exemples per generar gràfics SVG. En molts casos, hem agafat només algunes de les moltes possibilitats disponibles. Aquí presentem només les funcions, per conèixer millor com són els gràfics SVG i veure com podem obtenir la informació sobre la comanda que ens cal per fer una forma concreta podeu consultar aquesta pàgina.

Comandes d'inici i final del dibuix

Aquests són els paràmetres que ens calen per a la funció cap:

Paràmetre	Utilització
ample	Defineixen les mides de l'àrea de dibuix
alt	Defineixen les mides de l'àrea de dibuix

Aquesta és la funció que ens generarà les etiquetes svg, g i title per a l'inici del dibuix:

function cap(ample, alt, titol){
  var resp = '<svg width="' + ample + '" height="' + alt;
  resp = resp + '" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"';
  resp = resp + ' xmlns:xlink="http://www.w3.org/1999/xlink">' + '\n';
  resp = resp + '<g>' + '\n' + '<title>' + titol + '</title>';
  return resp;
}

Aquesta és la funció que ens generarà les etiquetes de tancament al final del dibuix:

function peu(){
  var resp = '</g>' + '\n' + '</svg>';
  return resp;
}

En aquest exemple podeu veure l'ús d'aquestes funcions.

Línies rectes

Aquests són els paràmetres que ens calen per a la funció linia:

Paràmetre	Descripció
xi	Coordenades del punt d'inici
yi	Coordenades del punt d'inici
xf	Coordenades del punt final
yf	Coordenades del punt final
gruix	Gruix de la línia
color	Color de la línia (format hexadecimal)
ident	Identificador de la forma, pot ser qualsevol text però únic per a cada element del dibuix

Aquesta és la funció que ens permet traçar una línia recta:

function linia(xi, yi, xf, yf, gruix, color, ident){
  var resp = '<line id="' + ident + '" x1="' + xi + '" y1="' + yi + '" x2="' + xf + '" y2="' + yf;
  resp = resp + '" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="';
  resp = resp + gruix + '" stroke="' + color + '" fill="none"/>';
  return resp;
}

En aquest exemple podeu veure l'ús d'aquesta funció.

Rectangles amb els costats paral·lels a la vora del dibuix

Aquests són els paràmetres que ens calen per a la funció rect:

Paràmetre	Descripció
x	Coordenades de la cantonada superior esquerra del rectangle
y	Coordenades de la cantonada superior esquerra del rectangle
ample	Defineixen les mides del rectangle
alt	Defineixen les mides del rectangle
gruix	Gruix de la vora del rectangle
color	Color de l'interior del rectangle (format hexadecimal)
vora	Color de la vora del rectangle (format hexadecimal)
ident	Identificador de la forma, pot ser qualsevol text però únic per a cada element del dibuix

Aquesta és la funció que ens generarà l'etiqueta rect:

function rect(x, y, ample, alt, gruix, color, vora, ident){
  var resp = '<rect id="' + ident + '" x="' + x + '" y="' + y + '" width="' + ample + '" height="' + alt;
  resp = resp + '" stroke-width="' + gruix + '" stroke="' + vora + '" fill="' + color;
  resp = resp + '" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null"/>';
  return resp;
}

En aquest exemple podeu veure l'ús d'aquesta funció.

Cercles i circumferències

Aquests són els paràmetres que ens calen per a la funció cercle:

Paràmetre	Descripció
xc	Coordenades del centre del cercle o la circumferència
yc	Coordenades del centre del cercle o la circumferència
r	Radi del cercle o la circumferència
gruix	Gruix de la circumferència
color	Color de l'interior del cercle (format hexadecimal)
vora	Color de la circumferència (format hexadecimal)
ident	Identificador de la forma, pot ser qualsevol text però únic per a cada element del dibuix

Aquesta és la funció que ens generarà l'etiqueta circle:

function cercle(xc, yc, r, gruix, color, vora, ident){
  var resp = '<circle id="' + ident + '" cx="' + xc + '" cy="' + yc +  '" r="' + r;
  resp = resp + '" stroke-width="' + gruix + '" stroke="' + vora + '" fill="' + color + '"/>';
  return resp;
}

En aquest exemple podeu veure l'ús d'aquesta funció.

Text

Aquests són els paràmetres que ens calen per a la funció text:

Paràmetre	Descripció	Valors	Ús
x	Coordenades del punt on s'ha de situar el text
y	Coordenades del punt on s'ha de situar el text
txt	Text que s'ha de mostrar
mida	Mida de lletra
color	Color de la lletra (format hexadecimal)
alin	Alineació del text	e	A l'esquerra (el text comença a x)
		c	Centrat (el centre del text es situa a x)
		d	A la dreta (el text acaba a x)
negreta	Indica si es vol el text en negreta	1	Amb negreta
negreta	Indica si es vol el text en negreta	0	Sense negreta
cursiva	Indica si es vol el text en cursiva	1	Amb cursiva
cursiva	Indica si es vol el text en cursiva	0	Sense cursiva
ident	Identificador de la forma, pot ser qualsevol text però únic per a cada element del dibuix

Aquesta és la funció que ens generarà l'etiqueta text:

function text(x, y, txt, mida, color, alin, negreta, cursiva, ident){
  if (alin == "e"){  // Esquerra
    var aln = "start";
  }
  if (alin == "c"){  // Centre
    var aln = "middle";
  }
  if (alin == "d"){  // Dreta
    var aln = "end";
  }
  var resp = '<text id="' + ident + '" xml:space="preserve" text-anchor="' + aln;
  resp = resp + '" font-family="serif" font-size="' + mida + '" x="' + x + '" y="' + y +'"'; 
  if (negreta == 1){
    resp = resp + ' font-weight="bold"';
  }
  if (cursiva == 1){
    resp = resp + ' font-style="italic"';
  }
  resp = resp + ' stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="';
  resp = resp + color + '" fill="' + color + '">' + txt + '</text>';
  return resp;
}

En aquest exemple podeu veure l'ús d'aquesta funció.

Sectors circulars

Aquests són els paràmetres que ens calen per a la funció sector:

Paràmetre	Descripció
xc	Coordenades del centre del cercle
yc	Coordenades del centre del cercle
r	Radi del cercle
ai	Angles (en graus) inicial i final del sector (0° correspon a l'eix horitzontal)
af
color	Color de l'interior del sector (format hexadecimal)
gruix	Gruix de la vora del sector
vora	Color de la vora del sector (format hexadecimal)
ident	Identificador de la forma, pot ser qualsevol text però únic per a cada element del dibuix

Aquesta és la funció que ens dibuixa un sector circular:

function sector(xc, yc, r, ai, af, color, gruix, vora, ident){
  var xi = xc + (r * Math.cos(ai * Math.PI / 180.0));
  var yi = yc + (r * Math.sin(ai * Math.PI / 180.0));
  var xf = xc + (r * Math.cos(af * Math.PI / 180.0));
  var yf = yc + (r * Math.sin(af * Math.PI / 180.0));
  var laf = 0;
  var sf = 1;
  if ((af - ai) > 180){
    laf = 1;
  }
  var resp = '<path id="' + ident + '" d=" M' + xi + ',' + yi + ' A' +  r;
  resp = resp + ',' + r + ' ' + 0 + ' ' + laf + ' ' + sf + ' ' + xf + ',';
  resp = resp + yf + ' L' + xc +',' + yc + ' Z';
  resp = resp + '" fill="' + color + '" stroke="' + vora;
  resp = resp + '" stroke-width="' + gruix + '" />';
  return resp;
}

En aquest exemple podeu veure l'ús d'aquesta funció.

Imatges

Aquests són els paràmetres que ens calen per a la funció imatge:

Paràmetre	Descripció
x	Coordenades del centre de la cantonada superior esquerra de la imatge
y
ample	Amplada de la imatge
alt	Alçada de la imatge
url	Adreça URL del fitxer de la imatge (format JPEG, PNG o SVG)
ident	Identificador de la forma, pot ser qualsevol text però únic per a cada element del dibuix

Aquesta és la funció que ens posa una imatge:

function imatge(x, y, ample, alt, url, ident){
  var resp = '<image id="' + ident + '" x="' + x + '" y="' + y + '" width="' + ample;
  resp = resp + '" height="' + alt + '" xlink:href="' + url + '"/>';
  return resp;  
}

En aquest exemple podeu veure l'ús d'aquesta funció.

Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.