User Tools

Site Tools


sample_code:fontawesomepicker

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision
Previous revision
sample_code:fontawesomepicker [2015/02/08 12:22]
octazid created
sample_code:fontawesomepicker [2016/01/10 20:46] (current)
Line 1: Line 1:
-======FontAwesompicker======+======FontAwesomepicker======
 With the FontAwesomepicker you can browse through all icons of the font. The result of it gives you the name of the selected icon and you can use it in your code\\ \\ With the FontAwesomepicker you can browse through all icons of the font. The result of it gives you the name of the selected icon and you can use it in your code\\ \\
 {{:pics:fontawesomepicker.png?400|}} {{:pics:fontawesomepicker.png?400|}}
Line 5: Line 5:
 Save the **Fontawesomepicker.js** in the Droidscriptfolder where you need the file.\\  Save the **Fontawesomepicker.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. You can call the dialog after you load the Script into your app at the OnStart() Event.
 +===== Picker dialog code =====
  
-More text comming soon...+<code javascript Fontawesomepicker.js> 
 +/******************************************************************** 
 + * Font Awesome Picker 
 + ==================================================================== 
 + * Creation date: 07-02-2015 by octazid 
 + * Last update: 08-02-2015 by octazid   
 + ==================================================================== 
 + * Simple dialog to browse through the icons and select the name 
 + *  
 + ********************************************************************/ 
 + 
 +var text 
 +var txt = "" 
 +var pos = 0 
 +var lastselected 
 + 
 +//------------Create the Dialog------------- 
 +function Fontawesomepicker(control) 
 +
 +    text = app.ReadFile("All674FontAwesomeIcons.txt"); 
 +    text = text.split(","); 
 +    var self = this; 
 +    this.control = control; 
 +    this.dlg = app.CreateDialog("Fontawesomepicker"); 
 +    this.lay = app.CreateLayout( "linear", "fillx" ); 
 +    this.txtpic = app.CreateText("",0.3,-1,"Center,Fontawesome"); 
 +    this.txtpic.SetTextSize(40); 
 +    this.txtpic.SetMargins(0,0.01,0,0); 
 +    this.txtpic.SetTextColor( "#FF63FC14" ); 
 +    this.txtpic.parent = self; 
 +    this.lay.AddChild(this.txtpic); 
 +    this.txt = app.CreateText("",0.6,-1,"Center,Autoscale"); 
 +    this.txt.SetTextSize(24); 
 +    this.txt.parent = self; 
 +    this.lay.AddChild(this.txt); 
 +    for (var i = 0; i < text.length - 1; i++) 
 +        { 
 +        txt = txt + "[" + text[i] + "]:<br>" + text[i] + "<br><br>" +  
 +              "Nr. " + [i+1] + ":null,"  
 +        } 
 +    this.lst = app.CreateList(txt , 0.6, 0.4, "Html, FontAwesome" ); 
 +    this.lst.parent = self; 
 +    this.lst.SetTextColor( "#FF880000" );  
 +    this.lst.SetBackColor("#FF141414"); 
 +    this.lst.SetTextSize( 20 );  
 +    this.lst.SetOnTouch(lst_OnTouch);   
 +    this.lst.SelectItemByIndex(pos, true); 
 +    this.lay.AddChild(this.lst); 
 +    this.btnlay = app.CreateLayout( "linear", "horizontal,fillxy" ); 
 +    this.dlgbtn = app.CreateButton("OK", 0.3); 
 +    this.dlgbtn.parent = self; 
 +    this.dlgbtn.SetOnTouch(dlgbtn_OnTouch); 
 +    this.btnlay.AddChild(this.dlgbtn); 
 +    this.dlgbtnCancel = app.CreateButton("Chancel",0.3); 
 +    this.dlgbtnCancel.parent = self; 
 +    this.dlgbtnCancel.SetOnTouch(dlgbtn_OnTouch); 
 +    this.btnlay.AddChild(this.dlgbtnCancel); 
 +    this.lay.AddChild(this.btnlay) 
 +    this.dlg.AddLayout(this.lay); 
 +    this.Show = function(){self.dlg.Show();
 +    this.Hide = function(){self.dlg.Hide();
 +    lastselected = GetListItemCount(text,pos); 
 +    this.txtpic.SetText("[" + lastselected + "]"); 
 +    this.txt.SetText(lastselected); 
 +}//function Fontawesomepicker() 
 + 
 + 
 +//Called if a listitem is touched 
 +function lst_OnTouch(title, body, type, index) 
 +
 +    result = GetListItemCount(text,index); 
 +    pos = index; 
 +    var par = this.parent; 
 +    par.txtpic.SetText("[" + result + "]"); 
 +    par.txt.SetText(result); 
 +    par.lst.SelectItemByIndex(pos); 
 +}//lst_OnTouch 
 + 
 + 
 +//returns the name of the selected item taken from the array 
 +function GetListItemCount(text,i) 
 +
 +    return text[i]; 
 +
 + 
 + 
 +//Called if a Button is touched 
 +function dlgbtn_OnTouch() 
 +
 +    var par = this.parent; 
 +    par.Hide(); 
 +    if(this.GetText() == "OK"
 +    { 
 +      par.control.InsertText("[" + par.txt.GetText() + "]", par.control.GetCursorPos()); 
 +    }  
 +}//function dlgbtn_OnTouch 
 +</code> 
 +===== Example calling code ===== 
 + 
 +Here is a example how you call the picker. 
 + 
 +<code javascript example.js> 
 +//Called if the app starts 
 +function OnStart() 
 +
 +    app.LoadScript("Fontawesomepicker.js"); 
 +    //create a layout 
 +    lay = app.CreateLayout("linear", "VCenter, FillXY"); 
 +    //create a textedit 
 +    edt = app.CreateTextEdit("", 0.8, -1); 
 +    //add it to the layout 
 +    lay.AddChild(edt); 
 +    //create a button to call the picker 
 +    btn = app.CreateButton("Call Picker", 0.8, -1); 
 +    btn.SetOnTouch(btn_OnTouch); 
 +    //add it to the layout 
 +    lay.AddChild(btn); 
 +    //add the layout to the app 
 +    app.AddLayout(lay); 
 +
 + 
 +//Called if the button is touched 
 +function btn_OnTouch(control) 
 +
 +    //write the textedit name to the new picker 
 +    //to get the result in it 
 +    fapick = new Fontawesomepicker(edt); 
 +    fapick.Show(); 
 +}</code> 
 + 
 +And here is the textfile with the icon names. At the moment (2015-Nov-03) are 674 icons in the font. But it could be, that not all where displayed as icon within Droidscript. Download the file and save it in the same folder as the Fontawesomepicker.js file. The picker loads the values into a list control to display the icons. 
 +===== Text file to include ===== 
 +<code text All674FontAwesomeIcons.txt> 
 +fa-500px,fa-adjust,fa-adn,fa-align-center,fa-align-justify,fa-align-left,fa-align-right,fa-amazon,fa-ambulance,fa-anchor,fa-android,fa-angellist,fa-angle-double-down,fa-angle-double-left,fa-angle-double-right,fa-angle-double-up,fa-angle-down,fa-angle-left,fa-angle-right,fa-angle-up,fa-apple,fa-archive,fa-area-chart,fa-arrow-circle-down,fa-arrow-circle-left,fa-arrow-circle-o-down,fa-arrow-circle-o-left,fa-arrow-circle-o-right,fa-arrow-circle-o-up,fa-arrow-circle-right,fa-arrow-circle-up,fa-arrow-down,fa-arrow-left,fa-arrow-right,fa-arrows,fa-arrows-alt,fa-arrows-h,fa-arrows-v,fa-arrow-up,fa-asterisk,fa-at,fa-automobile,fa-backward,fa-balance-scale,fa-ban,fa-bank,fa-bar-chart,fa-bar-chart-o,fa-barcode,fa-bars,fa-battery-0,fa-battery-1,fa-battery-2,fa-battery-3,fa-battery-4,fa-battery-empty,fa-battery-full,fa-battery-half,fa-battery-quarter,fa-battery-three-quarters,fa-bed,fa-beer,fa-behance,fa-behance-square,fa-bell,fa-bell-o,fa-bell-slash,fa-bell-slash-o,fa-bicycle,fa-binoculars,fa-birthday-cake,fa-bitbucket,fa-bitbucket-square,fa-bitcoin,fa-black-tie,fa-bold,fa-bolt,fa-bomb,fa-book,fa-bookmark,fa-bookmark-o,fa-briefcase,fa-btc,fa-bug,fa-building,fa-building-o,fa-bullhorn,fa-bullseye,fa-bus,fa-buysellads,fa-cab,fa-calculator,fa-calendar,fa-calendar-check-o,fa-calendar-minus-o,fa-calendar-o,fa-calendar-plus-o,fa-calendar-times-o,fa-camera,fa-camera-retro,fa-car,fa-caret-down,fa-caret-left,fa-caret-right,fa-caret-square-o-down,fa-caret-square-o-left,fa-caret-square-o-right,fa-caret-square-o-up,fa-caret-up,fa-cart-arrow-down,fa-cart-plus,fa-cc,fa-cc-amex,fa-cc-diners-club,fa-cc-discover,fa-cc-jcb,fa-cc-mastercard,fa-cc-paypal,fa-cc-stripe,fa-cc-visa,fa-certificate,fa-chain,fa-chain-broken,fa-check,fa-check-circle,fa-check-circle-o,fa-check-square,fa-check-square-o,fa-chevron-circle-down,fa-chevron-circle-left,fa-chevron-circle-right,fa-chevron-circle-up,fa-chevron-down,fa-chevron-left,fa-chevron-right,fa-chevron-up,fa-child,fa-chrome,fa-circle,fa-circle-o,fa-circle-o-notch,fa-circle-thin,fa-clipboard,fa-clock-o,fa-clone,fa-close,fa-cloud,fa-cloud-download,fa-cloud-upload,fa-cny,fa-code,fa-code-fork,fa-codepen,fa-coffee,fa-cog,fa-cogs,fa-columns,fa-comment,fa-commenting,fa-commenting-o,fa-comment-o,fa-comments,fa-comments-o,fa-compass,fa-compress,fa-connectdevelop,fa-contao,fa-copy,fa-copyright,fa-creative-commons,fa-credit-card,fa-crop,fa-crosshairs,fa-css3,fa-cube,fa-cubes,fa-cut,fa-cutlery,fa-dashboard,fa-dashcube,fa-database,fa-dedent,fa-delicious,fa-desktop,fa-deviantart,fa-diamond,fa-digg,fa-dollar,fa-dot-circle-o,fa-download,fa-dribbble,fa-dropbox,fa-drupal,fa-edit,fa-eject,fa-ellipsis-h,fa-ellipsis-v,fa-empire,fa-envelope,fa-envelope-o,fa-envelope-square,fa-eraser,fa-eur,fa-euro,fa-exchange,fa-exclamation,fa-exclamation-circle,fa-exclamation-triangle,fa-expand,fa-expeditedssl,fa-external-link,fa-external-link-square,fa-eye,fa-eyedropper,fa-eye-slash,fa-facebook,fa-facebook-f,fa-facebook-official,fa-facebook-square,fa-fast-backward,fa-fast-forward,fa-fax,fa-feed,fa-female,fa-fighter-jet,fa-file,fa-file-archive-o,fa-file-audio-o,fa-file-code-o,fa-file-excel-o,fa-file-image-o,fa-file-movie-o,fa-file-o,fa-file-pdf-o,fa-file-photo-o,fa-file-picture-o,fa-file-powerpoint-o,fa-files-o,fa-file-sound-o,fa-file-text,fa-file-text-o,fa-file-video-o,fa-file-word-o,fa-file-zip-o,fa-film,fa-filter,fa-fire,fa-fire-extinguisher,fa-firefox,fa-flag,fa-flag-checkered,fa-flag-o,fa-flash,fa-flask,fa-flickr,fa-floppy-o,fa-folder,fa-folder-o,fa-folder-open,fa-folder-open-o,fa-font,fa-fonticons,fa-forumbee,fa-forward,fa-foursquare,fa-frown-o,fa-futbol-o,fa-gamepad,fa-gavel,fa-gbp,fa-ge,fa-gear,fa-gears,fa-genderless,fa-get-pocket,fa-gg,fa-gg-circle,fa-gift,fa-git,fa-github,fa-github-alt,fa-github-square,fa-git-square,fa-gittip,fa-glass,fa-globe,fa-google,fa-google-plus,fa-google-plus-square,fa-google-wallet,fa-graduation-cap,fa-gratipay,fa-group,fa-hacker-news,fa-hand-grab-o,fa-hand-lizard-o,fa-hand-o-down,fa-hand-o-left,fa-hand-o-right,fa-hand-o-up,fa-hand-paper-o,fa-hand-peace-o,fa-hand-pointer-o,fa-hand-rock-o,fa-hand-scissors-o,fa-hand-spock-o,fa-hand-stop-o,fa-hdd-o,fa-header,fa-headphones,fa-heart,fa-heartbeat,fa-heart-o,fa-history,fa-home,fa-hospital-o,fa-hotel,fa-hourglass,fa-hourglass-1,fa-hourglass-2,fa-hourglass-3,fa-hourglass-end,fa-hourglass-half,fa-hourglass-o,fa-hourglass-start,fa-houzz,fa-h-square,fa-html5,fa-i-cursor,fa-ils,fa-image,fa-inbox,fa-indent,fa-industry,fa-info,fa-info-circle,fa-inr,fa-instagram,fa-institution,fa-internet-explorer,fa-intersex,fa-ioxhost,fa-italic,fa-joomla,fa-jpy,fa-jsfiddle,fa-key,fa-keyboard-o,fa-krw,fa-language,fa-laptop,fa-lastfm,fa-lastfm-square,fa-leaf,fa-leanpub,fa-legal,fa-lemon-o,fa-level-down,fa-level-up,fa-life-bouy,fa-life-buoy,fa-life-ring,fa-life-saver,fa-lightbulb-o,fa-line-chart,fa-link,fa-linkedin,fa-linkedin-square,fa-linux,fa-list,fa-list-alt,fa-list-ol,fa-list-ul,fa-location-arrow,fa-lock,fa-long-arrow-down,fa-long-arrow-left,fa-long-arrow-right,fa-long-arrow-up,fa-magic,fa-magnet,fa-mail-forward,fa-mail-reply,fa-mail-reply-all,fa-male,fa-map,fa-map-marker,fa-map-o,fa-map-pin,fa-map-signs,fa-mars,fa-mars-double,fa-mars-stroke,fa-mars-stroke-h,fa-mars-stroke-v,fa-maxcdn,fa-meanpath,fa-medium,fa-medkit,fa-meh-o,fa-mercury,fa-microphone,fa-microphone-slash,fa-minus,fa-minus-circle,fa-minus-square,fa-minus-square-o,fa-mobile,fa-mobile-phone,fa-money,fa-moon-o,fa-mortar-board,fa-motorcycle,fa-mouse-pointer,fa-music,fa-navicon,fa-neuter,fa-newspaper-o,fa-object-group,fa-object-ungroup,fa-odnoklassniki,fa-odnoklassniki-square,fa-opencart,fa-openid,fa-opera,fa-optin-monster,fa-outdent,fa-pagelines,fa-paint-brush,fa-paperclip,fa-paper-plane,fa-paper-plane-o,fa-paragraph,fa-paste,fa-pause,fa-paw,fa-paypal,fa-pencil,fa-pencil-square,fa-pencil-square-o,fa-phone,fa-phone-square,fa-photo,fa-picture-o,fa-pie-chart,fa-pied-piper,fa-pied-piper-alt,fa-pinterest,fa-pinterest-p,fa-pinterest-square,fa-plane,fa-play,fa-play-circle,fa-play-circle-o,fa-plug,fa-plus,fa-plus-circle,fa-plus-square,fa-plus-square-o,fa-power-off,fa-print,fa-puzzle-piece,fa-qq,fa-qrcode,fa-question,fa-question-circle,fa-quote-left,fa-quote-right,fa-ra,fa-random,fa-rebel,fa-recycle,fa-reddit,fa-reddit-square,fa-refresh,fa-registered,fa-remove,fa-renren,fa-reorder,fa-repeat,fa-reply,fa-reply-all,fa-retweet,fa-rmb,fa-road,fa-rocket,fa-rotate-left,fa-rotate-right,fa-rouble,fa-rss,fa-rss-square,fa-rub,fa-ruble,fa-rupee,fa-safari,fa-save,fa-scissors,fa-search,fa-search-minus,fa-search-plus,fa-sellsy,fa-send,fa-send-o,fa-server,fa-share,fa-share-alt,fa-share-alt-square,fa-share-square,fa-share-square-o,fa-shekel,fa-sheqel,fa-shield,fa-ship,fa-shirtsinbulk,fa-shopping-cart,fa-signal,fa-sign-in,fa-sign-out,fa-simplybuilt,fa-sitemap,fa-skyatlas,fa-skype,fa-slack,fa-sliders,fa-slideshare,fa-smile-o,fa-soccer-ball-o,fa-sort,fa-sort-alpha-asc,fa-sort-alpha-desc,fa-sort-amount-asc,fa-sort-amount-desc,fa-sort-asc,fa-sort-desc,fa-sort-down,fa-sort-numeric-asc,fa-sort-numeric-desc,fa-sort-up,fa-soundcloud,fa-space-shuttle,fa-spinner,fa-spoon,fa-spotify,fa-square,fa-square-o,fa-stack-exchange,fa-stack-overflow,fa-star,fa-star-half,fa-star-half-empty,fa-star-half-full,fa-star-half-o,fa-star-o,fa-steam,fa-steam-square,fa-step-backward,fa-step-forward,fa-stethoscope,fa-sticky-note,fa-sticky-note-o,fa-stop,fa-street-view,fa-strikethrough,fa-stumbleupon,fa-stumbleupon-circle,fa-subscript,fa-subway,fa-suitcase,fa-sun-o,fa-superscript,fa-support,fa-table,fa-tablet,fa-tachometer,fa-tag,fa-tags,fa-tasks,fa-taxi,fa-television,fa-tencent-weibo,fa-terminal,fa-text-height,fa-text-width,fa-th,fa-th-large,fa-th-list,fa-thumbs-down,fa-thumbs-o-down,fa-thumbs-o-up,fa-thumbs-up,fa-thumb-tack,fa-ticket,fa-times,fa-times-circle,fa-times-circle-o,fa-tint,fa-toggle-down,fa-toggle-left,fa-toggle-off,fa-toggle-on,fa-toggle-right,fa-toggle-up,fa-trademark,fa-train,fa-transgender,fa-transgender-alt,fa-trash,fa-trash-o,fa-tree,fa-trello,fa-tripadvisor,fa-trophy,fa-truck,fa-try,fa-tty,fa-tumblr,fa-tumblr-square,fa-turkish-lira,fa-tv,fa-twitch,fa-twitter,fa-twitter-square,fa-umbrella,fa-underline,fa-undo,fa-university,fa-unlink,fa-unlock,fa-unlock-alt,fa-unsorted,fa-upload,fa-usd,fa-user,fa-user-md,fa-user-plus,fa-users,fa-user-secret,fa-user-times,fa-venus,fa-venus-double,fa-venus-mars,fa-viacoin,fa-video-camera,fa-vimeo,fa-vimeo-square,fa-vine,fa-vk,fa-volume-down,fa-volume-off,fa-volume-up,fa-warning,fa-wechat,fa-weibo,fa-weixin,fa-whatsapp,fa-wheelchair,fa-wifi,fa-wikipedia-w,fa-windows,fa-won,fa-wordpress,fa-wrench,fa-xing,fa-xing-square,fa-yahoo,fa-yc,fa-y-combinator,fa-y-combinator-square,fa-yc-square,fa-yelp,fa-yen,fa-youtube,fa-youtube-play,fa-youtube-square 
 +</code> 
 + 
 +===== All the code as spk ===== 
 +You can find an SPK of the above code at [[http://droidscript.me.uk/faiconpick.spk]]
sample_code/fontawesomepicker.1423398121.txt.gz · Last modified: 2015/02/08 20:22 (external edit)