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

Jquery Plugin Canvas Gadget

by Turtle Thu Nov 17, 2016 5:45 pm

Hello,
is there a way to use this Plugin in Spiderbasic?
http://www.jqueryscript.net/text/Scrolling-Text-Look-Like-An-LED-Display-with-jQuery-leddisplay-Plugin.html

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

Re: Jquery Plugin Canvas Gadget

by falsam Thu Nov 17, 2016 9:57 pm

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 10 - JDK 1.8 - SB 2.20 - Android 5.5
http://falsam.com

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

Re: Jquery Plugin Canvas Gadget

by Turtle Fri Nov 18, 2016 5:12 am

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

Re: Jquery Plugin Canvas Gadget

by Turtle Sat Nov 19, 2016 12:59 pm

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?
Return to Javascript

Who is online

Users browsing this forum: No registered users and 1 guest