Chrome Extension - Custom design for the chrome action button - button

I would like to customize the design (view) of the extension action button of my Chrome Extension.
I would like to know if it is possible to use html and not only a picture. I would like the button to show text and number. i would like to be able to update the text and number.
I did look it the happy if i could generate an image with the needed informations and change the default button icon. But i did not found anything.
In advance thanks

To create a dynamic browser action icon, use the HTML5 Canvas element; create a canvas, add images and/or text to it, then pass the canvas' image data to chrome.browserAction.setIcon.
Here's a small example (please note that this uses jQuery to create the canvas element):
$('body').append('<canvas id="myCanvas" width="19" height="19"></canvas>');
var myCanvas = document.getElementById('myCanvas');
var context = myCanvas.getContext('2d');
context.fillStyle = "blue";
context.font = "normal 9px Arial";
context.fillText("foo", 0, 19);
chrome.browserAction.setIcon({ imageData: context.getImageData(0, 0, 19, 19) });
Keep in mind that you only have 19x19 pixels to work with, so the font probably needs to be really small.
Depending on your needs, you could get creative with creating text as images and adding images to the canvas instead, and/or using chrome.browserAction.setBadgeText.
For further reading, see:
How can I write text on a HTML5 canvas element?
Drawing text using a canvas

Related

Custom Google map marker icon

So I am using gmap3 to dynamically load my map marker icon based on user image profile photo. Ideally, I want to have some custom styling on the marker icon image, and each marker icon image is different from user to user.
Here are two difficulties I have encountered:
Google map load marker icon as canvas (correct me if I am wrong), so it is not an image tag on DOM, thus I don't know how to add css styling to it
Even if it loads it as image, I couldn't find a way to define a callback function with gmap3 (and use jQuery to style the image selector) when the custom icon is completely loaded on DOM. (I tried liveQuery, it's a horrible idea, and I've tried google.maps.event.addListenerOnce(map, 'idle', function(), which didn't work out well.
Here are some of my approaches:
I added animation property to the marker, and pass a random string to that (which should produce an error), and this makes icon loaded as an image tag on DOM.
I then use setTimeout (because I do not know where to define callback function on gmap3 after the marker is loaded) to select image css, and add a background-image css property to that transparent icon image, so I can have a custom user profile image on marker
Please help
to apply css on a marker, you can try the following method to include var marker = new MarkerWithLabel. Link

Detect if Dojox Mobile ToolBarButton is visible

I've got a ToolBarButton floating right within a heading similar to the example given on the documentation for dojox.mobile.heading ( http://dojotoolkit.org/reference-guide/1.9/dojox/mobile/Heading.html ):-
<div data-dojo-type="dojox/mobile/Heading" data-dojo-props='label:"Voice Memos"'>
<span data-dojo-type="dojox/mobile/ToolBarButton" data-dojo-props='label:"Speaker"'></span>
<span data-dojo-type="dojox/mobile/ToolBarButton" data-dojo-props='label:"Done",defaultColor:"mblColorBlue"' style="float:right;"></span>
</div>
Produces:
My issue is that while this is fine with a short title (e.g. Voice Memos as above), for longer titles on smaller width devices the toolbarbutton on the right is sacrificed and not shown at all.
I'd like to show something on the page if that isn't visible. Is it possible to detect the visibility of the right-floated toolbarbutton and if it isn't visible add something further down the page (e.g. a link)? And if so, how would I do it?
Using Dojox Mobile 1.9.2
One way to go would be to set the label by code, using a long or a shortened text depending on the actual screen size. Here's a rough implementation:
var heading = registry.byId("heading");
var adjustLabel = function() {
var dim = common.getScreenSize(); // dojox/mobile/common
var label = dim.w > 350 ? // adjust the value as needed
"This is quite a long label" : "Short label";
heading.set("label", label);
heading.resize();
}
adjustLabel();
connect.subscribe("/dojox/mobile/resizeAll", function(){
adjustLabel();
});
Live here: http://jsfiddle.net/adrian_vasiliu/3p64t/ (you can test it by resizing the right-side pane: the label adjusts itself automatically; the same would happen on a phone or tablet upon orientation change).
That said, I do not reproduce (with Dojo 1.9.2) the fact that, with your code as-is, the button on the right is not shown. You can try it here: http://jsfiddle.net/adrian_vasiliu/QYjY5/. I also tested it outside of jsfiddle by adding your piece of HTML into dojox/mobile/test_Heading.html - and it behave the same in Chrome/Windows, Chrome/Android and Safari/iOS.

Layering text and images in Canvas HTML5

Hi am making a small HTML5 canvas demo.
I initiated the canvas using modernizer from O'Reilly's HTML5 text.
This is for iPad so my canvas is 1024 by 768.
I then load in a background image in my DrawScreen function.
var backgroundImage = new Image();
backgroundImage.src = "images/background.jpg";
backgroundImage.onload = function(){
context.drawImage(backgroundImage,0,0);
}
I want to add text to this then. So I do:
function drawText(){
context.fillStyle ="gray";
context.font = "28px Helvetica";
context.fillText(message, 260, 700);
}
I then call both functions:
DrawScreen();
DrawText();
However my background image totally over writes my text. Or is on top of it. If I disable DrawScreen(); I can see the text. Changing the function order doesn't make a differnce...
How to do this? I feel so stupid that am stuck on something that seems so elementary.
Thanks
The problem is that your image is being drawn after -- and therefore on top of -- your text. This is because of the time it takes the image to load. Basically, what's happening is this:
You call your DrawScreen function
You start loading your background image by assigning the src attribute
You assign the onload() handler to fire once the image has finished loading.
DrawScreen exits, having completed all its work
You call DrawText, which immediately draws the text
At some point later, the image finishes loading, fires the onload() event, and you draw the background image.
I'd suggest restructuring your code so that all the drawing is kicked off by the successful loading of the image. That way, nothing asynchronous will be going on, and the image will be drawn, followed by the text.
Here's a quick example, on jsFiddle.

AS3: grouping sprites

I have a handful of sprites that I am attempting to group together via addChild().
Here is some pseudo-code demonstrating what I would like to accomplish:
import nav.text.TextSprite;
spr1:Sprite = new Sprite();
spr1.graphics.clear();
spr1.graphics.beginFill(0x000000);
spr1.graphics.drawRect(0,0,100,100);
txt1:TextSprite = new TextSprite;
txt1.text = "hello";
spr1.addChild(txt1);
//this is what isn't working: the sprite is hidden but not the text
spr1.alpha = 0.0;
For some reason I cannot seem to get the TextSprite to draw correctly... All it is is a Sprite with a TextField added to it. I think everything is working there, but I might have something wrong w/r/t making sure all of TextSprites children are grouped correctly.
I should mention that it does position correctly; but the alpha property won't respond in the way I would expect it to. I.E., the sprite that the TextField is attached to will allow it's alpha to be set but the text remains visible.
Any thoughts?
Most likely you just need to embed the font in your textfield. Try changing the x, y of spr1 and see if txt1 moves along with it. If it truly is a child then it will respond to the new position.
You need to embed the font using textfield.embedFonts = true. If your text is disappearing when you do this, how are you going about embedding the font (using the Flex embed meta tag or using the Flash IDE?), check that you are not changing the font weight (setting the text to bold when you have only embedded the normal weight font) and if you are using a text format, be sure to apply the text format AFTER you set the textfield.text property. You can get around this by using textfield.defaultTextFormat.

Text on top of images i Flash slideshow (Flex)

I never did stuff like this before! Tried to google around but couldn't find anything useful!
So: how is it possible to make text appear on top of an image (slideshow) in Flex using action script (can it be done another way)?
(I already found action script code that does implement the slideshow but how to show some dynamic text too?)
Thanks in advance!
The most simple method would be to just place a textarea on top of your image.
If it's dynamic text, make sure that you embed the font. If you're running into weird behavior with the font, for example, if it doesn't show up, then make sure that the font is embedded.
The font also needs to be embedded if you intend on scaling it, rotating it, etc.
Using ActionScript alone:
var sprite:Sprite = new Sprite();
//let bmp be an image of size 100x100
//loaded thru Loader class or embedded at compile time
sprite.addChild(bmp);
var tf:TextField = new TextField();
//set background/color/font etc here
tf.text = "100x100 image";
sprite.addchild(tf);
tf.x = 50;
tf.y = 50;
Make sure you addChild text after the image - otherwise image will come on top of the text and you won't see it.
Using flex: Use Canvas or Panel with absolute positioning to put things on top of each other.
<mx:Canvas>
<mx:Image source="image.png"/>
<!--Make sure Label tag is after Image tag-->
<mx:Label text="my image" x="20" y="20"/>
<mx:Canvas>

Resources