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

Organize and discuss new features you're working on, and community requests.

Moderators: seebs, ezraanderson, Vavius

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

Postby halfnelson » Sun Mar 30, 2014 6:23 am

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 14852 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
halfnelson
 
Posts: 707
Joined: Wed Jun 13, 2012 9:48 pm

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

Postby Vavius » Sun Mar 30, 2014 7:06 am

It works: http://moaifiddle.com/YK46NZY6R3

Awesome stuff!
Vavius
 
Posts: 264
Joined: Mon Apr 29, 2013 6:04 am

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

Postby makotok1123 » Sun Mar 30, 2014 7:13 am

Amazing! ! ! This is very interesting.
makotok1123
 
Posts: 244
Joined: Fri Jan 06, 2012 11:31 am

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

Postby tommo.zhou » Sun Mar 30, 2014 9:00 am

User avatar
tommo.zhou
 
Posts: 124
Joined: Thu Sep 29, 2011 12:28 am

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

Postby ezraanderson » Sun Mar 30, 2014 11:02 am

~
brilliant :)
Dead Dark: A roguelike, zombie apocalypse survival game
My Website | My Facebook | My Twitter | My Games on Itunes | My Games on Android
User avatar
ezraanderson
 
Posts: 1094
Joined: Wed Nov 21, 2012 2:24 pm
Location: Canada

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

Postby halfnelson » Sun Mar 30, 2014 4:22 pm

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
halfnelson
 
Posts: 707
Joined: Wed Jun 13, 2012 9:48 pm

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

Postby halfnelson » Sun Mar 30, 2014 4:27 pm

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.
halfnelson
 
Posts: 707
Joined: Wed Jun 13, 2012 9:48 pm

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

Postby naturally » Sun Mar 30, 2014 6:36 pm

Another astounding contribution!!

I just checked, and yes, the forum allows BBCodes. Added! :geek:
Image - Don't Be Patchman - a sneak-and-grow adventure!
User avatar
naturally
 
Posts: 706
Joined: Thu Aug 29, 2013 8:05 pm
Location: Canada

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

Postby halfnelson » Sun Mar 30, 2014 7:48 pm

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.
Last edited by halfnelson on Sun Mar 30, 2014 9:55 pm, edited 2 times in total.
halfnelson
 
Posts: 707
Joined: Wed Jun 13, 2012 9:48 pm

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

Postby halfnelson » Sun Mar 30, 2014 7:51 pm

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]
halfnelson
 
Posts: 707
Joined: Wed Jun 13, 2012 9:48 pm

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

Postby JDance » Mon Mar 31, 2014 12:18 am

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.
User avatar
JDance
 
Posts: 462
Joined: Mon Oct 08, 2012 12:11 am
Location: http://skyturns.se

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

Postby halfnelson » Mon Mar 31, 2014 3:25 am

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.
halfnelson
 
Posts: 707
Joined: Wed Jun 13, 2012 9:48 pm

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

Postby ibisum » Mon Mar 31, 2014 3:29 am

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! :)
;
--
Email: ibisum@gmail.com
IRC: torpor on FreeNode, see you in the #moai channel
Got a MOAI snippet? Please consider adding it to http://moaisnippets.info/
User avatar
ibisum
 
Posts: 1501
Joined: Mon Oct 17, 2011 1:11 am
Location: Vienna, Austria

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

Postby scottwb » Mon Mar 31, 2014 4:02 am

It sounds great but on my Mac/Safari, hitting the play button doesn't show anything :(

Am I doing something wrong?
User avatar
scottwb
 
Posts: 324
Joined: Sat Jan 12, 2013 2:10 pm

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

Postby ibisum » Mon Mar 31, 2014 4:05 am

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?
;
--
Email: ibisum@gmail.com
IRC: torpor on FreeNode, see you in the #moai channel
Got a MOAI snippet? Please consider adding it to http://moaisnippets.info/
User avatar
ibisum
 
Posts: 1501
Joined: Mon Oct 17, 2011 1:11 am
Location: Vienna, Austria

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

Postby halfnelson » Mon Mar 31, 2014 4:22 am

@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
halfnelson
 
Posts: 707
Joined: Wed Jun 13, 2012 9:48 pm

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

Postby naturally » Mon Mar 31, 2014 4:24 am

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...
Image - Don't Be Patchman - a sneak-and-grow adventure!
User avatar
naturally
 
Posts: 706
Joined: Thu Aug 29, 2013 8:05 pm
Location: Canada

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

Postby halfnelson » Mon Mar 31, 2014 4:26 am

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" )
Last edited by halfnelson on Mon Mar 31, 2014 4:31 am, edited 2 times in total.
halfnelson
 
Posts: 707
Joined: Wed Jun 13, 2012 9:48 pm

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

Postby halfnelson » Mon Mar 31, 2014 4:28 am

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.
halfnelson
 
Posts: 707
Joined: Wed Jun 13, 2012 9:48 pm

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

Postby Vavius » Mon Mar 31, 2014 7:02 am

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

Vavius
 
Posts: 264
Joined: Mon Apr 29, 2013 6:04 am

Next

Return to Community Contributions

Who is online

Users browsing this forum: No registered users and 0 guests

cron

x