Scrolling

[AnswerSoft]

Brand new user here. I searched through the forums before posting the question. However, it seems that what I want to do isn't natively supported, though I would expect it to be an extremely common request.

I have text I need to display that exceeds the length of the screen. Are there no built in functions to scroll the text up to see it? I see that containers are a new thing for 2.0. Do these hold the key? I'm thinking that to do this manually I'll need the Touch functions. Sound reasonable? If someone has already worked this out, I'd appreciate a heads up to the standard code.

Thanks,
Mike

[nednones]

There are two ways to combat your request.

1.) Ou can either put some detection in your code so that if the amount of chars in your string exceed a set length then insert the rest of the sentence onto a new line, but make sure you account for this by leaving a blank line underneath or two in fact should you receive a lot of text.

2.) you create a scroller using say 3 images and then using the OnTouch() method you can then scroll the worldsetxy to where ever your finger has dragged the screen too. Hope that makes sense

[zacho]

A user has provided a way how to scroll, please thank him http://dragonfiresdk.net/forum/index.php?topic=227.0

[jjsanchezramirez]

@nednones, I think what he means is that he has a multi-line text that's too big to fit on screen.

@AnswerSoft, you will need both containers and touch components. Check out the link zacho gave you. That, however, might be a little complicated to use. I'll see if I can whip up something for you.

[AnswerSoft]

Thanks everyone. I'll check out the link. I don't mind doing the coding if I know how to approach it. The text is going to be static. Basically I'm converting a simple informational website. There's a list of names that I need to provide when the user selects "Counselors." But with all the contact info, etc, there's more text than can fit on a single screen. So I want to allow the user to scroll down to read the rest. After I posted this earlier I did see the information in the FAQ about doing the finger swipe gestures. That may provide what I'm looking for; but first I'll visit the link.

[zacho]

@nednones, I think what he means is that he has a multi-line text that's too big to fit on screen.

@AnswerSoft, you will need both containers and touch components. Check out the link zacho gave you. That, however, might be a little complicated to use. I'll see if I can whip up something for you.

If you could that would be so cool!

[AnswerSoft]

@AnswerSoft, you will need both containers and touch components. Check out the link zacho gave you. That, however, might be a little complicated to use. I'll see if I can whip up something for you.

Thanks a lot. I just downloaded the code from the link. Looks like this will work great. If you've got a simple solution that'd be great. Otherwise, I'll look through this one. Others could benefit. I'm a newbie DragonFire guy, but I've been coding for 24 years. So I should be able to follow the original solution. I'm supposed to give a demo to the customer tomorrow.

Thanks,
Mike

[xabaras]

yes, jj's scroll framework seems very good... i've tested it also on the device and it works fine...

I'd like to use it in my app where i have 3 menu/pages.. in each page i should have a scrollable list of strings with a little icon on the right of each string... and when you touch one row, something happens and the little icon could change...

Is it possible to use coral framework in order to create multiple scrollable lists in different pages? i mean... can i easily show/hide them according to the page or should i wait for a proper version with containers?

Moreover... the list of elements in every page is dynamic... i could have 10 elements... 20... and so on, i don't know in advance... so, is it possible to have dynamic lists size according to the elements amount?

many thanks

[jjsanchezramirez]

I made this code before DFSDK 2.0 was released, which means there were no containers. I'm hoping to write a new version that uses containers instead of moving the whole screen. It sounds so more logical. It's going to take me a while, nonetheless.

[jjsanchezramirez]

I'm done with the basics.

This is a class in a header file. It moves containers around. No friction. No elasticity. Just drag and drop. Also, I haven't tested this feature yet, but it should work for multiple containers. Finally, it doesn't have any restraints yet, but it does have the option for vertical or horizontal scrolling.

Code: [Select]

#ifndef SIMPLE_SCROLLER
#define SIMPLE_SCROLLER

int nOldX;
int nOldY;
int nNewX;
int nNewY;

int OnTouch(int id, int event, int x, int y)
{
if (event == 1)
{
nOldX = x;
nOldY = y;
nNewX = x;
nNewY = y;
}

if (event == 2)
{
nNewX = x;
nNewY = y;
}

if (event == 3)
{
nOldX = 0;
nOldY = 0;
nNewX = 0;
nNewY = 0;
}

return id;
}

class SimpleScroller
{

private:

int m_nContainer;
int m_nTouch;
int m_nX;
int m_nY;
bool m_bHorizontalScroll;
bool m_bVerticalScroll;

public:

SimpleScroller()
{

}

void Init(int& container, int x, int y, int width, int height)
{
m_nContainer = container;
m_nTouch = TouchAdd(container, x, y, width, height, OnTouch, 0);

m_nX = ContainerGetx(container);
m_nY = ContainerGety(container);

m_bHorizontalScroll = true;
m_bVerticalScroll = true;
}

void Update()
{
if (nOldX != nNewX && m_bHorizontalScroll)
ContainerSetx(m_nContainer, m_nX+nNewX-nOldX);
else if (nOldY != nNewY && m_bVerticalScroll)
ContainerSety(m_nContainer, m_nY+nNewY-nOldY);
else
{
m_nX = ContainerGetx(m_nContainer);
m_nY = ContainerGety(m_nContainer);
}
}

void SetHorizontalScroll(bool flag)
{
m_bHorizontalScroll = flag;
}

void SetVerticalScroll(bool flag)
{
m_bVerticalScroll = flag;
}
};

#endif
This is how you would use it. To initiate a scroll component, you need a container to be scrolled and some other variables for the touch component. The last two variables are width and height, which are important to establish the boundaries of your scroller.

I think the code is pretty self explanatory. You could use this as a basis for menus, sliders, etc.

Code: [Select]

//====================================================
// App.cpp
//====================================================
#include "DragonFireSDK.h"
#include "SimpleScroller.h"

int nContainer;
SimpleScroller simpleScroller;

void AppMain()
{
nContainer = ContainerAdd(0, 0, 0);
ViewAdd(nContainer, "Images/Background.png", 0, 0);
simpleScroller.Init(nContainer, 0, 0, 320, 960);
simpleScroller.SetHorizontalScroll(false);
}

void AppExit()
{

}

void OnTimer()
{
    simpleScroller.Update();
}

[jjsanchezramirez]

Just another thing.

Any elements you might want to add within the container that have touch components of their own, such as buttons and push buttons, must be initialized after the scroller. Otherwise, the scroller's touch component will be above these elements, and you won't be able to click them.

On a similar note, you won't be able to drag the scroller when you're clicking a button. If it's just one button, it's not a big deal. However, for components such as menus, you might want to write your own class of buttons.

Here's an example.

Code: [Select]

void AppMain()
{
nContainer = ContainerAdd(0, 0, 0);

ViewAdd(nContainer, "Images/Background.png", 0, 0);

simpleScroller.Init(nContainer, 0, 0, 320, 960);
simpleScroller.SetHorizontalScroll(false);

nFont = FontAdd("Arial", "Regular", 20, 0x000000);

ButtonAdd(nContainer, "Images/RoundedButton", 8, 80, OnButton, 0);
TextAdd(nContainer, 24, 91, "Button", nFont);
}

[zacho]

Thumbs up! good scroll code 

[jjsanchezramirez]

I finished the simple scroller. Now you don't go out of boundaries. This is also much more easier to use than my original scroller. Containers really make things a heck of a lot easier. Also, you can now use many scrollers. You can even use a scroller within a scroller!



Here's an example. It shows how to use more than one scroller at the same time. It's also heavily documented, so no one should have trouble figuring out how it works.

http://www.mediafire.com/?h7b31wipm8ijx11

Here's the code for the simple scroller.

Code: [Select]

/* Copyright 2012 Juan José Sánchez Ramírez

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.

   Author Juan José Sánchez Ramírez
   Version 1.0
*/

#ifndef SIMPLE_SCROLLER
#define SIMPLE_SCROLLER

int nOldX;
int nOldY;
int nNewX;
int nNewY;

int nTouchId;

// This function will be called when a scroller is activated
int OnTouch(int id, int event, int x, int y)
{
// Get the ID of the container
nTouchId = id;

// Record initial coordinates when pressed down
if (event == 1)
{
nOldX = x;
nOldY = y;
nNewX = x;
nNewY = y;
}

// Record new coordinates when moving
if (event == 2)
{
nNewX = x;
nNewY = y;
}

// Erase coordinates when released
if (event == 3)
{
nOldX = 0;
nOldY = 0;
nNewX = 0;
nNewY = 0;
}

return id;
}

// This class creates a simple scroller for containers
class SimpleScroller
{
/* A scroller lets a container slide upon a portion of the screen.
   It's designed to move containers that are too big for the screen,
   both vertically and horizontally, but it can be modified to move
   smaller objects too, such as sliders. This can be achieved by
   modifying minimum and maximum ranges, using the SetMinX, SetMinY,
   SetMaxX, and SetMaxY functions.

   The scroller uses the following components:

   1. A container which contains all of the elements in the scroller.
   2. A touch component which must be at least the size of the
      entire container, which records the drag and drop actions.
   3. An ID number that allows to differentiate among scrollers,
      since all scrollers use the same OnTouch function.
*/

private:

int m_nContainer;
int m_nTouch;

int m_nX;
int m_nY;

int m_nMinX;
int m_nMinY;

int m_nMaxX;
int m_nMaxY;

bool m_bHorizontalScroll;
bool m_bVerticalScroll;

public:

// Constructor
SimpleScroller()
{

}

// This function initiates the scroller and all of its components
void Init(int& container, int x, int y, int touchWidth, int touchHeight, int id)
{
m_nContainer = container;
m_nTouch = TouchAdd(container, x, y, touchWidth, touchHeight, OnTouch, id);

m_nX = ContainerGetx(container);
m_nY = ContainerGety(container);

m_nMinX = x-touchWidth+320;
m_nMinY = y-touchHeight+480;

m_nMaxX = 0;
m_nMaxY = 0;

m_bHorizontalScroll = true;
m_bVerticalScroll = true;
}

// This function updates the scroller
void Update()
{
/* To update the scroller we're going to:

   1. Check if the x coordinate has changed. If it has, and
      if horizontal scrolling is allowed, move the container.
  If the container is out of bounds, move the container
  within bounds.

   2. Repeat for the y coordinate.

   3. If nothing has changed, then make the scroller x and y
      coordinates equal to the container's coordinates. This
  is necessary to start scrolling again.
*/

if (nOldX != nNewX && m_bHorizontalScroll)
{
ContainerSetx(m_nContainer, m_nX+nNewX-nOldX);

if (ContainerGetx(m_nContainer) < m_nMinX)
ContainerSetx(m_nContainer, m_nMinX);
if (ContainerGetx(m_nContainer) > m_nMaxX)
ContainerSetx(m_nContainer, m_nMaxX);
}
else if (nOldY != nNewY && m_bVerticalScroll)
{
ContainerSety(m_nContainer, m_nY+nNewY-nOldY);

if (ContainerGety(m_nContainer) < m_nMinY)
ContainerSety(m_nContainer, m_nMinY);
if (ContainerGety(m_nContainer) > m_nMaxY)
ContainerSety(m_nContainer, m_nMaxY);
}
else
{
m_nX = ContainerGetx(m_nContainer);
m_nY = ContainerGety(m_nContainer);
}
}

// This function sets the minimum x range
void SetMinX(int x)
{
m_nMinX = x;
}

// This function sets the minimum y range
void SetMinY(int y)
{
m_nMinY = y;
}

// This function sets the maximum x range
void SetMaxX(int x)
{
m_nMaxX = x;
}

// This function sets the maximum y range
void SetMaxY(int y)
{
m_nMaxY = y;
}

// This function sets the horizontal scroll
void SetHorizontalScroll(bool flag)
{
m_bHorizontalScroll = flag;
}

// This function sets the vertical scroll
void SetVerticalScroll(bool flag)
{
m_bVerticalScroll = flag;
}
};

#endif
Here's the code for the example. You will need the images, though.

Code: [Select]

/* Copyright 2012 Juan José Sánchez Ramírez

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.

   Author Juan José Sánchez Ramírez
   Version 1.0
*/

#include "DragonFireSDK.h"
#include "SimpleScroller.h"

SimpleScroller simpleScroller;
SimpleScroller sliderSimpleScroller;

int nContainer;
int nSliderContainer;

int nFont;

// This function will be called when a button is pressed
int OnButton(int id)
{
return id;
}

// This function marks the beginning of program execution
void AppMain()
{
nContainer = ContainerAdd(0, 0, 0);
nSliderContainer = ContainerAdd(nContainer, 50, 165);

nFont = FontAdd("Arial", "Regular", 20, 0x000000);

ViewAdd(0, "Images/Background.png", 0, 0);

// Initiate scroller 320x720, ID 0, horizontal scroll false
simpleScroller.Init(nContainer, 0, 0, 320, 720, 0);
simpleScroller.SetHorizontalScroll(false);

// Populate container
ButtonAdd(nContainer, "Images/RoundedButton", 8, 80, OnButton, 0);
TextAdd(nContainer, 24, 91, "Button", nFont);

ButtonAdd(nContainer, "Images/RoundedButton", 8, 595, OnButton, 1);
TextAdd(nContainer, 24, 606, "Another button", nFont);

ViewAdd(nContainer, "Images/Slider.png", 50, 165);

// Initiate scroller 25x26, ID 1, vertical scroll false
sliderSimpleScroller.Init(nSliderContainer, 0, 0, 25, 26, 1);
sliderSimpleScroller.SetVerticalScroll(false);
sliderSimpleScroller.SetMinX(50);
sliderSimpleScroller.SetMaxX(246);

// Populate slider container
ViewAdd(nSliderContainer, "Images/Handle.png", 0, 0);
}

// This function is called whenever the app terminates
void AppExit()
{

}

// This function is called 30 times per second
void OnTimer()
{
if (nTouchId == 0)
simpleScroller.Update();

if (nTouchId == 1)
sliderSimpleScroller.Update();
}

[xabaras]

is it already christmas?? 

great job jj, thank you!

[jjsanchezramirez]

Hey, xabaras, I'm really sorry, I hadn't read your comment from before.

I'm planning on making a menu super class of the scroller. I'll try adding the elements you requested: dynamic size, icons, etc. It might take a while since I have to code a new class of buttons for the scroller. Otherwise, the current buttons won't allow the scroller's touch component to be activated while the button is being pressed, and buttons take up a lot of space, so this is obviously a big issue.

Other than that, your other request has been completed. You can have multiple scrollers. You can even have scrollers inside scrollers. Deactivating the scrollers is as simple as making the container invisible, which is what you would normally do to change screens. This is because when the container becomes invisible, so does the touch component, and thus it can't be scrolled.

Also, have you tested the new code on your iPhone? I don't have an iPhone, or iPad, so I can't never really test the code. I just assume it works.