• Tags
  • Documentation
  • Order
  • Register
  • Login
Duet3D Logo Duet3D
  • Tags
  • Documentation
  • Order
  • Register
  • Login

Building DWC plugins with plain Javascript

Scheduled Pinned Locked Moved Solved
Plugins for DWC and DSF
5
9
679
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • undefined
    resam
    last edited by 12 Jul 2021, 21:25

    I'm trying to convert one of my Tampermonkey scripts to a DWC plugin and struggle to find the correct way of compiling everything so that DWC actually serves my .js files and executes them in the browser.

    I've looked at https://github.com/Duet3D/DSF-Plugins/tree/master/EndstopsMonitor but the build instructions seem a bit out of context - and I couldn't match the instruction up with the DWC repo either.

    Are plain plugins with Javascript supported or does everything need to be Vue? Looking at the EndstopsMonitor downloadable zip, it seems everything is webpack'd? DWC always installs my zip file just fine - but obviously it silently swallows any potential errors I might have introduced.

    I just want to execute some lines of JS code that I previously had in a Tampermonkey script to insert a few buttons and text fields - I am well aware of the "dangers" by messing around with the DOM too much and that Vue might not like any of it - but thats the "easiest for me" approach.

    @MintyTrebor it sounds like you have figured it out for your BtnCmd, but I couldn't find any magical "packaging" commands in your repo either...

    undefined undefined 2 Replies Last reply 13 Jul 2021, 01:11 Reply Quote 0
    • undefined
      Sindarius @resam
      last edited by 13 Jul 2021, 01:11

      @resam If you are not looking to setup any pages/tabs for your plugin you could simply start your javascript in the index.js of your plugin. If you create a plugin with just an index.js and put the following in you'll see the ticks show up every second in the console.

      setInterval(() => {
          console.log(Date.now())
      }, 1000)
      

      As soon as the plugin is loaded the console will start getting updated time. I am assuming you are using TamperMonkey to fidget with the DOM on the rest of the site. You should be able to initialize it in your index.js. Granted I don't personally recommend tampering with the DOM on the DWC cause you could break bindings that are used to render information.

      Once you've built your instance of DWC with your plugin using npm run build You'll have chunks in the dist js/css folders that match the webpack chunk which will go into your zip file. There's no auto-packaging in place today.

      1 Reply Last reply Reply Quote 0
      • undefined
        MintyTrebor @resam
        last edited by MintyTrebor 13 Jul 2021, 06:23

        @resam - @Sindarius is correct you can just execute on the index.js, although I do not know how that may impact "other" installed plugins. My build/packaging process its essentially what @Sindarius said:

        (assuming DWC v3.3)

        npm run build
        

        create a folder for working eg - 'releasexxx'
        create 'dwc' folder in 'releasexxx'
        copy pluginname.xx from dist/js and dist/css into 'releasexxx/dwc'
        create/update plugin.json and copy into 'releasexxx'
        compress 'dwc' folder and plugin.json into pluginname.zip inside the 'releasexxx' folder

        NodeDSF - Native Node-Red integration with Duet boards.
        BtnCmd - Customise DWC with user defined buttons/layouts/panels (DWC Plugin)
        ReleaseMgr - Duet update info inside DWC.
        Repo

        undefined 1 Reply Last reply 13 Jul 2021, 09:40 Reply Quote 1
        • undefined
          chrishamm administrators @MintyTrebor
          last edited by 13 Jul 2021, 09:40

          @resam TBH I've never tried plain JavaScript plugins with DWC but I see no reason why they would not work. You'd only have to create a plugin manifest and add your JS file with the ID in the filename to the plugin's dwc directory, ZIP it, and then install it. The Webpack loader code should import your JS file as usual using a plain <script> tag as soon as it's started.

          Duet software engineer

          undefined 1 Reply Last reply 14 Jul 2021, 18:39 Reply Quote 0
          • undefined
            resam @chrishamm
            last edited by resam 9 Sept 2021, 19:00 14 Jul 2021, 18:39

            Ok - so here is how you can take full advantage of the pre-compile steps from DuetWebControl (skip ahead if you don't have a complex plugin):

            git clone https://github.com/Duet3D/DuetWebControl.git
            cd DuetWebControl
            git checkout v3.3-dev
            npm install
            

            Then call a heart and blood pressure specialist doctor due to:
            25 vulnerabilities (13 moderate, 12 high) and tons of this library is no longer supported messages...

            Then add the following snippet to the big plugin array/list at the bottom of src/plugins/index.js to include your new plugin:

            	new DwcPlugin({
            		id: 'MyNewPluginID',
            		name: 'My-New-Plugin',
            		author: 'Thomas Kriechbaumer',
            		version,
            		loadDwcResources: () => import(
            			/* webpackChunkName: "MyNewPluginID" */
            			'./MyNewPluginID/index.js'
            		)
            	}),
            

            Then continue with:

            # still in the root dir of DuetWebControl repo
            cd src/plugins/
            mkdir MyNewPluginID
            cd MyNewPluginID
            echo 'console.log("Hello World!");' > index.js
            npm run build
            

            This will create 4 new files with MyNewPluginID.123abc.<different-extensions> under dist/js/. Copy those into your plugin ZIP file under dwc/js/.


            And essentially all this can be shortened by directly doing this:

            Create a ZIP file with these files:

            MyNewPluginID.zip
              - plugin.json
              - dwc/
                - js/
                  - MyNewPluginID.js
            

            With plugin.json being this:

            {
                "id": "MyNewPluginID",
                "name": "My-New-Plugin",
                "author": "Thomas Kriechbaumer",
                "version": "1.0.0",
                "license": "MIT",
                "homepage": "http://example.com",
            }
            

            (observe that I did not mention dwcFiles - it will figure itself out that there is a .js file to copy into the right place.

            With MyNewPluginID.js being this:

            (window["webpackJsonp"] = window["webpackJsonp"] || []).push([
                ["MyNewPluginID"], {
                    "./src/plugins/MyNewPluginID/index.js": function (e, t, n) {
                        "use strict";
            
                         console.log("Hello World");
                         // YOUR CODE HERE!
                    }
                }
            ]);
            

            Not sure if this is the best way to build new plugins, but it worked for me.

            undefined undefined 2 Replies Last reply 14 Jul 2021, 23:44 Reply Quote 3
            • undefined
              Sindarius @resam
              last edited by 14 Jul 2021, 23:44

              @resam yep that is essentially the process for building a plugin. Sorry my earlier post I assumed you had gotten to the point of making the plugin.

              1 Reply Last reply Reply Quote 1
              • undefined
                theKM @resam
                last edited by theKM 9 Sept 2021, 21:24 8 Sept 2021, 22:52

                @resam , this was handy info, but took a bit more scratching around to see that the script files need to be in 'dwc' directory...

                MyNewPluginID.zip
                  - plugin.json
                  -  dwc/js/
                    - MyNewPluginID.afbaaab6.js
                    - MyNewPluginID.afbaaab6.js.gz
                    - MyNewPluginID.afbaaab6.js.map
                    - MyNewPluginID.afbaaab6.js.map.gz
                
                undefined 1 Reply Last reply 9 Sept 2021, 18:59 Reply Quote 0
                • undefined
                  resam @theKM
                  last edited by 9 Sept 2021, 18:59

                  @thekm true, I'm missing the dwc folder, but are you missing the js folder inside of it?

                  Thanks - I've updated my above post!

                  undefined 1 Reply Last reply 9 Sept 2021, 21:23 Reply Quote 1
                  • undefined
                    theKM @resam
                    last edited by theKM 9 Sept 2021, 21:23 9 Sept 2021, 21:23

                    @resam ...I simply tried renaming js to dwc and it worked... apparently if uploaded to the controller through DWC, it throws js files into the js directory and CSS into the css directory. Not sure what it does if you use a more complicated structure for some reason...

                    1 Reply Last reply Reply Quote 0
                    • First post
                      Last post
                    Unless otherwise noted, all forum content is licensed under CC-BY-SA