App with over 2000 Checkboxes

[Amothan]

Hey guys

I'm pretty new to the hole IT-world especially developing apps.

I try to make an App for an online game in which you can collect over 2000 recipes and building plans. In this app I want to make an overview for all the recipes and building plans, that you know which ones you got and which are still needed. Now I made a total of 3 screens:

- Main Menu

- Recipes

- Building plans

I started with the recipe screen in which I have about 500 check boxes. My goal is when I klick on a checkbox it changes the colour and also stays like this after i close the app (so I have to work with TDB).

Unfortunately my app has already a size of 3.15mb after 3 screens with 162 checkboxes (and the additional other functions programming) without any background picture in it (see the screenshots).

Can you guys maybe help me with a better programming solution to compress the app size?

Thanks in advance!

best regards

Amothan

[BodyMindPower]

My goal is when I click on a checkbox it changes the color and so i like it after i close the app (so i have to work with TDB).

Make a small test example with 3-5 recipes and explain exactly what the goal of the game is (it should be more than just changing colors).

Post the blocks of your small example aia.

And please change the language (temporarily) from German to English (in the designer), then we'll understand it easier (even me, and I'm German).

Do you really want to create more than 2000 checkboxes etc. manually?

Note: How to overcome the App Inventor project limit of 10 MB:

use this server: http://code.appinventor.mit.edu/

https://puravidaapps.com/filebyfile.php

[Amothan]

To clarify: the app will not be a game itself, but it is for supporting in an online game I play on PS4 (it's called The Elder Scrolls Online). In The Elder Scrolls Online you can collect as I said over 2000 recipes and building plans but you can't see in your library which ones you are missing. So I want to make an app where you can see all recipes and building plans and also mark the ones you have and then see which ones you are missing. So you can call it more like a manual companian app.

You can see how I coded it so far (aia and picture). It needs so much time because I have to make the settings for every single checkbox. So I thought there must be a simpler solution? 

[BodyMindPower]

By the way, your app size is 17 KB. The size of the APK is getting bigger because it has to implement everything (libraries etc.) for an app to work. The size limit (10MB) concerns the aia.

[Amothan]

Ah now I get it, my working app aia is 149kb so I still have plenty of space to fill. This 17kb aia is just to show you how i program the whole app. It's a lot of click work (because as I mentioned I have to program every single check box by itself), so there's still my question if there's a better solution to program it respectively make it simpler to program all the check boxes?

[Chris Ward]

Hello Amothan

I suggest you use the List View component and ditch the check box idea. List View cannot permanently highlight a selection, but with such a long list that isn't pertinent. What you can do is use two lists for each category - a List of items available (recipe), and a list of items "used" or "got".

The "available" lists of recipes and building plans can be static List Blocks. If you attach text files of your Lists, I can convert them into App Inventor Lists for you with a desktop App I have written. (Free of Charge).

[ABG]

You are headed down a long blind alley, to a dead end.

Your problem is a data management problem, where you

must devise table structure to contain your recipes and

your material supplies.

Your blocks should not increase with the number of recipes,

only your number of rows in your data tables.

Here are some sample data based app designs ...

https://docs.google.com/document/d/1RbPhI6cnHz3pRfqpEOVtRoMdkQlEA3Qm5BtuYq4bbGY/edit?usp=sharing

https://groups.google.com/d/msg/mitappinventortest/656oDTQeomU/7-WNXaxBGwAJ

https://groups.google.com/d/msg/mitappinventortest/NF6j--NJc-E/hPfG8JDwFQAJ

https://docs.google.com/document/d/12t4HLNRepCnbmcfycdF8wSHWht_D1P8hKJpTknVDChY/edit?usp=sharing

https://docs.google.com/document/d/1S8eZBKBvtFzafH51a3bKnw_iBVHRnjHaEY1Zbjzscb0/edit?usp=sharing

Also see the Google Sheets section of FAQ

https://sites.google.com/view/ai2-faq-view/home

I suggest you start a few shared Google Sheets for your recipe collection,

and invite collaborators to help fill it, and separate Google Sheets for your

materials collection.

ABG

[Amothan]

Hey Chris

Thanks for your help, i really appreciate it! 

I'd like to take your offer, but i need some time to collect and write all the recipes and building plans in a document so you can use it. I will post it here again when I'm finished.

[Amothan]

Hello ABG

Also thanks for your help and advice!

I'll try your solution as soon as I can and let you know how I'll continue it in the future.

Greetings

[Chris Ward]

Hi Amothan

Your documents should be plain text, one item per row like so:

Roast Pig                       

Chicken Breast                  

Flank Steak                     

Grilled Hare                    

Hunter's Pie                    

Stir-Fried Garlic Beef          

Pan-Fried Trout                 

White run Cheese-Baked Trout     

Venison Pasty                   

Hare in Garlic Sauce            

Bruma Jugged Rabbit             

Solstheim Elk and Scuttle       

Argonian Saddle-Cured Rabbit    

The Skald-King's Patty Melt     

Orcish Bratwurst on Bun         

Crawdad Quiche                  

Garlic-and-Pepper Venison Steak 

Millet and Beef Stuffed Peppers 

Lilmoth Garlic Hagfish          

Banana Surprise                 

Banana Millet Muffin            

Bravil Melon Salad              

Deshaan Honeydew Hors D'Ouevre  

Fried Green Tomatoes            

Stuffed Grape Leaves            

Apple Cobbler Supreme           

Summer Sundas Soup              

Melon-Chevre Salad              

Mistral Banana Bread            

Fresh Apples and Eidar Cheese   

House Hlaalu Pumpkin Risotto    

Bananas in Moon-Sugar Syrup     

Garlic Guar Stuffed Grape Leaves

First hold Fruit and Cheese Plate

Thrice-Baked Gorapple Pie       

Tomato Garlic Chutney           

Carrot Soup                     

Roast Corn                      

[ABG]

Here are some more thoughts on how to represent recipes in a table ...

In some games, like my current Dragon's Dogma Dark Arisen, 

you can find multiple recipes for the same resultant product.

To keep a table of such recipes, you could use these columns:

  Recipe ID number,

  Resultant product,

  Ingredient Name,

  Ingredient quantity

 

You would need to amass the required number of ingredients to

fulfill a unique recipe  ID to create a resultant product.

These recipes would fit into 9 separate recipe IDs for product

Desiccated Herbs, with 2 rows for each recipe.

https://dragonsdogma.fandom.com/wiki/Desiccated_Herbs

Enhanced weapons and armor could also fit into this data model,

for example:

https://dragonsdogma.fandom.com/wiki/Category:Enhancing

This flat recipe model allows you to use SQL-like queries

to ask questions like "What can I make with a Goblin Horn?"

Some recipes might need an event description for an ingredient,

like the product Giant Evil Eye might require as an ingredient

the action Kill the Giant Floating Eyeball.

abg

[Amothan]

Hi Chris

Thanks for showing me how to do it. I will also add the rank of the recipe like this:

Roast Pig Rank 1                   

Chicken Breast Rank 1                 

Flank Steak Rank 1

etc.

[Amothan]

Thanks for your efforts.

In ESO (short for Elder Scrolls Online) there are only one way (mostly 2, 3 or 4 ingriedients) to make a specific recipe or building plan. But you always see which ingredients and how many of them you need (see the picture I attached).

So I think the only necessary thing for the app is to write also the rank you need in the Provisioning (https://elderscrollsonline.wiki.fextralife.com/Provisioning) and maybe also the effect that the cooked recipe gives you when used.

@Chris is it also possible to write the effects to the recipes like:

Akaviri Pork Fried Rice Rank 1

Effect: increase Max Health by 4460 for 35 minutes (Cooldown: 5 seconds)

And is it possible to add categories like:

Cooking

Grill

Akaviri Pork Fried Rice Rank 1

Effect: increase Max Health by 4460 for 35 minutes (Cooldown: 5 seconds)

.....

Fruit Dishes

...

....

Brewing

Alcoholic Drinks

....

...

etc.

As an idea what I mean, please have a look at this:

https://www.eso-database.com/de/charakter/sammelt-daily-belohnungen/12522317/handwerk/versorgen-rezepte/280955/

[BodyMindPower]

Here's a way to programmatically create your (labels with) checkboxes. Play around with it ... maybe it helps ...

The goal of the game is still not clear to me, but I also prefer to leave cooking to my husband.  :)

[Chris Ward]

Hi Amothan

is it also possible to write the effects to the recipes like

Yes it is :)

Put it all on one line thus:

[Chris Ward]

... and yes, you can start with a list of Categories:

Cook

Brew

.... then when for example 'Cook' is selected, display:

Grill

Fruit Dishes

Vegetable Dishes

Hearty

etc

.... then when 'Fruit Dishes' is selected, display a list of recipes using fruit. For each list, the data is ether stored in text files or App Inventor Static Lists. Therefore, each of the Lists simply recycle one List View component on one App Screen. So, to record whether or not the recipe has been used by you in the game, by default the first line of the recipe could be *not used*. When it is used, the User can select it to toggle the first line of the recipe to *used*. In the List of recipes, any that are used could be prefixed with a simple ■ flag:

□ Banana Surprise

□ Baked Apples Baked

□ Grape preserves

■ Pumpkin puree

■ Melon jelly

□ Tomato soup

□ Bravil Melon Salad

■ Hiretörtchen with banana

□ Pumpkin Cheesecake

□ Deep fried green tomatoes

Edit: Changed to Anke's suggestion of filled and non-filled boxes, looks great!

So, hope my description makes sense - before you try to code it, sketch the process on paper. The Actual selected Recipe can be displayed in a Label Component (they automatically go multi-line depending on the content). 

[Amothan]

Wow, thanks a lot for your efforts. That's a lot to process, I will have a good look into it if I have the time.

Kurz zu meinem Ziel mit dieser App: es wird kein Spiel sondern eine Unterstützungs- bzw. Rezepte-App für ein Spiel (The Elder Scrolls Online) welches ich auf der PS4 zocke :) Nochmals vielen Dank für Deine Hilfe!

[BodyMindPower]

Ok, I got it. I've made a few small adjustments, see above (aia).

Gruß, Anke

[Amothan]

Good Morning everyone

Thank you Anke for the adjustments, it works well and I began to understand how everything works.

Now as Chris mentioned I made a little App concept how I imagine the app when it's finally developed (see the pdf file in attachement).

As I understood is the colouring for the recipe (the qualities are divided up in 1 / 2 / 3 / 4 / 5 ) texts not possible as I wish. But would there be another possibility to mark it?

@Chris I'm still working on the list, it's a lot of recipes 

[ABG]

If you want to display colored text, look into

the html option for labels.

Sample app:

https://docs.google.com/document/d/1ktIK4xUPMRC8IVEB_LkgnBYfgZQsUCRoXbUZVvAQZ0g/edit?usp=sharing

ABG

[Amothan]

Thanks a lot ABG!

[Amothan]

Hey Chris

I made the list for the recipes in cooking (with all the effects) how would you implement it that it looks like this:

Akaviri Pork Fried Rice Rank 1 

Effect: increase Max Health by 4460 for 35 minutes

When I try it I just can make it on on line with listview:

Akaviri Pork Fried Rice Rank 1 Effect: increase Max Health by 4460 for 35 minutes

Thanks in advance!

[Chris Ward]

Hi

Using a List View is a bit of a lottery - a lot depends on the size and resolution of the phone - if the description of an item is "long" the result is more than two lines.

You can force a new line by appending \n to the title of each item. Try the attached Project.

[Chris Ward]

Try this one, I think it is better.....

[Chris Ward]

... as an HTML file (attached)

Note, the Test Button in the test Projects is only there to enable changes while running the Companion or the Emulator without having to close or reset the App. Real-world, first list would be displayed on App start.

The HTML looks best in Landscape imo.

[Amothan]

Hey Chris

Thanks for your efforts. I really like the List_View2.aia! The only issue I have now is to find a solution to mark and save the recipes. I also liked the example from Anke, so I'm trying to combine these 2 to get my wished app (just maybe without the colours). Hopefully I get to the point in the app concept I made.

Again thank you all for your help, I already learned a lot!

EDIT: I discovered I can make checkboxes in html, so I'm trying to work with this.

[Chris Ward]

Hi Amothan

I read your post via my email and jumped on here to say look at HTML as a solution :)

The interesting thing is - your App can create/edit HTML files (Tables).

If you see this Topic:

https://groups.google.com/forum/?utm_medium=email&utm_source=footer#!msg/mitappinventortest/VdFWenIeKm0/fvip9IsKBAAJ

Download GetTable.aia

This actually "scrapes" a Table from a specific website - not applicable in your case, but it does show how to build an HTML file by simply combining Lists. Since the HTML is built in-App, adding, editing and removing List Items (rows) can be performed. An App Inventor App can "talk" to an HTML file via a simple JavaScript function: 

http://ai2.appinventor.mit.edu/reference/components/userinterface.html#WebViewer