Foros del Web » Creando para Internet » Sistemas de gestión de contenidos » Drupal »

Drupal 8 - Campo Imagen - Poner Poi en punto determinado

Estas en el tema de Drupal 8 - Campo Imagen - Poner Poi en punto determinado en el foro de Drupal en Foros del Web. Hola a todos. Necesito algo "diferente". Tengo una entidad llamada "Oficina" que tiene muchos datos pero además, tiene una posición sobre un mapa. El mapa, ...
  #1 (permalink)  
Antiguo 21/07/2017, 07:15
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 14 años
Puntos: 9
Drupal 8 - Campo Imagen - Poner Poi en punto determinado

Hola a todos.

Necesito algo "diferente".

Tengo una entidad llamada "Oficina" que tiene muchos datos pero además, tiene una posición sobre un mapa.
El mapa, NO es de google maps, ni por api ni geolocalizado.
Es una imagen de un mapa dibujado por un diseñador.

Entonces, lo que necesito es que al rellenar los datos de la Oficina, sobre el mapa pulse, y pueda colocar un punto (un POI) identificando que ahí pertenece esa oficina, y pueda guardar en la base de datos la posición X e Y de ese punto sobre la imagen.

¿cómo podríamos hacer esto?


Gracias y un saludo.
  #2 (permalink)  
Antiguo 21/07/2017, 12:04
 
Fecha de Ingreso: junio-2012
Ubicación: Madrid
Mensajes: 339
Antigüedad: 6 años, 9 meses
Puntos: 47
Respuesta: Drupal 8 - Campo Imagen - Poner Poi en punto determinado

Eso es javascript solo, Creo que mejor se te daría en ese foro. De todos modos, haciendo una búsqueda rápida en google esto es lo primero que he encontrado Creo que es lo que buscas aunque no lo he leído entero.

La historia es que además de posicionar el marcador en el lugar correspondiente (en el ejemplo es un círculo) añada también por javascript o jQuery las coordenadas usadas para posicionar el círculo en los campos correspondientes del formulario del tipo de contenido. Luego guardas el post normalmente, y fuera.

Es relativamente sencillo si te manejas un poco con javaScript. échale un ojo y nos dices..

Si no me he explicado me dices.

Un saludo

(Siempre y cuando no haya un módulo para esto o plugin de javascript)
  #3 (permalink)  
Antiguo 21/07/2017, 12:09
 
Fecha de Ingreso: junio-2012
Ubicación: Madrid
Mensajes: 339
Antigüedad: 6 años, 9 meses
Puntos: 47
Respuesta: Drupal 8 - Campo Imagen - Poner Poi en punto determinado

Mira esto te puede resultar muy útil también.

http://www.html5canvastutorials.com/...e-coordinates/
  #4 (permalink)  
Antiguo 21/07/2017, 16:54
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 14 años
Puntos: 9
Respuesta: Drupal 8 - Campo Imagen - Poner Poi en punto determinado

Hola compañeros.

La realización del sistema Javascript, la tengo hecha. Es muy muy sencilla.

Mi problema viene en ver cómo incrustarla / meterla dentro de Drupal como módulo.

Por más que estoy intentando hacer un módulo Custom, no consigo hacerlo.

He conseguido crear un campo custom, "MapPositions" y me saca 2 inputs de tipo texto para la posición X e Y que capturaré con Javascript.

Pero en dicho módulo, no consigo hacer que me carge CSS y javascript, por lo que no soy capaz de hacer que se ejecute el Javascript que he desarrollado.

Mi módulo consta de la siguiente estructura:

+modules
---- + custom
-------- + officespointselector
------------ + css
---------------- OfficesPointSelector.css
------------ + js
---------------- OfficesPointSelector.js
------------ + src
---------------- + Plugin
-------------------- + Field
------------------------ + FieldFormatter
---------------------------- OfficesPointSelectorDefaultFormatter.php
------------------------ + FieldType
---------------------------- OfficesPointSelector.php
------------------------ + FieldWidget
---------------------------- OfficesPointSelectorDefaultWidget.php
------------ officespointselector.info.yml
------------ officespointselector.libraries.yml


Como digo, el Módulo, funciona correctamente, dado que aparecen bien los 2 campos de tipo texto con los labels que yo he definido, etc.

El problema viene cuando intento que el módulo incorpore JS y CSS, y ninguno de estos es insertado ni ejecutado:

officespointselector.info.yml
Código:
name: OfficesPointSelector
description: Interacso Modile: Define a point into a map to set position of office

# The type must be 'module' and the package must be 'Field types'
type: module
package: Field types
core: 8.x

libraries:
  - officespointselector/officespointselector

# The list of dependencies must contains the 'field' value
dependencies:
  - field

officespointselector.libraries.yml
Código:
officespointselector:
  version: 1.x
  css:
    theme:
      css/OfficesPointSelector.css: {}
  js:
    js/OfficesPointSelector.js: {}
  dependencies:
    - core/jquery
src/Plugin/field/FieldFormatter/OfficesPointSelectorDefaultFormatter.php
Código PHP:
<?php

namespace DrupalofficespointselectorPluginFieldFieldFormatter
;

use 
DrupalCoreFieldFieldItemListInterface;
use 
DrupalCoreFieldFormatterBase;
use 
Drupal;

/**
 * Plugin implementation of the 'OfficesPointSelectorDefaultFormatter' formatter.
 *
 * @FieldFormatter(
 *   id = "OfficesPointSelectorDefaultFormatter",
 *   label = @Translation("Offices Point Select"),
 *   field_types = {
 *     "OfficesPointSelector"
 *   }
 * )
 */
class OfficesPointSelectorDefaultFormatter extends FormatterBase {
    
    
/**
     * Define how the field type is showed.
     *
     * Inside this method we can customize how the field is displayed inside
     * pages.
     */
    
public function viewElements(FieldItemListInterface $items$langcode) {
        
        
$elements = [];
        foreach (
$items as $delta => $item) {
            
$elements[$delta] = [
              
'#type' => 'markup',
              
'#markup' => $item->posX ', ' $item->posY
            
];
        }
        
        return 
$elements;
    }
    
// class

src/Plugin/field/FieldType/OfficesPointSelector.php
Código PHP:
<?php

namespace DrupalofficespointselectorPluginFieldFieldType
;

use 
DrupalCoreFieldFieldItemBase;
use 
DrupalCoreTypedDataDataDefinition;
use 
DrupalCoreFieldFieldStorageDefinitionInterface as StorageDefinition;

/**
 * Plugin implementation of the 'officespointselector' field type.
 *
 * @FieldType(
 *   id = "OfficesPointSelector",
 *   label = @Translation("OfficesPointSelector"),
 *   description = @Translation("Define a point into a map"),
 *   category = @Translation("Custom"),
 *   default_widget = "OfficesPointSelectorDefaultWidget",
 *   default_formatter = "OfficesPointSelectorDefaultFormatter"
 * )
 */
class OfficesPointSelector extends FieldItemBase {
    
    
/**
     * Field type properties definition.
     *
     * Inside this method we defines all the fields (properties) that our
     * custom field type will have.
     *
     * Here there is a list of allowed property types: https://goo.gl/sIBBgO
     */
    
public static function propertyDefinitions(StorageDefinition $storage) {
        
        
$properties = [];
        
        
$properties['posX'] = DataDefinition::create('string')
          ->
setLabel(t('Position X'));
        
        
$properties['posY'] = DataDefinition::create('string')
          ->
setLabel(t('Position Y'));
        
        return 
$properties;
    }
    
    
/**
     * Field type schema definition.
     *
     * Inside this method we defines the database schema used to store data for
     * our field type.
     *
     * Here there is a list of allowed column types: https://goo.gl/YY3G7s
     */
    
public static function schema(StorageDefinition $storage) {
        
        
$columns = [];
        
$columns['posX'] = [
          
'type' => 'char',
          
'length' => 4,
        ];
        
$columns['posY'] = [
          
'type' => 'char',
          
'length' => 4,
        ];
        
        return [
          
'columns' => $columns,
          
'indexes' => [],
        ];
    }
    
    
/**
     * Define when the field type is empty.
     *
     * This method is important and used internally by Drupal. Take a moment
     * to define when the field fype must be considered empty.
     */
    
public function isEmpty() {
        
        
$isEmpty =
          empty(
$this->get('posX')->getValue()) &&
          empty(
$this->get('posY')->getValue());
        
        return 
$isEmpty;
    }
    
// class


src/Plugin/field/FieldWidget/OfficesPointSelectorDefaultWidget.php
Código PHP:
<?php

namespace DrupalofficespointselectorPluginFieldFieldWidget
;

use 
Drupal;
use 
DrupalCoreFieldFieldItemListInterface;
use 
DrupalCoreFieldWidgetBase;
use 
DrupalCoreFormFormStateInterface;

/**
 * Plugin implementation of the 'OfficesPointSelectorDefaultWidget' widget.
 *
 * @FieldWidget(
 *   id = "OfficesPointSelectorDefaultWidget",
 *   label = @Translation("Offices Point Select"),
 *   field_types = {
 *     "OfficesPointSelector"
 *   }
 * )
 */
class OfficesPointSelectorDefaultWidget extends WidgetBase {
    
    
/**
     * Define the form for the field type.
     *
     * Inside this method we can define the form used to edit the field type.
     *
     * Here there is a list of allowed element types: https://goo.gl/XVd4tA
     */
    
public function formElement(
      
FieldItemListInterface $items,
      
$delta,
      Array 
$element,
      Array &
$form,
      
FormStateInterface $formState
    
) {
        
        
// X position
        
        
$element['posX'] = [
          
'#type' => 'textfield',
          
'#title' => t('Position X'),
            
            
// Set here the current value for this field, or a default value (or
            // null) if there is no a value
          
'#default_value' => isset($items[$delta]->posX) ?
            
$items[$delta]->posX null,
          
          
'#empty_value' => '',
          
'#placeholder' => t('Position X'),
        ];
        
        
// Y position
        
        
$element['posY'] = [
          
'#type' => 'textfield',
          
'#title' => t('Position Y'),
          
'#default_value' => isset($items[$delta]->posY) ?
            
$items[$delta]->posY null,
          
'#empty_value' => '',
          
'#placeholder' => t('Position Y'),
        ];
        
        return 
$element;
    }
    
// class
css/OfficesPointSelector.css
Código:
body {
    background-color:red;
}

js/OfficesPointSelector.js
Código:
jQuery(document).ready(function () {
    alert ("");
});
Esto es todo el montaje, pero no veo por ningún lado que mi ADMIN de drupal incluya las librerías correspondientes de mi módulo para poder ejecutar el JS, ni los CSS.

¿qué estoy haciendo mal?


Gracias!!!
  #5 (permalink)  
Antiguo 22/07/2017, 03:23
 
Fecha de Ingreso: junio-2012
Ubicación: Madrid
Mensajes: 339
Antigüedad: 6 años, 9 meses
Puntos: 47
Respuesta: Drupal 8 - Campo Imagen - Poner Poi en punto determinado

Perdona pero no he tocado más que por encima Drupal 8, aunque parece que no difiere mucho en esto de Drupal7.

Seguro que es una pregunta tonta, ¿Has indicado en algún sitio al módulo que cargue los archivos CSS y js? ( drupal_add_js() drupal_add_css() )

Saludos
  #6 (permalink)  
Antiguo 25/07/2017, 09:32
(Desactivado)
 
Fecha de Ingreso: septiembre-2008
Mensajes: 270
Antigüedad: 10 años, 6 meses
Puntos: 22
Respuesta: Drupal 8 - Campo Imagen - Poner Poi en punto determinado

Hola ¿como están?
Yo verificando el módulo llamado https://www.drupal.org/project/examples el submodulo llamado js_example, verifiqué que solo hay que hacer esto.

creas un archivo .libraries.yml



y dentro pones esta estructura:
Código PHP:
Ver original
  1. # A simple script using jquery ui accordion.
  2. js_example.accordion:
  3.   js:
  4.     js/js_example_accordion.js: {}
  5.   # Build up our dependencies for this page as a library. Our accordion script
  6.  # needs jquery.ui.accordion. You can find the core scripts under core/assets/.
  7.  dependencies:
  8.     - core/jquery.ui.accordion
  9.  
  10. # Show how weights work.
  11. js_example.weights:
  12.   # Add css file.
  13.  css:
  14.     component:
  15.       css/jsweights.css: {}
  16.   # Add js files.
  17.  js:
  18.     # weight is used as example attribute, but please avoid it and instead use
  19.    # dependencies for order loading.
  20.    js/red.js: { weight: -4 }
  21.     js/blue.js: { weight: -2 }
  22.     js/green.js: { weight: -1 }
  23.     js/brown.js: { weight: -2 }
  24.     js/black.js: { weight: -1 }
  25.     js/purple.js: { weight: -5 }
  26.   dependencies:
  27.     - core/jquery
  28.     - core/drupalSettings
  #7 (permalink)  
Antiguo 26/07/2017, 01:19
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 14 años
Puntos: 9
Respuesta: Drupal 8 - Campo Imagen - Poner Poi en punto determinado

Hola compañeros.

Gracias por vuestras contestaciones.

en vista de que no fui capaz, tiré por una vía qu eNO me gusta, pero que si que ha sido funcional, y es en el tema del ADMIN (core/themes/seven/seven.libraries.yml), he incluido la ruta de 1 CSS mío y un JS mío, y así, se están ejecutando.

Se que no es la manera más optima ni correcta, pero no supe corregir el problema del módulo.


Cuando acabe el proyecto, que tengo que entregarlo al final de esta semana, veré refactorizarlo y hacer que funcione el módulo y mejorar eso.

Gracias de nuevo, y ya os confirmaré si me han funcionado vuestros comentarios.

Etiquetas: campo, determinado, poi, punto
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:25.