AVS in Javascript

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts
  • Yathosho
    Forum King
    • Jan 2002
    • 3376

    #16
    i played around a bit more with the editor and there are a couple of things i'd like to add. however, i would like you to explain a couple of things first.

    1. is demo.min.js what a preset file would look like or is it a combination of the preset (as json) and some extra stuff?

    2. i tried to add the code from the codemirror theme demo to the editor, but i'm not sure how that editor works. the input fields are being displayed a pre tags, not input or textareas. i think it would be a nice option to be able to change the theme of the syntax highlighter.

    3. what else is codemirror doing than providing the editor with syntax highlighting?
    NSIS IDE for Atom | NSIS for Visual Studio Code | NSIS for Sublime Text | NSIS.docset

    Comment

    • z33m
      Junior Member
      • Jun 2013
      • 22

      #17
      Thanks for the changes you've submitted. The url param idea is cool. An interesting hack would be to encode the entire preset as base64 and accept it as a urlparam. This would allow us to share preset code as well in the url.

      Originally Posted by Yathosho View Post
      i played around a bit more with the editor and there are a couple of things i'd like to add. however, i would like you to explain a couple of things first.

      1. is demo.min.js what a preset file would look like or is it a combination of the preset (as json) and some extra stuff?
      I'll try to explain the basic structuring of the code in the repo.
      1. /js - This contains the main WebVS library. I have designed things around a core visualization library. This is pure JS, just few dependencies. Essentially anyone can plug this library into any application, create a webvs object with proper options and start playing visualizations.
      2. /js/core.js - This file contains all the base stuff including the base webvs object and base classes for all the components.
      3. /js/** - All other files have one effect component or contain utility classes and stuff
      4. /test/** - this contains just some very basic qunit test cases, for the expression parser mainly.
      5. /demo - This contains the demo app that i have hosted at url
      6. /demo/demo.js - This code runs the demo app with the editor and stuff. It uses the webvs library. This code contains a hardcoded preset, which is shown in the editor.


      when you build the code 1.) all the webvs library files are assembled into one js file 2.) most of the other stuff are just copied into build directory, so you can run the demo from there.

      when you build the code with "grunt dist". It generates all the same stuff in dist directory, but with minification. Its this dist directory that i have put on the demo page.

      Originally Posted by Yathosho View Post
      2. i tried to add the code from the codemirror theme demo to the editor, but i'm not sure how that editor works. the input fields are being displayed a pre tags, not input or textareas. i think it would be a nice option to be able to change the theme of the syntax highlighter.

      3. what else is codemirror doing than providing the editor with syntax highlighting?
      Code mirror simply creates an editor inside a container div that we have on the page https://github.com/azeem/webvs/blob/...o/demo.js#L257

      I do not know what could be the scope of the JSON editor based UI. I am working on the an AVS editor like UI, which should be much more simpler to use. The JSON format was meant to be a structure consumable by the WebVS library.

      I would like to push the editor UI out into master and use it as the main app. Please take a look at the code in /editor in the editor branch.

      Comment

      • Yathosho
        Forum King
        • Jan 2002
        • 3376

        #18
        Originally Posted by z33m View Post
        Thanks for the changes you've submitted. The url param idea is cool. An interesting hack would be to encode the entire preset as base64 and accept it as a urlparam. This would allow us to share preset code as well in the url.
        this idea is awesome, though probably not applicable.

        /demo/demo.js - This code runs the demo app with the editor and stuff. It uses the webvs library. This code contains a hardcoded preset, which is shown in the editor.
        once webvs is at a stage that it can load files, will these be contain only the json portion?
        NSIS IDE for Atom | NSIS for Visual Studio Code | NSIS for Sublime Text | NSIS.docset

        Comment

        • Yathosho
          Forum King
          • Jan 2002
          • 3376

          #19
          quick and dirty loader that reads preset files from a directory. i won't be able to refine this before later tonight or tomorrow. it currently only works after the second selection (applying the first) and it currently appends an editor window to the bottom. will get there eventually, but if someone wants to post suggestions in the meantime...

          ps: i previously reported simultaneous tracks playing at times, i guess that can be caused when using multiple editors
          NSIS IDE for Atom | NSIS for Visual Studio Code | NSIS for Sublime Text | NSIS.docset

          Comment

          • Yathosho
            Forum King
            • Jan 2002
            • 3376

            #20
            okay, since i shared that terribly miserable loader prototype, i not only travelled 50km by bike, i also gave webvs a little thought.

            1. webvs as a service
            the loader is the first demo that relies ln the usage of a server-side language, namely the immensely horrible php scripting language. the script populates the dropdown menu for the presets. would i be fluent in cool languages like python, i wouldn't have taken such matters, while rails wasn't applicable as a quick solution. anyway, clear is on thing: webvs can run online and certain stuff will have to be done dynamically on the server side.

            2. webv as an app
            one would want to avoid duplicate work wherever possible. the combination of modern javascript and html5 enables webvs to run on all platforms that provide modern browser technology. since the current version of webvs runs on google chrome only (bizarrly other webkit browsers are not supported), i think it's worth thinking about using nodejs as a platform to deploy webvs on the desktop. this would eliminate the need of a variety of languages and little to no adjustments to let webvs run on the server or locally. that said, i probably should have populated the afforementioned preset dropdown using javascript.

            so far i have enjoyed playing around with the available code, especially to test out what could be done on the frontend. i'm not particularly happy about the use of codemirror, as it seem a bit over the top for a rather simple task. also i'd prefer using real html textareas in the editor. regarding the syntax highlighting, there are several simpler solutions in the form of javascript. also, i'm not too happy about the current state of modules. things should be kept simple and modular, the current demo.js contains both the presets plus some additional code.

            what are your plans for webvs' future regarding the scale of avs-compatibility and how do judge the level of accuracy? what are your plans regarding web platform and desktop deployment?
            NSIS IDE for Atom | NSIS for Visual Studio Code | NSIS for Sublime Text | NSIS.docset

            Comment

            • Yathosho
              Forum King
              • Jan 2002
              • 3376

              #21
              i think i will rebuild the frontend from ground up, replacing the editor library with something simpler, then add support to load (and later save) presets. i will then think about how to run server-side code on the nodejs platform. (did i mentioned how extremely well nodejs performs multithreaded?)

              for the future, i could see some great ways to integrate music playback. besides soundcloud, other audio and video platforms should be integrated, interacting with all the user features (favourites, libary) that platform offers. needless to say, local music playback should be supported as well, again including library capability and favourites from popular players.

              z33m: you started a fire!
              NSIS IDE for Atom | NSIS for Visual Studio Code | NSIS for Sublime Text | NSIS.docset

              Comment

              • Yathosho
                Forum King
                • Jan 2002
                • 3376

                #22
                and one more idea:

                so far the code is mostly clean and modular (apart from demo.js), so i think if somebody doesn't agree with my ideas for the ui (or simply prefers the classic avs editor approach qoal has taken), the ui part should be kept just as simple as the rest of the plugin. users should be able to install and select a various frontend themes. the webvs core should make it easy for such third party addons to use a variety of libraries (in a similar way jsfiddle offers jquery, mootools etc.). syntax highlighting should be optional from the frontend decisions (though a theme could override that), providing a variety of userstyles in a seperate library. most of the javascript highlighting solutions i prefer over the current editor (i.e. enlighter, highlight.js etc.) already support a variety of highlighting themes.
                NSIS IDE for Atom | NSIS for Visual Studio Code | NSIS for Sublime Text | NSIS.docset

                Comment

                • z33m
                  Junior Member
                  • Jun 2013
                  • 22

                  #23
                  Originally Posted by Yathosho View Post
                  okay, since i shared that terribly miserable loader prototype, i not only travelled 50km by bike, i also gave webvs a little thought.

                  1. webvs as a service
                  the loader is the first demo that relies ln the usage of a server-side language, namely the immensely horrible php scripting language. the script populates the dropdown menu for the presets. would i be fluent in cool languages like python, i wouldn't have taken such matters, while rails wasn't applicable as a quick solution. anyway, clear is on thing: webvs can run online and certain stuff will have to be done dynamically on the server side.
                  This is definitely a good direction, this is precisely what i meant by the "webvs gallery + editor site". I was hacking around with a little bit of https://www.firebase.com/ to getaway with having to write serverside code, though having a server side backend does sound more robust.

                  Originally Posted by Yathosho View Post
                  2. webv as an app
                  one would want to avoid duplicate work wherever possible. the combination of modern javascript and html5 enables webvs to run on all platforms that provide modern browser technology. since the current version of webvs runs on google chrome only (bizarrly other webkit browsers are not supported), i think it's worth thinking about using nodejs as a platform to deploy webvs on the desktop. this would eliminate the need of a variety of languages and little to no adjustments to let webvs run on the server or locally. that said, i probably should have populated the afforementioned preset dropdown using javascript.
                  Browser compatibility is a bit rough right now, I'll need to find some time to fix this. I havnt thought about this possibility of running webvs in node. This should be possible theoretically. However state of webgl support in headless browser kits or projects like node-webgl seems limited, need to investigate.

                  Originally Posted by Yathosho View Post
                  so far i have enjoyed playing around with the available code, especially to test out what could be done on the frontend. i'm not particularly happy about the use of codemirror, as it seem a bit over the top for a rather simple task. also i'd prefer using real html textareas in the editor. regarding the syntax highlighting, there are several simpler solutions in the form of javascript. also, i'm not too happy about the current state of modules. things should be kept simple and modular, the current demo.js contains both the presets plus some additional code.
                  demo.js was a small hack that i put together to test/demonstrate the library. I just kept adding some smaller changes to it. Never meant it to be used as a real editor, IMO its rather cumbersome to edit avs expressions inside the JSON since they are quoted as strings.

                  Originally Posted by Yathosho View Post
                  what are your plans for webvs' future regarding the scale of avs-compatibility and how do judge the level of accuracy? what are your plans regarding web platform and desktop deployment?
                  I am trying to build components one by one, eventually i hope we'll get to a point where a good number of presets can be supported. As for accuracy, results look pretty good so far, There are a lots of issues and loose ends, like eg. the color of unconed's silk string preset is somewhat messed up, the movement is very shaky compared to AVS and so on.

                  Originally Posted by Yathosho View Post
                  i think i will rebuild the frontend from ground up, replacing the editor library with something simpler, then add support to load (and later save) presets. i will then think about how to run server-side code on the nodejs platform. (did i mentioned how extremely well nodejs performs multithreaded?)

                  for the future, i could see some great ways to integrate music playback. besides soundcloud, other audio and video platforms should be integrated, interacting with all the user features (favourites, libary) that platform offers. needless to say, local music playback should be supported as well, again including library capability and favourites from popular players.

                  z33m: you started a fire!
                  Originally Posted by Yathosho View Post
                  and one more idea:

                  so far the code is mostly clean and modular (apart from demo.js), so i think if somebody doesn't agree with my ideas for the ui (or simply prefers the classic avs editor approach qoal has taken), the ui part should be kept just as simple as the rest of the plugin. users should be able to install and select a various frontend themes. the webvs core should make it easy for such third party addons to use a variety of libraries (in a similar way jsfiddle offers jquery, mootools etc.). syntax highlighting should be optional from the frontend decisions (though a theme could override that), providing a variety of userstyles in a seperate library. most of the javascript highlighting solutions i prefer over the current editor (i.e. enlighter, highlight.js etc.) already support a variety of highlighting themes.
                  I agree with this, any larger UI/Frontend work is big project in itself with lots of dependencies, it is nicer to keep the webvs core library simple.

                  Comment

                  • z33m
                    Junior Member
                    • Jun 2013
                    • 22

                    #24
                    I have pushed the new working webvs UI on the demo page http://azeemarshad*****webvs/

                    Comment

                    • QOAL
                      [STILL a retard!]
                      • Apr 2002
                      • 2422

                      #25
                      I've attached the editor I worked on as-is.

                      Sadly I got fed up failing to code recursive drag & drop for the tree list, that coupled with depression and not wanting to fix the small css issues outside of firefox (so frustrating that after all these years there are still miss matches between browsers, even with css3 stuff). (I may fix them at some point)

                      I didn't get around to adding the pop-out windows, it would be a little ↗ icon on the right hand side, opposite the element label.

                      Anyway, I'm sure the code is ghastly for others to see, but it doesn't use any external libraries.
                      Attached Files
                      count!last.fmplanner

                      Comment

                      • Yathosho
                        Forum King
                        • Jan 2002
                        • 3376

                        #26
                        @qoal since i noticed you have a github account, could you please put it there? there are some changes i'd like to do for better browser compatibility and i think that would be the best way.
                        NSIS IDE for Atom | NSIS for Visual Studio Code | NSIS for Sublime Text | NSIS.docset

                        Comment

                        • QOAL
                          [STILL a retard!]
                          • Apr 2002
                          • 2422

                          #27
                          count!last.fmplanner

                          Comment

                          • Yathosho
                            Forum King
                            • Jan 2002
                            • 3376

                            #28
                            Originally Posted by z33m View Post
                            That is a brilliant idea, will be really useful, for debugging also.

                            I was checking the AVS cpp code to see how the files are read/written. Here is what i've understood so far, if its of any help to anyone. Will need more help from someone with better understanding of the code.

                            The basic preset reading starts at __LoadPreset method in r_list.cpp. From there it goes on to read a root effectlist, and subsequently all the effects in the preset,

                            The basic structure is something like this:
                            1. AVS Signature string - "Nullsoft AVS Preset 0.2\x1a"
                            2. Root Effectlist Config - Effectlist config contains the following
                              1. mode (1 BYTE + 1 optional INT depending on the value of the first byte) - Not exactly sure how this is used. but i think it determines how some of the effectlist settings are read.
                              2. several INT values containing effect list settings. These i think are optional depending on the mode
                              3. config data for all sub effects


                            The structure for each effect including effectlist (other than the root) is as follows.
                            1. EffectId INT - This indicates the effect type. There are three cases for this
                              1. if EffectId == LIST_ID (0xfffffffe) then this is an effectlist
                              2. if EffectId < DLLRENDERBASE (16384) then this is a built in effect and EffectId is the index in the effect initializer declarations ie. DECLARE_EFFECT calls in rlib.cpp.
                              3. if EffectId > DLLRENDERBASE then i think the effect is loaded externally. The EffectId in this case is followed by a 32 byte string identifying the effect.
                            2. Length INT - Length number of bytes that follow make the config for this effect.
                            3. Config Code (Length BYTES) - This data i think is passed to load_config method of corresponding effect classes to initialize each effect.


                            Further, for externally loaded effects, it seems that the Config Code Section again has a structure like
                            1. use_code INT - Not sure what this means exactly.
                            2. length INT - number of bytes of config data that follows.
                            3. actual config data?


                            Meanwhile, on WebVS side, i ve added more stuff
                            • More Effects
                            • Blending related stuff
                            • Support for Registers and more avs functions
                            • The demo now runs UnConeD's "Silk Strings" preset.


                            Not sure how far i can maintain compatibility with AVS. I am also adding some improvements, like
                            • Named global vars - variables starting with @ symbol are global.
                            • clone - Effects can contain a clone parameter, an integer that would create multiple instances of the same effect. The clone index is then available as a variable in the avs expressions.


                            I am also trying to figure out a way to do an AVS editor like UI.
                            i came across this today:

                            NSIS IDE for Atom | NSIS for Visual Studio Code | NSIS for Sublime Text | NSIS.docset

                            Comment

                            • Grandchild
                              Senior Member
                              • Oct 2005
                              • 346

                              #29
                              Just to let people know that I've started working on an automatic converter from .avs to (what yathosho and I feel should be called) .webvs files.


                              Originally Posted by Yathosho View Post
                              this is a nice doc, but it's also seemingly an older version of the file format, or a not-always-well-researched one. it has much good information, but some errors. just to let people know.

                              Comment

                              • QOAL
                                [STILL a retard!]
                                • Apr 2002
                                • 2422

                                #30
                                Oh that's great, Grandchild!

                                Contrary to the read me, it does work in Firefox too.
                                count!last.fmplanner

                                Comment

                                Working...
                                X