Solved
Third party js library in mashup
Hi everyone,
i have this third party software which i would like to connect with thingworx so my first test is that i have app.js, index.html and this javascript library which worked well locally in my computer and now i would like to do same thing in mashup.
i am using valueDisplay widget in mashup and would like to render it in mashup. now my html is rendered properly and i can see it in mashup but i feel like i am unable to get app.js file and library js file in html.. I have uploaded all three files in the file repository.. i feel i am not accessing it right with repo link ....
Anyone has some feedback, i would be happy to hear..
https://github.com/dymosoftware/dymo-connect-framework?tab=readme-ov-file
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>DYMO Connect Framework – ThingWorx</title>
<style>
body { font-family: system-ui, Arial, sans-serif; margin: 24px; }
button { margin-right: 8px; }
#log { white-space: pre-wrap; font-family: ui-monospace, Consolas, monospace; }
#preview { max-height: 180px; display: block; margin-top: 12px; }
</style>
</head>
<body>
<h2>DYMO Connect Framework – Test</h2>
<div>
<button id="btnEnv">Check Environment</button>
<button id="btnList">List Printers</button>
<button id="btnPreview">Render Preview</button>
<button id="btnPrint">Print</button>
</div>
<img id="preview" alt="Label preview will appear here" />
<h3>Log</h3>
<div id="log"></div>
<!-- External scripts only -->
<script src="/Thingworx/FileRepositories/TestBench.Repository/downLoadPicturesWithTimeRange/dymo.connect.framework.js"></script>
<script src="/Thingworx/FileRepositories/TestBench.Repository/downLoadPicturesWithTimeRange/app.js"></script>
</body>
</html>
My vs code implementation is
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>DYMO Connect Framework – Local Test</title>
<style>
body { font-family: system-ui, Arial, sans-serif; margin: 24px; }
button { margin-right: 8px; }
#log { white-space: pre-wrap; font-family: ui-monospace, Consolas, monospace; }
#preview { max-height: 180px; display: block; margin-top: 12px; }
</style>
</head>
<body>
<h2>DYMO Connect Framework – Test</h2>
<div>
<button id="btnEnv">Check Environment</button>
<button id="btnList">List Printers</button>
<button id="btnPreview">Render Preview</button>
<button id="btnPrint">Print</button>
</div>
<img id="preview" alt="Label preview will appear here" />
<h3>Log</h3>
<div id="log"></div>
<script src="./dymo.connect.framework.js"></script>
<script src="./app.js"></script>
</body>
</html>
app.js
const $ = (sel) => document.querySelector(sel);
const log = (msg) => { console.log(msg); $('#log').textContent += msg + '\n'; };
(async function main() {
try {
await dymo.label.framework.init();
log('Framework initialized');
$('#btnEnv').addEventListener('click', () => {
try {
const env = dymo.label.framework.checkEnvironment();
log('Environment:\n' + JSON.stringify(env, null, 2));
} catch (e) { log('checkEnvironment error: ' + e); }
});
$('#btnList').addEventListener('click', async () => {
try {
const printers = await dymo.label.framework.getPrinters();
log('Printers:\n' + JSON.stringify(printers, null, 2));
} catch (e) { log('getPrinters error: ' + e); }
});
// A tiny sample label (Address 30252); adjust to match your label stock
const sampleLabelXml = `
<DieCutLabel Version="8.0" Units="twips">
<PaperOrientation>Landscape</PaperOrientation>
<Id>Address</Id>
<PaperName>30252 Address</PaperName>
<DrawCommands/>
<ObjectInfo>
<TextObject>
<Name>TEXT</Name>
<ForeColor Alpha="255" Red="0" Green="0" Blue="0"/>
<BackColor Alpha="0" Red="255" Green="255" Blue="255"/>
<LinkedObjectName/>
<Rotation>Rotation0</Rotation>
<IsMirrored>False</IsMirrored>
<IsVariable>True</IsVariable>
<Text>DYMO Test\nHello World</Text>
<HorizontalAlignment>Center</HorizontalAlignment>
<VerticalAlignment>Middle</VerticalAlignment>
<TextFitMode>AlwaysFit</TextFitMode>
</TextObject>
<Bounds X="180" Y="120" Width="3060" Height="540"/>
</ObjectInfo>
</DieCutLabel>`.trim();
let label = null;
$('#btnPreview').addEventListener('click', async () => {
try {
label = dymo.label.framework.openLabelXml(sampleLabelXml);
const png = await dymo.label.framework.renderLabel(sampleLabelXml, null, null);
$('#preview').src='data:image/png;base64,' + png;
log('Preview rendered');
} catch (e) { log('renderLabel error: ' + e); }
});
$('#btnPrint').addEventListener('click', async () => {
try {
if (!label) label = dymo.label.framework.openLabelXml(sampleLabelXml);
const printers = await dymo.label.framework.getPrinters();
if (!printers.length) return log('No DYMO printers found');
const printerName = printers[0].name;
await dymo.label.framework.printLabel(printerName, null, sampleLabelXml, null);
log('Printed on: ' + printerName);
} catch (e) { log('printLabel error: ' + e); }
});
} catch (e) {
log('Framework init failed. Is DYMO Connect running? ' + e);
}
})();