Salvar conteúdo de um Textarea em um arquivo .txt e exibi-los novamente ao atualizar a Pagina

Question: Estou terminando um HTML para me auxiliar nas tarefas do meu serviço, em uma das sessões, pretendo fazer vários "Blocos de anotações Rápidas", onde entro com um texto curto e este será salvo em um arquivo txt. Porém ao atualizar a página, necessito que este Textarea retorne os valores salvos no txt.
Há a possibilidade de utilizar apenas JavaScript nesta solução? Quero consumir o minimo possível de recursos nesta página.
Segue um trecho do código (Estou utilizando Templates Bootstrap para agilizar o processo)

    <textarea class="form-control" id="exampleFormControlTextarea1" rows="5">
    </textarea>

   <button type="button" class="btn btn-info btn-circle">
    </button>
   <button type="button" class="btn btn-warning btn-circle"></button>

Sou meio inexperiente na área, Desde já agradeço o auxilio.
Comment: onde vai salvar esse arquivo txt?
Comment: Você até consegue gerar um arquivo TXT com JavaScript e salva-lo na máquina do cliente, mas não irá conseguir recupera-lo depois. JavaScript não tem como acessar os arquivos de forma direta - exceto pelo Node. Como não quer usar outra linguagem, pesquise sobre localStorage.
Answer: uma solução para o seu problema é utilizar o localStorage do próprio javascript e também utilizar o firestorage da google. Eu fiz um pequeno exemplo sem muita aprofundação nesse link.
Segue abaixo o código utilizado.
index.html

<input placeholder="Título" id="title" type="text">

<textarea></textarea>

<input id="save" type="button" value='Salvar'>

<input id="download" type="button" value='Baixar'>

index.js
let titleElement = document.querySelector('#title') //Pega o elemento de título
let title        = localStorage.getItem("title") //Recupera o título salvo no localStorage
let textElement  = document.querySelector('textarea') //Pega o elemento de texto
let text         = localStorage.getItem("text") //Recupera o conteudo salvo no localStorage
let btnSave      = document.querySelector('#save') // Pega o botão de salvar
let btnDownload  = document.querySelector("#download") //Pega o botão de download
let firestorage  = null // Armazena o firestorage

//Chama a função initFirestorage
initFirestorage()

//Chama a função bindValueToFields
bindValueToFields()

//Aguarda por um click no botão de salvar
btnSave.addEventListener('click', event => {

  title = titleElement.value.trim() //Pega o conteudo do título
  text = textElement.value.trim() //Pega o conteudo do texto

  localStorage.setItem("title",title)
  localStorage.setItem("text",text)

  //Verifica se título e conteudo estão preenchidos
  if(!text || !title){
    alert("Título e texto devem ser preenchidos")
    return
  }

  //Chama a função upload
  uploadFile(text, title+'.txt', "text/plain;charset=utf-8");

})

/*
 * Função responsável por criar um arquivo e fazer upload
 * no firestorage. Requer o conteudo, nome e mimeType do arquivo.
 * È preciso ter uma conta no firebase para isso, acesse esses links:
 * https://firebase.google.com/docs/storage/web/start?hl=pt-br
 * https://firebase.google.com/docs/web/setup?hl=pt-br
 */
function uploadFile(data, filename, type) {

  return

  //Cria um novo arquivo
  let file = new Blob([data], {type: type});

  /*
   * Após ter criado a conta no firebase é só
   * fazer o upload do arquivo como no exemplo da documentação
   * https://firebase.google.com/docs/storage/web/upload-files?hl=pt-br
   */
  let storageRef = firestorage.ref();
  let ref        = storageRef.child(filename);
  ref.put(file).then(function(snapshot) {
    //O arquivo foi salvo com sucesso
  }).catch(function(err){
    //Ocorreu um erro
  });

}

//Inicializa o Firestorage com as informações da sua conta
function initFirestorage(){

    // Set the configuration for your app
  // TODO: Replace with your project's config object
  var config = {
    apiKey: '<your-api-key>',
    authDomain: '<your-auth-domain>',
    databaseURL: '<your-database-url>',
    storageBucket: '<your-storage-bucket>'
  };
  firebase.initializeApp(config);

  // Get a reference to the storage service, which is used to create references in your storage bucket
  firestorage = firebase.storage();

}

//Recupera os valores anteriores que estão recuperados no localStorage
function bindValueToFields(){

  titleElement.value = title
  textElement.value = text

}

/*
 * Função responsável por fazer o download do arquivo
 * para baixar um arquivo basta digitar o nome do arquivo
 * sem a extensão, no campo título.
 * Exemplo de como baixar o arquivo na documentação:
 * https://firebase.google.com/docs/storage/web/download-files?hl=pt-br
 */
function downloadFile(){

  let storageRef = firestorage.ref();

  storageRef.child(title).getDownloadURL().then(function(url) {

      var xhr = new XMLHttpRequest();
      xhr.responseType = 'blob';
      xhr.onload = function(event) {
        download(xhr.response, title+".text", "text/plain;charset=utf-8")
      };
      xhr.open('GET', url);
      xhr.send();

  })

}

//Faz o download do arquivo
function download(data, filename, type) {
    var file = new Blob([data], {type: type});
    if (window.navigator.msSaveOrOpenBlob) // IE10+
        window.navigator.msSaveOrOpenBlob(file, filename);
    else { // Others
        var a = document.createElement("a"),
                url = URL.createObjectURL(file);
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        setTimeout(function() {
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);
        }, 0);
    }
}

Espero que esses códigos resolvam o seu problema.


how to really exit an activity which contain fragment?

Question: I have3 Activities.
The first one A contains a Fragment A1 which contains a Spinner.
When I click the Spinner i ll go to Activity B, which contains a Button.
When I click the Button will go to Activity C.
I ovverrode the Activity C's OnBackPressed
(
Super OnBackPressed()
Intent i = new intent (this,ActivityB.class)
Finish();
StartActivity i
}

I overrode the Activity B's OnBackPressed
(
    Super OnBackPressed()
    Intent i = new intent (this,ActivityA.class)
    Finish();
    StartActivity i
    }

I overrode the Activity A's OnBackPressed
(
Super OnBackPressed()
Finish();
}

My problem is that each time I click on Android's return Button when I am in Activity A, the application doesn't exit and goes to my old Spinner choice.
I have to click several times to really quit.
What should I do to leave the application by simply clicking on the Android return Button when I am in the Fragment A1?
Comment: use this if you want to close your application.  android.os.Process.killProcess(android.os.Process.myPid());
Answer: You can use getActivity().finish(); from Fragment
Answer: You can try to finish the current activity before moving to other one.
For ex: When in Activity A, you click on spinner, inside onclick you start activity B and then call finish(); This will start Activity B and finish Activity A.
This way you will end up with one activity throughout. Once u back press, you will directly come out of the application.
Comment: i call the Activity B through the Fragmetn A1 so how can i do it since i cant wirte finish int fragment?
Comment: You need to call finish using getActivity().finish();

getActivity() will get the parent activity context for the fragment.
Answer: In Activity A, you can do this to make sure you clear your backstack, so your app doesn't go the old spinner choice.
In your onCLickListener
Context context = view.getContext();
Intent intent = new Intent(context, ActivityB.class);
startActivity(intent);
finish(); // call this to finish the current activity

or you can also, do that in the manifest
<activity android:name=".ActivityA" android:noHistory="true" ... />

Comment: the OnclickListener is on the Fragment A1 so i cant do a finish();
Comment: Then, you should use android:noHistory="true" in your Activity xml manifest


How to add 'add to cart' button in custom content type using Commerce 2?

Question: I have created a new content type with product title, description, price(field_price), SKU(field_sku) fields. I just want to add a Add to cart button into this content type.
What I tried?
I have read many places, it says to add 'Product references'. I have tried to do that using 'Entity reference' field and selected 'Product'. But no luck.
Can someone guide me step by step about how can we add such 'Add to cart' button in custom content type?
Answer: Follow below steps to show Add to cart button into any content type.

Add field with reference as Product and select list of product bundles you want to show in content type.
And in field settings select reference as shown in below.

Go to content type manage display and select as "Rendered Entity" as shown below.

Go to the product type which you selected in content type and click on manage display.
See for variations and select as "Add to cart form" as shown in below.

And that's it after adding node with product you will be able to see the Add to cart button into node view like below.
Comment: Thank you!,

Now I am getting 'Add to cart' button. But I should able to add price while creating the node. Now price is getting from the product page and cannot add price while creating the node. Basically every node should act as product with different price.
Comment: For single product you want different prices to display in each node?
Comment: Each node different prices. For example: I have a content type 'Toys'. I have to create many Toys contents with different price and other details.
Comment: You have to add "Product Variations" for this to each product. Cannot add the price for each node.
Comment: Ok, I don't want any predefined prices. Price should be always free text. Any options for this?
Comment: As per my suggestion after adding the product to the node and display the price in the node, while adding the product to cart you can modify the price of the product and add it to cart. There are ways to alter the price of a product while adding cart you can check with that.


Ajuda em passar um array via Ajax(post) para controller MVC 5

Question: Tenho este código que é gerado dinamicamente pelo javascript. Simulando uma grid

                    123
                    teste
                    nike
                    11
                    2
                    h9
                    453699

                    333
                    teste2
                    Adidas
                    112
                    5
                    H5
                    453699

Quando faço o debug no console recebo este array e gostaria de passar na minha controller:
document.querySelectorAll(".produto");

[tr.produto,tr.produto]
Através do código abaixo eu estou tentando levar os dados para a minha controller.
    var formData = document.querySelectorAll(".produto");

    $.ajax({
        type: 'Post',
        dataType: 'json',
        url: '/EntradaEstoque/SalvarDados',
        data: JSON.stringify({ data: formData }),
        contentType: 'application/json; charset=utf-8',
        async: false,
        success: function (data) {
            console.debug(data);
          alert(produtos);
            console.log(data);
        },
        error: function (data) {
            console.debug(data);
        }
    });
}

E na minha controller ele vem null.
    [HttpPost]
    public void SalvarDados(string data)
    {

    }

Answer: consegui resolver da seguinte forma, estou pegando toda a  minha tabela e passando para formato Json através do tableToJSON:
Meu codigo javascript ficou assim:
var jsonObject = {
            "Name": "Produtos",
            "Dados": $('#meuteste').tableToJSON()
        };

        alert(JSON.stringify(jsonObject));

        $.ajax({
            url: '/EntradaEstoque/PopulaNome',
            type: "POST",
            data: JSON.stringify(jsonObject),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        error: function (response) {
            alert('ERRO AO EXECUTAR');
        },
        success: function (response) {
            alert('fUNCIONONOU');
        }
    });

Meu Controller recebendo os dados.
public void PopulaNome(PersonModel model)
{
       //var request = JsonConvert.DeserializeObject<Produtos>(data);

       string teste = "";
       teste = "anderson";
}

e a minha model:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ControleEstoque.Web.Models
{

    public class PersonModel
    {
        public List<rodutos> Dados { get; set; }
        public string Name { get; set; }
    }

    public class rodutos
    {
        public int Id { get; set; }
        public string Descricao { get; set; }
        public string Marca { get; set; }
        public string Modelo { get; set; }
        public Nullable<int> Quantidade { get; set; }
        public string Data_Validade { get; set; }
        public string Local_Estocado { get; set; }
        public string isPatrimonio { get; set; }
        public Nullable<int> Quantidade_Minima { get; set; }
        public string Fornecedor { get; set; }
        public int IdFornecedor { get; set; }
        public Nullable<int> Nota_Fiscal { get; set; }
        public string Cod_Barras { get; set; }
        public string Status { get; set; }
        public string UnidadeMedida { get; set; }

        public int Faltou { get; set; }
        public Nullable<int> Entrou { get; set; }

        public decimal Valor { get; set; }

        public decimal ValorUnitario { get; set; }

        public int Id_Orcamento_Prd { get; set; }

        public string DataCadastro { get; set; }

    }

}

Obrigado a Todos.


Two servers mails

Question: is that it is possible to have two mail servers in parallel, ie a primary through which mails are routed to the outside and a secondary for the exchange of mails locally. and the two servers are connected. In the secondary server was a copy of messages! who can help me please
Comment: Your question is too broad right now. [SF] is for Professional System Administrator (et al) only. If you're trying to solve a specific problem, please list that. We are here to help you do your job, not do it all for you. If you can, edit the question, then flag for reopening. Thank you!
Answer: Yes, this is possible. Except for 'In the secondary server was a copy of messages' part, which I don't understand at all. Please clarify that.

Two servers mails


If index is a multiple of 4 add one to counter - JQUERY

Question: I have a simple loop that loops through JSON data and counts how many objects there are. For every 4th object I would like to add 1 to a counter so that it technically groups the objects by 4.
I can't seem to get it right, it keeps returning the same value each time. Maybe someone else might know.
If you check the console.log(); you can see that the postCount stays the same.
I have included a link to the JSON file if needed. You will just have to change the url for the Ajax call.
Please see code below -
CODE -

var imgTitle;
var imgLink;

$.ajax({
    type: 'GET'
    , url: 'http://www.capetownetc.com/api/get_category_posts/?slug=news'
    , data: {
        get_param: 'value'
    }
    , dataType: 'jsonp'
    , success: function(data) {

        $.each(data.posts, function(i){
            imgTitle = data.posts[i].title;
            imgLink = data.posts[i].thumbnail_images.medium.url;
            console.log(imgTitle);

            var postCount = 0;

            if((i + 1) % 4 === 0){
                postCount = postCount+= 1;
                console.log(postCount);
            }

        });

    }
});

JSON Data File
Comment: put `var postCount = 0;` outside of the `$.each` loop
Comment: OP should modify `postCount = postCount += 1;` to `postCount += 1;`
Comment: I would use a second parameter for the function in `each` to get the value and you can just say `postCount++`
Comment: Wow, I am a pretty dumb.  Is it because it was reseting the variable each time?
Answer: postCount is assigned as 0 everytime. You need to put this outside of loop:

var imgTitle;
var imgLink;

$.ajax({
  type: 'GET',
  url: 'https://www.capetownetc.com/api/get_category_posts/?slug=news',
  data: {
    get_param: 'value'
  },
  dataType: 'jsonp',
  success: function(data) {
    var postCount = 0;
    $.each(data.posts, function(i) {
      imgTitle = data.posts[i].title;
      imgLink = data.posts[i].thumbnail_images.medium.url;
      console.log(imgTitle);
      if ((i + 1) % 4 === 0) {
        postCount++;
        console.log(postCount);
      }
    });
  }
});

Answer: Thanks to Darren Sweeney -
put var postCount = 0; outside of the $.each loop
Answer: As per my comment:
Put var postCount = 0; before the $.each loop...having it inside was resetting it on every "each"
As also mentioned in the comments, you can replace
postCount = postCount+= 1;

with
postCount++;


this is my add to cart code when i click on add to cart it is giving me extra empty row which i don't want

Question: This is the code of table were user gives input:

 <select name = "Colour" id ="Colour">
<option>blue</option>
<option>pink</option>
<option>orange</option>
<option>red</option>
</select>
 <select name = "Organize" id ="Organize">
<option>preethi enterprise</option>
<option>prasanna enterprise</option>
</select>
 <input type ="text" name ="Company" id ="Company">
<input type ="text" name ="Subdivision" id ="Subdivision">

This is  the code of table when user click on add to cart, it should store in this table:

Colour
Organize
Company
Subdivision

<input type = "text" readonly>
<input type = "text" readonly>
<input type = "text" readonly>
<input type = "text" readonly>
<input type ="button" value ="remove" onclick="remove(this)"/>

This is the code for addTo():
function addTo() { // to add rows and copy value to cart
  var table = document.getElementById('cart');
  var new_row = table.rows[1].cloneNode(true); // clones the first row
  var len = table.rows.length;  // number of rows in table
  var inp1 = new_row.cells[0].getElementsByTagName('input')[0];
  inp1.value = document.getElementById("Colour").value;
  var inp2 = new_row.cells[1].getElementsByTagName('input')[0];
  inp2.value = document.getElementById("Organize").value;
  var inp3 = new_row.cells[2].getElementsByTagName('input')[0];
  inp3.value =  document.getElementById("Company").value;
  var inp4 = new_row.cells[3].getElementsByTagName('input')[0];
  inp4.value = document.getElementById("Subdivision").value;
  table.appendChild(new_row);
}

When I try to add a new row to the table one empty row is added at first.
The row should get added only when the users clicks on add to cart with values.
Also, an error message should be displayed when an user tries to add empty rows.
Could you help me with this?
Comment: it would be easy to solve your problem if you share your code with plunkr https://plnkr.co/edit/?open=lib%2Fscript.js
Comment: You cold specify which fields are required
Comment: We need more code for solve your problem, Kindly provide pls.
Comment: i stored the code in this link https://plnkr.co/edit/qjswaRpKKPoRDmKM
Comment: u can see empty row is getting added for first time i don't want that empty row to add.Please help me for this
Answer: You can hide first row of your table .Then , whenever addTo() is call you can unhide that row to make clone of it and after cloning hide it again or else other way would be creating the entire row again inside your js code .
Demo code :

function addTo() { // to add rows and copy value to cart
  if ((document.getElementById("Colour").value === "") || (document.getElementById("Organize").value === "") || (document.getElementById("Company").value === "") || (document.getElementById("Subdivision").value === "")) {
    //display error message
    document.getElementById("message").innerHTML = "All fields required";

  } else {
    //unhiding  1st row to cloned it
    document.getElementById('show').style.display = "";
    document.getElementById("message").innerHTML = "";
    var table = document.getElementById('cart');

    var new_row = table.rows[1].cloneNode(true); // clones the first row
    var len = table.rows.length; // number of rows in table
    var inp1 = new_row.cells[0].getElementsByTagName('input')[0];
    inp1.value = document.getElementById("Colour").value;
    var inp2 = new_row.cells[1].getElementsByTagName('input')[0];
    inp2.value = document.getElementById("Organize").value;
    var inp3 = new_row.cells[2].getElementsByTagName('input')[0];
    inp3.value = document.getElementById("Company").value;
    var inp4 = new_row.cells[3].getElementsByTagName('input')[0];
    inp4.value = document.getElementById("Subdivision").value;
    table.appendChild(new_row);
    //hide again after cloning
    document.getElementById('show').style.display = 'none';
  }
}
p {
  color: #f44336;
}

      <select name="Colour" id="Colour" required>
        <option>blue</option>
        <option>pink</option>
        <option>orange</option>
        <option>red</option>
      </select>

      <select name="Organize" id="Organize" required>
        <option>preethi enterprise</option>
        <option>prasanna enterprise</option>
      </select>

     <input type="text" name="Company" id="Company" required>
    <input type="text" name="Subdivision" id="Subdivision" required>

<button onclick="addTo()">Add to Cart</button>

    Colour
    Organize
    Company
    Subdivision

    <input type="text" readonly>
    <input type="text" readonly>
    <input type="text" readonly>
    <input type="text" readonly>
    <input type="button" value="remove" onclick="remove(this)" />

Comment: please help me for this above code were error test is displaying i need a popup box to display so how can i achieve that please help me for this


How to redirect to a specifi page of a view?

Question: Here is the code of a custom form:
  public function save(array $form, FormStateInterface $form_state) {
    $entity = $this->entity;
    $status = parent::save($form, $form_state);
    $values=$form_state->getValues();

some code here...

    switch ($status) {
      case SAVED_NEW:
        drupal_set_message($this->t('Le service « %label » a été ajouté.', [
          '%label' => $entity->label(),
        ]));
        break;

      default:
        drupal_set_message($this->t('Le service « %label » a été modifié.', [
          '%label' => $entity->label(),
        ]));
    }

    $form_state->setRedirect('view.services.page_2');
  }

The redirection doesn't work!
After validating my form, it goes to the first page of my view.
By the way, these two pages of the view are displayed as two tabs in a menu (the first being the default one)...
Comment: When you say page, do you mean page display or a page on a page display, e.g page 3 or the result set? the `view.services.page_2` route will take you to the `page_2` page display of the `services` view.  Are you saying this is not happening? It's taking you to the `page_1` page display of the `services` view?
Comment: You got it. It is exactly what happens.
Answer: The solution has two parts:
1. The button that takes to my form in 'Add' mode was coded this way: Ajouter (/services being the first tab I mentioned).
So I removed the ?destination=services
2. Looking at the 'Routes info' provided by Devel, I got that:

So i changed my code to $form_state->setRedirect('view.services.page_2', ['arg_0' => $iSeliste]);  (thanks to the last comment of this page)
And now it works!


Azure policy - check if there is any budget assigned to the subscription

Question: How to write azure policy which will audit if subscription has budget assigned. If there are no budget assigned to subscription I want policy to be Non Compliant status.
I've tried to check by using AuditINotExists
<code>{
      "mode": "All",
      "policyRule": {
        "if": {
          "field": "type",
          "equals": "Microsoft.Consumption/budgets"
        },
        "then": {
          "effect": "auditIfNotExists",
          "details": {
            "type": "Microsoft.Consumption/budgets",
            "name": "budget"
          }
        }
      },
      "parameters": {}
}
</code>
Comment: Can you share the policy code, what you have tried?
Comment: @VenkatV I've updated question with example. I've tried a few more but don't want to include all o them as non of them worked.
Answer: The below policy will audit the subscription to check if a budget is assigned to it. If a budget is assigned to the subscription, the subscription will be considered compliant, If a budget is not assigned to the subscription, the subscription will be considered non-compliant.
<code>{
  "mode": "All",
  "policyRule": {
    "if": {
      "field": "type",
      "equals": "Microsoft.Consumption/budgets"
    },
    "then": {
      "effect": "auditIfNotExists",
      "details": {
        "type": "Microsoft.Consumption/budgets",
        "existenceCondition": {
          "field": "Microsoft.Consumption/budgets/amount",
          "exists": "true"
        }
      }
    }
  },
  "parameters": {}
}
</code>
Output:

Reference:   Create and manage Azure budgets
Comment: Doesn't work. It results with Compliant state.
Comment: I see at you screen shot that you have Non Compliant Resources - 1. For my subscription it's 0.
Comment: Kindly check with this policy :   {
"mode": "All",
"policyRule": {
"if": {
"field": "type",
"equals": "Microsoft.Subscription"
},
"then": {
"effect": "auditIfNotExists",
"details": {
"type": "Microsoft.Consumption/budgets",
"name": "budget",
"existenceCondition": {
"field": "Microsoft.Consumption/budgets/id",
"exists": "true"
}
}
}
},
"parameters": {}
}
Comment: It also doens't work. Why you changed budget/ammount to budget/id? budget/id is not valid property to check.
Comment: If there is no budget assigned to a subscription, the policy you provided should evaluate the subscription as compliant, as the existence condition would not be met since the Microsoft.Consumption/budgets/amount field would not exist.
Answer: This Azure policy will examine the subscription to determine if it has any budgets (Cost category) assigned to it. Please test it out and share your feedback.
<code>{
  "mode": "All",
  "policyRule": {
    "if": {
      "allOf": [
        {
          "field": "type",
          "equals": "Microsoft.Resources/subscriptions"
        }
      ]
    },
    "then": {
      "effect": "auditifNotExists",
      "details": {
        "type": "Microsoft.Consumption/budgets",
        "deploymentScope": "subscription",
        "existenceScope": "subscription",
        "existenceCondition": {
          "allOf": [
            {
              "field": "Microsoft.Consumption/budgets/category",
              "equals": "Cost"
            }
          ]
        }
      }
    }
  },
  "parameters": {}
}
</code>


Como posicionar corretamente este botão?

Question: Estou utilizando um script da plataforma de marketing do Facebook Messenger denominada WhatsHelp, este script renderiza um botão ao lado direito próximo ao footer.
Estou com dificuldades em manipular a sua posição na tela, onde eu gostaria de subir um pouco mais o elemento do botão gerado, como faço isto?

Figura ilustrativa

Não encontrei o campo para comentar e colar o codigo CSS então estou editando a pergunta, por favor se eu estiver fazendo do modo incorreto me corrijam.
Cliquei em cima do icone com botão direito e cliquei em Inspecionar
Este conteudo abriu do lado esquerdo
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-9 -10 41 44" class="wh-messenger-svg-close wh-svg-close"><path d=" M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill-rule="evenodd"></path></svg>

Este conteudo em Styles
element.style {
}
div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list.wh-widget-activator-as-close>a.wh-widget-button.wh-widget-button-activator div.wh-widget-button-icon .wh-svg-close {
    display: inline;
}
div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon .wh-svg-close {
    display: none;
}
div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon svg {
    fill: white;
    width: 41px;
    height: 50px;
}
svg {
    fill: white;
}
* {
    -webkit-tap-highlight-color: transparent !important;
}
user agent stylesheet
svg:not(:root) {
    overflow: hidden;
}
div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon {
    float: left;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
    font-size: 28px;
    text-align: center;
    line-height: 50px;
    color: white;
}
div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button {
    display: none;
    text-decoration: none;
    font-weight: normal;
    margin-top: 14px;
    position: relative;
    outline: none;
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
}
div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list {
    margin: 10px;
    margin-bottom: 20px;
    padding: 0;
    border: 0;
    position: relative;
    bottom: 3px;
    text-align: center;
}
div.wh-widget-send-button-wrapper {
    margin: 0;
    padding: 0;
    border: 0;
    position: fixed;
    z-index: 16000160;
    bottom: 0;
    text-align: center;
    overflow: hidden;
}

Comment: Só podemost te ajudar se você postar pelo menos a estrutura html que o código gera. o css também seria de grande ajuda
Comment: Veja no código-fonte que tipo de elemento HTML é gerado e faça isso via CSS.
Comment: @Sam Panda Estou tentando postar o codigo CSS porem não estou encontrando, tento colar o codigo aqui no campo de Comentarios porem tem limite de caracteres. Como faço?
Comment: @Panda Não entendo muito bem este forum, como consigo postar o codigo CSS?
Comment: Analisando o código cheguei nas options shift_vertical e shift_horizontal porem inserindo essas opções em var options = { não geram efeito. Acredito que o script tenha alguma proteção que limpa essas opções antes de iniciar, se alguem puder ajudar fico grato, preciso somente subir o icone alguns centimetros para cima
Answer: O problema foi resolvido, depois de alguns dias de pesquisa reuni algumas soluções que fornecem este tipo de serviço sem custo:
https://www.callbell.eu/pt/
https://keyreply.com/chat/?ref=getwidget
https://whatshelp.io/widget
A primeira opção Callbell funcionou super bem e eles me passaram um css simples de uma linha para reposicionar o botão do chat um pouco para cima.


svg ellipse color on hover

Question: I made an SVG ellipse that has squares in it
I am trying to color the squares when the mouse is hover, I tried to use chess, but nothing happened, I searched here but didn't find an answer, hope you guys can help me!
<code> .elips:hover{
    fill: #fce57e;
}
</code>
maybe you guys know what to do.
Here is my SVG ellipse:
<code><svg id="cvg"  height="520" width="1200" style=";z-index: 101;">
        <line id="0"  x1="70" y1="290" x2="790" y2="290" class="classLine path" style="stroke:#0A0A0A;stroke-width:2;z-index: 1;" /><text x="0" y="290" fill="rgb(149, 197, 193)">0</text>

        <ellipse  id="180" class="elips elipsBig pathCircle" cx="430" cy="282" rx="360" ry="260" style="fill: transparent;stroke:black;stroke-width:2" />

        <ellipse  id="179" class="elips" cx="430" cy="282" rx="358" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="178" class="elips" cx="430" cy="282" rx="356" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="177" class="elips" cx="430" cy="282" rx="354" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="176" class="elips" cx="430" cy="282" rx="352" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="175" class="elips" cx="430" cy="282" rx="350" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="174" class="elips" cx="430" cy="282" rx="348" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="173" class="elips" cx="430" cy="282" rx="346" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="172" class="elips" cx="430" cy="282" rx="344" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="171" class="elips" cx="430" cy="282" rx="342" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />

        <ellipse  id="170" class="elips elipsBig pathCircle" cx="430" cy="282" rx="340" ry="260" style="fill: transparent;stroke:rgba(2, 2, 2, 0.11);stroke-width:2" />

        <ellipse  id="169" class="elips" cx="430" cy="282" rx="338" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="168" class="elips" cx="430" cy="282" rx="336" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="167" class="elips" cx="430" cy="282" rx="334" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="166" class="elips" cx="430" cy="282" rx="332" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="165" class="elips" cx="430" cy="282" rx="330" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="164" class="elips" cx="430" cy="282" rx="328" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="163" class="elips" cx="430" cy="282" rx="326" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="162" class="elips" cx="430" cy="282" rx="324" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="161" class="elips" cx="430" cy="282" rx="322" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />

        <ellipse  id="160" class="elips elipsBig pathCircle" cx="430" cy="282" rx="320" ry="260" style="fill: transparent;stroke:rgba(2, 2, 2, 0.11);stroke-width:2" />

        <ellipse  id="159" class="elips" cx="430" cy="282" rx="318" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="158" class="elips" cx="430" cy="282" rx="316" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="157" class="elips" cx="430" cy="282" rx="314" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="156" class="elips" cx="430" cy="282" rx="312" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="155" class="elips" cx="430" cy="282" rx="310" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="154" class="elips" cx="430" cy="282" rx="308" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="153" class="elips" cx="430" cy="282" rx="306" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="152" class="elips" cx="430" cy="282" rx="304" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="151" class="elips" cx="430" cy="282" rx="302" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />

        <ellipse  id="150" class="elips elipsBig pathCircle" cx="430" cy="282" rx="300" ry="260" style="fill: transparent;stroke:black;stroke-width:2" />

        <ellipse  id="149" class="elips" cx="430" cy="282" rx="298" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="148" class="elips" cx="430" cy="282" rx="296" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="147" class="elips" cx="430" cy="282" rx="294" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="146" class="elips" cx="430" cy="282" rx="292" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="145" class="elips" cx="430" cy="282" rx="290" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="144" class="elips" cx="430" cy="282" rx="288" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="143" class="elips" cx="430" cy="282" rx="286" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="142" class="elips" cx="430" cy="282" rx="284" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="141" class="elips" cx="430" cy="282" rx="282" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />

        <ellipse  id="140" class="elips elipsBig pathCircle" cx="430" cy="282" rx="280" ry="260" style="fill: transparent;stroke:rgba(2, 2, 2, 0.11);stroke-width:2" />

        <ellipse  id="139" class="elips" cx="430" cy="282" rx="278" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="138" class="elips" cx="430" cy="282" rx="276" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="137" class="elips" cx="430" cy="282" rx="274" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="136" class="elips" cx="430" cy="282" rx="272" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="135" class="elips" cx="430" cy="282" rx="270" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="134" class="elips" cx="430" cy="282" rx="268" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="133" class="elips" cx="430" cy="282" rx="266" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="132" class="elips" cx="430" cy="282" rx="264" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="131" class="elips" cx="430" cy="282" rx="262" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />

        <ellipse  id="130" class="elips elipsBig pathCircle" cx="430" cy="282" rx="260" ry="260" style="fill: transparent;stroke:rgba(2, 2, 2, 0.11);stroke-width:2" />

        <ellipse  id="129" class="elips" cx="430" cy="282" rx="258" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="128" class="elips" cx="430" cy="282" rx="256" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="127" class="elips" cx="430" cy="282" rx="254" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="126" class="elips" cx="430" cy="282" rx="252" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="125" class="elips" cx="430" cy="282" rx="250" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="124" class="elips" cx="430" cy="282" rx="248" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="123" class="elips" cx="430" cy="282" rx="246" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="122" class="elips" cx="430" cy="282" rx="244" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="121" class="elips" cx="430" cy="282" rx="242" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />

         <ellipse  id="120" class="elips elipsBig pathCircle" cx="430" cy="282" rx="240" ry="260" style="fill: transparent;stroke:black;stroke-width:2" />

        <ellipse  id="119" class="elips" cx="430" cy="282" rx="238" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="118" class="elips" cx="430" cy="282" rx="236" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="117" class="elips" cx="430" cy="282" rx="234" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="116" class="elips" cx="430" cy="282" rx="232" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="115" class="elips" cx="430" cy="282" rx="230" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="114" class="elips" cx="430" cy="282" rx="228" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="113" class="elips" cx="430" cy="282" rx="226" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="112" class="elips" cx="430" cy="282" rx="224" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="111" class="elips" cx="430" cy="282" rx="222" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />

         <ellipse id="110" class="elips elipsBig pathCircle" cx="430" cy="282" rx="220" ry="260" style="fill: transparent;stroke:rgba(2, 2, 2, 0.11);stroke-width:2" />

        <ellipse  id="109" class="elips" cx="430" cy="282" rx="218" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="108" class="elips" cx="430" cy="282" rx="216" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="107" class="elips" cx="430" cy="282" rx="214" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="106" class="elips" cx="430" cy="282" rx="212" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="105" class="elips" cx="430" cy="282" rx="210" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="104" class="elips" cx="430" cy="282" rx="208" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="103" class="elips" cx="430" cy="282" rx="206" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="102" class="elips" cx="430" cy="282" rx="204" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="101" class="elips" cx="430" cy="282" rx="202" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />

        <ellipse  id="100" class="elips elipsBig pathCircle" cx="430" cy="282" rx="200" ry="260" style="fill: transparent;stroke:rgba(2, 2, 2, 0.11);stroke-width:2" />

        <ellipse  id="99" class="elips" cx="430" cy="282" rx="198" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="98" class="elips" cx="430" cy="282" rx="196" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="97" class="elips" cx="430" cy="282" rx="194" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="96" class="elips" cx="430" cy="282" rx="192" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="95" class="elips" cx="430" cy="282" rx="190" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="94" class="elips" cx="430" cy="282" rx="188" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="93" class="elips" cx="430" cy="282" rx="186" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="92" class="elips" cx="430" cy="282" rx="184" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="91" class="elips" cx="430" cy="282" rx="182" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />

        <ellipse id="90" class="elips elipsBig pathCircle" cx="430" cy="282" rx="180" ry="260" style="fill: transparent;stroke:black;stroke-width:2" />

        <ellipse  id="89" class="elips" cx="430" cy="282" rx="178" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="88" class="elips" cx="430" cy="282" rx="176" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="87" class="elips" cx="430" cy="282" rx="174" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="86" class="elips" cx="430" cy="282" rx="172" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="85" class="elips" cx="430" cy="282" rx="170" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="84" class="elips" cx="430" cy="282" rx="168" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="83" class="elips" cx="430" cy="282" rx="166" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="82" class="elips" cx="430" cy="282" rx="164" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="81" class="elips" cx="430" cy="282" rx="162" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />

        <ellipse  id="80" class="elips elipsBig pathCircle" cx="430" cy="282" rx="160" ry="260" style="fill:transparent;stroke:rgba(2, 2, 2, 0.11);stroke-width:2" />

        <ellipse  id="79" class="elips" cx="430" cy="282" rx="158" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="78" class="elips" cx="430" cy="282" rx="156" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="77" class="elips" cx="430" cy="282" rx="154" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="76" class="elips" cx="430" cy="282" rx="152" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="75" class="elips" cx="430" cy="282" rx="150" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="74" class="elips" cx="430" cy="282" rx="148" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="73" class="elips" cx="430" cy="282" rx="146" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="72" class="elips" cx="430" cy="282" rx="144" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="71" class="elips" cx="430" cy="282" rx="142" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />

        <ellipse  id="70" class="elips elipsBig pathCircle" cx="430" cy="282" rx="140" ry="260" style="fill:transparent;stroke:rgba(2, 2, 2, 0.11);stroke-width:2" />

        <ellipse  id="69" class="elips" cx="430" cy="282" rx="138" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="68" class="elips" cx="430" cy="282" rx="136" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="67" class="elips" cx="430" cy="282" rx="134" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="66" class="elips" cx="430" cy="282" rx="132" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="65" class="elips" cx="430" cy="282" rx="130" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="64" class="elips" cx="430" cy="282" rx="128" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="63" class="elips" cx="430" cy="282" rx="126" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="62" class="elips" cx="430" cy="282" rx="124" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="61" class="elips" cx="430" cy="282" rx="122" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />

        <ellipse  id="60" class="elips elipsBig pathCircle" cx="430" cy="282" rx="120" ry="260" style="fill:transparent;stroke:black;stroke-width:2" />

        <ellipse  id="59" class="elips" cx="430" cy="282" rx="118" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="58" class="elips" cx="430" cy="282" rx="116" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="57" class="elips" cx="430" cy="282" rx="114" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="56" class="elips" cx="430" cy="282" rx="112" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="55" class="elips" cx="430" cy="282" rx="110" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="54" class="elips" cx="430" cy="282" rx="108" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="53" class="elips" cx="430" cy="282" rx="106" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="52" class="elips" cx="430" cy="282" rx="104" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="51" class="elips" cx="430" cy="282" rx="102" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />

        <ellipse  id="50" class="elips elipsBig pathCircle" cx="430" cy="282" rx="100" ry="260" style="fill:transparent;stroke:rgba(2, 2, 2, 0.11);stroke-width:2" />

        <ellipse  id="49" class="elips" cx="430" cy="282" rx="98" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="48" class="elips" cx="430" cy="282" rx="96" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="47" class="elips" cx="430" cy="282" rx="94" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="46" class="elips" cx="430" cy="282" rx="92" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="45" class="elips" cx="430" cy="282" rx="90" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="44" class="elips" cx="430" cy="282" rx="88" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="43" class="elips" cx="430" cy="282" rx="86" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="42" class="elips" cx="430" cy="282" rx="84" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="41" class="elips" cx="430" cy="282" rx="82" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />

        <ellipse  id="40" class="elips elipsBig pathCircle" cx="430" cy="282" rx="80" ry="260" style="fill:transparent;stroke:rgba(2, 2, 2, 0.11);stroke-width:2" />

        <ellipse  id="39" class="elips" cx="430" cy="282" rx="78" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="38" class="elips" cx="430" cy="282" rx="76" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="37" class="elips" cx="430" cy="282" rx="74" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="36" class="elips" cx="430" cy="282" rx="72" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="35" class="elips" cx="430" cy="282" rx="70" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="34" class="elips" cx="430" cy="282" rx="68" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="33" class="elips" cx="430" cy="282" rx="66" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="32" class="elips" cx="430" cy="282" rx="64" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="31" class="elips" cx="430" cy="282" rx="62" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />

        <ellipse  id="30" class="elips elipsBig pathCircle" cx="430" cy="282" rx="60" ry="260" style="fill:transparent;stroke:black;stroke-width:2" />

        <ellipse  id="29" class="elips" cx="430" cy="282" rx="58" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="28" class="elips" cx="430" cy="282" rx="56" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="27" class="elips" cx="430" cy="282" rx="54" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="26" class="elips" cx="430" cy="282" rx="52" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="25" class="elips" cx="430" cy="282" rx="50" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="24" class="elips" cx="430" cy="282" rx="48" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="23" class="elips" cx="430" cy="282" rx="46" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="22" class="elips" cx="430" cy="282" rx="44" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="21" class="elips" cx="430" cy="282" rx="42" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />

        <ellipse  id="20" class="elips elipsBig pathCircle" cx="430" cy="282" rx="40" ry="260" style="fill:transparent;stroke:rgba(2, 2, 2, 0.11);stroke-width:2" />

        <ellipse  id="19" class="elips" cx="430" cy="282" rx="38" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="18" class="elips" cx="430" cy="282" rx="36" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="17" class="elips" cx="430" cy="282" rx="34" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="16" class="elips" cx="430" cy="282" rx="32" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="15" class="elips" cx="430" cy="282" rx="30" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="14" class="elips" cx="430" cy="282" rx="28" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="13" class="elips" cx="430" cy="282" rx="26" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="12" class="elips" cx="430" cy="282" rx="24" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="11" class="elips" cx="430" cy="282" rx="22" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />

        <ellipse  id="10" class="elips elipsBig pathCircle" cx="430" cy="282" rx="20" ry="260" style="fill:transparent;stroke:rgba(2, 2, 2, 0.11);stroke-width:2" />

        <ellipse  id="9" class="elips" cx="430" cy="282" rx="18" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="8" class="elips" cx="430" cy="282" rx="16" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="7" class="elips" cx="430" cy="282" rx="14" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="6" class="elips" cx="430" cy="282" rx="12" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="5" class="elips" cx="430" cy="282" rx="10" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="4" class="elips" cx="430" cy="282" rx="8" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="3" class="elips" cx="430" cy="282" rx="6" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="2" class="elips" cx="430" cy="282" rx="4" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />
        <ellipse  id="1" class="elips" cx="430" cy="282" rx="2" ry="260" style="fill: transparent;stroke:transparent;stroke-width:2" />

        <line class="path" id="00" x1="430" y1="22" x2="430" y2="532" style="stroke:black;stroke-width:2;z-index: 1;" />

        <line  id="80" x1="318" y1="35" x2="544" y2="35" class="classLine 80 path" style="stroke:rgb(21, 19, 19);stroke-width:2;z-index: 1;" /> <text x="250" y="35" fill="rgb(149, 197, 193)">80</text>
        <line  id="60" x1="174" y1="99" x2="685" y2="99" class="classLine 70 path" style="stroke:rgb(21, 19, 19);stroke-width:2;z-index: 1;" /> <text x="105" y="99" fill="rgb(149, 197, 193)">60</text>
        <line  id="40" x1="110" y1="161" x2="748" y2="161" class="classLine 40 path" style="stroke:rgb(21, 19, 19);stroke-width:2;z-index: 1;" />   <text x="52" y="161" fill="rgb(149, 197, 193)">40</text>
        <line  id="20" x1="77" y1="226.75" x2="782" y2="226.75" class="classLine 20 path" style="stroke:rgb(21, 19, 19);stroke-width:2;z-index: 1;" />  <text x="23" y="226.75" fill="rgb(149, 197, 193)">20</text>
        <line  id="-20" x1="82" y1="345" x2="780" y2="345" class="classLine  200 path" style="stroke:rgb(21, 19, 19);stroke-width:2;z-index: 1;" /> <text x="23" y="345" fill="rgb(149, 197, 193)">20</text>
        <line  id="-40" x1="110" y1="399" x2="750" y2="399" class="classLine 400 path" style="stroke:rgb(21, 19, 19);stroke-width:2;z-index: 1;" /> <text x="52" y="410.5" fill="rgb(149, 197, 193)">40</text>
        <line  id="-60" x1="160" y1="453" x2="700" y2="453" class="classLine 600 path" style="stroke:rgb(21, 19, 19);stroke-width:2;z-index: 1;" /> <text x="105" y="460" fill="rgb(149, 197, 193)">60</text>
        <line  id="-80" x1="245" y1="506" x2="613" y2="506" class="classLine 800 path" style="stroke:rgb(21, 19, 19);stroke-width:2;z-index: 1;" /> <text x="200" y="515" fill="rgb(149, 197, 193)">80</text>

    <line id="10" x1="72" y1="259.625" x2="790" y2="259.625" class="classLine" style="stroke:rgba(2, 2, 2, 0.11);;stroke-width:2;z-index: 1;" />
    <line id="30" x1="92" y1="193.875" x2="770" y2="193.875" class="classLine" style="stroke:rgba(2, 2, 2, 0.11);;stroke-width:2;z-index: 1;" />
    <line id="50" x1="139" y1="130" x2="720" y2="130" class="classLine" style="stroke:rgba(2, 2, 2, 0.11);;stroke-width:2;z-index: 1;" />
    <line id="70" x1="228" y1="67" x2="633" y2="67" class="classLine" style="stroke:rgba(2, 2, 2, 0.11);;stroke-width:2;z-index: 1;" />

    <line id="-10" x1="72" y1="317.5" x2="790" y2="317.5" class="classLine" style="stroke:rgba(2, 2, 2, 0.11);;stroke-width:2;z-index: 1;" />
    <line id="-70" x1="198" y1="479.5" x2="663" y2="479.5" class="classLine" style="stroke:rgba(2, 2, 2, 0.11);;stroke-width:2;z-index: 1;" />
    <line id="-30" x1="92" y1="372" x2="770" y2="372" class="classLine" style="stroke:rgba(2, 2, 2, 0.11);;stroke-width:2;z-index: 1;" />
    <line id="-50" x1="130" y1="426" x2="730" y2="426" class="classLine" style="stroke:rgba(2, 2, 2,0.11);stroke-width:2;z-index: 1;" />    <text x="52" y="410.5" fill="rgb(149, 197, 193)">40</text>
    </svg>
</code>
Comment: **You can't.** The rectangles are not individual objects that *can* be hovered. They are only visual items formed by the intersection of the ellipses and the lines.
Comment: You've misspelled `elips` in your css?
Comment: Ah, sorry, didn't see that it was a class name..
Comment: Is your problem that you want the individual __rectangles__ to change color?
Answer: Inline css takes priority over imported css.  Use !important to override it.
<code>.elips:hover
{
    fill:#fce57e !important;
}
</code>
Comment: http://jsfiddle.net/5pdoatgt/ not sure if this is the objective but it works for me as far as i know
Comment: I am trying to color the rectangles
Comment: No you cannot create a hover effect for it as far as I know as the fill property applies to the entire shape and not just a segment of it.
Answer: You must override the fill set at the individual <code><ellipse</code> elements, e.g.:
<code>ellipse:hover { fill: #fce57e !important; }
</code>
Comment: its not working... I need that only the specific quare will be colored... @thebjorn
Answer: Logan Hasbrouck answer:

No you cannot create a hover effect for it as far as I know as the
  fill property applies to the entire shape and not just a segment of
  it.
Answer: You are mixing style with class.
And the style will get preferred.
remove the style
<code>style="fill: transparent;stroke:transparent;stroke-width:2"
</code>
and put it in a class:
<code><style>
    elipse {
        fill: transparent;
        stroke: transparent;
        stroke-width: 2
    }

    elipse:hover {
        fill: #fce57e;
    }
</style>
</code>
And maybe give the class a more descriptive name, like <code>hotspot</code> or something that gives a hint on the function.

svg ellipse color on hover


Composition of subharmonic function and covering map is subharmonic

Question: I am trying to solve the following problem:

Suppose that $X$ and $Y$ are Riemann surfaces.
Let $\pi:X\rightarrow Y$ be a covering map, and $u:Y\rightarrow \mathbb{R}$ a subharmonic function on $Y$. Show that $u\circ \pi$ is subharmonic on $X$.
Here, we say $\varphi$ is subharmonic on $U$ if any closed disc $D(z,r) \subset U$ of center $z$ and radius $r$ one has
$$\varphi(z) \leq \frac{1}{2\pi} \int_0^{2\pi} \varphi(z+ re^{i\theta}) \, d\theta.$$

A covering map is a "local homeomorphism". But without the analytic structure, I have no idea.
And by definition, for every $y\in Y$, we have some neighborhood $U$ of $y$ and the homeomorphism from some component of $f^{-1}(U)\subset X$ to $U$. But here, to show $f\circ u$ is subharmonic, we need to pick the neighborhood of $x\in X$ at first. So the condition is useless for me...
Comment: You're leaving out various important facts - as stated the question is meaningless. In particular, if you don't tell us anything about $X$ and $Y$ the notion of "subharmonic function on X (or Y)" makes no sense.
Comment: @DavidC.Ullrich fixed! thx!
Answer: It seems to me that before the notion of a subharmonic function on a Riemann surface really makes sense we need to know that the composition of a subharmonic function and a biholomorphic map is subharmonic. (You might note that the definition of "subharmonic" that you gave really makes sense only in the plane, not an a Riemann surface.)
In any case that's true, and not hard to prove. Hence the answer to your question is yes if $\pi$ is a holoomorphic covering map, since in that case it is locally biholomorphic. It's not clear whether "covering map" is meant to imply holmorphic in this context.
But if $\pi$ is just a topological covering map then what you say you want to prove seems ridiculous -  why would it be true? For an actual counterexample let $X=Y=\Bbb C$, $\pi(x,y)=(x,2y)$ and $u(x,y)=x^2-y^2$.
(And of course recall that a smooth function in the plane is subharmonic if and only if its Laplacian is non-negative.)
Comment: For your first question, I think we can generalize the definition by using the atlas and "pull-back" to define the subharmonic function on Riemann surfaces.
Comment: I have the same feeling that this question is impossible to do but I was not sure before. And your counterexample is good! Thanks!
Comment: @LeoGardon Using an atlas is exactly what I had in mind - if that's not going to depend on the particular choice of atlas we need to know what II said about composition with biholomorphic maps. If this problem is like an exercise in a book or something I bet they're just assuming it's a holomorphic covering map, given the context.
Comment: Yes, you are right! Thank you again!


How is Blockchain Ledger implemented/ stored in a peer

Question: In Hyperledger Fabric the ledger consists of two distinct, though related, parts – a "blockchain" and the "state database", also known as "world state". The blockchain is immutable whereas the world state data can be modified or deleted.
The world state is physically implemented as a database using CouchDB or LevelDB. If so, how is the immutable blockchain implemented - as plain text, json or any other storage forms?
Answer: It's internally stored in each of the peer in a data serialization form called protocol buffer.
If you use the bash access to the peer docker service, you can find them at /var/hyperledger/production/.
These can be converted to json format using configtxlator tool

configtxlator proto_decode --input fabric_block.pb --type common.Block

Refer docs for more info.


Logging into mail server works through telnet but fails though imap(s) (Dovecot+MySQL)

Question: I have followed the ISPMail tutorial on how to set up a Debian mail server.
I can log into the dovecot server through telnet like this:
[root@{hostname}: /home/{user}]# telnet {hostname}.{TLD} 143
Trying 127.0.1.1...
Connected to {hostname}.{TLD}.
Escape character is '^]'.
* OK [CAPABILITY IMAP4rev1 LITERAL+ SASL-IR LOGIN-REFERRALS ID ENABLE STARTTLS     AUTH=PLAIN] Dovecot ready.
1 LOGIN {user}@{hostname}.{TLD} {password}
1 OK [CAPABILITY IMAP4rev1 LITERAL+ SASL-IR LOGIN-REFERRALS ID ENABLE SORT SORT=DISPLAY     THREAD=REFERENCES THREAD=REFS MULTIAPPEND UNSELECT IDLE CHILDREN NAMESPACE UIDPLUS LIST-    EXTENDED I18NLEVEL=1 CONDSTORE QRESYNC ESEARCH ESORT SEARCHRES WITHIN CONTEXT=SEARCH LIST-    STATUS] Logged in

(Sidenote) should not these 2 commands be identical?
[root@{hostname}: /home/{user}]# telnet {hostname}.{TLD} imaps
Trying 127.0.1.1...
Connected to {hostname}.{TLD}.
Escape character is '^]'.
1 LOGIN {user}@{hostname}.{TLD} {password}
Connection closed by foreign host.

But when I try to access the server with a mailprogram (mutt) like this:
mutt -f imaps://{hostname}.{TLD}
Username at {hostname}.{TLD}: {user}@{domain}
Password for {user}@{domain}@{hostname}.{TLD}: {password}
Logging in.
Login failed.
Closing connection to {hostname}.{TLD}

Here is /var/log/mail.log:
Jan  2 00:50:55 {hostname} dovecot: imap-login: Login: user=<{user}@{domain}>, method=PLAIN, rip=127.0.1.1, lip=127.0.1.1, secured
Jan  2 00:51:03 {hostname} dovecot: IMAP({user}@{domain}): Disconnected: Too many invalid IMAP commands. bytes=38/1284
Jan  2 00:51:26 {hostname} dovecot: imap-login: Disconnected (no auth attempts): rip=127.0.1.1, lip=127.0.1.1, TLS handshaking: SSL_accept() failed: error:140760FC:SSL routines:SSL23_GET_CLIENT_HELLO:unknown protocol
Jan  2 00:51:55 {hostname} dovecot: imap-login: Aborted login (auth failed, 1 attempts): user=<{user}@{domain}>, method=PLAIN, rip=127.0.1.1, lip=127.0.1.1, TLS
Jan  2 00:52:15 {hostname} dovecot: imap-login: Aborted login (auth failed, 1 attempts): user=<{user}>, method=PLAIN, rip=127.0.1.1, lip=127.0.1.1, TLS

Thunderbird and my iPhone' mail program can't login either.
What could be causing this problem?
Answer: Num-Lock / Num-Pad
the number pad or num-lock maybe causing problem in password and maybe difficult to spot. Use number keys on top of keyboard.
Telnet
IMAP(IMAP4) port is 143. Traffic is in plain text. That why you can connect with telnet.
IMAPS(IMAP4 over SSL) port is 993. A SSL channel has to be established first. It is expecting SSL hand shake. That is why your telnet to imaps failed.
Mutt
mutt -f imap://{hostname}.{TLD}

Test imap authentication, username, password with plain imap 1st. That let you know if the account is actually working or not.
mutt -f imaps://{hostname}.{TLD}

If imaps is setup properly with self-signed certificate, mutt will ask for certificate confirmation. You will have to option to reject, accept once or accept always.
Thunderbird
To test IMAPS, use Thunderbird with manual config. If your dns is not fully setup, enter IP address of your imap server, pick IMAPS and port 993. When checking imaps email, it should pop up a window for accepting the self signed ssl cert.
Comment: Those lines will show up before you accept the cert. in thunderbird. Close Thunderbird, open again, click inbox, the cert. windows should pop up (or pop under).
Comment: You welcome :) Happy 2013!!
Comment: It still fails. And I also need imaps and not imap.
Comment: It is very very difficult to test imaps with telnet, if not impossible. I will check mutt in an hour.
Comment: I updated the answer. I believe the probem is with self-signed cert., which mutt cannot handle. You can try with thunderbird.
Comment: Okay so I tried with the IP thing with thunderbird without luck. Also mutt does ask me to confirm the cert because of self signing so it seems mutt knows how to handle it. No luck yet with logging in. Can a missing MX record really be this fatal?
Comment: No, mx record affect email delivery(smtp), nothing to do with imap(s) or pop3.
Comment: Stop dovecot, then start it again. Check `/var/log/syslog` or `/var/log/mail.log` for dovecot start up message. See if there are any error or warning messages.
Comment: I tried `mutt -f imaps://` to one of my imap server with self-signed cert. It actually ask for confirmation for the cert. and I can selected permit permanently. Mutt version 1.5.21. on ubuntu.
Comment: Okay update: Did some verbose logging and passwords to the log etc. and found out that when I have tried logging in and I have numbers in my password, if I type the numbers with the numpad, they are not what I expected. TLDR: I can successfully login with mutt! BUT. This is useless because I need to be able to send/receive email with my iPhone as well as my windows machine which has Thunderbird. Any help?
Comment: I tailed /var/log/syslog while attempting to connect with Thunderbird. It gave me several lines like this:
Comment: `imap-login: Disconnected (no auth attempts): rip={MY IP}, lip=184.108.40.206, TLS: SSL_read() failed: error:14094418:SSL routines:SSL3_READ_BYTES:tlsv1 alert unknown ca`
Comment: @Akke The num-pad problem is only specific to your machine. I bet you will have no problem with your iPhone. And with Thunderbird, enter the password with number key on top of your keyboard(actually I expect your num-pad works normally in Windows), that may work also.
Comment: I might add: The mutt connection is local.
Comment: More info: iPhone connected successfully. What's wrong with thunderbird?


void (*foo)(void) : meaning of latest (void)

Question: B.A.T.M.A.N./A.L.F.R.E.D. OpenMesh project:
function read_answer instantiates a pointer to a type struct vis_print_ops that is defined
struct vis_print_ops
{
    void (*preamble)(void);
    void (*interfaces)(uint8_t iface_n, struct vis_iface *ifaces);
    void (*entries)(uint8_t entries_n, struct vis_entry *vis_entries,
            uint8_t iface_n, struct vis_iface *ifaces);
    void (*postamble)(void);
};

Now look at
void (*preamble)(void)

could you please tell me what is the meaning of the last (void)?  Isn't
void (*preamble)

enough?
Comment: It essentialy means it's a function pointer with no parameters.
Answer: The last void means that there are no arguments in function that will be pointed by preamble.
void (*preamble) isn't enough because this is only a pointer to void whereas void (*preamble)(void) is a function pointer.
Comment: @Caterpillar, no, that is not the same. It means that `preamble` takes some undefined arguments.
Comment: Would `void (*preamble)()` be okay?
Answer: It means that your declaring a function pointer with no parameters. It's not more complicated than that. It is similiar to something like:
int main(void)
and
int main()
Both are the same. Be careful though as discussed in the comments, if you declare a function pointer without the void keyword and only the empty brackets it specifies a function pointer with undefined arguments.
Comment: @cad Correct, I edited my answer. Thanks!


Passing extra query/form parameters through spring social

Question: I'm building a Single Page Application using Spring Social and Spring Security generated by JHipster.
I'm trying to capture the original query parameters after a user has been authenticated by some social authentication provider.
Example:
calling /signin/someprovider?show=someEntityId and after a successful authentication redirects the user to /signup/ , I need a way to fetch 'someEntityID'.
I assume different http calls make it difficult to pass/store the parameters around.
Is there some Spring built-in functionality I can use/reuse or how does one solve this problem?
UPDATE
The thread of requests looks like this:
(1) browser-> http://localhost:9060/signin/authenticationProvider?show=**someEntityId**
<- redirect to https://authenticationProvider... &state=SomeState
(2) browser -> https://authenticationProvider
<- redirect to http://localhost:9060/signin/google?state=SomeState&code=SomeCode
(3) browser-> http://localhost:9060/signin/authenticationProvider?state=SomeState&code=SomeCode
<- redirect to http://localhost:9060/social/signup
(4) browser -> http://localhost:9060/social/signup
This ends up in
 @GetMapping("/signup")
    public RedirectView signUp(WebRequest webRequest, @CookieValue(name = "NG_TRANSLATE_LANG_KEY", required = false, defaultValue = Constants.DEFAULT_LANGUAGE) String langKey) {
        try {
            Connection<?> connection = providerSignInUtils.getConnectionFromSession(webRequest);
            socialService.createSocialUser(connection, langKey.replace("\"", ""));

At this point it want to call a function with the original parameter someEntityId.
According to google oauth2 redirect_uri with several parameters the ?show=someEntityId parameter should be encoded in the state parameter of the Oauth2 request in order to survive
from (1) to (3). In (3) the state parameter has to be added to the redirect uri, such that the original parameter can be decoded in (4).
It looks like a lot of work, or am I missing something? It would be nice if there would be a way to have a session variable in which I could store the parameters at (1) and fetch them again when in (4).
Answer: Since version 1.1.3 Spring Social creates the state parameter on its own and uses it as a CSRF token, see https://pivotal.io/security/cve-2015-5258 - therefore you can (and should not) encode additional parameters in the state parameter.
Instead if the provider sign is enabled with a ProviderSignInController, a ProviderSignInInterceptor can be used to store such parameters intermediately in the session (in preSignIn(...) and postSignIn(...)).
I guess there is a similar approach if a SocialAuthenticationFilter is used.


How can I sync /var/foo/ on one Linux machine with the same folder on another machine?

Question: Initially Ubuntu One looked perfect but it only seems to be able to sync folders in my home directory. I want a way to sync any folder of my choosing on one system with any folder on another system.
Comment: Any reason why a network file system (like NFS) wouldn't be a good choice for your environment? Avoids the synchronization complexity in exchange for "Always has to be on the network")
Comment: I don't think an NFS is what I'm looking for because my understanding is that NFS lets you mount a remote volume, not sync two folders. I want to have two copies of the data - one local, the other remote. Rather like Dropbox.
Answer: You can use a utility called unison to do this.
 Unison is basically a 2-way rsync.
For basic usage, the command is pretty simple:
<code>unison /path/to/local/directory/. ssh://remote-server/path/to/remote/directory/.
</code>
(note the dots on the end, these are deliberate, and are used in case the directory names aren't the same on both systems)
However it might be good idea to consult the documentation as there are a lot of important arguments to consider, like how to handle when a file has been updated on both systems since the last sync (which one should be kept).


how to associate multiple nodes with one node

Question: I have a content type "events" and all the node created under this content type will have further node.

The red boxes in the above pictures are node links which are associated to the "event node".
Every node created under "Event Content Type" will have relative information nodes as shown in boxes below.
How i should be doing this association? Should i create content types for all red boxes and then make entity/node references ?
any clue?
thanks
Comment: It seems that you already know the solution, so not clear what is being asked.
Comment: what is the purpose of the association? will you be referencing fields from one node to another? is it simply a hierarchical setup you are trying to achieve? more information on the intention will help with a suitable answer.
Comment: Every node created under "Event Content Type" will have relevant content nodes with more information but all will be related to a specific node-type-event . does it makes sense now ?
Comment: possible duplicate of [Multiple nodes within a node](http://drupal.stackexchange.com/questions/36815/multiple-nodes-within-a-node)
Comment: @Bulat I think it is clear what he is asking for? Which approach to use? Create separate content types and use references or embed everything into one content type? I don't think this is a duplicate of the question you flagged.
Comment: Ok, anyhow this will require entity or node reference, how many node types to create depends on the design, fields etc.
Answer: I recommend that you model this from an object oriented perspective. I would create the following content types:

Event content type (composed of event, overview, agenda, live broadcast maybe)
Speakers
Resources
Venue
Sponsorship
Registration

The reason for embedding overview, agenda and live broadcast to the event is because they are closely related to to specific event and creating separate content type for them would be expensive (because there is a very less probability that two event have the same agenda or overview).
Whereas other content types such as Speakers, Resources, Venue, Sponsorship, Registration can be regarded as separate content types, because:

To allow referencing the same content type by multiple event nodes i.e. for example, you will have a speaker who would speak in several events, or a resource that would be useful in several events hence, you will be avoid loads of duplication/inconsistency etc.
The other reason to create separate content type is to achieve low coupling and high cohesion. Speakers are different than events, the best way would be to reference than to embed a a list of speaker into event content type. Fields of a Speaker content type, does not directly relate to an Event (i.e. Database normalization perspective)

This would give you a clean set of content types that are linked with each other using references and can be queries very easily using views, contextual filters and relationship.
Good luck.
Comment: Here is a very good tutorial on how to setup an event registration system (I recommend Entity Reference over Node Reference) - might give you more ideas http://torontowebsitedeveloper.com/drupal-video-tutorials/drupal-7-node-reference-tutorial
Comment: thank you so much @Raf , i believe this will be the perfect scenario for this kind of case. :)
Answer: You could create separate content types and use a custom module to handle the node/entity reference links, but for a smoother more self-contained approach, I might suggest:

use a single content type that contains all of the information for all of the sub-nodes
use a bit of jquery to handle showing/hiding certain elements on the screen

One drawback to this approach is the amount of work required when add/removing fields since the javascript would also need to be changed, but it would allow for a single page load instead of multiple page loads for a single "event", and keeps all the data in one place.
Comment: as I think about it more, using field collection would reduce or eliminate the issue of making changes, since then it could work of the collection and not the individual fields
Comment: Yes single content type is a simpler solution but i am still not sure how complicated the linked nodes can be. So i better go with separate content types as mentioned in below answer.


Remove tax line item on checkout page

Question: I have installed the *commerce_kickstart* install profile, and I am wanting to remove the Tax line item on the checkout page, and instead have some text instead that says VAT included (or in my Australia case, GST included).
Everything works well and as expected; however, my client would like to remove the line item for the VAT subtotal and just include text somewhere that says "All prices and totals are inclusive of VAT".
Answer: Might be a bit late on this one, but there doesn't seem to be a posted solution online. You can remove the tax line using the below.
In your template.php file use the below, this should hide it from your order confirmation email as well. I haven't noticed any problems from this modification, but ymmv. The variation from the standard code is: $rows = array_splice($rows, 2);
<code>function THEME_commerce_price_formatted_components($variables) {
  // Add the CSS styling to the table.
  drupal_add_css(drupal_get_path('module', 'commerce_price') . '/theme/commerce_price.theme.css');

  // Build table rows out of the components.
  $rows = array();

  foreach ($variables['components'] as $name => $component) {
    $rows[] = array(
      'data' => array(
        array(
          'data' => $component['title'],
          'class' => array('component-title'),
        ),
        array(
          'data' => $component['formatted_price'],
          'class' => array('component-total'),
        ),
      ),
      'class' => array(drupal_html_class('component-type-' . $name)),
    );
  }

  $rows = array_splice($rows, 2);

  return theme('table', array('rows' => $rows, 'attributes' => array('class' => array('commerce-price-formatted-components'))));
}
</code>
Comment: Confirmed this works with Drupal 7.56. Ta!
Answer: Are your prices already inclusive of tax? If so, I'm fairly sure you just need to make sure there aren't any tax rates defined in Store > Configuration > Taxes then no taxes will be applied.

Remove tax line item on checkout page


Comparing data from single samples

Question: I measured mutations after drug treatment in two different lines (genotype A and B) at 3 different timepoints (1,2,3). Is there a test to see whether A1 is different from A2, A2 is different from A3, and A1 is different from A3? I also want to compare A1 to B1, A2 to B2 and A3 to B3. I do not know what the sampling error is at any time point.
<code>time   A      B

1    186    256
2    259    313
3    295    325
</code>
(I know this is not likely meaningful but a reviewer is demanding a statistical analysis on this data).
Answer: What you might be able to do is to examine whether there are differences among times in the numbers of mutations (pooling mutation numbers from both lines) and whether the two lines differ overall (pooling information from all times). This could be done efficiently with a 2-way analysis of variance. Depending on what type of statistical analysis the reviewer is demanding, this could do the trick. As @Kontorus points out in another answer, there are underlying assumptions that would be difficult to test on such a limited data set.
In general, it's best to consult with a local statistician before starting a study, to make sure that the study design will allow for proper testing of any hypotheses that you are posing. That can minimize problems with reviewers at the end.
Comment: I have done the 2-way analyses you suggested. Unsurprisingly, they are not significant. More problematically, the comparison of those groups is not really what is of interest. I think some kind of permutation test may be in order, but I have no idea how to set this up.
Answer: Without a sampling error, it should be impossible to determine if A1, A2, and A3 are statistically different from one another.
You can theoretically attempt to compare A and B by a comparison of means, but you only have 3 observations - your data might not be normally distributed, so any results you get from this should be taken with a grain of salt.

Comparing data from single samples


RVM not loading automatically

Question: I have installed RVM and it works.  I can change the version of ruby and do all of the other things expected with RVM.  however, if I close the current terminal window and open a new one, the new terminal window forgets about RVM.  Here's an example:
After opening a new terminal window, I do the following:
$ ruby -v
ruby 1.9.3p484

$ source ~/.bash_profile

$ ruby -v
ruby 2.1.0p0

Ruby 2.1.0p0 is set as the default RVM version.  it only loads properly after I reload bash_profile.
I am using Ubuntu with the kubuntu window manager.  Any ideas??
Answer: what is the o/p of $rvm reload and $rvm notes after you open a new terminal.
Also check out $rvm list
This shows the list for ruby installation available with their version and the default currently being used. You can always change this using $rvm use 1.9.3 --default. If you want any specific version to be loaded for an application, edit the .rvmrc file specifying the ruby version to be used.

RVM not loading automatically


max_stack_depth on PostgreSQL trigger execute

Question: I have very simple trigger and trigger function. Trigger function should insert GUID in every row after insert operation.
SQL:
CREATE TABLE "USERS"
(
  id integer,
  guid uuid,
  name text
)

Trigger function:
CREATE OR REPLACE FUNCTION insertGUID() RETURNS trigger AS
$BODY$BEGIN
    INSERT INTO "USERS" ("guid") VALUES (md5(random()::text || clock_timestamp()::text)::uuid);
END$BODY$
LANGUAGE plpgsql;

Trigger:
CREATE TRIGGER example_trigger BEFORE INSERT ON "USERS" EXECUTE PROCEDURE insertGUID();

But after after every insert. Like:
INSERT INTO "USERS"(name)  VALUES ('foo1');

I am getting error: max_stack_depth
CONTEXT:  SQL: "INSERT INTO "USERS" ("Joe") VALUES (md5(random()::text || clock_timestamp()::text)::uuid)"
UPD: I am getting same problem even if I use BEFORE INSERT
Answer: Your insert fires the trigger which inserts a new row, which then fires the trigger, which inserts a new row, which fires the trigger, which inserts a new row, which fires the trigger which inserts a new row.... (you get the picture).
You want to change the new row, not insert a new one. So your trigger function needs to be like this:
CREATE OR REPLACE FUNCTION insertGUID()
  RETURNS trigger AS
$BODY$BEGIN
    new.guid := md5(random()::text || clock_timestamp()::text;
    return new;
END$BODY$
LANGUAGE plpgsql;

For this to work the trigger itself has to be defined as before insert.
CREATE TRIGGER example_trigger
    BEFORE INSERT ON "USERS" EXECUTE PROCEDURE insertGUID();

Unrelated, but: you should really avoid quoted identifiers ("USERS"). They are much more trouble than they are worth it
Comment: Strange, but it's look like it's work same even with `BEFORE` http://snag.gy/hyth5.jpg
Comment: but on my screenshot is `before`. Or am wrong? I will try check all again
Comment: @user1432751: I have no idea what that screen shot is supposed to show me. The problem with the endless recursion has nothing to do whether it's a before or after trigger. But _changing_ the column value will **only** work in a before trigger.
Comment: I checked all my code. I am getting same error even if I use `BEFORE INSERT`.
Comment: @user1432751 Again: did you remove (replace) the `insert` statement from the _trigger function_?
Comment: my function now look like:
`CREATE TRIGGER createguid
  BEFORE INSERT
  ON "USERS"
  FOR EACH STATEMENT
  EXECUTE PROCEDURE insertguid();`
Comment: That's your _trigger_, not your trigger _function_. Please do apply the **complete** code from my answer.
Comment: You forgot `)` after `::text` also after acception your function instead my after attempt to insert data I am getting error that `new` does not have value


SageMaker endpoint can't load huggingface tokenizer

Question: I used Amazon SageMaker to train a HuggingFace model. At the end of the training script provided to the estimator, I saved the model into the correct path (SM_MODEL_DIR):
if __name__ == "__main__":
    parser = argparse.ArgumentParser()
    parser.add_argument("--model-dir", type=str, default=os.environ["SM_MODEL_DIR"])

    ...

    trainer.model.save_pretrained(args.model_dir)

After the model was trained, I deployed it using the deploy method of the HuggingFace estimator. Once the endpoint was successfully created, I tried inference with the returned predictor:
response = self.predictor.predict(
    {"inputs": "I want to know where is my order"}
)

And I received the following client error:
{'code': 400, 'type': 'InternalServerException', 'message': "Can't load tokenizer for '/.sagemaker/mms/models/model'. Make sure that:\n\n- '/.sagemaker/mms/models/model' is a correct model identifier listed on 'https://huggingface.co/models'\n\n- or '/.sagemaker/mms/models/model' is the correct path to a directory containing relevant tokenizer files\n\n"}

Why cannot the tokenizer be loaded?
Comment: Facing the same issue for essentially the same environmental setting. Were you able to figure out the issue?
Answer: Based on the trainer.model.save_pretrained(args.model_dir) line above, you are only exporting the model.
If you want to ensure that the tokenizer (config) is saved, you ought to use trainer.save_model() instead. This would ensure both the model and the tokenizer are exported, as long as you pass in the tokenizer when instantiating the Trainer.


Webform File Upload field

Question: I'm using Drupal 8 with Webform module.
I want to allow users to upload one or several files when filling the form. Is it possible with Drupal 8? May be some additional module required for this?
Answer: You need to enable webform UI, then set in your sites/default/settings.php file the privates files directory path:
$settings['file_private_path'] = 'sites/default/files/private'; where 'sites/default/files/private' is your privates files directory path. You can choose another directory. And give to this directory the write permission. Then clear all caches. Now you can add files fied in your webform while adding new element. In the popup that appears, typing file, you will see all files type like image, audio, etc.
Comment: Is this answer still relevant? I'm not getting any file element types.
Comment: Note that an example of a more secure path would be `'../files'` or `'../private'`
Comment: Awesome. Thank you so much.
Comment: Awesome! Worked like a charm on Drupal 9.
Comment: I also had to make the file available as an element type within the admin configuration settings section of all webforms (/admin/structure/webform/config/elements)
Answer: Yes, you can allow users to upload files to the webform by adding a new  "managed_file" form element into the "Elements (YAML)":

This is provided that you have your public and private file paths set, which will otherwise throw a notice telling you to set those up.
Comment: Can I add 'file_upload' field using Webform UI?
Answer: Another solution of yaml configuration for images in order to upload a file:
picture:
  '#type': image_file
  '#title': Photo
  '#file_extensions': 'gif jpg png svg jpeg'
  '#multiple': True

You can install the module Webform UI to do this in the interface...

Webform File Upload field


Block certain GET request in Apache log

Question: Since recently I have a VPS. Now it seems that there is a domain not owned by me that has DNS records pointing to my IP. Because of this my Apache (2.4) logs are flooded with some kind of GIT request. The format is always:
GET /?p=foo.git;...random stuff....
I tried blocking it with iptables and in Apache configuration, but nothing seems to work because it starts with a question mark.
My whole site is on SSL.
Is it possible to keep it out of my logs and how? Any help would be appreciated.
Answer: Given that the requests follow a specific format, you can try the following trick: put HAProxy in front of Apache (this requires a bit of work) and create an ACL in HAProxy that matches said requests (based oh host/header/request criteria) and ensure that they never hit Apache.
Answer: There are a few ways that you can stop this:

mod_rewrite can match on query string
mod_security can block this, and a number of other attempts to abuse your server
if the clients use SNI, you can set up a separate virtual host for the other domain and block everything to it, and log to a separate file (or to /dev/null)
let the requests through, but don't log them

For mod_rewrite, there's a canonical question with lots of information. A basic ruleset for this could be
RewriteEngine On
RewriteCond %{QUERY_STRING} ?p=foo.git.*
RewriteRule .* - [F]

This will return 403 Forbidden to the client.
For mod_security, see the documentation at modsecurity.org.
For virtual hosts, see the documentation at the apache documentation site. Note that there may be a problem with clients who don't use SNI, as per the question Understand ssl setup
For changing the logging, you can use a combination of mod_rewrite, environment variables and custom log format. Here's an example:
RewriteEngine On
RewriteCond %{QUERY_STRING} ?p=foo.git.*
RewriteRule .* - [F,E=nolog:1]
CustomLog /path/to/your/access.log common env=!nolog

Comment: virtual hosts worked partly, mainly to requests robots.txt
When using mod_rewrite I get an error when I restart apache.
I installed mod_security, but their website was not a big help with setting up the right rule.
Comment: If you'd like more help, you could either amend the question with the specific configuration you're having problems with, or post a separate question with that information.

Block certain GET request in Apache log


$SL(n)$ is a differentiable manifold

Question:
Prove that $SL(n)=\{A\in \Bbb{R}^{n\times n}:\det(A)=1\}$ is a differentiable submanifold.

The determinant function is smooth since it's a polynomial, and we have $\det^{-1}(1)=SL(n)$. So it suffices to prove that $d \det(A)$ has constant nonzero rank for all $A\in SL(n)$.
By the Laplace's formula, we can write $$\det A = \sum_{j=1}^n (-1)^{i+j} a_{ij} \det (A^{*})$$ where $A^*$ is $A$ with the i-th row and j-th column removed. Then $$\frac{\partial}{\partial a_{ij}} \det A = (-1)^{i+j}\det(A^*).$$
So we need to show that $$\left( (-1)^{i+j}\det(A^*) \right)_{ij}$$ has constant nonzero rank.
How can we proceed?
Comment: Since the codomain of $\det$ is one-dimensional, you want to show that $d\det$ is not the zero functional at any point of $SL(n)$. If you look at $\gamma(t) = \det (t\cdot A)$, what do you see?
Comment: Another approach might be to show that it is a Lie group: It's easy to show that $SL_n(\mathbb{R}) \subseteq GL_n(\mathbb{R})$ is a group under multiplication.  The restriction of the multiplication and inversion maps from $GL_n(\mathbb{R})$ are still smooth on $SL_n(\mathbb{R})$.
Comment: What is $\gamma'(1)$?
Comment: Along the same lines @DanielFischer is suggesting, you might try to apply [Euler's Theorem on Homogeneous Functions](https://en.wikipedia.org/wiki/Homogeneous_function).
Comment: I'm afraid I haven't learned about Lie Groups yet :(
Comment: Sorry, I'm not sure what you're getting at.
Answer: First, we need a theorem:

Suppose $U\subset \mathbb{R}^{n+m}$ is an open set and $f \colon U \to \mathbb{R}^m$ is a $\mathcal{C}^{\infty}$ map. Let $q \in \mathbb{R}^m$ and $M = f^{-1}(q)$. If $\mathrm{D}f(x)$ has rank $m$ for all $x \in M$, then $M$ is an $n$-dim. submanifold of $\mathbb{R}^{n+m}$.

Statement:
Let $SL_n(\mathbb{R}) = \{ A \in \mathrm{Mat}_{n \times n}\ \lvert \mathrm{det} A = 1\}$. Then:

If $A \in SL_n(\mathbb{R})$, then $\mathrm{D \ det}(A)$ has rank
$1$.
$SL_n(\mathbb{R})$ is an $(n^2 -1) -$ manifold.

Proof:
Note, that  $\mathrm{det} \colon \mathbb{R}^{n^2} \to \mathbb{R}$ is polynomial and so $\mathcal{C}^{\infty}$. To show $(1)$ it is only necessary to show that some directional derivative $\mathrm{D_{B}det}(A)$ is nonzero. We compute for $A \in SL_n(\mathbb{R})$,
$$
\mathrm{D_{A}det}(A) = \frac{d}{dt} \mathrm{det}(A + tA)\lvert_{t=0} = \frac{d}{dt} (1 + t)^n \mathrm{det}(A)\lvert_{t=0} = \frac{d}{dt}(1+t)^n \lvert_{t=0} = n.
$$
Hence, $(1)$ is shown.
To see $(2)$, we use the above theorem. The set $GL_{n}(\mathbb{R}) \subset \mathbb{R}^{n^2 -1} \times \mathbb{R}$ is an open set and $\mathrm{det}\colon GL_{n}(\mathbb{R}) \to \mathbb{R}$ is a $\mathcal{C}^{\infty}$- map. The set $\mathrm{det}^{-1}(1) = SL_{n}(\mathbb{R})$, and $\mathrm{D \ det}(A)$ has rank $1$ for each $A \in SL_n(\mathbb{R})$. Therefore, by the above theorem, $SL_{n}(\mathbb{R})$ is an $(n^2 - 1)$-submanifold.
Answer: Since $SL(n) = \det^{-1}(1)$ and the determinant $\det : {\mathbb R}^{n^2} \to {\mathbb R}$ is smooth, you just need to show that the gradient $\nabla \det (A)$ is never zero at a unimodular matrix $A$ (ie, $A \in SL(n)$).
As you computed, the $n^2$ entries of $\nabla \det (A)$ are precisely:
$$
\left(\nabla \det (A)\right)_{i,j} = (-1)^{i+j} \det(A^*_{i,j})
$$
Here, $A^*_{i,j}$ is the $(n-1)\times (n-1)$-matrix obtained by deleting row $i$ and column $j$. So, denoting $C_{i,j}:=(-1)^{i+j} \det(A^*_{i,j})$, the matrix $C$ is precisely what is called the cofactor (or "adjugate") matrix of $A$: https://en.wikipedia.org/wiki/Adjugate_matrix, which verifies:
$$
C = (\det A) A^{-1}
$$
This means that $C$ is also unimodular ($\det C=1$). Hence, $\nabla \det (A)$ (with entries $C_{i,j}$) has, at least, one non-zero entry, and can not be the zero vector.

$SL(n)$ is a differentiable manifold