Java tutorial
/* * Copyright (C) 2014 Language In Interaction * * This program is free software; you can redistribute it and/or * modify it under the terms of the GNU General Public License * as published by the Free Software Foundation; either version 2 * of the License, or (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program; if not, write to the Free Software * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. */ package nl.ru.languageininteraction.language.client.view; import com.google.gwt.core.client.GWT; import com.google.gwt.dom.client.Document; import com.google.gwt.dom.client.Element; import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.client.ClickHandler; import com.google.gwt.safehtml.shared.SafeHtmlBuilder; import com.google.gwt.safehtml.shared.SafeHtmlUtils; import com.google.gwt.user.client.Window; import com.google.gwt.user.client.ui.ButtonBase; import com.google.gwt.user.client.ui.HTML; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.VerticalPanel; //import nl.ru.languageininteraction.language.client.AutotypRegions; import nl.mpi.tg.eg.experiment.client.listener.PresenterEventListner; import nl.mpi.tg.eg.experiment.client.listener.SingleShotEventListner; import nl.mpi.tg.eg.experiment.client.view.ComplexView; import nl.mpi.tg.eg.experiment.client.view.SimpleView.ButtonType; import nl.ru.languageininteraction.language.client.util.SvgTemplate; /** * @since Nov 26, 2014 4:11:13 PM (creation date) * @author Peter Withers <p.withers@psych.ru.nl> */ public class MapView extends ComplexView { final VerticalPanel verticalPanel = new VerticalPanel(); private float zoomFactor = 1f; private int height; private int width; private String units; // protected final AutotypRegions autotypRegions = GWT.create(AutotypRegions.class); private static final SvgTemplate SVG_TEMPLATE = GWT.create(SvgTemplate.class); public void addZoom() { setButton(ButtonType.menu, new PresenterEventListner() { @Override public String getLabel() { return "-"; } @Override public void eventFired(ButtonBase button, SingleShotEventListner singleShotEventListner) { // final Element svgElement = Document.get().getElementById("zoomableGroup"); zoomFactor *= 0.5; // svgElement.setAttribute("transform", "scale(" + zoomFactor + ")"); final Element svgElement = Document.get().getElementById("ocean"); if (svgElement != null) { svgElement.setAttribute("width", Float.toString(width * zoomFactor)); svgElement.setAttribute("height", Float.toString(height * zoomFactor)); Document.get().getElementById("zoomableGroup").setAttribute("transform", "scale(" + zoomFactor + ")"); } } @Override public String getStyleName() { return null; } @Override public int getHotKey() { throw new UnsupportedOperationException("Not supported yet."); //To change body of generated methods, choose Tools | Templates. } }); setButton(ButtonType.menu, new PresenterEventListner() { @Override public String getLabel() { return "+"; } @Override public void eventFired(ButtonBase button, SingleShotEventListner singleShotEventListner) { // final Element svgElement = Document.get().getElementById("zoomableGroup"); zoomFactor *= 1.5; // svgElement.setAttribute("transform", "scale(" + zoomFactor + ")"); final Element svgElement = Document.get().getElementById("ocean"); if (svgElement != null) { svgElement.setAttribute("width", Float.toString(width * zoomFactor)); svgElement.setAttribute("height", Float.toString(height * zoomFactor)); Document.get().getElementById("zoomableGroup").setAttribute("transform", "scale(" + zoomFactor + ")"); } } @Override public String getStyleName() { return null; } @Override public int getHotKey() { throw new UnsupportedOperationException("Not supported yet."); //To change body of generated methods, choose Tools | Templates. } }); } @Override protected void parentResized(int height, int width, String units) { super.parentResized(height, width, units); // final Element svgElement = Document.get().getElementById("ocean"); // if (svgElement != null) { // svgElement.setAttribute("width", width + units); // svgElement.setAttribute("height", height + units); // } // } public void addMap() { final Label label = new Label("click a land mass"); verticalPanel.add(label); // String[] items = new String[]{"one", "two", "three"}; SafeHtmlBuilder builder = new SafeHtmlBuilder(); // for (String item : items) { // builder.appendEscaped(item).appendHtmlConstant("<br/>"); // } height = Window.getClientHeight(); width = Window.getClientWidth(); builder.append(SafeHtmlUtils.fromTrustedString("<style>.overlay {pointer-events: none;}</style>")); builder.append(SafeHtmlUtils .fromTrustedString("<svg id='ocean' height='" + height + "px' width='" + width + "px' >")); builder.append(SafeHtmlUtils.fromTrustedString("<g id='zoomableGroup'>")); builder.append(SafeHtmlUtils.fromTrustedString("<g transform='scale(0.3)'>")); // builder.append(SVG_TEMPLATE.groupTag(autotypRegions.idIndic(), autotypRegions.transformIndic())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath97259(), autotypRegions.stylepath97259(), autotypRegions.datapath97259())); // builder.append(SVG_TEMPLATE.groupTagEnd()); // builder.append(SVG_TEMPLATE.groupTag(autotypRegions.idBasinandPlains(), autotypRegions.transformBasinandPlains())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath107611(), autotypRegions.stylepath107611(), autotypRegions.datapath107611())); // builder.append(SVG_TEMPLATE.groupTagEnd()); // builder.append(SVG_TEMPLATE.groupTag(autotypRegions.idAlaskaOregon(), autotypRegions.transformAlaskaOregon())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath107614(), autotypRegions.stylepath107614(), autotypRegions.datapath107614())); // builder.append(SVG_TEMPLATE.groupTagEnd()); // builder.append(SVG_TEMPLATE.groupTag(autotypRegions.idCalifornia(), autotypRegions.transformCalifornia())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath107582(), autotypRegions.stylepath107582(), autotypRegions.datapath107582())); // builder.append(SVG_TEMPLATE.groupTagEnd()); // builder.append(SVG_TEMPLATE.groupTag(autotypRegions.idMesoamerica(), autotypRegions.transformMesoamerica())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath97265(), autotypRegions.stylepath97265(), autotypRegions.datapath97265())); // builder.append(SVG_TEMPLATE.groupTagEnd()); // builder.append(SVG_TEMPLATE.groupTag(autotypRegions.idSESouthAmerica(), autotypRegions.transformSESouthAmerica())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath107722(), autotypRegions.stylepath107722(), autotypRegions.datapath107722())); // builder.append(SVG_TEMPLATE.groupTagEnd()); // builder.append(SVG_TEMPLATE.groupTag(autotypRegions.idNESouthAmerica(), autotypRegions.transformNESouthAmerica())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath97311(), autotypRegions.stylepath97311(), autotypRegions.datapath97311())); // builder.append(SVG_TEMPLATE.groupTagEnd()); // builder.append(SVG_TEMPLATE.groupTag(autotypRegions.idAndean(), autotypRegions.transformAndean())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath107701(), autotypRegions.stylepath107701(), autotypRegions.datapath107701())); // builder.append(SVG_TEMPLATE.groupTagEnd()); // builder.append(SVG_TEMPLATE.groupTag(autotypRegions.idNAustralia(), autotypRegions.transformNAustralia())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath97635(), autotypRegions.stylepath97635(), autotypRegions.datapath97635())); // builder.append(SVG_TEMPLATE.groupTagEnd()); // builder.append(SVG_TEMPLATE.groupTag(autotypRegions.idGreenland(), autotypRegions.transformGreenland())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath140696(), autotypRegions.stylepath140696(), autotypRegions.datapath140696())); // builder.append(SVG_TEMPLATE.groupTagEnd()); // builder.append(SVG_TEMPLATE.groupTag(autotypRegions.idSAustralia(), autotypRegions.transformSAustralia())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath107441(), autotypRegions.stylepath107441(), autotypRegions.datapath107441())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath99393(), autotypRegions.stylepath99393(), autotypRegions.datapath99393())); // builder.append(SVG_TEMPLATE.groupTagEnd()); // builder.append(SVG_TEMPLATE.groupTag(autotypRegions.idNAfrica(), autotypRegions.transformNAfrica())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath140264(), autotypRegions.stylepath140264(), autotypRegions.datapath140264())); // builder.append(SVG_TEMPLATE.groupTagEnd()); // builder.append(SVG_TEMPLATE.groupTag(autotypRegions.idSAfrica(), autotypRegions.transformSAfrica())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath140076(), autotypRegions.stylepath140076(), autotypRegions.datapath140076())); // builder.append(SVG_TEMPLATE.groupTagEnd()); // builder.append(SVG_TEMPLATE.groupTag(autotypRegions.idGreaterMesopotamia(), autotypRegions.transformGreaterMesopotamia())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath97275(), autotypRegions.stylepath97275(), autotypRegions.datapath97275())); // builder.append(SVG_TEMPLATE.groupTagEnd()); // builder.append(SVG_TEMPLATE.groupTag(autotypRegions.idInnerAsia(), autotypRegions.transformInnerAsia())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath97287(), autotypRegions.stylepath97287(), autotypRegions.datapath97287())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath140112(), autotypRegions.stylepath140112(), autotypRegions.datapath140112())); // builder.append(SVG_TEMPLATE.groupTagEnd()); // builder.append(SVG_TEMPLATE.groupTag(autotypRegions.idEurope(), autotypRegions.transformEurope())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath97263(), autotypRegions.stylepath97263(), autotypRegions.datapath97263())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath97585(), autotypRegions.stylepath97585(), autotypRegions.datapath97585())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath97977(), autotypRegions.stylepath97977(), autotypRegions.datapath97977())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath98383(), autotypRegions.stylepath98383(), autotypRegions.datapath98383())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath99041(), autotypRegions.stylepath99041(), autotypRegions.datapath99041())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath100331(), autotypRegions.stylepath100331(), autotypRegions.datapath100331())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath97431(), autotypRegions.stylepath97431(), autotypRegions.datapath97431())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath98187(), autotypRegions.stylepath98187(), autotypRegions.datapath98187())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath98391(), autotypRegions.stylepath98391(), autotypRegions.datapath98391())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath100255(), autotypRegions.stylepath100255(), autotypRegions.datapath100255())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath100829(), autotypRegions.stylepath100829(), autotypRegions.datapath100829())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath101047(), autotypRegions.stylepath101047(), autotypRegions.datapath101047())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath101127(), autotypRegions.stylepath101127(), autotypRegions.datapath101127())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath101193(), autotypRegions.stylepath101193(), autotypRegions.datapath101193())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath101671(), autotypRegions.stylepath101671(), autotypRegions.datapath101671())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath140654(), autotypRegions.stylepath140654(), autotypRegions.datapath140654())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath97911(), autotypRegions.stylepath97911(), autotypRegions.datapath97911())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath141650(), autotypRegions.stylepath141650(), autotypRegions.datapath141650())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath142374(), autotypRegions.stylepath142374(), autotypRegions.datapath142374())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath143814(), autotypRegions.stylepath143814(), autotypRegions.datapath143814())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath144104(), autotypRegions.stylepath144104(), autotypRegions.datapath144104())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath140764(), autotypRegions.stylepath140764(), autotypRegions.datapath140764())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath140714(), autotypRegions.stylepath140714(), autotypRegions.datapath140714())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath143158(), autotypRegions.stylepath143158(), autotypRegions.datapath143158())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath144174(), autotypRegions.stylepath144174(), autotypRegions.datapath144174())); // builder.append(SVG_TEMPLATE.groupTagEnd()); // builder.append(SVG_TEMPLATE.groupTag(autotypRegions.idSoutheast_Asia(), autotypRegions.transformSoutheast_Asia())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath97365(), autotypRegions.stylepath97365(), autotypRegions.datapath97365())); // builder.append(SVG_TEMPLATE.groupTagEnd()); // builder.append(SVG_TEMPLATE.groupTag(autotypRegions.idNorthCoastAsia(), autotypRegions.transformNorthCoastAsia())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath97393(), autotypRegions.stylepath97393(), autotypRegions.datapath97393())); // builder.append(SVG_TEMPLATE.groupTagEnd()); // builder.append(SVG_TEMPLATE.groupTag(autotypRegions.idENorthAmerica(), autotypRegions.transformENorthAmerica())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath107580(), autotypRegions.stylepath107580(), autotypRegions.datapath107580())); // builder.append(SVG_TEMPLATE.groupTagEnd()); // builder.append(SVG_TEMPLATE.groupTag(autotypRegions.idPapua(), autotypRegions.transformPapua())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath97649(), autotypRegions.stylepath97649(), autotypRegions.datapath97649())); // builder.append(SVG_TEMPLATE.groupTagEnd()); // builder.append(SVG_TEMPLATE.groupTag(autotypRegions.idAfricanSavanah(), autotypRegions.transformAfricanSavanah())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath13257(), autotypRegions.stylepath13257(), autotypRegions.datapath13257())); // builder.append(SVG_TEMPLATE.groupTagEnd()); // builder.append(SVG_TEMPLATE.groupTag(autotypRegions.idOceania(), autotypRegions.transformOceania())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath107904(), autotypRegions.stylepath107904(), autotypRegions.datapath107904())); // builder.append(SVG_TEMPLATE.pathTag(autotypRegions.transformpath97885(), autotypRegions.stylepath97885(), autotypRegions.datapath97885())); builder.append(SVG_TEMPLATE.groupTagEnd()); // builder.append(SafeHtmlUtils.fromTrustedString("<rect id='island' x='250' y='150' height='5px' width='5px' fill='blue'/>")); // builder.append(SafeHtmlUtils.fromTrustedString("<rect id='island' x='255' y='170' height='5px' width='5px' fill='blue'/>")); // builder.append(SafeHtmlUtils.fromTrustedString("<rect id='island' x='10' y='160' height='5px' width='5px' fill='blue'/>")); // builder.append(SafeHtmlUtils.fromTrustedString("<rect id='island' x='30' y='150' height='5px' width='5px' fill='blue'/>")); // builder.append(SafeHtmlUtils.fromTrustedString("<rect id='island' x='20' y='150' height='5px' width='5px' fill='blue'/>")); // builder.append(SafeHtmlUtils.fromTrustedString("<rect id='continent' x='0' y='10'height='88px' width='88px' fill='green'/>")); // builder.append(SafeHtmlUtils.fromTrustedString("<rect id='asia' x='250' y='50' height='88px' width='88px' fill='green'/>")); // builder.append(SafeHtmlUtils.fromTrustedString("<rect id='europe' x='150' y='10' height='88px' width='88px' fill='green'/>")); // builder.append(SafeHtmlUtils.fromTrustedString("<rect id='africa' x='100' y='110' height='88px' width='88px' fill='green'/>")); // builder.append(SafeHtmlUtils.fromTrustedString("<rect id='australia' x='400' y='100' height='88px' width='88px' fill='green'/>")); // builder.append(SafeHtmlUtils.fromTrustedString("<rect id='newzealand' x='500' y='150' height='20px' width='10px' fill='green'/>")); builder.append(SafeHtmlUtils.fromTrustedString("</g>")); builder.append(SafeHtmlUtils.fromTrustedString("</g>")); builder.append(SafeHtmlUtils.fromTrustedString("<line id='horizontal' class='overlay' x1='0' y1='100' x2='" + width + "' y2='100' style='stroke:rgb(255,0,0);stroke-width:2'/>")); builder.append( SafeHtmlUtils.fromTrustedString("<line id='vertical' class='overlay' x1='100' y1='0' x2='100' y2='" + height + "' style='stroke:rgb(255,0,0);stroke-width:2'/>")); builder.append(SafeHtmlUtils.fromTrustedString("</svg>")); final HTML html = new HTML(builder.toSafeHtml()); html.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { final Element targetElement = Element.as(event.getNativeEvent().getEventTarget()); final Element parentElement = targetElement.getParentElement(); if (!parentElement.getId().isEmpty()) { label.setText(parentElement.getId()); } else { label.setText(targetElement.getId()); } final Element horizontalLine = Document.get().getElementById("horizontal"); final Element verticalLine = Document.get().getElementById("vertical"); final Element svgElement = Document.get().getElementById("ocean"); final int relativeX = event.getRelativeX(svgElement); final int relativeY = event.getRelativeY(svgElement); horizontalLine.setAttribute("y1", String.valueOf(relativeY)); horizontalLine.setAttribute("y2", String.valueOf(relativeY)); horizontalLine.setAttribute("x2", String.valueOf(width)); verticalLine.setAttribute("x1", String.valueOf(relativeX)); verticalLine.setAttribute("x2", String.valueOf(relativeX)); verticalLine.setAttribute("y2", String.valueOf(height)); } }); verticalPanel.add(html); // verticalPanel.add(new HTML(builder.toSafeHtml())); setContent(verticalPanel); } }