First commit

.gitignore

@@ -0,0 +1,47 @@
+#laserweb
+
+# Compiled source #
+###################
+*.com
+*.class
+*.dll
+*.exe
+*.o
+*.so
+
+# Packages #
+############
+# it's better to unpack these files and commit the raw source
+# git has its own built in compression methods
+*.7z
+*.dmg
+*.gz
+*.iso
+*.jar
+*.rar
+*.tar
+*.zip
+
+# Logs and databases #
+######################
+*.log
+*.sql
+*.sqlite
+logfile.txt
+
+# OS generated files #
+######################
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+Icon?
+ehthumbs.db
+Thumbs.db
+*~
+node_modules
+
+# Local settings #
+##################
+.env

.travis.yml

@@ -0,0 +1,27 @@
+language: node_js
+node_js:
+  - "7"
+sudo: required
+dist: trusty
+before_install:
+  - sudo apt-get install --no-install-recommends -y icnsutils graphicsmagick xz-utils
+  - cd ../
+  - git clone https://github.com/LaserWeb/LaserWeb4.git
+  - cd LaserWeb4
+  - git checkout dev-es6
+  - npm install
+  - npm run installdev
+  - npm run bundle-dev
+  - cd ../lw.comm-server
+  - npm install
+  - ./node_modules/.bin/electron-rebuild
+  - npm run dist
+branches:
+  only:
+    - electron_bundler
+after_success:
+  - rm -rf node_modules
+  - rm -rf dist/linux-unpacked
+  - rm -rf app
+addons:
+  artifacts: true

LICENSE

@@ -0,0 +1,674 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    {one line to give the program's name and a brief idea of what it does.}
+    Copyright (C) {year}  {name of author}
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    {project}  Copyright (C) {year}  {fullname}
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<http://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<http://www.gnu.org/philosophy/why-not-lgpl.html>.

app/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

app/index.html

@@ -0,0 +1,564 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>ProjectMakr</title>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="author" content="Peter vd Walt">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="lib/nprogress/nprogress.css" />
+    <link rel="stylesheet" href="lib/fontawesome/css/font-awesome.css" />
+    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css" />
+    <!-- <link rel="stylesheet" href="lib/bootstrap/css/bootswatch-darkly.min.css" /> -->
+    <link rel="stylesheet" href="lib/jquery/jquery-ui/jquery-ui.min.css" />
+    <!-- <link rel="stylesheet" href="lib/jquery/colorpicker/css/wheelcolorpicker.css" /> -->
+    <link rel="stylesheet" href="lib/css/dro.css" />
+    <link rel="stylesheet" href="lib/css/jog.css" />
+    <link rel="stylesheet" href="lib/css/jog-z.css" />
+    <link rel="stylesheet" href="lib/css/jog-step.css" />
+    <link rel="stylesheet" href="lib/css/jogcontainer.css" />
+    <link rel="stylesheet" href="lib/css/override.css" />
+    <link rel="stylesheet" href="lib/css/main.css" />
+  </head>
+  <body>
+
+   <!-- Begin page content -->
+
+   <nav class="navbar navbar-expand-lg navbar-light bg-light">
+     <a class="navbar-brand" href="#">ProjectMakr</a>
+     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+       <span class="navbar-toggler-icon"></span>
+     </button>
+     <div class="collapse navbar-collapse" id="navbarSupportedContent">
+     <!-- <ul class="navbar-nav mr-auto">
+       <li class="nav-item active">
+         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+       </li>
+       <li class="nav-item">
+         <a class="nav-link" href="#">Link</a>
+       </li>
+       <li class="nav-item dropdown">
+         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+           Dropdown
+         </a>
+         <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+           <a class="dropdown-item" href="#">Action</a>
+           <a class="dropdown-item" href="#">Another action</a>
+           <div class="dropdown-divider"></div>
+           <a class="dropdown-item" href="#">Something else here</a>
+         </div>
+       </li>
+       <li class="nav-item">
+         <a class="nav-link disabled" href="#">Disabled</a>
+       </li>
+     </ul> -->
+     <!-- <form class="form-inline my-2 my-lg-0">
+        <input class="form-control" id="color" data-wcp-preview="true" />
+     </form> -->
+     <form class="form-inline my-2 my-lg-0">
+       <span class="fa-stack fa-fw" data-toggle="tooltip" data-placement="bottom" title="Flashes red when machine has entered ALARM state, click Clear Alarm button">
+         <i id="navbell" class="fa fa-bell fa-stack-1x text-danger"></i>
+         <i class="fa fa-bell-o fa-stack-1x"></i>
+       </span>
+       &nbsp;&nbsp;
+       <div class="input-group input-group-sm">
+        <div class="input-group-prepend">
+          <span class="input-group-text" id="basic-addon1" style="color: #fff;"><i class="fa fa-usb" aria-hidden="true"></i></span>
+        </div>
+        <select class="form-control" id="portUSB">`
+          <option value="">Waiting for USB</option>
+        </select>
+          <span class="input-group-btn">
+            <button onclick="selectPort()" id="connectBtn" class="btn btn-sm btn-success" type="button">Connect</button>
+            <button style="display:none;" onclick="closePort()" id="disconnectBtn" class="btn btn-sm btn-danger" type="button">Disconnect</button>
+          </span>
+        </div>
+     </form>
+   </div>
+ </nav>
+
+
+
+      <div class="container-fluid h-100">
+        <div class="row h-100">
+          <div class="col-md-4">
+            <div class="card">
+              <div class="card-header clearfix">
+                <div class="float-left">
+                  <!-- left -->
+                  <h5>console</h5>
+                </div>
+                <div class="float-right">
+                  <div class="btn-group btn-group-xs btn-group-justified btn-group-sm mr-2" role="group" aria-label="First group">
+                    <button id="sdlist" data-toggle="tooltip" data-placement="bottom" title="Upload GCODE to SD Card" class="btn btn-xs btn-success needs-connection"><i class="fa fa-fw"><img style="margin-top: -5px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAB3SURBVDhP5dIxCoAgGMVxp87UVmPHaSvoAHWjaAjbOlb93/AtYp+r0IMficlT0FBlWkyODm5m3NgyLqxwowIt0km0m3a1sf1zY4vs+2TmPtPgwIIeA3R0GxcLRpxQUS7FgtKCvxREpK/P7HALdF3p60vpOqtJCC/FOilHxm6RMAAAAABJRU5ErkJggg=="></i>LIST</button>
+                    <button id="sdtogglemodal" data-toggle="tooltip" data-placement="bottom" title="Upload GCODE to SD Card" class="btn btn-xs btn-success needs-connection"><i class="fa fa-fw"><img style="margin-top: -5px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAB3SURBVDhP5dIxCoAgGMVxp87UVmPHaSvoAHWjaAjbOlb93/AtYp+r0IMficlT0FBlWkyODm5m3NgyLqxwowIt0km0m3a1sf1zY4vs+2TmPtPgwIIeA3R0GxcLRpxQUS7FgtKCvxREpK/P7HALdF3p60vpOqtJCC/FOilHxm6RMAAAAABJRU5ErkJggg=="></i>UPLOAD</button>
+                    <button id="playbtn" data-toggle="tooltip" data-placement="bottom" title="Run GCODE over USB" class="btn btn-xs btn-success needs-connection" onclick="runJob()"><i class="fa fa-play fa-fw"></i>PLAY</button>
+                    <button id="pausebtn" data-toggle="tooltip" data-placement="bottom" title="Pause" class="btn btn-xs btn-success needs-connection" onclick="pauseJob();"><i class="fa fa-pause fa-fw"></i></button>
+                    <button id="stopbtn" data-toggle="tooltip" data-placement="bottom" title="Stop" class="btn btn-xs btn-success needs-connection" onclick="stopJob();"><i class="fa fa-stop fa-fw"></i></button>
+                    <button id="clralarmbtn" data-toggle="tooltip" data-placement="bottom" title="Clear Alarm" class="btn btn-xs btn-success needs-connection" onclick="clearAlarm()"><i class="fa fa-bell-slash fa-fw"></i></button>
+                  </div>
+                </div>
+                <div class="float-right">
+                <!--  -->
+                </div>
+              </div>
+              <div class="card-block">
+                <div class="pull-left">
+                  <span class="badge badge-pill badge-secondary"><span id="connectStatus">Not Connected</span></span>
+                  <span class="badge badge-pill badge-secondary"><span id="runStatus">Not Connected</span></span>
+                </div>
+                <div id="console"></div>
+              </div>
+              <div class="card-footer" style="height: 32px; padding-top: 0px; padding-bottom: 0px;padding-left: 0px; padding-right: 0px">
+                  <div class="input-group input-group-sm">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" id="basic-addon1" style="color: #fff;"><i class="fa fa-terminal"></i></span>
+                    </div>
+                    <input id="command" type="text" autocomplete="on" class="form-control needs-connection" />
+                    <div class="input-group-btn btn-group-sm">
+                      <button id="sendCommand" class="btn btn-success needs-connection" type="button">
+                          <i class="fa fa-play" style="margin-right: 10px;"></i> Send
+                      </button>
+                      <button class="emptylog btn btn-success" type="button" onclick="$('#console').empty();">
+                          <i class="fa fa-trash"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-8">
+            <div class="card">
+              <div class="card-header" style="height: 54px;">
+                <div class="float-left">
+                  <h5>control</h5>
+                </div>
+              </div>
+              <div class="card-block">
+                <div class="container-fluid">
+
+                  <div class="row">
+                    <div class="col-md-12">
+
+                      <div class="container-fluid">
+                        <div class="row no-gutters">
+                          <div class="col-xs-auto">
+                            <div class="container-dro">
+                                <div class="horizontal-dro">
+                                  <div class="dro-label" style="color: #f22">X</div>
+                                  <div class="dro-value" style="color: #f22" id="ModernXPos">0.00</div>
+                                  <div class="dro-settings" style="color: #ccc">
+                                    <i id="xMotorSet" class="fa fa-cog" aria-hidden="true"></i>
+                                  </div>
+                                </div>
+                                <div class="horizontal-meter">
+                                  <div id="xMotorVU" class="vu-activity" style="clip-path: inset(0px 0.9902% 0px 0px);"></div>
+                                </div>
+                                <div class="horizontal-dro">
+                                  <div class="dro-label" style="color: #2f2">Y</div>
+                                  <div class="dro-value" style="color: #2f2" id="ModernYPos">0.00</div>
+                                  <div class="dro-settings" style="color: #ccc"><i class="fa fa-cog" aria-hidden="true"></i></div>
+                                </div>
+                                <div class="horizontal-meter">
+                                  <div id="yMotorVU" class="vu-activity" style="clip-path: inset(0px 25.9902% 0px 0px);"></div>
+                                </div>
+                                <div class="horizontal-dro">
+                                  <div class="dro-label" style="color: #0cf">Z</div>
+                                  <div class="dro-value" style="color: #0cf" id="ModernZPos">0.00</div>
+                                  <div class="dro-settings" style="color: #ccc"><i class="fa fa-cog" aria-hidden="true"></i></div>
+                                </div>
+                                <div class="horizontal-meter">
+                                  <div id="zMotorVU" class="vu-activity" style="clip-path: inset(0px 50.9902% 0px 0px);"></div>
+                                </div>
+                                <div class="horizontal-dro">
+                                  <div class="dro-label" style="color: #ff2">A</div>
+                                  <div class="dro-value" style="color: #ff2" id="ModernAPos">0.00</div>
+                                  <div class="dro-settings" style="color: #ccc"><i class="fa fa-cog" aria-hidden="true"></i></div>
+                                </div>
+                                <div class="horizontal-meter">
+                                  <div id="aMotorVU" class="vu-activity" style="clip-path: inset(0px 77.9902% 0px 0px);"></div>
+                                </div>
+
+                              </div>
+                          </div>
+                          <div class="col-xs-auto">
+                            <div class="container-jog">
+                              <div class="de2">
+                                <div class="den2">
+                                  <hr class="line2">
+                                  <hr class="line2">
+                                  <div class="switch2">
+                                    <label id="label_up" for="switch_up"><span>Y+</span></label>
+                                    <label id="label_down" for="switch_down"><span>Y-</span></label>
+                                    <label id="label_left" for="switch_left"><span>X-</span></label>
+                                    <label id="label_right" for="switch_right"><span>X+</span></label>
+                                    <input id="switch_up" name="jog" checked type="radio" value="y+">
+                                    <input id="switch_down" name="jog" type="radio" value="y-">
+                                    <input id="switch_left" name="jog" type="radio" value="x-">
+                                    <input id="switch_right" name="jog" type="radio" value="x+">
+                                    <div class="light_up"><span></span></div>
+                                    <div class="light_down"><span></span></div>
+                                    <div class="light_left"><span></span></div>
+                                    <div class="light_right"><span></span></div>
+                                    <div class="dene2">
+                                      <div class="denem2">
+                                        <div class="deneme2">
+                                          <div class="denememe2">
+                                            <select class="flatselect" id="xyfeedrate">
+                                              <option value="500">500mm/min</option>
+                                              <option value="1000" selected>1000mm/min</option>
+                                              <option value="1500">1500mm/min</option>
+                                              <option value="2000">2000mm/min</option>
+                                              <option value="3000">3000mm/min</option>
+                                              <option value="4000">4000mm/min</option>
+                                            </select>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="col-xs-auto text-center">
+                            <div class="container-jog-z">
+                              <div class="de-z">
+                                <div class="den-z">
+                                  <hr class="line-z">
+                                  <div class="switch-z">
+                                    <label id="label_zP" for="switch_zP"><span>Z+</span></label>
+                                    <label id="label_zM" for="switch_zM"><span>Z-</span></label>
+                                    <input id="switch_zP" name="jog" checked type="radio" value="z+">
+                                    <input id="switch_zM" name="jog" checked type="radio" value="z-">
+                                    <div class="light_zP"><span></span></div>
+                                    <div class="light_zM"><span></span></div>
+                                    <div class="dene2">
+                                      <div class="denem2">
+                                        <div class="deneme2">
+                                          <div class="denememe2">
+                                            <select class="flatselect"  id="zfeedrate">
+                                              <option value="100">100mm/min</option>
+                                              <option value="300">300mm/min</option>
+                                              <option value="500" selected>500mm/min</option>
+                                              <option value="800">800mm/min</option>
+                                              <option value="1000">1000mm/min</option>
+                                              <option value="1500">1500mm/min</option>
+
+                                            </select>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="col-xs-auto">
+                            <div class="container-size">
+                              <div class="de">
+                                <div class="den">
+                                  <hr class="line">
+                                  <hr class="line">
+                                  <hr class="line">
+                                  <div class="switch">
+                                    <label for="switch_off"><span>0.1</span></label>
+                                    <label for="switch_1"><span>1</span></label>
+                                    <label for="switch_2"><span>5</span></label>
+                                    <label for="switch_3"><span>10</span></label>
+                                    <label for="switch_4"><span>50</span></label>
+                                    <label for="switch_5"><span>100</span></label>
+                                    <input id="switch_off" name="switch" checked type="radio" value="0.1">
+                                    <input id="switch_1" name="switch" type="radio" value="1">
+                                    <input id="switch_2" name="switch" type="radio" value="5">
+                                    <input id="switch_3" name="switch" type="radio" value="10">
+                                    <input id="switch_4" name="switch" type="radio" value="50">
+                                    <input id="switch_5" name="switch" type="radio" value="100">
+                                    <div class="light"><span></span></div>
+                                    <div class="dot"><span></span></div>
+                                    <div class="dene">
+                                      <div class="denem">
+                                        <div class="deneme">
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="col-xs-auto">
+                            <div class="container-override">
+                              <div id="FROslider"><div id="handle" class="ui-slider-handle"></div><div class="sliderlabel">feed</div></div>
+                              <div id="SROslider" style="margin-left: 70px;"><div id="handle2" class="ui-slider-handle"></div><div class="sliderlabel">tool</div></div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col-md-12">
+                      <div id="tempControls" style="padding: 5px; max-width: 300px">
+                        <div id="tempcontrolsT0">
+                          <div class="drolabel">T0:</div>
+                          <div id="T0CurTemp" class="droTemp text-dark">0</div>
+                          <div id="T0SetTemp" class="droTemp text-dark" style="display:none;">
+                              <input id="T0SetTempInput" type="text" style="border: 0px; width: 120px; height: 28px; font-size: 18px; text-align: center; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; font-weight: 700;">
+                              <button type="button" style="border: 0px; height: 28px;" id="T0Set">set</button>
+                          </div>
+                          <div class="droUnit" style="margin-left: 0px;"> &#8451;</div><br />
+                        </div>
+                        <div id="tempcontrolsT1">
+                          <div class="drolabel">T1:</div>
+                          <div id="T1CurTemp" class="droTemp text-dark">0</div>
+                          <div id="T1SetTemp" class="droTemp text-dark" style="display:none;">
+                            <input id="T1SetTempInput" type="text" style="border: 0px; width: 120px; height: 28px; font-size: 18px; text-align: center; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; font-weight: 700;">
+                            <button type="button" style="border: 0px; height: 28px;" id="T1Set">set</button>
+                          </div>
+                          <div class="droUnit" style="margin-left: 0px;"> &#8451;</div><br />
+                        </div>
+                        <div id="tempcontrolsB0">
+                          <div class="drolabel">B:</div>
+                          <div id="B0CurTemp" class="droTemp text-dark">0</div>
+                          <div id="B0SetTemp" class="droTemp text-dark" style="display:none;">
+                            <input id="B0SetTempInput" type="text" style="border: 0px; width: 120px; height: 28px; font-size: 18px; text-align: center; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; font-weight: 700;">
+                            <button type="button" style="border: 0px; height: 28px;" id="B0Set">set</button>
+                          </div>
+                          <div class="droUnit" style="margin-left: 0px;"> &#8451;</div><br />
+                          <div id="monitor" style="width: calc(99% - 20px); height:140px; display:block;"></div>
+                        </div>
+                    </div>
+                    </div>
+                  </div>
+                </div>
+
+
+              </div>
+          </div>
+        </div>
+      </div>
+        <p>
+        <div class="row h-100">
+          <div class="col-md-4">
+            <div class="card">
+              <div class="card-header clearfix">
+                <div class="float-left">
+                  <h5>gcode</h5>
+                </div>
+                <div class="float-right">
+                  <span data-toggle="tooltip" data-placement="bottom" title="Open GCODE"   class="btn btn-xs btn-success btn-file" title="Open a png, .jpg, .jpeg, .bmp, .gcode, .svg, .dxf, or .stl file" id="openbutton"><i class="fa fa-folder-open fa-fw"></i>open<input id="file" type="file" accept=".png,.jpg,.jpeg,.bmp,.gcode,.g,.svg,.dxf,.stl" /></span>
+                  <button data-toggle="tooltip" data-placement="bottom" title="Save GCODE" class="btn btn-xs btn-sm btn-success btn-file" title="Export GCODE to a file" onclick="saveFile()"><i class="fa fa-save fa-fw"></i>save</span></button>
+                </div>
+              </div>
+              <div class="card-block">
+                <div class="float-left">
+                  <span class="badge badge-pill badge-secondary">Line: <span id="gcodesent">0</span>/<span id="gcodetobesent">0</span></span>
+                </div>
+                <div id="editor"></div>
+              </div>
+              <div class="card-footer" style="height: 32px; padding-top: 2px; padding-left: 2px;">
+                <div class="float-left">
+                  <div class="btn-group btn-group-xs btn-group-justified btn-group-sm mr-2" role="group" aria-label="First group">
+                    <button data-toggle="tooltip" data-placement="bottom" title="Find and Replace" class="btn btn-xs btn-success" onclick="editor.execCommand('replace')"><i class="fa fa-search fa-fw"></i></button>
+                    <button data-toggle="tooltip" data-placement="bottom" title="Select All" class="btn btn-xs btn-success" onclick="editor.execCommand('selectall')"><i class="fa fa-clipboard fa-fw"></i></button>
+                    <button data-toggle="tooltip" data-placement="bottom" title="Undo" class="btn btn-xs btn-success" onclick="editor.execCommand('undo')"><i class="fa fa-undo fa-fw"></i></button>
+                    <button data-toggle="tooltip" data-placement="bottom" title="Redo" class="btn btn-xs btn-success" onclick="editor.execCommand('redo')"><i class="fa fa-repeat fa-fw"></i></button>
+                    <button data-toggle="tooltip" data-placement="bottom" title="Go to End" class="btn btn-xs btn-success" onclick="editor.execCommand('gotoend')"><i class="fa fa-chevron-down fa-fw"></i></button>
+                    <button data-toggle="tooltip" data-placement="bottom" title="Go to Start" class="btn btn-xs btn-success" onclick="editor.execCommand('gotostart')"><i class="fa fa-chevron-up fa-fw"></i></button>
+                    <button data-toggle="tooltip" data-placement="bottom" title="Clear Editor" class="btn btn-xs btn-success" onclick="editor.execCommand('selectall'); editor.execCommand('del'); clearViewer(); doPreview();"><i class="fa fa-eraser fa-fw"></i></button>
+                    <!-- <button data-toggle="tooltip" data-placement="bottom" title="Editor Settings" class="btn btn-xs btn-success btn-file" onclick="editor.execCommand('showSettingsMenu')"><i class="fa fa-cogs fa-fw"></i></span></button> -->
+                  </div>
+                </div>
+
+                <div class="float-right">
+                  <div class="btn-group btn-group-xs btn-group-justified btn-group-sm mr-2" role="group">
+                    <button data-toggle="tooltip" data-placement="bottom" title="Render GCODE Preview" class="btn btn-xs btn-success btn-file" onclick="doPreview();"><span id="previewbtntext"><i class="fa fa-star-o fa-fw"></i>preview</span></button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-8">
+            <div class="card">
+
+              <div class="card-header" style="height: 54px;">
+                <div class="float-left">
+                  <h5>preview</h5>
+                </div>
+                <div class="float-right">
+                  <button data-toggle="tooltip" data-placement="bottom" title="Reset View" class="btn btn-xs btn-sm btn-success" title="Empties Viewer Display" onclick="controls.reset()"><i class="fa fa-window-restore fa-fw"></i></span></button>
+                  <div class="btn-group" role="group" aria-label="Simulator">
+                    <button data-toggle="tooltip" data-placement="bottom" title="Run Simulator" id="simstartbtn" class="btn btn-xs btn-sm btn-success" title="Run realtime simulation" onclick="sim(0);"><i class="fa fa-fighter-jet fa-fw"></i>sim play</button>
+                    <button data-toggle="tooltip" data-placement="bottom" title="Stop Simulator" id="simstopbtn" style="display: none;" class="btn btn-xs btn-sm btn-success" title="Stop realtime simulation" onclick="simstop();"><i class="fa fa-stop fa-fw"></i>sim stop</button>
+                    <button data-toggle="tooltip" data-placement="bottom" title="Set Simulation Speed" class="btn btn-sm btn-xs btn-success" title="Set sim speed" onclick="simSpeed();"><i class="fa fa-tachometer fa-fw"></i><span id="simspeedval">1</span>x</button>
+                  </div>
+                  <button data-toggle="tooltip" data-placement="bottom" title="Clear preview" class="btn btn-sm btn-xs btn-success" title="Empties Viewer Display" onclick="editor.execCommand('selectall'); editor.execCommand('del'); clearViewer(); doPreview();"><i class="fa fa-eraser fa-fw"></i>clear</span></button>
+                </div>
+              </div>
+              <div class="card-block" id="renderCard">
+                <div id="renderArea" style="display: block;"></div>
+                <div id="conetext" class="form-group " style="position:absolute;top:45px;left:10px; padding-left: 5px; padding-right: 5px; display:none;">
+                  <span class="badge badge-success"><span id="simgcode"></span></span><br>
+                </div>
+                <div class="card mb-2" style="max-width: 20rem; display: block; position: absolute; bottom:0px; right:10px;">
+                  <div class="card-body" style="padding: 5px;">
+                    <button type="button" class="btn btn-xs btn-success" data-toggle="collapse" href="#viewform">View</button>
+                    <div class="collapse" id="viewform">
+                      <div class="form-check" style="margin-bottom: 1px;">
+                        <label class="form-check-label">
+                          <input class="form-check-input" type="checkbox" value="" checked>
+                          Machine
+                        </label>
+                      </div>
+                      <div class="form-check" style="margin-bottom: 1px;">
+                        <label class="form-check-label">
+                          <input class="form-check-input" type="checkbox" value="" checked id="view-grid">
+                          Grid
+                        </label>
+                      </div>
+                      <div class="form-check" style="margin-bottom: 1px;">
+                        <label class="form-check-label">
+                          <input class="form-check-input" type="checkbox" value="" checked id="view-gcode">
+                          GCODE
+                        </label>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+   <footer class="footer">
+     <div class="container">
+       <span class="text-muted"><!-- copyright --></span>
+     </div>
+   </footer>
+
+</div>
+
+<!-- Off-canvas Elements -->
+
+<!-- Context Menu for Editor -->
+<div class="dropdown-menu" id="editorContextMenu" aria-labelledby="dropdownMenuButton" style=" position: absolute; display:none;">
+    <span id="dropdowncontent"></span>
+</div>
+
+<!-- Modal for SD Upload -->
+<div class="modal" id="sdupload_modal">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">sd upload</h5>
+        <button id="sdmodalclosebtn" type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div id="sduploadform">
+          <form class="form">
+            <h5>Please enter a name for the new file.  <br><small>It will be uploaded to the SD Card and saved as this name</small></h5>
+            <div class="input-group">
+              <span class="input-group-addon">Filename: </span>
+              <input type="text" class="form-control" id="sdfilename" value="file.gcode">
+            </div>
+          </form>
+        </div>
+        <div id="sduploadprogress" style="display: none;">
+          <div class="progress" style="width: 100%;">
+            <div id="sdprogressup" class="progress-bar progress-bar-striped progress-warning" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" style="width: 1%"></div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" id="sduploadbtn" onclick="sdUpload()" class="btn btn-outline-primary">start upload</button>
+        <button type="button" id="sduploadcancelbtn"class="btn btn-success" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Modal for SD Upload -->
+<div class="modal" id="sdlist_modal">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">sd list</h5>
+        <button id="sdlistclosebtn" type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div id="sdlistcontent"></div>
+        <table class="table small table-striped table-hover">
+          <thead class="thead-light">
+            <tr>
+              <th scope="col" style="border-top: 0px;">Filename</th>
+              <th scope="col" style="border-top: 0px;">Action</th>
+            </tr>
+          </thead>
+          <tbody id="sdfilelist">
+        </table>
+
+      </div>
+      <div class="modal-footer">
+        <!-- <button type="button" id="sdlistbtn" onclick="sdUpload()" class="btn btn-outline-primary">start upload</button> -->
+        <button type="button" id="sdlistcancelbtn"class="btn btn-success" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+
+  </body>
+
+  <script src="/lib/lodash.core.js"></script>
+
+  <script src="lib/nprogress/nprogress.js"></script>
+
+  <script type="text/javascript" src="./lib/jquery/jquery.min.js"></script>
+  <script type="text/javascript" src="./lib/jquery/jquery.min.js"></script>
+  <script type="text/javascript" src="./lib/jquery/jquery.flow.js"></script>
+  <script type="text/javascript" src="./lib/jquery/jquery-ui/jquery-ui.min.js"></script>
+  <!-- <script type="text/javascript" src="./lib/jquery/colorpicker/jquery.wheelcolorpicker.js"></script> -->
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
+  <script type="text/javascript" src="./lib/bootstrap/js/bootstrap.min.js"></script>
+  <script type="text/javascript" src="./lib/ace/src-noconflict/ace.js"></script>
+  <script type="text/javascript" src="./js/samplefile.js"></script>
+  <script type="text/javascript" src="./lib/threejs/three.min.js"></script>
+  <script type="text/javascript" src="./lib/threejs/GridRect.js"></script>
+  <script type="text/javascript" src="./lib/threejs/OrbitControls.js"></script>
+  <script type="text/javascript" src="./lib/threejs/Projector.js"></script>
+  <script type="text/javascript" src="./lib/threejs/CanvasRenderer.js"></script>
+  <script type="text/javascript" src="./lib/threejs/CSS3DRenderer.js"></script>
+  <script type="text/javascript" src="./lib/threejs/TransformControls.js"></script>
+  <script type="text/javascript" src="./lib/threejs/TweenMax.min.js"></script>
+  <script type="text/javascript" src="./lib/threejs/Stats.js"></script>
+
+  <script type="text/javascript" src="./js/jog.js"></script>
+
+  <!-- <script type="text/javascript" src="js/tempgraph.js"></script> -->
+
+  <script type="text/javascript" src="./js/viewer.js"></script>
+
+  <script type="text/javascript" src="./js/gcode-viewer/gcode-parser.js"></script>
+
+  <script type="text/javascript" src="/socket.io/socket.io.js"></script>
+  <script type="text/javascript" src="./js/websocket.js"></script>
+
+  <script type="text/javascript" src="./js/trinamic.js"></script>
+
+  <script src="./js/main.js"></script>
+
+</html>

app/js/STLExporter.js

@@ -0,0 +1,176 @@
+/**
+ * Based on https://github.com/mrdoob/three.js/blob/a72347515fa34e892f7a9bfa66a34fdc0df55954/examples/js/exporters/STLExporter.js
+ * Tested on r68 and r70
+ * @author jcarletto / https://github.com/jcarletto27
+ * @author kjlubick / https://github.com/kjlubick
+ * @author kovacsv / http://kovacsv.hu/
+ * @author mrdoob / http://mrdoob.com/
+
+ */
+THREE.STLExporter = function () {};
+
+THREE.STLExporter.prototype = {
+
+	constructor : THREE.STLExporter,
+
+	parse : (function () {
+
+		var vector = new THREE.Vector3();
+		var normalMatrixWorld = new THREE.Matrix3();
+
+		return function (scene) {
+
+			var output = '';
+
+			output += 'solid exported\n';
+
+			scene.traverse(function (object) {
+
+				if (object instanceof THREE.Mesh) {
+
+					var geometry = object.geometry;
+					var matrixWorld = object.matrixWorld;
+					var mesh = object;
+
+					if (geometry instanceof THREE.Geometry) {
+
+						var vertices = geometry.vertices;
+						var faces = geometry.faces;
+
+						normalMatrixWorld.getNormalMatrix(matrixWorld);
+
+						for (var i = 0, l = faces.length; i < l; i++) {
+							var face = faces[i];
+
+							vector.copy(face.normal).applyMatrix3(normalMatrixWorld).normalize();
+
+							output += '\tfacet normal ' + vector.x + ' ' + vector.y + ' ' + vector.z + '\n';
+							output += '\t\touter loop\n';
+
+							var indices = [face.a, face.b, face.c];
+
+							for (var j = 0; j < 3; j++) {
+								var vertexIndex = indices[j];
+								if (mesh.geometry.skinIndices.length == 0) {
+									vector.copy(vertices[vertexIndex]).applyMatrix4(matrixWorld);
+									output += '\t\t\tvertex ' + vector.x + ' ' + vector.y + ' ' + vector.z + '\n';
+								} else {
+									vector.copy(vertices[vertexIndex]); //.applyMatrix4( matrixWorld );
+
+									// see https://github.com/mrdoob/three.js/issues/3187
+									boneIndices = [];
+									boneIndices[0] = mesh.geometry.skinIndices[vertexIndex].x;
+									boneIndices[1] = mesh.geometry.skinIndices[vertexIndex].y;
+									boneIndices[2] = mesh.geometry.skinIndices[vertexIndex].z;
+									boneIndices[3] = mesh.geometry.skinIndices[vertexIndex].w;
+
+									weights = [];
+									weights[0] = mesh.geometry.skinWeights[vertexIndex].x;
+									weights[1] = mesh.geometry.skinWeights[vertexIndex].y;
+									weights[2] = mesh.geometry.skinWeights[vertexIndex].z;
+									weights[3] = mesh.geometry.skinWeights[vertexIndex].w;
+
+									inverses = [];
+									inverses[0] = mesh.skeleton.boneInverses[boneIndices[0]];
+									inverses[1] = mesh.skeleton.boneInverses[boneIndices[1]];
+									inverses[2] = mesh.skeleton.boneInverses[boneIndices[2]];
+									inverses[3] = mesh.skeleton.boneInverses[boneIndices[3]];
+
+									skinMatrices = [];
+									skinMatrices[0] = mesh.skeleton.bones[boneIndices[0]].matrixWorld;
+									skinMatrices[1] = mesh.skeleton.bones[boneIndices[1]].matrixWorld;
+									skinMatrices[2] = mesh.skeleton.bones[boneIndices[2]].matrixWorld;
+									skinMatrices[3] = mesh.skeleton.bones[boneIndices[3]].matrixWorld;
+
+
+									//this checks to see if the mesh has any morphTargets - jc
+									if (mesh.geometry.morphTargets !== 'undefined') {
+
+
+										morphMatricesX = [];
+										morphMatricesY = [];
+										morphMatricesZ = [];
+										morphMatricesInfluence = [];
+
+										for (var mt = 0; mt < mesh.geometry.morphTargets.length; mt++) {
+											//collect the needed vertex info - jc
+											morphMatricesX[mt] = mesh.geometry.morphTargets[mt].vertices[vertexIndex].x;
+											morphMatricesY[mt] = mesh.geometry.morphTargets[mt].vertices[vertexIndex].y;
+											morphMatricesZ[mt] = mesh.geometry.morphTargets[mt].vertices[vertexIndex].z;
+											morphMatricesInfluence[mt] = mesh.morphTargetInfluences[mt];
+										}
+
+									}
+									var finalVector = new THREE.Vector4();
+
+									if (mesh.geometry.morphTargets !== 'undefined') {
+
+										var morphVector = new THREE.Vector4(vector.x, vector.y, vector.z);
+
+										for (var mt = 0; mt < mesh.geometry.morphTargets.length; mt++) {
+											//not pretty, but it gets the job done - jc
+											morphVector.lerp(new THREE.Vector4(morphMatricesX[mt], morphMatricesY[mt], morphMatricesZ[mt], 1), morphMatricesInfluence[mt]);
+										}
+
+									}
+
+									for (var k = 0; k < 4; k++) {
+										if (mesh.geometry.morphTargets !== 'undefined') {
+											var tempVector = new THREE.Vector4(morphVector.x, morphVector.y, morphVector.z);
+										} else {
+											var tempVector = new THREE.Vector4(vector.x, vector.y, vector.z);
+										}
+										tempVector.multiplyScalar(weights[k]);
+										//the inverse takes the vector into local bone space
+										//which is then transformed to the appropriate world space
+										tempVector.applyMatrix4(inverses[k])
+										.applyMatrix4(skinMatrices[k]);
+										finalVector.add(tempVector);
+
+									}
+
+									output += '\t\t\tvertex ' + finalVector.x + ' ' + finalVector.y + ' ' + finalVector.z + '\n';
+								}
+							}
+							output += '\t\tendloop\n';
+							output += '\tendfacet\n';
+						}
+					}
+				}
+
+			});
+
+			output += 'endsolid exported\n';
+
+			return output;
+		};
+	}
+		())
+};
+
+function saveSTL(scene, name) {
+	var exporter = new THREE.STLExporter();
+	var stlString = exporter.parse(scene);
+
+	var blob = new Blob([stlString], {
+			type : 'text/plain'
+		});
+
+	// saveAs(blob, name + '.stl');
+	invokeSaveAsDialog(blob, name + '.stl');
+}
+var exporter = new THREE.STLExporter();
+var exportString = function (output, filename) {
+
+	var blob = new Blob([output], {
+			type : 'text/plain'
+		});
+	var objectURL = URL.createObjectURL(blob);
+
+	var link = document.createElement('a');
+	link.href = objectURL;
+	link.download = filename || 'data.json';
+	link.target = '_blank';
+	link.click();
+
+};

app/js/index.js

@@ -0,0 +1,13 @@
+function printLog(string) {
+	if (string.isString) {
+      string = string.replace(/\n/g, "<br />");
+	}
+    if ($('#console p').length > 300) {
+        // remove oldest if already at 300 lines
+        $('#console p').first().remove();
+    }
+    var template = '<p class="pf">';
+    template += string;
+    $('#console').append(template);
+    $('#console').scrollTop($("#console")[0].scrollHeight - $("#console").height());
+}

app/js/jog.js

@@ -0,0 +1,354 @@
+var ovLoop, ovStep  = 1;
+
+function initJog() {
+
+  $('body').on('keydown', function(ev) {
+		if (ev.keyCode === 17) {
+			//CTRL key down > set override stepping to 10
+			ovStep = 10;
+		}
+	});
+
+	$('body').on('keyup', function(ev) {
+		if (ev.keyCode === 17) {
+			//CTRL key released-> reset override stepping to 1
+			ovStep = 1;
+		}
+	});
+
+
+  $('#bounding').on('click', function() {
+    var bbox2 = new THREE.Box3().setFromObject(object);
+    console.log('bbox for Draw Bounding Box: '+ object +' Min X: ', (bbox2.min.x + (laserxmax / 2)), '  Max X:', (bbox2.max.x + (laserxmax / 2)), 'Min Y: ', (bbox2.min.y + (laserymax / 2)), '  Max Y:', (bbox2.max.y + (laserymax / 2)));
+    printLog("Drawing Bounding Box...", msgcolor, "jog");
+    var feedrate = $('#jogfeedxy').val() * 60;
+    if (firmware==='grbl') {
+    var moves = `
+        $J=G90 X`+(bbox2.min.x + (laserxmax / 2))+` Y`+(bbox2.min.y + (laserymax / 2))+` F`+feedrate+`\n
+        $J=G90 X`+(bbox2.max.x + (laserxmax / 2))+` Y`+(bbox2.min.y + (laserymax / 2))+` F`+feedrate+`\n
+        $J=G90 X`+(bbox2.max.x + (laserxmax / 2))+` Y`+(bbox2.max.y + (laserymax / 2))+` F`+feedrate+`\n
+        $J=G90 X`+(bbox2.min.x + (laserxmax / 2))+` Y`+(bbox2.max.y + (laserymax / 2))+` F`+feedrate+`\n
+        $J=G90 X`+(bbox2.min.x + (laserxmax / 2))+` Y`+(bbox2.min.y + (laserymax / 2))+` F`+feedrate+`\n
+    `;
+    } else {
+        var moves = `
+        G90\n
+        G0 X`+(bbox2.min.x + (laserxmax / 2))+` Y`+(bbox2.min.y + (laserymax / 2))+` F`+feedrate+`\n
+        G0 X`+(bbox2.max.x + (laserxmax / 2))+` Y`+(bbox2.min.y + (laserymax / 2))+` F`+feedrate+`\n
+        G0 X`+(bbox2.max.x + (laserxmax / 2))+` Y`+(bbox2.max.y + (laserymax / 2))+` F`+feedrate+`\n
+        G0 X`+(bbox2.min.x + (laserxmax / 2))+` Y`+(bbox2.max.y + (laserymax / 2))+` F`+feedrate+`\n
+        G0 X`+(bbox2.min.x + (laserxmax / 2))+` Y`+(bbox2.min.y + (laserymax / 2))+` F`+feedrate+`\n
+        G90\n`;
+    }
+    sendGcode(moves);
+  });
+
+  $('#homeAll').on('click', function(ev) {
+      var homecommand = document.getElementById('homingseq').value;
+      sendGcode(homecommand);
+  });
+
+  $('#homeX').on('click', function(ev) {
+      var homecommand = document.getElementById('homingseq').value;
+      sendGcode(homecommand + "X");
+  });
+  $('#homeY').on('click', function(ev) {
+      var homecommand = document.getElementById('homingseq').value;
+      sendGcode(homecommand + "Y");
+  });
+  $('#homeZ').on('click', function(ev) {
+      var homecommand = document.getElementById('homingseq').value;
+      sendGcode(homecommand + "Z");
+  });
+
+  $('#gotoXZero').on('click', function(ev) {
+    var feedrate = $('#jogfeedxy').val() * 60;
+    sendGcode('G0 X0 F' + feedrate);
+  });
+
+  $('#gotoYZero').on('click', function(ev) {
+    var feedrate = $('#jogfeedxy').val() * 60;
+    sendGcode('G0 Y0 F' + feedrate);
+  });
+
+  $('#gotoZZero').on('click', function(ev) {
+    var feedrate = $('#jogfeedz').val() * 60;
+    sendGcode('G0 Z0 F' + feedrate);
+  });
+
+  $('#XProbeMin').on('click', function(ev) {
+    sendGcode('G38.2 X20');
+  });
+
+  $('#XProbeMax').on('click', function(ev) {
+    sendGcode('G38.2 X-20');
+  });
+
+  $('#YProbeMin').on('click', function(ev) {
+    sendGcode('G38.2 Y20');
+  });
+
+  $('#YProbeMax').on('click', function(ev) {
+    sendGcode('G38.2 Y-20');
+  });
+
+  $('#ZProbeMin').on('click', function(ev) {
+    sendGcode('G38.2 Z-20');
+  });
+
+  // zero x axes
+  $('#zeroX').on('click', function(ev) {
+    console.log("X zero");
+    sendGcode('G10 L20 P0 X0\n');
+  });
+
+  // zero y axes
+  $('#zeroY').on('click', function(ev) {
+    console.log("Y zero");
+    sendGcode('G10 L20 P0 Y0\n');
+  });
+
+  // zero z axes
+  $('#zeroZ').on('click', function(ev) {
+    console.log("Z zero");
+    sendGcode('G10 L20 P0 Z0\n');
+  });
+
+  // zero all axes
+  $('#zeroAll').on('click', function(ev) {
+    console.log("Z zero");
+    sendGcode('G10 L20 P0 X0 Y0 Z0');
+  });
+
+
+  // increase feed override
+  $('#iF').on('mousedown', function(ev) {
+    // console.log("F+ mousedown");
+    override('F', ovStep);
+    ovLoop = setInterval(function() {
+      override('F', ovStep);
+    }, 300);
+  });
+
+  $('#iF').on('mouseup', function(ev) {
+    // console.log("F+ mouseup");
+    clearInterval(ovLoop);
+  });
+
+  $('#iF').on('mouseout', function(ev) {
+    // console.log("F+ mouseout");
+    clearInterval(ovLoop);
+  });
+
+  // decrease feed override
+  $('#dF').on('mousedown', function(ev) {
+    // console.log("F- mousedown");
+    override('F', -ovStep);
+    ovLoop = setInterval(function() {
+      override('F', -ovStep);
+    }, 300);
+  });
+
+  $('#dF').on('mouseup', function(ev) {
+    // console.log("F- mouseup");
+    clearInterval(ovLoop);
+  });
+
+  $('#dF').on('mouseout', function(ev) {
+    // console.log("F- mouseout");
+    clearInterval(ovLoop);
+  });
+
+  // reset feed override
+  $('#rF').on('click', function(ev) {
+    // console.log("F reset");
+    override('F', 0);
+  });
+
+  // increase spindle override
+  $('#iS').on('mousedown', function(ev) {
+    // console.log("S+ mousedown");
+    override('S', ovStep);
+    ovLoop = setInterval(function() {
+      override('S', ovStep);
+    }, 300);
+  });
+
+  $('#iS').on('mouseup', function(ev) {
+    // console.log("S+ mouseup");
+    clearInterval(ovLoop);
+  });
+
+  $('#iS').on('mouseout', function(ev) {
+    // console.log("S+ mouseout");
+    clearInterval(ovLoop);
+  });
+
+  // decrease spindle override
+  $('#dS').on('mousedown', function(ev) {
+    // console.log("S- mousedown");
+    override('S', -ovStep);
+    ovLoop = setInterval(function() {
+      override('S', -ovStep);
+    }, 300);
+  });
+
+  $('#dS').on('mouseup', function(ev) {
+    // console.log("S- mouseup");
+    clearInterval(ovLoop);
+  });
+
+  $('#dS').on('mouseout', function(ev) {
+    // console.log("S- mouseout");
+    clearInterval(ovLoop);
+  });
+
+  // reset spindle override
+  $('#rS').on('click', function(ev) {
+    // console.log("S reset");
+    override('S', 0);
+  });
+
+  $('#lT').on('click', function() {
+    if (isConnected) {
+      var power = $('#lasertestpower').val();
+      var duration = $('#lasertestduration').val();
+      console.log('Laser Test', power + ', ' + duration);
+      laserTest(power, duration);
+    }
+  });
+
+  $('#motorsOff').on('click', function() {
+    if (isConnected) {
+      console.log('Turning Off Motor Power');
+      sendGcode('M84\n');
+    }
+  });
+
+  $('#xP').on('click', function() {
+     if (isConnected) {
+       var dist = $('input[name=stp]:checked', '#stepsize').val();
+       var feedrate = $('#jogfeedxy').val() * 60;
+       console.log('Jog Distance', dist);
+       //sendGcode('G91\nG0 F'+ feedrate +' X'+ dist + '\nG90\n');
+       jog('X', dist, feedrate);
+     }
+  });
+
+  $('#yP').on('click', function() {
+     if (isConnected) {
+       var dist = $('input[name=stp]:checked', '#stepsize').val();
+       var feedrate = $('#jogfeedxy').val() * 60;
+       console.log('Jog Distance', dist);
+       //sendGcode('G91\nG0 F'+ feedrate +' Y'+ dist + '\nG90\n');
+       jog('Y', dist, feedrate);
+     }
+  });
+
+  $('#zP').on('click', function() {
+     if (isConnected) {
+       var dist = $('input[name=stp]:checked', '#stepsize').val();
+       var feedrate = $('#jogfeedz').val() * 60;
+       console.log('Jog Distance', dist);
+       //sendGcode('G91\nG0 F'+ feedrate +' Z'+ dist + '\nG90\n');
+       jog('Z', dist, feedrate);
+     }
+  });
+
+  $('#xM').on('click', function() {
+     if (isConnected) {
+       var dist = $('input[name=stp]:checked', '#stepsize').val();
+       var feedrate = $('#jogfeedxy').val() * 60;
+       console.log('Jog Distance', dist);
+       //sendGcode('G91\nG0 F'+ feedrate +' X-'+ dist + '\nG90\n');
+       jog('X', '-' + dist, feedrate);
+     }
+  });
+
+  $('#yM').on('click', function() {
+     if (isConnected) {
+       var dist = $('input[name=stp]:checked', '#stepsize').val();
+       var feedrate = $('#jogfeedxy').val() * 60;
+       console.log('Jog Distance', dist);
+       //sendGcode('G91\nG0 F'+ feedrate +' Y-'+ dist + '\nG90\n');
+       jog('Y', '-' + dist, feedrate);
+     }
+  });
+
+  $('#zM').on('click', function() {
+     if (isConnected) {
+       var dist = $('input[name=stp]:checked', '#stepsize').val();
+       var feedrate = $('#jogfeedz').val() * 60;
+       console.log('Jog Distance', dist);
+       //sendGcode('G91\nG0 F'+ feedrate +' Z-'+ dist + '\nG90\n');
+       jog('Z', '-' + dist, feedrate);
+     }
+  });
+
+  // Jog Widget
+  var lastJogSize = parseFloat(localStorage.getItem("lastJogSize") || 10);
+
+  $('#stepsize input').on('change', function() {
+    var newJogSize = $('input[name=stp]:checked', '#stepsize').val();
+     printLog('Jog will use ' + newJogSize + ' mm per click', successcolor, "jog");
+
+     $(".stepsizeval").empty();
+     $(".stepsizeval").html(newJogSize + 'mm');
+     // Save the setting to local storage once it's been set.
+     localStorage.setItem("lastJogSize", newJogSize.toString());
+  });
+
+  // Now set the initial setting from the saved settings
+  $("input[name=stp][value='"+lastJogSize+"']").click();
+
+  var jogfeedxy = parseFloat(localStorage.getItem("jogFeedXY") || 30);
+  var jogfeedz = parseFloat(localStorage.getItem("jogFeedZ") || 5);
+  $("#jogfeedxy").val(jogfeedxy);
+  $("#jogfeedz").val(jogfeedz);
+
+  $("#jogfeedxy").on('change', function() {
+    var jogfeedxy = parseFloat($("#jogfeedxy").val());
+    localStorage.setItem("jogFeedXY", jogfeedxy.toString());
+    printLog('Jog xy speed settings saved', successcolor, "jog");
+  });
+
+  $("#jogfeedz").on('change', function() {
+    var jogfeedz = parseFloat($("#jogfeedz").val());
+    localStorage.setItem("jogFeedZ", jogfeedz.toString());
+    printLog('Jog z speed settings saved', successcolor, "jog");
+  });
+}
+
+function saveJogSpeeds() {
+  var jogfeedxy = parseFloat($("#jogfeedxy").val());
+  var jogfeedz = parseFloat($("#jogfeedz").val());
+
+  localStorage.setItem("jogFeedXY", jogfeedxy.toString());
+  localStorage.setItem("jogFeedZ", jogfeedz.toString());
+
+  printLog('Jog speed settings saved', successcolor, "jog");
+
+}
+
+function override(param, value) {
+    if (laststatus.comms.connectionStatus > 0) {
+            switch (param) {
+                case 'F':
+                    socket.emit('feedOverride', value);
+                    break;
+                case 'S':
+                    socket.emit('spindleOverride', value);
+                    break;
+            }
+    } else {
+        printLog('You have to Connect to a machine First!');
+    }
+}
+
+function jog(dir, dist, feed = null) {
+    if (feed) {
+        socket.emit('jog', dir + ',' + dist + ',' + feed);
+    } else {
+        socket.emit('jog', dir + ',' + dist);
+    }
+}

app/js/main.js

@@ -0,0 +1,310 @@
+var editor = ace.edit("editor");
+var gcodeMonitor;
+var safeToUpdateSliders = true;
+
+$(document).ready(function() {
+
+  $('#tempControls').hide();
+  editor.$blockScrolling = Infinity;
+  editor.session.setMode("ace/mode/cncpro");
+  editor.setTheme('ace/theme/ambiance')
+  editor.setOption('printMarginColumn', 0)
+  editor.session.setValue(gcodesample); // from samplefile.js
+  editor.container.addEventListener("contextmenu", function(e) {
+    console.log("context")
+    var template = `<h6 class="dropdown-header"><div class="float-left">Line <span id="linenumber"></span>: Options</div><div class="float-right"><button type="button" class="close" aria-label="Close" onclick="$('#editorContextMenu').hide()"><span aria-hidden="true">&times;</span></button></div></h6><a class="dropdown-item" href="#"><i class="fa fa-fw fa-list-ol" aria-hidden="true"></i>&nbsp;Run queue from here</a>
+      <a class="dropdown-item" href="#" onclick="ContextLineRun();"><i class="fa fa-fw fa-play" aria-hidden="true"></i>&nbsp;Execute line: <code>` + editor.session.getLine(editor.getSelectionRange().start.row) + `</code></a>
+      <a class="dropdown-item" href="#" onclick="sim(` + (editor.getSelectionRange().start.row + 1) + `)"><i class="fa fa-fw fa-fighter-jet" aria-hidden="true"></i>&nbsp;Simulate from here</a>`
+    $("#dropdowncontent").html(template)
+    // console.log(e);
+    setposition(e);
+    e.preventDefault();
+    $('#linenumber').html((editor.getSelectionRange().start.row + 1));
+    // alert('success! - rightclicked line ' + (editor.getSelectionRange().start.row + 1));
+  }, false);
+
+
+
+
+  $(function() {
+    $('[data-toggle="tooltip"]').tooltip()
+  })
+
+  //File -> Open
+  var fileOpen = document.getElementById('file');
+  fileOpen.addEventListener('change', readFile, false);
+
+  // Fix for opening same file from http://stackoverflow.com/questions/32916687/uploading-same-file-into-text-box-after-clearing-it-is-not-working-in-chrome?lq=1
+  $('#file').bind('click', function() {
+    $('#file').val(null);
+  });
+
+  $('#view-gcode').change(function() {
+    if (this.checked) {
+      object.visible = true;
+    } else {
+      object.visible = false;
+    }
+  });
+
+  $('#view-grid').change(function() {
+    if (this.checked) {
+      grid.visible = true;
+    } else {
+      grid.visible = false;
+    }
+  });
+
+  // Fix tooltips - as recommended by https://stackoverflow.com/questions/33584392/bootstraps-tooltip-doesnt-disappear-after-button-click-mouseleave
+  $('[data-toggle="tooltip"]').tooltip({
+    trigger: 'hover click focus'
+  })
+
+  $('.btn').click(function() {
+    $('[data-toggle="tooltip"]').tooltip('hide');
+  })
+
+  $("input[name='jog']").change(function(e) {
+    console.log("Jogging " + $("input[name='jog']:checked").val() + " by " + $("input[name='switch']:checked").val());
+    var btn = $("input[name='jog']:checked").val()
+    var dist = $("input[name='switch']:checked").val()
+    var feedrate = $("#xyfeedrate").val();
+    var zfeedrate = $("#zfeedrate").val();
+    switch (btn) {
+      case 'x+':
+        jog('X', dist, feedrate);
+        break;
+      case 'x-':
+        jog('X', -dist, feedrate);
+        break;
+      case 'y+':
+        jog('Y', dist, feedrate);
+        break;
+      case 'y-':
+        jog('Y', -dist, feedrate);
+        break;
+      case 'z+':
+        jog('Z', dist, zfeedrate);
+        break;
+      case 'z-':
+        jog('Z', -dist, zfeedrate);
+        break;
+      default:
+        // code block
+    }
+    $('input[name=jog]').prop('checked', false);
+  });
+
+  // FeedOverride
+  var handle = $("#handle");
+
+  // Set safeToUpdateSliders flag used in status loop on websocket.js to avoid confict
+  $("#FROslider").hover(function() {
+    safeToUpdateSliders = false;
+  }, function() {
+    safeToUpdateSliders = true;
+  });
+
+  $('#FROslider').slider({
+    orientation: "vertical",
+    min: 0,
+    max: 200,
+    value: 100,
+    range: "min",
+    change: function(event, ui) {
+      if (event.originalEvent) {
+        console.log(ui.value);
+        handle.text(ui.value + "%");
+        socket.emit('feedOverride', ui.value);
+      }
+    },
+    create: function() {
+      handle.text($(this).slider("value") + "%");
+    },
+    slide: function(event, ui) {
+      if (event.originalEvent) {
+        handle.text(ui.value + "%");
+      }
+    }
+  });
+
+  var handle2 = $("#handle2");
+  // Set safeToUpdateSliders flag used in status loop on websocket.js to avoid confict
+  $("#SROslider").hover(function() {
+    safeToUpdateSliders = false;
+  }, function() {
+    safeToUpdateSliders = true;
+  });
+  $('#SROslider').slider({
+    orientation: "vertical",
+    min: 0,
+    max: 200,
+    value: 100,
+    range: "min",
+    change: function(event, ui) {
+      if (event.originalEvent) {
+        handle2.text(ui.value + "%");
+        console.log(ui.value);
+        socket.emit('spindleOverride', ui.value);
+      }
+    },
+    create: function() {
+      handle2.text($(this).slider("value") + "%");
+    },
+    slide: function(event, ui) {
+      if (event.originalEvent) {
+        handle2.text(ui.value + "%");
+      }
+    }
+  });
+
+  gcodeMonitor = setTimeout(function() {
+    $('#gcodetobesent').html(editor.session.getLength());
+  }, (500));
+
+
+  // // inputfield for rgb
+  // $('#color').wheelColorPicker({
+  //       format: "rgb",
+  //       autoConvert: true,
+  //       live: true,
+  //       sliders: 'wb',
+  //       autoResize: true
+  // });
+  // $('#color').on('sliderup', function() {
+  //   var rgb = $(this).wheelColorPicker('getValue', 'rgb')
+  //   // console.log("Color changed to ", getRGB(rgb));
+  //   //   M150 Rnnn Unnn Bnnn override leds R G B disables autoset for leds
+  //   var data = getRGB(rgb)
+  //   sendGcode("M150 R" + data.red + " U" + data.green + " B" + data.blue );
+  // });
+
+
+
+  init3D();
+  initSocket();
+  initJog();
+
+});
+
+function getRGB(str) {
+  var match = str.match(/rgba?\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)?(?:, ?(\d(?:\.\d?))\))?/);
+  return match ? {
+    red: match[1],
+    green: match[2],
+    blue: match[3]
+  } : {};
+}
+
+function printLog(string) {
+  if (string.isString) {
+    string = string.replace(/\n/g, "<br />");
+  }
+  if ($('#console p').length > 300) {
+    // remove oldest if already at 300 lines
+    $('#console p').first().remove();
+  }
+  var template = '<p class="pf">';
+  var time = new Date();
+
+  template += '<span class="text-info">[' + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds() + ']</span> ';
+  template += string;
+  $('#console').append(template);
+  $('#console').scrollTop($("#console")[0].scrollHeight - $("#console").height());
+}
+
+function readFile(evt) {
+  clearViewer()
+  // console.log(evt);
+  var f = evt.target.files[0];
+  if (f) {
+    var r = new FileReader();
+    if (f.name.match(/.gcode$/i) || f.name.match(/.txt$/i)) {
+      r.readAsText(evt.target.files[0]);
+      r.onload = function(event) {
+        // document.getElementById('gcodepreview').value = this.result;
+        editor.session.setValue(this.result);
+        doPreview();
+      };
+    }
+  }
+};
+
+function saveFile() {
+  var textToWrite = editor.getValue();
+  var blob = new Blob([textToWrite], {
+    type: "text/plain"
+  });
+  invokeSaveAsDialog(blob, 'file.gcode');
+};
+
+/**
+ * @param {Blob} file - File or Blob object. This parameter is required.
+ * @param {string} fileName - Optional file name e.g. "image.png"
+ */
+function invokeSaveAsDialog(file, fileName) {
+  if (!file) {
+    throw 'Blob object is required.';
+  }
+
+  if (!file.type) {
+    file.type = 'text/plain';
+  }
+
+  var fileExtension = file.type.split('/')[1];
+
+  if (fileName && fileName.indexOf('.') !== -1) {
+    var splitted = fileName.split('.');
+    fileName = splitted[0];
+    fileExtension = splitted[1];
+  }
+
+  var fileFullName = (fileName || (Math.round(Math.random() * 9999999999) + 888888888)) + '.' + fileExtension;
+
+  if (typeof navigator.msSaveOrOpenBlob !== 'undefined') {
+    return navigator.msSaveOrOpenBlob(file, fileFullName);
+  } else if (typeof navigator.msSaveBlob !== 'undefined') {
+    return navigator.msSaveBlob(file, fileFullName);
+  }
+
+  var hyperlink = document.createElement('a');
+  hyperlink.href = URL.createObjectURL(file);
+  hyperlink.target = '_blank';
+  hyperlink.download = fileFullName;
+
+  if (!!navigator.mozGetUserMedia) {
+    hyperlink.onclick = function() {
+      (document.body || document.documentElement).removeChild(hyperlink);
+    };
+    (document.body || document.documentElement).appendChild(hyperlink);
+  }
+
+  var evt = new MouseEvent('click', {
+    view: window,
+    bubbles: true,
+    cancelable: true
+  });
+
+  hyperlink.dispatchEvent(evt);
+
+  if (!navigator.mozGetUserMedia) {
+    URL.revokeObjectURL(hyperlink.href);
+  }
+}
+
+
+function setposition(e) {
+  var bodyOffsets = document.body.getBoundingClientRect();
+  tempX = e.pageX //- bodyOffsets.left;
+  tempY = e.pageY;
+  // console.log(tempX);
+  $("#editorContextMenu").show().css({
+    display: "block",
+    left: e.pageX,
+    top: e.pageY
+  });
+}
+
+$('#menuitems').on('click', function(e) {
+  setposition(e);
+});

app/js/tempgraph.js

@@ -0,0 +1,120 @@
+var hotend1 = [];
+var hotend2 = [];
+var heatbed = [];
+var tempLoop;
+
+$( document ).ready(function() {
+  $.plot($("#monitor"), [hotend1, hotend2, heatbed], options);
+  tempLoop = setInterval(function() {
+      setTemp(laststatus.machine.temperature.actual.t0, laststatus.machine.temperature.actual.t1, laststatus.machine.temperature.actual.b)
+  }, 1000);
+
+  $('#T0CurTemp').click(function(){
+    // alert();
+    $('#T0CurTemp').hide();
+    $('#T0SetTemp').show();
+    $('#T0SetTempInput').focus();
+    $('#T0SetTempInput').val(laststatus.machine.temperature.setpoint.t0.toFixed(1))
+  });
+
+  $('#T0Set').click(function(){
+    // alert();
+    $('#T0SetTemp').hide();
+    $('#T0CurTemp').show();
+    sendGcode("T0");
+    sendGcode("M104 S" + $('#T0SetTempInput').val());
+  });
+
+  $('#T1CurTemp').click(function(){
+    // alert();
+    $('#T1CurTemp').hide();
+    $('#T1SetTemp').show();
+    $('#T1SetTempInput').focus();
+    $('#T1SetTempInput').val(laststatus.machine.temperature.setpoint.t1.toFixed(1))
+  });
+
+  $('#T1Set').click(function(){
+    // alert();
+    $('#T1SetTemp').hide();
+    $('#T1CurTemp').show();
+    sendGcode("T1");
+    sendGcode("M104 S" + $('#T1SetTempInput').val());
+  });
+
+  $('#B0CurTemp').click(function(){
+    // alert();
+    $('#B0CurTemp').hide();
+    $('#B0SetTemp').show();
+    $('#B0SetTempInput').focus();
+    $('#B0SetTempInput').val(laststatus.machine.temperature.setpoint.b.toFixed(1))
+  });
+
+  $('#B0Set').click(function(){
+    // alert();
+    $('#B0SetTemp').hide();
+    $('#B0CurTemp').show();
+    sendGcode("M140 S" + $('#B0SetTempInput').val());
+  });
+
+});
+
+
+  var options = {
+    series: {
+      lines: { show: true, fill: false },
+      bars: { show: false },
+      points: { show: false }
+    },
+    yaxis: {
+      min: 0,
+      max: 280,
+      tickSize: 40,
+      color: '#aaa',
+      tickFormatter: function(val, axis) { return val < axis.max ? val.toFixed(0)+'&deg;C' : "&deg;C";}
+    },
+    xaxis: {
+      tickSize: 5,
+      tickFormatter: function(val, axis) { return ""}
+      //tickLength: 0.1
+      // mode: "time"
+    },
+    grid: {
+        // backgroundColor:
+        // {
+        //     colors: ["#ccc", "#fff"]
+        // },
+
+    },
+    colors: [ "#ff0000", "#00ff00", "#00a2ff" ]
+
+
+  };
+
+
+function setTemp(t0, t1, b) {
+
+  var he1 = [];
+  var he2 = [];
+  var hb = [];
+
+
+  hotend1 = hotend1.slice(-100)
+  hotend1.push(t0);
+  for (var i = 0; i < hotend1.length; ++i) {
+    he1.push([i, hotend1[i]])
+  }
+
+  hotend2 = hotend2.slice(-100)
+  hotend2.push(t1);
+  for (var i = 0; i < hotend2.length; ++i) {
+    he2.push([i, hotend2[i]])
+  }
+
+  heatbed = heatbed.slice(-100)
+  heatbed.push(b)
+  for (var i = 0; i < heatbed.length; ++i) {
+    hb.push([i, heatbed[i]])
+  }
+
+  $.plot($("#monitor"), [he1, he2, hb], options);
+}

app/js/trinamic.js

@@ -0,0 +1,58 @@
+$(document).ready(function() {
+  $('#xMotorSet').on('contextmenu', function(e) {
+  console.log("context")
+  var templatex = `
+    <table style="margin: 0.4rem;">
+      <tr>
+        <td>
+          <div class="input-group input-group-sm mb-3">
+            <div class="input-group-prepend">
+             <span class="input-group-text" id="basic-addon1" style="color: #fff;">Current</span>
+            </div>
+            <input type="number" class="form-control" id="xMotorCurrent" value="`+parseInt(laststatus.machine.drivers.x.currentSetting)+`">
+            <div class="input-group-append">
+             <span class="input-group-text" id="basic-addon1" style="color: #fff;">mA</span>
+            </div>
+          </div>
+        </td>
+      </tr>
+      <!-- tr>
+        <td>
+          <div class="input-group input-group-sm mb-3">
+            <span class="input-group-addon">MicroStep</span>
+            <input type="text" class="form-control" value="`+laststatus.machine.drivers.x.microstep+`">
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div class="input-group input-group-sm mb-3">
+            <span class="input-group-addon">StallGuard</span>
+            <input readonly type="number" class="form-control" value="`+parseInt(laststatus.machine.drivers.x.stallGuard)+`">
+          </div>
+        </td>
+      </tr -->
+      <tr>
+        <td colspan="2">
+          <div class="btn-group btn-group-xs btn-group-justified btn-group-sm mr-2" role="group" aria-label="First group">
+            <button data-toggle="tooltip" data-placement="bottom" title="Apply settings" class="btn btn-xs btn-success" onclick="setXCurrent()">Apply</button>
+            <button data-toggle="tooltip" data-placement="bottom" title="Cancel" class="btn btn-xs btn-danger" onclick="$('#editorContextMenu').hide()">Cancel</button>
+          </div>
+        </td>
+      </tr>
+    </table>
+
+    `
+    $("#dropdowncontent").html(templatex)
+    setposition(e);
+    e.preventDefault();
+  });
+});
+
+function setXCurrent() {
+  var current = $('#xMotorCurrent').val()
+  sendGcode('M906 X'+current);
+  // sendGcode('M500')
+  sendGcode('M911.1 PX')
+  $('#editorContextMenu').hide()
+}

app/js/viewer.js

@@ -0,0 +1,566 @@
+// Global Vars
+var scene, camera, renderer, controls, stock, cone;
+var helper, axes, axesgrp, light, bullseye, light, light2, grid;
+var raycaster = new THREE.Raycaster(), projector, mouseVector;
+var laserxmax, laserymax, lineincrement = 50
+var objectsInScene = []; //array that holds all objects we added to the scene.
+var animpause = false; // if flag = true, animate does nothing
+
+var timefactor = 1;
+var simstopped = true;
+
+var workspace = new THREE.Group();
+workspace.name = "cncpro Workspace"
+
+function init3D() {
+    scene = new THREE.Scene();
+    sceneWidth = document.getElementById("renderArea").offsetWidth,
+    sceneHeight = document.getElementById("renderArea").offsetHeight;
+    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
+    camera.zoom = 1.5;
+    camera.updateProjectionMatrix();
+    camera.castShadow = true
+    camera.position.x = 10;
+    camera.position.y = -100;
+    camera.position.z = 300;
+
+    var canvas = !!window.CanvasRenderingContext2D;
+    var webgl = (function() {
+        try {
+            return !!window.WebGLRenderingContext && !!document.createElement('canvas').getContext('experimental-webgl');
+        } catch (e) {
+            return false;
+        }
+    })();
+
+    if (webgl) {
+        // printLog('<h5><i class="fa fa-search fa-fw" aria-hidden="true"></i>WebGL Support found!</h5><b>success:</b><br> Laserweb will work optimally on this device!<hr><p>', successcolor);
+        renderer = new THREE.WebGLRenderer({
+            autoClearColor: true,
+            antialias: true,
+            preserveDrawingBuffer: true
+        });
+
+    } else if (canvas) {
+        // printLog('<h5><i class="fa fa-search fa-fw" aria-hidden="true"></i>No WebGL Support found!</h5><b>CRITICAL ERROR:</b><br> Laserweb may not work optimally on this device! <br>Try another device with WebGL support</p><br><u>Try the following:</u><br><ul><li>In the Chrome address bar, type: <b>chrome://flags</b> [Enter]</li><li>Enable the <b>Override software Rendering</b></li><li>Restart Chrome and try again</li></ul>Sorry! :(<hr><p>', errorcolor);
+        renderer = new THREE.CanvasRenderer();
+    };
+
+    $('#renderArea').append(renderer.domElement);
+    renderer.setClearColor(0xffffff, 1); // Background color of viewer = transparent
+    // renderer.setSize(window.innerWidth - 10, window.innerHeight - 10);
+    renderer.clear();
+    renderer.shadowMap.enabled = true;
+    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+    renderer.gammaInput = true;
+    renderer.gammaOutput = true;
+    sceneWidth = document.getElementById("renderArea").offsetWidth,
+    sceneHeight = document.getElementById("renderArea").offsetHeight;
+    renderer.setSize(sceneWidth, sceneHeight)
+    camera.aspect = sceneWidth / sceneHeight;
+    camera.updateProjectionMatrix();
+
+    controls = new THREE.OrbitControls(camera, renderer.domElement);
+
+    controls.enableRotate = true;
+    controls.enableZoom = true; // optional
+    controls.enableKeys = false; // Disable Keyboard on canvas
+
+    light = new THREE.DirectionalLight(0xcccccc, 0.5);
+    light.name = "Light behind Camera"
+    light.position.set(1, 0, 1).normalize();
+    light.castShadow = true;
+    light.target.x = -laserxmax;
+    light.target.y = -laserymax;
+    light.target.z = 0;
+    workspace.add(light);
+
+    light2 = new THREE.DirectionalLight(0xffffff);
+    light2.name = "Light off to right front shining at center"
+    light2.position.set(1, 0, 1).normalize();
+    light2.castShadow = true;
+    light2.target.x = -laserxmax;
+    light2.target.y = -laserymax;
+    light2.target.z = 0;
+    workspace.add(light2);
+
+    if (!laserxmax) {
+        laserxmax = 200;
+    };
+
+    if (!laserymax) {
+        laserymax = 200;
+    };
+
+    cone = new THREE.Mesh(new THREE.CylinderGeometry(0, 5, 40, 15, 1, false), new THREE.MeshPhongMaterial( {
+        color: 0x007bff,
+        specular: 0x0000ff,
+        shininess: 100,
+        opacity: 0.9,
+        transparent: true
+    } ) );
+    cone.overdraw = true;
+    cone.rotation.x = -90 * Math.PI / 180;
+    cone.position.z = 20;
+    //cylinder.position.z = 40;
+    cone.castShadow = true;
+
+    workspace.add(cone);
+
+    grid = drawGrid(370, 230)
+    workspace.add(grid);
+
+    // Picking stuff
+    scene.add(workspace)
+    animate();
+}
+
+// var stats0 = new Stats();
+// stats0.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
+// stats0.dom.style.cssText = "position: absolute; bottom:5px; left: 5px; cursor:pointer;opacity:0.9;z-index:10000"
+// $('#renderCard').append(stats0.dom);
+
+
+
+function animate() {
+  // stats0.begin();
+    if (animpause) {
+      // do nothing for now...
+    } else {
+      light.position.copy( camera.position );
+      setTimeout( function() { // limit FPS according to MrDoob https://stackoverflow.com/questions/11285065/limiting-framerate-in-three-js-to-increase-performance-requestanimationframe
+        requestAnimationFrame( animate );
+      }, (40) );
+      renderer.render(scene, camera);
+      sceneWidth = document.getElementById("renderArea").offsetWidth,
+      sceneHeight = document.getElementById("renderArea").offsetHeight;
+      camera.aspect = sceneWidth / sceneHeight;
+      if (cone.position) {
+        var conepos = toScreenPosition(cone, camera)
+        $("#conetext").css('left', conepos.x + "px").css('top', conepos.y + "px");
+      }
+    }
+    // stats0.end();
+}
+
+function drawGrid(x, y) {
+  var grid = new THREE.Object3D()
+
+  // VERTICALS
+  // VERTICALS top right
+  for (i=0; i<=x; i+=10) {
+      var geometryx10 = new THREE.Geometry();
+      geometryx10.vertices.push(
+        new THREE.Vector3( i, 0, 0 ),
+        new THREE.Vector3( i, y, 0 ),
+      );
+      grid.add( new THREE.Line( geometryx10, new THREE.LineBasicMaterial({ color: 0xeeeeee }) ));
+  }
+
+  for (i=0; i<=x; i+=100) {
+      var geometryx10 = new THREE.Geometry();
+      geometryx10.vertices.push(
+        new THREE.Vector3( i, 0, 0 ),
+        new THREE.Vector3( i, y, 0 ),
+      );
+      grid.add( new THREE.Line( geometryx10, new THREE.LineBasicMaterial({ color: 0xcccccc }) ));
+  }
+
+  // VERTICALS top left
+  for (i=0; i>=-x; i-=10) {
+      var geometryx10 = new THREE.Geometry();
+      geometryx10.vertices.push(
+        new THREE.Vector3( i, 0, 0 ),
+        new THREE.Vector3( i, y, 0 ),
+      );
+      grid.add( new THREE.Line( geometryx10, new THREE.LineBasicMaterial({ color: 0xeeeeee }) ));
+  }
+
+  for (i=0; i>=-x; i-=100) {
+      var geometryx10 = new THREE.Geometry();
+      geometryx10.vertices.push(
+        new THREE.Vector3( i, 0, 0 ),
+        new THREE.Vector3( i, y, 0 ),
+      );
+      grid.add( new THREE.Line( geometryx10, new THREE.LineBasicMaterial({ color: 0xcccccc }) ));
+  }
+
+  // VERTICALS bottom left
+  for (i=0; i>=-x; i-=10) {
+      var geometryx10 = new THREE.Geometry();
+      geometryx10.vertices.push(
+        new THREE.Vector3( i, 0, 0 ),
+        new THREE.Vector3( i, -y, 0 ),
+      );
+      grid.add( new THREE.Line( geometryx10, new THREE.LineBasicMaterial({ color: 0xeeeeee }) ));
+  }
+
+  for (i=0; i>=-x; i-=100) {
+      var geometryx10 = new THREE.Geometry();
+      geometryx10.vertices.push(
+        new THREE.Vector3( i, 0, 0 ),
+        new THREE.Vector3( i, -y, 0 ),
+      );
+      grid.add( new THREE.Line( geometryx10, new THREE.LineBasicMaterial({ color: 0xcccccc }) ));
+  }
+
+  // VERTICALS bottom right
+  for (i=0; i<=x; i+=10) {
+      var geometryx10 = new THREE.Geometry();
+      geometryx10.vertices.push(
+        new THREE.Vector3( i, 0, 0 ),
+        new THREE.Vector3( i, -y, 0 ),
+      );
+      grid.add( new THREE.Line( geometryx10, new THREE.LineBasicMaterial({ color: 0xeeeeee }) ));
+  }
+
+  for (i=0; i<=x; i+=100) {
+      var geometryx10 = new THREE.Geometry();
+      geometryx10.vertices.push(
+        new THREE.Vector3( i, 0, 0 ),
+        new THREE.Vector3( i, -y, 0 ),
+      );
+      grid.add( new THREE.Line( geometryx10, new THREE.LineBasicMaterial({ color: 0xcccccc }) ));
+  }
+
+  // HORISONTALS
+  // HORISONTALS top right
+  for (i=0; i<=y; i+=10) {
+      var geometryx10 = new THREE.Geometry();
+      geometryx10.vertices.push(
+        new THREE.Vector3( 0, i, 0 ),
+        new THREE.Vector3( x, i, 0 ),
+      );
+      grid.add( new THREE.Line( geometryx10, new THREE.LineBasicMaterial({ color: 0xeeeeee }) ));
+  }
+
+  for (i=0; i<=y; i+=100) {
+      var geometryx10 = new THREE.Geometry();
+      geometryx10.vertices.push(
+        new THREE.Vector3( 0, i, 0 ),
+        new THREE.Vector3( x, i, 0 ),
+      );
+      grid.add( new THREE.Line( geometryx10, new THREE.LineBasicMaterial({ color: 0xcccccc }) ));
+  }
+
+  // HORISONTALS bottom right
+  for (i=0; i>=-y; i-=10) {
+      var geometryx10 = new THREE.Geometry();
+      geometryx10.vertices.push(
+        new THREE.Vector3( 0, i, 0 ),
+        new THREE.Vector3( x, i, 0 ),
+      );
+      grid.add( new THREE.Line( geometryx10, new THREE.LineBasicMaterial({ color: 0xeeeeee }) ));
+  }
+
+  for (i=0; i>=-y; i-=100) {
+      var geometryx10 = new THREE.Geometry();
+      geometryx10.vertices.push(
+        new THREE.Vector3( 0, i, 0 ),
+        new THREE.Vector3( x, i, 0 ),
+      );
+      grid.add( new THREE.Line( geometryx10, new THREE.LineBasicMaterial({ color: 0xcccccc }) ));
+  }
+
+  // HORISONTALS bottom left
+  for (i=0; i>=-y; i-=10) {
+      var geometryx10 = new THREE.Geometry();
+      geometryx10.vertices.push(
+        new THREE.Vector3( 0, i, 0 ),
+        new THREE.Vector3( -x, i, 0 ),
+      );
+      grid.add( new THREE.Line( geometryx10, new THREE.LineBasicMaterial({ color: 0xeeeeee }) ));
+  }
+
+  for (i=0; i>=-y; i-=100) {
+      var geometryx10 = new THREE.Geometry();
+      geometryx10.vertices.push(
+        new THREE.Vector3( 0, i, 0 ),
+        new THREE.Vector3( -x, i, 0 ),
+      );
+      grid.add( new THREE.Line( geometryx10, new THREE.LineBasicMaterial({ color: 0xcccccc }) ));
+  }
+
+  // HORISONTALS top left
+  for (i=0; i<=y; i+=10) {
+      var geometryx10 = new THREE.Geometry();
+      geometryx10.vertices.push(
+        new THREE.Vector3( 0, i, 0 ),
+        new THREE.Vector3( -x, i, 0 ),
+      );
+      grid.add( new THREE.Line( geometryx10, new THREE.LineBasicMaterial({ color: 0xeeeeee }) ));
+  }
+
+  for (i=0; i<=y; i+=100) {
+      var geometryx10 = new THREE.Geometry();
+      geometryx10.vertices.push(
+        new THREE.Vector3( 0, i, 0 ),
+        new THREE.Vector3( -x, i, 0 ),
+      );
+      grid.add( new THREE.Line( geometryx10, new THREE.LineBasicMaterial({ color: 0xcccccc }) ));
+  }
+
+  // AXES LINES
+  // green #5cb85c
+  // red   #d9534f
+  // blue  #0275d8
+  var geometryx = new THREE.Geometry();
+  geometryx.vertices.push(
+    new THREE.Vector3( x, 0, 0 ),
+    new THREE.Vector3( -x, 0, 0 ),
+  );
+  grid.add( new THREE.Line( geometryx, new THREE.LineBasicMaterial({ color: 0xd9534f }) ));
+
+  var geometryy = new THREE.Geometry();
+  geometryy.vertices.push(
+    new THREE.Vector3( 0, -y, 0 ),
+    new THREE.Vector3( 0, y, 0 ),
+  );
+  grid.add( new THREE.Line( geometryy, new THREE.LineBasicMaterial({ color: 0x5cb85c }) ));
+
+  var geometryx = new THREE.Geometry();
+  geometryx.vertices.push(
+    new THREE.Vector3( 0, 0, 0 ),
+    new THREE.Vector3( 0, 0, 100 ),
+  );
+  grid.add( new THREE.Line( geometryx, new THREE.LineBasicMaterial({ color: 0x0275d8 }) ));
+
+  // TEXT LABELS
+  // add axes labels
+  var xlbl = this.makeSprite(this.scene, "webgl", {
+          x: x+10,
+          y: 0,
+          z: 0,
+          text: "X+",
+          color: "#d9534f",
+          size: 10
+  });
+  var ylbl = this.makeSprite(this.scene, "webgl", {
+          x: 0,
+          y: y+10,
+          z: 0,
+          text: "Y+",
+          color: "#5cb85c",
+          size: 10
+  });
+  var xlblmin = this.makeSprite(this.scene, "webgl", {
+          x: -x-10,
+          y: 0,
+          z: 0,
+          text: "X-",
+          color: "#d9534f",
+          size: 10
+  });
+  var ylblmin = this.makeSprite(this.scene, "webgl", {
+          x: 0,
+          y: -y-10,
+          z: 0,
+          text: "Y-",
+          color: "#5cb85c",
+          size: 10
+  });
+      var zlbl = this.makeSprite(this.scene, "webgl", {
+          x: 0,
+          y: 0,
+          z: 125,
+          text: "Z+",
+          color: "#0275d8",
+          size: 10
+  });
+
+
+  grid.add(xlbl);
+  grid.add(ylbl);
+  grid.add(xlblmin);
+  grid.add(ylblmin);
+  grid.add(zlbl);
+
+  grid.name = "grid"
+  return (grid)
+}
+
+function viewObject(){
+  camera.position = object.userData.center2
+  controls.target = object.userData.center2
+  controls.update()
+}
+
+
+function clearViewer() {
+  var selectedObject = scene.getObjectByName('gcodeobject');
+  scene.remove( selectedObject );
+  // simstop();
+  animate();
+}
+
+function simstop() {
+  simstopped = true;
+  $('#simstartbtn').show();
+  $('#simstopbtn').hide();
+  timefactor = 1;
+  $('#simspeedval').text(timefactor);
+  $('#gcodesent').html('0');
+  editor.gotoLine(0)
+  cone.material = new THREE.MeshPhongMaterial( {
+    color: 0x007bff,
+    specular: 0x0000ff,
+    shininess: 100,
+    opacity: 0.9,
+    transparent: true
+  } )
+  $("#conetext").hide();
+}
+
+function simSpeed() {
+  timefactor = timefactor * 10;
+  if (timefactor > 1024) timefactor = 1;
+  $('#simspeedval').text(timefactor);
+}
+
+function sim(startindex) {
+    $("#conetext").show();
+    cone.material = new THREE.MeshPhongMaterial( {
+        color: 0x28a745,
+        specular: 0x0000ff,
+        shininess: 100,
+        opacity: 0.9,
+        transparent: true
+    } )
+    if (typeof(object) == 'undefined') {
+      console.log('No Gcode in Preview yet')
+      simstop()
+    } else {
+      simstopped = false;
+      // timefactor = 1;
+      $('#simspeedval').text(timefactor);
+      var simIdx = startindex;
+      $('#simstartbtn').hide();
+      $('#simstopbtn').show();
+      $('#editorContextMenu').hide() // sometimes we launch sim(linenum) from the context menu... close it once running
+      var runSim = function() {
+          editor.gotoLine(simIdx + 1)
+          $('#gcodesent').html(simIdx + 1);
+          $('#simgcode').html(object.userData.lines[simIdx].args.origtext);
+          var posx = object.userData.lines[simIdx].p2.x;
+          var posy = object.userData.lines[simIdx].p2.y;
+          var posz = object.userData.lines[simIdx].p2.z + 20;
+          var simTime = object.userData.lines[simIdx].p2.timeMins / timefactor;
+          // if (simTime < 0.1) { simTime = 0.1};
+          TweenMax.to(cone.position, simTime, {
+            x: posx,
+            y: posy,
+            z: posz,
+            onComplete: function() {
+                if (simstopped == true) {
+                    //return
+                    simstop();
+                } else {
+                    simIdx++;
+                    if (simIdx < object.userData.lines.length) {
+                      runSim();
+                    } else {
+                      simstop();
+                    }
+                }
+
+            }
+          })
+      };
+      runSim(); //kick it off
+    }
+
+}
+
+function toScreenPosition(obj, camera)
+{
+    var vector = new THREE.Vector3();
+
+    var widthHalf = 0.5*renderer.context.canvas.width;
+    var heightHalf = 0.5*renderer.context.canvas.height;
+
+    obj.updateMatrixWorld();
+    vector.setFromMatrixPosition(obj.matrixWorld);
+    vector.project(camera);
+
+    vector.x = ( vector.x * widthHalf ) + widthHalf;
+    vector.y = - ( vector.y * heightHalf ) + heightHalf;
+
+    return {
+        x: vector.x,
+        y: vector.y
+    };
+
+};
+
+// GENERATE GCODE PREVIEW
+function doPreview() {
+  var template = `<i class="fa fa-fw fa-spinner fa-spin"></i>please wait`
+  $('#previewbtntext').html(template)
+  setTimeout(function(){ openGCodeFromText(); }, 100);
+
+}
+
+function makeSprite(scene, rendererType, vals) {
+    var canvas = document.createElement('canvas'),
+        context = canvas.getContext('2d'),
+        metrics = null,
+        textHeight = 100,
+        textWidth = 0,
+        actualFontSize = 6;
+    var txt = vals.text;
+    if (vals.size) actualFontSize = vals.size;
+
+    context.font = "normal " + textHeight + "px Arial";
+    metrics = context.measureText(txt);
+    var textWidth = metrics.width;
+
+    canvas.width = textWidth;
+    canvas.height = textHeight;
+    context.font = "normal " + textHeight + "px Arial";
+    context.textAlign = "center";
+    context.textBaseline = "middle";
+    //context.fillStyle = "#ff0000";
+    context.fillStyle = vals.color;
+
+    context.fillText(txt, textWidth / 2, textHeight / 2);
+
+    var texture = new THREE.Texture(canvas);
+    texture.needsUpdate = true;
+    texture.minFilter = THREE.LinearFilter;
+
+    var material = new THREE.SpriteMaterial({
+        map: texture,
+    });
+    material.transparent = true;
+    //var textObject = new THREE.Sprite(material);
+    var textObject = new THREE.Object3D();
+    textObject.position.x = vals.x;
+    textObject.position.y = vals.y;
+    textObject.position.z = vals.z;
+    var sprite = new THREE.Sprite(material);
+    textObject.textHeight = actualFontSize;
+    textObject.textWidth = (textWidth / textHeight) * textObject.textHeight;
+    if (rendererType == "2d") {
+        sprite.scale.set(textObject.textWidth / textWidth, textObject.textHeight / textHeight, 1);
+    } else {
+        sprite.scale.set(textWidth / textHeight * actualFontSize, actualFontSize, 1);
+    }
+
+    textObject.add(sprite);
+
+    //scene.add(textObject);
+    return textObject;
+}
+
+$(window).on('resize', function () {
+    sceneWidth = document.getElementById("renderArea").offsetWidth,
+    sceneHeight = document.getElementById("renderArea").offsetHeight;
+    //console.log("got resize event. resetting aspect ratio.");
+    renderer.setSize(sceneWidth, sceneHeight);
+    camera.aspect = sceneWidth / sceneHeight;
+    camera.updateProjectionMatrix();
+    // controls.screen.width = window.innerWidth;
+    // controls.screen.height = window.innerHeight;
+    // that.wakeAnimate();
+    //render();
+});

app/js/websocket.js

@@ -0,0 +1,442 @@
+var socket, laststatus;;
+var server = ''; //192.168.14.100';
+var programBoard = {};
+var grblParams = {}
+var smoothieParams = {}
+var sduploading;
+var nostatusyet = true;
+function initSocket() {
+
+
+    // $('body').on('keydown', function (ev) {
+    //   if (ev.keyCode === 17) {
+    //       //CTRL key down > set override stepping to 10
+    //       ovStep = 10;
+    //   }
+    // });
+    //
+    // $('body').on('keyup', function (ev) {
+    //   if (ev.keyCode === 17) {
+    //       //CTRL key released-> reset override stepping to 1
+    //       ovStep = 1;
+    //   }
+    // });
+
+    socket = io.connect(server); // socket.io init
+    printLog("Connected to backend ")
+    setTimeout(function(){ populatePortsMenu(); }, 2000);
+
+    socket.on('data', function (data) {
+      printLog(data)
+      if (data.indexOf("Done saving file.") != -1) {
+        $('#sdupload_modal').modal('hide');
+        $("#sduploadform").show()
+        $("#sduploadprogress").hide()
+        $("#sduploadbtn").prop('disabled', false);
+        $("#sduploadcancelbtn").prop('disabled', false);
+        $("#sdmodalclosebtn").prop('disabled', false);
+        $('#sdprogressup').css('width', '0%').attr('aria-valuenow', 0);
+      }
+      if (data.indexOf("End file list") != -1) {
+        // We just got an M20 sd listing back... lets update UI
+        setTimeout(function(){ sdListPopulate(); }, 600);
+      }
+
+    });
+
+    socket.on("queueCount", function (data) {
+      // if(laststatus.comms.connectionStatus > 2) {
+        // editor.gotoLine(parseInt(data[1]) - parseInt(data[0]) )
+        $('#gcodesent').html(parseInt(data[0]) );
+      // }
+      sduploading = data[2];
+      if (sduploading) {
+        var percent = 100 - (parseInt(data[0]) / parseInt(data[1]) * 100)
+         $('#sdprogressup').css('width', percent+'%').attr('aria-valuenow', percent);
+      }
+    })
+
+    socket.on('status', function (status) {
+        nostatusyet = false;
+        // if (!_.isEqual(status, laststatus)) {
+          if (laststatus !== undefined) {
+            if(!_.isEqual(status.comms.interfaces.ports, laststatus.comms.interfaces.ports)) {
+              var string = "Detected a change in available ports: ";
+              for (i=0; i< status.comms.interfaces.ports.length; i++) {
+                string += "[" + status.comms.interfaces.ports[i].comName + "]"
+              }
+              printLog(string)
+              laststatus.comms.interfaces.ports = status.comms.interfaces.ports;
+              populatePortsMenu();
+            }
+          }
+          // console.log(status);
+          if (status.comms.connectionStatus == 0) { // Not Connected Yet
+            // $("#portUSB").val(status.comms.interfaces.activePort);
+            $('#connectStatus').html("Not Connected");
+            $("#disconnectBtn").hide();
+            $("#connectBtn").show();
+            $("#playbtn").prop('disabled', true);
+            $("#pausebtn").prop('disabled', true);
+            $("#stopbtn").prop('disabled', true);
+            $("#clralarmbtn").prop('disabled', true);
+            $("#sdtogglemodal").prop('disabled', true);
+            $("#command").prop('disabled', true);
+            $("#sendCommand").prop('disabled', true);
+            $("#portUSB").prop('disabled', false);
+            $("#portUSB").addClass("border-success");
+            $("#portUSB").removeClass("border-danger");
+            $("#portUSB-addon").addClass("border-success");
+            $("#portUSB-addon").removeClass("border-danger");
+          } else if (status.comms.connectionStatus == 1 || status.comms.connectionStatus == 2 ) { // Connected, but not Playing yet
+            $("#portUSB").val(status.comms.interfaces.activePort);
+            $('#connectStatus').html("Connected");
+            $("#connectBtn").hide();
+            $("#disconnectBtn").show();
+            $("#playbtn").prop('disabled', false);
+            $("#pausebtn").prop('disabled', true);
+            $("#stopbtn").prop('disabled', true);
+            $("#clralarmbtn").prop('disabled', true);
+            $("#sdtogglemodal").prop('disabled', false);
+            $("#command").prop('disabled', false);
+            $("#sendCommand").prop('disabled', false);
+            $("#portUSB").prop('disabled', true);
+            $("#portUSB").addClass("border-danger");
+            $("#portUSB").removeClass("border-success");
+            $("#portUSB-addon").addClass("border-danger");
+            $("#portUSB-addon").removeClass("border-success");
+          } else if (status.comms.connectionStatus == 3 ) { // Busy Streaming GCODE
+            $("#portUSB").val(status.comms.interfaces.activePort);
+            $('#connectStatus').html("Connected");
+            $("#connectBtn").hide();
+            $("#disconnectBtn").show();
+            $("#playbtn").prop('disabled', true);
+            $("#pausebtn").prop('disabled', false);
+            $("#stopbtn").prop('disabled', false);
+            $("#clralarmbtn").prop('disabled', true);
+            $("#sdtogglemodal").prop('disabled', true);
+            $("#command").prop('disabled', true);
+            $("#sendCommand").prop('disabled', true);
+            $("#portUSB").prop('disabled', true);
+            $("#portUSB").addClass("border-danger");
+            $("#portUSB").removeClass("border-success");
+            $("#portUSB-addon").addClass("border-danger");
+            $("#portUSB-addon").removeClass("border-success");
+          } else if (status.comms.connectionStatus == 4 ) { // Paused
+            $("#portUSB").val(status.comms.interfaces.activePort);
+            $('#connectStatus').html("Connected");
+            $("#connectBtn").hide();
+            $("#disconnectBtn").show();
+            $("#playbtn").prop('disabled', false);
+            $("#pausebtn").prop('disabled', false);
+            $("#stopbtn").prop('disabled', false);
+            $("#clralarmbtn").prop('disabled', true);
+            $("#sdtogglemodal").prop('disabled', true);
+            $("#command").prop('disabled', false);
+            $("#sendCommand").prop('disabled', false);
+            $("#portUSB").prop('disabled', true);
+            $("#portUSB").addClass("border-danger");
+            $("#portUSB").removeClass("border-success");
+            $("#portUSB-addon").addClass("border-danger");
+            $("#portUSB-addon").removeClass("border-success");
+          } else if (status.comms.connectionStatus == 5 ) { // Alarm State
+            $("#portUSB").val(status.comms.interfaces.activePort);
+            $('#connectStatus').html("Connected");
+            $("#connectBtn").hide();
+            $("#disconnectBtn").show();
+            $("#playbtn").prop('disabled', true);
+            $("#pausebtn").prop('disabled', true);
+            $("#stopbtn").prop('disabled', true);
+            $("#clralarmbtn").prop('disabled', false);
+            $("#sdtogglemodal").prop('disabled', true);
+            $("#command").prop('disabled', false);
+            $("#sendCommand").prop('disabled', false);
+            $("#portUSB").prop('disabled', true);
+            $("#portUSB").addClass("border-danger");
+            $("#portUSB").removeClass("border-success");
+            $("#portUSB-addon").addClass("border-danger");
+            $("#portUSB-addon").removeClass("border-success");
+          }
+
+          $('#runStatus').html(status.comms.runStatus);
+
+          $('#xPos').html(status.machine.position.work.x);
+          $('#yPos').html(status.machine.position.work.y);
+          $('#zPos').html(status.machine.position.work.z);
+
+          $('#ModernXPos').html(parseFloat(status.machine.position.work.x).toFixed(3));
+          $('#ModernYPos').html(parseFloat(status.machine.position.work.y).toFixed(3));
+          $('#ModernZPos').html(parseFloat(status.machine.position.work.z).toFixed(3));
+          $('#ModernAPos').html(parseFloat(status.machine.position.work.a).toFixed(3));
+          $('#oF').html(status.machine.overrides.feedOverride);
+          $('#oS').html(status.machine.overrides.spindleOverride);
+          $('#T0CurTemp').html(status.machine.temperature.actual.t0.toFixed(1) + " / " + status.machine.temperature.setpoint.t0.toFixed(1));
+          $('#T1CurTemp').html(status.machine.temperature.actual.t1.toFixed(1) + " / " + status.machine.temperature.setpoint.t1.toFixed(1));
+          $('#B0CurTemp').html(status.machine.temperature.actual.b.toFixed(1) + " / " + status.machine.temperature.setpoint.b.toFixed(1));
+
+          if (safeToUpdateSliders) {
+            $("#FROslider").slider('option','value',status.machine.overrides.feedOverride);
+            $("#handle").text( status.machine.overrides.feedOverride + "%" );
+
+            $("#SROslider").slider('option','value',status.machine.overrides.spindleOverride);
+            $("#handle2").text( status.machine.overrides.spindleOverride + "%" );
+          }
+
+          // setTemp(status.machine.temperature.actual.t0, status.machine.temperature.actual.t1, status.machine.temperature.actual.b)
+
+          if (simstopped) {
+            cone.position.x = status.machine.position.work.x;
+            cone.position.y = status.machine.position.work.y;
+            cone.position.z = (parseFloat(status.machine.position.work.z) + 20);
+          }
+
+          // console.log(status.machine.drivers.x.stallGuard)
+          var amplitude = (status.machine.drivers.x.stallGuard.stallGuardReading) / 10.24;
+          $("#xMotorVU").attr("style","-webkit-clip-path: inset(0 "+ (amplitude) + "% 0 0);")
+
+          var amplitude = (status.machine.drivers.y.stallGuard.stallGuardReading) / 10.24;
+          $("#yMotorVU").attr("style","-webkit-clip-path: inset(0 "+ (amplitude) + "% 0 0);")
+
+          var amplitude = (status.machine.drivers.z.stallGuard.stallGuardReading) / 10.24;
+          $("#zMotorVU").attr("style","-webkit-clip-path: inset(0 "+ (amplitude) + "% 0 0);")
+
+          var amplitude = (status.machine.drivers.a.stallGuard.stallGuardReading) / 10.24;
+          $("#aMotorVU").attr("style","-webkit-clip-path: inset(0 "+ (amplitude) + "% 0 0);")
+
+          laststatus = status;
+        // }
+
+    });
+
+    $('#sendCommand').on('click', function () {
+        var commandValue = $('#command').val();
+        sendGcode(commandValue);
+        $('#command').val('');
+    });
+
+    $('#command').on('keypress', function (e) {
+      if(e.which === 13){
+         $(this).attr("disabled", "disabled");
+         var commandValue = $('#command').val();
+         sendGcode(commandValue);
+         $('#command').val('');
+         $(this).removeAttr("disabled");
+      }
+    });
+
+    $("#sdtogglemodal").on("click", function() {
+        $('#sdupload_modal').modal('show');
+        if (sduploading) {
+          $("#sduploadform").hide()
+          $("#sduploadprogress").show()
+        } else {
+          $("#sduploadform").show()
+          $("#sduploadprogress").hide()
+        }
+    })
+
+    $("#sdlist").on("click", function() {
+        sendGcode("M20");
+    })
+
+    var bellstate = false;
+    var bellflash = setInterval(function() {
+      if (!nostatusyet) {
+        if (laststatus.comms.connectionStatus == 5 ) {
+          if (!bellstate) {
+            // $('#navbell').addClass("text-dark");
+            // $('#navbell').removeClass("text-danger");
+            $('#navbell').hide();
+            bellstate = true
+          } else {
+            // $('#navbell').removeClass("text-dark");
+            // $('#navbell').addClass("text-danger");
+            $('#navbell').show();
+            bellstate = false
+          }
+        } else {
+          $('#navbell').hide();
+        }
+      }
+    }, 200);
+
+};
+
+function selectPort() {
+      socket.emit('connectTo', 'usb,' + $( "#portUSB" ).val() + ',' + '115200');
+};
+
+function closePort() {
+  socket.emit('closePort', 1);
+  populatePortsMenu();
+  $('.mdata').val('');
+}
+
+function populatePortsMenu() {
+  $('#portUSB').empty();
+   for (i=0; i<laststatus.comms.interfaces.ports.length; i++) {
+      var port = friendlyPort(i)
+        $('#portUSB').append($("<option />").val(laststatus.comms.interfaces.ports[i].comName).text(laststatus.comms.interfaces.ports[i].comName+ " "+ port.note ));
+   };
+}
+
+function sendGcode(gcode) {
+    if (gcode) {
+        socket.emit('runCommand', gcode);
+    }
+}
+
+function ContextLineRun() { //Rightclick Contextmenu in Ace editor: Send single line of gcode
+  sendGcode(editor.session.getLine(editor.getSelectionRange().start.row));
+  $('#editorContextMenu').hide();
+}
+
+function sdListPopulate() {
+  $('#sdfilelist').empty();
+  if (laststatus.machine.sdcard.list.length > 0) {
+    for (i = laststatus.machine.sdcard.list.length-1;  i >= 0; i--) {
+      var name = laststatus.machine.sdcard.list[i]
+      console.log(name);
+      if (name.length > 25) {
+        var newname = ""
+        newname += name.substring(0,10)
+        newname += "..."
+        newname += name.substring(name.length - 10)
+        name = newname;
+      }
+
+      if (name.indexOf("config") != -1 || name.indexOf("CONFIG") != -1) {
+        $("#sdfilelist").append(`<tr><td><i class="fa fa-fw fa-file-o" aria-hidden="true"></i> `+name+`</td><td></td></tr>`);
+      } else if (name.indexOf("FIRMWARE.CUR") != -1 || name.indexOf("firmware.cur") != -1) {
+        $("#sdfilelist").append(`<tr><td><i class="fa fa-fw fa-file-o" aria-hidden="true"></i> `+name+`</td><td></td></tr>`);
+      } else {
+        $("#sdfilelist").append(`<tr>
+          <td>
+            <i class="fa fa-fw fa-file-o" aria-hidden="true"></i> `+name+`
+          </td>
+          <td>
+            <div class="btn-group btn-group-xs" role="group">
+              <button type="button" class="btn btn-xs btn-outline-secondary" onclick="sendGcode('rm /sd/`+laststatus.machine.sdcard.list[i].replace(/(\r\n|\n|\r)/gm,"")+`'); sendGcode('M20'); ">Delete</button>
+              <button type="button" class="btn btn-xs btn-outline-secondary" onclick="sendGcode('M32 `+laststatus.machine.sdcard.list[i].replace(/(\r\n|\n|\r)/gm,"")+`'); sendGcode('M20'); ">Print</button>
+            </div>
+          </td>
+        </tr>`);
+      }
+    }
+    $("#sdlist_modal").modal("show")
+  }
+
+}
+
+function feedOverride(step) {
+  socket.emit('feedOverride', step);
+}
+
+function spindleOverride(step) {
+  socket.emit('spindleOverride', step);
+}
+
+function sdUpload() {
+  $("#sduploadbtn").prop('disabled', true);
+  $("#sduploadcancelbtn").prop('disabled', true);
+  $("#sdmodalclosebtn").prop('disabled', true);
+  $("#sduploadform").hide()
+  $("#sduploadprogress").show()
+  var filename = $("#sdfilename").val();
+  var gcode=editor.getValue()
+  var data = []
+  data.push(filename)
+  data.push(gcode)
+  socket.emit("saveToSd", data)
+}
+
+function runJob() {
+  var gcode=editor.getValue()
+  socket.emit("runJob", gcode)
+}
+
+function stopJob() {
+  socket.emit("stop", 1)
+  // socket.emit("clearAlarm", 2)
+}
+
+function pauseJob() {
+  if (laststatus.comms.connectionStatus == 3) {
+    socket.emit("pause", 1)
+  } else if (laststatus.comms.connectionStatus == 4) {
+    socket.emit("resume", 1)
+  }
+}
+
+function clearAlarm() {
+  socket.emit("clearAlarm", 2)
+}
+
+function friendlyPort(i) {
+    // var likely = false;
+    var img = 'usb.png';
+    var note = '';
+    var manufacturer = laststatus.comms.interfaces.ports[i].manufacturer
+    if (manufacturer == `(Standard port types)`) {
+      img = 'serial.png'
+      note = 'Motherboard Serial Port';
+    } else if ( laststatus.comms.interfaces.ports[i].productId && laststatus.comms.interfaces.ports[i].vendorId ) {
+        if (laststatus.comms.interfaces.ports[i].productId == '6015' && laststatus.comms.interfaces.ports[i].vendorId == '1D50') {
+          // found Smoothieboard
+          img = 'smoothieboard.png';
+          note = 'Smoothieware USB Port';
+        }
+        if (laststatus.comms.interfaces.ports[i].productId == '6001' && laststatus.comms.interfaces.ports[i].vendorId == '0403') {
+          // found FTDI FT232
+          img = 'usb.png';
+          note = 'FTDI USB to Serial';
+        }
+        if (laststatus.comms.interfaces.ports[i].productId == '6015' && laststatus.comms.interfaces.ports[i].vendorId == '0403') {
+          // found FTDI FT230x
+          img = 'usb.png';
+          note = 'FTDI USD to Serial';
+        }
+        if (laststatus.comms.interfaces.ports[i].productId == '606D' && laststatus.comms.interfaces.ports[i].vendorId == '1D50') {
+          // found TinyG G2
+          img = 'usb.png';
+          note = 'Tiny G2';
+        }
+        if (laststatus.comms.interfaces.ports[i].productId == '003D' && laststatus.comms.interfaces.ports[i].vendorId == '2341') {
+          // found Arduino Due Prog Port
+          img = 'due.png';
+          note = 'Arduino Due Prog';
+        }
+        if (laststatus.comms.interfaces.ports[i].productId == '0043' && laststatus.comms.interfaces.ports[i].vendorId == '2341' || laststatus.comms.interfaces.ports[i].productId == '0001' && laststatus.comms.interfaces.ports[i].vendorId == '2341' || laststatus.comms.interfaces.ports[i].productId == '0043' && laststatus.comms.interfaces.ports[i].vendorId == '2A03') {
+          // found Arduino Uno
+          img = 'uno.png';
+          note = 'Arduino Uno';
+        }
+        if (laststatus.comms.interfaces.ports[i].productId == '2341' && laststatus.comms.interfaces.ports[i].vendorId == '0042') {
+          // found Arduino Mega
+          img = 'mega.png';
+          note = 'Arduino Mega';
+        }
+        if (laststatus.comms.interfaces.ports[i].productId == '7523' && laststatus.comms.interfaces.ports[i].vendorId == '1A86') {
+          // found CH340
+          img = 'uno.png';
+          note = 'CH340 Arduino Fake';
+        }
+        if (laststatus.comms.interfaces.ports[i].productId == 'EA60' && laststatus.comms.interfaces.ports[i].vendorId == '10C4') {
+          // found CP2102
+          img = 'nodemcu.png';
+          note = 'NodeMCU';
+        }
+        if (laststatus.comms.interfaces.ports[i].productId == '2303' && laststatus.comms.interfaces.ports[i].vendorId == '067B') {
+          // found CP2102
+          // img = 'nodemcu.png';
+          note = 'Prolific USB to Serial';
+        }
+    } else {
+      img = "usb.png";
+    }
+
+    return {
+      img: img,
+      note: note
+    };
+}

app/lib/ace/ChangeLog.txt

@@ -0,0 +1,383 @@
+2017.07.02 Version 1.2.8
+* Fixed small bugs in searchbox and autocompleter
+
+2017.06.18 Version 1.2.7
+
+* Added Support for arrow keys on external IPad keyboard (Emanuele Tamponi)
+* added match counter to searchbox extension
+
+- implemented higlighting of multiline strings in yaml mode (Maxim Trushin)
+- improved haml syntax highlighter (Andrés Álvarez)
+
+2016.12.03 Version 1.2.6
+
+* Fixed IME handling on new Chrome
+* Support for php 7 in the syntax checker
+
+2016.08.16 Version 1.2.5
+
+* Fixed regression in noconflict mode
+
+2016.07.27 Version 1.2.4
+
+* Maintenance release with several new modes and small bugfixes
+
+2016.01.17 Version 1.2.3
+
+* Bugfixes
+  - fix memory leak in setSession (Tyler Stalder)
+  - double click not working on linux/mac
+  
+* new language modes
+  - reStructuredText (Robin Jarry)
+  - NSIS (Jan T. Sott)
+
+
+2015.10.28 Version 1.2.1
+
+* new language modes
+  - Swift
+  - JSX
+
+2015.07.11 Version 1.2.0
+
+* New Features
+  - Indented soft wrap (danyaPostfactum)
+  - Rounded borders on selections
+
+* API Changes
+  - unified delta types `{start, end, action, lines}`  (Alden Daniels https://github.com/ajaxorg/ace/pull/1745)
+  - "change" event listeners on session and editor get delta objects directly
+
+* new language modes
+  - SQLServer (Morgan Yarbrough)
+  
+2015.04.03 Version 1.1.9
+
+  - Small Enhancements and Bugfixes
+
+2014.11.08 Version 1.1.8
+
+* API Changes
+  - `editor.commands.commandKeyBinding` now contains direct map from keys to commands instead of grouping them by hashid
+  
+* New Features
+  - Improved autoindent for html and php modes (Adam Jimenez)
+  - Find All from searchbox (Colton Voege)
+  
+* new language modes
+  - Elixir, Elm
+ 
+2014.09.21 Version 1.1.7
+
+* Bugfixes
+  - fix several bugs in autocompletion
+  - workaround for inaccurate getBoundingClientRect on chrome 37
+
+2014.08.17 Version 1.1.6
+
+* Bugfixes
+  - fix regression in double tap to highlight 
+  - Improved Latex Mode (Daniel Felder)
+  
+* API Changes
+  - editor.destroy destroys editor.session too (call editor.setSession(null) to prevent that)
+
+* new language modes
+ - Praat (José Joaquín Atria)
+ - Eiffel (Victorien Elvinger)
+ - G-code (Adam Joseph Cook)
+ 
+2014.07.09 Version 1.1.5
+
+* Bugfixes
+  - fix regression in autocomplete popup
+
+* new language modes
+ - gitignore (Devon Carew)
+ 
+2014.07.01 Version 1.1.4
+
+* New Features
+  - Highlight matching tags (Adam Jimenez)
+  - Improved jump to matching command (Adam Jimenez)
+
+* new language modes
+ - AppleScript (Yaogang Lian)
+ - Vala
+
+2014.03.08 Version 1.1.3
+
+* New Features
+  - Allow syntax checkers to be loaded from CDN (Derk-Jan Hartman)
+  - Add ColdFusion behavior (Abram Adams)
+  - add showLineNumbers option
+  - Add html syntax checker (danyaPostfactum)
+ 
+* new language modes
+  - Gherkin (Patrick Nevels)
+  - Smarty
+
+2013.12.02 Version 1.1.2
+
+* New Features
+  - Accessibility Theme for Ace (Peter Xiao)
+  - use snipetManager for expanding emmet snippets
+  - update jshint to 2.1.4
+  - improve php syntax checker (jdalegonzalez)
+  - add option for autoresizing
+  - add option for autohiding vertical scrollbar
+  - improvements to highlighting of xml like languages (danyaPostfactum)
+  - add support for autocompletion and snippets (gjtorikyan danyaPostfactum and others)
+  - add option to merge similar changes in undo history
+  - add scrollPastEnd option
+  - use html5 dragndrop for text dragging (danyaPostfactum)
+  
+* API Changes
+  - fixed typo in HashHandler commmandManager
+
+* new language modes
+  - Nix (Zef Hemel)
+  - Protobuf (Zef Hemel)
+  - Soy
+  - Handlebars
+
+2013.06.04 Version 1.1.1
+
+  - Improved emacs keybindings (Robert Krahn)
+  - Added markClean, isClean methods to UndoManager (Joonsoo Jeon)
+  - Do not allow `Toggle comments` command to remove spaces from indentation
+  - Softer colors for indent guides in dark themes
+
+* new language modes
+  - Ada
+  - Assembly_x86
+  - Cobol
+  - D
+  - ejs
+  - MATLAB
+  - MySQL
+  - Twig
+  - Verilog
+
+2013.05.01, Version 1.1.0
+
+* API Changes
+  - Default position of the editor container is changed to relative. Add `.ace_editor {position: absolute}` css rule to restore old behavior
+  - Changed default line-height to `normal` to not conflict with bootstrap. Use `line-height: inherit` for old behavior.
+  - Changed marker types accepted by session.addMarker. It now accepts "text"|"line"|"fullLine"|"screenLine"
+  - Internal classnames used by editor were made more consistent
+  - Introduced `editor.setOption/getOption/setOptions/getOptions` methods
+  - Introduced positionToIndex, indexToPosition methods
+
+* New Features
+  - Improved emacs mode (chetstone)
+    with Incremental search and Occur modes (Robert Krahn)
+
+  - Improved ime handling
+  - Searchbox (Vlad Zinculescu)
+
+  - Added elastic tabstops lite extension (Garen Torikian)
+  - Added extension for whitespace manipulation
+  - Added extension for enabling spellchecking from contextmenu
+  - Added extension for displaying available keyboard shortcuts (Matthew Christopher Kastor-Inare III)
+  - Added extension for displaying options panel (Matthew Christopher Kastor-Inare III)
+  - Added modelist extension (Matthew Christopher Kastor-Inare III)
+
+  - Improved toggleCommentLines and added ToggleCommentBlock command
+  - `:;` pairing in CSS mode (danyaPostfactum)
+
+  - Added suppoert for Delete and SelectAll from context menu (danyaPostfactum)
+
+  - Make wrapping behavior optional
+  - Selective bracket insertion/skipping 
+    
+  - Added commands for increase/decrease numbers, sort lines (Vlad Zinculescu)    
+  - Folding for Markdown, Lua, LaTeX    
+  - Selective bracket insertion/skipping for C-like languages
+
+* Many new languages
+  - Scheme (Mu Lei)
+  - Dot (edwardsp)
+  - FreeMarker (nguillaumin)
+  - Tiny Mushcode (h3rb)
+  - Velocity (Ryan Griffith)
+  - TOML (Garen Torikian) 
+  - LSL (Nemurimasu Neiro, Builders Brewery)
+  - Curly (Libo Cannici)
+  - vbScript (Jan Jongboom) 
+  - R (RStudio) 
+  - ABAP
+  - Lucene (Graham Scott)
+  - Haml (Garen Torikian)
+  - Objective-C (Garen Torikian) 
+  - Makefile (Garen Torikian) 
+  - TypeScript (Garen Torikian) 
+  - Lisp (Garen Torikian) 
+  - Stylus (Garen Torikian) 
+  - Dart (Garen Torikian)
+
+* Live syntax checks
+  - PHP (danyaPostfactum)
+  - Lua
+
+* New Themes
+  - Chaos 
+  - Terminal 
+   
+2012.09.17, Version 1.0.0
+
+* New Features
+  - Multiple cursors and selections (https://c9.io/site/blog/2012/08/be-an-armenian-warrior-with-block-selection-on-steroids/)
+  - Fold buttons displayed in the gutter
+  - Indent Guides
+  - Completely reworked vim mode (Sergi Mansilla)
+  - Improved emacs keybindings
+  - Autoclosing of html tags (danyaPostfactum)
+
+* 20 New language modes
+  - Coldfusion (Russ)
+  - Diff
+  - GLSL (Ed Mackey)
+  - Go (Davide Saurino)
+  - Haxe (Jason O'Neil)
+  - Jade (Garen Torikian)
+  - jsx (Syu Kato)
+  - LaTeX (James Allen)
+  - Less (John Roepke)
+  - Liquid (Bernie Telles)
+  - Lua (Lee Gao)
+  - LuaPage (Choonster)
+  - Markdown (Chris Spencer)
+  - PostgreSQL (John DeSoi)
+  - Powershell (John Kane)
+  - Sh (Richo Healey)
+  - SQL (Jonathan Camile)
+  - Tcl (Cristoph Hochreiner)
+  - XQuery (William Candillion)
+  - Yaml (Meg Sharkey)
+
+  * Live syntax checks
+  - for XQuery and JSON
+
+* New Themes
+  - Ambiance (Irakli Gozalishvili)
+  - Dreamweaver (Adam Jimenez)
+  - Github (bootstraponline)
+  - Tommorrow themes (https://github.com/chriskempson/tomorrow-theme)
+  - XCode
+
+* Many Small Enhancements and Bugfixes
+ 
+2011.08.02, Version 0.2.0
+
+* Split view (Julian Viereck)
+  - split editor area horizontally or vertivally to show two files at the same
+    time
+
+* Code Folding (Julian Viereck)
+  - Unstructured code folding
+  - Will be the basis for language aware folding
+
+* Mode behaviours (Chris Spencer)
+  - Adds mode specific hooks which allow transformations of entered text
+  - Autoclosing of braces, paranthesis and quotation marks in C style modes
+  - Autoclosing of angular brackets in XML style modes
+
+* New language modes
+  - Clojure (Carin Meier)
+  - C# (Rob Conery)
+  - Groovy (Ben Tilford)
+  - Scala (Ben Tilford)
+  - JSON
+  - OCaml (Sergi Mansilla)
+  - Perl (Panagiotis Astithas)
+  - SCSS/SASS (Andreas Madsen)
+  - SVG
+  - Textile (Kelley van Evert)
+  - SCAD (Jacob Hansson)
+  
+* Live syntax checks
+  - Lint for CSS using CSS Lint <http://csslint.net/>
+  - CoffeeScript
+
+* New Themes
+  - Crimson Editor (iebuggy)
+  - Merbivore (Michael Schwartz)
+  - Merbivore soft (Michael Schwartz)
+  - Solarized dark/light <http://ethanschoonover.com/solarized> (David Alan Hjelle)
+  - Vibrant Ink (Michael Schwartz)
+
+* Small Features/Enhancements
+  - Lots of render performance optimizations (Harutyun Amirjanyan)
+  - Improved Ruby highlighting (Chris Wanstrath, Trent Ogren)
+  - Improved PHP highlighting (Thomas Hruska)
+  - Improved CSS highlighting (Sean Kellogg)
+  - Clicks which cause the editor to be focused don't reset the selection
+  - Make padding text layer specific so that print margin and active line
+    highlight are not affected (Irakli Gozalishvili)
+  - Added setFontSize method
+  - Improved vi keybindings (Trent Ogren)
+  - When unfocused make cursor transparent instead of removing it (Harutyun Amirjanyan)
+  - Support for matching groups in tokenizer with arrays of tokens (Chris Spencer)
+
+* Bug fixes
+  - Add support for the new OSX scroll bars
+  - Properly highlight JavaScript regexp literals
+  - Proper handling of unicode characters in JavaScript identifiers
+  - Fix remove lines command on last line (Harutyun Amirjanyan)
+  - Fix scroll wheel sluggishness in Safari
+  - Make keyboard infrastructure route keys like []^$ the right way (Julian Viereck)
+
+2011.02.14, Version 0.1.6
+
+* Floating Anchors
+  - An Anchor is a floating pointer in the document. 
+  - Whenever text is inserted or deleted before the cursor, the position of
+    the cursor is updated
+  - Usesd for the cursor and selection
+  - Basis for bookmarks, multiple cursors and snippets in the future
+* Extensive support for Cocoa style keybindings on the Mac <https://github.com/ajaxorg/ace/issues/closed#issue/116/comment/767803>
+* New commands:
+  - center selection in viewport
+  - remove to end/start of line
+  - split line
+  - transpose letters
+* Refator markers  
+  - Custom code can be used to render markers
+  - Markers can be in front or behind the text
+  - Markers are now stored in the session (was in the renderer)
+* Lots of IE8 fixes including copy, cut and selections
+* Unit tests can also be run in the browser
+  <https://github.com/ajaxorg/ace/blob/master/lib/ace/test/tests.html>
+* Soft wrap can adapt to the width of the editor (Mike Ratcliffe, Joe Cheng)
+* Add minimal node server server.js to run the Ace demo in Chrome
+* The top level editor.html demo has been renamed to index.html
+* Bug fixes
+  - Fixed gotoLine to consider wrapped lines when calculating where to scroll to (James Allen)
+  - Fixed isues when the editor was scrolled in the web page (Eric Allam)
+  - Highlighting of Python string literals
+  - Syntax rule for PHP comments
+
+2011.02.08, Version 0.1.5
+
+* Add Coffeescript Mode (Satoshi Murakami)
+* Fix word wrap bug (Julian Viereck)
+* Fix packaged version of the Eclipse mode
+* Loading of workers is more robust
+* Fix "click selection"
+* Allow tokizing empty lines (Daniel Krech)
+* Make PageUp/Down behavior more consistent with native OS (Joe Cheng)
+
+2011.02.04, Version 0.1.4
+
+* Add C/C++ mode contributed by Gastón Kleiman
+* Fix exception in key input
+
+2011.02.04, Version 0.1.3
+
+* Let the packaged version play nice with requireJS
+* Add Ruby mode contributed by Shlomo Zalman Heigh
+* Add Java mode contributed by Tom Tasche
+* Fix annotation bug
+* Changing a document added a new empty line at the end

app/lib/ace/LICENSE

@@ -0,0 +1,24 @@
+Copyright (c) 2010, Ajax.org B.V.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above copyright
+      notice, this list of conditions and the following disclaimer in the
+      documentation and/or other materials provided with the distribution.
+    * Neither the name of Ajax.org B.V. nor the
+      names of its contributors may be used to endorse or promote products
+      derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL AJAX.ORG B.V. BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

app/lib/ace/README.md

@@ -0,0 +1,22 @@
+Ace (Ajax.org Cloud9 Editor)
+============================
+[![CDNJS](https://img.shields.io/cdnjs/v/ace.svg)](https://cdnjs.com/libraries/ace)
+
+Ace is a code editor written in JavaScript.
+
+This repository has only generated files.
+If you want to work on ace please go to https://github.com/ajaxorg/ace instead.
+
+
+here you can find pre-built files for convenience of embedding.
+it contains 4 versions
+ * [src](https://github.com/ajaxorg/ace-builds/tree/master/src)              concatenated but not minified
+ * [src-min](https://github.com/ajaxorg/ace-builds/tree/master/src-min)      concatenated and minified with uglify.js
+ * [src-noconflict](https://github.com/ajaxorg/ace-builds/tree/master/src-noconflict)      uses ace.require instead of require
+ * [src-min-noconflict](https://github.com/ajaxorg/ace-builds/tree/master/src-min-noconflict)      concatenated, minified with uglify.js, and uses ace.require instead of require
+
+
+For a simple way of embedding ace into webpage see [editor.html](https://github.com/ajaxorg/ace-builds/blob/master/editor.html) or list of other [simple examples](https://github.com/ajaxorg/ace-builds/tree/master/demo)
+To see ace in action go to [kitchen-sink-demo](http://ajaxorg.github.com/ace-builds/kitchen-sink.html), [scrollable-page-demo](http://ajaxorg.github.com/ace-builds/demo/scrollable-page.html) or [minimal demo](http://ajaxorg.github.com/ace-builds/editor.html),
+
+

app/lib/ace/bower.json

@@ -0,0 +1,21 @@
+{
+    "name": "ace-builds",
+    "version": "1.2.6",
+    "description": "Ace (Ajax.org Cloud9 Editor)",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "ignore": [
+        "demo"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/ajaxorg/ace-builds.git"
+    },
+    "author": "",
+    "license": "BSD",
+    "bugs": {
+        "url": "https://github.com/ajaxorg/ace-builds/issues"
+    },
+    "homepage": "https://github.com/ajaxorg/ace-builds"
+}

app/lib/ace/demo/autocompletion.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>ACE Autocompletion demo</title>
+  <style type="text/css" media="screen">
+    body {
+        overflow: hidden;
+    }
+    
+    #editor { 
+        margin: 0;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+  </style>
+</head>
+<body>
+
+<pre id="editor"></pre>
+
+<!-- load ace -->
+<script src="../src-noconflict/ace.js"></script>
+<!-- load ace language tools -->
+<script src="../src-noconflict/ext-language_tools.js"></script>
+<script>
+    // trigger extension
+    ace.require("ace/ext/language_tools");
+    var editor = ace.edit("editor");
+    editor.session.setMode("ace/mode/html");
+    editor.setTheme("ace/theme/tomorrow");
+    // enable autocompletion and snippets
+    editor.setOptions({
+        enableBasicAutocompletion: true,
+        enableSnippets: true,
+        enableLiveAutocompletion: false
+    });
+</script>
+
+<script src="./show_own_source.js"></script>
+</body>
+</html>

app/lib/ace/demo/autoresize.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>Editor</title>
+  <style type="text/css" media="screen">
+
+	.ace_editor {
+		border: 1px solid lightgray;
+		margin: auto;
+		height: 200px;
+		width: 80%;
+	}
+	.scrollmargin {
+		height: 80px;
+        text-align: center;
+	}
+    </style>
+</head>
+<body>
+<pre id="editor1">autoresizing editor</pre>
+<div class="scrollmargin"></div>
+<pre id="editor2">minHeight = 2 lines</pre>
+<div class="scrollmargin"></div>
+<pre id="editor3" style="width: 40%;"></pre>
+<div class="scrollmargin"></div>
+<pre id="editor"></pre>
+
+<!-- load ace -->
+<script src="../src/ace.js"></script>
+<script>
+
+    var editor1 = ace.edit("editor1");
+    editor1.setTheme("ace/theme/tomorrow_night_eighties");
+    editor1.session.setMode("ace/mode/html");
+    editor1.setAutoScrollEditorIntoView(true);
+    editor1.setOption("maxLines", 30);
+
+    var editor2 = ace.edit("editor2");
+    editor2.setTheme("ace/theme/tomorrow_night_blue");
+    editor2.session.setMode("ace/mode/html");
+    editor2.setAutoScrollEditorIntoView(true);
+    editor2.setOption("maxLines", 30);
+    editor2.setOption("minLines", 2);
+
+    var editor = ace.edit("editor3");
+    editor.setOptions({
+        autoScrollEditorIntoView: true,
+        maxLines: 8
+    });
+    editor.renderer.setScrollMargin(10, 10, 10, 10);
+    
+    var editor = ace.edit("editor");
+    editor.setTheme("ace/theme/tomorrow");
+    editor.session.setMode("ace/mode/html");
+    editor.setAutoScrollEditorIntoView(true);
+    editor.setOption("maxLines", 100);
+</script>
+
+<script src="./show_own_source.js"></script>
+
+</body>
+</html>

app/lib/ace/demo/bookmarklet/index.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <link href="style.css" rel="stylesheet" type="text/css">
+  <title>Ace Bookmarklet Builder</title>
+</head>
+<body>
+
+<div id="wrapper">
+
+<div class="content" style="width: 950px">
+    <div class="column1" style="margin-top: 47px">
+        <textarea id="textarea" style="width:300px; height:300px">
+/**
+ * This is Ace injected using a bookmarklet.
+ */
+function foo() {
+    var bar = true;
+}</textarea><br>
+        SourceUrl: <br>
+        <input id="srcURL" style="width:300px" value="http://ajaxorg.github.com/ace-builds/src-noconflict"></input><br>
+        <button id="buBuild">Build Link</button> <br> <a href="#"></a>
+        <a href="https://github.com/ajaxorg/ace/">
+            <div class="fork_on_github" ></div>
+        </a>
+    </div>
+    <div class="column2">
+        <h1>Ace Bookmarklet Builder</h1>
+
+        <p id="first">
+        <strong>WARNING:</strong> Currently, this is only supported in non IE browsers.
+        </p>
+
+        <h2>How to use it:</h2>
+        <ul>
+            <li>Select the options as you want them to be by default.</li>
+            <li>Enter the "SourceUrl". This has to be the URL pointing to build/textarea/src/ (you can leave the default to server the scripts from GitHub).</li>
+            <li>Click the "Build Link" button to generate your custom Ace Bookmarklet.</li>
+            <li>Drag the generated link to your toolbar or store it somewhere else.</li>
+            <li>Go to a page with a textarea element and click the bookmarklet - wait a little bit till the files are loaded.</li>
+            <li>Click three times on the textarea you want to replace - Ace will replace it.</li>
+            <li>To change settings, just click the red icon in the bottom right corner.</li>
+        </ul>
+    </div>
+</div>
+</div>
+
+<script>
+
+function inject(options, callback) {
+    var baseUrl = options.baseUrl || "../../src-noconflict";
+    
+    var load = function(path, callback) {
+        var head = document.getElementsByTagName('head')[0];
+        var s = document.createElement('script');
+
+        s.src = baseUrl + "/" + path;
+        head.appendChild(s);
+
+        s.onload = s.onreadystatechange = function(_, isAbort) {
+            if (isAbort || !s.readyState || s.readyState == "loaded" || s.readyState == "complete") {
+                s = s.onload = s.onreadystatechange = null;
+                if (!isAbort)
+                    callback();
+            }
+        };
+    };
+
+    load("ace.js", function() {
+        ace.config.loadModule("ace/ext/textarea", function() {
+            var event = ace.require("ace/lib/event");
+            var areas = document.getElementsByTagName("textarea");
+            for (var i = 0; i < areas.length; i++) {
+                event.addListener(areas[i], "click", function(e) {
+                    if (e.detail == 3) {
+                        ace.transformTextarea(e.target, options.ace);
+                    }
+                });
+            }
+            callback && callback();
+        });
+    });
+}
+
+// Call the inject function to load the ace files.
+var textAce;
+inject({}, function () {
+    // Transform the textarea on the page into an ace editor.    
+    var t = document.querySelector("textarea");
+    textAce = ace.require("ace/ext/textarea").transformTextarea(t);
+    setTimeout(function(){textAce.setDisplaySettings(true)});
+});
+
+
+document.getElementById("buBuild").onclick = function() {
+    var injectSrc = inject.toString().split("\n").join("");
+    injectSrc = injectSrc.replace(/\s+/g, " ");
+
+    var options = textAce.getOptions();
+    options.baseUrl = document.getElementById("srcURL").value;
+
+    var a = document.querySelector("a");
+    a.href = "javascript:(" + injectSrc + ")(" + JSON.stringify(options) + ")";
+    a.innerHTML = "Ace Bookmarklet Link";
+}
+
+</script>
+
+</body>
+</html>

app/lib/ace/demo/bookmarklet/style.css

@@ -0,0 +1,228 @@
+body {
+    margin:0;
+    padding:0;
+    background-color:#e6f5fc;
+    
+}
+
+H2, H3, H4 {
+    font-family:Trebuchet MS;
+    font-weight:bold;
+    margin:0;
+    padding:0;
+}
+
+H2 {
+    font-size:28px;
+    color:#263842;
+    padding-bottom:6px;
+}
+
+H3 {
+    font-family:Trebuchet MS;
+    font-weight:bold;
+    font-size:22px;
+    color:#253741;
+    margin-top:43px;
+    margin-bottom:8px;
+}
+
+H4 {
+    font-family:Trebuchet MS;
+    font-weight:bold;
+    font-size:21px;
+    color:#222222;
+    margin-bottom:4px;
+}
+
+P {
+    padding:13px 0;
+    margin:0;
+    line-height:22px;
+}
+
+UL{
+    line-height : 22px;
+}
+
+PRE{
+    background : #333;
+    color : white;
+    padding : 10px;
+}
+
+#header {
+    height : 227px;
+    position:relative;
+    overflow:hidden;
+    background: url(images/background.png) repeat-x 0 0;
+    border-bottom:1px solid #c9e8fa;   
+}
+
+#header .content .signature {
+    font-family:Trebuchet MS;
+    font-size:11px;
+    color:#ebe4d6;
+    position:absolute;
+    bottom:5px;
+    right:42px;
+    letter-spacing : 1px;
+}
+
+.content {
+    width:970px;
+    position:relative;
+    margin:0 auto;
+}
+
+#header .content {
+    height:184px;
+    margin-top:22px;
+}
+
+#header .content .logo {
+    width  : 282px;
+    height : 184px;
+    background:url(images/logo.png) no-repeat 0 0;
+    position:absolute;
+    top:0;
+    left:0;
+}
+
+#header .content .title {
+    width  : 605px;
+    height : 58px;
+    background:url(images/ace.png) no-repeat 0 0;
+    position:absolute;
+    top:98px;
+    left:329px;
+}
+
+#wrapper {
+    background:url(images/body_background.png) repeat-x 0 0;
+    min-height:250px;
+}
+
+#wrapper .content {
+    font-family:Arial;
+    font-size:14px;
+    color:#222222;
+    width:1000px;
+}
+
+#wrapper .content .column1 {
+    position:relative;
+    float:left;
+    width:315px;
+    margin-right:31px;
+}
+
+#wrapper .content .column2 {
+    position:relative;
+    overflow:hidden;
+    float:left;
+    width:600px;
+    padding-top:47px;
+}
+
+.fork_on_github {
+    width:310px;
+    height:80px;
+    background:url(images/fork_on_github.png) no-repeat 0 0;
+    position:relative;
+    overflow:hidden;
+    margin-top:49px;
+    cursor:pointer;
+}
+
+.fork_on_github:hover {
+    background-position:0 -80px;
+}
+
+.divider {
+    height:3px;
+    background-color:#bedaea;
+    margin-bottom:3px;
+}
+
+.menu {
+    padding:23px 0 0 24px;
+}
+
+UL.content-list {
+    padding:15px;
+    margin:0;
+}
+
+UL.menu-list {
+    padding:0;
+    margin:0 0 20px 0;
+    list-style-type:none;
+    line-height : 16px;
+}
+
+UL.menu-list LI {
+    color:#2557b4;
+    font-family:Trebuchet MS;
+    font-size:14px;
+    padding:7px 0;
+    border-bottom:1px dotted #d6e2e7;
+}
+
+UL.menu-list LI:last-child {
+    border-bottom:0;
+}
+
+A {
+    color:#2557b4;
+    text-decoration:none;
+}
+
+A:hover {
+    text-decoration:underline;
+}
+
+P#first{
+    background : rgba(255,255,255,0.5);
+    padding : 20px;
+    font-size : 16px;
+    line-height : 24px;
+    margin : 0 0 20px 0;
+}
+
+#footer {
+    height:40px;
+    position:relative;
+    overflow:hidden;
+    background:url(images/bottombar.png) repeat-x 0 0;
+    position:relative;
+    margin-top:40px;
+}
+
+UL.menu-footer {
+    padding:0;
+    margin:8px 11px 0 0;
+    list-style-type:none;
+    float:right;
+}
+
+UL.menu-footer LI {
+    color:white;
+    font-family:Arial;
+    font-size:12px;
+    display:inline-block;
+    margin:0 1px;
+}
+
+UL.menu-footer LI A {
+    color:#8dd0ff;
+    text-decoration:none;
+}
+
+UL.menu-footer LI A:hover {
+    text-decoration:underline;
+}
+
+
+
+

app/lib/ace/demo/chromevox.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>ACE ChromeVox demo</title>
+  <style type="text/css" media="screen">
+    body {
+        overflow: hidden;
+    }
+
+    #editor {
+        margin: 0;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+  </style>
+</head>
+<body>
+
+<pre id="editor"></pre>
+
+<!-- load ace -->
+<script src="../src/ace.js"></script>
+<!-- load ace accessibility extension -->
+<script src="../src/ext-chromevox.js"></script>
+<script>
+    // trigger extension
+    ace.require("ace/ext/chromevox");
+    var editor = ace.edit("editor");
+    editor.session.setMode("ace/mode/html");
+    editor.setTheme("ace/theme/tomorrow");
+</script>
+
+<script src="./show_own_source.js"></script>
+</body>
+</html>

app/lib/ace/demo/emmet.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>ACE Emmet demo</title>
+  <style type="text/css" media="screen">
+    body {
+        overflow: hidden;
+    }
+    
+    #editor { 
+        margin: 0;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+  </style>
+</head>
+<body>
+
+<pre id="editor"></pre>
+
+<!-- load emmet code and snippets compiled for browser -->
+<script src="https://cloud9ide.github.io/emmet-core/emmet.js"></script>
+
+<!-- load ace -->
+<script src="../src/ace.js"></script>
+<!-- load ace emmet extension -->
+<script src="../src/ext-emmet.js"></script>
+<script>
+    var editor = ace.edit("editor");
+    editor.session.setMode("ace/mode/html");
+    // enable emmet on the current editor
+    editor.setOption("enableEmmet", true);
+</script>
+
+<script src="./show_own_source.js"></script>
+</body>
+</html>

app/lib/ace/demo/ie7.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>ACE Editor StatusBar Demo</title>
+  <style type="text/css" media="screen">
+    /*!important without this top: 0; bottom: 0 doesn't work on old ie */
+    body, html {
+        position: absolute;
+        top: 0px; bottom: 0; left: 0; right: 0;
+        margin:0; padding:0;
+        overflow:hidden
+    }
+    
+    #editor { 
+        margin: 0;
+        position: absolute;
+        top: 0; bottom: 0; left: 0; right: 0;
+    }
+  </style>
+</head>
+<body>
+
+<pre id="editor">
+require("ace/ext/old_ie");
+// now ace will work even on ie7!
+var editor = ace.edit("editor");
+</pre>
+    
+<script src="../src/ace.js"></script>
+<script src="../src/ext-old_ie.js"></script>
+<script>
+    // before creating an editor patch up things for old ie
+    require("ace/ext/old_ie");
+    // now ace will work even on ie7!
+    var editor = ace.edit("editor");
+    editor.setTheme("ace/theme/textmate");
+    editor.session.setMode("ace/mode/javascript");
+</script>
+
+
+</body>
+</html>

app/lib/ace/demo/iframe.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>ACE Editor Inside iframe</title>
+  <style type="text/css" media="screen">
+    body, html { 
+        height: 100%;
+        margin:0; padding:0;
+    }    
+    #editor { 
+        padding: 20px; margin: 20px
+        width: 80%; height: 80%;
+    }
+  </style>
+</head>
+<body>
+  <div style="height: 100%"></div>
+  <div><textarea></textarea></div>
+  <iframe id="editor-iframe" src='data:text/html,
+  <pre id="editor" style="height:100%"></pre>
+  <script src="https://ajaxorg.github.io/ace-builds/src/ace.js"></script>
+  <script>
+      var editor = ace.edit("editor");
+      editor.setTheme("ace/theme/twilight");
+      editor.session.setMode("ace/mode/javascript");
+  </script>
+  '></iframe>
+</body>
+</html>

app/lib/ace/demo/keyboard_shortcuts.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>Editor</title>
+  <style type="text/css" media="screen">
+    body {
+        overflow: hidden;
+    }    
+    #editor { 
+        margin: 0;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+  </style>
+</head>
+<body>
+
+<pre id="editor"></pre>
+    
+<!-- load ace -->
+<script src="../src/ace.js"></script>
+<script>
+    var editor = ace.edit("editor")
+    editor.setTheme("ace/theme/twilight")
+    editor.session.setMode("ace/mode/html")
+    
+    // add command to lazy-load keybinding_menu extension
+    editor.commands.addCommand({
+        name: "showKeyboardShortcuts",
+        bindKey: {win: "Ctrl-Alt-h", mac: "Command-Alt-h"},
+        exec: function(editor) {
+            ace.config.loadModule("ace/ext/keybinding_menu", function(module) {
+                module.init(editor);
+                editor.showKeyboardShortcuts()
+            })
+        }
+    })
+    editor.execCommand("showKeyboardShortcuts")
+</script>
+
+<script src="./show_own_source.js"></script>
+</body>
+</html>