Storyboard cards application

[PaulMeuris]

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.

 

[PaulMeuris]

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.

 

[PaulMeuris]

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.

 

[PaulMeuris]

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.

 

[Magma]

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

You have nice ideas !

 

[PaulMeuris]

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.

 

[Magma]

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.
View attachment 149566
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:
View attachment 149567
And this is how it looks like in the Storyboard card application:
View attachment 149568
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.
View attachment 149569 View attachment 149570
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:
View attachment 149572
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.

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 ?

 

[PaulMeuris]

@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]

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.

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

Waiting for debugger to connect...
Program started.
*** mainpage: B4XPage_Created
*** mainpage: B4XPage_Appear
Error occurred on line: 972 (B4XMainPage)
java.lang.ClassCastException: class javafx.scene.control.Label cannot be cast to class javafx.scene.layout.Pane (javafx.scene.control.Label is in module javafx.controls of loader 'app'; javafx.scene.layout.Pane is in module javafx.graphics of loader 'app')
at anywheresoftware.b4j.objects.PaneWrapper.getNumberOfNodes(PaneWrapper.java:369)
at anywheresoftware.b4j.objects.PaneWrapper.AddNode(PaneWrapper.java:311)
at anywheresoftware.b4a.objects.B4XViewWrapper.AddView(B4XViewWrapper.java:545)
at b4j.storyboard_cards_30.b4xmainpage._attach_children(b4xmainpage.java:354)
at b4j.storyboard_cards_30.main._main_keypressed_event(main.java:166)
at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.base/java.lang.reflect.Method.invoke(Method.java:566)
at anywheresoftware.b4a.shell.Shell.runMethod(Shell.java:629)
at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:237)
at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:167)
at jdk.internal.reflect.GeneratedMethodAccessor3.invoke(Unknown Source)
at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.base/java.lang.reflect.Method.invoke(Method.java:566)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:111)
at anywheresoftware.b4a.shell.ShellBA.raiseEvent2(ShellBA.java:100)
at anywheresoftware.b4a.BA.raiseEvent(BA.java:98)
at anywheresoftware.b4j.agraham.reflection.Reflection$4.handle(Reflection.java:282)
at javafx.base/com.sun.javafx.event.CompositeEventHandler$NormalEventHandlerRecord.handleBubblingEvent(CompositeEventHandler.java:218)
at javafx.base/com.sun.javafx.event.CompositeEventHandler.dispatchBubblingEvent(CompositeEventHandler.java:80)
at javafx.base/com.sun.javafx.event.EventHandlerManager.dispatchBubblingEvent(EventHandlerManager.java:238)
at javafx.base/com.sun.javafx.event.EventHandlerManager.dispatchBubblingEvent(EventHandlerManager.java:191)
at javafx.base/com.sun.javafx.event.CompositeEventDispatcher.dispatchBubblingEvent(CompositeEventDispatcher.java:59)
at javafx.base/com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:58)
at javafx.base/com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
at javafx.base/com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:56)
at javafx.base/com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
at javafx.base/com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:56)
at javafx.base/com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
at javafx.base/com.sun.javafx.event.EventUtil.fireEventImpl(EventUtil.java:74)
at javafx.base/com.sun.javafx.event.EventUtil.fireEvent(EventUtil.java:54)
at javafx.base/javafx.event.Event.fireEvent(Event.java:198)
at javafx.graphics/javafx.scene.Scene$KeyHandler.process(Scene.java:4058)
at javafx.graphics/javafx.scene.Scene$KeyHandler.access$1500(Scene.java:4004)
at javafx.graphics/javafx.scene.Scene.processKeyEvent(Scene.java:2121)
at javafx.graphics/javafx.scene.Scene$ScenePeerListener.keyEvent(Scene.java:2595)
at javafx.graphics/com.sun.javafx.tk.quantum.GlassViewEventHandler$KeyEventNotification.run(GlassViewEventHandler.java:217)
at javafx.graphics/com.sun.javafx.tk.quantum.GlassViewEventHandler$KeyEventNotification.run(GlassViewEventHandler.java:149)
at java.base/java.security.AccessController.doPrivileged(Native Method)
at javafx.graphics/com.sun.javafx.tk.quantum.GlassViewEventHandler.lambda$handleKeyEvent$1(GlassViewEventHandler.java:248)
at javafx.graphics/com.sun.javafx.tk.quantum.QuantumToolkit.runWithoutRenderLock(QuantumToolkit.java:390)
at javafx.graphics/com.sun.javafx.tk.quantum.GlassViewEventHandler.handleKeyEvent(GlassViewEventHandler.java:247)
at javafx.graphics/com.sun.glass.ui.View.handleKeyEvent(View.java:547)
at javafx.graphics/com.sun.glass.ui.View.notifyKey(View.java:971)
at javafx.graphics/com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
at javafx.graphics/com.sun.glass.ui.win.WinApplication.lambda$runLoop$3(WinApplication.java:174)
at java.base/java.lang.Thread.run(Thread.java:834)

 

[PaulMeuris]

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]

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

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.

 

[PaulMeuris]

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]

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?

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...

 

[Magma]

with lower colors... to keep size small:

 

[PaulMeuris]

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:

    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]

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:

    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.

Now works properly... better have different file for cards (cards.zip) - or zip all folders of appdata\roaming\story... at one zip file

 

[PaulMeuris]

You can download the zip-file with an example of the shapes folder and sub folders via this link: shapes_folders

At your service...