Share My Creation Just an idea, but ...in evolution

Hello to all.
With my project 2014, born to learn something programming by the use of B4A, i tested many ways to use Dynamic Views to create single or complex elements by the direct use of the code,

What i present now is (as said) just an idea because there are some problems still to solve.
What is HelpG ? It is the possibility to assemble an help using Baloons created by dynamic elements to contain information concerning the views touched by the user into the Activity window.
To show what i mean the code you find here use some shortcut to show the final result.

In effects in this trial you may show each baloon by a long click event that is not the correct way to apply this kind of help to any object that you can use into your layout.
The application that you find here is based on a 320x480 screen only because the big problem is to make the method applied available automatically for any other kind of screen dimension.
But it is the time to see details.

First i created four images of a baloon with transparent background to load into files folder of the projects (format png)
Thence i addet to any view under the Long Click event the code to get position (left & Top) and dimension (heigth and width) of the existent .label or button.
So when you touch any item the data wil be passed. to the code that will create a dynamic imageview, will load the appropriate picture to use in that position and and will be created also a label into the baloon image to show the description selected for any element

But i think it is the time to pass to list the code used.
(may be a little confused but remember that this is an experiment only for the moment)

WARNING: This experimental code is now obsolete. Use the code below ("Evolution" message, no longer experimental)

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private Button1 As Button
    Private Button2 As Button
    Private Label1 As Label
    Private Label2 As Label
    Private Label3 As Label
    Private Label4 As Label
    Dim LL, TT, WW, HH As Int
    Dim K, BV, LN, qq As Int
    Dim TXT As String [/B]
    Dim Pictures(4) As String Array

End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    'Activity.LoadLayout("Layout1")
    Activity.LoadLayout("main")
    Pictures(0) = "Balo0.png"
    Pictures(1) = "Balo1.png"
    Pictures(2) = "Balo2.png"
    Pictures(3) = "Balo3.png"
    qq = Activity.NumberOfViews : BV = qq
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub CreaBal
Dim IV As ImageView
IV.Initialize("ImageView")
IV.BringToFront
IV.Visible = True
IV.Bitmap = LoadBitmap(File.DirAssets,Pictures(K))
If K = 0 Then Activity.AddView(IV, LL, TT, 100dip, 100dip)
If K = 1 Then Activity.AddView(IV, LL-(100dip-WW), TT, 100dip, 100dip)
If K = 2 Then Activity.AddView(IV, LL, TT-(100dip-HH), 100dip, 100dip)
If K = 3 Then Activity.AddView(IV, LL, TT-(100dip-HH), 100dip, 100dip)
Dim LB As Label
LB.Initialize("Label")
LB.BringToFront
LB.Visible = True
LB.Color = Colors.White
LB.TextColor = Colors.Black
If K = 0 Then Activity.AddView(LB, LL+6, TT+35, 83, 42)
If K = 1 Then Activity.AddView(LB, LL+6+(WW-100), TT+35, 83, 42)
If K = 2 Then Activity.AddView(LB, LL+6, TT-(100-HH)+25, 83, 42)
If K = 3 Then Activity.AddView(LB, LL+7, TT-(100-HH)+24, 83, 42)
LB.TextSize = 8
LB.Text = TXT
qq = Activity.NumberOfViews : LN = qq-1
End Sub

Sub ImageView_click
Dim IV As ImageView
IV.Initialize("ImageView")
IV = Sender
ClearList
End Sub

Sub Label_Click
Dim LB As Label
LB.Initialize("Label")
LB = Sender
ClearList
End Sub

Sub Label1_LongClick
LL = Label1.Left
TT = Label1.Top
WW = Label1.Width
HH = Label1.Height
SetPos
TXT = "This is the First test of a Baloon Graphic Help"
CreaBal
End Sub

Sub Label2_LongClick
LL = Label2.Left
TT = Label2.Top
WW = Label1.Width
HH = Label1.Height
SetPos
TXT = "This is the Second test of a Baloon Graphic Help"
CreaBal
End Sub

Sub Label3_LongClick
LL = Label3.Left
TT = Label3.Top
SetPos
TXT = "This is the standard format for the graphic help in center and left side of the page"
CreaBal
End Sub

Sub Label4_LongClick
LL = Label4.Left
TT = Label4.Top
WW = Label1.Width
HH = Label1.Height
SetPos
TXT = "This is the standard format for the graphic left on right side"
CreaBal
End Sub

Sub Button1_LongClick
LL = Button1.Left
TT = Button1.Top
WW = Button1.Width
HH = Button1.Height
SetPos
TXT = "This is the Graphic help format on the right bottom side"
CreaBal
End Sub

Sub Button2_LongClick
LL = Button2.Left
TT = Button2.Top
WW = Button2.Width
HH = Button2.Height
SetPos
TXT = "This is the Graphic help format on the left bottom side"
CreaBal 
End Sub

Sub SetPos
If LL < 160 AND TT < 340 Then K = 0
If LL > 160 AND TT < 340 Then K = 1
If LL < 160 AND TT > 340 Then K = 2
If LL > 160 AND TT > 340 Then K = 3
End Sub

Sub ClearList
qq = Activity.NumberOfViews
For m = LN To BV Step -1
   Activity.RemoveViewAt(m)
Next
TXT = "" : K = 0 : LL = 0 : TT = 0
End Sub

And this is all.
A last thing: click on a baloon to close all.
To be true already exist an avolution that use a panel to select the objects and show their relative Help Baloons with any kind of views (without using LongClick) but the problems are the same:

The baloon images have a fixed dimension and this does not allows to automatically adapt the project to different displays.
In addition, There is somebody that know how to exstract the coordinates and the dimensions of the views from the Designer to use them directly with the code ?

We will see what will be possible to do.
Please note once again : to show the correct use load the project on a 320x480 B4A emulator only. The use of this experimet on a real device may not work correctly.Thanks

 

[NJDude]

You should attach your project to the thread (on the IDE click on FILE -> EXPORT AS ZIP), and when posting code, please use the [code] ... [/code] tags.

 

[efsoft]

yes i know but, just a moment, i have something to do before

 

[efsoft]

The evolution
Hello to All.
Last time, after presenting you HelpG experimental version i wrote that a second version was already running even if there were some problem to solve.
I present you now this last version of Graphic Ballons Help with the problems solved.

Details of the solutions:
To use a Picture with fixed dimensions has been easily solved applying to the Dynamic ImageView the GRAVITY.FILL instruction that allows to show always the correctly a fully dimensioned image even if on different screen.

To apply the AutoSizeAll has been obtained with the usual creation by the designer of a slim "Label Guide" (Cyan color) with two different functions..
First. A long Click closes the Graphic HelpG and allows the normal use of the program.
(to test this execute the long Click and touch the EditText box between the buttons on top of the layout and you will see the Keyboard instead of the Baloon). Another long Click enable again the use of the HelpG.
Second. This Label has the dimension needed by the program (i.e the dimension of the squared Imagine view that corresponds to the Label width, while the Label Height has the dimension equal to the common denominator to all the other measures relating to Dynamic Views usee by the program.

Third. The previous code used had an array of strings created by reading the values of position (Left-Top) an dimensions (Width-Height) from the Designer.
The current program reads directly the coordinates needed to obtain the array of strings automatically so that the program can get the corrected data even when it is loaded on a device with different display data adapted by AutoSizeAll .
May be that the code is not the better and the more efficient to get the result but there will the time to revise and optimize or also change the code if any. Here is the new code that totally substitutes the previous version you found here
We suggest you to not use the Code of the first message now obsolete

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private Button1 As Button
    Private Button2 As Button
    Private Button3 As Button
    Private Button4 As Button
    Private EditText1 As EditText
    Private Label4 As Label
    Private ListView1 As ListView
    Private Lbl3 As Label
    Private Panel1 As Panel
 
 
    Dim D, K, NoViews As Int
    Dim LN, BV, qq As Int
    Dim Pictures(4) As String Array
    Dim Dmn As String
    Dim ArcPos(7)
    Dim LL, TT, WW, HH As Int
    Dim TXT, PosObj, NPos As String
    Dim Sx, Sy, Tx As Int
    Dim Valore, Coord, Ncoord As String
    Dim T(7)
    Dim V(7)
    Dim Pos(7)
    Dim Name, Linea, Linew, Coor As String
    Dim A, B, C, D As Int
       Dim nx, ny As Int
 
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    'Activity.LoadLayout("Layout1")
    Activity.LoadLayout("main")
       D = Activity.Width/2

    Pictures(0) = "Balo0.png"
    Pictures(1) = "Balo1.png"
    Pictures(2) = "Balo2.png"
    Pictures(3) = "Balo3.png"
     
    T(0) = "Select here the actions on Archive"
    T(1) = "Select here the actions on Record"
    T(2) = "Write here the Archive/Record wished"
    T(3) = "List of contents object of the actions"
    T(4) = "Click to lock-Long Click to close"
    T(5) = "List of the actions preselected"
    T(6) = "Reset actions data or the ended actions"
 
    qq = Activity.NumberOfViews : BV = qq
 
    NoViews = 6

    k = -1
    For i = 0 To NoViews : k = k+1
    V(i) = Activity.GetView(i)
    Linea = V(i)
    Tx = (Linea).IndexOf(":")
    Name = Linea.SubString2(0, Tx)
    Linew = Linea.SubString2(Tx+1, Linea.Length)
    Linea = Linew
    Cx = Linea.IndexOf(":")
    Coor = Linea.SubString2(Cx+1, Linea.Length)
    Pos(k) = Pos(k) & Coor & ","
    Linew = Linea.SubString2(Cx+1, Linea.Length)
    Linea = Linew 
    Next

For s = 0 To NoViews
Coord = Pos(s)
Do Until Coord.Length = 0
Tx = Coord.IndexOf(",")
Valore = Coord.Substring2(0,Tx)
  If Valore.Contains("Left=") = True Then A = Valore.Replace("Left=", " ")
  If Valore.Contains("Top=") = True Then B = Valore.Replace("Top=", " ")
  If Valore.Contains("Width=") = True Then C =Valore.Replace("Width=", " ")
  If Valore.Contains("Height=") = True Then D = Valore.Replace("Height=", " ")
Ncoord = Coord.SubString2(Tx+1, Coord.Length)
Coord = Ncoord
Loop
'Label4.Text = Label4.Text & A & "," & B & "," & C & "," & D & CRLF
ArcPos(s) = A & "," & B & "," & C & "," & D & "," & T(s)
Next
    qq = Activity.NumberOfViews : BV = qq
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub CreaBal
Dim IV As ImageView       
IV.Initialize("ImageView")
IV.BringToFront
IV.Gravity=Gravity.Fill
IV.Visible = True
IV.Bitmap = LoadBitmap(File.DirAssets,Pictures(K))
If K = 0 Then Activity.AddView(IV, LL, TT, Lbl3.Width, Lbl3.Width)
If K = 1 Then Activity.AddView(IV, LL-(Lbl3.Width-WW), TT, Lbl3.Width, Lbl3.Width)
If K = 2 Then Activity.AddView(IV, LL, TT-(Lbl3.Width-HH), Lbl3.Width, Lbl3.Width)
If K = 3 Then Activity.AddView(IV, LL, TT-(Lbl3.Width-HH), Lbl3.Width, Lbl3.Width)

Dim LB As Label
LB.Initialize("Label")
LB.BringToFront
LB.Visible = True
LB.Color = Colors.White
LB.TextColor = Colors.Black
If Activity.Height > Activity.Width Then
If K = 0 Then Activity.AddView(LB, LL+Lbl3.Height, TT+(5*Lbl3.Height), 12*Lbl3.Height-4dip, 6*Lbl3.Height)
If K = 1 Then Activity.AddView(LB, LL+Lbl3.Height+(WW-Lbl3.Width), TT+(5*Lbl3.Height), 12*Lbl3.Height-4dip, 6*Lbl3.Height)
If K = 2 Then Activity.AddView(LB, LL+Lbl3.Height, TT-(Lbl3.Width-HH)+3*Lbl3.Height+4dip, 12*Lbl3.Height-4dip, 6*Lbl3.Height)
If K = 3 Then Activity.AddView(LB, LL+Lbl3.Height, TT-(Lbl3.Width-HH)+3*Lbl3.Height+5dip, 12*Lbl3.Height-4dip, 6*Lbl3.Height)
Else
If K = 0 Then Activity.AddView(LB, LL+(Lbl3.Height), TT+(5*Lbl3.Height), 11*Lbl3.Height, 6*Lbl3.Height)
If K = 1 Then Activity.AddView(LB, LL+(Lbl3.Height)+(WW-Lbl3.Width), TT+(5*Lbl3.Height), 11*Lbl3.Height, 6*Lbl3.Height)
If K = 2 Then Activity.AddView(LB, LL+(Lbl3.Height), TT-(Lbl3.Width-HH)+3*Lbl3.Height, 11*Lbl3.Height, 6*Lbl3.Height)
If K = 3 Then Activity.AddView(LB, LL+(Lbl3.Height), TT-(Lbl3.Width-HH)+3*Lbl3.Height, 11*Lbl3.Height, 6*Lbl3.Height)
End If
LB.TextSize = Lbl3.TextSize
LB.Text = TXT
qq = Activity.NumberOfViews : LN = qq-1
End Sub

Sub SetPos
If LL < D AND TT < ((2*D)*3)/4 Then K = 0  '349
If LL > D AND TT < ((2*D)*3)/4 Then K = 1
If LL < D AND TT > ((2*D)*3)/4 Then K = 2
If LL > D AND TT > ((2*D)*3)/4 Then K = 3
CreaBal
End Sub

Sub ImageView_click
Dim IV As ImageView
IV.Initialize("ImageView")
IV = Sender
ClearList
End Sub

Sub Label_Click
Dim LB As Label
LB.Initialize("Label")
LB = Sender
ClearList
End Sub

Sub ClearList  
qq = Activity.NumberOfViews
For m = LN To BV Step -1
   Activity.RemoveViewAt(m)    
Next
TXT = "" : K = 0 : LL = 0 : TT = 0
End Sub

Sub Label3_Click
 
End Sub

Sub Panel1_Touch (Action As Int, X As Float, Y As Float) As Boolean
    If Action = Activity.ACTION_DOWN Then
        Sx = X
        Sy = Y
IdObj
    End If     
End Sub

Sub IdObj
For i = 0 To 6
PosObj = ArcPos(i)
For n = 0 To 3
Tx = (PosObj).IndexOf(",")
Dmn = PosObj.SubString2(0, Tx)
If n = 0 Then LL = Dmn
If n = 1 Then TT = Dmn
If n = 2 Then WW = Dmn
If n = 3 Then HH = Dmn
'If n = 4 Then TXT = Dmn
NPos = PosObj.SubString2(Tx+1, PosObj.Length)
PosObj = NPos
Next
If (Sx > LL AND Sx < LL+WW) AND (Sy > TT AND Sy < TT+HH) Then
TXT = PosObj
SetPos
End If
Next
End Sub

Sub Lbl3_LongClick
If Panel1.Enabled = True Then
Panel1.Enabled = False
Else
Panel1.Enabled = True
End If
End Sub

Remains something to say:
This new code uses a transparent panel to detect the View touched and to show the Baloon with help text.
This allow to use Baloon with any kind of Views (being no longer linked to the Long Click event as the previous project.
(in the sample layout you can find an EditText and a ListView in addition to the Buttons and Label)
The Panel may be activated/deactivated using the slim Cyan label as said.
The Panel and the Cyan label are the only objects to add to your Program's layout that may be whatever you use. It is necessary to add the two objects only when your layout has been fully defined because you will need to type the number of Views that will be used in the Graphic Help.
Note. If you use a different command to activate this Help do not eliminate the Cyan label that program uses to define the coordinates. Simply maintain the label invisible.
This code allows you to use the HelpG on both screen assets (portrait and Landscape)
(When applied to Landscape the result is not well optimized so i do not esclude to revise the project or modify somenting)
And that is all.

 

[efsoft]

To continue

Hello to all

HelpG as I had already written, now works but still needs development to become the desired tool .
What I mean is that HelpG should be a minimally invasive system to add a graphic help relating to any LayOut of a program
The last code published (The above one) uses the code "If Activity.Height > Activity.Width Then ...... "to control the variation of the coordinates in Portrait or Landscape needed to define the position where to write and to show help text.
But that solution needs also to optimize some variable to get best result.

In order to automatize the process and to avoid user intervention now a more simply solution, that is indipendent from checking the state of the screen, has been created and i I suggest you to replace the Sub CreaBal with the following code .

Sub CreaBal
Dim IV As ImageView       
IV.Initialize("ImageView")
IV.BringToFront
IV.Gravity=Gravity.Fill
IV.Visible = True
IV.Bitmap = LoadBitmap(File.DirAssets,Pictures(K))
If K = 0 Then Activity.AddView(IV, LL, TT, Lbl3.Width, Lbl3.Width)
If K = 1 Then Activity.AddView(IV, LL-(Lbl3.Width-WW), TT, Lbl3.Width, Lbl3.Width)
If K = 2 Then Activity.AddView(IV, LL, TT-(Lbl3.Width-HH), Lbl3.Width, Lbl3.Width)
If K = 3 Then Activity.AddView(IV, LL, TT-(Lbl3.Width-HH), Lbl3.Width, Lbl3.Width)

Dim LB As Label
LB.Initialize("Label")
LB.BringToFront
LB.Visible = True
LB.Color = Colors.White
LB.TextColor = Colors.Black
If K = 0 Then Activity.AddView(LB, LL+2*Lbl3.Height, TT+(5*Lbl3.Height), 10*Lbl3.Height, 6*Lbl3.Height)
If K = 1 Then Activity.AddView(LB, LL+2*Lbl3.Height+(WW-Lbl3.Width), TT+(5*Lbl3.Height), 10*Lbl3.Height, 6*Lbl3.Height)
If K = 2 Then Activity.AddView(LB, LL+2*Lbl3.Height, TT-(Lbl3.Width-HH)+3*Lbl3.Height, 10*Lbl3.Height, 6*Lbl3.Height)
If K = 3 Then Activity.AddView(LB, LL+2*Lbl3.Height, TT-(Lbl3.Width-HH)+3*Lbl3.Height, 10*Lbl3.Height, 6*Lbl3.Height)
LB.TextSize = Lbl3.TextSize
LB.Text = TXT
qq = Activity.NumberOfViews : LN = qq-1
End Sub

Please note that the user will need anyway to apply the most precise AutoScaleRate in relation to the size of the screen used to get the better result.

Unfortunately there are still problems to solve to get the full automatic adaptation of the HelpG to each LayOut to which it is applied
To say one of this as sample:
To link the HelpBaloons to each view of the LayOut it is necessary to use a Panel and create a support code to be able to recognize the view touched and get its cordinates on the screen, reading on the coordinates of your touch on the panel.
The solution found allows to use program correctly but does not allows to automatically add the help text to relaive views detected.
You need to check the corrispondence of the views' index and to correct, it if any, the help text to any different types of baloons to apply to each individual object..
There is not an easy solution for the moment but ........ never say never.

 

[LucaMs]

There are two problems:

users usually use Long Click to select an object (often to delete it);

users do not know this kind of tip.

Anyway, I look forward to your final chapter

 

[efsoft]

Hi LucaMs
and thank you for your attention.
Well, for what concerns the use of the "LongClick" this was used in the first version for the sole purpose of showing the operation in the experimental stage.
In addition to use an event that the developer would otherwise use in his project was not a viable solution also because this allows to use the Baloons with the a limited number of views.(Labels, buttons, etc.)
In fact, in the the second draft of the code I used a transparent panel tapping which you can extend the result to any kind of view without interfering with the code and the events of the main program to which the HelpG code is applied
It will not be easy to turn it into a short time in what should be but the beauty of programming is the pleasure of finding solutions.
PS E adesso, lasciando da parte il mio pessimo inglese.... grazie e alla prossima