javascript canvas
Locked
 
|
I remember someone was working on smalltalk classes to make it easier
to draw to a canvas element using javascript. I now find myself wanting to do exactly that and was wondering if there is anything available before I duplicate efforts. I didn't find anything relevant in squeaksource. Anyone? yl _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
2008/5/26 Yan Laporte <[hidden email]>:
> I remember someone was working on smalltalk classes to make it easier > to draw to a canvas element using javascript. I now find myself > wanting to do exactly that and was wondering if there is anything > available before I duplicate efforts. > I didn't find anything relevant in squeaksource. Anyone? HTML5 from the Seaside repository? Cheers Philippe _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
Yes, but not quite.. What I see in the HTML5 package is just the
canvas tag, not the facilities to draw to this canvas. I'll explain what I mean with a small example that works without the facilities I imagine. html canvas width:100;height:100;script:( (((html javascript element) call: #getContext argument:'2d')assignLocalTo:#myDrawing) after:((html javascript alias:#myDrawing) access:#fillStyle; assign:Color blue); after:((html javascript alias:#myDrawing)call:#fillRect arguments:#(10 10 40 40))). The code above draws a simple blue square. Now I far form an expert and I suspect this code could be lighter so I am open to suggestions. Now, what I meant by classes to make this easier would beto allow something along the lines of: |myCanvas| ... html canvas width:100;height:10. (DrawingContext on:myCanvas) fillStyle:ColorBlue; fillRect:(10@10 extent:40@40). Where DrawingContext is this thing that doesn't exist yet... yl 2008/5/26 Philippe Marschall <[hidden email]>: > 2008/5/26 Yan Laporte <[hidden email]>: >> I remember someone was working on smalltalk classes to make it easier >> to draw to a canvas element using javascript. I now find myself >> wanting to do exactly that and was wondering if there is anything >> available before I duplicate efforts. >> I didn't find anything relevant in squeaksource. Anyone? > > HTML5 from the Seaside repository? > > Cheers > Philippe > _______________________________________________ > seaside mailing list > [hidden email] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
Hi Yan,
I dont know about anything to do that but sounds like a convenient way to factor (encapsulating in a new object) all that drawing code. I think it should be a concrete one like a Square class child of Shape class. Nothing stops you to creating those. I use a lot the "Seaside scriptaculous way" of serializing objects to javascript code similar to that. In fact that's the way we are (slowly) providing access to jQuery features. cheers, Sebastian Sastre > -----Mensaje original----- > De: [hidden email] > [mailto:[hidden email]] En nombre > de Yan Laporte > Enviado el: Lunes, 26 de Mayo de 2008 15:48 > Para: Seaside - general discussion > Asunto: Re: [Seaside] javascript canvas > > Yes, but not quite.. What I see in the HTML5 package is just the > canvas tag, not the facilities to draw to this canvas. I'll explain > what I mean with a small example that works without the facilities I > imagine. > > html canvas width:100;height:100;script:( > (((html javascript element) call: #getContext > argument:'2d')assignLocalTo:#myDrawing) > after:((html javascript alias:#myDrawing) > access:#fillStyle; > assign:Color blue); > after:((html javascript alias:#myDrawing)call:#fillRect > arguments:#(10 10 40 40))). > > The code above draws a simple blue square. > Now I far form an expert and I suspect this code could be lighter so I > am open to suggestions. > > Now, what I meant by classes to make this easier would beto allow > something along the lines of: > |myCanvas| > ... > html canvas width:100;height:10. > (DrawingContext on:myCanvas) > fillStyle:ColorBlue; > fillRect:(10@10 extent:40@40). > Where DrawingContext is this thing that doesn't exist yet... > > yl > > > > > > > 2008/5/26 Philippe Marschall <[hidden email]>: > > 2008/5/26 Yan Laporte <[hidden email]>: > >> I remember someone was working on smalltalk classes to > make it easier > >> to draw to a canvas element using javascript. I now find myself > >> wanting to do exactly that and was wondering if there is anything > >> available before I duplicate efforts. > >> I didn't find anything relevant in squeaksource. Anyone? > > > > HTML5 from the Seaside repository? > > > > Cheers > > Philippe > > _______________________________________________ > > seaside mailing list > > [hidden email] > > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > > > _______________________________________________ > seaside mailing list > [hidden email] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
I finally got around and implemented this, it wasn't difficult at all.
Right now its crude and closely follows what is available in the javascript canvas itself, it's pen based and could most likely be improved. It does allow to use few useful existing squeak classes such as Point, Rectangle, Path (subclasses don't work tough) and Color. Its useful for a few things such as moving image composition to the client side, doing your own special web charts in smalltalk etc. etc. >> Now, what I meant by classes to make this easier would be to allow >> something along the lines of: >> |myCanvas| >> ... >> myCanvas:=html canvas width:100;height:10. >> (DrawingContext on:myCanvas) >> fillStyle:ColorBlue; >> fillRect:(10@10 extent:40@40). _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
Yan,
I'd like to see what you built. Will you share some code with us? Chris On Sun, Jun 1, 2008 at 10:45 AM, Yan Laporte <[hidden email]> wrote: I finally got around and implemented this, it wasn't difficult at all. _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
Sure, what's the usual way of doing so?
2008/6/1 Chris Dawson <[hidden email]>: > Yan, > > I'd like to see what you built. Will you share some code with us? > > Chris > > On Sun, Jun 1, 2008 at 10:45 AM, Yan Laporte <[hidden email]> wrote: >> >> I finally got around and implemented this, it wasn't difficult at all. >> Right now its crude and closely follows what is available in the >> javascript canvas itself, it's pen based and could most likely be >> improved. It does allow to use few useful existing squeak classes such >> as Point, Rectangle, Path (subclasses don't work tough) and Color. >> >> Its useful for a few things such as moving image composition to the >> client side, doing your own special web charts in smalltalk etc. etc. >> >> >> Now, what I meant by classes to make this easier would be to allow >> >> something along the lines of: >> >> |myCanvas| >> >> ... >> >> myCanvas:=html canvas width:100;height:10. >> >> (DrawingContext on:myCanvas) >> >> fillStyle:ColorBlue; >> >> fillRect:(10@10 extent:40@40). >> _______________________________________________ >> seaside mailing list >> [hidden email] >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > > > _______________________________________________ > seaside mailing list > [hidden email] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > > seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
In reply to this post by Yan Laporte
> I remember someone was working on smalltalk classes to make it easier
> to draw to a canvas element using javascript. I now find myself > wanting to do exactly that and was wondering if there is anything > available before I duplicate efforts. > I didn't find anything relevant in squeaksource. Anyone? Is it perhaps OMeta/JS? The current JS version doesn't have Smalltalk in it (some older versions did), but the Squeak version does and you can port it to the latest OMeta/JS so that it can be combined with the "Canvas" example. -- Yoshiki _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
No it is not, I haven't reaaly looked at OMeta yet. I just googled and
the canvas interactions I found look quite like what I had in mind. But my problem was that I wanted an easy solution to do custom charts in an application I am building. I kept hitting issues with the various liraries available online. At that point I was considering building my own javascript charting library but still wanted to keep things in Smalltalk as much as possible. Now I just added a thin Smalltalk layer over the javascript canvas API similar to what exists for Scriptaculous. Now I draw charts using smalltak code and the result are drawing instructions in javascript that get executed in the browser. Really nothing sophisticated. But I now plan to play a little with OMeta when I have some free time. yl 2008/6/1 Yoshiki Ohshima <[hidden email]>: >> I remember someone was working on smalltalk classes to make it easier >> to draw to a canvas element using javascript. I now find myself >> wanting to do exactly that and was wondering if there is anything >> available before I duplicate efforts. >> I didn't find anything relevant in squeaksource. Anyone? > > Is it perhaps OMeta/JS? > > The current JS version doesn't have Smalltalk in it (some older > versions did), but the Squeak version does and you can port it to the > latest OMeta/JS so that it can be combined with the "Canvas" example. > > -- Yoshiki seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
«
Return to Seaside General
|
1 view|%1 views
| Free forum by Nabble | Edit this page |