B4J Library [BANano] Got it! - Easy Hints

Ola

For a while I have been fascinated by the curved hints when one visits website. They seem so cool. So here is one for BANano.

Nicely so, at the last step, I hide the skip button and change the text to Got it!


The original post in terms of creating this Contact Us form is discussed here.

https://www.b4x.com/android/forum/t...-an-email-with-inline-php.105983/#post-663498

For this exercise, we need to run the easy hints for our form. To do this we need the css and js files and the nice font files. The font files are zipped into a fonts.zip folder that is added to the Files Tab, after the BANano.Build method, this zip file is unzipped using SD_ZipLibrary and the content placed in the fonts file of the root folder for the app.

UOEEasyHint

• AddStep (eID As String, eDescription As String) As UOEEasyHint
  add a step for an element with a description
• AddClick (eID As String, eDescription As String) As UOEEasyHint
  add a click step for an element with a description. For example a button, the expection will be that it will be clicked.
• AddKeyPress (eID As String, eDescription As String) As UOEEasyHint
  add a key press event for an element, the expectation will be the user to type content and press enter
• EndsOn (eID As String)
  indicate the ending element for the hints
• HideSkip (eID As String) As UOEEasyHint
  hide the skip button for an element
• SetNextButton (eID As String, Text As String) As UOEEasyHint
  change the text for the next button of this element
• SetSkipButton (eID As String, Text As String) As UOEEasyHint
  change the skip button text for the element
• SetCircle (eID As String, radius As Int) As UOEEasyHint
  set a hint to be a circle for an element
• Run
  run the easyhint plugin

 

[Mashiane]

Let's ensure that the needed css and js files are added to the header.

BANano.Header.AddJavascriptFile("jquery.min.js")
    BANano.Header.AddCSSFile("skeleton-all.min.css")
    BANano.Header.AddJavascriptFile("https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.js")
    BANano.Header.AddCSSFile("enjoyhint.css")
    BANano.Header.AddJavascriptFile("enjoyhint.min.js")

We also need fonts, so, lets unzip the fonts file added in our Files tab... this code is executed after BANano.Build()

'unzip fonts folder
    Dim AssetsPath As String = "assets"
    Dim zf As String = File.Combine(Publish,$"${ShortName}/${AssetsPath}/fonts.zip"$)
    Dim zo As String = File.Combine(Publish,$"${ShortName}"$)
    Dim UnZL As SD_ZipLibray
    UnZL.Initialize
    UnZL.unZip(zf,zo)
    'delete zip File
    File.Delete("",zf)

 

[Mashiane]

Let's run the easy hints...

We want the hints to run as soon as the page is loaded. We change out Init method to ensure that all hints are added and then executed.

Sub Init
    BANano.LoadLayout("#body","vContact")
    easyHelp.Initialize
    easyHelp.AddStep("txtfullname","Enter your full name here!")
    easyHelp.AddStep("txtEmail","Enter your email address here!")
    easyHelp.AddStep("txtTelephone","Enter your cellphone number here starting with country code!")
    easyHelp.AddStep("txtMessage","Enter your enquiry here here!")
    easyHelp.AddStep("chkrobot","Check here to confirm you are not a robot!")
    easyHelp.AddStep("btnSend","Click here to send the message!")
    easyHelp.EndsOn("btnSend")
    easyHelp.SetCircle("btnSend",70)
    easyHelp.Run
End Sub

For each element in the page, we use its unique id and then add the description. For the btnSend button, we wanted a circle hint, we use SetCircle with a radius of 70 (see as depicted in the video).

Ta!

#HelpingOthersToSucceed

 

[Cableguy]

I really like your enthusiasm about BANano, and I like reading your posts... But this thread title just had me thinking, "he/she got it! 1M$!!"...
So, please edit your thread title to something more meaningful!

 

[Mashiane]

But this thread title just had me thinking

That was the point, lol.

 

[Kiffi]

Perhaps a little bit off-topic, but I find this pretty cool:

https://codepen.io/dsenneff/full/2c3e5bc86b372d5424b00edaf4990173

 

[Mashiane]

I find this pretty cool

This is sooo cool! people are really creative hey!

 

[Mashiane]

My son just showed me Thanos' gauntlet here (far right of screen), https://g.co/kgs/z6Ex6Q, cool effects when you click it and then the snap disintegrates the google search results.

 

[joulongleu]

Very good function, feels very cool.