attach texture to dxDrawCircle

[marcelluss]

Hello, I ran into a problem with the dxDrawCircle function, I have a shader that allows you to apply a gradient to a texture, but the problem is that I need to make a gradient to a level system where there is a round strip with a gradient and I would like to attach a gradient there, but the problem is that dxDrawCircle does not accept a texture and I would like to somehow attach it there, or if possible, help me!

[Mkl]

Hi,

If I understand you are trying to create a circle path with a gradient ?

I don't have an example to do it with DX functions and shaders but I figured out it's possible with SVG so I share it :

<svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
  
  <defs>
    <linearGradient id="gradient">
      <stop offset="5%" stop-color="#FF0000" />
      <stop offset="95%" stop-color="#00FF00" />
    </linearGradient>
  </defs>
  
<path id="progress" fill="none" stroke="url(#gradient)" d="M300,50 A250,250,0,1,1,299.99,50" stroke-width="20" />
      
</svg>

You can check this example via simulator : https://www.svgviewer.dev/

I'm not sure I helped you.

Good evening

[marcelluss]

15 hours ago, Mkl said:

Hi,

If I understand you are trying to create a circle path with a gradient ?

I don't have an example to do it with DX functions and shaders but I figured out it's possible with SVG so I share it :

<svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
  
  <defs>
    <linearGradient id="gradient">
      <stop offset="5%" stop-color="#FF0000" />
      <stop offset="95%" stop-color="#00FF00" />
    </linearGradient>
  </defs>
  
<path id="progress" fill="none" stroke="url(#gradient)" d="M300,50 A250,250,0,1,1,299.99,50" stroke-width="20" />
      
</svg>

You can check this example via simulator : https://www.svgviewer.dev/

I'm not sure I helped you.

Good evening

hello, I really liked your idea with the work of svg, is it possible to find out how to make the progress of reducing the strip in the svg code?

[Mkl]

Like a percentage progress ? Yes it's possible. You have to update the SVG using svgGetDocumentXML and svgSetDocumentXML (check example on the wiki). I found a way to draw the circle regarding percentage progress with this function :

 

local function updateState(value, total, R)

    local center
    local alpha = 360 / total * value
    local a = (90 - alpha) * math.pi / 180
    local x = 300 + R * math.cos(a)
    local y = 300 - R * math.sin(a)
    local path

    if (total == value) then
        path = "M300,"..(300 - R).." A"..R..","..R..",0,1,1,299.99,"..(300 - R)
    else
        if (alpha > 180) then
            center = 1
        else
            center = 0
        end
        path = "M300,"..(300 - R).." A"..R..","..R..",0,"..center..",1,"..x..","..y
    end
    return path
end

source : https://stackoverflow.com/questions/5230148/create-svg-progress-circle

[marcelluss]

3 hours ago, Mkl said:

Like a percentage progress ? Yes it's possible. You have to update the SVG using svgGetDocumentXML and svgSetDocumentXML (check example on the wiki). I found a way to draw the circle regarding percentage progress with this function :

 

local function updateState(value, total, R)

    local center
    local alpha = 360 / total * value
    local a = (90 - alpha) * math.pi / 180
    local x = 300 + R * math.cos(a)
    local y = 300 - R * math.sin(a)
    local path

    if (total == value) then
        path = "M300,"..(300 - R).." A"..R..","..R..",0,1,1,299.99,"..(300 - R)
    else
        if (alpha > 180) then
            center = 1
        else
            center = 0
        end
        path = "M300,"..(300 - R).." A"..R..","..R..",0,"..center..",1,"..x..","..y
    end
    return path
end

source : https://stackoverflow.com/questions/5230148/create-svg-progress-circle

I tried to use this function, but unfortunately I didn't quite understand how to use it :(((
 

local rawSvgData = [[
    <svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
  
    <defs>
      <linearGradient id="gradient">
        <stop offset="5%" stop-color="#FF0000" />
        <stop offset="95%" stop-color="#00FF00" />
      </linearGradient>
    </defs>
    
  <path id="progress" fill="none" stroke="url(#gradient)" d="M300,50 A250,250,0,1,1,299.99,50" stroke-width="20" />
        
  </svg>
]]

local svgs = {}

local function render(svg)
    if (not isElement(svg)) or (getElementType(svg) ~= "svg") then
        removeEventHandler("onClientRender", root, svgs[svg].handler)
        svgs[svg] = nil
    end

    local width, height = svgGetSize(svg)
    dxDrawImage(500, 500, 430, 430, svg, 0, 0, 0, tocolor(255, 255, 255), false)
end

local function onUpdate(svg)
    print("fe")
    if (not svgs[svg]) then
        svgs[svg] = {
            state = true,
            handler = function()
                render(svg)
            end
        }

        addEventHandler("onClientRender", root, svgs[svg].handler)
    end

    iprint("SVG texture updated", svg, getTickCount())
end

addEventHandler("onClientResourceStart", root, function()
    mySvg = svgCreate(430, 430, rawSvgData, onUpdate)
end)

bindKey("l", "down", function()
    local newPath = updateState(100, 100, 300);
    addSVGRectNode(mySvg, path)
end)


function addSVGRectNode(svg, path)
    local svgXML = svgGetDocumentXML(svg)
    
    local rect = xmlCreateChild(svgXML, "rect")

    xmlNodeSetAttribute(rect, "d", path)
    
    local status = svgSetDocumentXML(svg, svgXML)
    print(status)
end

function updateState(value, total, R)

    local center
    local alpha = 360 / total * value
    local a = (90 - alpha) * math.pi / 180
    local x = 300 + R * math.cos(a)
    local y = 300 - R * math.sin(a)
    local path

    if (total == value) then
        path = "M300,"..(300 - R).." A"..R..","..R..",0,1,1,299.99,"..(300 - R)
    else
        if (alpha > 180) then
            center = 1
        else
            center = 0
        end
        path = "M300,"..(300 - R).." A"..R..","..R..",0,"..center..",1,"..x..","..y
    end
    return path
end

The problem is that for some reason I can't change the source data of the svg file already (I tried to do as you said, well, for some reason it doesn't work) - besides, I didn't quite understand working with the arguments of this function, let's say I tried to manually call the function and replace the arguments the same as from the debug, but this it didn't work quite correctly, maybe I didn't quite understand the principle of these arguments of this function, what is responsible for what.
Please help me

[Mkl]

It is  updateState(value, total, radius), like updateState(50, 100, 250) should give half a circle. It could be edited to remove radius param in our case.

This is the way I update the svg : 

local function setProgress(value)

    local svgXML = svgGetDocumentXML(mySvg) -- get xml 
    local path = xmlNodeGetChildren(svgXML, 1) -- get path node (second node, following first example I gave)

    xmlNodeSetAttribute(path, "d", updateState(value, 100, 250)) -- editing the attribute
    svgSetDocumentXML(mySvg, svgXML) -- saving

end

You could imagine a command to test it like :

local function startDemo()
    local value = 0
    setTimer(function()
        value = value + 1
        setProgress(value)
    end, 10, 100)
end
addCommandHandler("demo", startDemo)

A little animation 0 to 100 % of the circle progress.

[marcelluss]

On 28/05/2022 at 01:07, Mkl said:

It is  updateState(value, total, radius), like updateState(50, 100, 250) should give half a circle. It could be edited to remove radius param in our case.

This is the way I update the svg : 

local function setProgress(value)

    local svgXML = svgGetDocumentXML(mySvg) -- get xml 
    local path = xmlNodeGetChildren(svgXML, 1) -- get path node (second node, following first example I gave)

    xmlNodeSetAttribute(path, "d", updateState(value, 100, 250)) -- editing the attribute
    svgSetDocumentXML(mySvg, svgXML) -- saving

end

You could imagine a command to test it like :

local function startDemo()
    local value = 0
    setTimer(function()
        value = value + 1
        setProgress(value)
    end, 10, 100)
end
addCommandHandler("demo", startDemo)

A little animation 0 to 100 % of the circle progress.

thank you very much