Skip to content

Manage the preview's rerenders using events #310

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
sophiedeziel wants to merge 2 commits into
base: develop
Choose a base branch
from
Draft

Manage the preview's rerenders using events #310

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4b41806
Manage the preview's rerender using events
sophiedeziel Sep 8, 2025
9de20ff
Cleanups
sophiedeziel Sep 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
171 changes: 76 additions & 95 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<!DOCTYPE html>

<head>
<script src="https://cdn.lrkt-in.com/LogRocket.min.js" crossorigin="anonymous"></script>
<script>document.location.hostname.includes('gcode-preview.web.app') && window.LogRocket && window.LogRocket.init('x64tmd/gcode-preview-demo');</script>
Expand All @@ -15,7 +16,7 @@
loadAnalytics();

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-165890546-1');
}
Expand All @@ -24,84 +25,70 @@
<link rel="stylesheet" href="style.css" />
</head>

<body >
<body>
<div id="app">
<div class="widget right bottom border slide-in-right glass is-clipped" v-cloak v-if="thumbnail || model">
<img v-if="thumbnail"
draggable="false"
id=thumbnail
class="is-block is-fullwidth"
alt="thumbnail generated by slicer"
:src="thumbnail" />
<img v-if="thumbnail" draggable="false" id=thumbnail class="is-block is-fullwidth"
alt="thumbnail generated by slicer" :src="thumbnail" />
<div class="file-info">

<div class="p-1" v-if="model">
<div><a :href="model?.original">{{model?.name}}</a> <br>
<span v-if="model?.designer" class="is-size-8">by {{model?.designer}}</span></div>
<span v-if="model?.designer" class="is-size-8">by {{model?.designer}}</span>
</div>

<div class="license is-size-8">{{model?.license}}</div>
</div>

</div>
</div>
<div class="sidebar p-4 widget left top glass slide-in-left border" >
<h1 class="text-center m-3 mb-5">GCode Preview
<div class="sidebar p-4 widget left top glass slide-in-left border">

<h1 class="text-center m-3 mb-5">GCode Preview
</h1>
<div class="scroll-container">
<div>
<section class="flex is-justify-content-center">
<section class="flex is-justify-content-center">
<div class="bulma-select">
<select id="settings-presets"
v-cloak
v-model="selectedPreset">
<select id="settings-presets" v-cloak v-model="selectedPreset">
<option v-for="(preset, name) in presets" :value="name">{{preset.title}}</option>
</select>
</div>
</section>

<div class="bulma-tabs bulma-is-small">
<ul>
<li :class="{ 'bulma-is-active': activeTab == 'layers' }"><a @click="selectTab('layers')">Layers</a></li>
<li :class="{ 'bulma-is-active': activeTab == 'travel' }"><a @click="selectTab('travel')">Travel</a></li>
<li :class="{ 'bulma-is-active': activeTab == 'extrusion' }"><a @click="selectTab('extrusion')">Extrusion</a></li>
<li :class="{ 'bulma-is-active': activeTab == 'build-volume' }"><a @click="selectTab('build-volume')">Build volume</a></li>
<li :class="{ 'bulma-is-active': activeTab == 'extrusion' }"><a
@click="selectTab('extrusion')">Extrusion</a></li>
<li :class="{ 'bulma-is-active': activeTab == 'build-volume' }"><a
@click="selectTab('build-volume')">Build volume</a></li>
</ul>
</div>
</div>
<div class="is-size-7">
<div class="panel" v-cloak v-show="activeTab == 'layers'">
<section v-if="layerCount > 1">
<section v-if="layerCount > 1">
<div class="controls">
<label>
Start Layer
<input type="checkbox" v-model="settings.enableStartLayer" />
<input type="checkbox" v-model="settings.enableStartLayer" />
</label>
<label :class="{'has-text-grey' : !settings.enableStartLayer}" ><output id="start-layer-value" >{{settings.startLayer}}</output></label>&nbsp;
<input
type="range"
min="1"
:max="settings.maxLayer"
id="start-layer"
v-model="settings.startLayer"
:disabled="!settings.enableStartLayer"
/>
<label :class="{'has-text-grey' : !settings.enableStartLayer}"><output
id="start-layer-value">{{settings.startLayer}}</output></label>&nbsp;
<input type="range" min="1" :max="settings.maxLayer" id="start-layer" v-model="settings.startLayer"
:disabled="!settings.enableStartLayer" />
</div>
<div class="controls">
<label>
End Layer
<input type="checkbox" v-model="settings.enableEndLayer" />
<input type="checkbox" v-model="settings.enableEndLayer" />
</label>
<label :class="{'has-text-grey' : !settings.enableEndLayer}"> <output id="end-layer-value" >{{settings.endLayer}}</output></label>&nbsp;
<label :class="{'has-text-grey' : !settings.enableEndLayer}"> <output
id="end-layer-value">{{settings.endLayer}}</output></label>&nbsp;
<!-- HACK: extra :value binding to ensure the value is set after the max is updated -->
<input
v-model="settings.endLayer"
type="range"
min="1"
:max="settings.maxLayer"
id="end-layer"
:value="settings.endLayer"
:disabled="!settings.enableEndLayer"
/>
<input v-model="settings.endLayer" type="range" min="1" :max="settings.maxLayer" id="end-layer"
:value="settings.endLayer" :disabled="!settings.enableEndLayer" />
</div>
<div class="controls">
<label for="single-layer-mode">Single layer mode</label>
Expand All @@ -120,66 +107,57 @@ <h1 class="text-center m-3 mb-5">GCode Preview
<section>
<div class="controls">
<label for="travel">Render travel</label>
<input type="checkbox" id="travel" v-model="settings.renderTravel" />
<input type="checkbox" id="travel" v-model="settings.renderTravel" />
</div>
<div class="controls">
<label :class="{'has-text-grey' : !settings.renderTravel}" for="travel-color">Travel color</label>
<input type="color" id="travel-color" v-model="settings.travelColor" :disabled="!settings.renderTravel" />
<input type="color" id="travel-color" v-model="settings.travelColor"
:disabled="!settings.renderTravel" />
</div>
</section>
</div>

<div class="panel" v-cloak v-show="activeTab == 'extrusion'">
<section class="mb-0">
<div class="controls">
<label for="extrusion">Render extrusion</label
><input type="checkbox" v-model="settings.renderExtrusion" />
<label for="extrusion">Render extrusion</label><input type="checkbox"
v-model="settings.renderExtrusion" />
</div>
</section>

<div :class="{'has-text-grey': !settings.renderExtrusion}">

<section>
<div class="controls">
<label for="render-tubes">Render as tubes</label
><input type="checkbox" v-model="settings.renderTubes" :disabled="!settings.renderExtrusion"/>
<label for="render-tubes">Render as tubes</label><input type="checkbox"
v-model="settings.renderTubes" :disabled="!settings.renderExtrusion" />
</div>
<div class="controls" v-show="!settings.renderTubes">
<label>Line width <output>{{settings.lineWidth}}</output></label>&nbsp;
<input
type="range"
min="1"
step="0.5"
max="10"
v-model="settings.lineWidth"
:disabled="!settings.renderExtrusion"
/>
</div>

<div class="controls" v-show="settings.renderTubes">
<label>Extrusion width <output>{{settings.extrusionWidth}}</output></label>&nbsp;
<input
type="number"
min="0.05"
max="3.0"
step="0.05"
v-model="settings.extrusionWidth"
:disabled="!settings.renderExtrusion"
/>
</div>
<input type="range" min="1" step="0.5" max="10" v-model="settings.lineWidth"
:disabled="!settings.renderExtrusion" />
</div>

<div class="controls" v-show="settings.renderTubes">
<label>Extrusion width <output>{{settings.extrusionWidth}}</output></label>&nbsp;
<input type="number" min="0.05" max="3.0" step="0.05" v-model="settings.extrusionWidth"
:disabled="!settings.renderExtrusion" />
</div>
</section>

<section class="extrusion-colors">
<div class="flex just-between"># of extrusion colors <div class="controls">
<button @click="addColor">+</button>
<button @click="removeColor">-</button>
</div></div>
<div class="flex just-between"># of extrusion colors <div class="controls">
<button @click="addColor">+</button>
<button @click="removeColor">-</button>
</div>
</div>

<div class="controls" v-for="color,index in settings.colors">
<label for="extrusion-color-t0">Extrusion color (T{{index}})</label>
<input type="color" v-model="settings.colors[index]" :key="index" :disabled="!settings.renderExtrusion" />
<input type="color" v-model="settings.colors[index]" :key="index"
:disabled="!settings.renderExtrusion" />
</div>

</section>

<!-- <section>
Expand All @@ -197,7 +175,7 @@ <h1 class="text-center m-3 mb-5">GCode Preview
</div>
<div class="controls">
<label :class="{'has-text-grey' : !settings.highlightLastSegment}" for="last-segment-color">Last segment color</label>
<input type="color" id="last-segment-color" v-model="settings.lastSegmentColor"
<input type="color" id="last-segment-color" v-model="settings.lastSegmentColor"
:disabled="!settings.highlightLastSegment || !settings.renderExtrusion" />
</div>
</section> -->
Expand All @@ -206,26 +184,30 @@ <h1 class="text-center m-3 mb-5">GCode Preview
</div>
<div class="panel" v-cloak v-show="activeTab == 'build-volume'">
<section>
<div class="controls">
<div class="controls">
<label for="drawBuildVolume">Render build volume</label>
<input type="checkbox" v-model="settings.drawBuildVolume" />
</div>
<div :class="{'has-text-grey' : !settings.drawBuildVolume}">
<div class="controls">
<label for="buildVolumeX">Build volume (x)&nbsp;</label>
<input type="number" v-model="settings.buildVolume.x" step=10 :disabled="!settings.drawBuildVolume" />
<input type="number" v-model="settings.buildVolume.x" step=10
:disabled="!settings.drawBuildVolume" />
</div>
<div class="controls">
<div class="controls">
<label for="buildVolumeY">Build volume (y)&nbsp;</label>
<input type="number" v-model="settings.buildVolume.y" step=10 :disabled="!settings.drawBuildVolume" />
<input type="number" v-model="settings.buildVolume.y" step=10
:disabled="!settings.drawBuildVolume" />
</div>
<div class="controls">
<div class="controls">
<label for="buildVolumeZ">Build volume (z)&nbsp;</label>
<input type="number" v-model="settings.buildVolume.z" step=10 :disabled="!settings.drawBuildVolume" />
<input type="number" v-model="settings.buildVolume.z" step=10
:disabled="!settings.drawBuildVolume" />
</div>
<div class="controls">
<label for="smallGrid">Small grid</label>
<input type="checkbox" v-model="settings.buildVolume.smallGrid" :disabled="!settings.drawBuildVolume" />
<input type="checkbox" v-model="settings.buildVolume.smallGrid"
:disabled="!settings.drawBuildVolume" />
</div>
</div>
<div class="controls">
Expand All @@ -234,10 +216,10 @@ <h1 class="text-center m-3 mb-5">GCode Preview
</div>
<div class="controls">
<label for="bounding-color">Bounding box</label>
<input type="checkbox" v-model="drawBoundingBox" />
<input type="checkbox" v-model="settings.drawBoundingBox" />
</div>
<div class="controls">
<label for="background-color">Background color</label>
<label for="background-color">Bounding box color</label>
<input type="color" v-model="settings.boundingBoxColor" />
</div>
</section>
Expand All @@ -247,23 +229,22 @@ <h1 class="text-center m-3 mb-5">GCode Preview
</div>
<div>
<footer class="is-size-7 p-0 has-text-grey-light">


<div>
<a class="has-text-grey-light" href="https://github.com/remcoder/gcode-preview">GitHub</a>
- <a class="has-text-grey-light" href="/docs">API docs</a>

</div>
<div>MIT license </div>
</footer>
</div>
</div>
<div class="widget top right glass p-3 is-size-7 slide-in-down border"><label class="mr-2">dev mode</label><input v-model="enableDevMode" type="checkbox" /> </div>
<div class="widget top right glass p-3 is-size-7 slide-in-down border"><label class="mr-2">dev mode</label><input
v-model="enableDevMode" type="checkbox" /> </div>
<div class="absolute left bottom m-3 has-text-grey slide-in-up">Drop a gcode file to preview it</div>
<div class="wrapper">
<canvas class="preview" :class="{ 'dragging': settings.dragging }"
@update.prevent="update"
></canvas>
<canvas class="preview" :class="{ 'dragging': settings.dragging }"></canvas>
</div>
</div>
<script type="importmap">
Expand Down
Loading