SnapStudio – a physics drawing app

April 12, 2018

Here’s a fun new app in the browser written in Java with Box2D. I basically took a version of ReportMill and added Box2D support, turning every vector shape you draw into a Box2D shape, so that when you hit the “Preview” button, all the shapes fall with gravity and interact with each other. You can even click and drag a shape to further knock things around.

It’s not particularly useful at the moment – but it’s definitely kind of fun.

SnapStudio

Click the image to run in the browser. Send me a note if you think it’s cool (jeff at reportmill).

Advertisements

SnapKit Builder updates

April 5, 2018

I added some new features to SnapKit UI Builder this week:

  • Added support for the Margin attribute to make it easy to define space around a view
  • Added arrow controls to Margin and Padding to make it easy to modify these values
  • Added a new ArrowView control to easily add up/down and left/right to any UI
  • Added JavaDoc button to quickly take you to the JavaDoc for any UI element
  • Added text to show the current bounds of the selected view
Builder

SnapKit UI Builder in Browser

Click image to visit the launch page.

SnapKit Builder with improved XML

March 9, 2018

This week I added improvements for the XML viewer in SnapKit UI Builder:

  • Synchronize Editor view selection with XML text selection
  • XML syntax coloring
Builder

New XML features

Click image to visit the launch page.

SnappyBird in 100 lines of code

June 20, 2017

Here’s a simple version of FlappyBird written in 100 lines of Java code in SnapCode with SnapKit and compiled to JavaScript. It’s part of my “summer of code” with my kids – a series of 1-2 page fun apps that we discuss, they type in and debug, then we discuss again. Not the most active style of teaching, but reminiscent of my childhood typing in programs from SoftSide magazine or 101 Basic Computer Games by David H. Ahl.

SnappyBird

Click to Play

Source is available under the source tab in the app or here.

Explode Demo

June 13, 2017

Here’s another silly demo of a simple method to make any view on screen explode into pieces. The actual explode code is only a few dozen lines of code (source). Here’s the demo running in the browser:

Explode

(Click for demo)

Demo was written in SnapCode with SnapKit and compiled to JavaScript with TeaVM.

Java Calculator with Touch Support

June 7, 2017

This is a silly little demo (only a page of code), but it’s fun. It’s also the first demo to show off new touch support I’ve added (for apps compiled to JavaScript).

Calc

WebCode – a Java IDE in the browser

May 20, 2017

I’m jumping the gun on this demo, but it’s interesting enough that I have to share it in it’s current state.

My goal with WebCode is to provide an in-browser IDE, like I’ve seen for other tools and languages (like TypeScript and Kotlin). The idea is to show a number of working examples that can be run directly, or modified/compiled on the server with javac and TeaVM and the result is returned to the browser and launched in a separate window.
WebCode

Launch WebCode in Browser

This preview version has the basic SnapCode project file manager and shows a few sample source files from our SnapCode/TeaVM demo page. The source files have Java syntax coloring and can be edited. When you hit the run button, it launches one of our existing TeaVM samples.
 
I only have a few days of work in this so far (using SnapKit and skeleton files from SnapCode). The current version is client side only, so it doesn’t compile anything. My next step is to add the server component so the client can post modified source, do the compile and return a link to a launch html.
 
Let me know what you think!

Secretly teach advanced programming to beginners

April 21, 2017

A few years ago I taught an after school coding class to middle schoolers and used a common strategy: I started with two weeks of the Scratch programming tool to teach fundamentals with simple drag and drop instructions, then migrated to a specialized IDE, Greenfoot, to teach basic Java in the context of graphics apps, then moved to a catch-all IDE for more general programming.

The downside was a sizable stumble each time we switched tools – two steps forward, one step back. Since then I’ve been hoping for a solution to avoid this. A solution to teach each new concept in a way that prepares students for the next concept, instead of covering it up.

The current iteration of SnapCode embodies this. With a five minute lesson, I can cover the following:

  • Create a controller class that uses the Model-View-Controller paradigm
  • Snap together blocks of instructions to build real lines of Java code
  • Build a scene for the application using a real UI builder
  • Run on the desktop and in the browser using Java and Java-to-JavaScript transcompiler

Check out the video to see it in action.

Secretly

If you like this, please like/retweet the blog, video, tweet (tweet is here).

Java CLI in the Browser not as Stupid as it Sounds

October 27, 2016

Stay with me here, this may sound silly unless you are a teacher or student, but a standard part of many intro programming classes is learning the traditional Command Line Interface with simple tools like System.out.println() and java.util.Scanner. This lets you learn the basics of input, output and data processing with only a few lines of code:

System.out.println("Enter two numbers:");
Scanner scan = new Scanner(System.in);
int val1 = scan.nextInt();
int val2 = scan.nextInt();
System.out.println("Total value is: " + (val1 + val2));

With just these basics you can write many interesting programs:

  • Calculators, formula solvers, quizzes, surveys
  • String manipulation: word counting, palindromes, anagrams, etc.
  • Text based adventure games, digital psychologist, etc.

This was the only way to learn when I started on the TRS-80 and Apple II, and it’s still a great way to learn today, without introducing too many concepts that overwhelm new students. The downside is that these programs tend to be locked in the IDE or a terminal.

However, using a class called SnapPane, via one extra line of code, the same app that runs at the console pops up a window instead and runs on the desktop. And with SnapTea, and another line of code, you can then run in the browser and share with the world. Here’s a command line calculator running in the browser (notice, also, a tab to view the source code):

Simple Calculator using println and Scanner

SnapCode is a free IDE for education. Please like the blog, video, tweet (and retweet!) and join the discussion group if you’d like to hear more.

snapcode-cli

(video demo)

Java UI Builder for the Browser and Desktop

October 13, 2016

Last week I showed an example of writing just a few lines of UI code and running it on the desktop and in the browser, using SnapCode, SnapKit and TeaVM.

Well that was downright barbaric. There is a better way to design UI than code, compile and iterate: it’s a UI builder. This week I get rid of those extra lines of code by generating the UI in SnapCode’s UI builder. Much more civilized – and perhaps the most high-level “Hello World” ever seen.

This is the system I wish Flash had been: Visual designer, code editing, project file management, native browser (no plugin), native desktop and support for the most popular programming language on the planet.

SnapCode is a free IDE for education. I’d love to hear feedback. Please like the blog, video, tweet (and retweet!) if you’d like to see more.

snapcodequick