How to stretch out an EditableImage?

Help and Feedback Scripting Support
,
1

I’m trying to make a patient monitor in Roblox using EditableImages. I have a value which simulates the QRS complex of a human heartbeat, and the EditableImage draws lines according to the value (-1 to 1).

https://gyazo.com/9658ad0a83a3c49dd39cd4f4c5dd81ac

Currently, it shows too many heartbeats and it looks really squished. I want to “stretch” it out and show more heartbeats, sort of like this:

image
image699×470 41.4 KB

This is the script that handles the EditableImage

local asset = game:GetService("AssetService")
local ei = asset:CreateEditableImage(
	{
		Size = Vector2.new(
			400,400
		)
	}
)

game:GetService("CollectionService"):GetTagged("drawing")[1].ImageContent = Content.fromObject(ei)
local valueIndex = workspace:WaitForChild("Value")

local lastY = 300

wait(1)

local blankStrip = ei:ReadPixelsBuffer(
	Vector2.new(0, 0),
	Vector2.new(
		1, 400
	)
)

wait(1)

while wait() do
	ei:WritePixelsBuffer(Vector2.new(0, 0), Vector2.new(1, 400), blankStrip)
	
	for i = 3, 399 do
		local clampedValue = math.clamp((valueIndex.Value * 200), -1, 1)
		
		ei:WritePixelsBuffer(Vector2.new(i, 0), Vector2.new(1, 400), blankStrip)
		
		ei:DrawLine(
			Vector2.new(i-2, lastY),
			Vector2.new(i-1, 200 - (valueIndex.Value * 200)),
			Color3.fromRGB(255, 255, 255),
			0,
			Enum.ImageCombineType.Overwrite
		)
		
		lastY = 200 - (valueIndex.Value * 200)
		wait()
	end
end