Jquery Plugin Canvas Gadget

Using Javascript from SpiderBasic
Turtle
Posts: 3
Joined: Wed Oct 26, 2016 4:17 am

Jquery Plugin Canvas Gadget

Post by Turtle »

Hello,
is there a way to use this Plugin in Spiderbasic?
http://www.jqueryscript.net/text/Scroll ... lugin.html

Best regards
Turtle
falsam
Posts: 280
Joined: Mon May 05, 2014 9:49 pm
Location: France
Contact:

Re: Jquery Plugin Canvas Gadget

Post by falsam »

is there a way to use this Plugin in Spiderbasic?
Yes it's possible

■ Demo : http://falsam.com/sbtest/leddisplay.html

■ Code

Code: Select all

Enumeration
  #mf
EndEnumeration

Procedure.i WindowElement(Window, UseJquery.b=#True)
  Protected winObject=WindowID(Window) 
  
  !return (v_winobject && v_winobject.element)? v_usejquery? $(v_winobject.element):v_winobject.element:null; 
EndProcedure

Procedure dominsert(window.i, value.s)
  Protected windowObject=WindowElement(window) 
  
  ! var selector = v_windowobject.find('.spiderwindow-content') 
  ! selector.append(v_value)  
EndProcedure

Procedure.i LoadAsynchronously(FileName.s, *OnLoadFunction, FileType.s)
  !return $.ajax({ url:v_filename, dataType:v_filetype, beforeSend:function(jqxhr, settings) { jqxhr.url = settings.url; } })
  !.done(function(data, status, jqxhr) { p_onloadfunction(data,status,jqxhr.url); })
  !.fail(function(jqxhr, status, errorThrown) { p_onloadfunction('',status,jqxhr.url,jqxhr.status,errorThrown); });
EndProcedure 

Procedure LoadScript(FileName.s, *OnLoadFunction)
  ProcedureReturn LoadAsynchronously(FileName, *OnLoadFunction, "script")
EndProcedure

Procedure Loading(content.s, status.s, url.s, errorCode, error.s)
  If status<>"success"
    Debug "Loading: FAILED"
    Debug "File: "+url
    Debug "Error code: "+errorCode 
    Select errorCode 
      Case 401 : Debug "Error: Authentification Failed"
      Case 404 : Debug "Error: File Not Found"
      Case 500 : Debug "Error: Server Failed"
      Case 504 : Debug "Error: Server Timeout" 
      Default : Debug "Error: "+error
    EndSelect 
    Debug ""
    ProcedureReturn
  EndIf 
  
  OpenWindow(#mf, 0, 0, 360, 80, "Led Display", #PB_Window_ScreenCentered)  
  SetWindowColor(#mf, RGB(40, 40, 40))
  
  ;2 - Wrap your text in a <div>
  dominsert(#mf, "<div id='demo' style='position: absolute; left: 20px; top:20px'>SpiderBasic V2.00 Beta 7 is done.</div>")
  
  ;3 - Initialize the plugin with options. 
  
  !var options = {
  !   horizontalPixelsCount: 40,
  !   verticalPixelsCount: 5,
  ;!   pixelSize: 5,
  !   disabledPixelColor: '#404040',
  !   enabledPixelColor: 'rgb(255, 124, 0)',
  !   pathToPixelImage: 'assets/js/pixel.png',
  !   stepDelay: 35,
  !};

  !$('#demo').leddisplay($.extend(options, {pixelSize: 8}));
EndProcedure

;1 - Include jQuery leddisplay plugin in the html document.
LoadScript("assets/js/jquery.leddisplay.js", @Loading())
■ Download code + js + pixel.png
http://falsam.com/sbtest/data/leddisplay.zip

I think it's easy to create a ledgadget() function.

Enjoy ^^

➽ Windows 11 - JDK 1.8 - SB 2.40 - Android 13
http://falsam.com

Sorry for my poor english
Turtle
Posts: 3
Joined: Wed Oct 26, 2016 4:17 am

Re: Jquery Plugin Canvas Gadget

Post by Turtle »

Wow, thanks Falsam. That's awesome! :D
Turtle
Posts: 3
Joined: Wed Oct 26, 2016 4:17 am

Re: Jquery Plugin Canvas Gadget

Post by Turtle »

Hello again :-)

It all works fine so far, but how can I change the DisplayText on Runtime? I use a WindowTimer to request every xy seconds Values to insert from my Server, but now I'm wondering how I could update the DisplayText?
Post Reply