Storyboard cards application

P

PaulMeuris

Active Member
Licensed User
Check out the new important updates in message # 6

You want to create a storyboard for a mobile app, you want to keep a scrapbook, you want to create a comic book, you want to make a Christmas card, … then this application might be the right one for you.
In the application you can create/load/save cards that have a backdrop image.


blankcard comiccard phonecard Xmascard …card

On a card you can stick (attach) any number of labels that have a background image or color and some text inside.
Here are some examples:



Read the storyboard_cards_30.pdf document for more information.
The shapes zip-file can be downloaded via this link: shapes.zip
And the source code is in the attached file storyboard_cards_30.zip
It would be nice if you could share some of your creations that you made with this application.
 

Attachments

  • Storyboard_cards_30.zip
    24.3 KB · Views: 154
  • storyboard_cards_30.pdf
    379.2 KB · Views: 190
Last edited:
P

PaulMeuris

Active Member
Licensed User

In this update i have added support for the resizing of a card or shape with the mouse.
When you hover over a card or shape then it gets a border of 10 pixels. A card gets a green border and a shape gets a blue border.
When you click and drag on the border then you can resize the card or shape.
Tip: use the bottom right corner and drag diagonal to upper left or lower right to get the best result.
This feature also reveals where the shapes are when you have checked the no border checkbox.
I have also fixed an issue with the loading and positioning of the shapes.
If you have remarks, tips, suggestions about this application please feel free to let me know.
The new source code is in the attachment.
 

Attachments

  • Storyboard_cards_31.zip
    24.9 KB · Views: 129
P

PaulMeuris

Active Member
Licensed User
In this update i have fixed some issues with:
- attaching children
- loading cards
- saving cards
You can see the parent and image file information in the message bar if you click on a shape.
The new source code is in the attachment.
 

Attachments

  • Storyboard_cards_32.zip
    25 KB · Views: 133
P

PaulMeuris

Active Member
Licensed User
A new update with some bug fixes and a few extra's: look for it in the attachments!
In the properties panel you can set some extra properties: name, type, event.

These properties can be filled with a reference to a B4X view.
You can then make a blank card with some views:

When you save that card you get a JSON file that has all the information to convert it to a bjl file that you can use in the IDE Visual Designer.
For this to work i have written a small testproject: testenvironment47.
In that testproject i convert the storyboard JSON to an intermediate JSON file that can then be converted using the BalConverter class from Erel.
The bjl file can then be opened and saved in the IDE Visual Designer. The image on the right above uses the layout file in a panel.
This is an addition to this thread: https://www.b4x.com/android/forum/threads/b4j-create-designer-files-at-runtime.153983/
I hope that a B.O.S.S. team member can find some more idea's on how to proceed with the B4XDesigner application.
 

Attachments

  • Storyboard_cards_33.zip
    25.6 KB · Views: 144
  • testenvironment47.zip
    122.4 KB · Views: 125

Magma

Expert
Licensed User
Longtime User
@PaulMeuris You are very "close" to the technique-of-reverse engineering we had...

You have nice ideas !
 
P

PaulMeuris

Active Member
Licensed User
EDIT: the version with the added test (see messages below) is in the attachments: Storyboard_cards_37.zip

Update : using viewtypes to be converted into views in bjl files
Some bugs were fixed and the use of the text color and background color have been reviewed.
In this update the shapes panel has undergone some changes.
If you create sub folders in the shapes folder then the content of these sub folders will be present in the tab page that gets the same name as the sub folder.
Let’s look at the folder structure once again:
C:\Users\<your username>\AppData\Roaming\storyboard_cards_30 contains 4 sub folders: cards, files, layouts, shapes.

cards: default folder for every card that you save.
files: default folder for every snapshot that you save.
layouts: the “card” shapes need to be copied in this folder!
shapes: the shapes images need to be copied in this folder or in its sub folder(s)! An example:

And this is how it looks like in the Storyboard card application:

You can use any name you like for a sub folder as long as it’s meaningful and not too long.
In the views sub folder you can find shape images that represent a view type.

If you specify the correct view type in the properties panel then that saved card with the attached shape(s) can be used to convert to a *.bjl file.
For this you can use the Layoutconverter application (see below).
You can download the zip-file with an example of the shapes folder and sub folders via this link: shapes_folders
You can find the source code of the Storyboard cards application in the attachments.

The new Layoutconverter application.​

This application replaces the testproject: testenvironment47.
Here is how it looks:

Click on the Source button to open a Storyboard cards JSON file.
Other JSON files will not be accepted!
If the JSON structure of the file is displayed then you can click on the Start button to start the conversion process.
If all went well then you get a message when the process is completed. The path and filenames are displayed in the labels.
The generated *.bjl file (see bottom label) can be loaded into the Visual Designer of the B4J IDE. Only B4J views and some B4X views are supported.
You can find the source code of the Layoutconverter application in the attachments.
 

Attachments

  • Storyboard_cards_36.zip
    26.7 KB · Views: 131
  • Layoutconverter_v3.zip
    12.9 KB · Views: 129
  • Storyboard_cards_37.zip
    26.7 KB · Views: 122
Last edited:

Magma

Expert
Licensed User
Longtime User
Excellent !

Layoutconverter seems very promisable !

Tried Storyboard... how you can have for example a pane with some text labels into it ?

Hope working with these steps:
1) Created blankcard... got into properties said that this is pane
2) Then create textlabel, got into properties said that this is label
3) Then select blankcard and press CTRL-A to attach as kid the textlabel... but getting error...
4) Then will try CTRL-S

but at the 3rd step gives error...

Wish the BEST !

* Also is it possible to have card into card... so then pane into pane and then children on it ?
 
Last edited:
P

PaulMeuris

Active Member
Licensed User
@Magma , thank you for testing this new update.
I tried to reproduce the error condition following the steps you described but i don't get an error.
Can you run the Storyboard application in debug mode and send me the error log?

These are the steps you can take to get a pane with some text labels (or other view shapes) in it:
1. select a card (blankcard, phonecard, ...) (this is the main pane, so you don't need to specify that)
2. select a shape (drawings - textlabel, views - ...) and position it within the boundaries of the card (if it is not already inside)
3. click on the shape, open the properties panel and select the matching type from the types combobox (Label, B4XCombobox, ...)
4. click on the card and press CRTL+A (or click one more time on it) to attach the shapes to the card. You can check the parent from the textlabel if you click on it.
5. click on the card and press CRTL+S to save the card. Choose a good name and click on save.

This is a multi-purpose application. It can be used for creating a storyboard for an app, creating a comic book, creating a scrapbook, and so on.
As for the creation of layout JSON files, that is just an added bonus.
At the moment there is only one level of nesting views: a card with view shapes of different viewtypes in it.
You can for instance have pane shapes inside a card and place other shapes on top of the pane shapes.
When you attach the shapes to the card they will all have the card as a parent. In the B4J IDE you can then specify which view belongs to which pane.
 

Magma

Expert
Licensed User
Longtime User

Ok... tried again the same.. when pressing Ctrl-A.. getting the following error..
running B4J with standard OpenJava 11

 
P

PaulMeuris

Active Member
Licensed User
It seems to be difficult to find the same situation in the Storyboard application as you have...
I would like to do some more testing. Can you send me the "export as zip" file from the project and a zip-file with the folders and sub folders you are using?
There is a difference somewhere...
Thank you
 

Magma

Expert
Licensed User
Longtime User
just found the bug (or the way)... After creating the label, need to click somewhere at canvas-background and then select blankcard and press Ctrl-A to attach as children... thats the way worked for me.
 
P

PaulMeuris

Active Member
Licensed User
O.K. but there is still a difference between your version and mine...
I would still like to see what you do to trigger the error. Maybe send me a screen recording via PM?
 

Magma

Expert
Licensed User
Longtime User
PaulMeuris said:
O.K. but there is still a difference between your version and mine...
I would still like to see what you do to trigger the error. Maybe send me a screen recording via PM?
Click to expand...
i will send the zip, also the zip of roaming (if helps)

also...
if i don't click anywhere at background and save (CTRL-S)... not saving the last item... so probably there was something wrong there...

* screen recording need some time...
 
P

PaulMeuris

Active Member
Licensed User
layouts: the “card” shapes need to be copied in this folder!
shapes: the shapes images need to be copied in this folder or in its sub folder(s)!
The Storyboard application did not test for the card shape coming from the layouts folder.
Copy the "card" shape images to the layouts folder and remove them from the shapes folder!
You can also use the zip-file from me with the folders.
You can add this test in the attach_children subroutine below the shapemap initialization:
B4X: 
    Dim pshapemap As Map = collectionmap.Get(ptag)
    Dim tagpath As String = pshapemap.Get("tag")
    If tagpath.Contains("\layouts\") = False Then
        xui.MsgboxAsync("The card shape is not present in the layouts folder!","Card")
        Return
    End If

Check the tabs in the shapes panel.
When you create a card (pane) the border is green!

Thanks again @Magma for helping me clear this up.
 

Magma

Expert
Licensed User
Longtime User
Now works properly... better have different file for cards (cards.zip) - or zip all folders of appdata\roaming\story... at one zip file
 
You must log in or register to reply here.

Similar Threads

  • Article
Android Example [B4X] AS Scheduler - MonthView HeatMap
Replies
0
Views
727
Alexander Stolte
Teaching Material for Middle and High Schools
2 3
Replies
44
Views
17K
stormvisions
S
W
  • Article
Android Tutorial Controlling Sonoff S20 smart power plugs [B4X] [Home Automation]
Replies
0
Views
2K
walt61
W
  • Question
Android Question [B4X] B4XPages - how to handle Activity_KeyPress
Replies
7
Views
5K
stevenindon
S
Games Inspiration: ”Let’s Make: Dangerous Dave”
Replies
0
Views
2K
Sandman
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…