Planet Squeak

blogs about Squeak, Pharo, Croquet and family
planet squeak - planet squeak es - planet squeak jp - planet croquet - planet squeak code - planet smalltalk

June 24, 2017

Craig Latta

Caffeine in 3D with voxel.js

voxel.js in CaffeineSince Caffeine is powered by SqueakJS, you can create mashups with any other JavaScript frameworks you like. Let’s take a simple look at 3D graphics using voxel.js, an open-source voxel game building toolkit.

hello blocks

Following the “hello world” example at voxeljs.com, we generate a simple Minecraft-like blocks world in which we can walk around and dig (you can visit it here). The example gives us a JavaScript file, builtgame.js, that we can also use from Caffeine.

As generated, builtgame.js evaluates its createGame function at load time. This creates an HTML5 canvas, initializes WebGL, and begins the game when the hosting page is loaded. We want to save those steps for SqueakJS to initiate, and we also want to use a canvas of our own, in a Caffeine window.

hooks for Caffeine

We can achieve the first part by changing builtgame.js so that it just puts createGame somewhere SqueakJS can get to it, instead of evaluating it. We can create a property on the browser DOM window for this:

window.game = createGame;

Normally we would edit the source projects from which builtgame.js is generated, rather than builtgame.js directly (properly forking the corresponding repositories), but for this example we’ll just go ahead.

Voxel.js uses the three.js framework as its WebGL interface. The three.js WebGL renderer accepts an HTML5 canvas parameter for its initialization function. The second change we’ll make to builtgame.js is to pass a canvas set by SqueakJS in another window property:

View.prototype.createRenderer = function() {
  this.renderer = new THREE.WebGLRenderer({
    canvas: window.gameCanvas !== undefined ? window.gameCanvas : undefined,
    antialias: true});
  this.renderer.setSize(this.width, this.height);
  this.renderer.setClearColorHex(this.skyColor, 1.0);
  this.renderer.clear();};

Finally, we’ll change the game rendering initialization function, to save a reference to the voxel.js renderer’s event emitter, so that we can tell it to pause from SqueakJS:

Game.prototype.initializeRendering = function(opts) {
  var self = this;
  if (!opts.statsDisabled) self.addStats();
  window.addEventListener('resize', self.onWindowResize.bind(self), false);
  self.ee = (
    requestAnimationFrame(window).on(
      'data',
      function(dt) {
        self.emit('prerender', dt);
        self.render(dt);
        self.emit('postrender', dt);
      });
  if (typeof stats !== 'undefined') {
    self.on(
      'postrender',
      function() {
        stats.update();});}}

on the Smalltalk side

Now, in SqueakJS, we can create a VoxelJS class:

Object
  subclass: #VoxelJS
  instanceVariableNames: ''
  classVariableNames: ''
  poolDictionaries: ''
  category: 'Hex-HTML5-WebGL-VoxelJS'.

VoxelJS class instanceVariableNames: 'game'

We’ll give it a class-side method to load and initialize voxel.js, with a Caffeine window and canvas for it to use:

initialize

| canvas |

Webpage current loadScriptFrom: 'js/voxeljs/builtgame.js'.
canvas := Webpage createWorldOfKind: 'voxeljs'.
canvas styleAt: #borderRadius put: '10px'.

(Webpage current)
  windowizeElementNamed: canvas window id
  closingWith: [
    self pause.
    Webpage current top at: #gameCanvas put: nil].

canvas window dragWith: canvas window windowButtonsTray moveButton.
game := (
  (Webpage current top)
    at: #gameCanvas put: canvas;
    game: {#container -> canvas window})

We’ll also add a method for pausing the voxel.js renderer, using the ee property we added to the game rendering initialization in builtgame.js:

pause
  game ee pause.
  (JQuery at: #fps) element remove

In a workspace, we send our initialization message:

VoxelJS initialize

Now we have our first voxel world, running in a Caffeine window that we can easily close, rather than the whole screen. If you clear your browser cache (including IndexedDB) for caffeine.js.org, you can reload the Caffeine page to see this code in action.

Please let me know if you get this far!

 


by Craig Latta at June 24, 2017 08:57 PM

June 22, 2017

Craig Latta

Caffeine :: Livecode the Web!

CaffeineFor the impatient… here it is.

Back to the Future, Again

With the arrival of Bert Freudenberg’s SqueakJS, it was finally time for me to revisit the weird and wonderful world of JavaScript and web development. My previous experiences with it, in my consulting work, were marked by awkward development tools, chaotic frameworks, and scattered documentation. Since I ultimately rely on debuggers to make sense of things, my first question when evaluating a development environment is “What is debugging like?”

Since I’m a livecoder, I want my debugger to run in the web browser I’m using to view the site I’m debugging. The best in-browser debugger I’ve found, Chrome DevTools (CDT), is decent if you’re used to a command-line interface, but lacking as a GUI. With Smalltalk, I can open new windows to inspect objects, and keep them around as those objects evolve. CDT has an object explorer integrated into its read-eval-print loop (REPL), and a separate tab for inspecting DOM trees, but using them extensively means a lot of scrolling in the REPL (since asynchronous console messages show up there as well) and switching between tabs. CDT can fit compactly onto the screen with the subject website, but doesn’t make good use of real estate when it has more. This interrupts the flow of debugging and slows down development.

The Pieces Are All Here

With SqueakJS, and its JavaScript bridge, we can make something better. We can make an in-browser development environment that compares favorably with external environments like WebStorm. I started from a page like try.squeak.org. The first thing we need is a way to move the main SqueakJS HTML5 canvas around the page. I found jQuery UI to be good for this, with its “draggable” effect. While we’re at it, we can also put each of Squeak‘s Morphic windows onto a separate draggable canvas. This moves a lot of the computation burden from SqueakJS to the web browser, since SqueakJS no longer has to do window management. This is a big deal, since Morphic window management is the main thing making modern Squeak UIs feel slow in SqueakJS today.

SqueakJS provides a basic proxy class for JavaScript objects, called JSObjectProxy. Caffeine has an additional proxy class called JSObject, which provides additional reflection features, like enumerating the subject JS object’s properties. It’s also a good place for documenting the behavior of the JS objects you’re using. Rather than always hunting down the docs for HTMLCanvasElement.getContext on MDN, you can summarize things in a normal method comment, in your HTMLCanvasElement class in Smalltalk.

Multiple Worlds

With a basic window system based on HTML5 canvases, we can draw whatever we like on those canvases, using the SqueakJS bridge and whatever other JS frameworks we care to load. I’ve started integrating a few frameworks, including React (for single-page-app development), three.js (for WebGL 3D graphics development), and morphic.js (a standalone implementation of Morphic which is faster than what’s currently in Squeak). I’ll write about using them from Caffeine in future blog posts.

Another framework I’ve integrated into Caffeine is Snowglobe (for Smalltalk app streaming and other remote GUI access), which I wrote about here previously. I think the Snowglobe demo is a lot more compelling when run from Caffeine, since it can co-exist with other web apps in the same page. You can also run multiple Snowglobes easily, and drag things between them. I’ll write more about that, too.

Fitting Into the JavaScript Ecosystem

To get the full-featured debugger UI I wanted, I wrote a Chrome extension called Caffeine Helper, currently available on the Chrome Web Store. It exposes the Chrome Debugging Protocol (CDP) support in the web browser to SqueakJS, letting it do whatever the CDT can do (CDT, like SqueakJS, is just another JavaScript-powered web app). The support for CDP that I wrote about previously uses a WebSocket-based CDP API that requires Chrome to be started in a special way. The Caffeine Helper extension provides a JavaScript API, without that requirement.

I also wrote support for generating Smalltalk code from JavaScript, using the esprima parsing framework, and vice-versa. With my debugger and code generation, I’m going to try developing for some file-based JS projects, using Smalltalk behind the scenes and converting to and from JavaScript when necessary. I think JS web development might actually not drive me crazy this way. :)

Please Try It Out!

So, please check out Caffeine, at caffeine.js.org! I would very much appreciate your feedback. I’m particularly interested to hear your use cases, as I plan the next development steps. I would love to have collaborators, too. Let’s build!


by Craig Latta at June 22, 2017 12:16 PM

June 21, 2017

Torsten Bergmann

CLAP (Command Line Argument Parsing) in Pharo

as part of GSOC 2017. Read more.

by Torsten (noreply@blogger.com) at June 21, 2017 12:04 PM

June 20, 2017

Torsten Bergmann

Calypso 0.7.0 for Pharo

There is a new version of Calypso browser (version 0.7.0) for Pharo supporting navigation history

by Torsten (noreply@blogger.com) at June 20, 2017 12:48 PM

June 18, 2017

Torsten Bergmann

Amber Smalltalk 0.19.1

is out. Read more.

by Torsten (noreply@blogger.com) at June 18, 2017 10:09 PM

UK Smalltalk User Group meeting - Monday, 26th June

Read more.

by Torsten (noreply@blogger.com) at June 18, 2017 11:44 AM

June 17, 2017

PharoWeekly

Github Pharo 70 dev on the starting blocks

Hi,

in fact the development of Pharo 7 has already started. But in a limited mode.
For Pharo 7 we have the #development branch on GitHub (pharo-project/pharo)
https://github.com/pharo-project/pharo/tree/development
…and we are already merging pull requests.
We currently have (mostly technical) problems with the infrastructure so the monkey is not running. But we have a temporary CI jobs that can check specific pull request (that means that we bootstrap Pharo for them and run tests for all platforms).
The latest Pharo 7 image can be found here:
https://ci.inria.fr/pharo/view/7.0/job/70-Bootstrap-32bit/
The image is currently not uploaded to files.pharo.org and it is not accessible by zero-conf scripts, sorry.
If you want to try to create own pull request directly from Pharo 7, you need to do this:
– create own fork of pharo-project/pharo repository on GitHub and keep it in sync
– download Pharo 7 image
– clone pharo-project/pharo repository into the image directory, the directory with the clone MUST be named “pharo-core”
– checkout the development branch or better checkout the commit from which the Pharo 7 image was bootstrapped (SystemVersion current commitHash). Beware, in that case you will be in detached head state (you need to create own issue branch later to be able to commit something). The checkout to a particular commit cannot be done currently from Iceberg, you need to use git
– add your fork repository as a remote and mark it as default push target
– create issue on FogBugz to get issue ID
– create a branch for this issue (can be done easily from the repository context menu in Iceberg [Pharo], this option is valid only if you cloned pharo-project/pharo repository)
– commit the fix to your fork repository
– create the pull request (can be done easily from the repository context menu in Iceberg [Pharo], this option is valid only if you cloned pharo-project/pharo repository)
– add link to the pull request into the FogBugz issue entry
Pull requests can be done from Pharo 6 too. Then you do not need to have clone in “pharo-core” directory, it can be everywhere, and you mast create your branches from the master branch (and create pull requests on #development)
Because we currently have limited possibilities to check pull requests, we prefer to merge PRs needed for start of the new integration process. We really do not need to break the system in this fragile state 😉
Cheers,
— Pavel

by Stéphane Ducasse at June 17, 2017 07:09 AM

Geo location data reading with Zinc: a Breeze

|client znResponse|
client := ZnClient new.
client host: ‘www.geoplugin.net’.
client addPathSegment: ‘json.gp’.
client queryAt: ‘ip’ put: ‘188.194.228.195’.
client contentReader: [ :entity | STONJSON fromString: entity contents ].
znResponse := client get; contents.


by Stéphane Ducasse at June 17, 2017 07:08 AM

While waiting for the PullRequest menu in Pharo70

Hi,

Of course we just want you to have to

Now before getting there, here is a description of what we will use.

Stef

Hi

we still do not have official guidelines but this should help you:
1) you need own fork of pharo-project/pharo repository
2) clone pharo-project/pharo into directory named “pharo-core” in your working directory. You can do it from Iceberg (Clone repository) or by this script:
Iceberg enableMetacelloIntegration: true.
target := ‘pharo-core’ asFileReference ensureCreateDirectory.
repository := IceRepositoryCreator new
remote: (IceRemote url: ‘git@github.com:pharo-project/pharo.git’);
location: target;
subdirectory:’src’;
createRepository.
repository backend checkoutBranch: ‘master’.
repository addRemote: (IceRemote name: ‘myFork’ url: ‘git@github.com:yourGitHubAccount/pharo.git’).
repository register.
Do not forget to change your fork URL. If you will do  it from Iceberg, you need to add remote manually.
3) set your fork remote as default push remote
4) create issue on FogBugz. You will obtain issue number e.g. 12345
5) in repository context menu in Iceberg and do Pharo-Create new branch from FogBugz issue, you will enter the issue number and the dialog wil fill the full branch name
6) do you changes and commit (and push) them to your fork repository
7) in repository context menu in Iceberg do: Pharo-Create pull request. Login, by default the title will be set to the branch name, let it be, comment is not needed. “From” will be your fork and your issue branch. “To” will be pharo-project/pharo and “development” branch
8) as soon as you create the pull request, add URL to this pull request to the FogBugz issue and mark it as resolved (fix review needed).
You need not to do it exactly this way, e.g. you can create the pull request from Github web interface, but the pull request name must contain the the issue number. And your issue must contain link to the pull request.
Cheers,
— Pavel

by Stéphane Ducasse at June 17, 2017 06:45 AM

June 14, 2017

Torsten Bergmann

Quick, write me a Redis client

Redis is an open source, in-memory data structure store, used as a database, cache and message broker. Sven wrote a new article on Medium on "Quick, write me a Redis client"

by Torsten (noreply@blogger.com) at June 14, 2017 06:29 PM

June 13, 2017

Torsten Bergmann

CloudFront support in AWS SDK for Pharo Smalltalk

The AWS SDK for Pharo Smalltalk enables Smalltalk developers to easily work with Amazon Web Services. It now has support for CloudFront.

by Torsten (noreply@blogger.com) at June 13, 2017 05:45 PM

Material Design Lite in Pharo video

Video from DevFest Belgium October 2016 - Philippe Back - Material Design Lite in Pharo


by Torsten (noreply@blogger.com) at June 13, 2017 05:23 PM

PharoDays 2017 Videos

More videos from PharoDays 2017 are available on Youtube.

by Torsten (noreply@blogger.com) at June 13, 2017 01:57 PM

PharoCloud focuses on Ephemeric Cloud

Mike announced some news about http://pharocloud.com. I already tried the Ephemeric cloud this week - just ZIP a Pharo image with a server running on port 8080 and upload it. The most easy way to get your Pharo web application into the cloud!

by Torsten (noreply@blogger.com) at June 13, 2017 12:37 PM

Pharo 6 snap package for Ubuntu

There is now also a Snap package for Ubuntu to install Pharo 6.

by Torsten (noreply@blogger.com) at June 13, 2017 12:22 PM

PharoWeekly

Pharo 6 snap package for Ubuntu

Hi Everyone,

I’ve updated the Pharo 6 snap package for Ubuntu.

The major advantages of using the snap package are:

– No need to install all the 32 bit dependencies on a 64 bit system,
they’re all contained and isolated within the snap package.
– Automagically distinguish between 32 bit and 64 bit images and run the
appropriate VM (as with the ZeroConf package, the 64 bit VM still
needs more testing).

To get Pharo up and running on Ubuntu 16.04 or later:

# Install Pharo
$ sudo snap install –candidate pharo –classic
# If your system isn’t configured for threaded heartbeat:
$ sudo pharo.config
# Download the latest Pharo 6 image
$ pharo.getimage
# Go…
$ pharo.ui Pharo.image
# or:
$ pharo Pharo.image eval 4+3

To get a list of available commands:

$ snap info pharo

If you’re on Debian or Ubuntu 14.04 you’ll need to install snapd, see
https://snapcraft.io/docs/core/install

The VM is the threaded heartbeat, dated 201705310241.

The installation flags are:

–candidate – The edge and beta channels are for development versions.
It progresses to candidate and then stable.
–classic – Snap packages are normally sandboxed for security
reasons.  Since Pharo is a development environment
in which we want to be able to run any executable,
or load any library, it is installed with access to
the entire system (as the running user).

Why use snap packages?

– They include all dependencies.  In particular, for the 32 bit
versions, this means that it isn’t necessary to install all the 32 bit
architecture and associated dependencies.
– Including dependencies means that there shouldn’t be any problems with
incompatible library versions when upgrading.

Why not use snap packages?

– It’s a relatively new technology, with a number of rough edges.
– There may still be issues with its sandboxing that I haven’t
discovered yet.
– Because the package uses classic confinement, it isn’t
cross-distribution in practice (unfortunately).

Please let me know of any other advantages or disadvantages you think
should be listed here.

If you don’t trust me to configure your system correctly (which requires
sudo):

– All the scripts that make up the sub-commands are visible, e.g.
pharo.config can be viewed at /snap/pharo/current/usr/bin/CONFIG

The packaging code is at: https://github.com/akgrant43/pharo-snap

Cheers,
Alistair


by Stéphane Ducasse at June 13, 2017 09:05 AM

June 10, 2017

Torsten Bergmann

Seaside 3.2.2. update for Pharo 6

Seaside 3.2.2 fixes compatibility issues for Pharo 6. It is now available on Smalltalkhub and Github

by Torsten (noreply@blogger.com) at June 10, 2017 08:41 PM

PharoWeekly

Ephemeric Cloud

Hello,

I just wanted to make some clarifications on what is going on with
PharoCloud and how I see the future of the project.

PharoCloud is not closing, but just dropping VM hosting support. We will
continue to develop and maintain Ephemeric Cloud which allows you to publish
Pharo web applications online much easier than any other VM hosting can
offer. In some way PharoCloud just becomes more “cloudy” by dropping
outdated technologies off 🙂

Our plan is to make the project more community oriented. We integrated
PharoCloud with Pharo.org SSO and provide *FREE* access to all *Pharo
Association* members. You are welcome to log in to the cloud with your Pharo
Association account at:

https://www.pharocloud.com/manager/connect

We are encouraging you to migrate your applications hosted as Pharocloud VMs
to the Ephemeric Cloud. It is much more simple! We have some positive
experience already. There are some examples I moved from VM hosting to
Ephemeric Cloud:

http://pharo.pharocloud.com
http://seaside31.swarm.pharocloud.com/
http://eph-b147b6e2.swarm.pharocloud.com/
http://smalltalk.mikefilonov.ru/

Here you can find a quick start guide to Ephemeric cloud and some tips on
how to publish your app:
http://docs.swarm.pharocloud.com/article/getting_started

Also there is a REST API you can use to manage the cloud. And there is also
a Pharo wrapper around the REST-API:
http://docs.swarm.pharocloud.com/article/pharo_library_reference

We also have video guides:
quickstart (sorry for old UI of the manager)
https://www.youtube.com/watch?v=a1GfuT9M4qo
curl example: https://www.youtube.com/watch?v=9dKBCpj96cU

In case of any questions or issues with images, please feel free to contact
me.

Mike Filonov


by Stéphane Ducasse at June 10, 2017 01:17 PM

June 08, 2017

Torsten Bergmann

Smalltalk and strawberries

SAWADA Farm is a large strawberry farm located near Central Japan International Airport. Surrounded with the beautiful nature of Japan, you can enjoy strawberry picking. According to these slides they seem to use Pharo and Seaside for some website services.

by Torsten (noreply@blogger.com) at June 08, 2017 02:00 PM

June 07, 2017

Torsten Bergmann

IWST 2017 Deadline on 16th June

The International Workshop on Smalltalk Technologie (IWST) 2017 has its deadline on 16th June. Read more

by Torsten (noreply@blogger.com) at June 07, 2017 09:50 AM

June 06, 2017

PharoWeekly

Pharo 60 released!

 

http://pharo.org/news/pharo6.0-released

Tx you all


by Stéphane Ducasse at June 06, 2017 06:06 PM

Torsten Bergmann

Pharo 6.0 Released

A new and impressive release 6.0 of Pharo was released today. Now with Epicea, Git support and 64 bit support, and many many fixes, changes and new tools.

Go and grab your copy today.


by Torsten (noreply@blogger.com) at June 06, 2017 04:30 PM

Working Directory in Pharo

During GSOC there is a new implementation for Current Working Directory in Pharo.

by Torsten (noreply@blogger.com) at June 06, 2017 11:12 AM

Pharos Fast Table

Pharos Fast Table gets improved during GSOC. Read more here.

by Torsten (noreply@blogger.com) at June 06, 2017 11:11 AM

June 03, 2017

PharoWeekly

DataFrame a really nice new collection

This is great to see all this energy flowing into Pharo.


View story at Medium.com

Not link because well wordpress eat it.

Thanks Oleksandr for this cool new collection. It was nice to talk with you at Lviv.


by Stéphane Ducasse at June 03, 2017 10:34 AM

VM profiler now in Pharo!

Thanks Sophie and Clement for this great tool.

http://sophiekaleba.blogspot.fr/2017/05/vm-profiling-in-pharo.html

STef


by Stéphane Ducasse at June 03, 2017 09:12 AM

June 02, 2017

Torsten Bergmann

Pharo VM Profiling

Squeak VMProfiler is now available headless in Pharo.

by Torsten (noreply@blogger.com) at June 02, 2017 06:56 AM

June 01, 2017

Torsten Bergmann

PharoMug + HoneyGinger

Tomohiro Oda received a Pharo mug at the 100th Tokyo Smalltalk Study Group. And he now virtually served water to it using his HoneyGinger project. HoneyGinger is a fluid dynamics simulator and visualizer based on the SPS method. The SmalltalkHub site has some more videos and the code if you are interested. Nice!

by Torsten (noreply@blogger.com) at June 01, 2017 10:59 AM

May 31, 2017

Torsten Bergmann

Node Version of the RBBadMessageRule

"Node Version of the RBBadMessageRule: Testing Accuracy" is the next article from Myroslava

by Torsten (noreply@blogger.com) at May 31, 2017 01:22 PM

PharoWeekly

Building the STACK VM for Android

https://github.com/sbragagnolo/pharo-vm/blob/spur64/README-Android.md


by Stéphane Ducasse at May 31, 2017 08:53 AM