How to setup a basic plugin?

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>

chrishamm

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

stuartofmt

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

chrishamm

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

stuartofmt

@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