• Tags
  • Documentation
  • Order
  • Register
  • Login
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
394
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
    stuartofmt
    last edited by stuartofmt 11 Feb 2022, 15:55 2 Nov 2022, 15:43

    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>
    undefined 1 Reply Last reply 2 Nov 2022, 21:22 Reply Quote 0
    • undefined
      chrishamm administrators @stuartofmt
      last edited by 2 Nov 2022, 21:22

      @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

      undefined 1 Reply Last reply 3 Nov 2022, 14:02 Reply Quote 0
      • undefined
        stuartofmt @chrishamm
        last edited by 3 Nov 2022, 14:02

        @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.

        undefined 1 Reply Last reply 3 Nov 2022, 14:11 Reply Quote 0
        • undefined
          chrishamm administrators @stuartofmt
          last edited by 3 Nov 2022, 14:11

          @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

          undefined 1 Reply Last reply 3 Nov 2022, 14:57 Reply Quote 0
          • undefined
            stuartofmt @chrishamm
            last edited by 3 Nov 2022, 14:57

            @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
            • undefined stuartofmt marked this topic as a question 28 Apr 2023, 23:53
            • undefined stuartofmt has marked this topic as solved 28 Apr 2023, 23:53
            1 out of 5
            • First post
              1/5
              Last post
            Unless otherwise noted, all forum content is licensed under CC-BY-SA