Sorry your browser is not supported!

// Project: App Template
// Created: 2018-01-05
// Author: nonom
 
SetErrorMode(2)
SetWindowTitle( "App Template" )
SetWindowAllowResize( 1 ) 
SetOrientationAllowed( 1, 1, 1, 1 )
SetClearColor( 255, 255, 255 )
SetSyncRate( 30, 0 )
SetScissor( 0, 0, 0, 0 )
UseNewDefaultFonts( 1 )
SetTransitionMode( 1 )
SetWindowSize( 512, 920, 0 ) // Default
     
#option_explicit

// Config
#constant BUTTON_HEIGHT = 10
#constant BUTTON_WIDTH  = 50 
#constant SLIDER_WIDTH  = 50 
#constant PREVIEW_IMAGE_WIDTH = 30
#constant PREVIEW_IMAGE_HEIGHT = 20
#constant DETAIL_IMAGE_WIDTH = 92
#constant DETAIL_IMAGE_HEIGHT = 40
#constant MAX_GRID_COLUMNS = 3
#constant PADDING       = 3
#constant HEADER_HEIGHT = 10
#constant ICON_WIDTH = 5
#constant ICON_HEIGHT = 5

// Constants
#constant LIST_VIEW = 1
#constant GRID_VIEW = 2
#constant PAGE_VIEW = 3

#constant OPTIONS_FILE 	= "data/options.txt"
#constant DATA_FILE 	= "data/data.txt"
#constant FONT_FILE 	= "fonts/raphaelicons-webfont.ttf"
 
// Globals
global width# as float
global height# as float
global aspect# as float
global sliderOffset# as float
global sliderTime# as float
global sliderMenu as integer
global sliderOpen as integer
global contentSprite as integer
global headerSprite as integer
global mdiFontId as integer

global op as integer
global title as integer // Navbar title
global y# as integer //Floating Y coordinate for slide up / down

// Defined types

type tContext
    context as integer
    node as integer
endtype

type tTag
	id as integer
	parent as integer
	name$ as string
endtype

type tNode
    id as integer
    tags$ as string
    tagsList as tTag[]
    tagsTextId as integer // temp
    image$ as string
    imageSpriteId as integer
    title$ as string
    titleTextId as integer
    body$ as string
    bodyTextId as integer
    video$ as string
    videoTextId as integer
    videoSpriteId as integer
endtype
 
type tOption
    id as integer
    parent as integer
    action as integer
    node as integer // If applies
    name$ as string
    nameTextId as integer
    icon$ as string
    iconTextId as integer
    spriteId as integer
endtype
 
Global Context as tContext
Global Options As tOption[]
Global Nodes As tNode[]


APP_Init()

do
    // Review the aspect
    // Maybe should be checked only on resize
    width# = GetDeviceWidth() * 1.0
    height# = GetDeviceHeight() * 1.0
    SetWindowSize( width#, height#, 0 )
    aspect# = width#/height#
    SetDisplayAspect ( aspect# )
     
    // App main loop
    APP_Header(Context)
    APP_Content(Context, y#)
    APP_Menu_Slider(Options)
     
    HandleButtons()
    
    Sync()
    
loop

/*
 * SLIDER COMPONENT
 * @see APP_Button()
 */
function APP_Header(context as tContext)
    backId as integer
    backId = options[context.context].parent
    SetSpriteColor(headerSprite, 155,155,155, 255)
    SetSpriteSize(headerSprite, 100, 10)
    SetSpriteDepth(headerSprite, 50)
    SetSpritePosition(headerSprite, 0,0)
endfunction
 
/*
 * CONTENT COMPONENT
 * @see APP_Button()
 */
function APP_Content(context as tContext, y_pos# as float)
	//node = Nodes[context.current]
	DeleteText(title)
	title = CreateText(Options[context.context].name$)
	if Context.node > 0
		APP_NodeView(Context.node, y_pos#) // Detail of node 0
	else
		select Options[context.context].action
			case LIST_VIEW:
				APP_ListView(y_pos#)
			endcase
			case GRID_VIEW:
				APP_GridView(y_pos#)
			endcase
		endselect
	endif
	SetTextSize(title, 3)
	SetTextPosition( title, 90,3)
	SetTextAlignment(title, 2)
	SetTextDepth(title,0)
	SetTextColor(title, 255,255,255,255)
endfunction
     
/*
 * MENU SLIDER COMPONENT
 * @see APP_Button()
 */
function APP_Menu_Slider(options as tOption[])
     
    if GetPointerPressed() = 1
        if GetPointerX() < 5 or GetSpriteHit(GetPointerX(),GetPointerY()) = sliderMenu
            sliderOpen = 1
            sliderOffset# = 0
            sliderTime# = GetSeconds()
        endif
    endif
     
    if sliderOffset# >= 0 then sliderOffset#= 0
    if sliderOffset# <= -SLIDER_WIDTH then sliderOffset#=-SLIDER_WIDTH
     
    SetSpriteSize(sliderMenu, BUTTON_WIDTH, 100)
    SetSpritePosition(sliderMenu, sliderOffset#,0)
    SetSpriteColor(sliderMenu, 0,0,0, 75)
    i as integer
    for i = 0 to options.length
        APP_Button(options[i], i, sliderOffset#)
    next i
     
    if sliderOpen and ( GetSeconds ( ) > sliderTime# + 2 )
        dec sliderOffset#, 10
    endif
    if sliderOffset# = -BUTTON_WIDTH 
        sliderOpen = 0
    endif
         
endfunction
 
/*
 * BUTTON COMPONENT 
 */
function APP_Button(option as tOption, index as integer, offset# as float)
    //Sprite button
    SetSpriteSize(options[index].spriteId, BUTTON_WIDTH, BUTTON_HEIGHT)
    SetSpritePosition(options[index].spriteId, offset#, (index * BUTTON_HEIGHT))
    SetSpriteColor(options[index].spriteId,155 - index * 25,155 - index * 25,155 - index * 25,155)
    SetSpriteDepth(options[index].spriteId, 6)
    
    //Icon button
	SetTextSize(options[index].iconTextId, 3)
    SetTextFont(options[index].iconTextId,mdiFontId)
    SetTextPosition(options[index].iconTextId,  offset# + PADDING, (index * BUTTON_HEIGHT) + PADDING)
    SetTextDepth(options[index].iconTextId, 5)
    
    
    //Text button
    SetTextSize(options[index].nameTextId,3)
    SetTextColor(options[index].nameTextId,255,255,255,255)
    SetTextPosition(options[index].nameTextId,offset# + ICON_WIDTH + PADDING, (index * BUTTON_HEIGHT) + PADDING) 
    SetTextDepth(OPTIONS[INDEX].nameTextId,5)
endfunction
 
/*
 * MENU BOTTOM COMPONENT 
 */
function APP_Menu_Bottom(Options as tOption[])
    //TODO
endfunction
 
/*
 * COMPONENT BACK BUTTON
 */
function APP_Back_Button(context as tContext)
    Context.node = 0
endfunction
 
/*
 * Initializing the App
 */
function APP_Init()
 
	APP_Load_Options()

	APP_Load_Data()

    Context.context = 0
 
    // Header background sprite
    headerSprite = CreateSprite(0)
     
    // Slider background sprite
    sliderMenu = CreateSprite(0)
    sliderOffset# = -BUTTON_WIDTH
	mdiFontId = LoadFont(FONT_FILE)
endfunction

function Update_Nodes()
	i as integer
	for i = 0 to Nodes.length
		SetSpriteVisible(Nodes[i].imageSpriteId, 0)
		SetTextVisible(Nodes[i].titleTextId, 0)
		SetTextVisible(Nodes[i].bodyTextId, 0)
		SetTextVisible(Nodes[i].videoTextId, 0)
		SetTextVisible(Nodes[i].tagsTextId, 0)
		//SetSpriteVisible(Nodes[i].videoSpriteId, 0)
	next i
endfunction

/*
 * Input control
 */
function HandleButtons()
    if(GetPointerPressed())
        op = GetSpriteHit(GetPointerX(), GetPointerY())
        i as integer
        // It's an option?
        for i = 0 to Options.length
            if op = Options[i].spriteId
				Update_Nodes()
                Context.context = Options[i].action 
                Context.node = Options[i].node
                exitfunction
            endif
        next i
        for i = 0 to Nodes.length
            if op = Nodes[i].imageSpriteId
				Update_Nodes()
                Context.node = Nodes[i].id
                exitfunction
            endif
        next i
        
    endif
endfunction

function APP_ListView(y_pos# as float)
	i as integer
	for i=0 to Nodes.length
		//Image
		SetSpriteSize(Nodes[i].imageSpriteId, PREVIEW_IMAGE_WIDTH, PREVIEW_IMAGE_HEIGHT * aspect#)
		SetSpritePosition(Nodes[i].imageSpriteId, PADDING, HEADER_HEIGHT + (i * (PREVIEW_IMAGE_HEIGHT * aspect#) + PADDING))
		SetSpriteVisible(Nodes[i].imageSpriteId, 1)
		
		//Title
		SetTextSize(Nodes[i].titleTextId, 3)
		SetTextColor(Nodes[i].titleTextId, 0, 0, 0, 255)
		SetTextPosition(Nodes[i].titleTextId, GetSpriteX(Nodes[i].imageSpriteId) + PREVIEW_IMAGE_WIDTH + PADDING,  GetSpriteY(Nodes[i].imageSpriteId))
		SetTextVisible(Nodes[i].titleTextId, 1)
		
		//Summary
		SetTextSize(Nodes[i].bodyTextId, 2)
		SetTextColor(Nodes[i].bodyTextId, 0, 0, 0, 155)
		SetTextPosition(Nodes[i].bodyTextId, GetSpriteX(Nodes[i].imageSpriteId) + PREVIEW_IMAGE_WIDTH + PADDING, GetSpriteY(Nodes[i].imageSpriteId) + PADDING)
		SetTextVisible(Nodes[i].bodyTextId, 1)
	next i
endfunction

function APP_GridView(y_pos# as float)
	i as integer
	column as integer = 0
	row as integer = 0
	for i = 0 to Nodes.length
		//Image
		SetSpriteSize(Nodes[i].imageSpriteId, PREVIEW_IMAGE_WIDTH, PREVIEW_IMAGE_HEIGHT * aspect#)
		SetSpritePosition(Nodes[i].imageSpriteId, column * PREVIEW_IMAGE_WIDTH + PADDING, HEADER_HEIGHT + (row * (PREVIEW_IMAGE_HEIGHT * aspect#) + PADDING))
		SetSpriteVisible(Nodes[i].imageSpriteId, 1)
		
		//Title
		SetTextPosition(Nodes[i].titleTextId, GetSpriteX(Nodes[i].imageSpriteId) + PADDING,  GetSpriteY(Nodes[i].imageSpriteId) + (PREVIEW_IMAGE_HEIGHT * aspect#) - PADDING)
		SetTextVisible(Nodes[i].titleTextId, 1)
		SetTextSize(Nodes[i].titleTextId, 1.5)
		SetTExtColor(Nodes[i].titleTextId, 255,255,255,255)
		inc column, 1
		if column = 3 
			column = 0
			inc row, 1 // Infinite rows
		endif
	next i
endfunction

function APP_NodeView(i as integer, y_pos# as float)
	if i > Nodes.length then i = 1
	//Image
	SetSpriteSize(Nodes[i].imageSpriteId, DETAIL_IMAGE_WIDTH, DETAIL_IMAGE_HEIGHT * aspect#)
	SetSpritePosition(Nodes[i].imageSpriteId, PADDING, HEADER_HEIGHT + PADDING)
	SetSpriteVisible(Nodes[i].imageSpriteId, 1)
	
	//Title
	SetTextPosition(Nodes[i].titleTextId, GetSpriteX(Nodes[i].imageSpriteId),  GetSpriteY(Nodes[i].imageSpriteId) + DETAIL_IMAGE_HEIGHT * aspect# + PADDING)
	SetTextSize(Nodes[i].titleTextId, 5)
	SetTextColor(Nodes[i].titleTextId, 0, 0, 0, 255)
	SetTextVisible(Nodes[i].titleTextId, 1)
	
	//Body
	SetTextPosition(Nodes[i].bodyTextId, GetSpriteX(Nodes[i].imageSpriteId), GetSpriteY(Nodes[i].imageSpriteId) + DETAIL_IMAGE_HEIGHT * aspect# + PADDING * 3)
	SetTextSize(Nodes[i].bodyTextId, 2)
	SetTextColor(Nodes[i].bodyTextId, 0, 0, 0, 155)
	SetTextVisible(Nodes[i].bodyTextId, 1)
endfunction

function APP_Load_Data()
	delimiter$ as string="#"
	dataFile as integer
	dataFile = OpenToRead(DATA_FILE)
	dataLine$ as string
	dataLine$ = ReadLine(dataFile)
	while FileEOF(dataFile) = 0
		node as tNode
		
		// Node Id
		node.id = Val(GetStringToken(dataLine$, delimiter$, 1))
		
		// Tags
		node.tags$ = GetStringToken(dataLine$, delimiter$, 2)
		node.tagsTextId = CreateText(node.tags$)
		SetTextVisible(node.tagsTextId,0)
		d as integer
		for d=1 to CountStringTokens(node.tags$,",")
			tag as tTag
			tag.id = d
			tag.parent = 0 // Todo
			tag.name$ = GetStringToken(node.tags$,",",d)
			node.tagsList.insert(tag)
		next d
		
		// Title
		node.title$ = GetStringToken(dataLine$, delimiter$, 3)
		node.titleTextId = CreateText(node.title$)
		SetTextVisible(node.titleTextId,0)
		
		// Image
		imageId as integer
		node.image$ = GetStringToken(dataLine$, delimiter$, 4)
		imageId = LoadImage("images/" + node.image$)
		node.imageSpriteId = CreateSprite(imageId)
		SetSpriteVisible(node.imageSpriteId,0)
		
		// Body
		node.body$ = GetStringToken(dataLine$, delimiter$, 5)
		node.bodyTextId = CreateText(node.body$)
		SetTextVisible(node.bodyTextId,0)
		
		// Video
		node.video$ = GetStringToken(dataLine$, delimiter$, 6)
		node.videoTextId = CreateText(node.video$)
		SetTextVisible(node.videoTextId,0)
		
		dataLine$ = ReadLine(dataFile)
		Nodes.insert(node)
	endwhile
endfunction

function App_Load_Options()
	delimiter$ as string="#"
	dataFile as integer
	dataFile = OpenToRead(OPTIONS_FILE)
	dataLine$ as string
	dataLine$ = ReadLine(dataFile)
	while FileEOF(dataFile) = 0
		option As tOption
		option.id =  Val(GetStringToken(dataLine$, delimiter$, 1))
		option.parent =  Val(GetStringToken(dataLine$, delimiter$, 2))
		option.action = Val(GetStringToken(dataLine$, delimiter$, 3))
		option.node = Val(GetStringToken(dataLine$, delimiter$, 4))
		
		option.name$ = GetStringToken(dataLine$, delimiter$, 5)
		option.nameTextId = CreateText(option.name$)
		
		option.icon$ = GetStringToken(dataLine$, delimiter$, 6)
		option.iconTextId = CreateText(option.icon$)
		
		option.spriteId = CreateSprite(0)
		
		
		Options.insert(option)
		dataLine$ = ReadLine(dataFile)
	endwhile
endfunction

function APP_Retrieve_Data()
	//TODO
endfunction

// UDT

type tApp
    status as integer
	title as string
	version as string
    skin as tSkin
    data as tData
endtype

type tData 
	options as tOption[]
	content as tContent[]
endtype

type tContent
	nodes as tNode[]
	terms as tTerm[]
	// Elements to add a content items: filters, nodes, terms, etc.
endtype

type tNavigation 
	history as tStep[] // Navigation history
	index as integer
	view as integer // Current view index
	node as integer // Current node index
	root as integer // Root view index
endtype

type tStep
	view as integer
	node as integer // If 0 it's a view
endtype

type tNode 
    id as integer
    title as string
    titleTextId as integer
    body as string
    bodyTextId as integer
    terms as integer[]
    tagsTextId as integer
    image as string
    imageSpriteId as integer
endtype

type tTerm
	id as integer
	parent as string
	name as string
endtype

type tOption
    parent as integer
    node as integer // If applies
    name as string
    nameTextId as integer
    icon as string
    iconTextId as integer
    spriteId as integer
    view as tView
endtype

type tSkin
	idForeColor as integer
	idBackColor as integer
	background as tColor
	foreground as tColor
	header as tColor
	title as tColor
endtype

type tView
	title as string
	titleTextId as integer
	offset as integer
	count as integer
	chunk as integer
	id as string
endtype

type tColor
	r as integer
	g as integer
	b as integer
endtype

Setvirtualresolution(640,480)
ResetTimer()

//This command creates an Edit Box in top left of the screen
//if you give it focus, by clicking or tapping it, you can
//enter data.
CreateEditBox(1)

Repeat
    Sync()
Until Timer()>12
End

CreateEditBox(1)
SetEditBoxActive(1,0) // It can works for me
SetEditBoxMultiLine(1,1)
SetEditBoxText(1, "Todo cuerpo sumergido en un fluído experimenta un empuje hacia arriba igual al peso del líquido desalojado.")
SetEditBoxSize(1, 150, 120)