How to add style to decoratedPopupPanel? - google-apps-script

I have this code that creates a decorated popup panel :
...
var x = 600;
var y = 150+row*23;
var popPanel = app.createDecoratedPopupPanel().setStyleAttributes({background:'#FFFFDD',padding:'15px'});
var message = app.createHTML("Opération non reversible !!<BR>Il faudra 'rafraichir' votre navigateur<BR>"+
"après vous être effacé du planning (case ✖)<BR>pour voir les données à jour").setPixelSize(300,60).setStyleAttributes({background:'#FFFFDD',padding:'15px'});
popPanel.add(message);
popPanel.setAnimationEnabled(true);
popPanel.setPopupPosition(x, y);
popPanel.setAutoHideEnabled(true);
popPanel.show();// I didn't chain the commands to make it easier to test by commenting one or another...
return app;
}
and it gives this result :
My question is : knowing that background attribute determines the surrounding zone (popup panel padding 15px) and that the inside widget has also its background color (and its own padding as well), how can I change the color of this blue frame ?

It seems that decorated** can not be redecorated in GAS. I too have wondered this (when working with decorated tab panels). I concluded that it was not possible. I used the Chrome inspector and found out that the blue part is actually a set of images. So it wouldn't be a simple CSS fix.
This thread seems to have the final verdict.

Thanks to the link from the other answer (leading to James Ferreira's site) I was able to build this new code that is a lot more easy to customize...
Here it is with the result below :
...
var x = 600;
var y = 150+row*23;
var popPanel = app.createPopupPanel().setStyleAttributes({background:'#ccccaa',padding:'5px', borderRadius:'15px 15px 15px 15px',borderColor:'#ffffdd',borderWidth:'5px'});
var message = app.createHTML("Opération non reversible !!<BR>Il faudra 'rafraichir' votre navigateur<BR>"+
"après vous être effacé du planning (case ✖)<BR>pour voir les données à jour").setPixelSize(300,60).setStyleAttributes({padding:'5px'});
popPanel.add(message); popPanel.setAnimationEnabled(true).setPopupPosition(x, y).setAutoHideEnabled(true).show();
return app;
}
The borderRadius:'px px px px' can be used on any widget, allowing for nice buttons as wel ;-)

Related

extracting specific information from website with actionscript 3

Im trying to extract lots of information from a website, and Im unfamiliar with the syntax I should use to get specific content, I've tried reading up on RegEx and match API for actionscript 3, but Im still unsure.
This is my code:
var l1:URLLoader = new URLLoader();
l1.addEventListener(Event.COMPLETE, completeHandler);
l1.load(new URLRequest("https://meny.no/oppskrifter/Pasta/baked-feta-pasta/"));
trace("load");
function completeHandler(e:Event):void {
trace("complete")
var s:String = e.target.data;
//var targets:Array = s.match(/(?<=<div class="target">).*(?=<\/div>)/igm);
trace(targets);
//getting the name of the recipe
var targets:Array = s.match(/(?<=<h1 class="c-h1">).*(?=<\/h1>)/igm);
trace(targets);
// getting the ingress of the recipe
targets[1] = s.match(/(?<=<div class="c-recipe__intro">).*(?=<\/div>)/sigm);
trace(targets[1]);
trace("complete2");
}
What I'm trying to grep with this line:
targets[1] = s.match(/(?<=).*(?=</div>)/sigm);
Is getting this information only: Oppskrift på TikTok trenden "Baked feta pasta", en enkel pasta med saus av ovnsbakt fetaost og tomater. Retten er enkel med få ingredienser og mye smak. Fetaost, tomater, olivenolje og urter ovnsbakes, og blandes så med kokt pasta.
But instead it gives me everything after aswell
Anyway, is there a template or something that explains how to get certain information in a more graspable way?
Thanks!
Its similar to this question: But not quite the same
In swf AS3, how do you extract string content from a website
There of course is another (rather than RegEx) approach, an algorithmic one.
Something like that will suffice for searching many sub-strings by the given head and tail:
function findMany(text:String, head:String, tail:String):Array
{
var result:Array = new Array;
// At this point we get several slices, each ends with the provided "tail".
var aList:Array = text.split(tail);
// The last chunk doesn't end with "tail".
aList.pop();
// Iterate over them.
for each (var a:String in aList)
{
// Find out where (and if) the "head" in the each slice.
// If there's more than one, take the last.
var anIndex:int = a.lastIndexOf(head);
if (anIndex > -1)
{
// If there is one, add it to the list of results.
// Don't forget the "tail" as .split() method
// cuts the given separator.
result.push(a.substr(anIndex) + tail);
}
}
return result;
}

How to align and set color at the same time inside a cell with python-docx

I am trying to make a table with python-docx.
This is my desire output:
¡--OK(bold)--¡--MIDDLE(in red)--¡----RIGHT¡
And this is what I get:
¡--OK(bold)--¡MIDDLE(in red)----¡RIGHT----¡
The code that I use is:
from docx import Document
from docx.shared import RGBColor
from docx.enum.text import WD_ALIGN_PARAGRAPH
document = Document()
table = document.add_table(rows=1, cols=3, style='Table Grid')
fila = table.rows[0].cells
# First cell: OK in bold
texto = 'OK'
dentro = fila[0].paragraphs[0]
dentro.add_run(texto).bold = True
dentro.alignment = WD_ALIGN_PARAGRAPH.CENTER
# Second cell: Middle in red
texto = 'MIDDLE'
dentro = fila[1].paragraphs[0].add_run(texto)
dentro.alignment = WD_ALIGN_PARAGRAPH.CENTER
font = dentro.font
font.color.rgb = RGBColor(255,0,0) # Red
# Third cell : Right
texto = 'RIGHT'
dentro = fila[2].paragraphs[0]
dentro.add_run(texto)
dentro.aligment = WD_ALIGN_PARAGRAPH.RIGHT
document.save('demo.docx')
I have two issues: First one is that I do not get the correct alignment in the middle cell when I add the color issue. Second one is that in cells after the wrong output of middle one, the alignment does not seem to work. How can I fix it? Do I have to wait until next version (actual 0.8.10)? Thanks,
Your code for the middle cell is different. You assign the new run to dentro rather than the paragraph. This causes the alignment value to be assigned to the run where it does nothing.
Change:
dentro = fila[1].paragraphs[0].add_run(texto)
to:
dentro = fila[1].paragraphs[0]
run = dentro.add_run(texto)
font = run.font
font.color.rgb = RGBColor(255, 0, 0)
I'm not sure how to account for the RIGHT alignment not "taking" on the third cell; I would make this fix and then see how you go.

How to interpretHTML code inside uib-tooltip

After looked for a solution, I have found a lot of article but not a way to do what I want so I'm there.
My problem:
I use uib-tooltip to set some explanation on the use/utility of some fields. I also use $translate with i18n files to do some translation.
These i18n files contains some html codes for special chars (because of servers issue I can't simply use UTF-8...).
And so, when I use simply for exemple:
<span translate="create.period"></span>
It's working fine, the HTML is interpreted fine and I have the good result.
Exemple of value on my i18n file:
create.period:'Ce champ contient la valeur de la période'
Result from the previus code:
Ce champ contient la valeur de la période
But if I use the uib-tooltip I have some issue.
Exemple of my code:
<span class='glyphicon glyphicon-question-sign pointer signColor' uib-tooltip="{{'create.period' | translate}}"></span>
And here the reult on the tooltip popup is :
Ce champ contient la valeur de la période
I have seen lot of thing like old way to do (uib-tooltip-html) or way to do with
$sce and ng-bind-html, but I can't do that here because I on the uib-tooltip.
So do I have miss some simple thing?
Or have you a solution for me? (and explanatinons :p)
Thank you very much ! :)
I add a try for a filter:
filter("htmlToPlaintext", ['$sce', '$compile', function ($sce, $compile) {
return function (val) {
return $sce.valueOf($sce.trustAsHtml(val));;
};
}])
Saddly not worky.
$scope.create.period = $sce.trustAsHtml('Ce champ contient la valeur de la période');
scope variable
<span class='glyphicon glyphicon-question-sign pointer signColor' uib-tooltip-html="create.period"></span>
pass '$sce' dependency in your controller

AS3 Array Display button not working properly

I'm working on a program to learn how to use arrays in my computer course and my display button doesn't work properly after the first press. The first time I click it, it works properly and displays everything but the 2nd time it stop showing the first value and starts showing the last value twice, the 3rd time cuts off the 2nd value and displays the last value three times and so on. And when I press the button to find the sum of all values it gives me the sum of all of the values that will show up after I hit the display button. Here's my code, and sorry about the french commentary, it's for school.
function afficherFunction(event:MouseEvent):void
{
// Compose cette fonction visant à afficher tous les éléments du tableau.
txtSortie.text = "";
var entier:int;
entier = -1
for (var i:int=entier; i < mesEntiers.length; i++)
{
if (i+1 < mesEntiers.length)
{
mesEntiers[i] = mesEntiers[i+1];
affichage = affichage + mesEntiers[i] + "\n"
}
}
txtSortie.text = affichage;
affichage = "";
i = -1;
} //Fin fonction afficher.
mesEntiers[i] = mesEntiers[i+1];
This line is your problem. Not sure what you meant for that line to be doing, but it's setting the value at index i to the value at the next index--essentially shifting all the values down one (and losing the value at index 0).

How to get the size (in pixels) of a jpeg image I get with UrlFetchApp.fetch(photoLink)?

In a script that sends email in HTML format I add an image that is stored in a public shared folder.
I get the blob using UrlFetchApp.fetch(photoLink) but the image has not necessarily the right size so in the html code I use width and height attributes (for now with fixed values, see code below) but I'd like it to be automatically resized with the right ratio.
To achieve that I need to know how to get the original size of the image (height and width) but I just don't know how to get it without inserting the image in an intermediate document (which would work but I find this approach a bit weird and unnecessarily complicated... moreover I don't feel like having a useless doc appearing each time I change the image file).
Here is the relevant part of the code that creates the email message :
function sendMail(test,rowData,genTitle,day,title,stHour,endHour){
var photoLink = sh.getRange('H1').getValue();
var image = UrlFetchApp.fetch(photoLink);
//************* find the pixel size of the image to get its ratio
var msgTemplate = '<IMG SRC="'+photoLink+'" BORDER=0 ALT="logo" HEIGHT=200 WIDTH=300><BR><BR>'+
'Résumé de vos réservations au nom de <NOM><BR><BR><BR><table style="background-color:lightblue;border-collapse:collapse;" border = 1 cellpadding = 5><th></th><th><TABLEHEADER></th><EVENTS></table><BR><CONCLUSION><BR>Cordialement,<BR><BR>';
var mailTitle = 'Confirmation de réservation - '+getTextFromHtml(genTitle);
var descr = '';
for(var d = 0;d<day.length;++d){
Logger.log(Number(rowData[(d+5)]));
var content = '<tr bgcolor="#ffffbb" width="100%"><td><NUMBER> </td><td > <DESCRIPTION></td></tr>'
if(Number(rowData[(d+5)])>1){var pl = ' places'}else{var pl = ' place'};
content = content.replace('<NUMBER>',rowData[(d+5)]+pl);
content = content.replace('<DESCRIPTION>',title[d]+' de '+stHour[d]+' heures à '+endHour[d]+' heures');
if(Number(rowData[(d+5)])>0){
descr += content;
}
}
msgTemplate = msgTemplate.replace('<NOM>',rowData[1]).replace('<EVENTS>',descr).replace('<TABLEHEADER>',genTitle);
var textVersion = getTextFromHtml(msgTemplate.replace(/<br>/gi,'\n').replace(/<td>/gi,'\n'));
// Logger.log(textVersion)
if(test){
MailApp.sendEmail(Session.getEffectiveUser().getEmail(),mailTitle, textVersion,{'htmlBody':msgTemplate,"replyTo" : retour});
}
else
{
MailApp.sendEmail(rowData[2],mailTitle, textVersion,{'htmlBody':msgTemplate,"replyTo" : retour});
}
}
There is no easy way within Apps Script to figure out what an image size would be. There are some other projects that might be able to analyze the bitmap data and give you dimensions.
The last time I had to solve this problem. I just wrote a simple App Engine app to do the image math for me -
import webapp2
from google.appengine.api import urlfetch
from google.appengine.api import images
from django.utils import simplejson
class MainHandler(webapp2.RequestHandler):
def get(self):
url = self.request.get('url')
imgResp = urlfetch.fetch(url) #eg. querystring - url=http://xyz.com/img.jpg
if imgResp.status_code == 200:
img = images.Image(imgResp.content);
jsonResp = {"url":url, "h":img.height, "w":img.width, "format":img.format}
self.response.headers['Content-Type'] = 'application/json'
self.response.out.write(simplejson.dumps(jsonResp))
app = webapp2.WSGIApplication([('/imageinfo', MainHandler)], debug=True)
And then I call it from Apps Script like this -
function checkImageSizes() {
var imageUrls = ['http://developers.google.com/apps-script/images/carousel0.png','http://www.w3.org/MarkUp/Test/xhtml-print/20050519/tests/jpeg420exif.jpg'];
for(var i in imageUrls){
var resp = JSON.parse(UrlFetchApp.fetch('http://arunimageinfo.appspot.com/imageinfo?url='+imageUrls[i]).getContentText());
Logger.log('Image at %s is %s x %s',resp.url,resp.w,resp.h);
}
}
You are welcome to use my App Engine instance if your volume is a couple of times a week :)
I doubt you can do this in apps script. Certainly not natively but you might be able to find or adapt a jpg library that looks at the binary blob header and extracts the image size.