Style Editor v1.0
Posted: Fri Dec 29, 2017 4:52 pm
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
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))+";'> </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