Font shadows using Raphaël—JavaScript Library - dom

I would like to put a shadow around any given text, or make the text more anti-aliased looking.
For example lets say I'm running a simple text such as:
var titleName = R.text(x+200, y-75, "Lorem Ipsoup de jour")
.attr({font: '75px Helvetica, Arial', opacity: 1, fill: "#dfe6ec"})
The text is somewhat chunky looking at that size, and doesn't blend well against a background. Is there a way I can create a drop-shadow effect (with alpha channel, ideally)?

In SVG a text shadow effect isn't as simple as with CSS3, but it's reasonably straightforward using a filter. You can't use that example as is in Raphaël because it has no support for groups, but you might be able to create the filter definition in an external file and then apply it with:
.attr({filter: "url(filters.svg#dropShadow)"});
--edit
I've had a chance to give it a try and it doesn't work because filter isn't recognised by attr, however it does work (in Firefox) if you grab the node and use a regular DOM setAttribute method.
var t = paper.text(100, 100, "Raphaël\nkicks\nbutt!");
t.node.setAttribute("filter", "url('filters.svg#dropShadow')");
Chrome doesn't apply the drop shadow, and Opera blurs the entire element. It almost certainly won't work in IE because that'll be VML. Example here.

I know this is an old question, but to help anyone else searching for this you can try Element.glow([glow]) to get a shadow effect. http://raphaeljs.com/reference.html#Element.glow

Related

Leaflet list marker options

I would need some information on list markers:
how can I change the opacity of the list and also the background color
how can I set the overflow so that if the markers in the list increase, they scroll through the
scrollbar?
Thanks
This is clearly not a leaflet element, to change the transparency of the object that you specified, you most likely need to change these properties in the css, try using DeveloperTools in the browser to find where this object takes the properties (transparency) from and you will know how to change it correctly.
Example
If I understand your question correctly, here is an approximate way to do what you ask in the first part of the question. Show your code what it looks like now.
.className {
background: white;
}
let marker = L.circle([50.0], [40.0]], {opacity: 1}).addTo(map),
marker.className = "className";
no I don't mean the transparency of the single marker but of the list, I send a photo in which the list is circled.
I don't know in which part of the library to act to give properties to this list element.

Unity editor - How to stop field from turning blue when its edited

I am making a tool in Unity to build your project for muliple platforms when you press a button.
I started with the preferences window for the tool, and came up with an anoying thing. Whenever I change the enum value of the EnumPopup field, the field turns blue in the editor window. Is there a way to disable this?
See how in the 2nd picture the field is not blue, and in the 3rd picture the field has changed to blue? How do I prevent this from happening?
Thanks in advance!
Difficult to help without having the rest of your code.
This is Unity built-in behaviour. I tried a lot of stuff see here to disable / overwrite the built-in coloring of prefix labels but had no luck so far.
A workarround however might be to instead use an independent EditorGUI.LabelField which will not be affected by the EnumPopup together with the EditorGUIUtility.labelWidth:
var LabelRect = new Rect(
FILEMANAGEMENT_ENUMFIELD_RECT.x,
FILEMANAGEMENT_ENUMFIELD_RECT.y,
// use the current label width
EditorGUIUtility.labelWidth,
FILEMANAGEMENT_ENUMFIELD_RECT.height
);
var EnumRect = new Rect(
FILEMANAGEMENT_ENUMFIELD_RECT.x + EditorGUIUtility.labelWidth,
FILEMANAGEMENT_ENUMFIELD_RECT.y,
FILEMANAGEMENT_ENUMFIELD_RECT.width - EditorGUIUtility.labelWidth,
FILEMANAGEMENT_ENUMFIELD_RECT.height
);
EditorGUI.LabelField(LabelRect, "File relative to");
QuickBuilder.Settings.Relation = (QuickBuilder.Settings.PathRelation)EditorGUI.EnumPopup(EnumRect, QuickBuilder.Settings.Relation);
As you can see the label is not turned blue while the width keeps being flexible
Sidenotes
Instead of setting values via edito scripts directly like
QuickBuilder.Settings.Relation = you should always try and use the proper SerializedProperty. It handles things like Undo/Redo and also marks the according objects and scenes as dirty.
Is there also a special reason why you use EditorGUI instead of EditorGUILayout? In the latter you don't need to setup Rects.
EditorGUILayout.BeginHorizontal();
{
EditorGUILayout.LabelField("File relative to", GUILayout.Width(EditorGUIUtility.labelWidth));
QuickBuilder.Settings.Relation = (QuickBuilder.Settings.PathRelation)EditorGUILayout.EnumPopup(QuickBuilder.Settings.Relation);
}
EditorGUILayout.EndHorizontal();

GWT Read-only TextArea will not resize

GWT newbie here. I have found that when I make a TextArea read-only useful features such as dynamic expansion and even word-wrapping stops working. My intention was to move a string from one text area, append it some way to some more strings, and then add this string into my read-only TextArea. I have doing something like this:
// Temporarily enable the field to set the value of the TextArea
logTextArea.setEnabled(true);
String remarks = // my string to add into the box
if (remarks.length() > 0) {
logTextArea.setEnabled.setValue(remarks);
}
// set read-only again
logTextArea.setEnabled.setEnabled(false);
I also have to work out how many lines I now span and explicitly set the height of the box (via setVisibleLines()). I have now found that it does not word-wrap, so I've had to add some more horrible bodge-code to further split up this string.
So I'm writing code to emulate functionality that comes for free on a normal writable TextArea. Has anyone else found this issue after setting a text-field read-only? Is there another widget I could possibly use to display a list of read-only strings that will auto resize and auto wrap for me?
Many thanks for your time,
tom
Text Area is fine for re-sizing and auto word wrap, even you have your text
area as read only.
Tested now by creating a test project for gwt and it is working fine.
Also Word Wrap is the default behavior of Text area if you want to turn it off then you need to explicitly do this "getElement().setAttribute("wrap","off");

Perl/CGI : format several images

Need a bit more help please...
I need to display 24 times :
or
or
(depending on speed/duplex on the port)
But those images have to be displayed in the switch's image :
How to do to get all images well formated ??
To know which color to choose, I wrote a perl script using Net::SNMP to get infos about speed, duplex...
Thanks guys.
Bye
Hm. Actually, I'd be more tempted to take the images and use CSS styles to color them.
For example, if you took one of those and turned the colored areas transparent, you could place them using CSS, and change the background color, either with generated Perl or with JavaScript on the fly.
It gets a little complex, admittedly; you'll have to create 26 styles (one for each switch), placing them appropriately. You'll need two images (right-side up and upside-down). You'd also have
.yellow { background-color: yellow; }
and so on. But then it's just a matter of adding the appropriate class to the appropriate div; no need to load six different image variants (just two), and you gain the ability to adjust the colors to be anything you want with just a change to the CSS, and do so dynamically if you like.
Does that make any sense?
PerlMagick

How can I set a custom size for the RichTextArea.Formatter.setFontSize() in GWT?

Using the RichTextArea in GWT, It looks like I can only change the font size to one of the values: LARGE, MEDIUM, SMALL, etc (RichTextArea.FontSize), but I want to be able to setFontSize of the RichTextArea.Formatter to a specific size in pt or in px.
How can I achieve that?
I've been digging a bit on this, and it would seem that it is unfortunately not possible, because browsers are limited in their handling of font sizes in the rich text editors. In particular, Firefox generates the (deprecated) <font size="x"></font> element when the font size is changed, and the value of x can be only in the 1-7 range.
If you have a look at the setFontSize method in RichTextAreaImplStandard (GWT source code), you'll see that it ends up calling the execCommand javascript function, which in the case of FontSize only accepts values in 1-7:
http://msdn.microsoft.com/en-us/library/ms536991%28VS.85%29.aspx
You can actually achieve that using string manipulation of the HTML code.
So if you are not using the background color property of the RichTextArea then what you have to do is to replace the "background-color=RED" to "font-size=12px". And then set it back to the RichTextArea object as setHTML().
This works fine as I've implemented this functionality in one of our production application..
Thanks,
Pratik.