View Full Version : a little help to get custom theming working

23 Aug 2011, 7:45 AM
running the build-touch-chart batch file on windows (no custom theme yet, just running it after extracting the charts zip) fails with the errors seen in the picture.
any help would be great.

24 Aug 2011, 12:16 PM
Hi - Thanks for the report (and sorry for the late response).

You're correct that there's an error with building the SCSS files from touch-charts. The charts/resources/sass/config.rb file loads in the path `../../../touch/resources/themes` which means that in order to be able to build the stylesheets correctly you will also have to download sencha-touch, and add the source in a touch folder right next the touch-charts folder. This is the config.rb file:

# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)

# Load the sencha-touch and touch-charts frameworks automatically.
load File.join(dir, '..', '..', '..', 'touch', 'resources', 'themes')
load File.join(dir, '..', 'themes')

# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")

# Require any additional compass plugins here.
environment = :production
output_style = :compressed

Please let me know if you have any further problems building the stylesheets after downloading sencha-touch.

Thanks again for the report, I'll be updating the guides with this information :)

25 Aug 2011, 7:41 AM
I am still having some problems. the output from the script now is:
LoadError on line ["29"] of <internal: no such file to load -- resources/sass/..
Run with --trace to see the full backtrace
now I know this sounds stupid but 3 folders up from where I execute the script there is a sencha-touch-1.1.0 folder with /resources/themes/ folders in it and a compass_init.rb inside that so I dont really get this message. also, if I move the sencha touch file from its current place I get the old error I told you about earlier...

I have tried adding --trace to you script but I couldnt get it to output anything so I probably did not put it in the correct place.
any suggestions?

Jamie Avins
26 Aug 2011, 6:57 AM
I think it needs to be up one folder, not 3 (touch-charts at the same level as sencha-touch) as it is from resources/sass not your current directory that it is looking.

27 Aug 2011, 11:10 PM
thanks but I am not sure you are correct.
let me sum up what I have:
I currently have touch-charts and sencha-touch-1.1.0 folder on the same level one next to the other (both are the root folders of their respective projects)
I have modified the chart's config.rb file to point to the touch folder correctly (replaced 'touch' with 'sencha-touch-1.1.0' in the proper 'join' function)

before I replaced the name I got the error I was first complaining about ('error energy-demo.scss (Line 13: File to import not found or unreadable: secha-touch/default/all.' see my first post in this thread..)

this error occoured no matter what the path was as long as it did not point to the proper path. once the path was corrected and only when the path points to the correct place i get the error:
'LoadError on line ["29"] of <internal: no such file to load -- resources/sass/.
Run with --trace to see the full backtrace'
which is strange because it prints a message that the config.rb cant be found but I am certaqin it is found (like I said all other paths yeild the other error). running with --trace outputs this:

"LoadError on line ["29"] of <internal: no such file to load -- resources/sass/..
<internal:lib/rubygems/custom_require>:29:in `require'
<compass-lib-path>/frameworks.rb:69:in `block in register_directory'
<compass-lib-path>/frameworks.rb:33:in `detect_registration'
<compass-lib-path>/frameworks.rb:68:in `register_directory'
<compass-lib-path>/configuration/data.rb:125:in `load' resources/sass/config.rb:5:in `parse_string'
<compass-lib-path>/configuration/serialization.rb:21:in `eval'
<compass-lib-path>/configuration/serialization.rb:21:in `parse_string'
<compass-lib-path>/configuration/serialization.rb:15:in `block in _parse'
<compass-lib-path>/configuration/serialization.rb:14:in `open'
<compass-lib-path>/configuration/serialization.rb:14:in `_parse'
<compass-lib-path>/configuration/file_data.rb:29:in `block in new_from_file'
<compass-lib-path>/configuration/inheritance.rb:96:in `with_defaults'
<compass-lib-path>/configuration/file_data.rb:28:in `new_from_file'
<compass-lib-path>/configuration/helpers.rb:41:in `configuration_for'
<compass-lib-path>/configuration/helpers.rb:88:in `add_project_configuration'
<compass-lib-path>/commands/project_base.rb:31:in `add_project_configuration'
<compass-lib-path>/commands/project_base.rb:25:in `configure!'
<compass-lib-path>/commands/project_base.rb:15:in `initialize'
<compass-lib-path>/commands/update_project.rb:29:in `initialize'
<compass-lib-path>/exec/sub_command_ui.rb:43:in `new'
<compass-lib-path>/exec/sub_command_ui.rb:43:in `perform!'
<compass-lib-path>/exec/sub_command_ui.rb:15:in `run!'
compass-bin-path/compass:25:in `block in <top (required)>'
compass-bin-path/compass:39:in `call'
compass-bin-path/compass:39:in `<top (required)>'
C:/Ruby192/bin/compass:19:in `load'
C:/Ruby192/bin/compass:19:in `<main>'"

I would appreciate your help as I am stuck on this for a few days now.
thanks in advance.

29 Aug 2011, 10:18 AM
touch and charts should be at the same level, and named "touch" and "charts".

The folder structure would be



I include the src folders of each project so you can exactly tell how things are set.

I hope this helps,

30 Aug 2011, 12:12 AM
I have redownloaded sencha touch and touch charts. expanded them inside the same dir (see pic below). changed the names to charts and touch. run the batch file frmo the charts directory and still have the error I stated before. this is a 'clean' sencha install so either I am missing something or something is wrong.
I would appreciate any help I can get.

30 Aug 2011, 12:44 PM
I too had the exact same problem. I think I figured this out though. Here is what I did:

I have both products installed as C:\Sencha-touch-charts and C:\sencha-touch-1.1.0
In C:\Sencha-touch-charts\resources\sass\config.rb, I got the same error as you. Replace line 6 with this:

load File.join(dir, '..', '..', 'sencha-touch-1.1.0', 'resources', 'themes')

Note that there are 2 '..' and not 3 '..' now. That will eliminate the 'No such file to load' error. If you run the bat file again you will now get an import error in energy-demo.scss saying that it cannot load 'sencha-touch/default/all'. This stumped me for awhile until I did this:

Copy the sencha-touch folder located in c:\sencha-touch-1.1.0\resources\themes\stylesheets into C:\Sencha-touch-charts\resources\sass. The folder for C:\Sencha-touch-charts should look like this:


After that folder move I was able to run the build-touch-charts bat file successfully and energy-demo.css was created in C:\Sencha-touch-charts\resources\css.

I hope that fixes your error as well.

30 Aug 2011, 11:41 PM
Thanks @ChrisWalker!
now its compiling.
I'll try to use a custom theme now and hopefully it will work.
thanks everyone for the help.
Sencha guys, I think the docs need some tweaking as this is probably the first thing every developer will run into when trying to get theming working in sencha charts.

31 Aug 2011, 6:51 AM
Ok played with it for some time.
after i was able to compile everything using the suggested method i have noticed that the ThemeList .js is not regenerated. so basically, this method does not do the trick. it looks like the generate-chart-themes.bat is not even called from the build-touch-charts.bat which seem to exit after the compass command.

this situation only allows to create scss files and compile them to css but I cannot use/update/create _scss files as they do not re-generate.

again. I would appreciate any help on this.
thanks in advance.

BTW1: the only thing I was able to style is the legend, which I think is a regular DOM anyway and not a part of the canvas draw...
BTW2: @ChrisWalker, the solution you suggestion, while compiling seem to break the pictos include and the pan/zoom icon does not appear after compiling this way.

31 Aug 2011, 8:16 AM
I noticed that as well after I sent my post because I am trying to add some of the pictos. According to @davidkaneda 's blog on theming he says:

@include pictos-iconmask($name) This allows you to embed a custom icon mask for use in buttons or tabs. There are over 300 icons that you can include in your application, thanks to Drew Wilsonís fine Pictos set. All of the icons are base64 encoded into your CSS to cut down on server requests, which is useful in the mobile context. The icons can be found in the Sencha Touch distribution under resources/themes/images/default/pictos/. To include a new icon, simply pass the name of the icon you want, minus the .png extension:

@include pictos-iconmask('resize');

I looked in the CSS to see what this generated and this is what I see:

.x-tab img.resize, .x-button img.x-icon-mask.resize {
-webkit-mask-image: theme_image("default", "pictos/resize.png");

The mixin pictos-iconmask (in _mixins.scss) has this

* Includes a base64-encoded icon for use within tab bars and buttons (With the component parameter iconMask: true).
* @param {string} $name The name of the icon to be included. This is to match the name of the icon file (located at resources/themes/images/default/pictos) without its extention (.png).
* @example
* @include pictos-iconmask('attachment');
@mixin pictos-iconmask($name) {
.x-tab img.#{$name}, .x-button img.x-icon-mask.#{$name} {
-webkit-mask-image: theme_image($theme-name, "pictos/" + $name + ".png");

which seems to match the generated CSS.

I also have lost my toolbar ui 'forward' and 'back' images as well.

So either Sencha did not include the correct scss files in the touch/chart distribution or we are doing this wrong (which I hope is the case).

In any case I am inclined to chalk this up to Sencha's growing pains, or as I say- 'This product has a lot of R&D'. where R&D = Release and Development

31 Aug 2011, 8:44 AM
Thanks for your response.
I must say it was super easy custom theming sencha and i am sure it will be easy for charts too once everything is in place.
I just hope someone from sencha dev will address this today and tell us what to do next.

1 Sep 2011, 12:03 AM
ok so i made some good progress.
in general, I was able to create a custom theme the following way:
create an _MyTheme.scss as defined in the chart styling guide.
now, in order to create a custom theme you need to run the generate-chart-themes.bat and JSBuilder.bat as defined in the build-touch-charts.bat file
Due to the fact that after the compass command the generate-chart-themes.bat seem to exit, I called both scripts explicitly (modifying some properties such as the deploy dir etc. this is pretty easy.
after this you should verify that ThemeList.js was modified(under charts\src\chart\theme) and touch-charts.js was modified/create (under were you pointed the deploy dir in the JSBuilder.bat)
also, if you open both JS files and do a text search on your theme name (MyTheme) you should find it there.
now you can create a new chart with theme: 'MyTheme' (like the guide says).
doing the above, I was able to skip the scss to css generation altogether. using only _.scss file for the theme.
note that after you prepare your custom theme you will still need to style some elements that are not a parts of the chart's canvas. for me it was the legend and panzoom interaction this can be done via scss or css directly. I skipped the scss and did the following:
.x-legend .x-legend-item{
color://this is the text color of the legend
thats it. hope this makes some sense.

9 Feb 2012, 1:08 AM
It's no use complaining. It's no use complaining. It's no use complaining. It's no use complaining.

9 Feb 2012, 3:10 AM
I too modified css directly with out creating and building touch-charts.bat file. Everythng is working fine for me without any issues.

I dont think that again we need to create and generate our own custom theme by creating and running touch-charts.bat file