I need to build an offline app for the desktop. Any help or better step by step instructions guide for Wappler would be awesome, please!

Ayhan_Khan · December 1, 2023, 5:28pm

Hi guys, i am a complete new beginner.

so this my first post here… please be mellow with me!

I want to build a modern windows desktop offline app for myself.

It should contains multiple clickable button pictures (for music key/chord names ) and when i click each respected button, it should trigger my recorded macro actions for those chords buttons.
So i can than filter out that selected key in the app, to go further!

Imagine kinda interactive decent animated camelot wheel UI, with functional buttons, please see photo below!
I have zero experience with Wappler, coding/scripting etc… but I am fairly familiar with photoshop and other graphic tools.

I read and heared that this offline app could be possible with Wappler without any coding maybe !?
In any case, I need a nudge in the right direction…

so thanks in advance.

kfawcett · December 1, 2023, 5:51pm

Hi @Ayhan_Khan! Offline deskstop apps are totally possible with Wappler. You would need to create a Desktop project and use sqlite or pouchdb as the database. I think your main challenge is going to be with your design and having multiple clickable buttons in a circle. Squares are easy, but that circle will probably require some advanced CSS.

Ayhan_Khan · December 1, 2023, 5:54pm

thanks for yor prompt reply Sir! i am a newbie as you maybe see, i am searching since 1 week the whole internet for a solution, pardon!

kfawcett · December 1, 2023, 5:56pm

If you could make it a “harmonic square” you would make your work a lot easier.

Ayhan_Khan · December 1, 2023, 6:02pm

lol…let’s call it harmonic hexagon for all I care, the main thing is that it works as I imagine it, although it actually looks quite pretty round!

Ayhan_Khan · December 1, 2023, 6:12pm

what about adding premade custom graphic transparent pictures as buttons templates ? (png or similar format)
i have saved this image as a template in photoshop as a psd file with all the associated layers and components, could this perhaps help with the round problem ?

famousmag · December 1, 2023, 6:14pm

Hey @Ayhan_Khan,

Welcome to wappler community.
You just want to play music notes?
I’m wondering… This is the first step of un upcoming recording notes on a timeline (bit rate etc…), making loops and things like that? KInd of fruityloops?

Ayhan_Khan · December 1, 2023, 6:22pm

i want to use it to select certain midi files for my music projects, because i realized that there is no reasonable midi library browser, player etc. on the market, especially if you have a large collection of midi data it makes sense, i think… but the whole thing is still a bit more complicated, so everything is still in beta stage. thanks for the interest by the way, and fruityloops i used to use but it’s been a while : )

kfawcett · December 1, 2023, 6:35pm

Looks like there is already a wheel designed by someone that you might be able to use in your project.

https://www.soulglo.com/camelot-wheel/

Max_Saravia · December 1, 2023, 6:36pm

Hey @Ayhan_Khan Welcome to the Wappler community. Last year, I was tasked with creating a website for a pizzeria, and I recall experimenting with a fun idea designing a pizza with slices resembling buttons. The most effective way to achieve this is by using canvas. I’ve provided a sample and accompanying code for you to try out and explore. Best of luck with your first application using Wappler!

CleanShot 2023-12-01 at 15.29.40

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    canvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas id="pizzaCanvas" width="400" height="400"></canvas>

  <script>
    const canvas = document.getElementById('pizzaCanvas');
    const ctx = canvas.getContext('2d');
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const radius = 150;
    const numSlices = 8;
    const sliceAngle = (2 * Math.PI) / numSlices;

    const sliceStates = new Array(numSlices).fill(false);

    function drawSlice(startAngle, endAngle, color, index) {
      ctx.beginPath();
      ctx.moveTo(centerX, centerY);
      ctx.arc(centerX, centerY, radius, startAngle, endAngle);
      ctx.fillStyle = color;
      ctx.fill();
      ctx.stroke();
      ctx.closePath();
    }

    function handleSliceClick(event) {
      const rect = canvas.getBoundingClientRect();
      const x = event.clientX - rect.left - centerX;
      const y = event.clientY - rect.top - centerY;

      const angle = (Math.atan2(y, x) + 2 * Math.PI) % (2 * Math.PI);
      const sliceIndex = Math.floor(angle / sliceAngle);

      sliceStates[sliceIndex] = !sliceStates[sliceIndex];

      const sliceColor = sliceStates[sliceIndex] ? '#593C8F' : (sliceIndex % 2 === 0 ? '#ffcc00' : '#cc6600');

      drawSlice(sliceIndex * sliceAngle, (sliceIndex + 1) * sliceAngle, sliceColor, sliceIndex);
    }

    function drawPizza() {
      for (let i = 0; i < numSlices; i++) {
        const startAngle = i * sliceAngle;
        const endAngle = (i + 1) * sliceAngle;
        const sliceColor = sliceStates[i] ? '#593C8F' : (i % 2 === 0 ? '#ffcc00' : '#cc6600');

        drawSlice(startAngle, endAngle, sliceColor, i);
      }
    }

    canvas.addEventListener('click', handleSliceClick);

    drawPizza();
  </script>
</body>
</html>

kfawcett · December 1, 2023, 6:36pm

Here’s another repository with a node.js implementation. That might be better to use with Wappler’s desktop app.

Ayhan_Khan · December 1, 2023, 6:41pm

BIG Thanks to all, i am amazed, this forum is really great, and very helpful, what have i done to deserve this?

famousmag · December 1, 2023, 6:43pm

Something like Cubase then?
You talked about midi files that all they are is data specifying the music note.
This data give the information to any instrument to make its sound on the specific music note.
I’m not a musician but been there for a while and I’m sorry I’m stuck on this part… How are you going to assign the data and then create the sequence from them (with a given bit rate, key duration, note velocity etc)

Ayhan_Khan · December 1, 2023, 6:46pm

thanks again for the efforts, but i need a little rest, because i haven’t slept for 2 days, i need to clear my head a little to get back into the material, but you are welcome to post your ideas or suggestions here, as i said i’m out… see ya soon!

Ayhan_Khan · December 9, 2023, 3:04pm

hello, I am testing wappler for desktop app but getting an error when i hit run.

how can I fix this issue ?

Ayhan_Khan · December 9, 2023, 3:17pm

btw. i followed this tutorial “Creating Desktop Apps” https://docs.wappler.io/t/creating-desktop-apps/10649#Debugging-Apps to create an offlne desktop app.

and here are my settings under “projects options” in wappler.

franse · December 9, 2023, 3:45pm

What about updating electron?

Also node packages

And a system check

Ayhan_Khan · December 9, 2023, 3:57pm

Hey thanks for reply!

here are the results when i follow your suggestions…

when i update electron, it says:

when i update node packages, it says:

Ayhan_Khan · December 9, 2023, 3:59pm

And System Check is everything ok so far!

franse · December 9, 2023, 4:05pm

Can you recreate this project without spaces on folders name? I see “Wappler Projects” and “Harmonic Wheel Project”

Recreate it and don’t just rename it, because renaming won’t edit some dependencies