PDA

View Full Version : Problem Including a custom Icon



koolaid1551
21 Jul 2011, 1:52 PM
So I made a facebook icon to add the the default picto set so I can use it in my app however the icon isn't working it just shows up as a white box. However I added the music1 icon which is included in the default template picto set and it shows up no problem. I will include both the codes in my source files below:

my custom.css


.x-tab img.facebook1,.x-button img.x-icon-mask.facebook1 {
-webkit-mask-image:url('data:image/png;base64,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')
}
.x-tab img.team1,.x-button img.x-icon-mask.team1 {
-webkit-mask-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAEq0lEQVRoBe2aWahNXxzHz7mumXTLEJL+5cFM6Z+XGx7IUP4oL2SIB/HkRYmU/KM8eDGWIhme8IB4kX+h/pSUsczcDOEf+huumevzPc7Wds4+a6+1uHtzz171ae291vpNa97n3nxTU1OumlJNNQWrWLOAW/qIZyOcjXAL64FsSrewAS0LJxvhsi5pYQW1v0I8+Xy+NX50h3oYBl0guPN+5PkKHIUHXIXfk3unfNp3aYLthvfzYQHUQTsILzUFriCfwm7Yhs/3yP2SAk4LPNZIbofnoMBMfKb+BRyCXr4+pxlsWxxfCo1gCrS07i3td0Irn6DDUwcdiaY+WFsIHRytqqMmwlhHuULzVAJm3eaxPh76+jiNjNb99KIeJxWpBIyHsjsCFLhvGoBgR1fhtAJuhaP9XJ0tae/lu5dQieHf6jXNgH9kOnt3svNNi42iN9a0Q2oNtgddCu6CzsfrHBWfyOOS2jSAblbJJtuzDK+07uaBrnm6ALwDBatcZ+l/sBHq4nTSRrrWQ+kZ6/J+CvlOcbZK611GeDIGNoFGtXQ6tqFM56muh7XMgsUYirvz6uaUeLJawwTQCc9WgIIqDTbstAKfAaPChc30LD9MvkSatQoYyUkwNFJDeaHux4vKi8tKbG2XCRYLXpG/qVRZqdzWaFcUaH3ZJn31mJKm82VTA4u6BpaNPh2dkm3ANjtv2LCxPY6q846DPgR8kr6u/vERtA3YR3eczCMa7I9rVKH+FuUHKtQZi1MLmEF+iWd74YPRw/JKzY6DyHvNjtQCLsbxL/mF8piMJQ+p3WJsYai0Ddh1+7dqzyg9w7fD4LL57EDuiSEmY5VtwNcdnNIOfN5o9fvKrbyeAZtTQLNh8/fijm/0VuzPPKjUd+c1kFNxaAcdY6M3aEP7KaAf6Uy6dXObE8j45lZXS5Q3ctvag8G/IS7doP3xuEbo0081+ogXgyDuKqqLxmjkyHI34Ap2/teLU7LtKZT2Av08ahoFrcUJlXRSp6tnf1gJOkcfg0lfpTrt8KdhNfwJhZ92K9kNl8dO56AxSvWFsxwUVJQjWrvHoEMgE+SUaSbptrYELoJGM0qHa5mOtKuwATRL2gY2K+VWAaNI80h/HRgCwQYTdk6d0AD1YUO8q5PqYCZcgtcQlvtZz7J/BzQg+oFPHVz4I0PYHz0bA0ZIu3hnUO/Ngp3QAGFH1ctHYUignGcFqo+IejgCahOWaa5nXWlPwTToCa0Dn4I8MmAaakS1qYyEtXAfopxUz+6DPoXe+yrXnvdxsB70NRMll0SZrp6zoQfURAasCtAGMBCWQdxRdJI2fYvBahr9AavAdzP62R2hfWUXaCkWRvvbCKsABoNGVBtBnHHtlCNCI/sX72ct5OL0Nkf9TfyaD7WFgHnoWCxQhe1620Hbr72Wy/XmOWozaw7nfXU+xMcxUDguNpLr68NF2dTQ6M5FVtPHRT6Ntjr7c2s8HR1eDFiXiXWeOhIPugZHtaP+aJLjv0VSwFqzVZMUcFUlnZ3nwGeUG4s9pel8G04U33/pLPV/akm6d6puSmcBJz3FkraXjXDSPZ60vWyEk+7xpO1lI5x0jydtr+pG+AtvuGAnrIFRuAAAAABJRU5ErkJggg==')
}


My custom.scss


@include pictos-iconmask('facebook1');
@include pictos-iconmask('music1');



Excerpt from my Script where I use the icon in a tabbar


{
xtype: "setlist",
iconCls: "music1",
title: "Sets"
}, {
title: "Facebook Feed",
iconCls: "facebook1",
xtype: "facebook"
}




Is there an additional place that i need to do something if the icon isn't included with the defualt picto set. Also I have both .png files in the picto folder...
I made the facebook picto in photoshop CS3 and saved it as a .png, then I converted both that and the already made music icon with http://www.motobit.com/util/base64-decoder-encoder.asp . So I think that photoshop or how I made the icon might be the problem but i am not sure. You can see the icon by taking whats inside the "image:url('')" and paste it in chrome address bar.

Hertz
21 Jul 2011, 3:40 PM
Try adding iconMask: true

{
xtype: "setlist",
title: "Sets",
iconCls: "music1",
iconMask: true
}, {
xtype: "facebook",
title: "Facebook Feed",
iconCls: "facebook1",
iconMask: true
}

http://dev.sencha.com/deploy/touch/docs/?class=Ext.Button

koolaid1551
21 Jul 2011, 6:02 PM
I tried that both before and after the iconcls and it didn't work... keep in mind that the music icon loads but the facebook one just loads as a white box. its leading me to think it has something to do with the way i made it in photoshop or if theres a core file that i need to edit as well when i add files to the pictos folder.

Allthough i did notice that the that the theme_images.rb in the resources/themes/lib folder looks like it takes anything in the image folder and already adds it to sencha touch, so im pretty confused.

Also iconMask is true by default in tab panels.

koolaid1551
24 Jul 2011, 5:49 PM
anyone have any ideas?

Hertz
26 Jul 2011, 6:43 AM
I might be wrong but, I see you are trying to compile your own css with sass and compass.

And, I believe the purpose behind compiling your own icons into your app.css is that you can simply pass a .png file, and the compiler will take care of base64 encoding it.

But you are using the encoded image from the beginning, where you should instead be passing the url of your regular image.png file.

But again, maybe I'm wrong.

koolaid1551
27 Jul 2011, 4:58 PM
I am not compiling anything. Do i have to. I mean isn't the compiler just going to do exactly what I did. Remember that it works on images that are in the pictos folder, but not the one I made, i mean unless there's a hidden Sencha touch file(or maybe I over looked one) somewhere that's storing that information.

Hertz
27 Jul 2011, 5:54 PM
It is one way yeah, to compile your own theme for your app, I thought you were compiling because you are using scss (which is only used by the compiler by the way, to create your own custom css).

But if you are not, then you could just include your icon png into your app images folder and:


Set the iconCls to class-name.
Define a rule in your application stylesheet: .class-name
Iniside the rule, pass the url of your png to the -webkit-mask-image property

Which for the most part you already did, except that you added extra selectors to your CSS rule:

All this: .x-tab img.facebook1,.x-button img.x-icon-mask.facebook1
Shoud only be: .facebook1

Haven't tried passing a base64 encoded image in the CSS though, only URLs to actual png files inside my apps images folder.

I hope it makes sense.

bharatn
27 Jul 2011, 6:41 PM
koolaid1551, You dont need to touch the css file. It will be generated from sass/compass script including the base64 encoding of the image.

You can refer to these posted by David Kaneda before.

* Presentation at SenchaCon last year: http://vimeo.com/17879651
* Introductory blog post: http://www.sencha.com/blog/an-introd...g-sencha-touch
* Full variables and mixins docs: http://dev.sencha.com/deploy/touch/docs/theme/

Hanni Sullivan
27 Jul 2011, 11:10 PM
Could some administrator please keep spam bots like barrielove out of here. Thank you.

mitchellsimoens
28 Jul 2011, 4:56 AM
Could some administrator please keep spam bots like barrielove out of here. Thank you.

Please just report the post, replying to a post doesn't mean it will get noticed.

koolaid1551
29 Jul 2011, 4:42 AM
koolaid1551, You dont need to touch the css file. It will be generated from sass/compass script including the base64 encoding of the image.

You can refer to these posted by David Kaneda before.

* Presentation at SenchaCon last year: http://vimeo.com/17879651
* Introductory blog post: http://www.sencha.com/blog/an-introd...g-sencha-touch
* Full variables and mixins docs: http://dev.sencha.com/deploy/touch/docs/theme/

it works now after I have compiled it, still not sure why my way didn't work. on the other hand the posts that you gave me are outdated.


Just incase anyone else was wondering how I eventually got to compiled sass:

This post helped me get on the right path to get sass to compile: http://www.sencha.com/forum/showthread.php?127607-Mastering-the-Compass-SASS-Setup-with-Sencha-Touch

I had to update my config.rb file (because my project folder was on the same level as the example folder in the defualt sencha touch package


# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)
# Load the sencha-touch framework automatically.
load File.join(dir, '..', '..', '..', 'resources', 'themes')
# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")
# Require any additional compass plugins here.
images_dir = File.join("..", "img")
//output_style = :compressed
//environment = :production
output_Style = :expanded
environemnt = :development


Then to compile I used the following compass command in command prompt, I ran the command while I had the command prompt pointed to the sass folder in my project(project/resources/sass/)


compass watch

Hanni Sullivan
29 Jul 2011, 5:38 AM
@mitchell: You'e right. Sorry, I simply overlooked the report button. And thanks for getting rid of the bot post.