sketchup ruby : add interactions

many ways to add interactions : while HTML DIALOG allows you to play with javascript, more simple choice based input class allows your user to choose a value within selected :

http://ruby.sketchup.com/UI.html#inputbox-class_method

# With three params, it shows all text boxes:
prompts = ["What is your Name?", "What is your Age?", "Gender"]
defaults = ["Enter name", "", "Male"]
input = UI.inputbox(prompts, defaults, "Tell me about yourself.")

# With four params, it shows a drop down box for prompts that have
# pipe-delimited lists of options. In this case, the Gender prompt
# is a drop down instead of a text box.
prompts = ["What is your Name?", "What is your Age?", "Gender"]
defaults = ["Enter name", "", "Male"]
list = ["", "", "Male|Female"]
input = UI.inputbox(prompts, defaults, list, "Tell me about yourself.")

Sketchup coding ruby : list all elements by layer

it is very easy to start using the code in skecthup : open your document, and go to menu / window / Ruby Console. Everything you type in that ruby console will have immediate effect on the current project. My first hello world exercise was puts "helloworld" , basic introduction to Ruby. Second exercise was to list all elements within each skecthup layer, which is a little more difficult because some elements exist on their own and others exist within a group. So, inspired by this very helpful forum answer I decided I'd list only elements belonging to a group, just because that involves filtering entities, first by group and then by layer :

model = Sketchup::active_model

model.layers.each {|layer|

 
     puts layer.name
     
     grps = model.entities.grep(Sketchup::Group) 
grps_on_layer_twan = grps.each {|grp|
  puts grp.entityID if layer.name==grp.layer.name ;
}
}

Of course there is more in real life than just listing entities by their name : this plugin will list all objects of a project visually, for example

backpack crud : new nested field type displays explicit hiererachy

the world of php CRUD systems -automatic relational database administration interface- is quickly moving forward : last month after weeks of buzz, NOVA  the official crud tool made by PHP framework laravel founder came out, and it really looks nice, we all want to try it but there's small paywall that, even minimal (less than 100$ is nothing for that kind of tool), in the long term process, might stop opensource freaks like me to even try it.

Read more

Bootstrap bottom navigation buttons

In an article on medium, Nick Babich, Editor-in-chief of UX Planet , advocates the usage of bottom buttons navigation : with bootstrap I have implemented an instagram like ui, which  displays a set of icons, each pointing to its own slider ruler. The idea is to work on various settings directly accessible from the scrollable bottom bar, leaving room above for live display of the image, in our case a 3D render of a model that is preconfigured.

DEMO HERE : https://bootsnipp.com/snippets/GajjV

is Gutenberg going wrong ?

There are strong signals out there from space that wordpress future versions will integrate a new advanced content manager, like the already popular visual composer or elementor among many others, including the new player KARMA website builder, that allow to work with advanced content layout, mainly via the construction of column based visual design. After receiving many of those signals (news, messages, etc...) to  my brain, I decided I should try this out, available as a free plugin for beta testers. Well in my opinion this does not look like good news for wordpress.

We wordpress users and fanatics should admit that in spite of its wide popularity (today powers 30% of the web), wordpress is not the best piece of software to work with making websites. The code is anarchic, resource intensive, and even if I have to say I've run my longest surviving websites on wordpress (13 years on the same platform is a record), I can not be sure they're all my best achievements.

and let's talk about visual code editors  : we've all tried the clumsy visual composer, which in spite of its lack of HTML efficiency, is one of the oldest - if not best - graphic design tool for the wordpress powered web sites. That was a precursor, and now there are a lot of similar opensource / fremium alternatives that do a wonderful job. TRying Gutenberg in its present state just brought me back to the old age when wordpress was no more than a blogging platform for nerds.

There is no doubt that developpment of Gutenberg will go on, but it might no be the wisest thing to go with, opensource is fine but not to the extreme where you have to go backwards just to stay open.

Drag and drop categories and taxonomies : woocommerce full admin new release

After a 12 months of silence here comes a new release of my preview version of a special enhanced admin interface for woocommerce. Its main purpose is to provide a better interface for viewing and admistering products, from the point of view an organized shop manager that works intensively with categories

The new version labelled 0.3 adds drag and drop for categories. This feature is for the moment limited to dealing with sub categories, whereas a real drag and drop component should also deal with category order, but for the moment do not expect that much : use this plugin to sort categories and sub categories on big databases where you need to get a clear idea of a hierarchy tree.

The idea for this feature came after I had to deal with a big migration from Magento to Woocommerce, where a lot of categories were imported with their products and I needed to check that everything was OK. having no public theme yet, I needed a more convenient interface for viewing the results of the import.

Link :

Other plugins work with taxonomies :

  • Taxonomy terms order is the most famous of all plugins with more than 20000 downloads . It uses the admin menu style interface for allowing taxonomy order.

Beyond the wordpress theme paradigm : block based design

Ever wondered how to share  common design elements between wordpress sites ? A lot of predesigned themes that are used in thousands of websites use predefined templates that allow you to play with variable layouts, but what if you want to design a neat block based page and use elements in pages as you want ?

There is a big constraint when working with predefined themes : can't get out of them easily. I discovered the idea of block based design after trying out the free mobirise static website builder, which allowed me to work out a simple full width responsibe  site in a few minutes.

Layout editors like visual composers or elementor now incorporate predesigned pages too : the obligation to use  a specific theme to get the design you want is now less important than before, time to move to block based design.

In its essence, the best solution I have found for responsive block based design is Visual Composer Extension — Block Builder + Addons, an additional plugin developped by pixelthrone, and sold on themeforest. The concept is very well layed out and the extension works as a folder organised list of specific blocks. Combining the now universal VISUAL COMPOSER extension with a list of predefined blocks seems an ideal combination for bringing web based block editing to the web.

 

Bridging prestashop features to wordpress

Like to have the best of both worlds ? seems prestashop and wordpress can communicate, though coding standards can make the develpment of such an integration difficult, even  for experienced PHP developers :

Using prestashop modules or content for automatic  product display in your wordpres blog

  • The plugin "Prestashop Integration" defines a new wordpress shortcode that will display  prestashop products in a wordpress installation. Pretty straightforward to get running, no big surprise here.

Using Prestashop Authentification Information to get worpdress behave as logged in

  • if you are familiar with Symfony and Composer, you can try this external authentification class : PrestashopBridge. for myself, in spite of expert wordpress knowledge, some knowledge of prestashop and composer tools,  I did not manage to get it working : only for the rough guys !
  • If you want to share users between two installations you have plugins available
    • prestashop-user-compatibility synchronises passwords of prestashop installation to wordpress: but it requires to have synchronized users. This plugin seems to be more like a one time helper for migrating from prestashop to wordpress
    • This is why I build prestawpbestworlds, because I want the best of both worlds : this is a premium plugin for wordpress (cost 99$) :  a one way  real time user and login status synchronizer that will allow currently prestashop customer to user wordpress as connected user, without even having to login again. Login, user creation, logout are all processed via prestashop connection information.

Building custom option toolset with magento and woocommerce

In the process of comparing magento and woocommerce, I went through the search of a plugin / extension that creates generic set of options (custom option template) to be used on products. the advantage of generic option toolset is that products of the same family often share the same set of options : modify one in the template modifies them all, this feature is a basic sanity procedure but it is not implenented in default magento, nor woocommerce. Option management in Woocommerce is horrible, while magento has a quite efficient interface for working with options, but in both cases you want to work generic and use a single point of definition for custom options.

  • Magento has many  extensions that do the job, they range from 50$ to 250$, I have tested the average one by LITEXTENTION, works fine and allows to import options templates, as a generic modifiable template, or import the custom options as fixed options for the product.
  • For woocommerce, the plugin ecosystem is not very rich on that purpose but the job has been done too, and comes the very accessible cost of 19$ : the WooCommerce Extra Product Options from a company called ThemeComplete is available on CodeCanyon, and it seems to be a very useful option because it has been sold more than 11000 times !!

AngularJS + Lavarel opensource CRM : review of invoiceninja

Moving from the world of static html generation from dynamic PHP code  to Angular Js powered system is a challenging opportunity for us freelancers. What better option to start with lavarel and angularjs than to try a full featured opensource Customer Relation application ? I was getting bored of the twenty century looking DOLIBARR and InvoiceNinja is a very neat looking bootstrap based application that can be used online or self hosted. The big advantage of this solution is that the installation process is quite straight forward if you know how to create your own database within a classic LAMP system. Invoice Ninja is really good for task management, invoicing and product management, and deserves the few minutes of trial you'll spend on it .

Optimizing images for WordPress

There are two main methods for optimizing images when working on wordpress.

First method is to work on your computer before uploading : batch processing is easy if you take the time to find the right software. Windows user will like  Image Resizer or light image resizer while Mac users will find Image Optim or Iresize.

SEcond method is to use a software as a service provider associated with a wordpress plugin, that will resize images on the fly. services like that cost a few dollar per month and offer the advantage of not working on your computer, saves one step, time saver. disavantage is time loading of the image which can vary depending on you rinternet connection. Such services are  zara4, cheetaho, kraken.io ...

Elementor hover tooltip for carousel

Visual composer addict can quit : free wordpress plugin Elementor is out and keeps growing with basic and very efficient widgets, like the carousel that visually beats VC's native. One drawback I encoutered though was the lack of explicit tooltip on image hover that we love to interact when viewing multiple images in a carousel :

elementor-hover-tooltip-illustration

Assembling pieces of code from all over the web, it took me quite a while to get that so I thought I might share. This piece of code is good for experienced wordpress theme developer who knows how to integrate style and javascript, any jquery powered script will accept that one, make sure the carousel you want tooltips has the hovertooltip class because you might not want to apply the effect to all carousels, big full screen might not need that.

javscript hack : creating title attribute from alt, and creating tooltip from title

$(document).ready( function(){
	$('.hovertooltip img').each(  function() {   $(this).attr("title",$(this).attr('alt') ); }); //breizhwave
		//source http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/
		$('.hovertooltip img').hover(function(){
			// Hover over code
			var title = $(this).attr('title');
			$(this).data('tipText', title).removeAttr('title');
			$('<p class="tooltip"></p>')
				.text(title)
				.appendTo('body')
				.show() ;
		}, function() {
			// Hover out code
			$(this).attr('title', $(this).data('tipText'));
			$('.tooltip').remove();
		}).mousemove(function(e) {
			var mousex = e.pageX -250; //Get X coordinates
			var mousey = e.pageY + 10; //Get Y coordinates
			$('.tooltip')
				.css({ top: mousey, left: mousex })
		});
});

styling the tooltip : css

.elementor-image-carousel-wrapper img {cursor:pointer}
.tooltip {
    display:none;
    position:absolute;
    background-color:#c4a85c;
    margin-top:30px;
    border-radius:3px;
    font-size:13px;
    padding:0px 10px 10px 10px;
    width:400px;
    color:#fff;

    z-index:1000;
}

 

 

Woocommerce : reasons for choosing additional field plugin

Developping additionnal fields for woocommerce products can be done using custom fields, but this method is not user friendly for the ecommerce administrator. There are many plugins for wordpress that enhance this feature, and we will start comparing the two best known plugins : Advanced Custom Fields (ACF) and (Custom Field Suite) CFS. These two plugins are not specific to woocommerce : they are designed to work for any  custom post type, including woocommerce products.

Popularity

popularity is the first relevant  indicator for the choice of a wordpress plugin, for many reasons : when a plugin is used by a consistent community, you can safely rely on it for the present and medium term future : you have less chance that it will be abandoned, amount of users  gives a good idea of how the plugin will be maintained in the future. Security is a  big issue on wordpress and active plugins are more subject to attacks, and as such more subject to receiving security patches in time.

As of today, the biggest difference between ACF and CFS is their popularity : ACR has been downloaded on more than 1 million active installs, while CFS ranks 30000, which is not a bad indicator, but largely below ACF, the community preferred custom field plugin.

Features

Basically, all you can do on CFS can be done with ACF, with one big exception. the CFS plgin page itself mentions : "This plugin is a free, lightweight alternative to Advanced Custom Fields."

both plugins have basic field types : text input, date input, wysiwyg input, relationship, file  upload. While ACF offers more diversity on the selection of input types, CFS has a big advantage on its free version with the repeater section that is only available in the premium (paid version) of ACF.

Admin Columns

the ability to display products in a single list is a basic operation that any wordpress data type provides, and products in woocommerce obey to that rule. The possibility to include custom fields in the list can be implemented via specific code (ACF / CFS). For those who do not want to code, or if you want an easy to use interface, Admin columns (premium version) do the job and integrate very well with both ACF and CFS, with the problematic fact that you would have to renew your license every year if you want updates.

Method for choosing

First thing you should do is plan : make a list of fields you will need for your products. If you do not plan to make purchases soon, and if you require the repeater field, then go for CFS : its simple API will let you work with custom fields very quickly. On the other hand if you plan more advanced features like color chooser, google map location chooser, then go for ACF.

Other extensions to watch

WordPress customizer : style chooser

I started working with scss bootstrap variables : very easy now to build dozens of color variations for your favorite all in one theme. Imagine you have ten stylesheets to choose from : you can reuse the same theme everywhere and concentrate on color choosing. Here is the piece of code for wordpress customizer that will allow you to select a stylesheet (named main-something.css) among all available from the dist / style folder !!

function wave_customizer_design_section( $wp_customize ) {
$wp_customize->add_section(
'wave_design',
array(
'title' => 'Design',
'description' => 'Design Rocks.',
'priority' => 35,
)
);

    $wp_customize->add_setting(
        'wave_style',
        array(
            'default' => 'wordpress',
        )
    );
    $styledir=scandir(get_stylesheet_directory(). "/dist/styles/");$arrStyles=array();
    foreach ($styledir as $k=>$value)
    {
        $fileinfo= pathinfo($value);
        if (strstr($value, "main") && $fileinfo["extension"] == "css") $arrStyles[$value]=$value;
    }
    $wp_customize->add_control(
        'wave_style',
        array(
            'type' => 'select',
            'label' => 'This site is powered by:',
            'section' => 'wave_design',
            'choices' => $arrStyles
        )
    );
}
add_action( 'customize_register', 'wave_customizer_design_section' );

 

Woocommerce : working with automatic emails

Woocommerce, the most popular ecommerce extension for wordpress, comes with a very efficient HTML template based automatic email system. The first thing to look for when customizing wordpress automatic emails is to go to the woocommerce/settings/emails area, where you can customize the subject of the emails for creating new account, new order, etc... If you want more customization , you have to go your theme and override the default woocommerce email templates.

After that you can test how mails react with the following extensions

Gravity forms : create a new composite field

Ever wanted to create a new type of advanced field for gravity forms ?  for example, I needed to create a dimension field with two select boxes, limiting the choices available for selecting a dimension in centimeters and millimiters. Well it took me quite a while to find out that a lot of documentation on the web is outdated : the "simple field addon" published on git hub simply does not work on latest gravity forms (version 2.0.6 as of today)... Instead of trying to debug that one I found a better explanation of extending fields on gravity forms GF_FIELD documentation page. It turns out that extending that main class in a simple file that you can include in your theme (or create a plugin from it), works fine. here is a sample code taken from the standard time field, quickly transformed to a centimeter / millimeter select box. NO GUARANTEE that this works, it is in development, it still contains some code from the original time field,  I will post updates as I progress, feel free to use it and make your own plugin out of this one

 

<?php
 
if ( ! class_exists( 'GFForms' ) ) {
	die();
}


class GF_Field_Doublenumberselect extends GF_Field {

	public $type = 'doublenumberselect';

	public function get_form_editor_field_title() {
		return esc_attr__( 'doublenumberselect', 'gravityforms' );
	}

	function get_form_editor_field_settings() {
		return array(
			'conditional_logic_field_setting',
			'prepopulate_field_setting',
			'error_message_setting',
			'label_setting',
			'sub_labels_setting',
			'label_placement_setting',
			'sub_label_placement_setting',
			'admin_label_setting',
			'time_format_setting',
			'rules_setting',
			'visibility_setting',
			'duplicate_setting',
			'default_input_values_setting',
			'input_placeholders_setting',
			'description_setting',
			'css_class_setting',
		);
	}

	public function validate( $value, $form ) {
	 
	}

	public function get_field_input( $form, $value = '', $entry = null ) {

		$is_entry_detail = $this->is_entry_detail();
		$is_form_editor  = $this->is_form_editor();

		$form_id  = absint( $form['id'] );
		$id       = intval( $this->id );
		$field_id = $is_entry_detail || $is_form_editor || $form_id == 0 ? "input_$id" : 'input_' . $form_id . "_$id";

		$form_sub_label_placement  = rgar( $form, 'subLabelPlacement' );
		$field_sub_label_placement = $this->subLabelPlacement;
		$is_sub_label_above        = $field_sub_label_placement == 'above' || ( empty( $field_sub_label_placement ) && $form_sub_label_placement == 'above' );
		$sub_label_class_attribute = $field_sub_label_placement == 'hidden_label' ? "class='hidden_sub_label screen-reader-text'" : '';

		$disabled_text = $is_form_editor ? "disabled='disabled'" : '';

		$hour = $minute = $am_selected = $pm_selected = '';

		if ( ! is_array( $value ) && ! empty( $value ) ) {
			preg_match( '/^(\d*):(\d*) ?(.*)$/', $value, $matches );
			$hour        = esc_attr( $matches[1] );
			$minute      = esc_attr( $matches[2] );
			$the_rest    = strtolower( rgar( $matches, 3 ) );
			$am_selected = strpos( $the_rest, 'am' ) > -1 ? "selected='selected'" : '';
			$pm_selected = strpos( $the_rest, 'pm' ) > -1  ? "selected='selected'" : '';
		} elseif ( is_array( $value ) ) {
			$value       = array_values( $value );
			$hour        = esc_attr( $value[0] );
			$minute      = esc_attr( $value[1] );
		 
		}

		$hour_input   = GFFormsModel::get_input( $this, $this->id . '.1' );
		$minute_input = GFFormsModel::get_input( $this, $this->id . '.2' );
 
		$hour_placeholder_attribute   = $this->get_input_placeholder_attribute( $hour_input );
		$minute_placeholder_attribute = $this->get_input_placeholder_attribute( $minute_input );

		$hour_tabindex   = $this->get_tabindex();
		$minute_tabindex = $this->get_tabindex();
	 

	 
 

		$hour_label = rgar( $hour_input, 'customLabel' ) != '' ? $hour_input['customLabel'] : esc_html__( 'CM', 'gravityforms' );
		$minute_label = rgar( $minute_input, 'customLabel' ) != '' ? $minute_input['customLabel'] : esc_html( _x( 'MM', 'Abbreviation: Minutes', 'gravityforms' ) );
         $option1 = self::getNumberSelect($hour  );
	     $option2 = self::getNumberSelect($minute );
	$label1=" <label for='{$field_id}_1' {$sub_label_class_attribute}>{$hour_label}</label>";
	$label2=" <label for='{$field_id}_2' {$sub_label_class_attribute}>{$minute_label}</label>";
		 $select1 ="<select type='{$input_type}' maxlength='2' name='input_{$id}[]' id='{$field_id}_1' value='{$hour}' {$hour_tabindex} {$hour_html5_attributes} {$disabled_text} {$hour_placeholder_attribute}> {$option1}</select>$label1</i>";
         $select2 ="<select type='{$input_type}' maxlength='2' name='input_{$id}[]' id='{$field_id}_2' value='{$hour}' {$hour_tabindex} {$hour_html5_attributes} {$disabled_text} {$hour_placeholder_attribute}> {$option2}</select>$label2</i>";

		 
			return "<div class='clear-multi'>
                        <div class='gfield_time_hour ginput_container ginput_container_time' id='{$field_id}'>
                            
							{$select1}
                        </div>
                        <div class='gfield_time_minute ginput_container ginput_container_time'>
                            
							{$select2}                        
						</div>
                        {$ampm_field}
                    </div>";
	 
	}

	public function get_field_label_class(){
		return 'gfield_label gfield_label_before_complex';
	}
public function getNumberSelect($value)
{ 
 
	for ($i=0; $i<100; $i++)
		{
				$selected  =  ($value==$i?"selected":"");
				$str .="<option value='$i' $selected>$i</option>";
		}
	 
	return $str;
	 }
	public function is_value_submission_empty( $form_id ) {
		$value = rgpost( 'input_' . $this->id );
		if ( is_array( $value ) ) {
			// Date field and date drop-downs
			foreach ( $value as $input ) {
				if ( strlen( trim( $input ) ) <= 0 ) {
					return true;
				}
			}

			return false;
		} else {

			// Date picker
			return strlen( trim( $value ) ) <= 0;
		}
	}

	public function get_value_save_entry( $value, $form, $input_name, $lead_id, $lead ) {

		// if $value is a default value and also an array, it will be an associative array; to be safe, let's convert all array $value to numeric
		if( is_array( $value ) ) {
			$value = array_values( $value );
		}

		if ( ! is_array( $value ) && ! empty( $value ) ) {
			preg_match( '/^(\d*):(\d*) ?(.*)$/', $value, $matches );
			$value    = array();
			$value[0] = $matches[1];
			$value[1] = $matches[2];
			$value[2] = rgar( $matches, 3 );
		}

		$hour   = empty( $value[0] ) ? '0' : wp_strip_all_tags( $value[0] );
		$minute = empty( $value[1] ) ? '0' : wp_strip_all_tags( $value[1] );
		$ampm   = wp_strip_all_tags( rgar( $value, 2 ) );
		if ( ! empty( $ampm ) ) {
			$ampm = " $ampm";
		}

		if ( ! ( empty( $hour ) && empty( $minute ) ) ) {
			$value = sprintf( '%02d:%02d%s', $hour, $minute, $ampm );
		} else {
			$value = '';
		}

		return $value;
	}

	public function get_entry_inputs() {
		return null;
	}

 
	public function sanitize_settings() {
		parent::sanitize_settings();
		if ( ! $this->timeFormat || ! in_array( $this->timeFormat, array( 12, 24 ) ) ) {
			$this->timeFormat = '12';
		}
	}

}

GF_Fields::register( new GF_Field_Doublenumberselect() );

 

Feast of wordpress drag and drop composer

The big battle for the best drag and drop visual composer has begun. Who will win ? We(ve already reviewed a few of them, among which the most popular of them, Visual composer.

Stand alone builders

  • http://massivedynamic.co/
  • https://fr.wordpress.org/plugins/forge/
  • https://wordpress.org/plugins/elementor/
  • https://wordpress.org/plugins/live-composer-page-builder/
  • https://www.layerswp.com/

Theme integrated builders

  • http://www.elegantthemes.com/plugins/divi-builder/
  • Avia Builder from enfold theme