Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

request to implement an element that is used on different pages #225

Closed
Avpi18 opened this issue May 11, 2020 · 10 comments
Closed

request to implement an element that is used on different pages #225

Avpi18 opened this issue May 11, 2020 · 10 comments

Comments

@Avpi18
Copy link

Avpi18 commented May 11, 2020

the feature should make it possible to show the same element on different pages without further loading the RAM.
e.g. Page_1 with Listbox_1 and Page_2 with Listbox_1 in the same place.

@Pconti31
Copy link
Contributor

@Avpi18 This is already possible. In fact I recently saw an example where someone used a Listbox as
a menu structure going down the side of a page. Anyway, just plop the control(s) down on a base page. See ex24 where a base page is used to create tabs.
Paul--

@Avpi18
Copy link
Author

Avpi18 commented May 11, 2020

@Pconti31 Thanks for your answer.
Maybe I did not express myself clearly and therefore I try again ;-)
I have several pages whereof 2 are very similar. The only difference is the different number of buttons and other text. The problem is, if I insert a base_page, it will be the base. But I also have other pages which should not be linked to the base_page.
I have 2 pictures where you can see what i mean.

Page_1 with Listbox_1
Page_2 with Listbox_1

@Pconti31
Copy link
Contributor

Pconti31 commented May 12, 2020

@Avp18 If I were doing this kind of UI I would make Choose a Popup page.

One more way of saving memory without using a base page is to use flash versions of UI elements.
You can turn on this property inside the Builder using "Use Flash API=true".

Beyond that I can't think of a good modification to GUIslice API for what you are asking.

Unless Calvin can think of something you are left with doing this programmatically yourself
by using the existing API to hide base page elements before changing to say the Choose menu.
See my FAQ in the GUIsliceBuilder repository for information on hiding elements.

IMHO, Good UI design does not involve moving buttons around. You should try for a consistent look and feel.
Paul--

@ImpulseAdventure
Copy link
Owner

ImpulseAdventure commented May 12, 2020

Hi @Avpi18 & @Pconti31 --

Paul, thanks for taking the time to propose some potential workarounds.

The good news is that I think there is a much simpler way of achieving this.
After looking at the API further, I believe we can create an element "alias" that allows us to share items on multiple pages.

Please note: The following is a quick response to give you an idea of one solution, but I'll update this later with a clearer example for you to try out, assuming you are using the Builder.

I have tested this with a simple 3-page example based on ex05_ard_pages where I added an XListbox to the 2nd page (E_PG_EXTRA). I then added an element alias on the 3rd page (E_PG_EXTRA2).

The simplest approach may be to do the following:

  • Create the XListbox as normal on one of your pages (I'll assume it has created an element reference called m_pElemListbox).
  • On the additional page (eg. E_PG_EXTRA2) that you would like to create an element alias, add the following: (where m_pElemListbox is the reference to the element we'd like to reuse and E_PG_EXTRA2 is the page to contain the alias / copy).
pElemRef = gslc_ElemAdd(&m_gui,E_PG_EXTRA2,gslc_GetElemFromRef(&m_gui,m_pElemListbox),GSLC_ELEMREF_DEFAULT);
  • Then we would need to bump up the element count on the page to account for the extra element:
#define MAX_ELEM_PG_EXTRA2      2+1                 // Increase the element count to accommodate the alias

The above will save you the cost of the extended element (eg. XListbox) and enable you to reuse all of its configuration, current selected state, etc. but still bear the memory cost of one element (~80B). If you want to save on the cost of the extra element as well, then I have an idea for a modification to this that may enable that as well.

thx

@Avpi18
Copy link
Author

Avpi18 commented May 12, 2020

Hello @Pconti31

Thanks for your great feedback. I have also thought a little bit and then I got the idea with the pop up.

i have already chosen the flash api= true. without this function my project would not be realizable. best thanks here also to Calvin Hass.

Since ImpulseAdventure already suggested a slightly different method, I tried this one first and will continue with a pop up if the problem cannot be solved.

Hello @ImpulseAdventure
Thanks also to you for your help. The proposal with:

pElemRef = gslc_ElemAdd(&m_gui,E_PG_EXTRA2,gslc_GetElemFromRef(&m_gui,m_pElemListbox),GSLC_ELEMREF_DEFAULT);

has worked. I also used the ListSlider as Ref.

pElemRef = gslc_ElemAdd(&m_gui,E_PG_EXTRA2,gslc_GetElemFromRef(&m_gui,m_pListSlider),GSLC_ELEMREF_DEFAULT);

The problem I have to solve now is that the listslider is not compatible with the function :

nVal = gslc_ElemXSliderGetPos(pGui,m_pListSlider);
gslc_ElemXListboxSetScrollPos(pGui,m_pElemListbox, nVal);

, but only if I make a page break. More precisely explained: On Page_1 is my original ListSlider and on Page_2 is my copied/referenced element. If I now use the slider on Page_2, nothing happens. If I then leave Page_2 and go back to Page_2, it has adjusted the position.

Do you have any idea how I can update the position of the ListSlider on Page_1 and Page_2 in real time? (With the original element, i.e. on Page_1, it updates when I use the ListSlider)

@ImpulseAdventure
Copy link
Owner

ImpulseAdventure commented May 13, 2020

Hi @Avpi18 — good to hear that progress has been made!

I believe the only part missing was the linkage between the scrollbar position and the pair of listboxes (original and alias).

Example sketch

I put together a quick sketch in the Builder and it appears to be working. In my case I have:

  • E_PG_MAIN: two buttons (jumping to E_PG2 & E_PG3)
  • E_PG2: back button (to E_PG_MAIN) and Listbox with scrollbar (E_ELEM_LISTBOX1, ElemRef=m_pElemListbox1)
  • E_PG3: back button (to E_PG_MAIN)
    image

High level overview of Changes

  • Create an element alias for the Listbox and scrollbar
  • Bump up the element counts to adjust for the new aliases
  • Link the scrollbar callback to the two Listboxes

Detailed list of Changes

The changes I needed to make to the sketch_GSLC.h:

  • Increase MAX_ELEM_PG3 by 2 to account for Listbox and Slider (scrollbar)
  • Add extern gslc_tsElemRef* m_pElemListbox2; to save a reference for the new alias.
  • Add code to create the two aliases on E_PG3: (note that I am saving a reference to the Listbox alias as m_pElemListbox2)
  m_pElemListbox2 = gslc_ElemAdd(&m_gui,E_PG3,gslc_GetElemFromRef(&m_gui,m_pElemListbox1),GSLC_ELEMREF_DEFAULT);
  pElemRef = gslc_ElemAdd(&m_gui,E_PG3,gslc_GetElemFromRef(&m_gui,m_pListSlider1),GSLC_ELEMREF_DEFAULT);

The changes I needed to make to the sketch.ino:

  • Add gslc_tsElemRef* m_pElemListbox2 = NULL; to save a reference for the new alias
  • Link the scrollbar to the listbox (original and alias):
      gslc_ElemXListboxSetScrollPos(pGui, m_pElemListbox1, nVal);      
      gslc_ElemXListboxSetScrollPos(pGui, m_pElemListbox2, nVal);   

Thanks

@ImpulseAdventure ImpulseAdventure added the waiting confirm Believed to be fixed / OK. Waiting on confirmation. label May 14, 2020
@Avpi18
Copy link
Author

Avpi18 commented May 14, 2020

Hello @ImpulseAdventure

Thanks for your help. It's very kind and I appreciate your help.

Actually I wanted to avoid that I have to create a new name, like m_pElemListbox2. Apparently this does not work. But it doesn't matter. I created a name anyway, set the links and everything worked.
Unfortunately I saw your message too late, when I already worked a night shift ;-)

But your detailed answer helped me anyway. I even think that you could include this example in your documentation, because there are surely more cases where you have to create an alias.

The topic is closed for me now. Thanks to @Pconti31 and @ImpulseAdventure for your support.

@ImpulseAdventure
Copy link
Owner

ImpulseAdventure commented May 14, 2020

Hi @Avpi18 --

I had added the additional global just to make accessing the element alias elsewhere a little easier, but you're right -- it would probably be best to limit any extra edits.

It is easy to avoid this step... I have included an updated change list for you below.

Good suggestion on putting it in the wiki. I will create a section for tips and integrate this since I hadn't thought about "element aliases" until you asked the question :)

Detailed list of Changes

The changes I needed to make to the sketch_GSLC.h:

  • Increase MAX_ELEM_PG3 by 2 to account for Listbox and Slider (scrollbar)
  • Add code to create the two aliases on E_PG3:
  pElemRef = gslc_ElemAdd(&m_gui,E_PG3,gslc_GetElemFromRef(&m_gui,m_pElemListbox1),GSLC_ELEMREF_DEFAULT);
  pElemRef = gslc_ElemAdd(&m_gui,E_PG3,gslc_GetElemFromRef(&m_gui,m_pListSlider1),GSLC_ELEMREF_DEFAULT);

The changes I needed to make to the sketch.ino:

  • Link the scrollbar to the listbox (original and alias):
      gslc_ElemXListboxSetScrollPos(pGui, m_pElemListbox1, nVal);      
      gslc_ElemXListboxSetScrollPos(pGui, gslc_PageFindElemById(pGui,E_PG3,E_ELEM_LISTBOX1), nVal); 

Hope that helps!

@Avpi18
Copy link
Author

Avpi18 commented May 19, 2020

Thank you for your answer. This helps a lot. I will implement this code and hope that it will work. the Project is progressing, thanks to you.

@ImpulseAdventure ImpulseAdventure removed the waiting confirm Believed to be fixed / OK. Waiting on confirmation. label Jun 4, 2020
@Avpi18
Copy link
Author

Avpi18 commented Sep 14, 2020

hello @ImpulseAdventure
As I have noticed, GUISlice is making good progress. Great work!
I have a question regarding an alias to a button.

This is what i tried: (I also adjusted the number of Elements on the Page. Normally, with a button it doesn't generate a pElemRef, so i tried but failed as you will see)

pElemRef = gslc_ElemCreateBtnTxt_P(&m_gui,E_ELEM_BTN63,NEW2_PG,10,190,90,40, "Speichern",&m_asFont[E_FREE_SANS9], GSLC_COL_BLACK,((gslc_tsColor){110,110,110}),GSLC_COL_GRAY_LT1,((gslc_tsColor){110,110,110}), ((gslc_tsColor){110,110,110}),GSLC_ALIGN_MID_MID,true,true,&CbBtnCommon,NULL);

m_pElemSave0 = pElemRef

And then I added:

extern gslc_tsElemRef* m_pElemSave0;
extern gslc_tsElemRef* m_pElemSave1; // alias from m_pElemSpeichern0

m_pElemSave1 = gslc_ElemAdd(&m_gui,NEW3,gslc_GetElemFromRef(&m_gui,m_pElemSave0),GSLC_ELEMREF_DEFAULT);

How can I create an alias to a button? I'm afraid I'm not getting anywhere with the last description from this topic.

I hope for your support and thank you already now.
Thanks a lot
Avpi18

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants