Skip to content

own3d/ext-template-liquid-goal-bar

Repository files navigation

Vue 3 + Vite + OWN3D Extension Helper

This template should help get you started developing with Vue 3 in Vite with our Extension Helper. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Extension Helper

The Extension Helper is a small library that helps you to create extensions for OWN3D. It provides a set of helper functions and a set of OWN3D API functions that you can use in your extensions.

Hosted Example

The built version of this template is hosted on our Extension CDN. You can find it here.

Recommended IDE Setup

HOW TO: FILLBAR CALCULATION

get the path from the delivered svg and convert it https://yoksel.github.io/relative-clip-path/

create file "fill-clip.svg" like this and paste the code from "objectboundingbox" into the d attribute from path tag

goalbar.styles.ts

calculation of the fillPadding Attribute

(500 is the correct dimension of the svg and we need the padding from the foreground.png to the fill-clip.svg line) You will get coordinates from Andy

//top: 0.255, =(127,5/500) //right: 0.177, = (411,5/500) - 1 //bottom: 0.162967, = ((418,5165/500) -1) * -1 //left: 0.175, = ((87,5/500) -1) * -1

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •