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

    How to setup a basic plugin?

    Scheduled Pinned Locked Moved Solved
    Plugins for DWC and DSF
    2
    5
    390
    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.
    • stuartofmtundefined
      stuartofmt
      last edited by stuartofmt

      I've looked at the available "guides" and examples and am usually pretty good at "hacking by example" but I need help. Clearly, I don't understand what I'm doing ...

      The plugin installs fine, but when its started it stubbornly shows a Status of "stopped". Nothing appears in any of the menu's ..,

      Any help would be very much appreciated.

      I'm trying to setup a simple plugin that invokes an iframe. Here is what I have so far:

      plugin.json

      {
          "id": "DuetLapse",
          "name": "DuetLapse",
          "author": "Stuartofmt",
          "version": "0.0.0",
          "license": "GPL-2.0-or-later",
          "homepage": "https://github.com/stuartofmt/DuetLapse3",
          "dwcVersion": "3.4.1"
        }
      

      dwc/index.js

      "use strict";
      
      import DuetLapsePanel from "./DuetLapsePanel.vue";
      
      import {registerRoute} from "../../routes";
      
      registerRoute(DuetLapsePanel, {
          Control: {
              DuetLapse: {
      	     icon: 'mdi-gesture-tap-button',
                  caption: "DuetLapse",
                  path: "/DuetLapse"
              }
          }
      });
      

      dwc/DuetLapsePanel.vue

      <style scoped>
      	.iframe-container {
      		position: relative;
      		overflow: auto;
      		background-color: transparent;
      	}
      	.iframe-container iframe {
      	position: absolute;
      		top: 0;
      		left: 0;
      		width: 100%;
      		height: 100%;
      		border: 0;
      	}
      </style>
      
      <template>
      	<div class="iframe-container">
      		<iframe :src= {{DuetLapseURL}} width="100%" height="100%" frameborder="0">
      			<span>Your browser does not support iFrames</span>
      		</iframe>
      	</div>	
      </template>
      
      
      <script>
      export default {
        data: function (){
          return {
            DuetLapseURL: 'http://localhost:8094'
          }
        }
      }
      </script>
      
      
      chrishammundefined 1 Reply Last reply Reply Quote 0
      • chrishammundefined
        chrishamm administrators @stuartofmt
        last edited by

        @stuartofmt That binding looks odd:

        <iframe :src= {{DuetLapseURL}} width="100%" height="100%" frameborder="0">
        

        this looks better:

        <iframe :src="DuetLapseURL" width="100%" height="100%" frameborder="0">
        

        Does it work as an internal DWC plugin? For initial development that's the way to go, just develop it as an integrated plugin (see src/plugins) and bundle it only as an external one when you're happy with it. The npm run build-plugin script will generate a final ZIP file ready for installation.

        Duet software engineer

        stuartofmtundefined 1 Reply Last reply Reply Quote 0
        • stuartofmtundefined
          stuartofmt @chrishamm
          last edited by

          @chrishamm said in How to setup a basic plugin?:

          Does it work as an internal DWC plugin? For initial development that's the way to go, just develop it as an integrated plugin (see src/plugins) and bundle it only as an external one when you're happy with it. The npm run build-plugin script will generate a final ZIP file ready for installation.

          I changed the binding but that did not appear to do anything - same symptoms.

          For clarity, my environment is:
          DWC in Chrome on Windows
          Duet2Wifi

          I was under the impression that I could avoid the whole "npm thing" and just create the text files and an appropriately formatted zip file ( in this case plugin.json at the root and a single "dwc" folder with the other two files). Is this incorrect?

          Does your suggestion mean I should set up a full DWC development environment (e.g. on a Pi) and take it from there? Presumable to get easy access to various error messages.

          chrishammundefined 1 Reply Last reply Reply Quote 0
          • chrishammundefined
            chrishamm administrators @stuartofmt
            last edited by

            @stuartofmt You ALWAYS need a full npm setup, there is no way around it because you always need to generate Webpack modules from your plugin source code files. For the same reason there is the build-plugin NPM script as well - it builds a full DWC bundle (including your plugin) and then moves the resulting JS+CSS chunks into a final ZIP file for you.

            It is highly unlikely that DWC will load different JS modules at all.

            Duet software engineer

            stuartofmtundefined 1 Reply Last reply Reply Quote 0
            • stuartofmtundefined
              stuartofmt @chrishamm
              last edited by

              @chrishamm
              Got it. It may be (likely is) my ignorance of development around vue etc. Is it worth making this more explicit in the guides?
              Having said that, my ultimate goal (easy deployment of DuetLapse.py and a convenient way to expose its' html pages) are pretty basic. So , I understand that most would actually know what they are doing and maybe it does not need to be explicit 🙄

              1 Reply Last reply Reply Quote 2
              • stuartofmtundefined stuartofmt marked this topic as a question
              • stuartofmtundefined stuartofmt has marked this topic as solved
              • First post
                Last post
              Unless otherwise noted, all forum content is licensed under CC-BY-SA