Skip to content

Commit

Permalink
new spool svg
Browse files Browse the repository at this point in the history
  • Loading branch information
@MG-longshot
MG-longshot committed Dec 15, 2024
1 parent 72ce6e7 commit 26909ac
Show file tree
Hide file tree
Showing 3 changed files with 127 additions and 90 deletions.
14 changes: 7 additions & 7 deletions src/components/panels/AfcPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,12 +79,12 @@
style="padding: 5px; width: 50%;"
:key="index"
@click="openChangeSpoolDialog(spool)">
<FilamentReelIcon v-if="spool.load"
<FilamentReelIcon v-if="spool.prep"
:color="spool.color"
style="width: 100%; float: left"/>
<FilamentReelIcon v-else
style="width: 100%; float: left"
:color='spool.empty'/>
style="float: left"/>
<FilamentReelIcon v-else
:color="'transparent'"
style="float: left"/>
</div>
<div class="spool-header">
<span style="color:red" v-if="!spool.load && !spool.prep && !spool.tool_loaded">
Expand Down Expand Up @@ -160,7 +160,7 @@ import BaseMixin from "@/components/mixins/base"
import Panel from "@/components/ui/Panel.vue"
import { mdiAdjust, mdiRefresh, mdiDotsVertical } from "@mdi/js"
import AfcChangeSpoolDialog from "@/components/dialogs/AfcChangeSpoolDialog.vue"
import FilamentReelIcon from '@/components/ui/FilamentReelIcon.vue'
import FilamentReelIcon from '@/components/ui/FilamentReelIcon.vue'
import SpoolIcon from "@/components/ui/SpoolIcon.vue"
import { AFCRoot } from '@/store/server/afc'
import BoxTurtleIcon from "@/components/ui/BoxTurtleIcon.vue"
Expand All @@ -171,7 +171,7 @@ import InfinityIcon from '@/components/ui/InfinityIcon.vue'
Panel,
AfcChangeSpoolDialog,
SpoolIcon,
FilamentReelIcon,
FilamentReelIcon,
BoxTurtleIcon,
InfinityIcon
},
Expand Down
35 changes: 35 additions & 0 deletions src/components/ui/FilamentReelEmptyIcon.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<template>
<svg x="0px" y="0px"viewBox="0 0 487.04 487.04" xml:space="preserve" @click="clickSpool">
<path :style="styleCircle" style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill-rule:nonzero;opacity:1" vector-effect="non-scaling-stroke" transform="matrix(.58757 0 0 3.94769 197.135 250.047)" d="M0-63.27c34.925 0 63.27 28.345 63.27 63.27 0 34.925-28.345 63.27-63.27 63.27-34.925 0-63.27-28.345-63.27-63.27 0-34.925 28.345-63.27 63.27-63.27z" />
<path :style="styleCircle" style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill-rule:nonzero;opacity:1" vector-effect="non-scaling-stroke" transform="matrix(.38158 0 0 3.46232 197.135 250.047)" d="m197.17,146.24c-.11,0-.21.01-.32.03v-.03H37.18l.21,207.07h159.68s.07,0,.11,0c8.51,0,15.41-46.38,15.41-103.53s-6.9-103.53-15.41-103.53Z"/>
<path :style="styleCircle" style="stroke:#000;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill-rule:nonzero;opacity:1" vector-effect="non-scaling-stroke" transform="matrix(2.07364 0 0 3.3577 117.295 250.047)" d="m197.17,146.24c-.11,0-.21.01-.32.03v-.03H37.18l.21,207.07h159.68s.07,0,.11,0c8.51,0,15.41-46.38,15.41-103.53s-6.9-103.53-15.41-103.53Z" />
<g transform="matrix(.58757 0 0 3.94769 37.454 250.047)">
<path :style="styleCircle" style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill-rule:nonzero;opacity:1;filter:url(#a)" vector-effect="non-scaling-stroke" d="M0-63.27c34.925 0 63.27 28.345 63.27 63.27 0 34.925-28.345 63.27-63.27 63.27-34.925 0-63.27-28.345-63.27-63.27 0-34.925 28.345-63.27 63.27-63.27z" />
<path style="stroke:#6e0b30;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-dashoffset:0;stroke-linejoin:miter;stroke-miterlimit:4;fill-rule:nonzero;opacity:1" vector-effect="non-scaling-stroke" transform="scale(.41452)" d="M0-63.27c34.925 0 63.27 28.345 63.27 63.27 0 34.925-28.345 63.27-63.27 63.27-34.925 0-63.27-28.345-63.27-63.27 0-34.925 28.345-63.27 63.27-63.27z" />
</g>
</svg>
</template>

<script lang="ts">
import Component from 'vue-class-component'
import { Mixins, Prop } from 'vue-property-decorator'
import BaseMixin from '@/components/mixins/base'
@Component({})
export default class SpoolIcon extends Mixins(BaseMixin) {
@Prop({ required: false, default: '#ff0' })
declare readonly color: string
get styleFilament() {
return { fill: this.color }
}
get styleCircle() {
return { fill: '#b58950' }
}
clickSpool() {
this.$emit('click-spool')
}
}
</script>
168 changes: 85 additions & 83 deletions src/components/ui/FilamentReelIcon.vue
View file
Original file line number Diff line number Diff line change
@@ -1,83 +1,85 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
viewBox="0 0 487.04 487.04"
xml:space="preserve"
@click="clickSpool">
>
<desc>Created with Fabric.js 5.3.0</desc>
<path
id="path1"
stroke-linecap="round"
d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z"
transform="matrix(0.58757483,0,0,3.9476902,197.13549,250.04675)"
:style="secondaryColor"
/>
<path
id="path2"
stroke-linecap="round"
d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z"
transform="matrix(0.38157612,0,0,3.4623174,197.13549,250.04674)"
:style="secondaryColor"
/>
<path
id="path3"
stroke-linecap="round"
d="M -38.50267 -65.24064 L 38.502680000000005 -65.24064 L 38.502680000000005 65.24064 L -38.50267 65.24064 z"
transform="matrix(2.073642,0,0,3.3577086,117.29471,250.04674)"
:style="colorReel"
/>
<g
id="OvgM38-6CZm9R47a1TDIX"
transform="matrix(0.58757483,0,0,3.9476902,37.453957,250.04674)"
>
<filter id="SVGID_1" width="1.272" height="1.114" x="-.057" y="-.057">
<feGaussianBlur id="feGaussianBlur3" in="SourceAlpha" stdDeviation="3" />
<feOffset id="feOffset3" dx="20" dy="0" result="oBlur" />
<feFlood id="feFlood3" flood-color="#000" flood-opacity="0.67" />
<feComposite id="feComposite3" in2="oBlur" operator="in" />
<feMerge id="feMerge4">
<feMergeNode id="feMergeNode3" />
<feMergeNode id="feMergeNode4" in="SourceGraphic" />
</feMerge>
</filter>
<path
id="path4"
stroke-linecap="round"
d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z"
transform="translate(8.4959392e-7)"
:style="secondaryColor"
/>
</g>
</svg>
</template>

<script lang="ts">
import Component from 'vue-class-component'
import { Mixins, Prop } from 'vue-property-decorator'
import BaseMixin from '@/components/mixins/base'
@Component({})
export default class FilamentReelIcon extends Mixins(BaseMixin){
@Prop({ required: false, default: '#ff0'})
declare readonly color: string
get colorReel() {
return { fill: this.color }
}
get secondaryColor() {
return {fill:"#c08f4f"}
}
clickSpool() {
this.$emit('click-spool')
}
}
</script>

<style scoped>
</style>
<template>
<svg xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
viewBox="0 0 499.8 499.8"
xml:space="preserve"
@click="clickSpool">
<desc>Converted from Adobe Illustrator SVG</desc>

<path id="spool_right_rim"
d="M202.1,0.3h-5v2.3C179,19,165,123.6,165,250s14,231.1,32.2,247.5v2.3h5
c20.5,0,37.2-111.9,37.2-249.8S222.7,0.3,202.1,0.3z"
:style="spoolRim" />

<path id="spool_right"
d="M197.1,0.3c20.5,0,37.2,111.9,37.2,249.8s-16.7,249.8-37.2,249.8S160,387.9,160,250
S176.6,0.3,197.1,0.3z"
:style="spoolColor" />

<path id="spool_tube"
d="M194.6,166.9L194.6,166.9L49.1,167l0,0c6.9,0,12.4,37.2,12.4,83.2c0,44.1-5.1,80.3-11.6,83
l144.7,0l0,0c6.9,0,12.4-37.2,12.4-83.2C207,204.2,201.4,166.9,194.6,166.9z"
:style="spoolTube" />

<path id="filament_base"
d="M35,31c18.8-12.1,138-10.4,162.1,0c24.9,10.4,41.1,398.9,0,438.1
c-37.2,12.2-147.7,11.4-162.1,0C22,458.8,16.2,43,35,31z"
:style="colorReel" />

<path id="spool_left_rim"
d="M42.5,0.3h-5v2.3C19.3,19,5.3,123.6,5.3,250s14,231.1,32.2,247.5v2.3h5
c20.5,0,37.2-111.9,37.2-249.8S63,0.3,42.5,0.3z"
:style="spoolRim" />

<path id="spool_left"
d="M37.5,0.3C58,0.3,74.6,112.2,74.6,250S58,499.8,37.5,499.8S0.3,387.9,0.3,250
S16.9,0.3,37.5,0.3z"
:style="spoolColor" />

<path id="spool_hole"
d="M35.5,171.6c6.5,0,11.6,35.1,11.6,78.4s-5.3,78.4-11.6,78.4S23.9,293.3,23.9,250
S29,171.6,35.5,171.6z"
:style="spoolHole" />
</svg>
</template>


<script lang="ts">
import Component from 'vue-class-component'
import { Mixins, Prop } from 'vue-property-decorator'
import BaseMixin from '@/components/mixins/base'
@Component({})
export default class FilamentReelIcon extends Mixins(BaseMixin) {
@Prop({ required: false, default: '#ff0' })
declare readonly color: string
get colorReel() {
return { fill: this.color }
}
get spoolColor() {
return { fill: "#c08f4f" }
}
get spoolHole() {
return { fill: "#231a0f" }
}
get spoolTube() {
return { fill: "#594226" }
}
get spoolRim() {
return { fill: "#9b7242" }
}
clickSpool() {
this.$emit('click-spool')
}
}
</script>

<style scoped>
</style>

0 comments on commit 26909ac

Please sign in to comment.