How to use Modern UI Icons in AppBarButton - winrt-xaml
I'm developing a Windows 8.1 Store App. I have a CommandBar control with a couple of AppBarButtons inside. Using the standard icons is easy, I just set the icon property to the appropriate string like so :
<AppBarButton Icon="Download" Label="Download Files"/>
I'd like to use a couple of custom icons from the very nice free collection Modern UI Icons. Ideally, I'd like to be able to set the icon property in much the same way :
<AppBarButton Icon="transit.distance.to" Label="Distance to destination"/>
This would refer to this icon : PNG / XAML
Is this possible ?
If not, what are the alternatives ?
Tim Heuer proposes using a font file, although at present the font files available here only cover a sub-set of the icons, and also this code is quite unreadable :
<FontIcon FontFamily="ms-appx:///modernuiicons.ttf#Modern-UI-Icons---Social" Margin="0,2,0,0" Glyph="" FontSize="37.333" />
Would you believe that shows a twitter icon?!
Tim Heuer also proposes using vector data, and one of the commenters explains how the vector data can be rolled into a style. I could do that, but then I would have to copy and paste the path data for each icon I want to include ?
Should I be using the PNG files, as explained in this question ? That looks pretty messy as well.
What a nightmare!
I'm not sure what the nightmare part is -- you want to use a custom icon that isn't present in the 200+ supplied defaults. You have options:
Use SymbolIcon and supply your own font. You note that you don't like that the code feels unreadable. Unicode ranges are universally used for symbol fonts and I agree that Unicode isn't human-readable, but a simple code comment would help ;-) Fonts give you the most ease and flexibility because they are also vectors.
PathIcon. You convert your image into vector geometries we can render. This would be the second best, but also requires a bit fine tuning of the vectors to get right. For people not familiar with working with geometries this can be annoying at first. Blend and Inkscape are helpful tools here.
BitmapIcon. This would allow you to use your PNG, however you now must supply multiple of them for different scales and states. This is my least favorite option as it requires most work, but for some may be the simplest. Now your problem you will hit is there is an issue with BitmapIcon for non-rectangular shapes (which looks like your icon is). This won't have the fidelity you seek due to a bug in rasterizing.
Contact metroicon author and see if he can put it into the font file so you can use option #1 :-)
Maybe this is what you're looking for:
<AppBarButton Label="Transit">
<AppBarButton.Icon>
<PathIcon Data="F1 M 3.912,17.38C 4.89067,17.38 5.688,18.2653 5.688,19.3586C 5.688,20.448 4.89067,21.3333 3.912,21.3333C 2.92667,21.3333 2.136,20.448 2.136,19.3586C 2.136,18.2653 2.92667,17.38 3.912,17.38 Z M 16,17.38C 16.984,17.38 17.776,18.2653 17.776,19.3586C 17.776,20.448 16.984,21.3333 16,21.3333C 15.016,21.3333 14.224,20.448 14.224,19.3586C 14.224,18.2653 15.016,17.38 16,17.38 Z M 21.3333,18.9626L 18.464,18.9626C 18.292,17.62 17.2547,16.5933 16,16.5933C 14.7453,16.5933 13.708,17.62 13.536,18.9626L 6.37467,18.9626C 6.20267,17.62 5.16667,16.5933 3.912,16.5933C 2.656,16.5933 1.62,17.62 1.448,18.9626L 0,18.9626L 0,10.2706C 0,9.396 0.636,8.69196 1.42133,8.69196L 19.5573,8.69196C 20.3387,8.69196 20.9787,9.396 20.9787,10.2706M 20.4427,10.2706L 19.1973,10.2706L 19.1973,15.8013L 20.62,15.8013M 17.776,13.432L 17.776,10.2706L 14.224,10.2706L 14.224,13.432M 13.5107,10.2706L 9.95333,10.2706L 9.95333,13.432L 13.5107,13.432M 9.24533,10.2706L 5.688,10.2706L 5.688,13.432L 9.24533,13.432M 4.97867,10.2706L 1.42133,10.2706L 1.42133,13.432L 4.97867,13.432M 14.5787,2.36932L 12.4427,0L 15.2867,0L 17.776,2.45862L 17.776,0L 19.1973,0L 19.1973,6.31732L 17.776,6.31732L 17.776,3.85864L 15.2867,6.31732L 12.4427,6.31732L 14.5787,3.948L 7.73467,3.948C 7.41733,5.31195 6.30267,6.31732 4.97867,6.31732C 3.40667,6.31732 2.136,4.90533 2.136,3.16132C 2.136,1.41064 3.40667,0 4.97867,0C 6.30267,0 7.41733,1.00531 7.73467,2.36932L 14.5787,2.36932 Z " HorizontalAlignment="Center" VerticalAlignment="Center"/>
</AppBarButton.Icon>
</AppBarButton>
Hope this helps!
Related
How to create XML in Google custom search Autocomplete?
I try to use the structure at https://developers.google.com/custom-search/docs/queries but it can't upload successfully. <Autocompletions> <Autocompletion term="cake" type="1" language=""/> <Autocompletion term="strawberry.*" type="2" match="2" language=""/> <Autocompletion term="vanilla" type="2" language=""/> <Autocompletion term="apple" type="3" language=""> <Promotion id="1" queries="dessert" title="Apple pie for dessert!" url="http://www.example.com/applepieforsale" start_date="" end_date="" image_url="" description="Apple pie is the best dessert ever!"/> <Promotion id="2" queries="apple" title="Buy Apple pie" url="http://www.example.com/applepieforsale" start_date="" end_date="" image_url="" description="We stock the best apple pie in the world, right here."/> </Autocompletion> </Autocompletions> My website is using wordpress; I get the title of posts and want to use it as string query for google custom search. Please help me figure out how to create XML for autocomplete.
It's not liking the description attributes. It you remove those, then it will work.
Leave all terms in XML like that: <Autocompletion term="%term-title%" type="%type%" language=""/> Be careful with the length of the terms, I found that if it is 3 or less words, Google will accept it fine. There is also no big restriction on ammount of entries you're adding (I added 9000 entries in one go). And I added them in Russian, so there are no problems with encoding either. The final format should be like that: <Autocompletions> <Autocompletion term="%term-title%" type="%type%" language=""/> ... <Autocompletion term="%term-title%" type="%type%" language=""/> </Autocompletions> Not terribly well documented by Google, so you have to waste time reading this. Hope it helps :)
NSTextView will resize but parent NSScrollView not Resizing with setFrameSize
First let me say I'm coming from the iOS world and am trying to make my first OSX app. So apologies for the question if the answer is obvious. :) I'm trying to setup an NSTextView to resize according to the amount of text in it. I've been successful at getting the NSTextView to resize properly but it's superview (NSScrollView) won't resize. This is what I have so far... [self.messageBodyTextView setVerticallyResizable:YES]; [self.messageBodyTextView.layoutManager ensureLayoutForTextContainer:self.messageBodyTextView.textContainer]; [self.messageBodyTextView.layoutManager boundingRectForGlyphRange:NSMakeRange(0, [self.messageBodyTextView.layoutManager numberOfGlyphs]) inTextContainer:self.messageBodyTextView.textContainer]; NSRect rect = [self.messageBodyTextView.layoutManager usedRectForTextContainer:self.messageBodyTextView.textContainer]; [self.messageBodyTextView.textContainer setContainerSize:rect.size]; [self.messageBodyTextView setMaxSize:NSMakeSize(self.messageBodyTextView.bounds.size.width, rect.size.height)]; [self.messageBodyTextView.textContainer setHeightTracksTextView:YES]; [self.messageBodyScrollView.documentView setFrameSize:rect.size]; [self.messageBodyScrollView.documentView setFrame:rect]; [self.messageBodyScrollView setFrameSize:rect.size]; self.messageBodyTextView resizes just fine with all this code (I have a feeling a have a bunch of redundant code in there). But self.messageBodyScrollView either doesn't resize at all or if I try to use setBounds then it not only resizes messageBodyTextView to messageBodyScrollView's full size but it also stretches out the text inside. note: messageBodyTextView and messageBodyScrollView are both attached to my IB doc as IBOutlets. My code used to be a lot shorter but this is where I've gotten to by adding in anything I can find to make these two views match up. Any help would be very much appreciated!
Height of tab (JTabbedPane) does not change
As the title says, the height of my tabs is not increasing as it should, my code looks like this:
JTabbedPane jtp = new JTabbedPane();
JLabel iconInTab = new JLabel(new ImageIcon("myImage.png"));
iconInTab.setPreferredSize(new Dimension(100,80)); // is the size of my Image, I've also try to do this using getSize
jtp.addTab(null,new JPanel());
jtp.setTabComponentAt(0,iconInTab);
I've also try this using html but it did not work either:
jtp.addTab("<html><p><p><p></html>",new ImageIcon("myImage.png"),new JPanel());
with the first code the problem is not the change of the size horizontally (the width change correctly), the problem is only on the height, with the second code, if I add multiple lines inside the html code, the text appear incomplete (just show the middle line) (also the width behaves as expected, the problem is the height). . .
why is this happening? or how could I get this done?
Note: S.O.: Mac OS X 10.8.1
Solved!!! The problem was that the default UI over MAC OS X (com.apple.laf.AquaTabbedPaneContrastUI), you only need to change it to the basicTabbedPaneUI (or the one of your preference), in my particular case I need to extend this class (it was a pain in the *, because what I wanted was really complex) to get the look & feel that I was expecting, if you have the same trouble just do this before adding your tabs: myTabbedPane.setUI(new BasicTabbedPaneUI()); Note: Checking the default UI of your TabbedPane, may solve many different problems.
How can I save OpenGL draw with OpenGL?
I draw a screen with OpenGL commands. And I must save this screen to .bmp or .png format. But I can't do it. I am using glReadpixels but I can't do continue. How can I save this drawing in c++ with OpenGL?
Here it comes! you must include WinGDI.h (which i think the GL will do it!)
void SaveAsBMP(const char *fileName)
{
FILE *file;
unsigned long imageSize;
GLbyte *data=NULL;
GLint viewPort[4];
GLenum lastBuffer;
BITMAPFILEHEADER bmfh;
BITMAPINFOHEADER bmih;
bmfh.bfType='MB';
bmfh.bfReserved1=0;
bmfh.bfReserved2=0;
bmfh.bfOffBits=54;
glGetIntegerv(GL_VIEWPORT,viewPort);
imageSize=((viewPort[2]+((4-(viewPort[2]%4))%4))*viewPort[3]*3)+2;
bmfh.bfSize=imageSize+sizeof(bmfh)+sizeof(bmih);
data=(GLbyte*)malloc(imageSize);
glPixelStorei(GL_PACK_ALIGNMENT,4);
glPixelStorei(GL_PACK_ROW_LENGTH,0);
glPixelStorei(GL_PACK_SKIP_ROWS,0);
glPixelStorei(GL_PACK_SKIP_PIXELS,0);
glPixelStorei(GL_PACK_SWAP_BYTES,1);
glGetIntegerv(GL_READ_BUFFER,(GLint*)&lastBuffer);
glReadBuffer(GL_FRONT);
glReadPixels(0,0,viewPort[2],viewPort[3],GL_BGR,GL_UNSIGNED_BYTE,data);
data[imageSize-1]=0;
data[imageSize-2]=0;
glReadBuffer(lastBuffer);
file=fopen(fileName,"wb");
bmih.biSize=40;
bmih.biWidth=viewPort[2];
bmih.biHeight=viewPort[3];
bmih.biPlanes=1;
bmih.biBitCount=24;
bmih.biCompression=0;
bmih.biSizeImage=imageSize;
bmih.biXPelsPerMeter=45089;
bmih.biYPelsPerMeter=45089;
bmih.biClrUsed=0;
bmih.biClrImportant=0;
fwrite(&bmfh,sizeof(bmfh),1,file);
fwrite(&bmih,sizeof(bmih),1,file);
fwrite(data,imageSize,1,file);
free(data);
fclose(file);
}
Unless you're feeling particularly ambitious (or perhaps masochistic) you probably want to use a library like DevIL that already supports this. The current version can load and/or save in both PNG and BMP formats, along with a few dozen others. Compared to something like IJG, this is oriented much more heavily toward working with OpenGL or DirectX (e.g., it can load a file fairly directly into an texture or vice versa).
I know you're asking for raster formats, but an indirect way would be to first output vector graphics through gl2ps (http://www.geuz.org/gl2ps/). Examples of usage are provided with the package and on the site (http://www.geuz.org/gl2ps/#tth_sEc3). Then, the vector output can be converted to the format of your choice using another tool (Inkscape, Image/GraphicsMagick, etc.) or library. An added benefit is you can convert to bitmaps of any resolution in the future.
One thing need to be fixed at: bmih.biXPelsPerMeter = bmih.biYPelsPerMeter = 0; Otherwise, some picture edit can not open correctly.
best option for background subtraction using emgucv?
can you suggest a good option for background subtraction using emgucv? my project is real time pedestrian detection.
Not sure if you still need this, but...in EmguCV, if you have 2 images of say type Image<Bgr, Byte> or any other type, called img1 and img2, doing img1 - img2 does work! There is a function called AbsDiff as well, I think it works like this: img1.AbsDiff(img2), you could look into that. If you already have the picture of the background (img1) and you have the current frame (img2), you could do the above.
This is quite possible take a look at the "MotionDetection" example provided with EMGU this should get you started. Effectively the code that removes the foreground is effectively named "_forgroundDetector" it is the "_motionHistory" that presents stores what movement has occurred. The example has everything you need if you have trouble running it let me know, Cheer Chris See:Removing background from _capture.QueryFrame()