SpiderBasic Library - Liste neuer Funktionen

Hier könnt ihr alle Fragen zu SpiderBasic austauschen.
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SpiderBasic Library - Liste individueller Style-Beispiel

Beitrag von RSBasic »

Gadget > (Alle Gadgets) > Schatten in unterschiedlichen Farben hinzufügen

Code: Alles auswählen

EnableExplicit

Procedure SetGadgetShadow(gadget, x, y, blur, size, color)
  Protected styles.s
  Protected id.s
  Protected hexcolor.s
  
  ;Falls nicht existiert, dann <style type="text/css" id="SBCustomStyles"></style> im Head erstellen, ohne Inline-Styles verwenden zu müssen
  ! if (!document.getElementById('SBCustomStyles')) {
  !   var StyleElement = document.createElement('style');
  !   StyleElement.type = 'text/css';
  !   StyleElement.id = 'SBCustomStyles';
  !   var HeadElement = document.getElementsByTagName('head')[0];
  !   HeadElement.appendChild(StyleElement);
  ! }
  
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
  
  ;RGB in Hex konvertieren
  hexcolor = "#" + RSet(Hex(Red(color)), 2, "0") + RSet(Hex(Green(color)), 2, "0") + RSet(Hex(Blue(color)), 2, "0")
  
  styles = "#" + id + " "
  
  Select GadgetType(gadget)
    Case #PB_GadgetType_Panel
      styles + ".dijitTabPaneWrapper, #" + id + " .dijitTabListContainer-top .dijitTab"
    Case #PB_GadgetType_TrackBar
      styles = ""
      styles + ".claro #" + id + " .dijitSliderImageHandle { box-shadow: none; } .dijitSliderBarContainerH, #" + id + " .dijitSliderLeftBumper, #" + id + " .dijitSliderRightBumper, #" + id + " .dijitSliderImageHandle"
  EndSelect
  
  Select GadgetType(gadget)
    Case #PB_GadgetType_Frame,
         #PB_GadgetType_Option,
         #PB_GadgetType_CheckBox,
         #PB_GadgetType_HyperLink,
         #PB_GadgetType_Text
      styles + " { text-shadow: " + x + "px " + y + "px " + blur + "px " + hexcolor + "; }"
    Default
      styles + " { box-shadow: " + x + "px " + y + "px " + blur + "px " + size + "px " + hexcolor + "; }"
  EndSelect
  
  ;Styles hinzufügen
  ! document.getElementById("SBCustomStyles").appendChild(document.createTextNode( v_styles ));
  
EndProcedure

;================================================== Beispielcode ==================================================

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
  TextGadget(1, 10, 10, 100, 20, "Hello World", 0)
  StringGadget(2, 150, 20, 200, 20, "", 0)
  ButtonGadget(3, 370, 20, 100, 20, "Button", 0)
  TextGadget(4, 10, 30, 100, 40, "PureBaic with CSS is cool :-)", 0)
  CheckBoxGadget(5, 10, 70, 100, 20, "Click me", 0)
  ListIconGadget(6, 150, 60, 320, 200, "Column", 200, 0)
  AddGadgetItem(6, -1, "Item")
  TrackBarGadget(7, 150, 320, 320, 20, 0, 100, 0)
  
  SetGadgetShadow(1, 0, 0, 10, 0, RGB(0, 255, 0))
  SetGadgetShadow(2, 0, 0, 10, 0, RGB(100, 100, 100))
  SetGadgetShadow(3, 0, 0, 10, 0, RGB(100, 100, 100))
  SetGadgetShadow(4, 0, 0, 5, 20, RGB(0, 0, 255))
  SetGadgetShadow(5, 0, 0, 10, 20, RGB(255, 255, 0))
  SetGadgetShadow(6, 0, 0, 10, 0, RGB(100, 100, 100))
  SetGadgetShadow(7, 0, 0, 10, 0, RGB(100, 100, 100))
  
EndIf
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SpiderBasic Library - Liste individueller Style-Beispiel

Beitrag von RSBasic »

Gadget > (Alle Gadgets) > Gadget animiert einblenden und ausblenden

Code: Alles auswählen

EnableExplicit

#SB_Gadget_Animation_Linear = 1
#SB_Gadget_Animation_Ease = 2
#SB_Gadget_Animation_EaseIn = 3
#SB_Gadget_Animation_EaseOut = 4
#SB_Gadget_Animation_EaseInOut = 5

Procedure HideGadgetEx(gadget, state)
  Protected id.s
  Protected hasanimation.s
  
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  !   v_hasanimation = GadgetElement.hasClass("HasAnimation");
  ! }
  
  If id <> "" And hasanimation <> ""
    If state = 1
      ! GadgetElement.addClass("HideGadget");
    Else
      ! GadgetElement.removeClass("HideGadget");
    EndIf
  Else
    HideGadget(gadget, state)
  EndIf
  
EndProcedure

Macro HideGadget(gadget, state)
  HideGadgetEx(gadget, state)
EndMacro

Procedure SetGadgetAnimation(gadget, effect, duration.f, delay.f)
  Protected styles.s
  Protected id.s
  Protected animation_effect.s
 
  ;Falls nicht existiert, dann <style type="text/css" id="SBCustomStyles"></style> im Head erstellen, ohne Inline-Styles verwenden zu müssen
  ! if (!document.getElementById('SBCustomStyles')) {
  !   var StyleElement = document.createElement('style');
  !   StyleElement.type = 'text/css';
  !   StyleElement.id = 'SBCustomStyles';
  !   var HeadElement = document.getElementsByTagName('head')[0];
  !   HeadElement.appendChild(StyleElement);
  ! }
 
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
  
  Select effect
    Case #SB_Gadget_Animation_Linear
      animation_effect = "linear"
    Case #SB_Gadget_Animation_Ease
      animation_effect = "ease"
    Case #SB_Gadget_Animation_EaseIn
      animation_effect = "ease-in"
    Case #SB_Gadget_Animation_EaseOut
      animation_effect = "ease-out"
    Case #SB_Gadget_Animation_EaseInOut
      animation_effect = "ease-in-out"
  EndSelect
  
  styles = ""
  styles + "#" + id + " { -webkit-transition: all " + duration + "s " + animation_effect + " " + delay + "s; transition: all " + duration + "s " + animation_effect + " " + delay + "s; opacity: 1; visibility: visible; } "
  styles + "#" + id + " * { -webkit-transition: all " + duration + "s " + animation_effect + " " + delay + "s; transition: all " + duration + "s " + animation_effect + " " + delay + "s; opacity: 1; visibility: visible; } "
  styles + "#" + id + ".HideGadget { opacity: 0; visibility: hidden; }"
 
  ;Styles hinzufügen
  ! document.getElementById("SBCustomStyles").appendChild(document.createTextNode( v_styles ));
  ! GadgetElement.addClass("HasAnimation");
  
EndProcedure

;================================================== Beispielcode ==================================================

Procedure GadgetEvent()
  Select EventGadget()
    Case 2
      HideGadget(1, 0)
    Case 3
      HideGadget(1, 1)
  EndSelect
  
EndProcedure

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
  ButtonGadget(1, 10, 10, 210, 200, "Button", 0)
  ButtonGadget(2, 10, 220, 100, 100, "Show", 0)
  ButtonGadget(3, 120, 220, 100, 100, "Hide", 0)
  
  SetGadgetAnimation(1, #SB_Gadget_Animation_Linear, 0.5, 0)
  
  BindEvent(#PB_Event_Gadget, @GadgetEvent())
  
EndIf
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SpiderBasic Library - Liste individueller Style-Beispiel

Beitrag von RSBasic »

Gadget > (Alle Gadgets) > Gadget animiert verschieben

Code: Alles auswählen

EnableExplicit

#SB_Gadget_Animation_Linear = 1
#SB_Gadget_Animation_Ease = 2
#SB_Gadget_Animation_EaseIn = 3
#SB_Gadget_Animation_EaseOut = 4
#SB_Gadget_Animation_EaseInOut = 5

Procedure SetGadgetAnimation(gadget, effect, duration.f, delay.f)
  Protected styles.s
  Protected id.s
  Protected animation_effect.s
 
  ;Falls nicht existiert, dann <style type="text/css" id="SBCustomStyles"></style> im Head erstellen, ohne Inline-Styles verwenden zu müssen
  ! if (!document.getElementById('SBCustomStyles')) {
  !   var StyleElement = document.createElement('style');
  !   StyleElement.type = 'text/css';
  !   StyleElement.id = 'SBCustomStyles';
  !   var HeadElement = document.getElementsByTagName('head')[0];
  !   HeadElement.appendChild(StyleElement);
  ! }
 
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
 
  Select effect
    Case #SB_Gadget_Animation_Linear
      animation_effect = "linear"
    Case #SB_Gadget_Animation_Ease
      animation_effect = "ease"
    Case #SB_Gadget_Animation_EaseIn
      animation_effect = "ease-in"
    Case #SB_Gadget_Animation_EaseOut
      animation_effect = "ease-out"
    Case #SB_Gadget_Animation_EaseInOut
      animation_effect = "ease-in-out"
  EndSelect
 
  styles = ""
  styles + "#" + id + " { -webkit-transition: all " + duration + "s " + animation_effect + " " + delay + "s; transition: all " + duration + "s " + animation_effect + " " + delay + "s; opacity: 1; visibility: visible; } "
  styles + "#" + id + " * { -webkit-transition: all " + duration + "s " + animation_effect + " " + delay + "s; transition: all " + duration + "s " + animation_effect + " " + delay + "s; opacity: 1; visibility: visible; } "
  styles + "#" + id + ".HideGadget { opacity: 0; visibility: hidden; }"
 
  ;Styles hinzufügen
  ! document.getElementById("SBCustomStyles").appendChild(document.createTextNode( v_styles ));
  ! GadgetElement.addClass("HasAnimation");
 
EndProcedure

;================================================== Beispielcode ==================================================

Procedure GadgetEvent()
  Select EventGadget()
    Case 2
      ResizeGadget(1, 280, #PB_Ignore, #PB_Ignore, #PB_Ignore)
  EndSelect
 
EndProcedure

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
  ButtonGadget(1, 10, 10, 210, 200, "Button", 0)
  ButtonGadget(2, 10, 220, 100, 100, "Move", 0)
  
  SetGadgetAnimation(1, #SB_Gadget_Animation_EaseInOut, 1, 0)
 
  BindEvent(#PB_Event_Gadget, @GadgetEvent())
 
EndIf
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SpiderBasic Library - Liste individueller Style-Beispiel

Beitrag von RSBasic »

Gadget > (Alle Gadgets) > Gadget animiert vergrößern und verkleinern

Code: Alles auswählen

EnableExplicit

#SB_Gadget_Animation_Linear = 1
#SB_Gadget_Animation_Ease = 2
#SB_Gadget_Animation_EaseIn = 3
#SB_Gadget_Animation_EaseOut = 4
#SB_Gadget_Animation_EaseInOut = 5

Procedure SetGadgetAnimation(gadget, effect, duration.f, delay.f)
  Protected styles.s
  Protected id.s
  Protected animation_effect.s
 
  ;Falls nicht existiert, dann <style type="text/css" id="SBCustomStyles"></style> im Head erstellen, ohne Inline-Styles verwenden zu müssen
  ! if (!document.getElementById('SBCustomStyles')) {
  !   var StyleElement = document.createElement('style');
  !   StyleElement.type = 'text/css';
  !   StyleElement.id = 'SBCustomStyles';
  !   var HeadElement = document.getElementsByTagName('head')[0];
  !   HeadElement.appendChild(StyleElement);
  ! }
 
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
 
  Select effect
    Case #SB_Gadget_Animation_Linear
      animation_effect = "linear"
    Case #SB_Gadget_Animation_Ease
      animation_effect = "ease"
    Case #SB_Gadget_Animation_EaseIn
      animation_effect = "ease-in"
    Case #SB_Gadget_Animation_EaseOut
      animation_effect = "ease-out"
    Case #SB_Gadget_Animation_EaseInOut
      animation_effect = "ease-in-out"
  EndSelect
 
  styles = ""
  styles + "#" + id + " { -webkit-transition: all " + duration + "s " + animation_effect + " " + delay + "s; transition: all " + duration + "s " + animation_effect + " " + delay + "s; opacity: 1; visibility: visible; } "
  styles + "#" + id + " * { -webkit-transition: all " + duration + "s " + animation_effect + " " + delay + "s; transition: all " + duration + "s " + animation_effect + " " + delay + "s; opacity: 1; visibility: visible; } "
  styles + "#" + id + ".HideGadget { opacity: 0; visibility: hidden; }"
 
  ;Styles hinzufügen
  ! document.getElementById("SBCustomStyles").appendChild(document.createTextNode( v_styles ));
  ! GadgetElement.addClass("HasAnimation");
 
EndProcedure

;================================================== Beispielcode ==================================================

Procedure GadgetEvent()
  Select EventGadget()
    Case 2
      ResizeGadget(1, #PB_Ignore, #PB_Ignore, 480, 270)
  EndSelect
 
EndProcedure

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
  ButtonGadget(1, 10, 10, 100, 100, "Button", 0)
  ButtonGadget(2, 10, 290, 480, 100, "Size", 0)
  
  SetGadgetAnimation(1, #SB_Gadget_Animation_EaseInOut, 1, 0)
 
  BindEvent(#PB_Event_Gadget, @GadgetEvent())
 
EndIf
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SpiderBasic Library - Liste individueller Style-Beispiel

Beitrag von RSBasic »

Gadget > (Alle Gadgets) > Gadget in 3D drehen

Code: Alles auswählen

EnableExplicit

Procedure SetGadgetRotate3D(gadget, x, y, z, degree, perspective_width = 0)
  Protected id.s
 
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
 
  ;Styles setzen
  ! GadgetElement.css("perspective", v_perspective_width + "px");
  ! GadgetElement.children().css("transform", "rotate3d(" + v_x + ", " + v_y + ", " + v_z + ", " + v_degree + "deg)");
  
EndProcedure

;================================================== Beispielcode ==================================================

Global angle

LoadFont(1, "", 25)

Procedure TimerEvents()
  Select EventTimer()
    Case 1
      angle + 1
      SetGadgetRotate3D(1, 1, 0, 0, angle, 600)
      SetGadgetRotate3D(2, 0, 1, 0, angle)
      SetGadgetRotate3D(3, 0, 0, 1, angle)
      SetGadgetRotate3D(4, 1, 1, 0, angle)
      If angle = 360
        angle = 0
      EndIf
      
  EndSelect
EndProcedure

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
  ButtonGadget(1, 50, 50, 150, 150, "Button", 0)
  ButtonGadget(2, 300, 50, 150, 150, "Button", 0)
  ButtonGadget(3, 50, 250, 150, 150, "Button", 0)
  ButtonGadget(4, 300, 250, 150, 150, "Button", 0)
 
  SetGadgetFont(1, FontID(1))
  SetGadgetFont(2, FontID(1))
  SetGadgetFont(3, FontID(1))
  SetGadgetFont(4, FontID(1))
 
  AddWindowTimer(0, 1, 50)
  BindEvent(#PB_Event_Timer, @TimerEvents())
 
EndIf
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Benutzeravatar
dige
Beiträge: 1182
Registriert: 08.09.2004 08:53

Re: SpiderBasic Library - Liste neuer Funktionen

Beitrag von dige »

@RSBasic: vielen Dank!! Echt Super!!!

Bei SetGadgetItemColor() ist mir aufgefallen, dass das Färben immer langsamer wird:

Code: Alles auswählen

EnableExplicit

Procedure SetGadgetItemColor(gadget, item, colortype, color, column)
  Protected styles.s
  Protected id.s
  Protected sb_id.s
  Protected hexcolor.s
 
  ;Falls nicht existiert, dann <style type="text/css" id="SBCustomStyles"></style> im Head erstellen, ohne Inline-Styles verwenden zu müssen
  ! if (!document.getElementById('SBCustomStyles')) {
  !   var StyleElement = document.createElement('style');
  !   StyleElement.type = 'text/css';
  !   StyleElement.id = 'SBCustomStyles';
  !   var HeadElement = document.getElementsByTagName('head')[0];
  !   HeadElement.appendChild(StyleElement);
  ! }
 
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
 
  ;RGB in Hex konvertieren
  hexcolor = "#" + RSet(Hex(Red(color)), 2, "0") + RSet(Hex(Green(color)), 2, "0") + RSet(Hex(Blue(color)), 2, "0")
 
  ;SB-Hauptelement ermitteln
  ! v_sb_id = spider_GadgetID(v_gadget).gadget.id;
 
  ;Unterstützte Gadgets und deren Style-Erstellungen
  Select GadgetType(gadget)
    Case #PB_GadgetType_ListIcon
      If item = -1
        Select colortype
          Case #PB_Gadget_FrontColor
            styles = "#" + id + " #" + sb_id + "-header .dgrid-column-" + column + " { color: " + hexcolor + "; }"
          Case #PB_Gadget_BackColor
            styles = "#" + id + " #" + sb_id + "-header .dgrid-column-" + column + " { background-color: " + hexcolor + "; }"
        EndSelect
      Else
        Select colortype
          Case #PB_Gadget_FrontColor
            styles = "#" + id + " #" + sb_id + "-row-" + item + " .dgrid-column-" + column + " { color: " + hexcolor + "; }"
          Case #PB_Gadget_BackColor
            styles = "#" + id + " #" + sb_id + "-row-" + item + " .dgrid-column-" + column + " { background-color: " + hexcolor + "; }"
        EndSelect
      EndIf
    Case #PB_GadgetType_Tree
      item = item + 2
      If column = 0
        Select colortype
          Case #PB_Gadget_FrontColor
            styles = "#" + id + " #" + sb_id + " #dijit__TreeNode_" + item + " > .dijitTreeRow { color: " + hexcolor + "; }"
          Case #PB_Gadget_BackColor
            styles = "#" + id + " #" + sb_id + " #dijit__TreeNode_" + item + " > .dijitTreeRow { background-color: " + hexcolor + "; }"
        EndSelect
      Else
        Select colortype
          Case #PB_Gadget_FrontColor
            styles = "#" + id + " #" + sb_id + " #dijit__TreeNode_" + item + " > .dijitTreeNodeContainer > .dijitTreeNode:nth-child(" + column + ") { color: " + hexcolor + "; }"
          Case #PB_Gadget_BackColor
            styles = "#" + id + " #" + sb_id + " #dijit__TreeNode_" + item + " > .dijitTreeNodeContainer > .dijitTreeNode:nth-child(" + column + ") { background-color: " + hexcolor + "; }"
        EndSelect
      EndIf
  EndSelect
 
  ;Styles hinzufügen
  ! document.getElementById("SBCustomStyles").appendChild(document.createTextNode( v_styles ));
 
EndProcedure

;================================================== Beispielcode ==================================================

Define a, time, n

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
  ListIconGadget(1, 10, 10, WindowWidth(0)-20, WindowHeight(0)-20, "Spalte 1", 200, #PB_ListIcon_GridLines)
  AddGadgetColumn(1, 1, "Spalte 2", 200)
 
  For a=1 To 250
    AddGadgetItem(1, -1, "Item " + Str(a) + Chr(10) + "More Text")
  Next
 
  SetGadgetItemColor(1, -1, #PB_Gadget_BackColor, RGB(0, 0, 255), 1)
  SetGadgetItemColor(1, -1, #PB_Gadget_FrontColor, RGB(255, 255, 255), 1)
  SetGadgetItemColor(1, 5, #PB_Gadget_FrontColor, RGB(255, 0, 0), 0)
  SetGadgetItemColor(1, 6, #PB_Gadget_FrontColor, RGB(0, 100, 0), 1)
  SetGadgetItemColor(1, 7, #PB_Gadget_BackColor, RGB(100, 100, 100), 0)
  SetGadgetItemColor(1, 7, #PB_Gadget_BackColor, RGB(100, 100, 100), 1)
  SetGadgetItemColor(1, 7, #PB_Gadget_FrontColor, RGB(255, 255, 255), 0)
  SetGadgetItemColor(1, 7, #PB_Gadget_FrontColor, RGB(255, 255, 255), 1)
  
  For n = 1 To 10
  
  time = ElapsedMilliseconds()
  
  For a=1 To 250
    If Random(2, 1) = 1
      SetGadgetItemColor(1, a, #PB_Gadget_BackColor, #Red, 0)
    Else
      SetGadgetItemColor(1, a, #PB_Gadget_BackColor, -1, 0)
    EndIf
  Next
  
  Debug ElapsedMilliseconds() - time
  Next

 
EndIf
"Papa, mein Wecker funktioniert nicht! Der weckert immer zu früh."
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SpiderBasic Library - Liste neuer Funktionen

Beitrag von RSBasic »

Das liegt daran, dass er bei jeder einzelnen Zelle, die von dir farbig geändert werden soll, einen neuen CSS-Eintrag im Style-Block im Head-Bereich hinzufügt, was ja normal ist, aber in deinem Beispiel bei 2500 Styles wird die Javascript-Funktion appendChild immer langsamer, da er jedes Mal an das Ende dieses Elements springen muss. Ob es eine schnellere Funktion gibt, ist mir nicht bekannt.
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Benutzeravatar
dige
Beiträge: 1182
Registriert: 08.09.2004 08:53

Re: SpiderBasic Library - Liste neuer Funktionen

Beitrag von dige »

Also ist der Code prinzipiell nur für das einmalige Einfärben einer Listbox geeignet? Bestünde denn die Möglichkeit, statt jedes Mal einen Knoten hinzuzufügen, den bereits bestehenden zu ändern?
"Papa, mein Wecker funktioniert nicht! Der weckert immer zu früh."
Benutzeravatar
TroaX
Beiträge: 660
Registriert: 08.03.2013 14:27
Computerausstattung: PC: Ryzen 9 3950X, 96 GB RAM, RX6800XT, 2.5 TB SSD, 21:9 Display, Pop_OS! | Lappi: Ryzen 7 5800H, 16 GB RAM, 1 TB SSD, Pop_OS!
Wohnort: NRW
Kontaktdaten:

Re: SpiderBasic Library - Liste neuer Funktionen

Beitrag von TroaX »

Versehentlich Doppelpost
Zuletzt geändert von TroaX am 15.10.2018 13:31, insgesamt 1-mal geändert.
PC: Ryzen 9 3950X | 96 GB RAM | RX6800XT | 2,5 TB NVMe | Pop_OS!
Notebook: 16" 3:2 | Ryzen 7 5800H | 16 GB RAM | Radeon Vega | 1TB NVMe | Pop_OS!
NAS: Fritz.Box :lol:
Coding: Purebasic 6.04 | PHP | HTML | CSS | Javascript
Benutzeravatar
TroaX
Beiträge: 660
Registriert: 08.03.2013 14:27
Computerausstattung: PC: Ryzen 9 3950X, 96 GB RAM, RX6800XT, 2.5 TB SSD, 21:9 Display, Pop_OS! | Lappi: Ryzen 7 5800H, 16 GB RAM, 1 TB SSD, Pop_OS!
Wohnort: NRW
Kontaktdaten:

Re: SpiderBasic Library - Liste neuer Funktionen

Beitrag von TroaX »

Mit CSS 3 wird sowas in der Regel mit den Pseudo-Funktionen (Selektor-Funktionen) zur Kaskaden Navigierung erledigt z.B. :nth-child()

http://maddesigns.de/nth-child-pseudo-s ... 3-550.html

Wenn man das mit Spiderbasic versucht, zu abstrahieren, kann es zu diesem Effekt kommen, weil oftmals durch häufige Methoden-Aufrufe im Javascript dieser Vorgang sehr rechenintensiv wird und somit dieser Prozess sehr lange dauern könnte.
PC: Ryzen 9 3950X | 96 GB RAM | RX6800XT | 2,5 TB NVMe | Pop_OS!
Notebook: 16" 3:2 | Ryzen 7 5800H | 16 GB RAM | Radeon Vega | 1TB NVMe | Pop_OS!
NAS: Fritz.Box :lol:
Coding: Purebasic 6.04 | PHP | HTML | CSS | Javascript
Antworten