UI Menu

I was trying to design a project, for fun, that basically shows the temperature, humidity, lights and other stuff from sensors in a nice looking menu. I need some help on the menu scrolling, I had an idea but it is unreliable so if anyone can help, thanks.

How are you getting all the information into the program. Can you post what you have so far.

Yep, The UI right now is bad but I have to have functionality before looks, I have nothing towards the actual strings for temperature and other things.

Yes everything is a little messy I just started.

Code:

displayMode(FULLSCREEN_NO_BUTTONS)
-- Use this function to perform your initial setup
function setup()
    backx = 50
    backy = HEIGHT-50
    bgrect = HEIGHT/1.2-20
    x = WIDTH/2
    y = HEIGHT/2
    ty = 0
end

-- This function gets called once every frame
function draw()
    -- This sets a dark background color 
    background(0,0,10)

    -- This sets the line thickness
    strokeWidth(0)
    sprite("Project:Back",backx,backy+ty)
    stroke(0, 0, 0, 255)
    strokeWidth(0)
    --line(0,,HEIGHT)
    fill(30,30,40)
    rect(30,HEIGHT-165+ty,240,70+ty)
    fontSize(20)
    fill(175, 127, 127, 255)
    text(ty,WIDTH/2,HEIGHT/2)
    text("Temperature:",135,HEIGHT/1.2+ty)
    if gettemp == true then
    fill(46, 255, 0, 255)
    else
    fill()
        ellipse(60,HEIGHT/1.2+ty,15)
end

    function touched(touch)
    if touch.state == MOVING then
        x = touch.x
    end
    if touch.tapCount == 1 then
        if touch.x >= 25 and touch.x<= 50+74 and touch.y<= HEIGHT-25+ty and touch.y>= HEIGHT-50+ty then
            if touch.state == ENDED then
                close()
            end
        end
    end
    if touch.state == MOVING then
        ty = touch.y/3
     end
end
end

Not sure what you’re trying to do, but here’s something that might get you started. Slide your finger up/down the screen to change the temperature. If this doesn’t help, give a better explanation of what you want to happen.

function setup()
    rectMode(CENTER)
    temp=0
end

function draw()
    background(40, 40, 50)
    fill(255)
    rect(100,700,100,50)
    fill(255,0,0)
    text(temp,100,700)
    fill(255, 215, 0, 255)
    text("Temperature",100,740)
end

function touched(t)
    if t.state==MOVING then
        temp=temp+t.deltaY/5
    end
end

Thank you, I was trying to make something that you can scroll down with like a webpage, but I fixed up my code and basically am fitting everything on one screen, if I can’t then I will figure something out. I got my temperature display up and humidity using “http.request”. Thank you so much for the help and such a quick response, the staff here is incredible.

@SaladFingers Glad to hear you got things working. The staff that you’re referring to are just users like yourself. It’s just that we’ve been here longer and want to help new users understand how to write code. Maybe one day you’ll be the staff.

@SaladFingers If you need to scroll the screen, here’s an example.

displayMode(FULLSCREEN)

function setup()
    dx,dy=0,0
    fill(255)
end

function draw()
    background(0)
    text("Slide your finger right/left/up/down to scroll. \
Double tap to re-center.",WIDTH/2+dx,HEIGHT/2+dy)
end

function touched(t)
    if t.state==BEGAN and t.tapCount==2 then
        dx,dy=0,0
    elseif t.state==MOVING then
        dx=dx+t.deltaX
        dy=dy+t.deltaY
    end
end

Thanks, new problem. Here’s the url I’m fetching data from (I put xX’s in so you or anyone else can’t turn on and off my lights) http://veraplus:XXXX/data_request?id=action&output_format=xml&DeviceNum=25&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0 As you can see the last number is 0 which is the light “level” if you will, 0 is off, 50 is half brightness and 100 is full brightness. So how would I be able to change this with a parameter, sorry for my novice questions I am self teaching this language.

Nevermind just figured it out