This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
sample_code:colorpicker [2015/01/25 13:39] octazid created |
sample_code:colorpicker [2015/02/05 20:06] (current) |
||
---|---|---|---|
Line 1: | Line 1: | ||
======Colorpicker====== | ======Colorpicker====== | ||
- | comming soon... | + | With the Colorpicker you can change the Textcolor or the Backgroundcolor of controls in your app. The user can so easy modify the look of the app. You can also get the Hex-Colorcode of any Color as String in your Clipboard or in a Textedit. Thats usefull if you write some code and you want to know the Hex-Colorcode of any Color.\\ \\ |
+ | {{: | ||
+ | |||
+ | Save the **DlgColorpicker.js** in the Droidscriptfolder where you need the file.\\ | ||
+ | You can call the dialog after you load the Script into your app at the OnStart() Event. | ||
+ | |||
+ | <code Javascript DlgColorpicker.js> | ||
+ | / | ||
+ | * ColorPicker | ||
+ | | ||
+ | * Creation date: 24-01-2015 by octazid | ||
+ | | ||
+ | | ||
+ | * Last update: 24-01-2015 by octazid | ||
+ | | ||
+ | * Simple dialog to create and select a Hex-Colorcode | ||
+ | * or to change the colors of controls | ||
+ | | ||
+ | |||
+ | var colorTrs | ||
+ | var colorRed | ||
+ | var colorGreen = " | ||
+ | var colorBlue | ||
+ | var trans = 0; | ||
+ | |||
+ | |||
+ | //*** Create Colorpicker Dialog***// | ||
+ | function ColorPicker(Callback, | ||
+ | { | ||
+ | var self = this; | ||
+ | this.callback = Callback || function(){}; | ||
+ | this.Cpdlg = app.CreateDialog(" | ||
+ | this.Cptextfield = Textfield || ""; | ||
+ | this.Cpclipboard = Clipboard || false; | ||
+ | this.Cplay = app.CreateLayout( " | ||
+ | this.color = app.CreateText("", | ||
+ | this.color.SetText("#" | ||
+ | this.color.SetTextColor("#" | ||
+ | this.color.SetTextSize(18); | ||
+ | this.color.parent = self; | ||
+ | this.Cplay.AddChild(this.color); | ||
+ | this.img = app.CreateImage(null, | ||
+ | this.img.parent = self; | ||
+ | this.img.SetColor("#" | ||
+ | this.img.SetMargins(0.01, | ||
+ | this.Cplay.AddChild(this.img) ; | ||
+ | this.laySkb = app.CreateLayout(" | ||
+ | this.laySkb.SetMargins(0.01, | ||
+ | this.laySkb.SetBackColor("# | ||
+ | this.txtTrs = app.CreateText( " | ||
+ | this.txtTrs.parent = self; | ||
+ | this.laySkb.AddChild( this.txtTrs ); | ||
+ | this.skbTrs = app.CreateSeekBar( 0.9, -1 ); | ||
+ | this.skbTrs.parent = self; | ||
+ | this.skbTrs.SetRange( 255 ); | ||
+ | this.skbTrs.SetValue( parseInt(colorTrs, | ||
+ | this.skbTrs.SetOnTouch( skbTrs_OnTouch ); | ||
+ | this.skbTrs.SetBackGradientRadial(0, | ||
+ | this.laySkb.AddChild( this.skbTrs ); | ||
+ | this.txtRed = app.CreateText(" | ||
+ | this.txtRed.parent = self; | ||
+ | this.laySkb.AddChild( this.txtRed ); | ||
+ | this.skbRed = app.CreateSeekBar( 0.9, -1 ); | ||
+ | this.skbRed.parent = self; | ||
+ | this.skbRed.SetRange( 255 ); | ||
+ | this.skbRed.SetValue( parseInt(colorRed, | ||
+ | this.skbRed.SetOnTouch( skbRed_OnTouch ); | ||
+ | this.skbRed.SetBackGradientRadial(0, | ||
+ | this.laySkb.AddChild( this.skbRed ); | ||
+ | this.txtGreen = app.CreateText( " | ||
+ | this.txtGreen.parent = self; | ||
+ | this.laySkb.AddChild( this.txtGreen ); | ||
+ | this.skbGreen = app.CreateSeekBar( 0.9, -1 ); | ||
+ | this.skbGreen.parent = self; | ||
+ | this.skbGreen.SetRange( 255 ); | ||
+ | this.skbGreen.SetValue( parseInt(colorGreen, | ||
+ | this.skbGreen.SetOnTouch( skbGreen_OnTouch ); | ||
+ | this.skbGreen.SetBackGradientRadial(0, | ||
+ | this.laySkb.AddChild( this.skbGreen ); | ||
+ | this.txtBlue = app.CreateText( "Blue: " + parseInt(colorBlue, | ||
+ | this.txtBlue.parent = self; | ||
+ | this.laySkb.AddChild( this.txtBlue ); | ||
+ | this.skbBlue = app.CreateSeekBar( 0.9, -1 ); | ||
+ | this.skbBlue.parent = self; | ||
+ | this.skbBlue.SetRange( 255 ); | ||
+ | this.skbBlue.SetValue( parseInt(colorBlue, | ||
+ | this.skbBlue.SetOnTouch( skbBlue_OnTouch ); | ||
+ | this.skbBlue.SetMargins(0, | ||
+ | this.skbBlue.SetBackGradientRadial(0, | ||
+ | this.laySkb.AddChild( this.skbBlue ); | ||
+ | this.Cplay.AddChild( this.laySkb ) ; | ||
+ | this.Cpbtnlay = app.CreateLayout( " | ||
+ | this.Cpbtnlay.SetMargins(0.01, | ||
+ | this.Cpbtn = app.CreateButton(" | ||
+ | this.Cpbtn.parent = self; | ||
+ | this.Cpbtn.SetOnTouch(Cpbtn_OnTouch); | ||
+ | this.Cpbtnlay.AddChild(this.Cpbtn); | ||
+ | this.CpbtnClose = app.CreateButton(" | ||
+ | this.CpbtnClose.parent = self; | ||
+ | this.CpbtnClose.SetOnTouch(Cpbtn_OnTouch); | ||
+ | this.Cpbtnlay.AddChild(this.CpbtnClose); | ||
+ | this.Cplay.AddChild(this.Cpbtnlay) | ||
+ | this.Cpdlg.AddLayout(this.Cplay); | ||
+ | this.GetColor = function(){return self.color.GetText(); | ||
+ | this.Show = function(){self.Cpdlg.Show(); | ||
+ | this.Hide = function(){self.Cpdlg.Hide(); | ||
+ | }//function ColorPicker() | ||
+ | |||
+ | // OnTouch events for color seekbars | ||
+ | // | ||
+ | function skbTrs_OnTouch(value) | ||
+ | { | ||
+ | var par = this.parent; | ||
+ | colorTrs = (" | ||
+ | trans = parseInt(Math.round(value)/ | ||
+ | if (trans.toString().length > 1){trans = trans.toString().substring(1); | ||
+ | par.txtTrs.SetText(" | ||
+ | par.color.SetText("#" | ||
+ | par.color.SetTextColor("#" | ||
+ | par.img.SetColor("#" | ||
+ | } | ||
+ | |||
+ | // | ||
+ | function skbRed_OnTouch(value) | ||
+ | { | ||
+ | var par = this.parent; | ||
+ | colorRed = (" | ||
+ | par.txtRed.SetText(" | ||
+ | par.color.SetText("#" | ||
+ | par.color.SetTextColor("#" | ||
+ | par.img.SetColor("#" | ||
+ | } | ||
+ | |||
+ | // | ||
+ | function skbGreen_OnTouch( value ) | ||
+ | { | ||
+ | var par = this.parent; | ||
+ | colorGreen = (" | ||
+ | par.txtGreen.SetText(" | ||
+ | par.color.SetText("#" | ||
+ | par.color.SetTextColor("#" | ||
+ | par.img.SetColor("#" | ||
+ | } | ||
+ | |||
+ | // | ||
+ | function skbBlue_OnTouch( value ) | ||
+ | { | ||
+ | var par = this.parent; | ||
+ | colorBlue = (" | ||
+ | par.txtBlue.SetText(" | ||
+ | par.color.SetText("#" | ||
+ | par.color.SetTextColor("#" | ||
+ | par.img.SetColor("#" | ||
+ | } | ||
+ | |||
+ | //Called if a button is touched | ||
+ | function Cpbtn_OnTouch() | ||
+ | { | ||
+ | var par = this.parent; | ||
+ | var col = par.color.GetText(); | ||
+ | var txtfld = par.Cptextfield; | ||
+ | var clp = par.Cpclipboard | ||
+ | par.Hide(); | ||
+ | if(this.GetText() == " | ||
+ | }//function Cpbtn_OnTouch | ||
+ | |||
+ | //-----3 Callback functions - called if Ok is pressed----- | ||
+ | function GetString(color, | ||
+ | { | ||
+ | if (clipboard) app.SetClipboardText(color); | ||
+ | if (textfield != "" | ||
+ | { | ||
+ | if (textfield.GetType()==" | ||
+ | { | ||
+ | textfield.InsertText( " | ||
+ | } | ||
+ | } | ||
+ | }//function GetString | ||
+ | |||
+ | function SetText(color, | ||
+ | //Note: Dont work with list control | ||
+ | { | ||
+ | if (clipboard) app.SetClipboardText(color); | ||
+ | textfield.SetTextColor(color); | ||
+ | }//function SetText | ||
+ | |||
+ | function SetBackground(color, | ||
+ | { | ||
+ | if (clipboard) app.SetClipboardText(color); | ||
+ | textfield.SetBackColor(color); | ||
+ | }//function SetBackground | ||
+ | </ | ||
+ | |||
+ | In your app you have to do just four things,\\ \\ | ||
+ | 1. Load the Script with | ||
+ | app.LoadScript(" | ||
+ | 2. Create a Button to call the Dialog and add it to the layout | ||
+ | //Create a Button and add it to layout. | ||
+ | btn = app.CreateButton(" | ||
+ | lay.AddChild( btn ); | ||
+ | btn.SetOnTouch(btn_OnTouch); | ||
+ | 3. Create a Textedit for the Hex-Colorcode-Result of the Dialog | ||
+ | //Create a Textedit and add it to Layout | ||
+ | edt = app.CreateTextEdit("", | ||
+ | lay.AddChild( edt ); | ||
+ | 4. Write a function to call the Dialog | ||
+ | function btn_OnTouch() | ||
+ | { | ||
+ | pick = new ColorPicker(GetString, | ||
+ | pick.Show(); | ||
+ | } | ||
+ | Or you can use this Example with all other functions. | ||
+ | <code Javascript exampleapp.js> | ||
+ | //Called when application is started | ||
+ | function OnStart() | ||
+ | { | ||
+ | app.LoadScript(" | ||
+ | //Create a layout with objects vertically centered. | ||
+ | lay = app.CreateLayout(" | ||
+ | |||
+ | //Create a Button and add it to layout. | ||
+ | btn = app.CreateButton(" | ||
+ | lay.AddChild( btn ); | ||
+ | btn.SetOnTouch(btn_OnTouch); | ||
+ | //Create a Textedit and add it to Layout | ||
+ | edt = app.CreateTextEdit("", | ||
+ | lay.AddChild( edt ); | ||
+ | |||
+ | //Create a Button and add it to layout. | ||
+ | btn2 = app.CreateButton(" | ||
+ | btn2.SetMargins(0, | ||
+ | lay.AddChild( btn2 ); | ||
+ | btn2.SetOnTouch(btn2_OnTouch); | ||
+ | //Create a Spinner and add it to layout. | ||
+ | spin = app.CreateSpinner(" | ||
+ | lay.AddChild( spin ); | ||
+ | |||
+ | //Create a Button and add it to layout. | ||
+ | btn3 = app.CreateButton(" | ||
+ | btn3.SetMargins(0, | ||
+ | lay.AddChild( btn3 ); | ||
+ | btn3.SetOnTouch(btn3_OnTouch); | ||
+ | //Create a list and add it to layout. | ||
+ | lst = app.CreateList(" | ||
+ | lay.AddChild( lst ); | ||
+ | |||
+ | //Add layout to app. | ||
+ | app.AddLayout( lay ); | ||
+ | |||
+ | }//function Onstart() | ||
+ | |||
+ | |||
+ | |||
+ | function btn_OnTouch() | ||
+ | { | ||
+ | // use GetString as first parameter to return the Hex-Colorcode as String | ||
+ | // if edt as second parameter is a Textedit, it writes the | ||
+ | // Colorcode within " (double quotes) at the Cursorposition | ||
+ | // use true or false as third optional parameter to put the | ||
+ | // colorcode in the clipboard (standard is false) | ||
+ | //pick = new ColorPicker(GetString, | ||
+ | |||
+ | // or Write this to copy the code just in the clipboard | ||
+ | // write null as second parameter and it do not paste | ||
+ | // any text in the textedit | ||
+ | // the Clipboardtext is without " (double quotes) | ||
+ | pick = new ColorPicker(GetString, | ||
+ | |||
+ | // Show the Picker | ||
+ | pick.Show(); | ||
+ | |||
+ | }//function btn_OnTouch() | ||
+ | |||
+ | |||
+ | function btn2_OnTouch() | ||
+ | { | ||
+ | // use SetText as first parameter | ||
+ | // to Set the Textcolor of the contol | ||
+ | pick = new ColorPicker(SetText, | ||
+ | pick.Show(); | ||
+ | }//function btn_OnTouch() | ||
+ | |||
+ | |||
+ | function btn3_OnTouch() | ||
+ | { | ||
+ | // Use SetBackground as first parameter | ||
+ | // to set the Backgroundcolor of the control | ||
+ | pick = new ColorPicker(SetBackground, | ||
+ | | ||
+ | }//function btn_OnTouch() | ||
+ | </ | ||