Page 1 of 4

[RELEASE] MoaiFiddle. An online Moai editor and player.

PostPosted: Sun Mar 30, 2014 6:23 am
by halfnelson
Hey all,
As a way to help people discuss their code, ask for fixes on the forums, or even just try out Moai, I have created http://moaifiddle.com.
fiddlescreen.png
fiddlescreen.png (96.59 KiB) Viewed 16386 times


If you have used jsfiddle before the usage is similar. Just type your Moai code in the editor window and click play. You will see the result on the right.

Underneath the player is the console. Anything typed into this will be executed within the currently running player as lua code eg print(prop) will output MOAIProp<f34a34>.

On the left is the virtual filesystem, currently I have a bunch of files from the moai samples for your script to reference and a copy of the flower library. To reference these from code just use the path you see on the left eg /img/moai.png.

Click save to save your fiddle and you will see your url change. you can give that link to someone and they can see your fiddle. eg http://moaifiddle.com/Q09BJWGMW6

They can even edit it and play around, but if they hit "update" they will get a new version and a new url eg
http://moaifiddle.com/Q09BJWGMW6/4 <-- the /4 is the 4th revision.

You can embed the player portion of the fiddle into a site by appending /embed to the end of the url and putting it in an iframe like so
Code: Select all
  1.  

  2. <iframe src="http://moaifiddle.com/Q09BJWGMW6/4/embed" style="width:320; height:480"></iframe>

  3.  


just be sure to add /1 before /embed if it is the first version.

At the moment this only shows the player, but in the future I want it to show the source in a read only view that is syntax highlighted and a run button that swaps to the player, so they can be embedded in future documentation as runnable samples.

Have fun.
PS. it is open source see https://github.com/halfnelson/moaifiddle

@ibisum there might be a way of adding a run button to your moai snippets so that they can be run in a little popover player if you want, and is there an api or a way to create a moaisnippet from a fiddle via a single click. Moaifiddle is just about debugging and not about discovery, that is where moaisnippets is awesome

Re: [RELEASE] MoaiFiddle. An online Moai editor and player.

PostPosted: Sun Mar 30, 2014 7:06 am
by Vavius
It works: http://moaifiddle.com/YK46NZY6R3

Awesome stuff!

Re: [RELEASE] MoaiFiddle. An online Moai editor and player.

PostPosted: Sun Mar 30, 2014 7:13 am
by makotok1123
Amazing! ! ! This is very interesting.

Re: [RELEASE] MoaiFiddle. An online Moai editor and player.

PostPosted: Sun Mar 30, 2014 9:00 am
by tommo.zhou

Re: [RELEASE] MoaiFiddle. An online Moai editor and player.

PostPosted: Sun Mar 30, 2014 11:02 am
by ezraanderson
~
brilliant :)

Re: [RELEASE] MoaiFiddle. An online Moai editor and player.

PostPosted: Sun Mar 30, 2014 4:22 pm
by halfnelson
thanks for the feedback. I just made it a little more useful by having the embedded fiddle show the source in a read only view, with a play button at the bottom. you can toggle between source and player. This makes it better for embedding as examples in a blog post. Instead of just using code highlighting, you can use a fiddle and have it runnable too!
here is an example of what the embedded guy looks like (once again fullscreen since it is meant to be inside an <iframe>
http://moaifiddle.com/Q09BJWGMW6/3/embed

Re: [RELEASE] MoaiFiddle. An online Moai editor and player.

PostPosted: Sun Mar 30, 2014 4:27 pm
by halfnelson
does anyone have access to create custom bbcodes for this forum. It would be trivial to make a bbcode to embed a fiddle in a forum post.

bbcode usage:
[fiddle]http://moaifiddle.com/{SIMPLETEXT}[/fiddle]

replacement:
<iframe src="http://moaifiddle.com/{SIMPLETEXT}" width="640" height="480" border="0"></iframe>

I will work on a light theme so it fits into sites that are bright like this one.

Re: [RELEASE] MoaiFiddle. An online Moai editor and player.

PostPosted: Sun Mar 30, 2014 6:36 pm
by naturally
Another astounding contribution!!

I just checked, and yes, the forum allows BBCodes. Added! :geek:

Re: [RELEASE] MoaiFiddle. An online Moai editor and player.

PostPosted: Sun Mar 30, 2014 7:48 pm
by halfnelson
oops, That adds a link to the editor, we probably want the embedded version
I am not quite sure how but we need to turn links like this:

from
[fiddle]http://moaifiddle.com/{SIMPLETEXT}/{NUMBER}[/fiddle]
to
<iframe src="http://moaifiddle.com/{SIMPLETEXT}/{NUMBER}/embed?light=true" width="800" height="480" border="0"></iframe>


as well as
from
[fiddle]http://moaifiddle.com/{SIMPLETEXT}[/fiddle]
to
<iframe src="http://moaifiddle.com/{SIMPLETEXT}/1/embed?light=true" width="800" height="480" border="0"></iframe>

is it possible to update the bbcode with those?

edit: updated the iframe links to use a light theme that will fit in with the forums colour scheme.

Re: [RELEASE] MoaiFiddle. An online Moai editor and player.

PostPosted: Sun Mar 30, 2014 7:51 pm
by halfnelson
and here is a test post to see if it is working:

version1 of a fiddle:
[fiddle]http://moaifiddle.com/Q09BJWGMW6[/fiddle]

version 3 of a fiddle
[fiddle]http://moaifiddle.com/Q09BJWGMW6/3[/fiddle]

Re: [RELEASE] MoaiFiddle. An online Moai editor and player.

PostPosted: Mon Mar 31, 2014 12:18 am
by JDance
Amazing :D really cool work

I wonder if it's easy to create an online samples directory? It would be a great way to introduce new people and for us to review the samples.

Re: [RELEASE] MoaiFiddle. An online Moai editor and player.

PostPosted: Mon Mar 31, 2014 3:25 am
by halfnelson
I was hoping to integrate with ibisums moaisnippets since that already has the tagging and searching solved. Eep!, looks http://www.moaisnippets.info/ domain has expired!. There goes that plan maybe.

Re: [RELEASE] MoaiFiddle. An online Moai editor and player.

PostPosted: Mon Mar 31, 2014 3:29 am
by ibisum
halfnelson: I renewed the domain! Don't worry, moaisnippets.info won't die ..

I would *love* to work out how to integrate this properly in moaisnippets.info - its really amazing work, halfnelson. So lets do it! :)

Re: [RELEASE] MoaiFiddle. An online Moai editor and player.

PostPosted: Mon Mar 31, 2014 4:02 am
by scottwb
It sounds great but on my Mac/Safari, hitting the play button doesn't show anything :(

Am I doing something wrong?

Re: [RELEASE] MoaiFiddle. An online Moai editor and player.

PostPosted: Mon Mar 31, 2014 4:05 am
by ibisum
Got Javascript enabled?

halfnelson: oops, moaisnippets.info will be back online in 24 hours .. we can try to do the integration later in the week?

Re: [RELEASE] MoaiFiddle. An online Moai editor and player.

PostPosted: Mon Mar 31, 2014 4:22 am
by halfnelson
@ibisum sure

@scottwb , I have updated the code for the embedded version to check for webgl support. I have not updated the player code in the editor.
If you visit http://moaifiddle.com/Q09BJWGMW6/3/embed and click the play button, do you get a popup explaining that webgl version was not found. If not can you open your javascript console and have a look. The editor is only tested with chrome and firefox, I thought safari had webgl but I read somewhere that at least one version it was off by default.

Also keep in mind that the first time you run it, it will download moaijs which is about 2mb, and you will be getting it from my host in sydney, so it won't come down lightning fast :). Just leave it open for a few minutes and see if it starts

Re: [RELEASE] MoaiFiddle. An online Moai editor and player.

PostPosted: Mon Mar 31, 2014 4:24 am
by naturally
I updated it to this:

halfnelson wrote:[fiddle]http://moaifiddle.com/{SIMPLETEXT}[/fiddle]
to
<iframe src="http://moaifiddle.com/{SIMPLETEXT}/1/embed?light=true" width="800" height="480" border="0"></iframe>


Don't quite get what you want here though:
halfnelson wrote:[fiddle]http://moaifiddle.com/{SIMPLETEXT}/{NUMBER}[/fiddle]
to
<iframe src="http://moaifiddle.com/{SIMPLETEXT}/{NUMBER}/embed?light=true" width="800" height="480" border="0"></iframe>


It doesn't allow two 'fiddle' tags...

Re: [RELEASE] MoaiFiddle. An online Moai editor and player.

PostPosted: Mon Mar 31, 2014 4:26 am
by halfnelson
doh, naturally, looks like the forum won't let me go 800 wide. Can you please change the iframe size to 640x480 ( width="640" height="480" )

Re: [RELEASE] MoaiFiddle. An online Moai editor and player.

PostPosted: Mon Mar 31, 2014 4:28 am
by halfnelson
the second tag is so you can post newer versions
maybe the second tag (with the revision number) is the way to go, so people can update others fiddles to help them, and post the result. people will just need to remember to put 1 at the end. I will update moaifiddle.com to always include revision number in the url.

Done. So the second fiddle bbcode is the best way. Thanks for your patience.

Re: [RELEASE] MoaiFiddle. An online Moai editor and player.

PostPosted: Mon Mar 31, 2014 7:02 am
by Vavius
Safari log (Version 6.0.5 (8536.30.1) Mac OS X 10.8.5):
Code: Select all
  1. MoaiJS Init

  2. moaihost.js:343 MoaiJS Load Filesystem /moaijs/moaiapp.rom

  3. moaihost.js:311 MoaiJS Emscripten Init

  4. moaihost.js:150 SYNTAX_ERR: DOM Exception 12: An invalid or illegal string was specified.



Embed mode just says:
Code: Select all
  1. GLERROR: No gl context