Raphuccino > falling at the first hurdle

[Jon Payne]

Hi guys

     I've been playing with the Rapphucino demo, got it loading in SVG strings as a path, animating etc. all hunky dory - no problem (except that firefox doesn't like the little path file linking to the Raphhuccino folder "..\..\xxxxxx".

     So I decided to run with it, and incorporate it into my own app. Following the instructions 

"Copy the Raphuccino folder to your project’s Frameworks folder and include @import <Raphuccino/Raphuccino.j> in your class/controller/whatever.

Then create your RCRaphaelView as you would create a normal CPView, or use Atlas and a custom view and set it’s class to RCRaphaelView."

Now the demo uses atlas. I'm not using Atlas.

So in my little view class, i've added:

@import <Raphuccino/Raphuccino.j>

in the correct spot,

and

var raphaelView = [[RCRaphaelView alloc] initWithFrame:CGRectMake(ViewXOrigin+MinBorder,ViewYOrigin+MinBorder,ViewXMax-MinBorder,ViewYMax-MinBorder)];

which you can read as

var raphaelView = [[RCRaphaelView alloc] initWithFrame:CGRectMake(0,0,1024,600)];

for the sake of argument, as all those variables are tested and tried with canvas and work fine.

Then if I try and run [raphaelView clear]; i get the following error:

TypeError: _paper is null

and other similiar errors when calling other functions. 

I've tried removing the var, but for some reason it doesnt intiate the window properlyh, however the iframe does appear as it obscures the outline of my tabview when its too big.

Since this is all handled by the cib in the demo, i can't see what i'm missing. anyone have any ideas? 

Its such a basic problem....

cheers

Jon 

[Johannes Fahrenkrug]

Hi Jon,

you have to set a delegate on your RCRaphaelView and imlement the "raphaelViewDidFinishLoading" method. Wait for it to be called. Only then you can call other methods on the RCRaphaelView (the _paper isn't initialized before that point).

See https://github.com/jfahrenkrug/Raphuccino/blob/master/Raphuccino/RCRaphaelView.j#L56

Cheers,

Johannes

[Jon Payne]

Thank you!! will have a crack tomorrow ;)

Then i'll re-write the demo app in hard coded cappuccino (no CIB) and fork it.

might include g.raphael.js as well, should be easy enough to include them. All kinds of pretty.....

[Jon Payne]

Not working yet.....

I have a tabview, which calls my class "MyFloorPlanView". it imports the relevant Raphuccino files:

@import <Raphuccino/Raphuccino.j>

 and has a drawRect function,  which initiates the raphaelView as below:

- (void)drawRect:(CPRect)aRect
{

    var raphaelView = [[RCRaphaelView alloc] initWithFrame:CGRectMake(0,0,1024,600)];

    console.info("RaphaelView class instance created.");
    [raphaelView setDelegate:self];
    console.info("RaphaelView delegate notified");
}

and an accompanying delegate method:

- (void)raphaelViewDidFinishLoading:(RCRaphaelView)aRaphaelView //delegate to return Raphael success
{
   console.info("RaphaelView has finished loading");
 [raphaelView clear];
 var path = [RCPath pathWithRaphaelView:raphaelView SVGString:@"M 28.325069,107.46114 L 86.363933,107.46114 C 86.363933,107.46114 54.965854,47.901248 54.965854,113.95879 C 54.965854,180.01642 55.917304,289.39016 55.917304,289.39016 L 97.781403,289.39016 C 97.781403,289.39016 -19.723493,335.41338 20.713423,289.39016 M 135.4337,199.05155 L 107.92794,199.05155 C 107.92794,199.05155 145.25721,285.0586 107.92794,285.0586 M 127.21646,219.11976 C 146.59077,170.15274 159.38366,192.01981 159.38366,192.01981 L 159.38366,283.62489 L 144.89876,283.62489 M 163.43194,175.68487 L 186.44434,130.31885 L 186.44434,285.0586 C 186.44434,285.0586 184.36396,208.17176 211.00472,191.92826 C 237.6455,175.68487 240.1873,231.89236 212.59506,231.89236 C 185.00283,231.89236 193.87853,231.99563 193.87853,231.99563 L 240.02417,284.51692 L 207.1989,284.51692 M 299.14302,224.41525 C 299.14302,224.41525 314.37881,176.50214 299.14302,186.51366 C 283.90721,196.5256 246.8129,241.20042 251.09446,241.20042 C 255.376,241.20042 300.21965,235.3265 297.2401,241.20042 C 294.26055,247.07403 282.96826,289.39016 268.69639,286.14133 C 254.42455,282.89282 245.86145,251.48794 245.86145,251.48794 M 364.18928,228.74681 C 344.88475,190.69126 318.51934,188.67975 318.51934,188.67975 L 318.51934,253.65372 L 348.96597,288.30711 C 348.96597,288.30711 372.75238,298.05349 372.75238,262.31715 M 357.18189,187.00212 L 420.05617,187.00212 C 420.05617,187.00212 382.0211,187.8856 380.46867,229.40823 C 378.91623,270.93116 398.7737,283.8783 412.68201,266.07218 C 427.40918,247.21784 431.06402,187.99204 431.06402,187.99204 L 431.06402,286.83411 M 447.22409,313.33779 L 447.22409,186.11864 L 480.87588,186.11864 C 515.90789,186.11864 493.80169,223.62585 478.81556,245.31087 C 463.90784,266.88216 457.04129,263.18004 457.04129,238.24303 M 500.32256,223.22419 L 593.46962,223.22419 C 593.46962,223.22419 592.69341,187.8856 550.001,187.00212 C 507.30857,186.11864 511.18971,243.54391 511.18971,261.21319 C 511.18971,278.88248 523.60931,311.57114 555.43455,311.57114 C 587.25983,311.57114 593.46962,268.28103 593.46962,247.96131,0z"];
 var ellipse = [RCEllipse ellipseWithRaphaelView:raphaelView atPoint:CPMakePoint(100, 100) xRadius:3 yRadius:6];
    return;
}

I get the first two console outputs from drawRect, but unfortunately the delegate method never runs, so i never see "RaphaelView has finished loading" in the console.

It has to be something stupid. Did I mention this view is inside a TabView? Shouldn't matter, but worth mentioning.

anyone got any bright ideas? I'm all out at the moment.

<annoyed of England.....hopefully soon to be publicly shamed by some kind persons superior knowledge>

[Jon Payne]

I also removed the "var" from in front of the raphaelView call, and added:

@implementation MyFloorPlanView : CPView
{
 RCRaphaelView raphaelView ;
}

still no joy..... :(

[Jon Payne]

And also tried doing same in a brand new hello world application, straight in AppController,j - it still doesn't work. :(

at least I know its not the rest of my app causing the problem.

[Jon Payne]

Finally got it working. =D

firstly, you have to declare the raphuccino view in the class implementation (duh!) so the raphuccino library can access it, rather than implementing it locally with a var command.

@implementation MyFloorPlanView : CPView
{
 RCRaphaelView raphaelView ;
}

secondly, you need to ensure you actually add the raphael view as subview to the current view in your raphuccino view class :)

[self addSubview:raphaelView];

Basic, elementary stuff, messed up by a basic, elementary cappuccinno user 

;)

[Johannes Fahrenkrug]

Great!! :)

[workgoddamit]

I have managed to disable the right click context, implement setViewBox, add mouse button up/down detection code(left middle, right), and implement pan and zoom with iframe DOM.Window mousewheel support so far in my own project, but now I'm faced with the immortal question > how much of that should I leave in to share back?

I think pan/zoom should be left out as it requires jquery as well, which would make raphuccino resource heavy out of the box. I will wait for a bit as I'm adding a few handy extensions over the next few weeks then I can leave the lightweight handy bits, and strip out the stuff which is very much "project-subjective".

anyway......enough of my jibber jabber...hardly rocket science, but a challenge for little ol' me.

Thanks for raphuccino!! I would have been completely lost without it...probably given up by now.. :)