Other SithasoDaisy 2 - The Power to Choose Edition Now Available

Hi there

Demo on Vercel

NB: Merging of CSS & JS SHOULD BE FALSE

B4X: 
BANano.TranspilerOptions.MergeAllCSSFiles = False
BANano.TranspilerOptions.MergeAllJavascriptFiles = False

It is with pleasure to announce The Power to Choose Edition of SithasoDaisy. Basically this collection of b4xlibs gives you the developer the power to choose which plugins you want included in your project. There is the core SithasoDaisy b4xlib and then additional b4xlibs that you can include in your project.

This project makes heavy use of the BANano "...later" directive to load css/js resources, for as and when needed.

The attached document shows you whats new and how to migrate your projects. You can also explore the attached "demo" app to explore more functionality of how we have done it.

As a SithasoDaisy user, please feel free to explore, make suggestions, critisize in a kind way. Get it from the same location. The files are suffixed with 2.

Yours

Mashy

PS: The demo application contains everything on SithasoDaisy. Please test the beta with your own projects and then please comment / ask question down here on anything you experience I humbly thank you.


Screenshot_1.jpg


Update: Migrating from V1 to V2

1. Ensure that all the b4xlibs from SithasoDaisy are sitting in your Additional Libraries folder.

2. Add this sub to pgIndex

B4X: 
Sub AddUses
    'uncomment unused
    BANano.Await(app.UsesPDF)
    BANano.Await(app.UsesExcel)
    BANano.Await(app.UsesCSV)
    BANano.Await(app.UsesEnjoyHint)
    BANano.Await(app.UsesFlatPickDateTime)
    BANano.Await(app.UsesRollDate)
    BANano.Await(app.UsesPocketBase)
    BANano.Await(app.UsesFlipPage)
    BANano.Await(app.UsesTimeLine)
    BANano.Await(app.UsesGridNav)
    BANano.Await(app.UsesChartKick)
    BANano.Await(app.UsesQRCode)
    BANano.Await(app.UsesBarCodeReader)
    BANano.Await(app.UsesWebCam)
    BANano.Await(app.UsesAxios)
    BANano.Await(app.UsesLottiePlayer)
    BANano.Await(app.UsesDocxTemplator)
    BANano.Await(app.UsesHTMLParser)
    BANano.Await(app.UsesLZCompressString)
    BANano.Await(app.UsesFullCalendar)
    BANano.Await(app.UsesDevice)
    BANano.Await(app.UsesKanBan)
    BANano.Await(app.UsesAES)
    BANano.Await(app.UsesGMaps)
    BANano.Await(app.UsesAES4PHP)
    BANano.Await(app.UsesToastChart)
    BANano.Await(app.UsesMockupCode)
    BANano.Await(app.UsesFireBase)
    BANano.Await(app.UsesSupaBase)
    BANano.Await(app.UsesRelax)
    BANano.Await(app.UsesGijgo)
    BANano.Await(app.UsesJustGage)
    BANano.Await(app.UsesFluidMeter)
    BANano.Await(app.UsesFrappeGantt)
    BANano.Await(app.UsesEvoCalendar)
    BANano.Await(app.UsesDropZone)
    BANano.Await(app.UsesCollectJS)
    BANano.Await(app.UsesSwiper)
End Sub

Please note, you can remove the Use calls of the libs you wont use.

Update the pgIndex.Initialize call to include a call to the new sub

B4X: 
Sub Initialize                    'ignoreDeadCode
    'initialize the app
    BANano.Await(app.AddApp(Me, Main.AppName))
    BANano.Await(AddUses)

3. Ensure you select all the Libraries starting with SithasoDaisy... in Libraries

1697060303339.png


1697060348276.png


Also from this list, you can remove the libs you wont need in your app and also the Use calls that wont be needed.

OPTIONAL: DO NOT SELECT THESE LIBRARIES, They are already included internally in SithasoDaisy b4xlib and are part of the core.

1697060620562.png


The above Use case is for the SithasoDaisyDemo, depending on your project, the Use calls and b4xlibs used might be different, depending on your needs.

Related Content


[Web] SithasoDaisy - Deferring CSS & JS Files so that they are loaded ONLY when needed.

Ola Demo on Vercel One of the nice things about BANano is the built in functionality around LoadJS. I noted this on the console log when I was updating some stuff on the SithasoDaisy b4xlib and trying this "..ForLater" terminology. LoadJS is a tiny async loading library for modern browsers...
www.b4x.com www.b4x.com
 
Last edited:
Click to expand...
JGParamo

JGParamo

Member
Licensed User
I do intend to use it in my project and trying out SithasoDaisy 2, I have these initial observations:
1. Browser tab icon (favicon) doesn't show on Firefox but Google Chrome and MS Edge does show it and haven't resolved this;
2. In the welcome code module, tried to use the SDUILottiePlayer but this does not show, I have tried to add the code banano.Await(app.UsesLottiePlayer) before the Dim lp As SDUILottiePlayer and it worked, code snippet shown below;
3. demoSupabase contains a layout code referencing to adsupabaselayout that does not exist thus results to transpiling error "[ERROR 83]: [demoSupabase,show: 25] LoadLayout: No layout found named: adsupabaselayout!" so just commented it out;
4. Certain drawer items don't show image icons, particularly Actions-Code Buttons, Buttons Group, etc. as shown below;
5. Plug-ins GMAP doesn't show the map so at the pgIndex, uncommenting "'app.UseGMap("AIzaSyAsEYr3kugoc-yUhn-llCNiyx6f2lkYgps", demoGMap, "SDUIGMap1")" resolves this.

Have I done it correctly or are there other better way to address my observations? Thanks Mashiane..

welcome code module private Sub BuildPage: 
    banano.Await(app.UsesLottiePlayer)
    Dim lp As SDUILottiePlayer
    lp.AddLottiePlayer(Me, page.Cell(1, 1).Name, "lp1")
    lp.JsonUrl = "./assets/liftoff.json"
    lp.Width = "250px"
    lp.Height = "250px"
    lp.AutoPlay = True
    lp.IsLoop = True
    lp.Root.m(4)

Commented-out in Sub Show(duiapp As SDUIApp): 
    ...
    banano.Await(app.UsesSupaBase)
    'page.AddPage(Me, name)
    'page.Root.p(6)
'    banano.LoadLayout(app.PageViewer, "adsupabaselayout")
    '...
    Dim my_url As String = "https://fycctdrbjqxgtzlgrjjh.supabase.co"
    Dim my_key As String = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImZ5Y2N0ZHJianF4Z3R6bGdyampoIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NzA5NDcwNTIsImV4cCI6MTk4NjUyMzA1Mn0.NAUFczJ5s5jQ4Y9dtzQQJOUufSr50F2j0wu57AammVY"
    '

Uncommented a code at pgIndex: 
Sub Initialize                    'ignoreDeadCode
    'initialize the app
    ...
    '
    'app.UseGMap("AIzaSyAsEYr3kugoc-yUhn-llCNiyx6f2lkYgps", demoGMap, "SDUIGMap1")
    app.UseGMap("AIzaSyAsEYr3kugoc-yUhn-llCNiyx6f2lkYgps", demoGMap, "SDUIGMap1")
 
    'add a navbar to the content for PAGE
    CreateAppNavBar

1690855977708.png
 
Last edited:
Mashiane

Mashiane

Expert
Licensed User
Longtime User
JGParamo said:
I do intend to use it in my project and trying out SithasoDaisy 2, I have these initial observations:
1. Browser tab icon (favicon) doesn't show on Firefox but Google Chrome and MS Edge does show it and haven't resolved this;
2. In the welcome code module, tried to use the SDUILottiePlayer but this does not show, I have tried to add the code banano.Await(app.UsesLottiePlayer) before the Dim lp As SDUILottiePlayer and it worked, code snippet shown below;
3. demoSupabase contains a layout code referencing to adsupabaselayout that does not exist thus results to transpiling error "[ERROR 83]: [demoSupabase,show: 25] LoadLayout: No layout found named: adsupabaselayout!" so just comment it out;
4. Certain drawer items don't show image icons, particularly Actions-Code Buttons, Buttons Group, etc. as shown below;
5. Plug-ins GMAP doesn't show the map so at the pgIndex, uncommenting "'app.UseGMap("AIzaSyAsEYr3kugoc-yUhn-llCNiyx6f2lkYgps", demoGMap, "SDUIGMap1")" resolves this.

Have I done it correctly or are there other better way to address my observations? Thanks Mashiane..

welcome code module private Sub BuildPage: 
    banano.Await(app.UsesLottiePlayer)
    Dim lp As SDUILottiePlayer
    lp.AddLottiePlayer(Me, page.Cell(1, 1).Name, "lp1")
    lp.JsonUrl = "./assets/liftoff.json"
    lp.Width = "250px"
    lp.Height = "250px"
    lp.AutoPlay = True
    lp.IsLoop = True
    lp.Root.m(4)

Commented-out in Sub Show(duiapp As SDUIApp): 
    ...
    banano.Await(app.UsesSupaBase)
    'page.AddPage(Me, name)
    'page.Root.p(6)
'    banano.LoadLayout(app.PageViewer, "adsupabaselayout")
    '...
    Dim my_url As String = "https://fycctdrbjqxgtzlgrjjh.supabase.co"
    Dim my_key As String = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImZ5Y2N0ZHJianF4Z3R6bGdyampoIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NzA5NDcwNTIsImV4cCI6MTk4NjUyMzA1Mn0.NAUFczJ5s5jQ4Y9dtzQQJOUufSr50F2j0wu57AammVY"
    '

Uncommented a code at pgIndex: 
Sub Initialize                    'ignoreDeadCode
    'initialize the app
    ...
    '
    'app.UseGMap("AIzaSyAsEYr3kugoc-yUhn-llCNiyx6f2lkYgps", demoGMap, "SDUIGMap1")
    app.UseGMap("AIzaSyAsEYr3kugoc-yUhn-llCNiyx6f2lkYgps", demoGMap, "SDUIGMap1")
 
    'add a navbar to the content for PAGE
    CreateAppNavBar

View attachment 144311
Click to expand...
Thank you so much for this feedback, I will look into these and revert.
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
JGParamo said:
2. In the welcome code module, tried to use the SDUILottiePlayer but this does not show,
Click to expand...
Great that you got it to work. In the running demo, which has

B4X: 
'sub to show the page
Sub Show(duiapp As SDUIApp)            'ignore
    'initialize the page
    'this clears the 'pageview'
    page.AddPage(Me, name)
    page.Root.p(6)
    'get the reference to the app
    app = duiapp
    'app.PagePause
    'banano.Await(app.UsesLottiePlayer)
    'build the page, via code or loadlayouts
    BuildPage
    'app.PageResume
End Sub

The 'banano.Await(app.UsesLottiePlayer) is commented. I had decided to use an image this time around because loading the lottie json file takes time. Due to that intensity it does not make sense for first paint to load resource intensive stuff. This is due to add attempts to make ones webapp load faster. It is also best recommended to add the Uses.. calls on the Show sub in case one forgets.

1690873208594.png
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
JGParamo said:
Plug-ins GMAP doesn't show the map
Click to expand...
I was trying to get this to work on the page its used in, being demoGMap, with..

B4X: 
'sub to show the page
Sub Show(duiapp As SDUIApp)            'ignore
    'get the reference to the app
    app = duiapp
    banano.Await(app.UseGMap("AIzaSyAsEYr3kugoc-yUhn-llCNiyx6f2lkYgps", Me, "SDUIGMap1"))
    
    'load the page layout to the pageviewer
    banano.LoadLayout(app.PageViewer, "gmap1layout")
    'SDUIGMap1.addLayer("weather", True)
    SDUIGMap1.addLayer("traffic", True)
    'SDUIGMap1.addLayer("transit", True)
    'SDUIGMap1.addLayer("bicycling", True)
    'SDUIGMap1.addLayer("clouds", True)
    'build the page, via code or loadlayouts
    BuildPage
End Sub

I guess let me leave it as it was before. It was working after all. ;)

Will update.

Thanks a lot!
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
JGParamo said:
How is this done, any sample code? Thanks.
Click to expand...
1. Decide which components will be used by 80% + of your app, load these in pgIndex.

In the demo for example.., we call AddUses

1690874910045.png


The code is...

B4X: 
Sub AddUses
    'add stuff to use in the project
    'comment unused
    BANano.Await(app.UsesJQuery)
    'BANano.Await(app.UsesFlipPage)
    'BANano.Await(app.UsesTimeLine)
    'BANano.Await(app.UsesGridNav)
    'BANano.Await(app.UsesAxios)
    BANano.Await(app.UsesHTMLParser)
    BANano.Await(app.UsesMockupCode)
            
    'BANano.Await(app.UsesFireBase)
    'BANano.Await(app.UsesRelax)
    
    'BANano.Await(app.UsesDropZone)
    'BANano.Await(app.UsesCollectJS)
    'BANano.Await(app.UsesDocxTemplator)
End Sub

One can get all the "Use..." calls by copying them from this helper sub (the sub itself NEVER executes any code and is just there to help with the calls.

B4X: 
app.AddUses

1690875155910.png


This gives one

B4X: 
'uncomment unused
BANano.Await(app.UsesJQuery)
Banano.Await(app.UsesPDF)
Banano.Await(app.UsesExcel)
Banano.Await(app.UsesCSV)
Banano.Await(app.UsesEnjoyHint)
Banano.Await(app.UsesFlatPickDateTime)
Banano.Await(app.UsesRollDate)
Banano.Await(app.UsesTable)
'Banano.Await(app.UsesPocketBase)
'Banano.Await(app.UsesFlipPage)
'Banano.Await(app.UsesTimeLine)
'Banano.Await(app.UsesGridNav)
'Banano.Await(app.UsesChartKick)
'Banano.Await(app.UsesQRCode)
'Banano.Await(app.UsesBarCodeReader)
'Banano.Await(app.UsesWebCam)
'Banano.Await(app.UsesAxios)
'Banano.Await(app.UsesLottiePlayer)
'Banano.Await(app.UsesDocxTemplator)
'Banano.Await(app.UsesHTMLParser)
'Banano.Await(app.UsesLZCompressString)
'Banano.Await(app.UsesFullCalendar)
'Banano.Await(app.UsesSignaturePad)
'Banano.Await(app.UsesDevice)
'Banano.Await(app.UsesKanBan)
'Banano.Await(app.UsesAES)
'Banano.Await(app.UsesGMaps)
'Banano.Await(app.UsesAES4PHP)
'Banano.Await(app.UsesToastChart)
'Banano.Await(app.UsesMockupCode)
'Banano.Await(app.UsesFireBase)
'Banano.Await(app.UsesSupaBase)
'Banano.Await(app.UsesRelax)
'Banano.Await(app.UsesGijgo)
'Banano.Await(app.UsesJustGage)
'Banano.Await(app.UsesFluidMeter)
'Banano.Await(app.UsesFrappeGantt)
'Banano.Await(app.UsesEvoCalendar)
'Banano.Await(app.UsesDropZone)
'Banano.Await(app.UsesCollectJS)

As an example, in the demoADLottie player code module, because our app uses the Lottie player there, we will have added a call to use the lottie player there.

B4X: 
'sub to show the page
Sub Show(duiapp As SDUIApp)            'ignore
    'get the reference to the app
    app = duiapp
    app.PagePause
    banano.Await(app.UsesLottiePlayer)
    banano.LoadLayout(app.PageViewer, "adlottieplayerlayout")
    pgIndex.ShowDesign
    pgIndex.ClearDesign
    pgIndex.AddDesignKV("", "--Nothing Selected--")
    pgIndex.AddDesignKV1("SDUIPage.page", "page", page.CustProps)
    pgIndex.AddDesignKV1("SDUILottiePlayer.SDUILottiePlayer1", "SDUILottiePlayer1", SDUILottiePlayer1.CustProps)

    'build the page, via code or loadlayouts
    BuildPage
    app.PageResume
End Sub

These kind of calls are spread accross the demo...

1690875489567.png
 
JGParamo

JGParamo

Member
Licensed User
Mashiane said:
This is because the icon variable on the code modules is blank. I will update these for completeness.
Click to expand...
It looks like there are only 4 of the icon variable strings to choose from: "fa-solid fa-house-chimney", "fa-solid fa-swatchbook", "fa-solid fa-text-slash", "fa-solid fa-pager" and would be useful if more can be available. :)
 
Last edited:
Mashiane

Mashiane

Expert
Licensed User
Longtime User
JGParamo said:
It looks like there are only 3 of the icon variable strings to choose from: "fa-solid fa-house-chimney", "fa-solid fa-swatchbook", "fa-solid fa-text-slash", "fa-solid fa-pager" and would be useful if more can be available. :)
Click to expand...
One can use any icon from fontawesome free collecton.

fontawesome.com

Free Icons | Font Awesome

Search all of Font Awesome's free and Open Source icons. Then use them wherever and however you want.
fontawesome.com fontawesome.com

This is made possible by including the lib:

1690876532647.png
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
JGParamo said:
It looks like there are only 4 of the icon variable strings to choose from:
Click to expand...
Did you see the Mini CRM WebApp, it has a variety of icons too. ;)


1690878139396.png


SithasoDaisy: PocketBase - Mini CRM WebApp Source Code @ $5.00

Hi there NB: Download and run PocketBase and set up an admin account there first. Here is the link Demo hosted on Vercel. Disclaimer: The back-end (PocketBase) for this demo is hosted on PocketHost.IO (SAAS Company), which is not optimal for production usage. Ceveat: WebApp Slow in accessing...
www.b4x.com www.b4x.com

SithasoDaisy: Mini CRM WebApp - MySQL - Source Code @ $5.00

Hi there This version of the Mini CRM is based on our famous SithasoDaisy Mini CRM - Pocketbase. What is new with this version? MySQL backend (PHP), no PocketBase necessary. Deployable on Shared Hosting Environments. The PocketBase version is a SQLite WebServer on its own and can be deployed...
www.b4x.com www.b4x.com
 
JGParamo

JGParamo

Member
Licensed User
Mashiane said:
One can use any icon from fontawesome free collecton.
Click to expand...
Thanks on this, I have used the icons from this source and modified the codes in pgIndex module for right and left drawers so a certain icon can be used. Is there other efficient means to show such icons or any drawback on my approach?

Modified pgIndex module "Layouts - Code": 
    'LAYOUT
    drawer.AddItem("layouts", "Layouts - Code")
    drawer.AddItemChildPage("layouts", demoDesignGrid)
    drawer.AddItemChildPage("layouts", demoArtBoard)
    drawer.AddItemChildPage("layouts", demoDivider)
    'these activate other things
'    drawer.AddItemChild("layouts", "rightdrawer", "Right Drawer")
    drawer.AddItemIcon("layouts", "rightdrawer", "fa-solid fa-circle-left fa-rotate-180", "Right Drawer")
'    drawer.AddItemChild("layouts", "leftdrawer", "Left Drawer")
    drawer.AddItemIcon("layouts", "leftdrawer", "fa-solid fa-circle-left", "Left Drawer")
 
    drawer.AddItemChildPage("layouts", demoFooter)


1691026371383.png
 
Last edited:
JGParamo

JGParamo

Member
Licensed User
The drawer child with href strings in the Needful Things don't work, if these supposed to open the url when clicked (I have made the parentID unique and the tw ID string consistent with the label). Also, I didn't find a way to show an icon for each drawer child item with href that will open a new window.

B4X: 
    '
    drawer.AddItem("nt", "Needful Things")
    drawer.AddItemChildLink("nt", "tw", "Tailwind Awesome", "https://www.tailwindawesome.com", "_blank")
    drawer.AddItemChildLink("nt", "pb", "PocketBase", "https://pocketbase.io/", "_blank")
    drawer.AddItemChildLink("nt", "pbh", "PocketBase Host", "https://pockethost.io/", "_blank")
    drawer.AddItemChildLink("nt", "pouchdb", "PouchDb", "https://pouchdb.com", "_blank")
    drawer.AddItemChildLink("nt", "sb", "SupaBase", "https://supabase.com/", "_blank")
    drawer.AddItemChildLink("nt", "twc", "Tailwind Components", "https://tailwindcomponents.com/", "_blank")
    drawer.AddItemChildLink("nt", "twfb", "FlowBite", "https://flowbite.com/", "_blank")
    drawer.AddItemChildLink("nt", "twui", "TailwindUI", "https://tailwindui.com/", "_blank")
    drawer.AddItemChildLink("nt", "twwui", "WindUI", "https://wind-ui.com/", "_blank")
    drawer.AddItemChildLink("nt", "twmui", "MambaUI", "https://mambaui.com/", "_blank")
    drawer.AddItemChildLink("nt", "twmerui", "MerakiUI", "https://merakiui.com/", "_blank")
    drawer.AddItemChildLink("nt", "pwafire", "PWA Fire", "https://pwafire.org/", "_blank")
    drawer.AddItemChildLink("nt", "pwa-asset-generator", "PWA Asset Generator", "https://github.com/elegantapp/pwa-asset-generator", "_blank")
    drawer.AddItemChildLink("nt", "codeh", "CodeHim", "https://www.codehim.com/", "_blank")
    drawer.AddItemChildLink("nt", "onair", "OnAirCode", "https://onaircode.com/", "_blank")
    drawer.AddItemChildLink("nt", "twcss", "TailwindCSS", "https://tailwindcss.com/", "_blank")
    drawer.AddItemChildLink("nt", "twtlb", "Tailwind ToolBox", "https://www.tailwindtoolbox.com/", "_blank")
    drawer.AddItemChildLink("nt", "twelee", "Tailwind Elements", "https://tailwind-elements.com/", "_blank")
    drawer.AddItemChildLink("nt", "hypeui", "Hyper UI", "https://www.hyperui.dev/", "_blank")
    drawer.AddItemChildLink("nt", "preline", "Preline", "https://preline.co/index.html", "_blank")

1691085382853.png
 
Last edited:
JGParamo

JGParamo

Member
Licensed User
Mashiane said:
Did you see the Mini CRM WebApp, it has a variety of icons too. ;)
Click to expand...
I am interested on paying for the source code of the Mini CRM WebApp but can I incorporate it within my project based on the SithasoDaisy 2 demo webapp and how?
 
Last edited:
You must log in or register to reply here.

Similar Threads

Mashiane
  • Article
Share My Creation [Web] Extended BLACK FRIDAY SALE @ 50% Off (SithasoDaisy & SithasoIONIC7)
Replies
13
Views
1K
Mashiane
Mashiane
Mashiane
  • Article
Share My Creation SithasoDaisy WebApps @ $5 Each
Replies
12
Views
3K
Mashiane
Mashiane
Mashiane
  • Article
Share My Creation SithasoDaisy: PocketBase - Chatroom using Server Side Events (SSE)
Replies
2
Views
2K
amorosik
amorosik
Mashiane
SithasoDaisy: Mashy Teaches TailwindCSS using b4x (with eBook)
4 5 6
Replies
105
Views
15K
Mashiane
Mashiane
Mashiane
  • Article
B4J Library [Web] SithasoDaisy: TailwindCss WebApps powered by B4x & BANano
2 3 4
Replies
77
Views
10K
Mashiane
Mashiane
Top