A basic question

A basic question from an absolutely beginner:
I have in mind a project: an images database with

  • a main vertically scrolling window (where to show an a .jpeg or a .pdf and with the possibility to add text as comment of the object … sometime more than 40/50 lines)
  • many orrizontally scrolling “time line bars” (a series - 10 or even more - of rectangular frames in which will appear thumbnails of the .jpeg or .pdf from where to choose the item to show in the main window; the “time lines” have to scroll orrizontally as they’ll be tipically fisically more extended than the screen of the iPad)
    All in all something graphically and functionally very similar to the BBCNews app (even if it’s function will be quite different).
    My question : can something like that be realized using Codea? If not, do you think that it’ll be possible tu realize it using Lua?
    Thank you for a kind reply
    Luger

(PS… I’m not a “native English speaker”… please forgive my poor prose and the spelling mistakes … :wink: tks )

i think so, and it shouldn’t be hard, but you may need to create thumbnails for all the pictures in advance

Tks Ignatz, very kind!!! yes, of course I’ll prepare all the thumbnails in advance. Do you think that I may find somewhere a template of the app, sort of, to adapt to my pourposes? Thank you again! :slight_smile:
luger

We have some UI classes around here, e.g. “Cider”, where you can create windows, buttons and stuff like that. So this might be a good starting point…

Thank you again … now I have to start to learn :wink: … I hope it’ll not be too hard … I think I’ll be a “regular customer” of this forum :wink:

Basic question, Does Codea allow the use of maps? I have in mind a more advanced app that would require this option (among others).
Thanks,
a new user…

Currently you have to do it yourself, I played around with some code that downloaded tiles from google maps.

http://vimeo.com/49894669

.@luger my ‘windows’ library was made to build such apps in a couple days. It just lacks the scroll. If you are interested i’ll make the upgrade this weekend and built a sample app like you want with it. You’ll then customize it the way you want and will add the special behavior you need. Interested?

@Jmv38 tkank you but, indeed, I still have to do the basic project… like to say I don’t yet actually know “what I want and what I need” … and I really wish to start learning Codea and Lua. Aniway, yes I may be interested

@gkcdrake @tnlogy me too I’m interested (for a different project, not for the one I talked before) to be able to use maps … but in the fully interactive way :wink: … will it be possible?

hi @luger. You sounded so disappointed i did something for you: i have added the 2 projects to my site with the library included so now you just have to load the project, run it, restart it and the application will run. But you still have to learn to program Codea if you want to do your things. Good luck, welcome on board!
http://jmv38.comze.com/CODEAbis/server.php

Hi luger
Here is the output after a couple hours:

image.

I have not optimized the size and colors: that’s your business! I have left the window bars visible so you can see their names, but you can mask them. You can also remove the frame borders if you want (make them transparent).
The example is functionnal: when you click a thumb image, this image is loaded from the web and displayed in the big window. The left and right buttons move you thumbs to next series. I have put only 8 images on my site, just to demonstrate the concept.
I have not implemented the swipe gesture yet: it is more complex, not for the swipe, but for how much memory i want to let the library take (masked images have to be loaded anyway so they take memory).

Is this what you wanted?

My library has to get a few corrections: the one included in the code below, plus a few things dont behave exactly as they should (printing buttons doesnt seem to print in columns, while they should as text and images)

Here is the code (less than 100 lines in the main to build such an interface: not so bad? :slight_smile: )


--# Main
-- WindowsSample01


-- Main

displayMode(FULLSCREEN)

function setup()
    windows = Windows()

    winImage = windows:get("big_image")
    winText = windows:get("text")
    winThumbs = windows:get("thumbs")
    
    leftButton = WindowButton("<<",shiftToLeft)
    windows:get("left"):print("\
 \
 ")
    windows:get("left"):print(leftButton)
    
    rightButton = WindowButton(">>",shiftToRight)
    windows:get("right"):print("\
 \
 ")
    windows:get("right"):print(rightButton)
    
    str = imageNames()
    index = 1
 --   askImageToInternet(str[1])
    updateThumbs()
end

function shiftToLeft()
    index = index-4
    if index<1 then index=1 end
    updateThumbs()
end
function shiftToRight()
    index = index+4
    if index>5 then index=5 end
    updateThumbs()
end
function askImageToInternet(txt)
    http.request(txt,function(img) toDoWhenImageIsReceived(img,txt) end)
end

function toDoWhenImageIsReceived(img,txt)
    winImage:clear()
    winImage:print(img)
    
    winText:clear()
    winText:print("this is the mage name:")
    winText:print(txt)
    winText:print("and this is my comment")
end

function updateThumbs()
    local txt
    winThumbs:clear()
    winThumbs.columns=4
    for i=0,3 do 
        local txt = str[ i + index ]
        http.request(txt,  function(img) toDoWhenThumbIsReceived(img,txt)  end )
    end
end

function toDoWhenThumbIsReceived(img,txt)
    winThumbs.framePrinter:add(img,function() toDoWhenThumbIsTouched(txt) end)
end

function toDoWhenThumbIsTouched(txt)
    askImageToInternet(txt)
end

function imageNames()
    local names = {}
    for i=1,8 do 
        names[i] = "http://jmv38.net23.net/house/pano01-".. tostring(i) ..".jpg"
    end
    return names
end

function draw()
    background(109, 109, 109, 255)
    -- put your drawing before this line
    if windows then windows:draw() end
end

function touched(touch)
    if windows then touch = windows:touched(touch) end
    if not touch then return end
    -- put your touch after this line
end






--# WindowsLoadClass1
-- this is just a starter, you can suppress this tab when the automatic one is created
    
function Windows:loadAllWindows()
    self.autoSaveDisabled = false
    local win=Window(
    {
        disabled=true,
        name='message',
        height=390,
        fontSize=20,
        left=330,
        Halign='justified',
        columns=1,
        width=480,
        top=150,
        Valign='center',
        parent = self
    } 
)
    table.insert(self.winList,win)
    local win=Window(
    {
        name='big_image',
        height=450,left=90,width=510,top=30,
        parent = self
    } 
)
    table.insert(self.winList,win)
    local win=Window(
    {
        name='text',
        height=450,left=600,width=330,top=30,
        parent = self
    } 
)
    table.insert(self.winList,win)
    local win=Window(
    {
        disabled=true,
        name='Tutorial',
        parent = self
    } 
)
    table.insert(self.winList,win)
    local win=Window(
    {
        name='right',
        height=240,
        left=840,
        Halign='center',
        Valign='center',
        columns=1,
        width=90,
        top=480,
        parent = self
    } 
)
    table.insert(self.winList,win)
    local win=Window(
    {
        name='left',
        height=240,
        left=90,
        Halign='center',
        Valign='center',
        columns=1,
        width=90,
        top=480,
        parent = self
    } 
)
    table.insert(self.winList,win)
    local win=Window(
    {
        name='thumbs',
        height=240,
        left=180,
        Halign='justified',
        columns=4,
        width=660,
        top=480,
        parent = self
    } 
)
    table.insert(self.winList,win)
end
--# CorrectionToMyLibrary
-- dont look at this part, it is a modification that has to be made in my lib
-- is made automatically, you heve nothing to do
function WindowPrnObject:create()
    local v = self.data
    local typ = self:typeOf(v)
    self.type = typ

    local img 
    if     typ == "string" then img = self:strToImg(v)
    elseif typ == "image"  then img = self:imgToImg(v)
    elseif typ == "button" then img = self:butToImg(v)
    else                        img = self:strToImg(tostring(v))
    end

    self.img = img
    self.height = img.height
    self.width = img.width
    
    -- management of touchable objects
    local callback = self.callback
    if typ == "button" then 
        self.txt = v.txt
        self.imgOn = v.imgOn
        self.imgOff = v.imgOff
        callback = v.callback
    elseif callback then
        self.txt = v
        self.imgOn = img
        self.imgOff = img
        self.tintDark = false
    end
    if typ == "button" or callback then 
        self.dx = self.width/2
        self.dy = self.height/2
        self.cx = self.left + self.dx
        self.cy = self.top + self.dy
        self.name = self.name .. "-" .. tostring(self.txt)
        self:registerTouchableObject()
        self.callback = function()
            self.img = self.imgOn
            if self.tintDark~= nil then self.tintDark = true end
            self.timers:add(0.3, -- delay so the display can change visibly
                function()
                    callback(self.txt)
                    self.img = self.imgOff
                    if self.tintDark~= nil then self.tintDark = false end
                end,
                self.name)                
        end
    end
    if obj~= self then return obj end
    
end

Concerning maps: i’ll post an example when my ipad is recharged. It will just take 1/4 hour to write.

Don’t forget to include StreetView! :wink:

Ha ha ha … :wink:
Actually, if you can give me the api syntax, i might be able to put it in!

Ok this is not streetview, it is just to show what is possible very quickly:
image

It is a small functionnal prototype: the buttons work.
I stole the google api syntax from someone’s post here some months agos (ruilov maybe?).
The code: (you must put my library as a dependancy for this to work).


--# Main
-- WindowsSample01


-- Main

displayMode(FULLSCREEN)

function setup()
    windows = Windows()
    windows:get("Tutorial"):setDisabled(true)
    winImage = windows:get("big_image")
    winDir = windows:get("directions")
    
    y,x = 48.87392 , 2.29536 
    askImageToInternet()

    leftButton = WindowButton("<<",shiftToLeft)
    rightButton = WindowButton(">>",shiftToRight)
    topButton = WindowButton(" ? ",shiftToTop)
    botButton = WindowButton(" ? ",shiftToBot)
    winDir:print(" ")
    winDir:print(topButton)
    winDir:print(" ")
    winDir:print(leftButton)
    winDir:print(" ")
    winDir:print(rightButton)
    winDir:print(" ")
    winDir:print(botButton)
    winDir:print(" ")
end

function shiftToLeft()
    x=x-0.0003
    askImageToInternet()
end
function shiftToRight()
    x=x+0.0003
    askImageToInternet()
end
function shiftToBot()
    y=y-0.0003
    askImageToInternet()
end
function shiftToTop()
    y=y+0.0003
    askImageToInternet()
end

function askImageToInternet()

    local str0 =  'http://maps.googleapis.com/maps/api/staticmap?'
    local str1 = 'center='..tostring(y)..','..tostring(x)
    local str2 = '&zoom=20&size=600x600&maptype=satellite&sensor=false'
    local txt = str0..str1..str2
    http.request(txt,function(img) toDoWhenImageIsReceived(img,txt) end)
end

function toDoWhenImageIsReceived(img,txt)
    winImage:clear()
    winImage:print(img)
end

function draw()
    background(109, 109, 109, 255)
    -- put your drawing before this line
    if windows then windows:draw() end
end

function touched(touch)
    if windows then touch = windows:touched(touch) end
    if not touch then return end
    -- put your touch after this line
end






--# WindowsLoadClass1
-- this is just a starter, you can suppress this tab when the automatic one is created
    
function Windows:loadAllWindows()
    self.autoSaveDisabled = false
    local win=Window(
    {
        disabled=true,
        name='message',
        height=390,
        fontSize=20,
        left=330,
        Halign='justified',
        columns=1,
        width=480,
        top=150,
        Valign='center',
        parent = self
    } 
)
    table.insert(self.winList,win)
    local win=Window(
    {
        name='big_image',
        height=660,
        left=60,
        Halign='center',
        width=630,
        top=30,
        Valign='center',
        parent = self
    } 
)
    table.insert(self.winList,win)
    local win=Window(
    {
        disabled=true,
        name='Tutorial',
        parent = self
    } 
)
    local win=Window(
    {
        frameDataColor=color(0, 0, 0, 255),
        barVisible=false,
        borderColor=color(0, 0, 0, 0),
        locked=true,
        name='directions',
        height=150,
        fontSize=20,
        left=570,
        Halign='justified',
        frameColor=color(0, 0, 0, 0),
        width=98,
        top=60,
        Valign='center',
        parent = self
    } 
)
    table.insert(self.winList,win)

end

@jmv38 www!!! Sudjoot (in Thai = absolutely great!!!) =D> …I really hope to be able to do as much by myself …first or late :wink:
Thank you so much, for now … I’ll try to understand the code and to start “play” with it

…by the way… I’m using Codea on an iPad mini … do you think it may be a problem?

No, should be fine.