Same sort of Issue, is that normal that previewing takes so long to start (showing)
I see a blue dot on the tab of your file, that means that the file is not saved.
Save the file and try again
Well, your app is working, you can see the results there.
About the capacitor.js error don’t worry, the builder doesn’t add it automatically.
And the other error well, don’t know, but I’m having kind the same error on a mobile project (but everything works)
cool thanks bro!
What happens now, do I have to create a database or something else? you know i’m a newbie and this is my first ever programmed desktop app and i have no technical background etc… and i have only one week left of trial version from wappler subscription, and I don’t know if i can afford it or if it’s worth it anyway
You can add a blank capacitor.js file. This file will be used for your plugin configurations and customisation.
Is there any reason why you have selected Framework7? It is a mobile framework. And for a new user can be quite complicated. There is also little support within the Community as not so many Users have implemented it. You would be far better off going with Bootstrap for now which is well documented, including routing with Bootstrap.
If you plan on storing and retrieving data then yes you will need a database. But don’t jump straight in at the deep end. Work on your front-end first and understand the basics.
Well the glory of Wappler is you are not tied in to an annual fee. You can subscribe by the month and use it for as long as you need and then simply end your subscription. The code remains yours.
I strongly suggest checking out some of the tutorials and video lessons here on the Community. A simple search will find what you need.
Sorry, do you see any track of Framework7 there? I see Bootstrap 
Hey @franse,
Sorry was referring to his routing handler.
Definied within his Project Settings, this post.
Really nice hawk eye! That’s what I was wondering, maybe a Bug? The code has bs added and no f7 file attached
Seems there is a confliction within the Project settings.
I’m more Radio than Hawkeye!
1 Like
2 Likes
Are we showing our age Keith!
1 Like
You know, I almost posted nearly that exact statement to you, but thought another reference was better. 
2 Likes
Thanks guys for the advices and insider tips, I really appreciate it 
1 Like
hi all, i have imported the self created main layout for the wheel design from illustrator to wappler using svg codes and adding to index.html in my test projekt but wappler shows in app structure for the inserted “camelot wheel” svg codes only body. there are no individual layers for the elements of the svg image i have inserted as html code in wappler visible in the app structure area top right panel, i ask this because next i want to include interactivity in the individual slices so that they are clickable to perform an ahk. macro exe. action, so up to here I have managed to create the basic structure but from here on I somehow can’t get any further, could someone here maybe help me please!
ps. i at least hope that this approach is not wrong on my part…
here is mycreated illustrator vector template with individually slices:
here is the result in wappler after inserting the svg-codes and running the application:
How about starting with the HTML and CSS code from the codepen you provided previously?
https://codepen.io/stoumann/embed/abLeMVM?
Here’s the HTML
<svg id="app" class="cf" viewBox="0 0 300 300">
<g class="cf-arcs">
<path d="M300.00,150.00A150,150,0,0,1,278.58,227.26L235.72,201.50A100,100,0,0,0,250.00,150.00Z"></path>
<path d="M250.00,150.00A100,100,0,0,1,235.72,201.50L210.00,186.05A70,70,0,0,0,220.00,150.00Z"></path>
<path d="M220.00,150.00A70,70,0,0,1,210.00,186.05L184.29,170.60A40,40,0,0,0,190.00,150.00Z"></path>
</g>
<g transform="translate(260, 0)">
<use width="30" xlink:href="#staff"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-1"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-2"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-3"></use>
</g>
<text x="235" y="153" class="cf-text-middle">A</text>
<text x="205" y="152" class="cf-text-inner">F<tspan baseline-shift="super">#</tspan>m</text>
<g class="cf-arcs">
<path d="M279.90,225.00A150,150,0,0,1,222.72,281.19L198.48,237.46A100,100,0,0,0,236.60,200.00Z"></path>
<path d="M236.60,200.00A100,100,0,0,1,198.48,237.46L183.94,211.22A70,70,0,0,0,210.62,185.00Z"></path>
<path d="M210.62,185.00A70,70,0,0,1,183.94,211.22L169.39,184.98A40,40,0,0,0,184.64,170.00Z"></path>
</g>
<g transform="translate(243.25317547305485, 62.5)">
<use width="30" xlink:href="#staff"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-1"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-2"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-3"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-4"></use>
</g>
<text x="223.6121593216773" y="195.5" class="cf-text-middle">E</text>
<text x="197.63139720814414" y="179.5" class="cf-text-inner">C<tspan baseline-shift="super">#</tspan>m</text>
<g class="cf-arcs">
<path d="M225.00,279.90A150,150,0,0,1,147.38,299.98L148.25,249.98A100,100,0,0,0,200.00,236.60Z"></path>
<path d="M200.00,236.60A100,100,0,0,1,148.25,249.98L148.78,219.99A70,70,0,0,0,185.00,210.62Z"></path>
<path d="M185.00,210.62A70,70,0,0,1,148.78,219.99L149.30,189.99A40,40,0,0,0,170.00,184.64Z"></path>
</g>
<g transform="translate(197.5, 108.25317547305485)">
<use width="30" xlink:href="#staff"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-1"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-2"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-3"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-4"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-5"></use>
</g>
<text x="192.5" y="226.61215932167727" class="cf-text-middle">B</text>
<text x="177.5" y="199.6313972081441" class="cf-text-inner">G<tspan baseline-shift="super">#</tspan>m</text>
<g class="cf-arcs">
<path d="M150.00,300.00A150,150,0,0,1,72.744,278.58L98.496,235.72A100,100,0,0,0,150.00,250.00Z"></path>
<path d="M150.00,250.00A100,100,0,0,1,98.496,235.72L113.95,210.00A70,70,0,0,0,150.00,220.00Z"></path>
<path d="M150.00,220.00A70,70,0,0,1,113.95,210.00L129.40,184.29A40,40,0,0,0,150.00,190.00Z"></path>
</g>
<g transform="translate(135, 125)">
<use width="30" xlink:href="#staff"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-1"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-2"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-3"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-4"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-5"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-6"></use>
</g>
<text x="150" y="238" class="cf-text-middle">G<tspan baseline-shift="super">b</tspan></text>
<text x="150" y="207" class="cf-text-inner">D<tspan baseline-shift="super">#</tspan>m</text>
<g class="cf-arcs">
<path d="M75.000,279.90A150,150,0,0,1,18.807,222.72L62.538,198.48A100,100,0,0,0,100.00,236.60Z"></path>
<path d="M100.00,236.60A100,100,0,0,1,62.538,198.48L88.777,183.94A70,70,0,0,0,115.00,210.62Z"></path>
<path d="M115.00,210.62A70,70,0,0,1,88.777,183.94L115.02,169.39A40,40,0,0,0,130.00,184.64Z"></path>
</g>
<g transform="translate(72.50000000000003, 108.25317547305485)">
<use width="30" xlink:href="#staff"></use>
<use width="2" xlink:href="#flat" class="cf-flat-1"></use>
<use width="2" xlink:href="#flat" class="cf-flat-2"></use>
<use width="2" xlink:href="#flat" class="cf-flat-3"></use>
<use width="2" xlink:href="#flat" class="cf-flat-4"></use>
<use width="2" xlink:href="#flat" class="cf-flat-5"></use>
</g>
<text x="107.50000000000003" y="226.6121593216773" class="cf-text-middle">D<tspan baseline-shift="super">b</tspan></text>
<text x="122.50000000000001" y="199.63139720814414" class="cf-text-inner">B<tspan baseline-shift="super">b</tspan>m</text>
<g class="cf-arcs">
<path d="M20.096,225.00A150,150,0,0,1,0.022846,147.38L50.015,148.25A100,100,0,0,0,63.397,200.00Z"></path>
<path d="M63.397,200.00A100,100,0,0,1,50.015,148.25L80.011,148.78A70,70,0,0,0,89.378,185.00Z"></path>
<path d="M89.378,185.00A70,70,0,0,1,80.011,148.78L110.01,149.30A40,40,0,0,0,115.36,170.00Z"></path>
</g>
<g transform="translate(26.74682452694516, 62.5)">
<use width="30" xlink:href="#staff"></use>
<use width="2" xlink:href="#flat" class="cf-flat-1"></use>
<use width="2" xlink:href="#flat" class="cf-flat-2"></use>
<use width="2" xlink:href="#flat" class="cf-flat-3"></use>
<use width="2" xlink:href="#flat" class="cf-flat-4"></use>
</g>
<text x="76.3878406783227" y="195.5" class="cf-text-middle">A<tspan baseline-shift="super">b</tspan></text>
<text x="102.36860279185586" y="179.5" class="cf-text-inner">Fm</text>
<g class="cf-arcs">
<path d="M0.0000,150.00A150,150,0,0,1,21.425,72.744L64.283,98.496A100,100,0,0,0,50.000,150.00Z"></path>
<path d="M50.000,150.00A100,100,0,0,1,64.283,98.496L89.998,113.95A70,70,0,0,0,80.000,150.00Z"></path>
<path d="M80.000,150.00A70,70,0,0,1,89.998,113.95L115.71,129.40A40,40,0,0,0,110.00,150.00Z"></path>
</g>
<g transform="translate(10, 2.842170943040401e-14)">
<use width="30" xlink:href="#staff"></use>
<use width="2" xlink:href="#flat" class="cf-flat-1"></use>
<use width="2" xlink:href="#flat" class="cf-flat-2"></use>
<use width="2" xlink:href="#flat" class="cf-flat-3"></use>
</g>
<text x="65" y="153" class="cf-text-middle">E<tspan baseline-shift="super">b</tspan></text>
<text x="95" y="152" class="cf-text-inner">Cm</text>
<g class="cf-arcs">
<path d="M20.096,75.000A150,150,0,0,1,77.279,18.807L101.52,62.538A100,100,0,0,0,63.397,100.00Z"></path>
<path d="M63.397,100.00A100,100,0,0,1,101.52,62.538L116.06,88.777A70,70,0,0,0,89.378,115.00Z"></path>
<path d="M89.378,115.00A70,70,0,0,1,116.06,88.777L130.61,115.02A40,40,0,0,0,115.36,130.00Z"></path>
</g>
<g transform="translate(26.746824526945176, -62.500000000000014)">
<use width="30" xlink:href="#staff"></use>
<use width="2" xlink:href="#flat" class="cf-flat-1"></use>
<use width="2" xlink:href="#flat" class="cf-flat-2"></use>
</g>
<text x="76.38784067832272" y="110.5" class="cf-text-middle">B<tspan baseline-shift="super">b</tspan></text>
<text x="102.36860279185588" y="124.5" class="cf-text-inner">Gm</text>
<g class="cf-arcs">
<path d="M75.000,20.096A150,150,0,0,1,152.62,0.022846L151.75,50.015A100,100,0,0,0,100.00,63.397Z"></path>
<path d="M100.00,63.397A100,100,0,0,1,151.75,50.015L151.22,80.011A70,70,0,0,0,115.00,89.378Z"></path>
<path d="M115.00,89.378A70,70,0,0,1,151.22,80.011L150.70,110.01A40,40,0,0,0,130.00,115.36Z"></path>
</g>
<g transform="translate(72.49999999999994, -108.25317547305481)">
<use width="30" xlink:href="#staff"></use>
<use width="2" xlink:href="#flat" class="cf-flat-1"></use>
</g>
<text x="107.49999999999997" y="79.38784067832273" class="cf-text-middle">F</text>
<text x="122.49999999999997" y="104.36860279185589" class="cf-text-inner">Dm</text>
<g class="cf-arcs">
<path d="M150.00,0.0000A150,150,0,0,1,227.26,21.425L201.50,64.283A100,100,0,0,0,150.00,50.000Z"></path>
<path d="M150.00,50.000A100,100,0,0,1,201.50,64.283L186.05,89.998A70,70,0,0,0,150.00,80.000Z"></path>
<path d="M150.00,80.000A70,70,0,0,1,186.05,89.998L170.60,115.71A40,40,0,0,0,150.00,110.00Z"></path>
</g>
<g transform="translate(134.99999999999997, -125)">
<use width="30" xlink:href="#staff"></use>
</g>
<text x="149.99999999999997" y="68" class="cf-text-middle">C</text>
<text x="150" y="97" class="cf-text-inner">Am</text>
<g class="cf-arcs">
<path d="M225.00,20.096A150,150,0,0,1,281.19,77.279L237.46,101.52A100,100,0,0,0,200.00,63.397Z"></path>
<path d="M200.00,63.397A100,100,0,0,1,237.46,101.52L211.22,116.06A70,70,0,0,0,185.00,89.378Z"></path>
<path d="M185.00,89.378A70,70,0,0,1,211.22,116.06L184.98,130.61A40,40,0,0,0,170.00,115.36Z"></path>
</g>
<g transform="translate(197.5, -108.25317547305482)">
<use width="30" xlink:href="#staff"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-1"></use>
</g>
<text x="192.5" y="79.38784067832272" class="cf-text-middle">G</text>
<text x="177.5" y="104.36860279185588" class="cf-text-inner">Em</text>
<g class="cf-arcs">
<path d="M279.90,75.000A150,150,0,0,1,299.98,152.62L249.98,151.75A100,100,0,0,0,236.60,100.00Z"></path>
<path d="M236.60,100.00A100,100,0,0,1,249.98,151.75L219.99,151.22A70,70,0,0,0,210.62,115.00Z"></path>
<path d="M210.62,115.00A70,70,0,0,1,219.99,151.22L189.99,150.70A40,40,0,0,0,184.64,130.00Z"></path>
</g>
<g transform="translate(243.2531754730548, -62.50000000000006)">
<use width="30" xlink:href="#staff"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-1"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-2"></use>
</g>
<text x="223.61215932167727" y="110.49999999999997" class="cf-text-middle">D</text>
<text x="197.6313972081441" y="124.49999999999997" class="cf-text-inner">Bm</text>
</svg>
<h1><span>Circle of</span> <span>Fifths</span></h1>
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="staff" viewBox="0 0 203.18 132.08">
<path style="stroke:var(--light);stroke-width:1pt;fill:none" d="m89.253 345.53 177.07.72m-175.63 21.24 177.07.72m-176.35 21.05 177.07.72m-178.87 21.5 177.07.72m-176.35 21.06 177.07.72" transform="matrix(1.1144 0 0 1 -96.674 -331.49)"/>
<path fill="var(--light)" transform="matrix(.907 0 0 .91953 -8.112 -4.363)" d="M39.542 140.49c.022 8.47 18.816 7.39 18.753-6.57.025-13.61-17.954-89.748-18.155-104.31-.211-11.556 6.122-24.509 11.548-24.368 4.299.141 8.338 9.873 8.316 21.986.326 39.173-33.981 36.641-33.981 63.409 0 17.303 14.363 21.873 21.545 21.873 24.32-.16 20.239-29.381 4.734-29.381-9.141-.328-17.139 12.076-5.06 22.359-20.403-8.977-9.467-30.685 6.692-30.848 21.545.163 25.299 39.658-6.366 39.828-18.933.16-26.931-16.488-26.768-29.546 0-25.135 37.051-39.662 36.561-60.881 0-13.384-13.873-7.345-14.2 14.201.327 13.384 17.628 84.056 17.465 94.996 0 22.52-28.89 15.18-28.89 3.75.163-16.32 16.975-4.73 11.752-4.24-4.081 7.18-3.946 7.74-3.946 7.74z"/>
<path fill="var(--light)" transform="matrix(.907 0 0 .91953 -8.112 -4.363)" d="M47.37 133.39c0 3.79-3.161 6.87-7.054 6.87s-7.053-3.08-7.053-6.87 3.16-6.86 7.053-6.86 7.054 3.07 7.054 6.86z"/>
</symbol>
<symbol id="sharp" viewBox="0 0 6 19">
<path fill="var(--light)" d="M1.906 12.154V7.45l2-.552v4.68l-2 .576zm3.938-1.138-1.375.394V6.73l1.375-.384V4.402l-1.375.384V.004h-.563v4.927l-2 .575V.856h-.531v4.827L0 6.068v1.948l1.375-.384v4.671L0 12.686v1.94l1.375-.384v4.755h.531v-4.925l2-.55v4.626h.563v-4.8l1.375-.385v-1.947z"/>
</symbol>
<symbol id="flat" viewBox="0 0 .908 2.512">
<path fill="var(--light)" d="m.216 1.696-.004.264v.044c0 .088.004.176.016.264.18-.152.372-.32.372-.556 0-.132-.056-.268-.172-.268-.124 0-.208.12-.212.252zm-.168.716L0 .032A.212.212 0 0 1 .108 0c.036 0 .076.012.108.032l-.028 1.38a.577.577 0 0 1 .364-.136c.208 0 .356.192.356.408 0 .32-.344.468-.588.676-.06.052-.096.152-.18.152-.052 0-.092-.044-.092-.1z"/>
</symbol>
</defs>
</svg>
Here’s the CSS
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
html {
display: grid;
min-block-size: 100%;
}
body {
--h: 348;
--s: 60%;
--l: 52%;
--bg: hsl(var(--h) var(--s) var(--l));
--dark: hsl(var(--h) var(--s) 10%);
--dark-hover: hsl(var(--h) var(--s) 25%);
--light: hsl(var(--h) var(--s) 99%);
--gap: 1.5rem;
background: var(--bg);
display: grid;
height: 100%;
margin: unset;
place-content: center;
padding: var(--gap) unset;
}
h1 {
color: var(--light);
display: flex;
flex-flow: column;
font-family: 'Bebas Neue', cursive;
font-size: clamp(4rem, 1.1429rem + 9.1429vw, 8rem);
line-height: .85;
margin: calc(2 * var(--gap)) auto;
width: 50%;
}
h1 span:last-of-type {
align-self: flex-end;
color: var(--dark);
}
/* Modifiers */
.blue {
--h: 206;
--s: 42%;
--l: 56%;
}
.vintage {
--bg: radial-gradient(hsla(var(--h), var(--s), calc(var(--l) - 1%), .99), hsla(var(--h), var(--s), calc(var(--l) - 5%), .8)),
url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
/* Circle of Ffths */
.cf {
aspect-ratio: 1;
margin-block: var(--gap) 0;
width: calc(85vw - (2 * var(--gap)));
}
.cf-arcs {
transform: rotate(-15deg);
transform-origin: 50% 50%;;
}
.cf-arcs path {
fill: var(--dark);
stroke: hsl(var(--h), var(--s), var(--l));
}
.cf-arcs path:hover {
fill: var(--dark-hover);
}
.cf-text-inner,
.cf-text-middle {
fill: var(--light);
font-family: ui-sans-serif, system-ui, sans-serif;
font-weight: 500;
letter-spacing: -0.065em;
pointer-events: none;
text-anchor: middle;
}
.cf-text-inner {
font-size: .4em;
}
.cf-text-middle {
font-size: .6em;
}
/* Flat and Sharp Positions */
.cf-flat-1 {
transform: translate(10px, -2.5px);
}
.cf-flat-2 {
transform: translate(13px, -7.5px);
}
.cf-flat-3 {
transform: translate(16px, -1px);
}
.cf-flat-4 {
transform: translate(19px, -5.5px);
}
.cf-flat-5{
transform: translate(22px, 1px);
}
.cf-sharp-1 {
transform: translate(10px, -7.5px);
}
.cf-sharp-2 {
transform: translate(13px, -3px);
}
.cf-sharp-3 {
transform: translate(16px, -9px);
}
.cf-sharp-4 {
transform: translate(19px, -4.5px);
}
.cf-sharp-5 {
transform: translate(22px, 0.5px);
}
.cf-sharp-6{
transform: translate(25px, -6px);
}
.cf use {
pointer-events: none;
}
.cf [baseline-shift="super"] {
font-size: 80%;
}
You’ll then have html elements that represent the various parts and you should be able to wire up Wappler actions to them. You’ll probably need to work in code view more than design view to ensure you’re selecting the correct element for adding actions to it.
For example, the <path> element in the code corresponds to the section I have the white arrow pointing at.
Yes, thanks for the tip, but if you look more closely at my wheel template you will see that there are deviations in the amount of slices and the spacing between them and also the color and the whole shape is not what I would like. Furthermore, the first thing I tried to do was somehow integrate this codepens template into my test project, but it just came out as nonsense, I even think that I might not have imported the code correctly, to be honest, I don’t know how to do it correctly…
The whole thing is called no-code or low-code for me it gives a different impression unfortunately 
Even with the help of chatgpt, I couldn’t easily find out where I should import or insert the respective codes in order to achieve an error-free, clean result. for the wheel.
Yeah, it’s like using an electronic keyboard that’s synthesized a bunch of sounds. It makes it easier to make music but you still have to know how to play. 
You’ll get it, it just takes time.
I’ll see if I can get it to work this evening.