Hey website owners! Let people view *FULLY FORMATTED* spin code without a download!
Microcontrolled
Posts: 2,461
OK, fair warning, this is a little bit of a pre-release (a.k.a teaser), but I couldn't wait any longer. Behold: a PHP script that formats Propeller code into colored code blocks, colored numbers, and all the great viewing features of the Propeller IDE! And best of all, you can view it on any mobile platform!
It still has a few bugs to work out, but if you want to see it in it's current state of development, click here: http://microcontrolled.com/compiler.php
You have to admit, it sure beats this: http://svn.deepdarc.com/code/ybox2/trunk/firmware/clock.spin
As you can see, very similar to Propeller tool in it's look. When I say "some bugs" here are the most major ones:
(1: Currently it is SPIN only, no PASM support
(2: This is the big one: It does not support Unicode text. Don't worry, though, I'm working this out ASAP. See my post in the Sandbox for more info on that.
This is really part of a bigger project that I would like to get some people to help on: A full Web based Propeller IDE. That means editing Prop code on your iPhone or Android tablet, which has been requested heavily on the forums. Really all you would need for this is a mobile device detection script, a login system for keeping the files on the server, and the HTML code outputted by the PHP script to be put into a text editing box. If there is any interest in such a project, respond, but if there isn't, then you can still use this viewing script!
Well, enough talk, lets see some source code! Since the forum won't let me post PHP files, I'll put a link to the file on my blog: http://microcontrolled.com/PropellerSourceViewer.zip
I'm now working on an integrated link system that will allow you to generate a URL link to your formatted spin code, and put a download link at the top. That way you can post them to the forums. I'll update you when that is completed.
I REALLY hope this will be useful to some people. Share your questions and comments!
Thanks,
Microcontrolled
It still has a few bugs to work out, but if you want to see it in it's current state of development, click here: http://microcontrolled.com/compiler.php
You have to admit, it sure beats this: http://svn.deepdarc.com/code/ybox2/trunk/firmware/clock.spin
As you can see, very similar to Propeller tool in it's look. When I say "some bugs" here are the most major ones:
(1: Currently it is SPIN only, no PASM support
(2: This is the big one: It does not support Unicode text. Don't worry, though, I'm working this out ASAP. See my post in the Sandbox for more info on that.
This is really part of a bigger project that I would like to get some people to help on: A full Web based Propeller IDE. That means editing Prop code on your iPhone or Android tablet, which has been requested heavily on the forums. Really all you would need for this is a mobile device detection script, a login system for keeping the files on the server, and the HTML code outputted by the PHP script to be put into a text editing box. If there is any interest in such a project, respond, but if there isn't, then you can still use this viewing script!
Well, enough talk, lets see some source code! Since the forum won't let me post PHP files, I'll put a link to the file on my blog: http://microcontrolled.com/PropellerSourceViewer.zip
I'm now working on an integrated link system that will allow you to generate a URL link to your formatted spin code, and put a download link at the top. That way you can post them to the forums. I'll update you when that is completed.
I REALLY hope this will be useful to some people. Share your questions and comments!
Thanks,
Microcontrolled
Comments
You may want to use @font-face to import the parallax font for devices that don't have it installed.
For example:
[HTML]
<style type="text/css">
@font-face{
font-family: Parallax;
src: url('http://www.parallax.com/Portals/0/Downloads/sw/propeller/Parallax.ttf');
}
</style>
[/HTML]
I would be interested in working on this project.
for mobile browser detection, this JQuery script should do nicely:
[HTML]
/*
* jQuery.browser.mobile will be true if the browser is a mobile device
*/
(function(a){jQuery.browser.mobile=/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);
[/HTML]
You might also look into CodeMirror for editing. I'm not sure if it supports Mobile Devices, but I would suppose it would.
http://codemirror.net
I had almost just skipped this thread because of the mobile phone header (yuck) in the title.
Great work, please continue, this will be greate for posting SPIN code on web sites.
I have to say, I'm impressed with the progress you've made recently, both in your technical acumen ... and with your grammar and spelling.
-Phil
@Processing data: I just made the changes using the font-face code you have given me, and it appears to work on my iPod, though for some reason my iPod doesn't want to display anything in bold whereas before it did. I'll be working this out, but thanks for the code! If you want to help with the project to edit on a mobile, you can edit the source code I posted and upload it to my server. I'll give you a link later. Fair warning though: I am not a great PHP programmer, and although this is not my first project, I'm still no pro and the code is pretty messy. Tidying up the code would be a project in itself, so I'll just leave it as it is for now.
@davidsauders: I know what you mean, the original title was "without a download" instead of "on their mobile", but I thought last minute that it would be of greater interest to people. I guess I could always change the title, but someone may get mad about that. You can never please everyone. I still think I'll change it to "without a download", though.
@Phil Pilgrim: Wow, thanks! It's not every day I get a compliment from one of the "Propeller-legends", especially the spelling police ones. :-)
Thanks to everyone!
Microcontrolled
Cool. Good job!
You might save yourself some time in the future by using this tool to determine color codes on your screen.
http://www.iconico.com/colorpic/
..Steve
It currently supports Manual highlighting of the background of code blocks (PUB,PRI,VAR, ect.)
I hopefully will get it working to he point where it can highlight the backgrounds on-the-fly, as well as complete syntax highlighting.
You can download your code under a custom filename.
It has been tested in Firefox 4, Google Chrome 11.0, Safari 5.05, Internet Explorer 8, and Opera 11.11. (all on windows)
Background highlighting does not work in: Internet Explorer 8.
Code Editing does not work in: Opera 11.11
The editor is still glitchy, and acts weird sometimes, but feel free to try it out!
http://propeller.dyndns-ip.com/driveshaft/
I'm wondering if I can embed this inside my VisualSpin MFC code using an CHTMLDialog...
Might have to try that out...
Hi! This is really nice, I was going to implement a similar feature for my www.c3emulation.com website to show spin and asm code.
Of course my solution is hand made, nothing of automatic, but is functional right now. Just a css with some basic classes.
But if you develop a plugin it would be great
Compliments!