I'm trying to set transition speed of [720kb/angular-tooltips] tooltips show/hide to 0.5sec.
Default speed in "slow" mode is 0.65sec(from default css), and that's ok for me - I can use this instead of 0.5sec.
But after set mode to slow, nothing really changes.
{{n.FileName}}
http://jsfiddle.net/u898mg2m/17/
above is test of using tooltip-speed attribute
Alternative question: is there another way to delay tool-tips (show and/or hide)?
https://github.com/720kb/angular-tooltips/blob/master/lib/angular-tooltips.scss You can change the values in the following .scss as you can see or define your own new transition variable.
You can set 0 for fast 1 for slow and 0.5 for steady variables.
Now to get the delay you need to change the opacity variables depending upon your requirements. Set the percentages according to the delay.Allow for smaller opacity to get a smooth transition.
Here is a fiddle for you http://jsfiddle.net/u898mg2m/21/
/*
* angular-tooltips
* 1.1.1
*
* Angular.js tooltips module.
* http://720kb.github.io/angular-tooltips
*
* MIT license
* Wed May 18 2016
*/
tooltip._bottom tip tip-arrow,tooltip._top tip tip-arrow{border-left:6px solid transparent;border-right:6px solid transparent;left:50%;margin-left:-6px}._exradicated-tooltip{position:absolute;display:block;opacity:1;z-index:999}tooltip{display:inline-block;position:relative}#-webkit-keyframes animate-tooltip{0%{opacity:0}50%{opacity:0}60%{opacity:0}70%{opacity:0}90%{opacity:0}}#-moz-keyframes animate-tooltip{0%{opacity:0}50%{opacity:0}60%{opacity:0}70%{opacity:0}90%{opacity:1}}#-ms-keyframes animate-tooltip{tooltip 0%{opacity:0}tooltip 50%{opacity:.5}tooltip 60%{opacity:.8}tooltip 70%{opacity:.9}tooltip 90%{opacity:1}}#keyframes animate-tooltip{0%{opacity:0}50%{opacity:0}60%{opacity:0}70%{opacity:0}90%{opacity:1}}tooltip._multiline{display:block}tooltip._slow._ready tip{animation:animate-tooltip 1s}tooltip._fast._ready tip{animation:animate-tooltip 0s}tooltip._steady._ready tip{animation:animate-tooltip .5s}tooltip tip{border-radius:3px;background:rgba(0,0,0,.85);color:#fff;display:none;line-height:normal;max-width:500px;min-width:100px;opacity:0;padding:8px 16px;position:absolute;text-align:center;width:auto;will-change:top,left,bottom,right}tooltip tip._hidden{display:block;visibility:hidden}tooltip.active:not(._force-hidden) tip{display:block;opacity:1;z-index:999}tooltip tip-tip{font-size:.95em}tooltip tip-tip._large{font-size:1.1em}tooltip tip-tip._small{font-size:.8em}tooltip._top tip{left:50%;top:-9px;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%)}tooltip._top tip tip-arrow{border-top:6px solid rgba(0,0,0,.85);content:'';height:0;position:absolute;top:100%;width:0}tooltip._bottom tip{right:50%;top:100%;-webkit-transform:translateX(50%) translateY(9px);transform:translateX(50%) translateY(9px)}tooltip._bottom tip tip-arrow{border-bottom:6px solid rgba(0,0,0,.85);bottom:100%;content:'';height:0;position:absolute;width:0}tooltip._left tip tip-arrow,tooltip._right tip tip-arrow{border-bottom:6px solid transparent;border-top:6px solid transparent;content:'';height:0;margin-top:-6px;position:absolute;top:50%;width:0}tooltip._right tip{left:100%;top:50%;-webkit-transform:translateX(9px) translateY(-50%);transform:translateX(9px) translateY(-50%)}tooltip._right tip tip-arrow{border-right:6px solid rgba(0,0,0,.85);right:100%}tooltip._left tip{left:-9px;top:50%;-webkit-transform:translateX(-100%) translateY(-50%);transform:translateX(-100%) translateY(-50%)}tooltip._left tip tip-arrow{border-left:6px solid rgba(0,0,0,.85);left:100%}tip-tip #close-button{cursor:pointer;float:right;left:8%;margin-top:-7%;padding:3px;position:relative}
/*# sourceMappingURL=angular-tooltips.css.map */
#link {
padding:200px;
}
Hope it may help you.
Related
I have not yet found any option to provide transparency to the foreground color of a component, or to the font for that matter.
What I want to do is:
Label halfTransparentLabel = new Label("Half Transparent text");
Style s = halfTransparentLabel.getAllStyles();
s.setBgColor(0);
s.setBgTransparency(255);
s.setFgColor(0xffffff);
s.setFgTransparency(128); // this method does not exist
I know drawing translucent stuff is heavy on the performance, but I want to do it on particular pieces only. would greatly improve the visual appeal and design, having this option.
Can this be worked around?
UPDATED ANSWER
Thanks to the Shai's comment, I update my answer. The workaround I suggested is not necessary. The same result of the posted screenshot can be obtained with https://www.codenameone.com/javadoc/com/codename1/ui/plaf/Style.html#setOpacity-int- or with the opacity property in the CSS, for example:
BigLabel {
font-size: 6mm;
font-family: "native:MainRegular";
color: red;
background-color: transparent;
opacity: 0.5;
}
OLD ANSWER - Yes, it's possible to workaround this problem using the .toImage() method, as in this screenshot:
I'm not sure if this workaround is the best, however it works.
The code of this example:
Form hi = new Form("Semitransparent Example", BoxLayout.y());
hi.getToolbar().setUIID("Transparent");
hi.setUIID("FormBackground");
Container cnt = FlowLayout.encloseIn(new Label("Half Transparent Text", "BigLabel"));
// .setSize() and .revalidate(), in this case, are necessary to use the .image() method
cnt.setSize(new Dimension(hi.getContentPane().getWidth(), CN.convertToPixels(8, false)));
cnt.revalidate();
hi.add(cnt.toImage().modifyAlpha((byte) 125));
hi.show();
and the CSS:
#Constants {
includeNativeBool: true;
}
Transparent {
background-color: transparent;
}
FormBackground {
background-image: url("background.jpg");
}
BigLabel {
font-size: 6mm;
font-family: "native:MainRegular";
color: red;
background-color: transparent;
}
thanks for your answers. with the above tips, the easiest solution in code is the following:
component.getAllStyles().setOpacity(128);
so what is the benefit to use CSS?
Having the designer to all the formating and styling, I already hate to do some parts in code and some in the designer. So why make it even more complex by introducing CSS? is CSS support supposed to replace the designer?
I'm trying to create a DPI aware app which responds to user requested DPI change events by resizing the window.
The program in question is created in C and uses SDL2, however to retrieve system DPI information I use xlib directly, as the SDL DPI support in X11 is lacking.
I found two ways to get the correct DPI information on program startup, both involving getting Xft.dpi information from Xresource: one is to use XGetDefault(display, "Xft", "dpi"), while the other is to use XResourceManagerString, XrmGetStringDatabase and XrmGetResource. Both of them return the correct DPI value when the program is created.
The problem is, if the user changes the system scale while the program is running, both XGetDefault abd XrmGetResource still return the old DPI value even though when I run "xrdb -query | grep Xft.dpi" the value has indeed changed.
Does anyone know a way to get the updated Xft.dpi value?
I found out a way to do exactly what I wanted, even though it's rather hackish.
The solution (using XLib) is to create a new, temporary connection to the X server using XOpenDisplay and XCloseDisplay, and poll the resource information from that new connection.
The reason this is needed is because X fetches the resource information only once per new connection, and never updates it. Therefore, by opening a new connection, X will get the updated xresource data, which can then be used for the old main connection.
Be mindful that constantly opening and closing new X connections may not be great for performance, so only do it when you absolutely need to. In my case, since the window has borders, I only check for DPI changes when the title height has changed, as a DPI change will change the size of your title border due to font size differences.
First off it must be noted that the value of the Xft.dpi resource isn't necessarily accurate -- it depends on whether the system and or user login scripts have correctly set it or not.
Also it is important to remember that the Xft.dpi resource is intended to be used by the Xft library, not by arbitrary programs looking for the screen resolution.
The Xft.dpi resource can be set as follows. This example effectively only deals with a display with a single screen, and note that it uses xdpyinfo. This also shows how it might not be exact, but could be rounded. Finally this example shows calculation of both the horizontal and vertical resolution, but Xft really only wants the horizontal resolution:
SCREENDPI=$(xdpyinfo | sed -n 's/^[ ]*resolution:[ ]*\([^ ][^ ]*\) .*$/\1/p;//q')
SCREENDPI_X=$(expr "$SCREENDPI" : '\([0-9]*\)x')
SCREENDPI_Y=$(expr "$SCREENDPI" : '[0-9]*x\([0-9]*\)')
# N.B.: If true screen resolution is within 10% of 100DPI it makes the most
# sense to claim 100DPI to avoid font-scaling artifacts for bitmap fonts.
if expr \( $SCREENDPI_X / 100 = 1 \) \& \( $SCREENDPI_X % 100 \<= 10 \) >/dev/null; then
FontXDPI=100
fi
if expr \( $SCREENDPI_Y / 100 = 1 \) \& \( $SCREENDPI_Y % 100 \<= 10 \) >/dev/null; then
FontYDPI=100
fi
echo "Xft.dpi: ${FontYDPI}" | xrdb -merge
I really wish I knew why Xft didn't at least try to find out the screen's resolution itself instead of relying all of the time on its "dpi" resource being set, but I've found that the current implementation only uses the resource setting, so something like the above is actually always necessary to set the resource properly (and further one must also make sure the X Server itself has been properly configured with the correct physical screen dimensions).
From a C program you want to do just what xdpyinfo itself does and skip all the nonsense about Xft's resources. Here's the xdpyinfo code paraphrased:
Display *dpy;
dpy = XOpenDisplay(displayname);
for (scr = 0; scr < ScreenCount(dpy); scr++) {
int xres, yres;
/*
* there are 2.54 centimeters to an inch; so there are 25.4 millimeters.
*
* dpi = N pixels / (M millimeters / (25.4 millimeters / 1 inch))
* = N pixels / (M inch / 25.4)
* = N * 25.4 pixels / M inch
*/
xres = ((((double) DisplayWidth(dpy, scr)) * 25.4) /
((double) DisplayWidthMM(dpy, scr))) + 0.5;
yres = ((((double) DisplayHeight(dpy, scr)) * 25.4) /
((double) DisplayHeightMM(dpy, scr))) + 0.5;
}
XCloseDisplay(dpy);
Note also that if you are for some odd reason scaling your whole display (e.g. with xrandr), then you should want the fonts to scale equally with everything else. It's just a horrible bad hack to use whole-screen scaling to scale just the fonts, especially when for most things it's simpler to just tell the application to use properly scaled fonts that will display at a constant on-screen point size (which is exactly what Xft uses the "dpi" resource to do). I'm guessing Ubuntu does something stupid to change the screen resolution, e.g. using xrandr to scale up the apparent size of icons and other on-screen widgets without applications having to know about screen size and resolution, then it has to lie to Xft by rewriting the Xft.dpi resource.
Note that if you avoid whole-screen scaling then applications that don't use Xft can still get proper font scaling by correctly requesting a properly scaled font, i.e. even with bitmap fonts you can get them scaled to the proper physical on-screen size by using the screen's actual resolution in the font-spec. E.g. continuing from the above shell fragment:
# For pre-Xft applications we can specify physical font text sizes IFF we also tell
# it the screen's actual resolution when requesting a font. Note the use of the
# rounded values here.
#
DecentDeciPt="80"
DecentPt="8"
export DecentDeciPt DecentPt
#
# Best is to arrange one's font-path to get the desired one first, but....
# If you know the name of a font family that you like and you can be sure
# it is installed and in the font-path somewhere....
#
DefaultFontSpec='-*-liberation mono-medium-r-*-*-*-${DecentDeciPt}-${FontXDPI}-${FontYDPI}-m-*-iso10646-1'
export DefaultFontSpec
#
# For Xft we have set the Xft.dpi resource so this allows the physical font size to
# be specified (e.g. with Xterm's "-fs" option) and for a decent scalable font
# to be chosen:
#
DefaultFTFontSpec="-*-*-medium-r-*-*-*-*-0-0-m-*-iso10646-1"
DefaultFTFontSpecL1="-*-*-medium-r-*-*-*-*-0-0-m-*-iso8859-1"
export DefaultFTFontSpec DefaultFTFontSpecL1
# Set a default font that should work for everything
#
eval echo "*font: ${DefaultFontSpec}" | xrdb -merge
Finally here's an example of starting an xterm (that's been compiled to use Xft) with the above settings (i.e. the Xft.dpi resource and the shell variables above) to show text at physical size of 10.0 Points on the screen:
xterm -fs 10 -fa $DefaultFTFontSpec
You could try to use xdpyinfo(1); on my system it outputs, among a lot of other things:
dimensions: 1280x1024 pixels (332x250 millimeters)
resolution: 98x104 dots per inch
depths (7): 24, 1, 4, 8, 15, 16, 32
I don't know whether it can help you because I don't know how do you change the DPI of your screen, but chances are it works. Good luck!
--- UPDATE after comment ---
In a comment below from the OP, it is said that "there is a setting to change the DPI"... still I don't know which. Anyway, I tried Ctrl+Alt+Plus and Ctrl+Alt+Minus to change the resolution of the X server on the fly. After having changed the resolution, and seeing everything bigger than before, I ran xdpyinfo again. IT DIDN'T WORK: still the same output. But may be the method you use (which?) instead works...
I am currently working with a Nao robot using Choregraphe and am trying to lower the confidence interval required to act upon a request made through QiChat from the default 50% to 30%.
I have found this solution, https://community.ald.softbankrobotics.com/en/forum/change-speech-engine-confidence-threshold-choregraphe-dialog-8624, but unfortunately the scripting functionality for Dialog boxes is deprecated in Choregraphe v2.1. Does anyone know what the "new" way to do this is?
I have found the solution. Scripting for Dialog boxes is not allowed but you can add a Python script before the Dialog box to change this interval. The code that should go in this box is below.
class MyClass(GeneratedClass):
def __init__(self):
GeneratedClass.__init__(self)
def onLoad(self):
#put initialization code here
pass
def onUnload(self):
#put clean-up code here
pass
def onInput_onStart(self):
# Lower confidence threshold from 50% to 30%
ALDialog = ALProxy('ALDialog')
ALDialog.setASRConfidenceThreshold(0.3)
self.onStopped() #activate the output of the box
def onInput_onStop(self):
self.onUnload() #it is recommended to reuse the clean-up as the box is stopped
self.onStopped() #activate the output of the box
Two solutions to increase recognition rate:
1) Add more variants to your input - for example, if you're listening for "yes", you should also make sure you listen for "yep", "yup", "yeah", "sure", "okay", "fine", etc. - concepts are useful for that, see the qichat doc.
1) as you suggest, set the confidence threshold - for a more compact version (I prefer less boilerplate):
class MyClass(GeneratedClass):
def onInput_onStart(self):
# Lower confidence threshold from 50% to 30%
ALProxy('ALDialog').setASRConfidenceThreshold(0.3)
self.onStopped() # activate the output of the box
HOWEVER, note that this is not very elegant; you will need to reset it, and it greatly increases the risk of false positives, so you should only use this if you can't solve it just by adding more variants.
setASRConfidenceThreshold is for Nao V5; in Pepper and Nao V6 you should use setConfidenceThreshold:
class MyClass(GeneratedClass):
def onInput_onStart(self):
# Lower confidence threshold from 50% to 30%
ALProxy('ALDialog').setConfidenceThreshold("BNF", 0.3)
self.onStopped() # activate the output of the box
I am using Maya to do some procedural work, and I have a lot of textures that I need to load into Maya, and they all have transparencies (alpha channels). I would very much like to be able to automate this process. Using PyMEL, I can create my textures and hook them up to a shader, but the alpha doesn't set properly by default. There is an attribute in the psdFileTex node called "Alpha to Use", and it must be set to "Transparency" in order for my alpha channel to work. My question is this - how do I use PyMEL scripting to set the "Alpha to Use" attribute properly?
Here is the code I am using to set up my textures:
import pymel.core as pm
pm.shadingNode('lambert', asShader=True, name='myShader1')
pm.sets(renderable=True, noSurfaceShader=True, empty=True, name='myShader1SG')
pm.connectAttr('myShader1.outColor', 'myShader1SG.surfaceShader', f=True)
pm.shadingNode('psdFileTex', asTexture=True, name='myShader1PSD')
pm.connectAttr('myShader1PSD.outColor', 'myShader1.color')
pm.connectAttr('myShader1PSD.outTransparency', 'myShader1.transparency')
pm.setAttr('myShader1ColorPSD.fileTextureName', '<pathway>/myShader1_texture.psd', type='string')
If anyone can help me, I would really appreciate it.
Thanks
With any node, you can use listAttr() to get the available editable attributes. Run listAttr('myShaderPSD'), note in it's output, there will be two attributes called 'alpha' and 'alphaList'. Alpha, will return you the current selected alpha channel. AlphaList will return you however many alpha channels you have in your psd.
Example
pm.PyNode('myShader1PSD').alphaList.get()
# Result: [u'Alpha 1', u'Alpha 2'] #
If you know you'll only ever be using just the one alpha, or the first alpha channel, you can simply do this.
psdShader = pm.PyNode('myShader1PSD')
alphaList = psdShader.alphaList.get()
if (len(alphaList) > 0):
psdShader.alpha.set(alphaList[0])
else:
// No alpha channel
pass
Remember that lists start iterating from 0, so our first alpha channel will be located at position 0.
Additionally and unrelated, while you're still using derivative commands of the maya.core converted for Pymel, there's still some commands you can use to help make your code read nicer.
pm.setAttr('myShader1ColorPSD.fileTextureName', '<pathway>/myShader1_texture.psd', type='string')
We can convert this to pymel like so:
pm.PyNode('myShader1ColorPSD').fileTextureName.set('<pathway>/myShader1_texture.psd')
And:
pm.connectAttr('myShader1PSD.outColor', 'myShader1.color')
Can be converted to:
pm.connect('myShader1PSD.outColor', 'myShader1.color')
While they may only be small changes, it reads just the little bit nicer, and it's native PyMel.
Anyway, I hope I have helped you!
I need to display a window Ext.Window with a colour different to that of the default theme.
Changing the colour of the guts of the window is easy enough. Changing the colour of the chrome of all popup windows is also very easy. Changing the chrome of a single window seems extremely hard. Best as I can tell, you need to copy all the styles (x-window and similar), rename and customise them and set the baseCls of the window.
Is there an easier way to do this?
In configs for the window ...
bodyCls: 'popWindow',
and then somewhere in a css
.popWindow
{
background-color: blue;
}
You can add your own custom class to the window, then write CSS rules for that class.
Check out the cls config option or the addCls method on Ext.Window. Try it out, then inspect the class applied to your window to figure out where to apply your CSS rules.
Here's the doc for Ext.Window. In Ext 3.x, I believe the method is addClass. But the config option was still cls (I think).
Sorry to answer my own question, but I finally worked out a way to colour a single window in isolation of other windows. Initially I thought I was going to have to clone the entire x-window set of classes and modify the clone but I have since found an easier way to do it.
I got a lot of help from this link but also used a lot of trial an error as my CSS skills suck
You'll need to clone and edit the background images used by
the overriding css. The files you'll need are top-bottom.png, left-right.png, left-corners.png, right-corners.png and tool-sprites.gif
The window that you wish to colour needs to have an id ('defn_display' in this
example).
Set the bodyCls of the window to a separate class that sets the background colour. For example:
.defn_content
{
background: #FFFFDD !important;
}
You need to set up the css class selectors to override the
x-window classes based upon this id using the new images cloned in step 1.
#defn_display * .x-window-tc {
background-image: url("/static/images/defn-top-bottom.png");
}
#defn_display * .x-window-ml {
background-image: url("/static/images/defn-left-right.png");
}
#defn_display * .x-window-mr {
background-image: url("/static/images/defn-left-right.png");
}
#defn_display * .x-window-tl {
background-image: url("/static/images/defn-left-corners.png");
}
#defn_display .x-window-tl {
background-image: url("/static/images/defn-left-corners.png");
}
#defn_display * .x-window-bl {
background-image: url("/static/images/defn-left-corners.png");
}
#defn_display * .x-window-tr {
background-image: url("/static/images/defn-right-corners.png");
}
#defn_display * .x-window-br {
background-image: url("/static/images/defn-right-corners.png");
}
#defn_display * .x-window-bc {
background-image: url("/static/images/defn-top-bottom.png");
}
#defn_display .x-tool {
background-image: url("/static/images/defn-tool-sprites.gif");
}
#defn_display * .x-window-header-text {
color: #515111;
}
The CSS seems to do the trick with one exception: the drag ghost is tricky to override since it is not a child of the window. As such, I still get a blue ghost during dragging.
(Tested under FF, Chrome and IE6 with ExtJs 3.4)
Check the ui property. I never tried it by myself, but I heard on Sencha conference that it's possible. Good luck...