Style Editor v1.0

Share your advanced knowledge/code with the community.
pf shadoko
Posts: 74
Joined: Thu May 26, 2016 11:09 am

Style Editor v1.0

Post by pf shadoko »

Hello, everybody,
Peter gave me a way to change the style sheet.
I took the opportunity to make a small editor.
It's just a start, but it already allows you to customize the SB interface in a simple way.
(By the following, I will add the possibility to add a texture, to select the font, to use the gradient...)

After change :
- close "Style Editor" window --> a string is displayed
- copy it and replace the "initstyle" line in the code

Code: Select all

; Style Editor v1.0 - Pf shadoko - 2017

Procedure ColorBlend(color1.l, color2.l, blend.f=0.5)
    Protected.w r,g,b,a
    r=  Red(color1) + (Red(color2)     - Red(color1)) * blend
    g=Green(color1) + (Green(color2) - Green(color1)) * blend
    b= Blue(color1) + (Blue(color2) -   Blue(color1)) * blend
    a=Alpha(color1) + (Alpha(color2) - Alpha(color1)) * blend
    ProcedureReturn  RGBA(r,g,b,a)
EndProcedure

Procedure.f min(v1.f,v2.f)
    If v1<v2:ProcedureReturn v1:Else: ProcedureReturn v2:EndIf
EndProcedure

Procedure.f max(v1.f,v2.f)
    If v1>v2:ProcedureReturn v1:Else: ProcedureReturn v2:EndIf
EndProcedure

Procedure.s ReplaceStringpos(t.s,pos,lng,replace.s)
    ProcedureReturn Left(t,pos-1)+replace+Mid(t,pos+lng)
EndProcedure

Procedure.s jscolor(c.l)
  ProcedureReturn "RGBA("+Str(Red(c))+","+Str(Green(c))+","+Str(Blue(c))+","+StrF(Alpha(c)/255)+")"
EndProcedure


;{ ==================================================== editeur de style
Global NewMap gstyle.i()
Global NewMap vstyle.l()
Global styletxt.s
Declare SetStyle()

;{ =================================================== palette_aff 
Global wpalette, gpalettecanvas,gpalette_colr, gpalette_colg, gpalette_colb, gpalette_cola,  palette_cle.s

Procedure paletteimgcol(output,col)
    Protected i,j,dx,dy
    StartVectorDrawing(output)
    dx=VectorOutputWidth()
    dy=VectorOutputHeight()
    VectorSourceColor($ff666666)
    FillVectorOutput()
    For j=0 To dy Step 32:AddPathBox(0,j,100,15):Next
    For i=0 To dx Step 32:AddPathBox(i,0,15,100):Next    
    VectorSourceColor($ffaaaaaa)    
    FillPath()
    VectorSourceColor(col)
    FillVectorOutput()   
    StopVectorDrawing()
EndProcedure

Procedure palette_event()
    Protected dx,dy,r,g,b,a,col,gs,txt.s,pd,pf
    r=GetGadgetState(gpalette_colr)
    g=GetGadgetState(gpalette_colg)
    b=GetGadgetState(gpalette_colb)
    a=GetGadgetState(gpalette_cola)
    col=RGBA(r,g,b,a)
    vstyle(palette_cle)=col
    SetStyle()
    paletteimgcol(CanvasVectorOutput(gpalettecanvas),col)
    ;paletteimgcol(CanvasVectorOutput(gstyle(palette_cle)),col)
    gs=gstyle(palette_cle)
    txt=GetGadgetText(gs)
    pd=FindString(txt,"color:")+6
    pf=FindString(txt,";",pd)
    txt=ReplaceStringpos(txt,pd,pf-pd,jscolor(col|$ff000000))
    SetGadgetText(gs,txt)    
EndProcedure

Procedure wpalette_close()
CloseWindow(wpalette)    
EndProcedure

Procedure.s palette_aff(cle.s,callback=0)
    Protected x,y,col
    
    Macro gcol(g,txt,def)
        TextGadget(-1,x-40,y+4,40,24,txt,#PB_Text_Right)
        g=TrackBarGadget(-1,x,y,256,24,0,255)
        BindGadgetEvent(g,@ palette_event())
        SetGadgetState(g,def)
        y+24
    EndMacro
    
    If wpalette:CloseWindow(wpalette):EndIf
    wpalette=OpenWindow(-1, 0, 0, 400,100, "Palette", #PB_Window_SystemMenu | #PB_Window_ScreenCentered):StickyWindow(wpalette,1):BindEvent(#PB_Event_CloseWindow,@ wpalette_close(),wpalette)
    x=45:y=0
    gpalettecanvas=CanvasGadget(-1,305,5,90,90)
    col=vstyle(cle)
    palette_cle=cle
    gcol(gpalette_colr,"Red",Red(col))
    gcol(gpalette_colg,"Green",Green(col))
    gcol(gpalette_colb,"Blue",Blue(col))
    gcol(gpalette_cola,"Alpha",Alpha(col))
    palette_event()
EndProcedure
;}


Procedure initstyle(style.s)
    ! elStyle = document.createElement('style');
    ! elStyle.type= 'text/css';
    ! elHead = document.getElementsByTagName('head')[0];
    ! elHead.appendChild( elStyle );
    Protected j
    j=CreateJSON(-1)
    ParseJSON(j, ReplaceString(style,"'",Chr(34)))
    ExtractJSONMap(JSONValue(j), vstyle())
    FreeJSON(j)
    ForEach vstyle()
        Debug ""+MapKey(vstyle())+" : "+ vstyle()
    Next
    SetStyle()
EndProcedure

Procedure addstyle(class.s, prop.s,p1.s="",p2.s="",p3.s="",p4.s="")
    If p1<>"":prop=ReplaceString(prop,"$1",p1):EndIf
    If p2<>"":prop=ReplaceString(prop,"$2",p2):EndIf
    If p3<>"":prop=ReplaceString(prop,"$3",p3):EndIf
    If p4<>"":prop=ReplaceString(prop,"$4",p4):EndIf
    styletxt+class+"{"+prop+"}"+#CRLF$
EndProcedure

Procedure SetStyle()
    Protected v.l
    
    styletxt=""
    addstyle("body","font: 13px arial; color: #000;")
    addstyle(".spiderwindow-title","font-size: 140%;")
    addstyle(".dijitButtonNode","border: $1px solid rgba(255,255,255,0.5) !important;",Str(1))
    addstyle(".dijitTab","margin: 1px 0px 0px 1px!important;border: 0px!important;")   
    addstyle(".dijitTabChecked,.dijitTabHover,.dijitTabContainerTop-tabs","border: none;")
    addstyle(".dijitTabContainerTop-tabs .dijitTabChecked:before","height: 0px;")
    ;addstyle(".spiderwindow-content","background-image:url('https://cdn.pixabay.com/photo/2017/10/12/21/22/pattern-2846017__340.jpg')")    
    ;addstyle("","");   <--------------------
    
    addstyle(".sbWebBorder,iframe","border: 0px;")
    
    addstyle(".dijitSelectFocused","border: 5px solid #f00!important;padding: 5px;")
    ForEach vstyle()
        v= vstyle()
        Select MapKey(vstyle())
            Case "g_radius"
                addstyle(".spiderwindow,.sbWebBorder,iframe","border-radius: $1px;",Str(v) )
                addstyle(".spiderwindow-content","border-radius: 0 0 $1px $1px;",Str(max(v-vstyle("wb_width"),0)))
                addstyle(".dijitTab","border-radius: $1px $1px 0 0!important;",Str(v))
                addstyle(".dijitTabPaneWrapper ","border-radius: 0 $1px $1px $1px!important;",Str(v))
                addstyle(".dijitButtonNode","border-radius: $1px !important;",Str(v))
                addstyle(".dijitTextBox,.dijitInputField , .dijitCheckBox, .dgrid","border-radius: $1px;",Str(v))
                
                
            Case "wt_back-color"
                addstyle(".spiderwindow","background-color: $1;",jscolor(v))
            Case "wt_color"
                addstyle(".spiderwindow-title","color: $1;",jscolor(v))
            Case "wb_color"
                addstyle(".spiderwindow","border:$1px solid $2;",Str(vstyle("wb_width")),jscolor(v))               
            Case "wc_back-color"
                addstyle(".spiderwindow-content","background-color: $1;",jscolor(v))
            Case "p_back-color"
                addstyle(".dijitTab","background-color: $1!important;",jscolor(ColorBlend(v,$ff000000,0.15)))
                addstyle(".dijitTabChecked,.dijitTabContainerTop-dijitContentPane","background-color: $1!important;",jscolor(ColorBlend(v,$ff000000,0.0)))
            Case "w_shadow"    
                addstyle(".spiderwindow","box-shadow: $1px $1px $2px 0px #000;",Str(v),Str(v*4))
                
                
            Case "b_back-color"
                addstyle(".dijitButtonNode","background: $1 !important;",jscolor(v))
            Case "b_color"
                addstyle(".dijitButtonNode","color: $1 !important;",jscolor(v))
            Case "b_shadow"
                addstyle(".dijitButtonNode","box-shadow: $1px $1px $2px 0px #000 !important;",Str(v),Str(v*4))
                addstyle(" .dijitButtonActive .dijitButtonNode, .dijitToggleButtonChecked .dijitButtonNode","box-shadow: $1px $1px $1px 0px rgba(0,0,0,0.5) inset!important;",Str(v))
                addstyle(".dijitTextBox,.dijitInputField , .dijitCheckBox","border: none;box-shadow: $1px $1px $1px 0px rgba(0,0,0,0.5) inset!important;",Str(v))
                addstyle(".dijitTabChecked,.dijitTabContainerTop-dijitContentPane, .dijitTabContainerBottom-container,.dijitTabContainerTop-container,.dijitTabContainerLeft-container,.dijitTabContainerRight-container","border: 0px;box-shadow: $1px $1px $2px 0px #000 !important;",Str(v),Str(v*4))
                
        EndSelect
    Next
    ! elStyle.innerHTML = v_styletxt;
EndProcedure


Procedure StyleEditor_event()
    Protected j,cle.s,g=EventGadget()
    ForEach gstyle():If g=gstyle():cle=MapKey(gstyle()):Break:EndIf:Next
    Select cle
        Case "g_radius","wb_width","w_shadow","b_shadow"
            vstyle(cle)=GetGadgetState(g):SetStyle()       
        Case "wt_color","wt_back-color","wc_back-color","b_back-color","b_color","wb_color","p_back-color"
            palette_aff(cle)
    EndSelect    
EndProcedure

Procedure StyleEditor_close()
Protected txt.s,j=CreateJSON(-1)
InsertJSONMap(JSONValue(j), vstyle())
txt= "initstyle("+Chr(34)+ReplaceString(ComposeJSON(j),Chr(34),"'")+Chr(34)+")"
!alert(v_txt);
FreeJSON(j)
CloseWindow(EventWindow())    
EndProcedure

Procedure StyleEditor()
    Protected  w,g,px,py,legw=90
    
    Macro deftitre(txt)
        g=TextGadget(-1,0,py,200,16,txt,#PB_Text_Center):SetGadgetColor(g,#PB_Gadget_BackColor,$ffff):py+24
    EndMacro
    
    Macro defbutton(cle,leg,def=0)
        g=ButtonGadget(-1,10,py,180,30,leg+" <div style='display: inline-block; width:50px;background-color:"+jscolor(vstyle(cle))+";'>&nbsp</div>",#PB_Button_Right)
        BindGadgetEvent(g,@ StyleEditor_event()):py+40
        SetGadgetColor(g,#PB_Gadget_BackColor,vstyle(cle))
        gstyle(cle)=g
    EndMacro
    
    Macro deftrackbar(cle,leg,min,max,def=0)
        TextGadget(-1,0,py,legw,20,leg,#PB_Text_Right)
        g=TrackBarGadget(-1,legw,py,100,20,min,max):SetGadgetState(g,vstyle(cle)):BindGadgetEvent(g,@ StyleEditor_event()):py+30
        gstyle(cle)=g
    EndMacro
    
    w=OpenWindow(-1,5,5,200,500,"Style Editor",#PB_Window_SystemMenu):BindEvent(#PB_Event_CloseWindow,@ StyleEditor_close(),w)
    deftitre("General")
    deftrackbar("g_radius","border-radius",0,16,8)
    
    deftitre("Windows")
    defbutton("wc_back-color","Content back-color")
    defbutton("wt_back-color","Title back color")
    defbutton("wt_color","Title text color")
    deftrackbar("wb_width","border-width",0,16,8)
    defbutton("wb_color","border color")
    deftrackbar("w_shadow","Shadow",0,16,8)
    
    deftitre("Button, ...")
    defbutton("b_back-color","back color")
    defbutton("b_color","text color")
    deftrackbar("b_shadow","Shadow",0,8,4)
    
    deftitre("Panel")
    defbutton("p_back-color","backcolor")
    
        
;SetStyle()
EndProcedure

;}

;##########################################################################################################################################################

Procedure exemple()
    Protected g,gc
    OpenWindow(1,230,5,600,600,"Samples",#PB_Window_TitleBar)
    TextGadget(-1,10,10,200,24,"TextGadget")
    
    g=StringGadget(-1,10,50,200,24,"StringGadget")
    g=StringGadget(-1,10,80,200,24,"StringGadget - BackColor")
    SetGadgetColor(g,#PB_Gadget_BackColor,$88ff88)
    g=StringGadget(-1,10,110,200,24,"StringGadget - disabled")
    DisableGadget(g,1)
    
    ButtonGadget(-1,10,160,200,24,"ButtonGadget")
    
    g=ButtonGadget(-1,10,190,200,24,"ButtonGadget-Toggle",#PB_Button_Toggle):SetGadgetState(g,1)
    
    CreateImage(0,190,40,32,#PB_Image_Transparent)
    StartDrawing(ImageOutput(0))
    For i=0 To 100:Circle(Random(200),Random(40),Random(5)+2,Random($ffffffff)):Next
    DrawingMode(#PB_2DDrawing_Transparent)
    DrawText(20,10,"ButtonImageGadget",$000000)
    StopDrawing()
    ButtonImageGadget(-1,10,220,200,32,ImageID(0))
      
    
    g=ComboBoxGadget(-1,10,310,200,20,#PB_ComboBox_Editable)
    AddGadgetItem(g,-1,"ComboBoxGadget")
    SetGadgetState(g,0)
    CheckBoxGadget(-1,10,340,200,24,"CheckBoxGadget")
    OptionGadget(-1,10,370,200,24,"OptionGadget")
    
    
    gc=PanelGadget(-1,230,10,320,200)
    AddGadgetItem(gc,-1,"Panel-1")
    ButtonGadget(-1,10,20,200,24,"ButtonGadget")
    g=ButtonGadget(-1,10,60,200,24,"ButtonGadget"):DisableGadget(g,1)
    StringGadget(-1,10,100,200,20,"StringGadget")
    g=StringGadget(-1,10,130,200,20,"StringGadget"):DisableGadget(g,1)
    AddGadgetItem(gc,-1,"Panel-2")
    AddGadgetItem(gc,-1,"Panel-3")
    CloseGadgetList()
    WebGadget(-1,230,230,320,200,"http://www.spiderbasic.com")

EndProcedure


initstyle("{'g_radius':8,'wt_back-color':3529884003,'wt_color':4294967295,'wc_back-color':4285775307,'b_back-color':4283539158,'b_color':4278190080,'wb_width':5,'wb_color':0,'w_shadow':9,'b_shadow':2,'p_back-color':4285241782}")

exemple()

StyleEditor()  ;  <---- use this function to show editor 
Last edited by pf shadoko on Sat Dec 30, 2017 9:18 am, edited 1 time in total.
Stefan Schnell
Posts: 46
Joined: Tue Dec 01, 2015 8:17 am
Contact:

Re: Style Editor v1.0

Post by Stefan Schnell »

Excellent Work.
Thank you for sharing that.

Best regards
Stefan
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Style Editor v1.0

Post by Peter »

Image

(the code doesn't work under linux (which will probably be a SB bug))

Greetings ... Peter
User avatar
Arbrakaan
Posts: 91
Joined: Mon Feb 24, 2014 10:54 pm
Location: Geneva
Contact:

Re: Style Editor v1.0

Post by Arbrakaan »

Great tool ! Thanks :)
munfraid
Posts: 104
Joined: Sat Mar 24, 2018 1:33 pm

Re: Style Editor v1.0

Post by munfraid »

Great! Thanks for sharing!
Post Reply