Hur importera noter till Bolt.ai? (kan ej programmera)

2025-04-27, 09:33 #13

Medlem

Reg: Jul 2005

Inlägg: 16 144

Citat:

Ursprungligen postat av Jim-David

Hej igen. Tack för att ni båda försöker. Jag gav upp på bolt.new och har sagt upp abonnemanget. Testar i stället bygga ut UI:en med Bubble och ser om det därifrån kan bli en webbapp som jag sedan deployar genom Supabase tänker jag mig.

Vad gäller noter menar jag grafiska element. Det bästa verkar vara om jag kan hitta SVG-filer som jag tror är vektorer som man enkelt kan skala upp och ner i storlek så de passa in i min app. Jag behöver alltså fotfarande importera grafiska element som är helnot, 1/8-delsnot, 1/4-not osv. Behöver även utsmyckningsnot som ett element och några andra specialnoter. Kollar runt på https://www.smufl.org/fonts/ etc för att hitta noter som en font man kan importera och använda i appen.

Ok, det handlar alltså om den grafiska representationen av noter. Spontant skulle jag ha använt en canvas för att rita dom snarare än försöka med HTML/CSS.

Jag hittade en OTF-font på dem hemsida som du länkade till. Nu använde jag Löve2D för att test-rendera dessa, men det var inga konstigheter (ChatGPT-assisterat). Fonten (Sebastian.otf) sparas i samma fil som main.lua:

main.lua

Kod:

local utf8 = require("utf8")

local font
local startChar = 65 -- Starting codepoint (A)'
local charsPerRow = 8
local charSize = 32 -- Font size
local charSpacing = 40
local xOffset = 10
local yOffset = 40
local xSpacing = 80
local ySpacing = 80


function love.load()
    font = love.graphics.newFont("Sebastian.otf", charSize) -- <- Put your font file here
    uiFont = love.graphics.newFont(14) -- a small readable font
end

function love.update(dt)
    -- Optional: scroll with arrow keys
    if love.keyboard.isDown("up") then
        startChar = math.max(0, startChar - 1)
    elseif love.keyboard.isDown("down") then
        startChar = math.min(1114111, startChar + 1) -- Unicode range
    end
end

function love.draw()
    love.graphics.setFont(uiFont)
    love.graphics.print("Starting at codepoint: " .. startChar, 10, 10)

    love.graphics.setFont(font)
    for i = 0, 127 do -- 128 characters on screen
        local codepoint = startChar + i
        local x = xOffset + (i % charsPerRow) * xSpacing
        local y = yOffset + math.floor(i / charsPerRow) * ySpacing
        local character = utf8.char(codepoint)
        love.graphics.print(character, x, y)
    end
end

__________________
Senast redigerad av Enterprise 2025-04-27 kl. 10:01.

Citera

2025-04-27, 10:05 #14

Medlem

Reg: Jul 2005

Inlägg: 16 144

En sak som ChatGPT gör bra är att blixtsnabbt omvandla mellan olika språk (så länge som det är relativt enkla grejer).
Här kommer en HTML version som du kan testa:
Jag slängde också upp den som en JSFiddle som du kan köra direkt: https://jsfiddle.net/ek2umva6/

Kod:


<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Font Scroller</title>

  <style>

    body {

      margin: 0;

      overflow: hidden;

      background-color: #111;

      color: white;

      font-family: sans-serif;

    }

    #info {

      position: absolute;

      top: 10px;

      left: 10px;

      font-size: 14px;

      z-index: 10;

    }

    canvas {

      display: block;

    }

  </style>

</head>

<body>

  <div id="info">Starting at codepoint: 65</div>

  <canvas id="canvas"></canvas>



  <script>

    const canvas = document.getElementById('canvas');

    const ctx = canvas.getContext('2d');

    const info = document.getElementById('info');



    // Settings

    let startChar = 65; // 'A'

    const charsPerRow = 8;

    const charSize = 32;

    const charSpacing = 40;

    const xOffset = 10;

    const yOffset = 40;

    const xSpacing = 80;

    const ySpacing = 80;

    const charactersToDraw = 128;

    const fontFile = 'Sebastian.otf'; // Your OTF file



    // Load the font

    const font = new FontFace('Sebastian', `url(${fontFile})`);

    font.load().then(function(loadedFont) {

      document.fonts.add(loadedFont);

      draw();

    }).catch(function(error) {

      console.error('Font failed to load:', error);

    });



    function resizeCanvas() {

      canvas.width = window.innerWidth;

      canvas.height = window.innerHeight;

    }



    window.addEventListener('resize', resizeCanvas);

    resizeCanvas();



    function draw() {

      ctx.clearRect(0, 0, canvas.width, canvas.height);



      // Info font

      ctx.font = '14px sans-serif';

      ctx.fillStyle = 'white';

      info.textContent = 'Starting at codepoint: ' + startChar;



      // Drawing characters

      ctx.font = `${charSize}px Sebastian`;

      for (let i = 0; i < charactersToDraw; i++) {

        const codepoint = startChar + i;

        const x = xOffset + (i % charsPerRow) * xSpacing;

        const y = yOffset + Math.floor(i / charsPerRow) * ySpacing;

        const character = String.fromCodePoint(codepoint);

        ctx.fillText(character, x, y);

      }

    }



    // Handle key presses

    window.addEventListener('keydown', function(e) {

      if (e.key === 'ArrowUp') {

        startChar = Math.max(0, startChar - 1);

        draw();

      } else if (e.key === 'ArrowDown') {

        startChar = Math.min(0x10FFFF, startChar + 1); // Unicode max

        draw();

      }

    });

  </script>

</body>

</html>

__________________
Senast redigerad av Enterprise 2025-04-27 kl. 10:22.

Citera

2025-05-17, 19:27 #15

Medlem

Reg: Aug 2022

Inlägg: 181

ledsen för dröjsmålet - stort tack fór era svar, det blir till att testa inom kort!! Återkommer.

Citera

Hur importera noter till Bolt.ai? (kan ej programmera)

Skapa ett konto eller logga in för att kommentera

Skapa ett konto

Logga in