Coinidea's Blog

[CesiumJS]Sharing a Chinese Community for Learning CesiumJS

Thu, 28 Jun 2018 07:23:08 +0000

In the timeline of the CesiumJS Chinese community, I wrote:

**June 9, 2021 * QQ Group 807482793, group members reached 3000, daily UV 600+, Cesium Chinese Website Group 2: 811457177

**November 5, 2020 * **QQ Group 807482793, group members exceeded 2000, WeChat group reached 500 members, created WeChat Group 2.

**November 26, 2019 * ** Registered users exceeded 400, QQ Group 807482793, group members exceeded 1000, daily UV 300+

**May 13, 2019 * **WeChat group reached 100 members within 2 hours. To join the group, please add the Cesium Chinese Website personal account:

May 9, 2019 * Registered users exceeded 200, QQ Group 807482793, group members exceeded 450

December 20, 2018 * Registered users exceeded 100, QQ Group 807482793, group members exceeded 170

November 6, 2018 * 65 registered users, QQ Group 807482793, group members exceeded 100

October 10, 2018 * 51 registered users, daily UV exceeded 100 http://blog.coinidea.com/cesiumjs-1332.html

June 22, 2018 * Launched for testing

June 19, 2018 * Acquired the cesiumcn.org domain, also accessible at cesium.coinidea.com

May 6, 2018 * Started secondary development of CesiumJS

April 21, 2015 * Reviewed the C# version of WorldWind code * Implemented a simple data visualization plugin based on the C# WorldWind version

September 1, 2012 * Started working with the C++-based OSSIM source code

April 1, 2009 * Started getting involved in various aspects of web development, from HTML, CSS, JavaScript to JSP, ASP.NET, PHP, jQuery, LAMP, then SSH, ThinkPHP, Yii, LNMP, then SSM, Node.js, VUE… As you can see, I have some experience in web development and have been intermittently exposed to many GIS-related open-source systems. With the frontend, especially Node.js, becoming increasingly mature, and browsers offering better support for HTML5 features, I believe CesiumJS will find broad application in industrial-grade scenarios and most B/S architectures. I have also started using, familiarizing myself with, and learning its related APIs.

As a developer, I’ve always had a certain passion — something beyond profit that is more technology-oriented. So I registered an org domain, http://cesiumcn.org, and created an open-source Web GIS community called Cesium Chinese Website. I hope everyone will support it. You can ask questions in the community or browse this blog.

Converting CDB to 3D Tiles with Cesium

Sat, 13 Feb 2021 16:02:38 +0000

Cesium Chinese website: http://cesiumcn.org/ | China fast access: http://cesium.coinidea.com/

At Cesium, we work every day to advance 3D geospatial technology by expanding the ecosystem around 3D Tiles — the Open Geospatial Consortium (OGC) community standard we created for streaming massive heterogeneous 3D datasets. Today, we are excited to announce that users can now convert OGC CDB datasets to 3D Tiles using the CDB to 3D Tiles pipeline.

CDB is commonly used within the U.S. government for 3D synthetic environment modeling and simulation. It defines a standardized model and structure for storing, updating, and archiving a single “versioned” virtual representation of the Earth. CDB datasets can store natural environments and man-made structures along with their attributes and relationships.

By converting CDB to 3D Tiles, data can be efficiently streamed across all platforms that support 3D Tiles — including ATAK and the upcoming Cesium for Unreal — as well as between online and offline devices, while preserving the precision and detail of the original CDB. The pipeline retains feature attributes, enabling runtime querying, styling, and analysis for deeper insights into the data. All versions of CDB are supported.

To learn more about solutions for federal and defense, drop me a line.

A view of downtown San Diego featuring terrain, imagery, fixed building models, instanced trees, and the Coronado Bridge in the distance, loaded as 3D Tiles in CesiumJS. See the live demo.

Original article: https://cesium.com/blog/2020/11/25/cdb-to-3dtiles/

Author: Brady Moore

Cesium Chinese community QQ group: 807482793

Cesium Chinese website: http://cesiumcn.org/ | China fast access: http://cesium.coinidea.com/

Creating Digital Twins with Cesium ion and Bentley's iModel.js

Sat, 13 Feb 2021 16:01:40 +0000

Cesium Chinese website: http://cesiumcn.org/ | China fast access: http://cesium.coinidea.com/

iTwin Services, Bentley Systems’ platform for building digital twins of infrastructure, now supports loading 3D Tiles from Cesium ion.

The Golden Gate Bridge, tiled into 3D Tiles with Cesium ion, visualized with iModel.js — iTwin’s open-source visualization component.

This makes iTwin the latest platform to integrate with ion, joining a [growing number of places](https://cesium.com/integrations/) where users can combine their own 3D datasets with ion’s global layers, including Cesium OSM Buildings and Cesium World Terrain.

Cesium World Terrain is already the default base layer that engineers rely on when creating Bentley’s ContextCapture digital twins. This latest integration enables massive 3D tilesets from ion to be streamed into iTwins, so engineers can use their preferred tools, backed by ion’s high-resolution geospatial context and 3D tiling capabilities.

You can also follow our tutorial to learn how to build your own digital twin by creating an interactive Cesium-based building project.

Original article: https://cesium.com/blog/2020/11/02/imodeljs-supports-cesium-ion-assets/

Author: Sarah Chow

Comment: Intel, the U.S. federal government… Cesium has been gradually transitioning from an open-source product to an enterprise-grade product.

Cesium Chinese community QQ group: 807482793

Cesium Chinese website: http://cesiumcn.org/ | China fast access: http://cesium.coinidea.com/

Cesium Partners with Intel Geospatial to Provide Enterprise Geospatial Solutions

Sat, 13 Feb 2021 16:00:55 +0000

Cesium Chinese website: http://cesiumcn.org/ | China fast access: http://cesium.coinidea.com/

Cesium is pleased to announce a partnership with Intel Geospatial to provide professional 3D geospatial solutions for enterprise customers across industries.

Intel Geospatial deeply understands the value of AI-powered business insights derived from 3D geospatial data. Cesium is honored to partner with Intel Geospatial to provide best-in-class 3D geospatial technology to the Intel user community.

Intel Geospatial combines data management, visualization, analytics, and Cesium-powered 3D tiling to deliver solutions for use cases in the energy industry such as data transmission and distribution, asset management, and remote safety inspections. The platform is designed to extend the reach of geospatial insights beyond data scientists by creating solutions that are easy for anyone to use.

Identifying vegetation encroachment around power poles using LiDAR point clouds in the Intel Geospatial platform.

With the Intel Geospatial platform, customers can combine multiple datasets — including Cesium World Terrain — with all the flexibility and precision that Cesium provides.

Intel Geospatial builds custom enterprise solutions that allow customers to incorporate all their data into a single visualization scene alongside Cesium World Terrain.

Using Intel Geospatial’s AI algorithms for processing and classifying datasets, along with Cesium’s GPU-accelerated analysis tools for measurement and analysis, customers can analyze individual or combined datasets to gain the insights they need — whether for remote inspection of infrastructure, visual inspection for safety purposes, or managing power lines for better resilience.

Visit Intel Geospatial to learn more about how industry customers are leveraging geospatial technology to maximize the value of their 3D data.

Original article: https://cesium.com/blog/2020/10/27/intel-using-cesium-for-geovisual-solution/

Author: Patrick Cozzi

Comment: Cesium has been focused on enterprise-level solutions, which has led to slightly slower community feature development in 2020. After all, they need to generate revenue to sustain the business.

Cesium Chinese community QQ group: 807482793

Cesium Chinese website: http://cesiumcn.org/ | China fast access: http://cesium.coinidea.com/

Kabul Data Available for Government Users

Sat, 13 Feb 2021 15:59:13 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

We (Cesium) support U.S. federal government employees working from home during the pandemic by providing free access to high-resolution models from around the world through a partnership with Maxar’s Vricon.

Kabul, Afghanistan.

We have now added Kabul’s 3D surface model to nearly 30 areas of interest for U.S. federal government employees. These datasets have been tiled into 3D Tiles so they can be streamed at full resolution, allowing government workers to access them quickly no matter where they work.

If you have a valid .gov or .mil email address, follow this tutorial to access these datasets.

If you’re interested in learning more about how Cesium supports the U.S. federal government, let me know. I’d be happy to talk with you.

Original link: https://cesium.com/blog/2020/10/13/maxar-vricon-kabul-data-in-cesium-ion/

Author: Brady Moore

Comment: Cesium’s government and enterprise outreach is getting better and better.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Reality Capture Adds Built-in Support for Sharing 3D Models via Cesium ion

Sat, 13 Feb 2021 15:58:21 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

RealityCapture has joined the growing list of projects that directly support Cesium ion, alongside nearly a dozen platforms including Safe FME, Blender, and 3ds Max, which have all recently added Cesium ion integration (https://cesium.com/integrations/). With its curated global datasets, secure cloud hosting, and powerful 3D tiling pipelines, ion is the hub connecting data providers and developers with users.

The latest version of RealityCapture (https://www.capturingreality.com/realitycapture-supports-upload-to-cesium) includes integration with Cesium ion, allowing users to share their 3D models on the web with a single click.

It works by uploading the model to your Cesium ion account, where it is converted into 3D Tiles. This allows users to embed photogrammetry models for visualization on the web or on mobile devices, even if they contain millions of triangles, because higher levels of detail are streamed in as you navigate the scene.

Norwich Castle, generated by RealityCapture and visualized with Cesium. Data captured by Jasper Mink, Terradrone Europe.

We are thrilled about this integration because it creates an end-to-end workflow from drone photos to web-based visualization in a geospatial context. The fact that original detail is preserved makes it ideal for visualization, as users can email a link to all parties involved and be confident that the model they see is based on the highest fidelity of the captured data.

If you have RealityCapture files, this tutorial will guide you on how to try this feature with your own models.

Check out our integration guide to learn how to connect your tools with Cesium ion, providing your users with a simple way to share their large 3D models or LiDAR data, or display them in a geospatial context.

With Cesium, you can share photogrammetry models on the web without simplifying them: users can even see the signs on the doors of the Norwich Castle model!

Original link: https://cesium.com/blog/2020/09/18/realitycapture-and-cesium-ion/

Author: Omar Shehata

Comment: Various platforms are racing to add support for Cesium. 3D Tiles is a remarkable model format.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Cesium 2020 Year in Review

Sat, 13 Feb 2021 15:53:23 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

While it had its share of challenges, 2020 was still an incredible year for Cesium, and we are grateful for the progress the team achieved together. Here are some highlights from the year:

– Established a Smart Construction digital twin partnership with market leader Komatsu Construction (https://cesium.com/blog/2020/03/10/smart-construction/).

Cesium CEO Patrick Cozzi speaking at the Las Vegas ConExpo construction equipment exposition in March.

– Announced a partnership with Epic Games to create Cesium for Unreal (https://cesium.com/blog/2020/06/04/cesium-for-unreal-engine/).

– Built Project Anywhere with Epic, Microsoft, and NVIDIA (https://cesium.com/blog/2020/11/30/project-anywhere/) to demonstrate cloud/GPU/simulation gaming capabilities.

– Partnered with the Smithsonian on the Open Access initiative (https://cesium.com/blog/2020/02/28/smithsonian/).

– Established a partnership with Intel Geospatial.

(https://cesium.com/blog/2020/10/27/intel-using-cesium-for-geovisual-solution/)

– Partnered with Bentley Systems for Cesium ion/iTwin integration.

(https://cesium.com/blog/2020/11/02/imodeljs-supports-cesium-ion-assets/)

– Delivered Cesium Stories, Cesium OSM Buildings, and CDB to 3D Tiles.

(https://cesium.com/blog/2020/11/25/cdb-to-3dtiles/)

Cesium OSM Buildings

– Won the PACT Tech Startup Enterprise Award, the Geospatial Startup of the Year Award from Geospatial Media & Communications, and the grand prize at the GEOINT Innovation Tradecraft Competition hosted by the United States Geospatial Intelligence Foundation (USGIF) and the Open Geospatial Consortium (OGC).

(https://cesium.com/blog/2020/08/04/usgif-tradecraft-competition-winners/)

Trophy displayed in the Cesium Demo room.

– Added 17 outstanding employees to the team while continuing to hire and fill open positions as fast as possible.

Wearing masks and maintaining social distance during a team field trip to the New Jersey Battleship.

– We introduced a new home for the Cesium developer community and celebrated a major CesiumJS milestone – 1 million downloads. (https://cesium.com/blog/2020/05/21/one-million-cesiumjs-downloads/)

– NORAD Tracks Santa, powered by Cesium, entertained over 20 million people worldwide for the 8th consecutive year. (https://cesium.com/blog/2020/12/10/cesium-santa-iss/)

Thank you to everyone who supported Cesium this year. Get ready for 2021! We look forward to working with you.

Cheers to 2021!

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Cesium Wins 2020 PACT Tech Startup Enterprise Award

Sat, 13 Feb 2021 15:50:25 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Cesium is the winner of the 2020 PACT Tech Startup Enterprise Award!

The award is presented annually by the Philadelphia Alliance for Capital and Technologies (PACT) to celebrate tech innovation in the Philadelphia region.

As a tech startup, Cesium was recognized for its innovative platform, leadership team, growth potential, and market success.

“A rich history of innovation, a robust technology ecosystem, and a large talent pool make Philadelphia the ideal place for Cesium,” said Cesium CEO Patrick Cozzi in his acceptance speech. “During a West Coast trip for fundraising, I was told that ambitious tech entrepreneurs should move to Silicon Valley. But we have a deep belief in Philadelphia, and we are very proud and grateful to be part of this community.”

This year’s event was held online due to the COVID-19 pandemic. We held a small socially-distanced gathering on the rooftop terrace with team members watching online from home.

Cesium is a proud supporter of PACT, which drives entrepreneurship by connecting growth-stage companies like ours with resources such as mentoring, funding, and talent. We want to thank the organization and award sponsor Troutman Pepper, and congratulate tech startup finalists ForMotiv and ZeroEyes.

Author: Andie Tursi

Original link: https://cesium.com/blog/2020/09/10/cesium-enterprise-award/

Comment: Congratulations to Cesium. Their office is in Philadelphia, not Silicon Valley.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Tracking World Commercial Airlines with Flightradar24's CesiumJS App

Sat, 05 Sep 2020 15:24:34 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Every day, over 100,000 commercial flights transport passengers around the world. At any given moment, you can see the real-time positions of nearly all these flights, not to mention a large number of cargo and private flights, thanks to Flightradar24, a premier flight tracking service.

Flightradar24 provides rich data for plane enthusiasts watching the skies overhead, news media tracking air traffic incidents, and everyday people tracking friends’ and family members’ flights.

Flightradar24’s 3D view is available in both browser and mobile apps and is built with CesiumJS. The application displays real-time flight positions collected from ground and satellite ADS-B transponders, radar, and more.

3D view in Flightradar24.

Aircraft are represented by 3D models, and viewers can navigate with a cockpit view or pan and zoom from outside the aircraft to observe the flight from any angle. When an aircraft is below 500 meters, it also casts a shadow on the terrain below, calculated based on the actual position of the sun at that time.

An aircraft casting a shadow on approach to an airport in the 3D view.

Users can click on a flight to view details such as flight number, speed, destination, altitude, arrival time, and data source. Viewers can see airports and other traffic, and even toggle flight routes.

In addition to the selected flight, users can also see nearby aircraft.

Flightradar24’s real-time data serves critical information to millions of users every month, and Cesium is specifically designed to support that scenario. To get started visualizing your own time-dynamic data with Cesium, follow our simple tutorial to create a drone flight in Cesium Stories.

Original link: https://cesium.com/blog/2020/08/13/flightradar24/

Author: Sarah Chow

Comment: CesiumJS applications are becoming increasingly widespread.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Cesium and Kaarta Visualize Indoor and Underground Environments with High-Resolution LiDAR

Sat, 05 Sep 2020 15:21:33 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Cesium makes it easier for first responders and military operators to quickly assess and understand dense and evolving urban environments.

Cesium supports visualization at any scale, from global down to sub-centimeter. We recently improved support for underground visualization, allowing exploration of underground environments to be seamlessly integrated with above-ground data.

Recently, we put these capabilities to the test in the Dense Urban Online Challenge, organized by the Department of Defense’s National Security Innovation Network (NSIN), aimed at addressing problems faced by first responders and military operators working in high-density cities with complex underground structures.

For this challenge, we partnered with Kaarta to demonstrate how Cesium can power numerous applications to solve these operational problems by bringing all data together and visualizing it, providing decision-makers with the information and insights they need.

A section of New York City’s East Side Access tunnel, captured by Kaarta.

At the hackathon, we demonstrated New York City tunnels collected by Kaarta’s mobile 3D scanners. These point clouds were captured with their handheld device, simply by walking through the tunnel, with laser precision within 3 centimeters. The generated point cloud was tiled and geolocated using Cesium ion.

The value here is that these precise 3D scans can be captured quickly and frequently, so you can have a map that’s always up to date, even for projects under active development, like the East Side Access transit tunnel in New York City. For first responders and military operators, up-to-date maps of these dense environments are critical for decision-making.

Since devices like these make near real-time high-resolution scanning possible, with Cesium you can combine these scans to see how all projects in any given area are developing simultaneously. By combining with other datasets, it’s easy to plan for potential conflicts – for example, by overlaying maps of the sewer system to ensure it doesn’t get too close. With Cesium’s measurement tools, these analyses are simple and comprehensive.

Top: Ground-level view of New York City with tunnel locations marked in red. Bottom: Interior view of the tunnel.

Out of 31 teams that participated in the NSIN Dense Urban Online Challenge, we were one of 5 teams selected for the in-person hackathon. We’re excited to provide a platform that enables others to solve these complex challenges. If you’re doing underground work, or if you’re interested in Cesium for defense, please contact brady@cesium.com.

Original link: https://cesium.com/blog/2020/08/25/national-security-hackathon/

Author: Brady Moore

Comment: Quite impressive.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Cesium Chinese Website -- How to Develop a Map Download Tool [Part 1]

Mon, 27 Jul 2020 00:43:49 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

One of the topics from friends of the Cesium Chinese Website is: independently developing a map (tile) download tool.

This topic will be presented in multiple installments as blog posts [for all users] + videos [for paid users]. The source code will be continuously committed and updated. GitHub address: https://github.com/hujiulin/MapDownloader. The source code is open to all users. If you find it helpful, please give it a star for encouragement.

The mightiest sword has no edge; the greatest skill appears effortless.

The tool will ultimately be presented in C# and JavaScript. Programming languages are just the form – understanding the internal logic and workflow allows you to implement it in Java, Python, PHP, or any other language.

The currently open-sourced tool is very simple (bare-bones), but I will regularly update and maintain the code. If you have any questions, you can submit issues on GitHub, or leave messages and ask questions on the WeChat Official Account: Cesium Chinese Website; QQ Group: 807482793; Forum: http://cesium.coinidea.com/.

Prerequisites

Find a programming language you’re familiar with that supports:

File download over the network.
File I/O, reading and writing local folders and files.
Multithreading.
Desktop windows, preferably with a browser control.

Generally speaking, modern programming languages support most of the above features. This article uses C#. In the middle part of this series, JavaScript will be introduced.

Tile Map Server

This article uses Baidu Maps. Most tile map servers have x, y, z (level) parameters. The Baidu Maps URL pattern is: http://online{0}.map.bdimg.com/onlinelabel/?qt=tile&x={1}&y={2}&z={3}&styles=pl&udt=20200727&scaler=1&p=0

If we set x=1, y=1, z=3, and open the URL in a browser:

http://online0.map.bdimg.com/onlinelabel/?qt=tile&x=1&y=1&z=3&styles=pl&udt=20200727&scaler=1&p=0

Sample tile

Tile Download

Now that we know the tile generation rules, we just need to specify the download URL to download the corresponding image. The core download code in C# is straightforward and can be easily found online:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


 private static WebClient wc = null;
 private static void initWebClientInstance()
 {
 if (null == wc)
 {
 wc = new System.Net.WebClient();
 }
 }
 private static void download(string url, string filename)
 {
 // Check filename exist or not
 if (File.Exists(filename))
 {
 return;
 }

 // Create directory
 string dir = Path.GetDirectoryName(filename);
 if (!Directory.Exists(dir))
 {
 Directory.CreateDirectory(dir);
 }

 initWebClientInstance();
 wc.DownloadFile(url, filename);
 }

Batch Tile Download

Next, we need to:

Generate download URLs in bulk.
Download each tile in a loop.

As mentioned earlier, the core concept of maps is a quadtree, so we can simply assume that the tile map is also composed of a quadtree, with approximately 18 levels (verifiable online). Thus:

level	minX~maxX	minY~maxY
1	1~1	1~1
2	1~2	1~2
3	1~4	1~4
…
n	1~2^(n-1)	1~2^(n-1)

Quadtree

The core batch download code is as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


 public static void downloadBatch(string urlPattern, string targetFoler, int level)
 {
 int maxX = (int)Math.Pow(2, level - 1);
 int maxY = (int)Math.Pow(2, level - 1);
 for (int x = 0; x <= maxX; x++)
 {
 for (int y = 0; y <= maxY; y++)
 {
 string url = String.Format(urlPattern, 1, x, y, level);
 string filename = Path.Combine(targetFoler, level.ToString(), x.ToString()) + "\\" + y.ToString() + ".png";
 download(url, filename);
 }
 }
 }

The above code will work for downloading, but there are many issues. These will be discussed in the next installment.

Current software interface

Download results

Next Steps

The current code only works for small zoom levels. At higher levels, the number of images to download becomes enormous. Multithreading, or even multiple machines, will be needed.
Many of the downloaded images are pure black, which suggests our generation rules need improvement.
The browser control and the software are not yet linked – you can’t select a region in real-time for downloading.
Later, image stitching may be needed.
When loading into specific platforms, coordinate system transformations may be required.
Automatic control of download intervals, dynamic IP switching.

These issues will be discussed in subsequent articles.

Disclaimer

Generally speaking, map servers require significant storage and bandwidth resources. This article discusses the internal principles of current download tools from an academic perspective only. Corrections are welcome.

Again: GitHub address: https://github.com/hujiulin/MapDownloader. The source code is open to all users. If you find it helpful, please give it a star for encouragement.

This article and the software are for academic exchange only. Commercial use is strictly prohibited.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Visualizing Switzerland's Geological Resources with Cesium's Underground Rendering

Tue, 14 Jul 2020 06:43:17 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Camptocamp has added underground visualization capabilities to swisstopo’s digital twin.

Free Public Access to Switzerland’s 3D Map

Based on 3D Tiles, the Swiss Federal Geoportal 3D Viewer provides free access to an interactive nationwide map, including terrain, bridges, buildings, and even trees – over 70 million objects.

Camptocamp has implemented these new features in swissgeol, swisstopo’s web-based 3D geological data viewer.

The swisstopo 3D portal is an interactive map of Switzerland, including both natural and built environments.

While this 3D map is impressive, it didn’t provide a complete picture of the country: groundwater, mineral layers, basements, parking garages, subways, and other underground parts of buildings were all missing.

Looking Underground

The Swiss Federal Office of Topography wanted to show not only what’s above ground in Switzerland, but also what’s below. Therefore, in collaboration with Camptocamp, we added support for underground visualization in CesiumJS 1.70.

Swissgeol brings together a wealth of underground datasets, including boreholes, seismic data, and bedrock maps. These data were previously separate and two-dimensional, but by combining them, swissgeol gives users a more complete view of the subsurface.

Underground boreholes in swissgeol, along with buildings, terrain, and imagery data on the surface.

All this data streams smoothly to the browser thanks to 3D Tiles and Cesium ion’s 3D pipelines. Camptocamp uses FME, geological 3D modeling packages, and Python to preprocess the data.

Users can adjust the transparency of each layer, including the surface imagery, and can also view cross-sections.

Cross-section data with transparent terrain and surface imagery in swissgeol.

Geological Data at Work

The viewer is freely available to the public and will serve many needs in the geological field. Geological engineers will be able to analyze potential projects such as transport tunnels and perform risk analysis for events like rock slides. Decision-makers will have better base data for education or for selecting suitable project sites.

For example, although approximately 75% of Switzerland’s energy currently comes from imported fossil fuels, their new energy policy “Energy Strategy 2050” aims to increase reliance on local shallow geothermal energy.

Geothermal datasets visualized in swissgeol.

Until now, creating a geothermal project proposal required gathering all the different datasets, such as geological maps, boreholes, cross-sections, 3D models, seismic data, and more. Each dataset had to be copied and stored separately, or database connections had to be established using GIS or 3D modeling software. Datasets could only be visualized in 2D or in model-based 3D. Swissgeol greatly simplifies this process by bringing all datasets together in a single portal that can be shared instantly.

Visualization of deep geothermal wells with complex fault patterns and seismic locations.

Future Outlook

Swissgeol is currently in beta. In the future, swisstopo and Camptocamp plan to add features including picking and styling, so that relevant attributes of the data can be queried, filtered, analyzed, and downloaded. Registered users who need additional functionality, including swisstopo’s own users, will also be able to access other features such as uploading/downloading user-generated data and creating closed user groups to share sensitive data with a limited number of users.

If you have underground data, you can visualize it alongside all your other 2D and 3D data by uploading it to Cesium ion.

Author: Sarah Chow

Original link: https://cesium.com/blog/2020/07/06/camptocamp-underground-visualization-with-cesium/

Comment: The underground visualization based on Cesium that everyone has been hoping for is becoming increasingly mature.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Visualizing Underground Utilities, Mines, and Geological Layers with Cesium

Sun, 21 Jun 2020 06:55:52 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

One key improvement introduced in this month’s CesiumJS 1.70 release is underground data visualization. This allows users to seamlessly transition from ground-level features across an entire city to underground features in the same scene, whether it’s utility data like water pipes and cables, or 3D structures like caves and mines.

Visualizing boreholes with different ground materials by depth. Data from the University of Minnesota Borehole Geophysical Database.

Fusing underground data with 3D terrain and other layers in CesiumJS means all relevant information can be visualized in one place without constantly switching between specialized tools. For example, you can visualize earthquakes over time and measure their distance to critical city infrastructure by adding Cesium OSM Buildings to the scene.

Observing earthquakes in the Sawtooth Mountains of central Idaho during April and May 2020. Each sphere contains metadata about the earthquake’s epicenter magnitude and depth, as well as error margins for these measurements.

You can control how underground data is visualized using the CesiumJS API. Below, photogrammetry of a tunnel is visualized. By keeping the ground mostly opaque, we can accurately see which parts are above ground (just the entrance) and how far the structure extends. We can also configure the camera to hide the ground when zoomed in at close range, allowing us to walk through the tunnel unobstructed.

Photogrammetry of old military tunnels at North Head, Auckland, New Zealand. Left: Keeping the ground mostly opaque to see which parts of the model are above ground. Right: Hiding the ground near the camera to allow users to walk inside the tunnel. Screenshots by b_nealie.

Try It Out

Upload your underground data to Cesium ion or check out the following example code to learn how to use underground features in your Cesium app.

Enable globe transparency (https://sandcastle.cesium.com/index.html?src=Globe Translucency.html)
Enable transparency only on a section of the ground (https://sandcastle.cesium.com/index.html?src=Globe Interior.html)
Customize the look of underground scenes (https://sandcastle.cesium.com/index.html?src=Underground Color.html)

If you have any questions or want to share your work, please visit let us know on the forum.

You can also visit Cesium Chinese Website: http://cesium.coinidea.com/

Author: Omar Shehata

Original link: https://cesium.com/blog/2020/06/16/visualizing-underground/

Comment: This is the last of the three major features in Cesium 1.70. A year or two ago, many people were asking how to make the globe transparent or what to do with underground models. Now there are solutions for these.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

CesiumJS Adds Official TypeScript Type Definitions

Sat, 13 Jun 2020 15:37:36 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

With the current 1.70 release, CesiumJS now ships with official TypeScript type definitions!

TypeScript definitions have been a long-requested feature. While the community has done work supporting various manual approaches, the most popular being @types/cesium, the sheer size and evolving nature of the Cesium codebase made manual maintenance an endless task. The official definition file Cesium.d.ts is over 42,000 lines and 1.9MB in size.

Even if you’re not a TypeScript user, this work has improved the correctness and completeness of the CesiumJS API reference documentation and enables better IntelliSense support in IDEs that can apply TypeScript definitions for type inference, making it a huge win for the entire CesiumJS community.

Updating CesiumJS to 1.70 will automatically leverage type checking in TypeScript applications. We use the types field in package.json, which requires no additional configuration in most cases. However, if you import individual Cesium source files directly, you’ll need to add “types”: [“cesium”] to your tsconfig.json to pick up the definitions. If you were previously using @types/cesium, you can remove it.

Official support from the CesiumJS team means the latest and correct definition file will ship with every release. It also means TypeScript support will be officially tracked as part of the CesiumJS GitHub repository. If you find a bug when using CesiumJS with TypeScript, please open an issue or better yet, a pull request to fix it. If you have questions about CesiumJS/TypeScript or need help debugging your project, please ask on the community forum.

If you’re using custom or @types/cesium definitions and aren’t ready to switch, you can delete Source/cesium.d.ts after installation. TypeScript tooling will then fall back to the next set of CesiumJS type definitions it finds.

The official type definition file, Cesium.d.ts, documents over 42,000 lines of declarations and documentation, weighing in at 1.9MB.

Deep Dive

While we’re excited to finally officially support TypeScript, it took some effort to get here. Initially, we explored 3 options:

Manually Maintaining the Definition File

We could manually manage and maintain our own TypeScript definition file as part of the CesiumJS codebase, most likely with a separate definition file for each JavaScript file, making it easier to manage – for example, Cartesian3.js would have a corresponding Cartesian3.d.ts. This would be technically easy to implement, but would cause significant harm in terms of file synchronization and maintainability.

Additionally, we didn’t want to include only declaration interfaces without inline documentation, so users could take full advantage of IntelliSense. This was our last resort, but if it turned out to be the only viable option, it would be our final choice.

Porting CesiumJS to TypeScript

You may be surprised to hear that we actually evaluated rewriting all of CesiumJS in TypeScript. For TypeScript developers, this would be a huge improvement, and for CesiumJS maintainers and the codebase, it would be a real win. Beyond strong type checking, it would allow us to quickly adopt modern conventions like template literals, arrow functions, and async/await, which we currently don’t allow in the CesiumJS codebase due to compatibility and tooling reasons.

Unfortunately, the level of effort and volume of work required made it an unattractive option in the short term. This option is still on the table, but like the large-scale ES6 migration we did last year, it would require significant careful planning, research, and infrastructure work to execute properly.

Generating Definition Files with the TypeScript Compiler

Starting with TypeScript 3.7, the compiler can compile JavaScript code with JSDoc annotations and generate corresponding type definition files for us. This approach completely eliminates the need for manual .d.ts file maintenance and has the additional benefit of validating and improving our own JSDoc annotations, since they need to be accurate to generate correct type definitions. Needless to say, this option was very attractive to us, and we decided to pursue it after some preliminary prototyping experiments showed it could work.

In practice, we spent several weeks working through this approach. Marco Hutter was heavily involved in documentation fixes and source code adjustments to make the compiler happy. Early work was promising. As expected, it exposed errors and inconsistencies in JSDoc annotations and, to a lesser extent, in the CesiumJS API that we fixed. Unfortunately, we soon hit a wall.

Relying on the TypeScript compiler meant we lacked options when it did something incorrect or unexpected. While the compiler uses JSDoc annotations in some cases, in many cases it relies on its own type inference and provides no way for us to override it. It also completely ignores much of the JSDoc, such as on object-defined properties, and exposes all private underscore variables as part of the definitions. This led us to bend the CesiumJS codebase in ways we were uncomfortable with, just to make the TypeScript compiler happy. We considered trying to modify the TypeScript compiler itself, but we would have had to dive deep into the compiler code, and we weren’t sure what the maintainers would accept or how long the process would take. Ultimately, our favorite solution became a drawn-out gamble, and we lost confidence in the approach.

Left: JSDoc for UrlTemplateImageryProvider that unexpectedly adds properties to BingMapsImageryProvider; Right: The generated BingMapsImageryProvider definition with duplicate definitions, causing compilation failure.

Back to the Drawing Board

As it turned out, we were so excited about TypeScript’s official JSDoc support that we completely overlooked a similar option: tsd-jsdoc. tsd-jsdoc is a JSDoc plugin that generates TypeScript definitions from JSDoc output. This makes it very similar to the TypeScript compiler approach, but provides much more flexibility over the generated type definitions.

tsd-jsdoc doesn’t directly parse JavaScript but instead relies on the abstract syntax tree (AST) generated by JSDoc. This means it’s not affected by type inference issues or lack of JSDoc completeness that nearly derailed the TypeScript compiler approach. If we can express a type using JSDoc annotations, then it appears in the type definition file as we want it.

We had already learned a lot from our earlier TypeScript compiler approach failures, so we were able to complete a feasibility evaluation quite quickly, and all the issues with our existing incorrect JSDoc still applied. Things progressed faster than we expected, and we knew we had found the solution.

As developers, sometimes we get so focused on a particular technology that we overlook other options. In this case, community member @bampakoa had even submitted pull requests to both CesiumJS and tsd-jsdoc last year to make them more compatible. We already knew tsd-jsdoc existed, but we had overlooked it in our initial evaluation because we assumed the TypeScript compiler option would be better, and we inadvertently developed a blind spot for tsd-jsdoc.

Post-Processing and Validation

While the tsd-jsdoc output is fairly high quality out of the box, we did some additional post-processing to further improve it. This includes simple string manipulation, regex find-and-replace, and even using the TypeScript compiler to rewrite parts of the file. All of this happens as part of the new build-ts gulp task. If you’re curious, you can check out the code. The final result is a single Cesium.d.ts that serves as the entry point for the generated Cesium.js module.

In addition to generating the output, the build-ts task also validates the file by compiling it with TypeScript. If a developer makes a mistake in JSDoc, such as misspelling a class name or referencing a private or non-existent type, the build process will fail. While this validation process is very useful, it only catches certain types of errors. For example, if someone implements a new ImageryProvider that doesn’t conform to the correct interface, the definition file will compile without errors, but TypeScript will emit a compilation error in applications that try to use the new class as an ImageryProvider.

We’re still exploring ideas for adding additional validation, such as writing some unit tests in TypeScript to identify potential problem areas during development.

JSDoc Errors

I’ve mentioned several times that a particularly exciting aspect of the JSDoc-based approach is that it adds another level of inspection and validation to our documentation, benefiting everyone, not just TypeScript developers. A major part of our documentation review process is now automated. The issues we found in the codebase can be categorized as follows:

Incorrect or incomplete types - In many cases, we used informal or incorrect names for types, for example, Image instead of HTMLImageElement, Canvas instead of HTMLCanvasElement. An interesting example is TypedArray, which doesn’t even exist at the specification level but is a common term for the full list of types like Int8Array, Float32Array, etc. We also had incomplete generics, such as Promise instead of Promise.
@exports - We used JSDoc’s @exports tag as a final fallback. If a developer couldn’t get something to show up in the generated HTML, they might add @exports, which would “just work.” We used @exports for enums, namespaces, and functions instead of the @enum, @namespace, and @function tags. This led to incorrect type generation. In practice, we don’t need @exports anywhere in the code.
Private type leaks - Many private types were referenced in the public API. These private types don’t exist in the HTML output and are just silent failures for our documentation build step. In most cases, it made sense to simply make the private types public. Thankfully, we also have a habit of documenting private types in CesiumJS, so we didn’t have to write new JSDoc.
Copy-paste errors - The last category of JSDoc errors was duplicate parameter entries related to copy-and-paste, such as having ImageryProvider A declare that it’s documenting properties on ImageryProvider B, etc.

Next Steps

Once the community starts using these definitions, we expect some minor issues to surface over the next few CesiumJS releases. We’ve also started developing a list of ideas we want to explore, such as leveraging generics for the property interfaces used by the Entity API. Ultimately, we rely on the community to tell us what matters most to developers so we can shape our CesiumJS TypeScript roadmap.

We also want to figure out a way to use the TypeScript definitions within the CesiumJS codebase itself. We believe VSCode has some mechanisms for this, but we haven’t explored them yet. If this proves feasible, it would be a major win and would enable another level of validation through plain JavaScript, not to mention making developing CesiumJS an even better experience than it already is.

I’m sure many people perked up when I mentioned that we evaluated rewriting CesiumJS in TypeScript. I’m absolutely in favor of this in the long run. As part of the evaluation process, I actually used the TypeScript compiler to build the existing JavaScript codebase and even ported some basic files (like Cartesian3.js) to TypeScript to understand how to do TS/JS hybrid development, rather than an “all-at-once” migration strategy. Much like ES6, porting the code is the easy part. Expect a GitHub issue soon that will break down everything that needs to happen to make a TypeScript version of CesiumJS a reality; but there are no commitments yet.

Acknowledgements

I just want to thank the community once again for helping generate ideas and discussions about TypeScript over the past few years. Special thanks to @thw0rted, who was the first external contributor to improve the initial TypeScript type definitions and provided a lot of great feedback in the original pull request. Finally, a huge thanks to my partner and co-maintainer Kevin Ring, who not only provided extensive expert knowledge and feedback but also dove into the work himself, ultimately making a series of improvements to the code.

Author: Matthew Amato

Original link: https://cesium.com/blog/2020/06/01/cesiumjs-tsd/

Comment: The introduction of TypeScript makes CesiumJS a more professional library and easier to maintain. Of course, the migration process is painful.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Cesium 1.70 - Introducing Cesium OSM Buildings New Features

Sat, 13 Jun 2020 14:11:38 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

We are excited to announce Cesium OSM Buildings, a global 3D building layer covering the entire world, based on OpenStreetMap building data. This is the latest addition to Cesium’s global base layer suite, which includes global terrain maps, aerial imagery, and street maps already available on Cesium ion.

New York City, Seattle, Washington D.C., and the Burj Khalifa in Dubai shown in Cesium OSM Buildings.

Take a tour in Cesium Stories - Take a tour in Cesium Stories

Cesium OSM Buildings is a great foundation on which to overlay high-resolution data for urban environments and more immersive experiences. Crowd-sourced and regularly updated, this base layer data will serve endless use cases: from cities that need shareable 3D solutions for urban planning, tax assessment, or traffic management, to developers who want to visualize BIM models in the real world, to government agencies that need innovative tools for training and simulation.

Cesium OSM Buildings is included in every Cesium ion subscription starting today and is included by default in any newly created Cesium layer. You can also add it to your CesiumJS application with a few lines of code:

var viewer = new Cesium.Viewer('cesiumContainer');
viewer.scene.primitives.add(Cesium.createOsmBuildings());

Cesium OSM Buildings consists of over 350 million buildings. While the full dataset is hundreds of gigabytes in size, it can be efficiently streamed and visualized on the web through the magic of 3D Tiles. 3D Tiles is an open standard, so Cesium OSM Buildings can be used in any compatible viewer, not just open-source Cesium.

OpenStreetMap provides rich metadata in most cities, such as building names, addresses, and opening hours.

Cesium OSM Buildings sits solidly on Cesium World Terrain with clean edge outlines, and each building is individually selectable and stylable. In most cities, the rich metadata associated with each building, and even individual parts of buildings, can be used with dynamic styling. For example, we can highlight all commercial and residential buildings to see patterns across different neighborhoods in a city.

Highlighting all office and commercial buildings in green using Cesium Stories.

Cesium OSM Buildings is derived from the well-known community-driven mapping project OpenStreetMap. This means anyone can improve the dataset! If you’ve ever contributed, heartfelt thanks!

Please try out the data and let us know what you think. We look forward to your buildings!

Author: Kevin Ring Original link: https://cesium.com/blog/2020/06/01/cesium-osm-buildings/ Comment: Quite powerful, let’s get started. But it requires an internet connection.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Announcing Partnership with Epic Games to Create Cesium for Unreal Engine

Sun, 07 Jun 2020 05:27:05 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Nothing better demonstrates Cesium’s belief in combining geospatial and 3D computer graphics than the support of Epic Games and the Epic MegaGrants program to build Cesium for Unreal Engine.

This marks the first time a full-scale, high-precision 3D digital globe has been brought into a leading game engine, opening up a world of possibilities for Unreal users. Together, we will advance training and simulation, architecture, gaming, AR/VR, autonomous driving, and other industries by bringing 3D Tiles into the Unreal world to accurately visualize real-world locations captured by satellites and drones – using the same 3D geospatial knowledge that CesiumJS has employed for nearly a decade.

High-resolution photogrammetry 3D Tileset captured by drone at AGI headquarters, where Cesium was incubated.

“Our vision is to allow the simulation community to integrate Unreal Engine into their software architecture without having to change the way they work. Defining this 3D Tiles plugin with the Cesium team is a very exciting experience because it will allow the GeoInt community to streamline their pipelines. This activity is very much in line with our vision for big open worlds for all Unreal Engine users.” – Sebastien Loze, Simulation Industry Manager at Epic Games

When I started graphics programming in 1994, Epic, or Epic Megames as they were known then, was an inspiration. The graphics and gameplay of the DOS games they released were light years ahead of anything I had seen.

Today, Epic’s visual quality continues to inspire, especially with the announced Unreal Engine 5 approaching cinematic CG quality, with the Nanite virtualized micro-polygon pipeline and the Lumen dynamic global illumination engine. Combining Unreal’s strengths with Cesium’s advantages in global scale, precision, performance, and interoperability is a rare opportunity to advance 3D geospatial.

Our focus is on growing the 3D geospatial ecosystem using the 3D Tiles format: an OGC Community Standard for efficiently streaming massive heterogeneous real-world 3D datasets for visualization and analysis.

3D Tiles are widely used by government and commercial entities for global-scale terrain, city-wide photogrammetry, and massive point clouds from LiDAR. 3D Tiles support streaming of massive geometry and textures, as well as semantics computed by AI algorithms for runtime filtering, styling, and analysis. For example, point classification in point clouds can be used to filter foliage, or material properties on the sides of buildings in photogrammetry models can be used for communication networks, where RF propagation considers concrete or glass.

Cesium for Unreal will be open source and free on the Unreal Marketplace.

Cesium for Unreal will connect to the Cesium ion SaaS platform by default, providing ready-to-use 3D Tiles for terrain and 3D buildings, as well as first-class content pipelines for generating efficient 3D Tiles from source data such as terrain, imagery, and photogrammetry models. Cesium for Unreal will also be able to stream 3D Tiles with Cesium ion on internal private networks.

Stay tuned as we make progress. Feel free to reach out to discuss collaboration or share your Cesium for Unreal use cases.

Author: Patrick Cozzi Original link: https://cesium.com/blog/2020/06/04/cesium-for-unreal-engine/ Comment: Epic, Unreal Engine – gamers should all know about these. Cesium’s momentum is truly impressive.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Underground, TypeScript, and Global 3D Buildings Released in CesiumJS 1.70

Sun, 07 Jun 2020 04:40:14 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

On June 1, 2020, CesiumJS released version 1.70, bringing 3 major updates.

Cesium OSM Buildings

Cesium OSM Buildings is a global 3D building layer covering the entire world, built using OpenStreetMap data. It’s available as a 3D Tileset for all Cesium ion users and comes with rich feature data such as building names, addresses, opening hours, and more.

New York City, Seattle, Washington D.C., and the Burj Khalifa in Dubai shown in Cesium OSM Buildings.

Read more about this new global layer and how to use it in your applications.

Underground Support

Cesium now has better support for visualizing underground scenes, from large geological layers underground to mines, caves, and utilities. CesiumJS 1.70 adds the ability to make the globe translucent, enabling data visualization underground and allowing the camera to freely move below the surface.

Making the ground translucent to see underground objects. Explore this example in Sandcastle (https://sandcastle.cesium.com/index.html?src=Globe Translucency.html). This is a Parc lead mine in North Wales by Dr. Edward Allen Sherlock Hart.

These CesiumJS improvements are part of a collaboration with friends at Camptocamp. Their work supports the Swiss Federal Office of Topography (swisstopo), which is using Cesium to create an interactive 3D map of the country.

Camptocamp is using these new underground features in swissgeol, a 3D web-based geological data viewer. Its goal is to visualize many different datasets in a single scene, such as boreholes, seismic data, and the ability to view ground cross-sections. Camptocamp said about this new Cesium-based viewer:

The 3D underground viewer swissgeol will be the main entry point for swisstopo to access geological data in the future, and it could become an essential collaboration tool for the entire earth science community in Switzerland and surrounding areas.

Visualizing bedrock beneath the terrain in Camptocamp’s 3D underground viewer.

These live code examples show how to use the new globe transparency features:

How to enable globe transparency (https://sandcastle.cesium.com/index.html?src=Globe Translucency.html&label=New in 1.69)
Enable transparency only on a section of the ground (https://sandcastle.cesium.com/index.html?src=Globe Interior.html)
Customize what’s visible underground (https://sandcastle.cesium.com/index.html?src=Underground Color.html&label=New in 1.69)

TypeScript

Finally, in version 1.70, CesiumJS now ships with official TypeScript type definitions! The latest and correct definition file will be released with each new version, and TypeScript support will be officially tracked as part of the CesiumJS GitHub repository.

Even if you’re not a TypeScript user, the nature of this work has improved the correctness and completeness of the CesiumJS API reference documentation, making it a big win for the entire CesiumJS community.

Read more about how this works and the effort involved in Matt’s deep architectural dive.

Try CesiumJS 1.70

Update to the latest CesiumJS and let us know what you think! You can post any feedback and questions about this release in this forum thread | Cesium Chinese Community: http://cesium.coinidea.com/.

Download link:

Author: Omar Shehata

Original link: https://cesium.com/blog/2020/06/01/cesium-june-release/

Comment: TypeScript makes the framework more robust and professional. Cesium OSM is indeed great, but it requires Cesium ion, showing Cesium’s determination to promote Cesium ion.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

CesiumJS Downloads Surpass 1 Million

Sun, 07 Jun 2020 02:55:12 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

CesiumJS total downloads have surpassed 1 million. This milestone means a lot to us (Cesium) and the CesiumJS community.

Since CesiumJS was released as an open-source project in April 2012, it has been downloaded over 1 million times.

1 Million Downloads Is the Result of 200+ Contributors Working Together

Since Cesium was released as an open-source project in April 2012, over 200 developers have contributed to the project. We appreciate everything the community has done, from features to bug fixes to documentation. Want to join the contributor community? Try one of the “beginner” issues.

Cesium contributors. The average number of commits among the top 10 contributors is 1,618, shown in larger size.

1 Million Downloads Means Thousands of 3D Geospatial Applications

The CesiumJS developer community has built thousands of applications with CesiumJS across dozens of industries, from drones to history to extreme sports. They’ve visualized commercial real estate spaces, major hurricanes, yacht races, and Mars rover expeditions.

1 Million Downloads Means Millions of Lines of Code

CesiumJS is one of the most comprehensive JavaScript libraries, providing an interactive 3D digital globe, star map, terrain, imagery, dynamic lighting, and an interactive timeline. Since CesiumJS development began, we’ve released updates and improvements every month, cumulatively adding over 9 million lines of code and removing over 7 million as we continue to improve the efficiency of streaming massive data online.

Mount Everest in Cesium, 2013

Mount Everest in Cesium, 2020

1 Million Downloads Is Just the Beginning

Cesium originated from the work of a few engineers at Analytical Graphics, Inc. Last year, we incorporated as our own company and spun off with an open-core business model, ensuring the long-term sustainability of CesiumJS.

Cesium developers, 2013. From left to right: Hannah Pinkos, Dan Bagnell, Patrick Cozzi, Matt Amato, and Scott Hunter.

Working on Cesium in February 2014. When a power outage at the office threatened development velocity, the team headed to Kevin Ring’s basement to work on Cesium using generator power. Around the table, from left to right: Greg Beatty, Scott Hunter, The Captain, Patrick Cozzi, Richard Page, Matt Amato**

Cesium Team, 2020… and growing

We couldn’t have done it without you. Thank you for using and sharing CesiumJS, for participating in our forum, for sharing your work with us, and for the incredible applications you’ve built. We look forward to many more!

Cesium keeps getting better

Author: Sarah Chow Original link: https://cesium.com/blog/2020/05/21/one-million-cesiumjs-downloads/ Comment: Cesium keeps getting better. A rising star.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Cesium Official English Forum

Sun, 17 May 2020 13:48:11 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Cesium has just completed migrating their Google Groups forum to Discourse, a modern open-source platform for online communities. This is the biggest update to the Cesium community forum since its inception. The forum brings together nearly a decade of GIS-related wisdom, from basic troubleshooting to discussions about the best ways to visualize the world, with over 30,000 posts.

Most people come to the Cesium community with real-world data they want to understand. Often this is their first foray into 3D mapping. Like many others, they learn through searching the forum why precision matters in many applications, or what happens when the curvature of the earth is not taken into account.

If you’ve ever asked a question on the Cesium forum, I want to thank you for contributing to this unique archive of computer graphics and geospatial knowledge!

The homepage of the new Cesium official English forum with new discussion categories.

Cesium has adopted Discourse to make discovering and sharing knowledge about Cesium and 3D geospatial easier. Using Discourse brings better search and formatting tools, better layout especially on mobile devices, faster page loading, and many new features.

Everything about the new forum is customizable, so we hope it will evolve alongside our growing community. For example, we just enabled embedding Cesium Stories directly in forum posts:

You can now embed Cesium Stories directly in forum posts! Above is a virtual tour of Denver created for the American Association of Geographers conference.

Browse the forum and let us know what you think about the forum. If you’ve previously posted on the old forum, see these instructions for how to reclaim your account on the new forum.

The new forum not only makes it easier for users to find the answers they need, but is a collaborative space where users can share their work with the broader Cesium ecosystem. See you there!

Visit: community.cesium.com

Author: Omar Shehata

Original link: https://cesium.com/blog/2020/05/04/new-community-forum/

Comment: This is the official English forum for Cesium. You can search for answers and ask questions there.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

i-Urban Renovation Visualizes Building Status in Munakata, Tottori Prefecture Using 3D Tiles

Thu, 23 Apr 2020 08:00:16 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Munakata City in Japan’s Tottori Prefecture uses the i-Urban Renovation application built on Cesium to help residents access building data online.

Munakata City, Japan

Local governments across Japan collect data about buildings, including their use, number of floors, construction materials, and year of construction. Munakata City, located in the northern part of Fukuoka Prefecture, tasked their Urban Structure Visualization Promotion Organization to make this data available to the public in an easy-to-understand format.

Distribution of buildings in Munakata City. Building counts are aggregated into an area grid (1km grid) and displayed as a 3D mesh chart using mesh codes shown in Cesium. Since the grid is linked to location information and building counts, it’s a convenient demonstration tool when explaining local characteristics to residents.

The i-Urban Renovation app is built on CesiumJS for visualizing and sharing data. Even though Munakata City covers approximately 120 square kilometers filled with various buildings, the app efficiently streams building data using 3D Tiles.

Classifying buildings by use and comparing land use requirements. Users can also achieve similar functionality using Cesium Stories, which supports 3D Tiles styling.

Using the Cesium app, users can see the current status of any building. Buildings can be color-coded based on various metrics, including:

Use, such as residential, commercial, government, agricultural, etc.
Number of floors, making it easy to distinguish the distribution of high-rise and low-rise buildings.
Construction materials, such as wood or reinforced concrete.
Year of construction, showing the distribution of new and old buildings.

Additionally, users can examine the relationship between building use and land use regulations by combining the building dataset with the land use zoning dataset. When a user clicks on a building, detailed building attributes are displayed.

Viewing building usage. Click on individual buildings to see detailed data. We recently added feature picking to Cesium Stories to build your own solutions using Cesium Stories.

Visit i-Urban Renovation or the data encoding specification, or upload your own data to Cesium ion to easily generate your own Cesium Stream 3D Tiles.

Author: Sarah Chow

Original link: https://cesium.com/blog/2020/03/31/i-urban-renovation-visualizes-munakata/

Comment: Although this is still encouraging everyone to use Cesium ion, we can see that Cesium performs well in large-scale scenarios.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Bringing 3D Tiles and Bing Imagery from Cesium ion to osgEarth

Sun, 19 Apr 2020 14:44:51 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Pelican Mapping is excited to announce support for loading 3D Tiles and Bing imagery from Cesium ion into their osgEarth digital earth rendering toolkit.

Adding 3D Tiles Support

osgEarth rendering data from Cesium ion for Melbourne, Australia

Over the past year, we’ve been developing support for 3D Tiles in osgEarth, and it has proven to be an exciting and efficient runtime format. We first developed a glTF reader/writer for OpenSceneGraph based on TinyGLTF. Building on top of that, we built a 3D Tiles Layer plugin for osgEarth to handle streaming tiles. osgEarth uses the same screen space error metric that Cesium uses to decide when to load and display tiles, so the 3D Tiles layer should look the same in osgEarth as it does in Cesium. After developing the 3D Tiles loader, we were able to quickly add support for Cesium ion by adding authorization-based ion tokens to the 3D Tiles layer.

Bing Maps

osgEarth rendering Bing imagery with labels via Cesium ion

We also added support for Bing Maps from Cesium ion to osgEarth. osgEarth already had a Bing imagery driver, so we used Cesium ion’s API to get the Bing key and map style, and then created an osgEarth Bing imagery layer on top of the driver, with credentials provided by Cesium ion. We hope to add support for more external imagery types in the future.

Putting It All Together

Here is an example Earth file showing how to load content from Cesium ion into osgEarth.

<map name="Cesium ion">
<CesiumIonImage name="Bing Maps Aerial With Labels">
<asset_id>3</asset_id>
</CesiumIonImage>
<CesiumIon3DTiles name="Melbourne">
<asset_id>69380</asset_id>
</CesiumIon3DTiles>
</map>

You can set the Cesium ion token as an environment variable, then load the earth file using any osgEarth-based application.

export OSGEARTH_CESIUMION_KEY=YOUR_API_KEY
osgearth_viewer cesiumion.earth

Author: Jason Beverage

Original link: https://cesium.com/blog/2020/04/02/osgearth-supports-cesium-ion-assets/

Comment: osgEarth announces support for Cesium ion.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Creating 3D Tiles from KML/COLLADA with Per-Building Data

Fri, 10 Apr 2020 07:13:20 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Many Cesium users frequently need to visualize hundreds of thousands of 3D buildings across entire cities for real estate, urban planning, or civil engineering projects. To make it easier to create useful digital twins for these industries, we just added support for embedding feature data when uploading KML/COLLADA to Cesium ion.

This means you can now export your 3D buildings from modeling tools (such as CityEngine, Rhino, and 3DCityDB) and include per-building attributes when sharing data on the Cesium ion web.

Philadelphia 3D buildings combined with Cesium World Terrain. Each building can be clicked to display its name, address, and parcel number.

Cesium ion converts your buildings into 3D Tiles to optimize them for the web, while still allowing you to inspect each individual building. The source 3D data for the above example comes from Pennsylvania Spatial Data Access, with addresses, names, parcel numbers, and city-owned attributes from Open Data Philly.

To dive deeper into this visualization, we can use 3D Tiles Styling to highlight all properties owned by the City of Philadelphia and click on them to get their parcel numbers. The parcel number can then be used to look up more information about each building from the city database.

You can use 3D Tiles Styling to highlight all city-owned buildings in Philadelphia, such as museums and historic sites.

To create such a scene for a city, the source data should be one or more KML files that define the location of each 3D model. Here is a snippet from the KML file for Philadelphia buildings.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<Placemark>
 <name>Independence Hall</name>
 <Model>
 <Link><href>building.dae</href></Link>
 <!-- Model properties like longitude, latitude, etc... -->
 </Model>
 <ExtendedData>
 <Data name="Address">
 <value>500-36 CHESTNUT ST</value>
 </Data>
 <Data name="Parcel_ID">
 <value>313762</value>
 </Data>
 <Data name="Is_City_Owned">
 <value>True</value>
 </Data>
 </ExtendedData>
</Placemark>

The Placemark name is used as the building name. Any additional data can be added to the tag.

Once you upload your buildings to Cesium ion, you can style and inspect them with Cesium Stories. You can also combine them with other types of content such as CityGML or point clouds, which can also have embedded feature data.

Try creating a Cesium ion account and uploading your 3D buildings.

Author: Omar Shehata

Original link: https://cesium.com/blog/2020/04/09/kml-collada-metadata/

Comment: Cesium is relentlessly promoting Cesium ion and Cesium Stories. You might want to check them out, though personally I’m not a big advocate of online solutions since most people prefer offline setups. Data security is also increasingly important.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Using Cesium Tools for Better Construction Management

Thu, 02 Apr 2020 08:41:50 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Cesium technology is revolutionizing the construction industry. The Smart Construction dashboard we developed in partnership with Komatsu enables us to visualize, measure, and analyze construction site progress faster than ever before. Here’s how it works.

Aggregating Different Datasets to Assess Progress

To keep track, site managers must constantly compare the plans provided in CAD designs with what’s actually happening on site, which is captured by data from traditional surveys, drone surveys, and smart construction vehicles (including as-built data and vehicle telemetry).

The Cesium Tools application combines design models with time-stamped real-world data for measurement and progress tracking. Cesium takes these data sources as input, fuses them together to create an up-to-date 3D representation of the work site, and processes them into 3D Tiles so they can be easily shared and streamed.

A DSM and orthoimagery converted into 3D Tiles, overlaid with vector data from line files created in CAD software packages.

Collecting Data

Building the smart construction application requires us to be ready to receive various data types, collected in different ways and at different levels of completeness.

Traditional Surveys

The traditional method of surveying a site uses a probe vehicle to take GPS measurements at a grid of positions across the work site. Collecting data this way takes a day or more, and the collected data is relatively sparse. This data can be compiled into 3D meshes in LandXML, DXF, or other triangle mesh formats.

Drone Surveys

Surveys can also be conducted by drones or UAVs. About once a week, for up to a day at a time, a drone flies over the site taking photos at multiple locations across the work site. Photogrammetry software converts these photos into an overall 3D model of the terrain. Common outputs include point clouds, DTM/DSM terrain data, and orthoimagery.

A point cloud of a construction site in Osaka, Japan, collected by drone, converted into a mesh, and tiled into 3D Tiles by Cesium ion.

Drone surveys are much faster than traditional surveys. For a company in the UK, adopting drone-based data collection combined with Cesium’s 3D tiling capabilities reduced the time from collection to visualization from 3 days to 30 minutes. The measurement results from each method had less than 2% error.

Smart Construction Vehicles

One of the latest trends in construction is machine tracking, either by embedding GPS sensors in construction equipment or attaching aftermarket sensors to them. These sensors track each machine as it moves around the site, providing “as-built” partial terrain data that, when merged with the existing ground, can provide a near real-time picture of the site terrain, typically collected on an hourly basis.

The yellow areas show recent “as-built” data collected from sensor-equipped construction machines, merged with an earlier drone survey of the entire site. Cesium lets you combine and visualize different surfaces at any point in time.

Beyond Visualization

While being able to see what’s happening is valuable, the real value of the Cesium Tools application lies in its analytics capabilities.

A cut-and-fill analysis highlighted with a heatmap, showing how much earthwork needs to be moved and how much has already been moved.

For example, if a project manager needs to send results to a client for billing, they can understand the total percentage of earthwork that has been moved, as well as areas that still need work. Determining the amount of material remaining in inventory is as simple as clicking to create a measurement: the program calculates the volume, weight, and value of the material.

Measuring inventory.

Project managers can also preview routes before traveling by clicking a path and inspecting the slope (as a heatmap or a profile using the 2D cross-section tool).

Terrain slope heatmap.

This is just an overview of the many capabilities powered by Cesium in the Smart Construction app. Visit our construction industry page to watch the video and learn more.

Original link: https://cesium.com/blog/2020/03/30/construction-with-cesium/

Author: Gabby Getz

Comment: The tools and capabilities provided by the Cesium team are increasingly powerful and impressive.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Inspecting Features in 3D Tilesets with Cesium Stories

Fri, 27 Mar 2020 14:50:31 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

We created 3D Tiles to stream, visualize, and analyze massive 3D content, such as entire cities or complex building models. With the latest update to Cesium Stories, we can now inspect feature data in 3D Tiles by clicking.

Now you can click on any 3D Tiles feature in Cesium Stories, such as the New York City tileset, to inspect its data.

Suppose you want to learn about the distribution of medical facilities in New York City. You can use using styling to highlight all buildings in the 3D Tileset, then click to view facility capacity, whether there are emergencies, and their official websites and contact numbers.

You can also share your Cesium Story so other users can inspect it in the same way, whether they are doing a thorough analysis in the office or out in the field. On mobile devices, the info box can be collapsed or expanded to easily switch between the full 3D scene view and feature data.

Cesium Stories works in any modern web browser. On mobile devices, you can collapse or expand the info box to easily switch between the full 3D scene view and feature data.

Feature picking in Cesium Stories works on any 3D Tileset with feature data and is not limited by the physical size of features, making it ideal for industries like BIM/CAD where you need to inspect everything from large pipes down to the smallest valves or screws.

Feature picking in Cesium Stories works on any 3D Tileset with feature data, such as pipes and valves in a power plant BIM model.

Feature picking also works with vector data, such as GeoJSON, KML, and CZML. Vector layers provide a simple way to add or update feature data, even if the 3D Tileset itself doesn’t contain any defined features.

In the example below, we took a Vricon photogrammetry tileset of Washington, D.C. from the Cesium Ion Asset repository that has no feature data, and combined it with building energy usage CZML from the Washington, D.C. Open Data platform.

Combining energy usage CZML with Washington, D.C. photogrammetry allows us to click on any building to view its energy score. The CZML is customizable and can include building images.

Users can click on any building to view its name, annual energy consumption, and Energy Star score. KML and CZML support HTML descriptions, so you can add images, links, or customize the styling.

We’re excited to see what you’ll build with it. Learn how to use picking and styling in the Cesium Stories styling tutorial.

Original link: https://cesium.com/blog/2020/03/25/explore-data-with-picking/

Author: Omar Shehata

Comment: Cesium Stories is powerful and well worth trying.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Visualizing Time-Series Data with Cesium Stories

Mon, 23 Mar 2020 09:07:26 +0000

Cesium Chinese Website: http://cesiumcn.org/ | Fast Domestic Access: http://cesium.coinidea.com/

Cesium can be used to visualize data that changes over time, whether it’s geological changes spanning hundreds of years or satellite orbits that need to be tracked down to fractions of a second. As part of the official launch of Cesium Stories, we are pleased to announce improved support for time-dynamic data, so you can drag and drop dynamic KML or CZML to create interactive stories that visualize changing data.

This is a great way to review collected drone flight and telemetry data over time, as you can see the drone’s path – across the entire world.

With Cesium Stories, we can review drone flight data alongside the surrounding landscape and view collected time-series telemetry data.

Alternatively, if you perform offline analysis in tools like STK, you can export your work as CZML and easily share it with a link.

Satellite coverage calculated by STK (System Tool Kit) and exported to Cesium Stories as a CZML file.

Time-dynamic data doesn’t have to be objects moving over time. Our users have also plotted housing prices, disease outbreaks, and changing terrain maps.

Cesium Stories also supports dynamic KML files. This image shows the annual ice surface melt in Greenland from 1979 to 2007. Data from the National Snow and Ice Data Center.

Cesium Stories makes it easy to view and share your time-dynamic data, giving you control over playback speed and camera movement. Try it out with our new time-dynamic data tutorial. Or see what else you can do with Stories.

Original link: https://cesium.com/blog/2020/03/04/time-dynamic-stories/

Author: Omar Shehata

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | Fast Domestic Access: http://cesium.coinidea.com/

Learning 3D Tiles with 3D Tiles Overview

Sat, 21 Mar 2020 07:38:56 +0000

Cesium Chinese Website: http://cesiumcn.org/ | Fast Domestic Access: http://cesium.coinidea.com/

3D Tiles was created to stream massive 3D datasets over the web. As an open specification, it is intended to serve as the de facto standard for visualizing and analyzing large 3D data across many different runtime engines. Today, many engines, including CesiumJS, AGI’s STK, and Uber’s loaders.gl, support 3D Tiles for streaming massive 3D geospatial datasets.

We are excited to announce the release of 3D Tiles Overview, an easy-to-follow guide for learning the main concepts of 3D Tiles, designed to help integrate 3D Tiles support into runtime engines for visualizing and analyzing large heterogeneous 3D geospatial content.

The cover page of the 3D Tiles Overview highlights all the concepts covered.

This guide complements the detailed and comprehensive 3D Tiles specification with concise coverage of key concepts to help developers get started with 3D Tiles quickly.

We are thrilled to have collaborated with Marco Hutter, a long-time contributor to glTF and the creator of the glTF reference card that inspired this work.

We would love to learn how the 3D Tiles Overview helps developers work with 3D Tiles and whether there are any suggestions for improvement. If you’re looking for a place to learn 3D Tiles, head to Cesium ion to curate your own 3D Tilesets, or upload your own data for tiling, hosting, and streaming as 3D Tiles.

Author: Shehzan Mohammed

Original link: https://cesium.com/blog/2020/03/12/3d-tiles-overview/

Note: 3D Tiles Overview is an introductory guide to 3D Tiles produced by the official Cesium team and is highly recommended for learning.

GitHub link: 3D Tiles Overview

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | Fast Domestic Access: http://cesium.coinidea.com/

Using EdgyGeo Cesium Tools to Query and Download Datasets

Thu, 19 Mar 2020 02:31:00 +0000

Cesium Chinese Website: http://cesiumcn.org/ | Fast Domestic Access: http://cesium.coinidea.com/

EdgyGeo, Inc. has done some fantastic work supporting the Architecture, Engineering, and Construction (AEC) industry. This time let’s take a look at their download tool, which allows architects, engineers, developers, and urban planners to quickly obtain massive datasets for specified areas.

3D buildings and routes in a single scene. Dataset from Los Angeles.

With the Cesium-based viewer, EdgyGeo allows users to explore entire cities. The highlight of their data is high-resolution CyberCity 3D buildings, automatically generated through photogrammetric modeling. Their high-resolution building library covers nearly 100 cities in the United States and dozens of other major cities worldwide, with extruded buildings available for additional locations.

But EdgyGeo offers more than just buildings. They have datasets from state and local governments (especially cities), utilities, airports, commercial real estate companies, downtown development associations, and third-party entities. These datasets include terrain, environmental data, FEMA flood data, and other GIS data. Subscribers can also add their own data assets and build data inventories.

EdgyGeo collects and curates this data. Using Cesium’s 3D tiling pipeline, they stitch these datasets into 3D Tiles and fuse them in Cesium ion, so no matter how large the collected data is, it can be efficiently streamed and easily explored on a map with 3D terrain and imagery.

Cesium’s 3D tiling pipeline allows EdgyGeo to share large datasets online simultaneously.

Not only are the scenes easy to browse, but users can also download data for their own projects. Users simply select a portion of the scene and download the data in that area. They can download multiple GIS datasets at once, including CyberCity 3D building models, 3D terrain, aerial imagery, centerlines, curbs, and more – all precisely geolocated.

It’s easy to find and select relevant datasets for a specific area, such as Cambridge, MA.

Downloads are available in Collada (DAE) and KML/KMZ formats, and users can upload them to their own Cesium ion accounts or visualize them in other applications such as Rhino, SketchUp, and Revit at any time. KML format will also soon become available.

3D geometry exported from EdgyGeo visualized in SketchUp.

With this customizable download option, subscribers can obtain the local datasets needed for specific projects, linking GIS, AEC, BIM, and construction tools in a simple data download and transfer process.

You can try the tool by contacting EdgyGeo CEO Kevin DeVito.

Author: Sarah Chow

Original link: https://cesium.com/blog/2020/03/03/edgygeo-3d-tiles-download/

Comment: Cesium ion appears to be the officially recommended data storage and management tool from Cesium. Looking at future developments, we recommend using the download tool described in this article along with Cesium ion.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | Fast Domestic Access: http://cesium.coinidea.com/

Exploring the Impact of COVID-19 on Global Flights

Mon, 16 Mar 2020 15:27:10 +0000

Cesium Chinese Website: http://cesiumcn.org/ | Fast Domestic Access: http://cesium.coinidea.com/

With travel restrictions from Europe to the United States taking effect today, and with increasing encouragement for people to stay home to slow the spread of the coronavirus, we were curious how these measures are affecting global travel. Naturally, we used Cesium to explore.

We began collecting flight data every other day over the past few months. Here are all the flights in and out of Beijing’s main international airport:

[The number of scheduled flights at Beijing Capital International Airport (PEK) visualized over time. Departures are shown in red, arrivals in green.]

At the end of January, the number of flights dropped sharply, from about 900 flights rapidly down to fewer than 300. This coincided with the World Health Organization (WHO) declaring a global health emergency and the United States and other countries restricting travel from China.

Following China, Italy was severely affected by the coronavirus. The first reported case occurred on February 22, cases surged rapidly, and the Italian government implemented a quarantine on March 8. We can see flight traffic declining there, though not as rapidly:

[Flights in and out of Rome’s Leonardo da Vinci-Fiumicino Airport (FCO) in Italy.]

As of the time of writing, flights in London had not been subject to any official restrictions, but scheduled flights for the remainder of March still showed a significant decline. We marked all US flights in red.

[Flights in and out of London Heathrow Airport.]

Finally, here is JFK Airport in New York City, one of the largest air traffic hubs in the United States. So far, there didn’t appear to be any significant changes:

[Flights in and out of New York’s John F. Kennedy International Airport.]

How We Created These Visualizations

Flight data was obtained from AeroDataBox. Their API takes an airport code parameter and returns all flights in and out of that airport within a given time period.

Once we had these scheduled routes, we used open data from OpenFlights to get the location of each airport.

Finally, we created a CZML that draws a line for each route with a timestamp, and visualized the routes over time using Cesium Stories.

If readers want to create something similar, we recommend starting with the Cesium Stories time-dynamic data tutorial.

Original author: Omar Shehata

Link: https://cesium.com/blog/2020/03/13/covid-19-flight-impact/

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | Fast Domestic Access: http://cesium.coinidea.com/

[leetcode]Number Complement

Mon, 09 Mar 2020 13:54:50 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


class Solution {
public:
 int findComplement(int num) {
 int countDigit = 0;
 int numBak = num;
 while (0 < num) {
 num = num >> 1;
 countDigit++;
 }
 return (int)(pow(2, countDigit) - 1 - numBak);
 }
};

[leetcode]Print in Order

Sun, 23 Feb 2020 04:11:23 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39


class Foo {
private:
 bool isFirst;
 bool isSecond;
 bool isThird;
public:
 Foo() {
 isFirst = false;
 isSecond = false;
 isThird = true;
 }

 void first(std::function<void()> printFirst) {
 while (!isThird);
 isThird = false;
 isSecond = false;
 printFirst();
 // printFirst() outputs "first". Do not change or remove this line.
 isFirst = true;
 }

 void second(std::function<void()> printSecond) {
 while(!isFirst);
 isFirst = false;
 isThird = false;
 // printSecond() outputs "second". Do not change or remove this line.
 printSecond();
 isSecond = true;
 }

 void third(std::function<void()> printThird) {
 while(!isSecond);
 isFirst = false;
 isSecond = false;
 // printThird() outputs "third". Do not change or remove this line.
 printThird();
 isThird = true;
 }
};

Recent Cesium Updates and Domestic Source Code Download Links

Mon, 09 Dec 2019 01:31:00 +0000

Cesium Chinese Website: http://cesiumcn.org/ | Fast Domestic Access: http://cesium.coinidea.com/

It has been a while since I last updated the official account and knowledge community. Over the past three months, I made many life-changing decisions. I had already joined a state-owned enterprise, fully engaged in smart city engine development. Then, by a twist of fate, I ended up joining Microsoft (Asia) Internet Engineering Academy (STCA) to work on big data R&D. Life is unpredictable. There are no right or wrong choices, only choices. If anyone has questions about job hunting, resumes, interviews, or recruitment in technical positions, feel free to reach out to me.

But rest assured, I will continue to follow data visualization and Cesium. Currently, I am very optimistic about the Cesium project, as well as IoT and smart cities.

In the coming period, I will strive to update the official account weekly and the knowledge community monthly. I will try to keep the content concise and informative, and I hope it will be helpful to everyone. If you have any suggestions or feedback for the Cesium Chinese Website, feel free to leave me a message.

Recent Cesium Updates:

Cesium continues to maintain its monthly release schedule at the beginning of each month, but there was apparently a mistake in November 2019 that resulted in two releases that month. As of now (December 9, 2019), Cesium has been updated to Cesium-1.64. Here is the update list:

1.64 – 2019-12-02: Cesium-1.64.zip introduces a large number of internal optimizations.

1.63.1 – 2019-11-06: Cesium-1.63.1.zip fixes an issue in 1.63 where the globe surface and labels rendered incorrectly when window.devicePixelRatio was set to greater than 1.0.

Fixes an issue in 1.63 where some primitives would show through the globe when log depth was disabled.

1.63 – 2019-11-01: Cesium-1.63.zip Cesium migrates to ES6 modules. This may affect your Cesium application depending on how you use Cesium.

All website content from cesiumjs.org and cesium.com has been consolidated into cesium.com.

Added UTF-8 support for labels, greatly improving support for non-Latin characters and emojis.

10x compression of the Web Workers bundle size, from 8384KB (2624KB compressed) to 863KB (225KB compressed). This improves Cesium loading speed, especially on low-performance devices and high-latency networks.

Domestic Source Code Download Links (200KB/S)

Given that download speeds for Released versions on GitHub are very unstable (even though GitHub has been acquired by Microsoft), the Cesium Chinese Website provides mirror download links for recent Cesium versions. However, due to server and bandwidth costs, we cannot guarantee that all historical versions will be available for download, nor can we guarantee great download speeds. Actual tests show 100~200KB/S.

Download Link:

http://cesium.coinidea.com/site/download.html

Cesium Chinese Website QQ Group: 807482793 Cesium Chinese Website: http://cesiumcn.org/ | Fast Domestic Access: http://cesium.coinidea.com/

[Part 1] Sharpen Your Cesium Tools - Visual Studio Code

Tue, 22 Oct 2019 15:01:55 +0000

Cesium Chinese Website: http://cesiumcn.org/ | Fast Access in China: http://cesium.coinidea.com/

IDE

Web front-end beginners often want to choose a fast, easy-to-use, and popular (I’m not sure why it needs to be popular exactly – perhaps engineers want to stay on the mainstream path in their technical journey?) IDE (Integrated Development Environment). Is an IDE important? It is both important and not important. It’s not important because: it’s just a tool, and we should focus more on requirements, logic, algorithms, and knowledge. It’s important because: it is a tool, and as the old saying goes, “A craftsman must first sharpen his tools to do his work well” – choosing the right tool often yields twice the result with half the effort.

The CesiumJS official team does not specifically recommend an IDE, but in the introductory tutorial Cesium Getting Started 2 - Setting Up the Cesium Environment and Your First Sample Program, there is this passage:

If you're already a seasoned developer, you most likely have a favorite editor or development environment; for example, most of the Cesium team uses Eclipse. If you're just starting out, a great free and open-source editor is Notepad++, which you can download from their website. Ultimately any text editor will do, so go with the one that you are most comfortable with.

As we can see, the Cesium team primarily uses the open-source Eclipse or recommends Notepad++.

Based on the author’s own experience, here is a brief list of IDEs I have used:

Notepad (built-in on Windows) or TextEdit (built-in on Mac)

Price: Free

Download: Built into the system

Startup speed: Extremely fast

Operating system: Windows/Mac

Notepad is the basic text editor. Every engineer’s (Note: from now on, the author will refer to programmers as engineers – respect yourself to earn respect) ultimate dream is to code with a plain text editor, which is cool but very difficult. You can use Notepad to read simple HTML, JavaScript, or CSS files, but it is not recommended for development at all.

If you have systematically studied computer science, you are certainly familiar with compiling, linking, building, testing, etc. (although front-end development rarely involves compiling and linking). A good IDE must provide excellent project organization. Notepad cannot do this.
Notepad++ (For Windows only)

Price: Free

Download: https://notepad-plus-plus.org/downloads/

Startup speed: Extremely fast

Operating system: Windows

An excellent ultra-lightweight editor. In addition to reading and writing HTML, JavaScript, or CSS, it supports opening folders, which provides some level of project organization. It has a large number of plugins available. Currently, as far as the author knows, it only supports the Windows environment.
Sublime Text (For Windows and Mac)

Price: Paid, closed-source

Download: www.sublimetext.com/ (Official) | http://www.sublimetext.cn/ (Chinese Community)

Startup speed: Fast

Operating system: Windows/Mac

An excellent lightweight editor. It covers almost all the features of Notepad++, while supporting both Windows and Mac. It has a massive plugin ecosystem.

New features include: GOTO ANYTHING, GOTO DEFINITION, multiple selection, command palette, customization, split editing, instant project switching, and more. Of course, you can also use the unregistered version without paying.
Eclipse/MyEclipse (For Windows and Mac)

Price: Free/Paid

Download: https://www.eclipse.org/downloads/

Startup speed: Medium/Slow

Operating system: Windows/Mac

MyEclipse is actually a paid version of Eclipse, which originally existed as a plugin. Eclipse is primarily a Java IDE that integrates Java-related plugins very well. If your back-end technology choice is Java when developing with Cesium, and you prefer using a free IDE without being too concerned about front-end and back-end separation, then Eclipse is an excellent choice.
PHPStorm/IntelliJ IDEA/WebStorm (For Windows and Mac)

Price: Paid

Download: http://www.jetbrains.com/phpstorm/ | http://www.jetbrains.com/idea/ | http://www.jetbrains.com/webstorm/

Startup speed: Slow

Operating system: Windows/Mac

As you can tell from the domain, these three IDEs come from the same company. They are excellent IDEs, but they are all quite expensive and require annual license purchases. If you have the budget, you can purchase them. They are truly outstanding. Among them, if your back-end choice is PHP when developing with Cesium, you can use PHPStorm; if your back-end choice is Java, you can use IntelliJ IDEA; if you only need to develop web front-end code, have a decent computer, and are willing to pay, you can use WebStorm. As the old saying goes: “You get what you pay for” – they are expensive because they are genuinely good.
Visual Studio Code (VSCode) (For Windows and Mac)

Price: Free

Download: https://code.visualstudio.com/

GitHub: https://github.com/Microsoft/vscode

Startup speed: Fast

Operating system: Windows/Mac

Is cheap really synonymous with low quality? Not at all. Allow me to introduce the most powerful IDE in the universe: VSCode. When I was interning at MSRA, I kept thinking that since Visual Studio could be made so excellent, could there be a similarly excellent IDE for front-end development like Visual Studio? Yes, there is – Microsoft’s own child, the free, open-source, and cross-platform Visual Studio Code. It must be said that Microsoft has done a lot in embracing open source in recent years.
```
Free. Built on open source. Runs everywhere.
```
VSCode can be used not only for front-end development, but also for Java, PHP, C++, Python, and more.

Plugin marketplace: https://marketplace.visualstudio.com

VSCode is not inferior to WebStorm in any aspect. VSCode has an excellent plugin ecosystem. It has all the features a great IDE should have: IntelliSense, front-end support, auto-fix (plugins), Git/GitHub integration (GitLens), history (Local History), code checking (Code Spell Checker), themes, color schemes, and more.

Getting Started with Visual Studio Code

1. Command Palette

You can open it with F1 or Ctrl (Cmd on Mac) + Shift + P.

Type in the box: >Extensions: Show Installed Extensions to view installed plugins. You can also enter other commands.

2. How to Install Plugins

Installing the Live Server Plugin

Click on Extensions in the left toolbar, type “live server” (or any other plugin name) in the search box, and you will see the first plugin named:

Live Server. Click Install to install the plugin.

What this plugin does: It has a built-in web server (Live Server) that allows you to preview your changes at any time during development without worrying too much about the web server.

Right-click “Open With Live Server” to open the corresponding Cesium page in the browser:

3. Commonly Used Plugins

Settings Sync: Synchronize VSCode settings

Debugger for Chrome: Debug JavaScript code running in Google Chrome from VS Code

beautify: Format code

Auto Rename Tag: Automatically synchronize modifications of opening and closing tags

guides: Code alignment guide lines

filesize: Display current file size, creation and modification time

Todo Tree: Quickly search for TODO and other comment markers

vetur/VueHelper: Vue plugins

HTML Snippets: Provides basic H5 code snippets and tags

HTML CSS Support: Provides intelligent suggestions for CSS styles when writing class attributes in HTML tags

vscode-icon: Adds corresponding icons to VSCode folder directories. (If it does not take effect, go to [File - Preferences - File Icon Theme] to re-select the setting)

path intellisense: File path auto-completion

npm intellisense: Auto-completion for package references in require statements

bracket pair colorizer: Gives brackets independent colors

tortoiseSvn: SVN plugin

auto close tag: Automatically adds HTML/XML closing tags

change-case: More naming format options for text, such as camelCase, underscore_separated, etc.

color info: Hover over a color to preview detailed color model information in the color block

css peek: Navigate to CSS class and ID definitions in stylesheets. In the HTML file right-click menu, clicking on a selector and selecting “Go to Definition” will jump to the CSS code

eslint: Checks for syntax errors in JavaScript code

html boilerplate: HTML template plugin, create an HTML file with one click

htmlHint: HTML code format checking

intelliSense for CSS class names in HTML: Provides intelligent suggestions in HTML from CSS class names found in project CSS files

JavaScript (ES6) code snippets: ES6 code snippet suggestions

The above plugins can be found and installed directly by searching in the Extensions marketplace.

4. Chinese Language Pack

Chinese (Simplified) Language Pack for Visual Studio Code – for readers who prefer Chinese, you can download and install this Simplified Chinese language pack.

After installation, restart VSCode:

There are many bloggers online who have written detailed guides on how to use Visual Studio Code. You can search for them using your preferred search engine. You can also leave a comment on the Cesium Chinese Website (http://cesium.coinidea.com/).

Cesium Chinese Website QQ Group: 807482793 Cesium Chinese Website: http://cesiumcn.org/ | Fast Access in China: http://cesium.coinidea.com/

Friends of the Cesium Chinese Website

Mon, 15 Jul 2019 07:28:08 +0000

We have now launched Knowledge Planet - Friends of the Cesium Chinese Website.

Note: Please think carefully before joining. Once paid, no refunds will be given. The following content is provided on a best-effort basis. 1. One technical exchange session per month (primarily Cesium-related), with source code provided.
2. Each person gets 5 free questions per week (Cesium, data visualization, and other technical topics).
3. Resume review and job referrals.
4. Career planning available for an additional fee.

The tentative exchange topics are as follows: [Give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime. The key goal is to help everyone develop the ability to independently research and develop related frameworks**]; we hope this will be helpful to you.

Considering everyone’s actual situation, we may briefly cover: operating systems, computer networks, HTML/CSS/JavaScript, object-oriented programming, and basic principles of 3D digital earth.
Being able to use basic Git commands, download code from open-source communities, and run Cesium.
Loading and manipulating images, terrain, and models in Cesium.
Whether you can crawl your own tile map data; how to write lightweight crawling tools.
How to build your own GIS data server through GeoServer, and 2D data display with OpenLayers.
Cross-platform web, human-computer interaction events in Cesium, and how to achieve synchronization across browsers or devices within a local network.
Other topics that may be covered: Cesium with Echarts and Vue, other GIS systems, and some data visualization content.

AZKABAN - Open Source Task Scheduling System

Sat, 15 Jun 2019 00:47:43 +0000

Azkaban is an open-source task scheduling system used for scheduling and running tasks (such as data warehouse scheduling), serving as a replacement for crontab in Linux. Official website: https://azkaban.github.io/

Azkaban mainly consists of three components:

MySQL: Azkaban uses MySQL to store projects and execution information.
Azkaban Web Server: Azkaban uses Jetty as the web server, serving as the controller and providing the web interface.
Azkaban Executor Server: The Azkaban executor server executes submitted workflows.

This article primarily uses Azkaban 3.43. If you need help generating compiled tar packages from GitHub source code, feel free to leave a comment, and I can share the installation package files that I have already tested.
The installation package files mainly include:

azkaban-db-3.43.0.tar.gz
azkaban-solo-server-3.43.0.tar.gz
azkaban-exec-server-3.43.0.tar.gz
azkaban-web-server-3.43.0.tar.gz
azkaban-hadoop-security-plugin-3.43.0.tar.gz
Among these, solo is the standalone version. I set up a version with multiple executor nodes and a single web server node.

Note: This article assumes the Azkaban directory is located at /azkaban.

Database
First, you need to install the MySQL database, then create a database called azkaban. Execute the following in MySQL:

source /azkaban/azkaban-db/create-all-sql-0.1.0-SNAPSHOT.sql

Configuration Files
0. Configure the keystore. The keystore is located at /azkaban/azkaban-web/conf/ (the path must match the one in the configuration file).

keytool -keystore keystore -alias jetty -genkey -keyalg RSA
Enter keystore password: azkaban
Re-enter new password: azkaban
What is your first and last name? [Unknown]: Skip
What is the name of your organizational unit? [Unknown]: Skip
What is the name of your organization? [Unknown]: Skip
What is the name of your City or Locality? [Unknown]: Skip
What is the name of your State or Province? [Unknown]: Skip
What is the two-letter country code for this unit? [Unknown]: CN
Is CN=Unknown, OU=Unknown, O=Unknown, L=Unknown, ST=Unknown, C=CN correct?
[no]: Y
Enter key password for  (RETURN if same as keystore password):

/azkaban/azkaban-web/conf/azkaban.properties

# Azkaban Personalization Settings
azkaban.name=Allin
azkaban.label=My Local Azkaban
azkaban.color=#FF3601
azkaban.default.servlet.path=/index
web.resource.dir=/azkaban/azkaban-web-server/web/
default.timezone.id=Asia/Shanghai
# Azkaban UserManager class
user.manager.class=azkaban.user.XmlUserManager
user.manager.xml.file=/azkaban/azkaban-web-server/conf/azkaban-users.xml
# Loader for projects
executor.global.properties=/azkaban/azkaban-web-server/conf/global.properties
azkaban.project.dir=/azkaban/azkaban-web-server/projects
# Velocity dev mode
velocity.dev.mode=false
# Azkaban Jetty server properties.
jetty.use.ssl=false
jetty.maxThreads=25
jetty.port=8443
jetty.keystore=//azkaban/azkaban-web-server/conf/keystore
jetty.password=yourpassword
jetty.keypassword=yourpassword
jetty.truststore=//azkaban/azkaban-web-server/conf/keystore
jetty.trustpassword=yourpassword
# Azkaban Executor settings
executor.port=12321
# mail settings
mail.sender=
mail.host=
# User facing web server configurations used to construct the user facing server URLs. They are useful when there is a reverse proxy between Azkaban web servers and users.
# enduser -> myazkabanhost:443 -> proxy -> localhost:8081
# when this parameters set then these parameters are used to generate email links.
# if these parameters are not set then jetty.hostname, and jetty.port(if ssl configured jetty.ssl.port) are used.
# azkaban.webserver.external_hostname=myazkabanhost.com
# azkaban.webserver.external_ssl_port=443
# azkaban.webserver.external_port=8081
job.failure.email=
job.success.email=
lockdown.create.projects=false
cache.directory=cache
# JMX stats
jetty.connector.stats=true
executor.connector.stats=true
# Azkaban plugin settings
azkaban.jobtype.plugin.dir=/azkaban/azkaban-web-server/plugins/jobtypes
database.type=mysql
mysql.port=3306
mysql.host=127.0.0.1
mysql.database=azkaban
mysql.user=root
mysql.password=yourmysqlpassword
mysql.numconnections=100

/azkaban/azkaban-exec/conf/azkaban.properties

# Azkaban Personalization Settings
default.timezone.id=Asia/Shanghai
# Loader for projects
executor.global.properties=/azkaban/azkaban-exec-server/conf/global.properties
azkaban.project.dir=/azkaban/azkaban-exec-server/projects
azkaban.jobtype.plugin.dir=/azkaban/azkaban-exec-server/plugins/jobtypes
database.type=mysql
mysql.port=3306
mysql.host=127.0.0.1
mysql.database=azkaban
mysql.user=root
mysql.password=yourpassword
mysql.numconnections=100
# Azkaban Executor settings
executor.maxThreads=50
executor.port=12321
executor.flow.threads=30

/azkaban/azkaban-web/conf/log4j.properties /azkaban/azkaban-exec/conf/log4j.properties

log4j.rootLogger=INFO,C
log4j.appender.C=org.apache.log4j.ConsoleAppender
log4j.appender.C.Target=System.err
log4j.appender.C.layout=org.apache.log4j.PatternLayout
log4j.appender.C.layout.ConversionPattern=%d{yyyy-MM-dd HH:mm:ss} %-5p %c{1}:%L - %m%n

For multiple executor nodes, you need to add the following configuration to /azkaban/azkaban-web/conf/azkaban.properties, and insert the IP addresses and port numbers of the corresponding executor nodes into the database.

azkaban.use.multiple.executors=true
azkaban.executorselector.filters=StaticRemainingFlowSize,MinimumFreeMemory,CpuStatus
azkaban.executorselector.comparator.NumberOfAssignedFlowComparator=1
azkaban.executorselector.comparator.Memory=1
azkaban.executorselector.comparator.LastDispatched=1
azkaban.executorselector.comparator.CpuUsage=1

Insert executor node IP addresses and port numbers:

insert into executors(host,port) values("your ip1",12321);
insert into executors(host,port) values("your ip2",12321);

Configure username and password at /azkaban/azkaban-web/conf/azkaban-users.xml
With basic computer knowledge, opening this configuration file is self-explanatory.
Create log directories

mkdir /azkaban/azkaban-web/logs
mkdir /azkaban/azkaban-exec/logs

Start the services

azkaban/azkaban-exec/bin/start-exec.sh
azkaban/azkaban-web/bin/start-web.sh

Common Pitfalls

The keystore location must match the file path set in the configuration file.
Azkaban 3 and above supports multiple executor nodes.
The startup method in step 7 runs in silent mode. During initial testing, it is recommended to use:

azkaban/azkaban-exec/bin/azkaban-web-start.sh
azkaban/azkaban-exec/bin/azkaban-exec-start.sh

This way you can see whether errors occur and what causes them.
4. Based on error messages, you may not have correctly created the logs directory or the path may be incorrect.
5. Since the web server checks the exec server, it is recommended to start the exec server first.
6. If tasks are not executing in a multi-node setup, it may be because the executor nodes have insufficient resources. Check the configuration carefully. The configuration specifies under what memory, CPU, and other resource conditions the server will execute tasks, and how executor nodes are assigned if no specific node is designated. If you do not want to limit resources, modify or comment out the relevant configuration.

azkaban.use.multiple.executors=true
azkaban.executorselector.filters=StaticRemainingFlowSize,MinimumFreeMemory,CpuStatus
azkaban.executorselector.comparator.NumberOfAssignedFlowComparator=1
azkaban.executorselector.comparator.Memory=1
azkaban.executorselector.comparator.LastDispatched=1
azkaban.executorselector.comparator.CpuUsage=1

How to specify a node to execute a job:
Set “useExecutor” = EXECUTOR_ID in the flow params.
For details, please refer to:
https://www.jianshu.com/p/ffb7bbc1988f

[CesiumJS] Cesium Intermediate Tutorial 10 – CesiumJS and webpack

Sun, 02 Jun 2019 15:25:46 +0000

Cesium Chinese Website: http://cesiumcn.org/ | Fast Access in China: http://cesium.coinidea.com/

webpack is a popular and powerful tool for bundling JavaScript modules. It allows developers to structure code and assets in an intuitive way, and load different types of files as needed using simple require statements. During build time, it tracks code dependencies and bundles these modules into one or more bundles for the browser to load.

In the first half of this tutorial, we set up a simple web application using webpack from scratch, then cover the subsequent steps to integrate the Cesium npm module. If you like developing web applications with CesiumJS, webpack is a great choice. If you are new to Cesium and looking to learn how to build your first sample application, please check the Getting Started Tutorial.

In the second part, we will explore more advanced webpack configurations to optimize applications using CesiumJS.

The complete code and tips for optimizing a CesiumJS webpack application can be found in the official cesium-webpack-example.

Prerequisites

Basic understanding of the command line, JavaScript, and web development.
An IDE or code editor. Cesium team developers use Visual Studio Code, but a minimal code editor such as Sublime Text works perfectly fine as well.
Node.js installed. We recommend using the latest LTS version.

Create a basic webpack app

In this section, we will cover how to set up a basic web application with webpack and a development server. If you already have an application set up and just want to add CesiumJS, skip to Add CesiumJS to a webpack app.

Initialize an app with npm

Create a new cesium-webpack directory for your app. Open the console, navigate to the new directory, and run the following command:

1

npm init

Follow the prompts and fill in all the details about your application. Press enter to use the default values. This will create package.json.

Create the app code

Create a src directory for our application code. When we build the application, webpack will generate distribution files in the dist directory.

Create src/index.html and add the boilerplate HTML page code.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport"
 content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 <title>Hello World!</title>
 </head>
 <body>
 <p>Hello World!</p>
 </body>
</html>

Next, create an entry point for the application. This is the entry point where webpack looks for all JavaScript source code and dependencies to bundle.

Create src/index.js and add the following code:

1

console.log('Hello World!');

Install and configure webpack

Start by installing webpack:

1

npm install --save-dev webpack

Configuration

Create webpack.config.js to define the webpack configuration object.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


const path = require('path');

const webpack = require('webpack');

module.exports = {
 context: __dirname,
 entry: {
 app: './src/index.js'
 },
 output: {
 filename: '[name].js',
 path: path.resolve(__dirname, 'dist'),
 }
};

context specifies the base path for the files. entry is used to specify the bundles. In this case, the entry point for the app bundle is src/index.js. webpack will output the bundled app.js to the dist folder.

Loaders

Webpack loads everything like a module. Use loaders to load CSS and other asset files. Install style-loader, css-loader, and url-loader.

1

npm install --save-dev style-loader css-loader url-loader

Add two module.rules in webpack.config.js: one for CSS files and another for other static files. For each rule, test defines the file types to load, and use specifies the list of loaders.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


const path = require('path');

const webpack = require('webpack');

module.exports = {
 context: __dirname,
 entry: {
 app: './src/index.js'
 },
 output: {
 filename: '[name].js',
 path: path.resolve(__dirname, 'dist'),
 },
 module: {
 rules: [{
 test: /\.css$/,
 use: [ 'style-loader', 'css-loader' ]
 }, {
 test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
 use: [ 'url-loader' ]
 }]
 }
};

Plugins

Define index.html and inject the bundle into this page using a webpack plugin called html-webpack-plugin.

1

npm install --save-dev html-webpack-plugin

Reference the plugin in webpack.config.js, then inject it into plugins. Pass src/index.html as our template.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


const path = require('path');

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 context: __dirname,
 entry: {
 app: './src/index.js'
 },
 output: {
 filename: '[name].js',
 path: path.resolve(__dirname, 'dist'),
 },
 module: {
 rules: [{
 test: /\.css$/,
 use: [ 'style-loader', 'css-loader' ]
 }, {
 test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
 use: [ 'url-loader' ]
 }]
 },
 plugins: [
 new HtmlWebpackPlugin({
 template: 'src/index.html'
 })
 ]
};

The configuration file is a JavaScript file, so we can require other Node modules and perform operations.

Bundle the app

Use package.json to define scripts that can be called with npm. Add a build command.

1
2
3


 "scripts": {
 "build": "node_modules/.bin/webpack --config webpack.config.js"
 }

This script calls webpack and passes in the webpack.config.js configuration file.

We use local installations of webpack and webpack-dev-server in these scripts. This allows each project to use its own separate version, which is recommended by the webpack documentation. If you prefer to use a global version, install it globally with npm install –global webpack, and run it with the command webpack –config webpack.config.js.

When you run the build command: npm run build

You should see some output from webpack, starting with the following:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


npm run build

> test-app@1.0.0 build C:\workspace\test-app
> node_modules/.bin/webpack --config webpack.config.js

Hash: 2b42bff7a022b5d956a9
Version: webpack 3.6.0
Time: 2002ms
 Asset Size Chunks Chunk Names
 Assets/Textures/NaturalEarthII/2/0/3.jpg 10.3 kB [emitted]
 app.js 162 kB 0 [emitted] app

The app.js bundle and index.html file will be output to the dist folder.

Run the development server

Use webpack-dev-server to serve the development build so we can see our app in action:

1

npm install --save-dev webpack-dev-server

Add a start script in package.json to run the development server. Set the configuration file via the –config flag. Use the –open flag to open the application in the browser when the command is executed.

1
2
3
4


 "scripts": {
 "build": "node_modules/.bin/webpack --config webpack.config.js",
 "start": "node_modules/.bin/webpack-dev-server --config webpack.config.js --open"
 }

Tell the development server to serve files from the dist folder. Add this to the bottom of webpack.config.js.

1
2
3
4


 // development server options
 devServer: {
 contentBase: path.join(__dirname, "dist")
 }

Finally, run the app:

1

npm start

You should see your content rendered at localhost:8080, and see the “Hello World!” message when you open the browser console.

Add CesiumJS to a webpack app

Install CesiumJS

Install the cesium module from npm and add it to package.json.

Configure CesiumJS in webpack

CesiumJS is a large and complex library. In addition to JavaScript modules, it also includes static assets such as CSS, image, and JSON files. It includes web worker files to perform intensive computations in separate threads. Unlike traditional npm modules, CesiumJS does not define an entry point because the library can be used in many different ways. We need to configure some additional options for use with webpack.

First, define the location of CesiumJS. This tutorial is based on the source code, so webpack can include individual models and track dependencies. Alternatively, the built (minified or unminified) versions of CesiumJS can be used. However, these modules have already been combined and optimized, which gives us less flexibility.

Add the following code to the top of webpack.config.js:

1
2
3


// The path to the CesiumJS source code
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';

This tutorial uses the npm module for easy installation, but you can also clone the GitHub repository or download and extract a release version.

Add the following options to the configuration object to resolve some issues with how webpack compiles CesiumJS.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


 output: {
 filename: '[name].js',
 path: path.resolve(__dirname, 'dist'),

 // Needed to compile multiline strings in Cesium
 sourcePrefix: ''
 },
 amd: {
 // Enable webpack-friendly use of require in Cesium
 toUrlUndefined: true
 },
 node: {
 // Resolve node module use of fs
 fs: 'empty'
 },

output.sourcePrefix: Adds a \t tab before each line to override the webpack default. CesiumJS has some multiline strings, so we need to override this default with an empty prefix ’’.
amd.toUrlUndefined: true tells CesiumJS that the AMD webpack version used to evaluate require statements does not conform to the standard toUrl function.
node.fs: ’empty’ resolves some third-party usage issues with the fs module, which is intended for use in a Node environment, not in a browser.

Add a cesium alias so we can reference it in our application code.

1
2
3
4
5
6


 resolve: {
 alias: {
 // CesiumJS module name
 cesium: path.resolve(__dirname, cesiumSource)
 }
 },

Manage CesiumJS static files

Finally, ensure that static CesiumJS assets, widgets, and web worker files are properly served and loaded.

As part of the build process, use copy-webpack-plugin to copy static files to the dist directory.

1

npm install --save-dev copy-webpack-plugin

Require it at the top of the webpack.config.js file:

1

const CopywebpackPlugin = require('copy-webpack-plugin');

And add it to the plugins array:

1
2
3
4
5
6
7
8
9


 plugins: [
 new HtmlWebpackPlugin({
 template: 'src/index.html'
 }),
 // Copy Cesium Assets, Widgets, and Workers to a static directory
 new CopywebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
 new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
 new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ])
 ],

This copies the Assets and Widgets directories as well as the built web worker scripts.

If you are using a fork of the CesiumJS repository, the Build folder will not exist. Run npm run release to generate the output folder. For more details, see the Cesium Build Guide.

Define an environment variable that tells CesiumJS the base URL for loading static files using the webpack DefinePlugin. The plugins array will now look like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


 plugins: [
 new HtmlWebpackPlugin({
 template: 'src/index.html'
 }),
 // Copy Cesium Assets, Widgets, and Workers to a static directory
 new CopywebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
 new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
 new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]),
 new webpack.DefinePlugin({
 // Define relative base path in cesium for loading assets
 CESIUM_BASE_URL: JSON.stringify('')
 })
 ],

Require CesiumJS modules in our app

There are several ways to reference CesiumJS modules in our application. You can use CommonJS syntax or ES6 import statements.

You can import the entire CesiumJS library, or require only the specific modules you need. Importing individual modules will cause webpack to only compile those modules and their dependencies in the bundle, rather than the entire library.

CommonJS style require

Require all of CesiumJS:

1
2


var Cesium = require('cesium/Cesium');
var viewer = new Cesium.Viewer('cesiumContainer');

Require individual modules:

1
2


var Color = require('cesium/Core/Color');
var color = Color.fromRandom();

ES6 style import

Import all of CesiumJS:

1
2


import Cesium from 'cesium/Cesium';
var viewer = new Cesium.Viewer('cesiumContainer');

Import individual modules:

1
2


import Color from 'cesium/core/Color';
var color = Color.fromRandom();

Requiring asset files

The principle behind webpack is that every file is treated as a module. This makes importing assets the same as including JavaScript. We told webpack how to load each type of file using loaders in the configuration, so we just need to call require.

1

require('cesium/Widgets/widgets.css');

Hello World!

Create a new file, src/css/main.css, to style our application:

1
2
3
4
5
6
7


html, body, #cesiumContainer {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 overflow: hidden;
}

Create a div for the CesiumJS Viewer in the index.html body. Replace

Hello World!

with the following div:

1

<div id="cesiumContainer"></div>

Remove the contents of index.js and include Cesium and our CSS files:

1
2
3


var Cesium = require('cesium/Cesium');
require('./css/main.css');
require('cesium/Widgets/widgets.css');

Add a line of code to create the Viewer:

1

var viewer = new Cesium.Viewer('cesiumContainer');

Run the app with npm start to view the Viewer in the browser.

Copy and paste your favorite Sandcastle example. For instance, the Particle System Fireworks example makes for a great conclusion.

Advanced webpack configurations

webpack can further improve performance, reduce bundle size, and perform additional or complex build steps. Here, we will discuss some configuration options related to using the CesiumJS library.

A configuration for optimizing production Cesium webpack builds can be found in the repository example webpack.release.config.js.

Code splitting

By default, webpack bundles CesiumJS in the same chunk as our application, resulting in a large file. We can split CesiumJS into its own bundle and improve our application performance using the CommonChunksPlugin. If you end up creating multiple chunks for your application, they can all reference a common cesium chunk.

Add the plugin to the webpack.config.js file and specify the rules for splitting CesiumJS modules:

1
2
3
4
5
6


 plugins: [
 new webpack.optimize.CommonsChunkPlugin({
 name: 'cesium',
 minChunks: module => module.context && module.context.indexOf('cesium') !== -1
 })
 ]

Enable source maps

Source maps allow webpack to trace errors back to the original content. They provide more or less detailed debugging information in exchange for compilation speed. We recommend using the ’eval’ option.

1

 devtool: 'eval'

Source maps are not recommended for production builds.

Remove pragmas

Developer errors and warnings exist in the CesiumJS source code that have been removed from our minified release builds. Since there is no built-in webpack method to remove these warnings, we will use strip-pragma-loader.

Install the package:

1

npm install strip-pragma-loader --save-dev

In module.rules, set debug to false and include the loader:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


 rules: [{
 // Strip cesium pragmas
 test: /\.js$/,
 enforce: 'pre',
 include: path.resolve(__dirname, cesiumSource),
 use: [{
 loader: 'strip-pragma-loader',
 options: {
 pragmas: {
 debug: false
 }
 }
 }]
 }]

Uglify and minify

Uglifying and minifying code allows for smaller file sizes in production. For a release build, CesiumJS uglifies JavaScript files and minifies CSS files.

Use uglifyjs-webpack-plugin to uglify the CesiumJS source code.

1

npm install uglifyjs-webpack-plugin --save-dev

Require it in the configuration file:

1

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

Include it in the plugins list:

1
2
3


 plugins: [
 new webpack.optimize.UglifyJsPlugin()
 ]

Use the minimize option on css-loader to optimize CSS.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


 module: {
 rules: [{
 test: /\.css$/,
 use: [
 'style-loader',
 {
 loader: 'css-loader',
 options: {
 // minify loaded css
 minimize: true
 }
 }
 ]
 }]
 }

Resources

The official cesium-webpack-example repository contains a minimal webpack configuration, the Hello World code from this tutorial, and instructions for optional code configurations.

For tutorials on CesiumJS features to include in a new application, see the Cesium Workshop Tutorial.

Explore examples in [Sandcastle] and check the CesiumJS Documentation.

To learn more about webpack, check out the webpack concepts, or read the documentation in depth.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | Fast Access in China: http://cesium.coinidea.com/

[CesiumJS] Cesium Intermediate Tutorial 9 – Advanced Particle System Effects

Sun, 02 Jun 2019 12:58:56 +0000

Cesium Chinese Website: http://cesiumcn.org/ | Fast Access in China: http://cesium.coinidea.com/

To learn the basics of particle systems, see the Particle Systems Getting Started tutorial.

Weather

Setup

To generate a snow effect, first add a snowflake image for each particle, and then define the particle’s movement behavior and other dynamic elements in the updateParticle function.

The Images

Three images are used in this tutorial. The left one is the rain particle; the middle image is the snow particle; the right image is used for the fire effect.

The Update Function

The update function is used to define particle movement, arrangement, and visualization. It modifies the particle’s color, imageSize, and particleLife. We can even modify them based on the distance to the camera (as described below), imported models, or the distance to the Earth itself.

Here is our update function for snow:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


// snow
var snowGravityVector = new Cesium.Cartesian3();
var snowUpdate = function(particle, dt) {
 Cesium.Cartesian3.normalize(particle.position, snowGravityVector);
 Cesium.Cartesian3.multiplyByScalar(snowGravityVector,
 Cesium.Math.randomBetween(-30.0, -300.0),
 snowGravityVector);
 particle.velocity = Cesium.Cartesian3.add(particle.velocity, snowGravityVector, particle.velocity);

 var distance = Cesium.Cartesian3.distance(scene.camera.position, particle.position);
 if (distance > (snowRadius)) {
 particle.endColor.alpha = 0.0;
 } else {
 particle.endColor.alpha = snowSystem.endColor.alpha / (distance / snowRadius + 0.1);
 }
};

The first part of the function makes the particles fall as if affected by gravity. The update function also contains a distance check so that particles fade away when they are far from the camera.

Additional Weather Effects

Use fog and atmospheric effects to enhance the visualization and match the type of weather we are trying to replicate.

hueShift changes the color along the color spectrum, saturationShift changes the degree to which the actual color versus black and white is needed for the visual, and brightnessShift changes how vivid the color is.

Fog density changes the opacity between the ground cover on the Earth and the fog color. The fog’s minimumBrightness is used to darken the fog.

1
2
3
4
5
6
7


// snow
scene.skyAtmosphere.hueShift = -0.8;
scene.skyAtmosphere.saturationShift = -0.7;
scene.skyAtmosphere.brightnessShift = -0.33;

scene.fog.density = 0.001;
scene.fog.minimumBrightness = 0.8;

The Systems

Snow

The snow system uses the snowflake_particle image and uses minimumImageSize and maximumImageSize to randomly create snowflakes within that range.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


var snowParticleSize = scene.drawingBufferWidth / 100.0;
var snowRadius = 100000.0;

var snowSystem = new Cesium.ParticleSystem({
 modelMatrix : new Cesium.Matrix4.fromTranslation(scene.camera.position),
 minimumSpeed : -1.0,
 maximumSpeed : 0.0,
 lifetime : 15.0,
 emitter : new Cesium.SphereEmitter(snowRadius),
 startScale : 0.5,
 endScale : 1.0,
 image : "../../SampleData/snowflake_particle.png",
 emissionRate : 7000.0,
 startColor : Cesium.Color.WHITE.withAlpha(0.0),
 endColor : Cesium.Color.WHITE.withAlpha(1.0),
 minimumImageSize : new Cartesian2(snowParticleSize, snowParticleSize),
 maximumImageSize : new Cartesian2(snowParticleSize * 2.0, snowParticleSize * 2.0),
 updateCallback : snowUpdate
});
scene.primitives.add(snowSystem);

Rain

The rain system uses circular_particle.png for raindrops. imageSize is used to vertically stretch the image, giving the rain a slender appearance.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


rainSystem = new Cesium.ParticleSystem({
 modelMatrix : new Cesium.Matrix4.fromTranslation(scene.camera.position),
 speed : -1.0,
 lifetime : 15.0,
 emitter : new Cesium.SphereEmitter(rainRadius),
 startScale : 1.0,
 endScale : 0.0,
 image : "../../SampleData/circular_particle.png",
 emissionRate : 9000.0,
 startColor :new Cesium.Color(0.27, 0.5, 0.70, 0.0),
 endColor : new Cesium.Color(0.27, 0.5, 0.70, 0.98),
 imageSize : new Cesium.Cartesian2(rainParticleSize, rainParticleSize * 2),
 updateCallback : rainUpdate
});
scene.primitives.add(rainSystem);

The rain update function is slightly different because rain falls much faster than snow.

1
2
3
4
5
6
7


// rain
rainGravityScratch = Cesium.Cartesian3.normalize(particle.position, rainGravityScratch);
rainGravityScratch = Cesium.Cartesian3.multiplyByScalar(rainGravityScratch,
 -1050.0,
 rainGravityScratch);

particle.position = Cesium.Cartesian3.add(particle.position, rainGravityScratch, particle.position);

To make the environment match the atmosphere of the scene, modify the atmosphere and fog to match the rain. The code below creates a dark blue sky covered in haze.

1
2
3
4
5
6
7


// rain
scene.skyAtmosphere.hueShift = -0.97;
scene.skyAtmosphere.saturationShift = 0.25;
scene.skyAtmosphere.brightnessShift = -0.4;

scene.fog.density = 0.00025;
scene.fog.minimumBrightness = 0.01;

For additional help, visit the Sandcastle example for both snow and rain.

Comet and Rocket Tails

Using Multiple Particle Systems

To create comet and rocket tails, we need multiple particle systems. Each position on the particle ring created by this example is a completely independent particle system. This allows us to control the direction of the system’s movement more uniformly. A simple way to visualize this effect is to limit cometOptions.numberOfSystems to 2 and have cometOptions.colorOptions include only two colors, as shown in the image below.

To simplify different collections of systems, create arrays to carry the independent systems associated with the comet and those associated with the rocket example.

1
2


var rocketSystems = [];
var cometSystems = [];

Create two different options for the objects: one for the Comet version and another for the Rocket version. This makes the initial number of systems, offset values, etc. different for the two systems, giving them different appearances.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52


var cometOptions = {
 numberOfSystems : 100.0,
 iterationOffset : 0.003,
 cartographicStep : 0.0000001,
 baseRadius : 0.0005,

 colorOptions : [{
 red : 0.6,
 green : 0.6,
 blue : 0.6,
 alpha : 1.0
 }, {
 red : 0.6,
 green : 0.6,
 blue : 0.9,
 alpha : 0.9
 }, {
 red : 0.5,
 green : 0.5,
 blue : 0.7,
 alpha : 0.5
 }]
};

var rocketOptions = {
 numberOfSystems : 50.0,
 iterationOffset : 0.1,
 cartographicStep : 0.000001,
 baseRadius : 0.0005,

 colorOptions : [{
 minimumRed : 1.0,
 green : 0.5,
 minimumBlue : 0.05,
 alpha : 1.0
 }, {
 red : 0.9,
 minimumGreen : 0.6,
 minimumBlue : 0.01,
 alpha : 1.0
 }, {
 red : 0.8,
 green : 0.05,
 minimumBlue : 0.09,
 alpha : 1.0
 }, {
 minimumRed : 1,
 minimumGreen : 0.05,
 blue : 0.09,
 alpha : 1.0
 }]
};

colorOptions is an array of colors for random visuals. Each system starts from a specific color rather than having a set color geometry, depending on the system currently being created. In the example below, i represents the current iteration number.

1

var color = Cesium.Color.fromRandom(options.colorOptions[i % options.colorOptions.length]);

Setup

Use the function below as initialization for each system:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


function createParticleSystems(options, systemsArray) {
 var length = options.numberOfSystems;
 for (var i = 0; i < length; ++i) {
 scratchAngleForOffset = Math.PI * 2.0 * i / options.numberOfSystems;
 scratchOffset.x += options.baseRadius * Math.cos(scratchAngleForOffset);
 scratchOffset.y += options.baseRadius * Math.sin(scratchAngleForOffset);

 var emitterModelMatrix = Cesium.Matrix4.fromTranslation(scratchOffset, matrix4Scratch);
 var color = Cesium.Color.fromRandom(options.colorOptions[i % options.colorOptions.length]);
 var force = forceFunction(options, i);

 var item = viewer.scene.primitives.add(new Cesium.ParticleSystem({
 image : getImage(),
 startColor : color,
 endColor : color.withAlpha(0.0),
 particleLife : 3.5,
 speed : 0.00005,
 imageSize : new Cesium.Cartesian2(15.0, 15.0),
 emissionRate : 30.0,
 emitter : new Cesium.CircleEmitter(0.1),
 bursts : [ ],
 lifetime : 0.1,
 forces : force,
 modelMatrix : particlesModelMatrix,
 emitterModelMatrix : emitterModelMatrix
 }));
 systemsArray.push(item);
 }
}

Since both tail versions are similar, the same createParticleSystems function can be used to create either one. Pass in CometOptions or RocketOptions as the options parameter to create different effects.

Create the Particle Image from Scratch

Instead of loading an image from a URL, the getImage function creates the image using an HTML canvas. This makes image creation more flexible.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


var particleCanvas;
function getImage() {
 if (!Cesium.defined(particleCanvas)) {
 particleCanvas = document.createElement('canvas');
 particleCanvas.width = 20;
 particleCanvas.height = 20;
 var context2D = particleCanvas.getContext('2d');
 context2D.beginPath();
 context2D.arc(8, 8, 8, 0, Cesium.Math.TWO_PI, true);
 context2D.closePath();
 context2D.fillStyle = 'rgb(255, 255, 255)';
 context2D.fill();
 }
 return particleCanvas;
}

The Force Function

Below is our updateCallback function:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


var scratchCartesian3 = new Cesium.Cartesian3();
var scratchCartographic = new Cesium.Cartographic();
var forceFunction = function(options, iteration) {
 var iterationOffset = iteration;
 var func = function(particle) {
 scratchCartesian3 = Cesium.Cartesian3.normalize(particle.position, new Cesium.Cartesian3());
 scratchCartesian3 = Cesium.Cartesian3.multiplyByScalar(scratchCartesian3, -1.0, scratchCartesian3);

 particle.position = Cesium.Cartesian3.add(particle.position, scratchCartesian3, particle.position);

 scratchCartographic = Cesium.Cartographic.fromCartesian(particle.position,
 Cesium.Ellipsoid.WGS84,
 scratchCartographic);

 var angle = Cesium.Math.PI * 2.0 * iterationOffset / options.numberOfSystems;
 iterationOffset += options.iterationOffset;
 scratchCartographic.longitude += Math.cos(angle) * options.cartographicStep;
 scratchCartographic.latitude += Math.sin(angle) * options.cartographicStep;

 particle.position = Cesium.Cartographic.toCartesian(scratchCartographic);
 };
 return func;
};

Note that forceFunction returns a function. The returned func is the actual updateCallback function. For each iteration, the update function creates a different rotation offset based on the angle and iterationOffset. A smaller iteration offset only slightly adjusts the angle, allowing the radius to steadily increase as the system continues, as shown in the comet example. A larger iteration offset changes the angle more quickly; this creates a tighter, more erratic cylindrical output, as shown in the rocket example.

This tutorial uses sine and cosine functions for circular effects. For other effects, try making shapes such as a Lissajous curve, Gibbs phenomenon, or square wave.

Relative Position

Use modelMatrix to position the particle system at the appropriate location behind the plane. Because these systems are vertical, we need a slight offset using the particleOffset value. As shown in the createParticleSystems function, the emitterModelMatrix offset for each system is calculated based on the iteration.

1
2
3
4
5
6
7
8


// positioning the plane
var planePosition = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 800.0);
var particlesOffset = new Cesium.Cartesian3(-8.950115473940969, 34.852766731753945, -30.235411095432937);

// creating the particles model matrix
var transl = Cesium.Matrix4.fromTranslation(particlesOffset, new Cesium.Matrix4());
var translPosition = Cesium.Matrix4.fromTranslation(planePosition, new Cesium.Matrix4());
var particlesModelMatrix = Cesium.Matrix4.multiplyTransformation(translPosition, transl, new Cesium.Matrix4());

Resources

For additional help, visit the Sandcastle example for both tails examples. More example code:

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | Fast Access in China: http://cesium.coinidea.com/

[CesiumJS] Cesium Intermediate Tutorial 8 – Introduction to Particle Systems

Sun, 02 Jun 2019 09:41:38 +0000

Cesium Chinese website: http://cesiumcn.org/ | Domestic fast access: http://cesium.coinidea.com/

What is a Particle System?

A particle system is a graphics technique that simulates complex physical effects. Particle systems are collections of small images that, when viewed together, form a more complex “fuzzy” object such as fire, smoke, weather, or fireworks. These complex effects can be controlled by specifying the behavior of individual particles using properties such as initial position, velocity, and lifetime.

Particle system effects are very common in movies and video games. For example, to represent damage to an aircraft, a technical artist might use a particle system to represent an explosion on the aircraft’s engine, and then render a different particle system to represent the smoke trail as the aircraft crashes.

Particle System Basics

Take a look at the code for a basic particle system below:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


var particleSystem = viewer.scene.primitives.add(new Cesium.ParticleSystem({
 image : '../../SampleData/smoke.png',
 imageSize : new Cesium.Cartesian2(20, 20),
 startScale : 1.0,
 endScale : 4.0,
 particleLife : 1.0,
 speed : 5.0,
 emitter : new Cesium.CircleEmitter(0.5),
 emissionRate : 5.0,
 modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()),
 lifetime : 16.0
}));

The code above creates a ParticleSystem, a parameterized object that controls the appearance and behavior of individual Particle objects over time. Particles are generated by a particle emitter, have a position and type, live for a certain period of time, and then die.

Some of these properties are dynamic. Notice that instead of using the available monochrome property scale, there is a startScale and endScale. These allow you to specify that the particle size transitions between the start and end scales over the course of the particle’s lifetime. startColor and endColor work similarly.

Other ways to affect visual output include maximum and minimum properties. For each variable with maximum and minimum inputs, the actual value of that variable on the particle will be randomly assigned between the maximum and minimum inputs and will remain static at that value throughout the particle’s lifetime. For example, using minimum speed and maximum speed as bounds for the speed randomly selected for each particle. Properties that allow changes like this include imageSize, speed, life, and particleLife.

Emitters

When a particle is born, its initial position and velocity vector are controlled by the ParticleEmitter. The emitter will generate a number of particles per second, specified by the emissionRate parameter, initialized with a random velocity based on the emitter type.

Cesium has a variety of particle emitters that you can use out of the box.

BoxEmitter

BoxEmitter initializes particles at randomly sampled positions within a box and directs them out of one of the six box faces. It accepts a Cartesian3 parameter that specifies the width, height, and depth dimensions of the box.

1
2
3
4
5
6
7
8
9


var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
 image : '../../SampleData/smoke.png',
 color: Cesium.Color.MAGENTA,
 emissionRate: 5.0,
 emitter: new Cesium.BoxEmitter(new Cesium.Cartesian3(5.0, 5.0, 5.0)),
 imageSize : new Cesium.Cartesian2(25.0, 25.0),
 modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()),
 lifetime : 16.0
}));

CircleEmitter

CircleEmitter initializes particles at randomly sampled positions within a circle in the direction of the emitter’s up axis. It accepts a float parameter that specifies the radius of the circle.

1
2
3
4
5
6
7
8
9


var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
 image : '../../SampleData/smoke.png',
 color: Cesium.Color.MAGENTA,
 emissionRate: 5.0,
 emitter: new Cesium.CircleEmitter(5.0),
 imageSize : new Cesium.Cartesian2(25.0, 25.0),
 modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()),
 lifetime : 16.0
}));

If no emitter is specified, CircleEmitter will be used as the default emitter.

ConeEmitter

ConeEmitter initializes particles at the tip of a cone and directs them away from the cone at random angles. It takes a float parameter that specifies the angle of the cone. The cone is oriented along the emitter’s up axis.

1
2
3
4
5
6
7
8
9


var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
 image : '../../SampleData/smoke.png',
 color: Cesium.Color.MAGENTA,
 emissionRate: 5.0,
 emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(30.0)),
 imageSize : new Cesium.Cartesian2(25.0, 25.0),
 modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()),
 lifetime : 16.0
}));

SphereEmitter

SphereEmitter initializes particles at randomly sampled positions within a sphere and directs them outward from the center of the sphere. It takes a float parameter that specifies the radius of the sphere.

1
2
3
4
5
6
7
8
9


var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
 image : '../../SampleData/smoke.png',
 color: Cesium.Color.MAGENTA,
 emissionRate: 5.0,
 emitter: new Cesium.SphereEmitter(5.0),
 imageSize : new Cesium.Cartesian2(25.0, 25.0),
 modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()),
 lifetime : 16.0
}));

Configuring Particle Systems

Particle Emission Rate

emissionRate controls how many particles are emitted per second, which changes the density of particles in the system. Specify a set of bursts to emit particles at specified times (as shown in the animation above). This adds variety or explosiveness to the particle system.

Add this property to your particleSystem:

1
2
3
4
5


bursts : [
 new Cesium.ParticleBurst({time : 5.0, minimum : 300, maximum : 500}),
 new Cesium.ParticleBurst({time : 10.0, minimum : 50, maximum : 100}),
 new Cesium.ParticleBurst({time : 15.0, minimum : 200, maximum : 300})
]

At the given times, these bursts will emit between the minimum and maximum number of particles.

Life of the Particle and Life of the System

By default, the particle system will run forever. To make the particle system run for a set duration, use lifetime to specify the duration in seconds and set loop to false.

1
2


lifetime : 16.0,
loop: false

Setting particleLife to 5.0 will give every particle in the system that particleLife value. To randomize the output of each particle, use the variables minimumParticleLife and maximumArticleLife.

1
2


minimumParticleLife: 5.0,
maximumParticleLife: 10.0

Styling Particles

Color

Particles are styled with textures specified by image and color, which can change over the particle’s lifetime to create dynamic effects. The following code makes smoke particles transition from green to white.

1
2


startColor : Cesium.Color.LIGHTSEAGREEN.withAlpha(0.7),
endColor : Cesium.Color.WHITE.withAlpha(0.0),

Size

The size of a particle is controlled by imageSize. To randomize the size, use minimumImageSize.x and maximumImageSize.x to control the width (in pixels), and minimumImageSize.y and maximumImageSize.y to control the height (in pixels). The following code creates square particles between 30 and 60 pixels:

1
2


minimumImageSize : new Cesium.Cartesian2(30.0, 30.0),
maximumImageSize : new Cesium.Cartesian2(60.0, 60.0)

The size of particles can be adjusted over their lifetime using the startScale and endScale properties to make particles grow or shrink over time.

1
2


startScale: 1.0,
endScale: 4.0

Speed

Speed is controlled by speed or minimumSpeed and maximumSpeed.

1
2


minimumSpeed: 5.0,
maximumSpeed: 10.0

UpdateCallback

Particle systems can be further customized by applying an update function. It acts as a manual updater for each particle for effects such as gravity, wind, or color changes.

The particle system has an updateCallback that modifies particle properties during the simulation. This function takes the particle and the simulation time step. Most physics-based effects will modify the velocity vector to change direction or speed. Here is an example that makes particles react to gravity:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


var gravityVector = new Cesium.Cartesian3();
var gravity = -(9.8 * 9.8);
function applyGravity(p, dt) {
 // Compute a local up vector for each particle in geocentric space.
 var position = p.position;

 Cesium.Cartesian3.normalize(position, gravityVector);
 Cesium.Cartesian3.multiplyByScalar(gravityVector, gravity * dt, gravityVector);

 p.velocity = Cesium.Cartesian3.add(p.velocity, gravityVector, p.velocity);
}

This function computes the gravity vector and uses gravitational acceleration to change the particle’s velocity. Set gravity as the updateFunction of the particle system:

1

updateCallback : applyGravity

Positioning

Particle systems are positioned using two Matrix4 transformation matrices:

modelMatrix: Transforms the particle system from model to world coordinates.
emitterModelMatrix: Transforms the particle system emitter within the particle system’s local coordinate system.

You can use just one of these transformation matrices and leave the other as the identity matrix, but we provide both for convenience. To practice creating matrices, let’s position the particle emitter relative to another entity.

Create an entity for our particle system. Open the Hello World Sandcastle example and add the following code to add a milk truck model to the viewer:

1
2
3
4
5
6
7


var entity = viewer.entities.add({
 model : {
 uri : '../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck-kmc.glb'
 },
 position : Cesium.Cartesian3.fromDegrees(-75.15787310614596, 39.97862668312678)
});
viewer.trackedEntity = entity;

We want to add a smoke effect coming from the back of the truck. Create a model matrix that will position the particle system and orient it the same as the milk truck entity.

1

modelMatrix: entity.computeModelMatrix(time, new Cesium.Matrix4())

This places the particle system at the center of the truck. To position it at the back of the truck, we can create a matrix with a translation.

1
2
3
4
5
6
7


function computeEmitterModelMatrix() {
 hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, hpr);
 trs.translation = Cesium.Cartesian3.fromElements(-4.0, 0.0, 1.4, translation);
 trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, rotation);

 return Cesium.Matrix4.fromTranslationRotationScale(trs, emitterModelMatrix);
}

Now, add the particle system:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


var particleSystem = viewer.scene.primitives.add(new Cesium.ParticleSystem({
 image : '../../SampleData/smoke.png',

 startColor : Cesium.Color.LIGHTSEAGREEN.withAlpha(0.7),
 endColor : Cesium.Color.WHITE.withAlpha(0.0),

 startScale : 1.0,
 endScale : 4.0,

 particleLife : 1.0,

 minimumSpeed : 1.0,
 maximumSpeed : 4.0

 imageSize : new Cesium.Cartesian2(25, 25),
 emissionRate : 5.0,
 lifetime : 16.0,

 modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4())
 emitterModelMatrix : computeEmitterModelMatrix()
}));

Also note that we can update the model or emitter matrices over time. For example, if we want to animate the emitter position on the truck, we can modify the emitterModelMatrix while keeping the modelMatrix unchanged.

To see the complete example, visit the Particle System demo.

Learn More

For achieving cooler effects with particle systems using more advanced techniques, see the Particle Systems - More Effects tutorial.

For more example code, see:

Cesium Chinese website QQ group: 807482793

Cesium Chinese website: http://cesiumcn.org/ | Domestic fast access: http://cesium.coinidea.com/

[CesiumJS] Cesium Intermediate Tutorial 7 – Geometry and Appearances

Sun, 02 Jun 2019 08:00:38 +0000

Cesium Chinese website: http://cesiumcn.org/ | Fast access in China: http://cesium.coinidea.com/

This tutorial will introduce you to the geometry and appearance system using the Primitive API. This is an advanced topic for extending CesiumJS with custom meshes, shapes, volumes, and appearances, rather than for general Cesium users. If you are interested in learning how to draw various shapes and volumes on the globe, please check out the Creating Entities tutorial. CesiumJS can create different geometry types using entities (such as polygons and ellipsoids). For example, copy and paste the following code into the Hello World Sandcastle example to create a rectangle with a stripe pattern on the globe:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


var viewer = new Cesium.Viewer('cesiumContainer');

viewer.entities.add({
 rectangle : {
 coordinates : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
 material : new Cesium.StripeMaterialProperty({
 evenColor: Cesium.Color.WHITE,
 oddColor: Cesium.Color.BLUE,
 repeat: 5
 })
 }
});

In this tutorial, we will go under the hood and look at the geometry and appearance types that make them up. Geometry defines the structure of a Primitive, i.e., the triangles, lines, or points that make up the primitive. Appearance defines the shading of the Primitive, including its full GLSL vertex and fragment shaders, as well as the render state.

The benefits of using geometry and appearances are:

Performance: When drawing a large number of Primitives (such as polygons for every zip code in the United States), using geometry directly allows us to combine them into a single geometry to reduce CPU overhead and better utilize the GPU. Combining Primitives is done on a web worker to keep the UI responsive.
Flexibility: Primitives combine geometry and appearance. By separating them, we can modify each independently. We can add new geometries that are compatible with many different appearances, and vice versa.
Low-level access: Appearances provide close-to-the-metal rendering access without worrying about all the details of using the Renderer directly. Appearances make it easy to:
- Write full GLSL vertex and fragment shaders
- Use custom render states

Of course, there are also some drawbacks:

Using geometry and appearances directly requires more code and a deeper understanding of graphics. Entities are at an abstraction level suitable for mapping applications; geometry and appearances are at an abstraction level closer to a traditional 3D engine.
Combining geometries is effective for static data, but not necessarily for dynamic data.

Let’s rewrite the initial code example using geometry and appearances:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

// original code
//viewer.entities.add({
// rectangle : {
// coordinates : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
// material : new Cesium.StripeMaterialProperty({
// evenColor: Cesium.Color.WHITE,
// oddColor: Cesium.Color.BLUE,
// repeat: 5
// })
// }
//});

var instance = new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
 vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
 })
});

scene.primitives.add(new Cesium.Primitive({
 geometryInstances : instance,
 appearance : new Cesium.EllipsoidSurfaceAppearance({
 material : Cesium.Material.fromType('Stripe')
 })
}));

We used a Primitive (Primitive) instead of a rectangle entity, which combines geometry and appearance. For now, we will not distinguish between Geometry and GeometryInstance. An instance is not just an instance of a geometry, but also a container for it.

To create the geometry for a rectangle – the triangles covering the rectangular area and conforming to the curvature of the globe – we created a RectangleGeometry.

Since it is on the surface, we can use EllipsoidSurfaceAppearance. This saves memory by assuming the geometry is on the surface or at a constant height above the ellipsoid.

Geometry Types

CesiumJS provides the following geometries:

Combining Geometry

When we use a single Primitive to draw multiple static geometries, we see performance benefits. For example, drawing two rectangles in one Primitive.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


 var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var instance = new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
 vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
 })
});

var anotherInstance = new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(-85.0, 20.0, -75.0, 30.0),
 vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
 })
});

scene.primitives.add(new Cesium.Primitive({
 geometryInstances : [instance, anotherInstance],
 appearance : new Cesium.EllipsoidSurfaceAppearance({
 material : Cesium.Material.fromType('Stripe')
 })
}));

We created another instance with a different rectangle, then provided both instances to the Primitive. This draws both instances with the same appearance.

Some appearances allow each instance to provide unique attributes. For example, we can use PerInstanceColorAppearance to shade each instance with a different color.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var instance = new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
 vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
 }),
 attributes : {
 color : new Cesium.ColorGeometryInstanceAttribute(0.0, 0.0, 1.0, 0.8)
 }
});

var anotherInstance = new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(-85.0, 20.0, -75.0, 30.0),
 vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
 }),
 attributes : {
 color : new Cesium.ColorGeometryInstanceAttribute(1.0, 0.0, 0.0, 0.8)
 }
});

scene.primitives.add(new Cesium.Primitive({
 geometryInstances : [instance, anotherInstance],
 appearance : new Cesium.PerInstanceColorAppearance()
}));

Each instance has a color attribute. The Primitive is constructed with PerInstanceColorAppearance, which uses each instance’s color attribute to determine the shading.

Combining geometries allows CesiumJS to efficiently draw many geometries. The following example draws 2,592 uniquely colored rectangles.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var instances = [];

for (var lon = -180.0; lon < 180.0; lon += 5.0) {
 for (var lat = -85.0; lat < 85.0; lat += 5.0) {
 instances.push(new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(lon, lat, lon + 5.0, lat + 5.0),
 vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
 }),
 attributes : {
 color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom({alpha : 0.5}))
 }
 }));
 }
}

scene.primitives.add(new Cesium.Primitive({
 geometryInstances : instances,
 appearance : new Cesium.PerInstanceColorAppearance()
}));

Picking

Instances can be accessed independently after being combined. Assign an ID to an instance and use it to determine whether that instance is picked using Scene.Pick.

The following example creates an instance with an id and writes a message to the console when the instance is clicked.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var instance = new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(-100.0, 30.0, -90.0, 40.0),
 vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
 }),
 id : 'my rectangle',
 attributes : {
 color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
 }
});

scene.primitives.add(new Cesium.Primitive({
 geometryInstances : instance,
 appearance : new Cesium.PerInstanceColorAppearance()
}));

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
 var pick = scene.pick(movement.position);
 if (Cesium.defined(pick) && (pick.id === 'my rectangle')) {
 console.log('Mouse clicked rectangle.');
 }
 }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

Using id avoids keeping a reference to the entire instance in memory after the Primitive is constructed, including the geometry.

Geometry Instances

Instances can be used to position, scale, and rotate the same geometry in different parts of the scene. This is possible because multiple instances can reference the same Geometry, and each instance can have a different modelMatrix. This allows us to compute the geometry only once and reuse it multiple times.

The following example creates an EllipsoidGeometry and two instances. Each instance references the same ellipsoid geometry but uses a different modelMatrix to place it, resulting in one ellipsoid positioned above the other.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39


var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var ellipsoidGeometry = new Cesium.EllipsoidGeometry({
 vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
 radii : new Cesium.Cartesian3(300000.0, 200000.0, 150000.0)
});

var cyanEllipsoidInstance = new Cesium.GeometryInstance({
 geometry : ellipsoidGeometry,
 modelMatrix : Cesium.Matrix4.multiplyByTranslation(
 Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-100.0, 40.0)),
 new Cesium.Cartesian3(0.0, 0.0, 150000.0),
 new Cesium.Matrix4()
 ),
 attributes : {
 color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.CYAN)
 }
});

var orangeEllipsoidInstance = new Cesium.GeometryInstance({
 geometry : ellipsoidGeometry,
 modelMatrix : Cesium.Matrix4.multiplyByTranslation(
 Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-100.0, 40.0)),
 new Cesium.Cartesian3(0.0, 0.0, 450000.0),
 new Cesium.Matrix4()
 ),
 attributes : {
 color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.ORANGE)
 }
});

scene.primitives.add(new Cesium.Primitive({
 geometryInstances : [cyanEllipsoidInstance, orangeEllipsoidInstance],
 appearance : new Cesium.PerInstanceColorAppearance({
 translucent : false,
 closed : true
 })
}));

Updating Per-Instance Attributes

After geometry is added to a Primitive, update per-instance attributes of the geometry to change the visualization. Per-instance attributes include:

Color: ColorGeometryInstanceAttribute determines the color of the instance. The Primitive must have a PerInstanceColorAppearance.
Show: A boolean type that determines whether the instance is visible. All instances have this attribute.

The following demonstrates how to change the color of a geometry instance:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var circleInstance = new Cesium.GeometryInstance({
 geometry : new Cesium.CircleGeometry({
 center : Cesium.Cartesian3.fromDegrees(-95.0, 43.0),
 radius : 250000.0,
 vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
 }),
 attributes : {
 color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.5))
 },
 id: 'circle'
});
var primitive = new Cesium.Primitive({
 geometryInstances : circleInstance,
 appearance : new Cesium.PerInstanceColorAppearance({
 translucent : false,
 closed : true
 })
});
scene.primitives.add(primitive);

setInterval(function() {
 var attributes = primitive.getGeometryInstanceAttributes('circle');
 attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.fromRandom({alpha : 1.0}));
},2000);

The attributes of a geometry instance can be retrieved from the primitive using primitive.getGeometryInstanceAttributes. The properties of attributes can be changed directly.

Appearances

Geometry defines the structure. The other key property of a primitive, appearance, defines the shading of the primitive, i.e., the color of individual pixels. A primitive can have multiple geometry instances but only one appearance. Depending on the type of appearance, the appearance will have a material that defines the body of the shading.

CesiumJS has the following appearances:

Appearances define the full GLSL vertex and fragment shaders that are executed on the GPU when drawing a Primitive. Appearances also define the full render state, which controls the state of the GPU when drawing a primitive. We can define the render state directly, or use higher-level properties like “closed” and “translucent”, which the appearance will convert into render state. For example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


// Perhaps for an opaque box that the viewer will not enter.
// - Backface culled and depth tested. No blending.

var appearance = new Cesium.PerInstanceColorAppearance({
 translucent : false,
 closed : true
});

// This appearance is the same as above
var anotherAppearance = new Cesium.PerInstanceColorAppearance({
 renderState : {
 depthTest : {
 enabled : true
 },
 cull : {
 enabled : true,
 face : Cesium.CullFace.BACK
 }
 }
});

Once an appearance is created, its renderState property cannot be changed, but its material can. We can also change the appearance property of a primitive.

Most appearances also have flat and faceForward properties, which indirectly control the GLSL shaders.

flat: Flat shading. Do not consider lighting.
faceForward: When lighting, flip the normal so that it always faces the viewer. Avoids dark areas on the back side, such as the inside of a wall.

Geometry and Appearance Compatibility

Not all appearances work with all geometries. For example, the EllipsoidSurfaceAppearance does not work with WallGeometry because a wall is not on the surface of the globe.

For an appearance to be compatible with a geometry, they must have matching vertex formats, meaning the geometry must have the input data expected by the appearance. A vertexFormat can be provided when creating a geometry.

The vertexFormat of a geometry determines whether it can be combined with other geometries. Two geometries do not need to be the same type, but they need matching vertex formats.

For convenience, appearances either have a vertexFormat property or a VERTEX_FORMAT static constant that can be passed as a geometry option.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


var geometry = new Ceisum.RectangleGeometry({
 vertexFormat : Ceisum.EllipsoidSurfaceAppearance.VERTEX_FORMAT
 // ...
});

var geometry2 = new Ceisum.RectangleGeometry({
 vertexFormat : Ceisum.PerInstanceColorAppearance.VERTEX_FORMAT
 // ...
});

var appearance = new Ceisum.MaterialAppearance(/* ... */);
var geometry3 = new Ceisum.RectangleGeometry({
 vertexFormat : appearance.vertexFormat
 // ...
});

Resources

Reference documentation:

For more materials, visit: Fabric For future plans, visit: Geometry and Appearances Roadmap

Cesium Chinese website QQ group: 807482793

Cesium Chinese website: http://cesiumcn.org/ | Fast access in China: http://cesium.coinidea.com/

[CesiumJS] Cesium Intermediate Tutorial 6 – 3D Models

Thu, 23 May 2019 13:08:49 +0000

Cesium Chinese website: http://cesiumcn.org/ | Fast domestic access: http://cesium.coinidea.com/

This tutorial will teach you how to convert, load, and use 3D models in Cesium through the Primitive API. If you are new to Cesium, you may want to read the 3D models section of the Spatial Data Visualization Tutorial, referred to as “Spatial Data Visualization” in this tutorial series.

Cesium supports 3D models, including keyframe animations, skinning, and individual node picking, using glTF — an emerging industry-standard format developed by the Khronos Group (the consortium behind WebGL and COLLADA) for 3D models on the web. Cesium also provides a web-based tool to convert COLLADA models to glTF for optimized use with Cesium.

Quick Start

Cesium includes several ready-to-use binary glTF models:

An airplane with animated propellers
A ground vehicle with animated wheels
A character with skinned walk cycle
A hot air balloon
A milk truck (also available in Draco-compressed format)

These models each have their own directory in Apps/SampleData/models. Most will include the original COLLADA file (.dae), glTF file (.gltf), and/or binary glTF file (.glb). The original COLLADA file is not needed for use in a Cesium application.

Let’s write code to load these models. Open Sandcastle’s Hello World example. Below line 4 var viewer=…, add a scene variable.

1

var scene = viewer.scene;

Next, load the ground vehicle model using Cesium.Model from glTF by adding the following code.

1
2
3
4
5
6
7


var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
 Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 0.0));
var model = scene.primitives.add(Cesium.Model.fromGltf({
 url : '../../../../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb',
 modelMatrix : modelMatrix,
 scale : 200.0
}));

Press F8, then use the geocoder tool in the upper right corner to zoom to Exton, PA.

We are now looking directly at the ground vehicle. We can right-click drag to zoom in, and middle-click drag to tilt the view.

Cesium.Model.fromGltf asynchronously loads a glTF model, including any external files, and renders the model once it is fully loaded, resolving the readyPromise. Only the URL of the .gltf file is required, which in this case is ../../../../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb.

scale is provided as an optional parameter to fromGltf to enlarge the model. Many real-sized models can also appear very small. So using a larger scale value for the first test of a model is helpful, such as 200000.0, as shown below:

modelMatrix is also provided to fromGltf to position and rotate the model. This creates a local coordinate system for the model. Here, Cesium.Transforms.eastNorthUpToFixedFrame is used to create a local East-North-Up coordinate system with its origin at longitude -75.62898254394531 degrees, latitude 40.02804946899414 degrees. The model’s modelMatrix property can be changed at any time to move the model.

To visualize the coordinate system, use the Cesium Inspector by adding the following code anywhere below line 4 var viewer=…:

1

viewer.extend(Cesium.viewerCesiumInspectorMixin);

Press F8, and the inspector interface will appear in the upper left. Expand Primitives, click Pick a Primitive, click on the ground vehicle model, and then check show reference frame.

Here: the x-axis (East) is red, the y-axis (North) is green, and the z-axis (Up) is blue.

We can use the same code to load the airplane or character model by simply changing the URL passed to fromGltf to “../../../../Apps/SampleData/models/CesiumAir/Cesium-Air.glb” or “../../../../Apps/SampleData/models/CesiumMan/Cesium-Man.glb”. See the reference documentation for Cesium.Model.fromGltf for all available options.

Animations

Each of these models has built-in animations created by an artist (for example, an artist defines several key poses to create an animation), and Cesium interpolates them at runtime to create smooth animations.

To play animations, add the following code after the call to Cesium.Model.fromGltf.

1
2
3
4
5


Cesium.when(model.readyPromise).then(function(model) {
 model.activeAnimations.addAll({
 loop : Cesium.ModelAnimationLoop.REPEAT
 });
});

Since animations are stored in the glTF model, we need to wait for the readyPromise to resolve before accessing them. addAll is used to play all animations in the model. Cesium.ModelAnimationLoop.REPEAT loops the animation until it is removed from the activeAnimations collection. To play a specific animation, use add instead, providing the animation’s id (the glTF JSON property name).

In addition to the loop option, addAll and add provide many options to control the animation’s start and stop time, speed, and direction. For example, the following animation runs at half speed (relative to the Cesium clock) and in reverse.

1
2
3
4
5


model.activeAnimations.addAll({
 loop : Cesium.ModelAnimationLoop.REPEAT,
 speedup : 0.5,
 reverse : true
});

add returns a ModelAnimation object (addAll returns an array of these objects) that includes events for when the animation starts, stops, and updates each frame. For example, this allows starting one animation relative to another. See the API documentation for start, stop, and update events.

Animations are synchronized with the Cesium clock, so to see them, press play on the play widget. You can use the timeline and play widget to increase, decrease, and reverse the animation speed.

To configure the application to automatically play animations, initialize the viewer as follows:

1
2
3


var viewer = new Cesium.Viewer('cesiumContainer', {
 shouldAnimate : true
});

Picking

As with all Cesium primitives, Scene.pick will return a model as part of its result if one is picked. Additionally, the ids (JSON property names) of the glTF node and glTF mesh are returned, enabling precise picking of different model parts. The following example displays the node and mesh names under the mouse cursor in the console window.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(
 function (movement) {
 var pick = scene.pick(movement.endPosition);
 if (Cesium.defined(pick) && Cesium.defined(pick.node) && Cesium.defined(pick.mesh)) {
 console.log('node: ' + pick.node.name + '. mesh: ' + pick.mesh.name);
 }
 },
 Cesium.ScreenSpaceEventType.MOUSE_MOVE
);

Converting COLLADA to glTF

To fully convert COLLADA models to glTF format for use with Cesium, you can use the web-based COLLADA-to-glTF converter. This tool can convert .dae files and image files into a .gltf file with embedded images.

Troubleshooting

If you encounter problems loading a 3D model in Cesium, first determine where the problem lies. The issue may be in:

The modeling tool’s exporter, such as Maya, Modo, SketchUp, etc.
The COLLADA-to-glTF conversion tool
The Cesium glTF renderer

Troubleshooting on Mac

On Mac, to determine whether a COLLADA file was exported correctly, double-click the .dae file, which should display in the Preview window. If the model has animations, hovering over the bottom of the window will reveal a toolbar to play them.

If the COLLADA file is invalid, Preview will display an error. This usually indicates a bug in the COLLADA exporter used to create the COLLADA file.

To troubleshoot this, install Xcode, then right-click the .dae file and select Open With -> Xcode.

Xcode displays the model similarly to Preview but with more features, such as the ability to select individual nodes. Xcode also implements many workarounds for invalid COLLADA files, so it can often load and preview COLLADA files that Preview cannot. If the model loads in Xcode, select File -> Save to save the model with the workarounds applied, and it should then load in Preview.

If it still doesn’t load in Preview, then there is an issue with the COLLADA exporter. Make sure you have the latest version of the modeling tool, and try the tips in this article. If it still doesn’t work, file a bug with the modeling tool (not Cesium). It’s also worth trying to export as .fbx or another format, then importing into another modeling tool with a better COLLADA exporter.

Troubleshooting on Windows

On Windows, Visual Studio 2013 includes a model editor in the free Community Edition that can load COLLADA models. To determine whether the COLLADA file was exported correctly, drag the .dae file into Visual Studio and it should load. If it doesn’t load, this usually indicates a bug in the COLLADA exporter. Make sure you have the latest version of the modeling tool, and try the tips in this article. If it still doesn’t work, file a bug with the modeling tool (not Cesium). It’s also worth trying to export as .fbx or another format, then importing into another modeling tool with a better COLLADA exporter.

If you don’t have Visual Studio, Autodesk has a WebGL viewer that allows drag and drop and doesn’t require login. The viewer does not support animations. If the model has images, upload a zip package containing the .dae and image files.

Troubleshooting in Cesium

Once we have a valid COLLADA file, run it through the COLLADA-to-glTF converter, then try loading it into Cesium. If it doesn’t load into Cesium or displays incorrectly, there is a bug in either the converter or Cesium. To get more details, open the browser’s developer tools (Ctrl-Shift-I in Chrome) and enable Pause on all exceptions (in Chrome’s Sources tab), then reload the Cesium application.

Post a message to the Cesium Forum, and we can usually provide a workaround until a fix is available. In your post, please include:

The original COLLADA and converted glTF files. We understand that not everyone can share their models, but if you can, it greatly improves our ability to help.
The browser’s console window and any exceptions thrown when loading the model, for example:

Resources

Check out the 3D Models example in Sandcastle and the reference documentation for Model and ModelAnimationCollection.

Cesium Chinese community QQ group: 807482793

Cesium Chinese website: http://cesiumcn.org/ | Fast domestic access: http://cesium.coinidea.com/

[CesiumJS] Cesium Intermediate Tutorial 5 - Terrain

Wed, 22 May 2019 09:33:44 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

CesiumJS supports streaming and visualizing high-resolution terrain along with water-related effects for oceans, lakes, and rivers. View mountain peaks, valleys, and other terrain features while embracing the 3D digital globe. Stream your own tiled terrain data or high-resolution managed terrain such as Cesium World Terrain using Cesium ion.

Quick Start

Open the Sandcastle Hello World example. By default, the globe is a WGS84 ellipsoid. Specify a different terrain provider by passing the terrainProvider option to Viewer. Let’s use Cesium World Terrain:

1
2
3
4


Cesium.Ion.defaultAccessToken = 'your_access_token';
var viewer = new Cesium.Viewer('cesiumContainer', {
 terrainProvider : Cesium.createWorldTerrain()
});

NOTE: Create a Cesium account. This tutorial uses terrain provided by Cesium ion. Create an account to obtain an access token for using terrain in this tutorial. Sign up here. The example code above will automatically update with your token. If you already have an account, sign in.

After modifying the example, press F8 to run it. Zoom to a mountainous area, hold the middle mouse button and drag to tilt to a horizon view. Here is what Mount Everest looks like:

As we zoom closer, CesiumJS fetches higher resolution terrain based on which parts of the globe are visible and how far away they are.

Terrain and imagery are handled separately, and any imagery provider can be used with any terrain provider. See the Imagery Layers Tutorial for managing imagery.

Enabling Terrain Lighting and Water Effects

Cesium World Terrain also includes terrain lighting data and coastline data needed for water effects. By default, this data is not sent along with terrain tiles. To enable terrain lighting, set requestVertexNormals to true and turn on global lighting.

1
2
3
4
5
6


var viewer = new Cesium.Viewer('cesiumContainer', {
 terrainProvider : Cesium.createWorldTerrain({
 requestVertexNormals: true
 })
});
viewer.scene.globe.enableLighting = true;

Below is the same view of Mount Everest with terrain lighting enabled based on sun position.

Enable water effects in a similar way using requestWaterMask:

1
2
3
4
5


var viewer = new Cesium.Viewer('cesiumContainer', {
 terrainProvider : Cesium.createWorldTerrain({
 requestWaterMask: true
 })
});

Zoom to an area with water to see the effect. Here is the San Francisco Bay:

Over time, waves ripple and bright specular reflections from the sun and moon appear. Customize the water effect using Globe.oceanNormalMapUrl for wave creation. Changing the imagery provider also affects the appearance of the water, as the water color blends with the underlying imagery.

See the Sandcastle Terrain example to explore some interesting terrain and water effect areas.

Terrain Ready for Streaming

Cesium World Terrain: High-resolution world terrain with extended support for terrain lighting and water effects. Cesium World Terrain supports online access via Cesium ion and paid downloads for offline access. Adding it to your Cesium application will quickly improve terrain visualization. Cesium World Terrain is also available via on-premise deployment.

Terrain Providers

Cesium supports several methods for requesting terrain based on terrain providers. Most terrain providers use REST interfaces over HTTP to request terrain tiles. Terrain providers differ based on the format of the request and how the terrain data is organized. CesiumJS supports the following terrain providers:

CesiumTerrainProvider: Supports quantized-mesh terrain tiles optimized for terrain streaming. Compatible with terrain served by Cesium ion and output from the 3D tiling pipeline.
GoogleEarthEnterpriseTerrainProvider: Supports heightmap terrain generated by your Google Earth Enterprise server.
VRTheWorldTerrainProvider: Supports heightmap terrain requested from VT MAK VR-TheWorld Server.
EllipsoidTerrainProvider: Procedurally creates the surface of an ellipsoid. Lacks realistic terrain appearance but does not request data from a server.

Terrain provider construction is similar to imagery providers and typically includes the terrain server URL and an optional proxy if the server does not support Cross-Origin Resource Sharing (CORS).

Resources

View the Terrain example in Sandcastle and reference documentation for all terrain providers.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

[CesiumJS] Cesium Intermediate Tutorial 4 - Spatial Data Visualization (Part 2)

Wed, 22 May 2019 02:15:02 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Entity Features in Viewer

Let’s look at the functions that Viewer provides for manipulating entities.

Selection and Description

Clicking an entity in the Viewer will display a SelectionIndicator widget at the entity’s location, providing an InfoBox for presenting more information. We can set name to define the title of the InfoBox. We can also provide the Entity.description property in HTML format.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


wyoming.name = 'wyoming';
wyoming.description = '\
<img\
 width="50%"\
 style="float:left; margin: 0 1em 1em 0;"\
 src="//cesium.com/docs/tutorials/creating-entities/Flag_of_Wyoming.svg"/>\
<p>\
 Wyoming is a state in the mountain region of the Western \
 United States.\
</p>\
<p>\
 Wyoming is the 10th most extensive, but the least populous \
 and the second least densely populated of the 50 United \
 States. The western two thirds of the state is covered mostly \
 with the mountain ranges and rangelands in the foothills of \
 the eastern Rocky Mountains, while the eastern third of the \
 state is high elevation prairie known as the High Plains. \
 Cheyenne is the capital and the most populous city in Wyoming, \
 with a population estimate of 63,624 in 2017.\
</p>\
<p>\
 Source: \
 <a style="color: WHITE"\
 target="_blank"\
 href="http://en.wikipedia.org/wiki/Wyoming">Wikipedia</a>\
</p>';

All HTML displayed in the InfoBox is sandboxed. This prevents external data sources from injecting malicious content into the Cesium application. To run JavaScript or browser plugins within the description, access the sandboxed iframe via the viewer.infoBox.frame property. Refer to this article for more information on controlling iframe sandboxing.

Camera Controls

Use the viewer.zoomTo command to view a specific Entity. There is also a viewer.flyTo method for performing animated Camera flights to an Entity. Both methods can be passed an Entity, EntityCollection, DataSource, or an array of entities.

Either method will calculate the view for all provided entities. By default, the Camera faces north and looks down at a 45-degree angle. Customize this by passing in a HeadingPitchRange.

1
2
3


var heading = Cesium.Math.toRadians(90);
var pitch = Cesium.Math.toRadians(-30);
viewer.zoomTo(wyoming, new Cesium.HeadingPitchRange(heading, pitch));

zoomTo and flyTo are both asynchronous functions; that is, they are not guaranteed to complete before returning. For example, flying to an Entity happens over many animation frames. Both functions return Promises that can be used to schedule actions to perform after the flight or zoom completes. Replace zoomTo in the example with the following code snippet. This flies to Wyoming and selects it after the flight ends.

1
2
3
4
5


viewer.flyTo(wyoming).then(function(result){
 if (result) {
 viewer.selectedEntity = wyoming;
 }
});

The result parameter passed to the callback function will be true if the flight completed successfully; false if the flight was cancelled – that is, the user initiated another flight or zoom before this one completed; or if the target had no corresponding visualization, i.e., nothing to zoom to.

Sometimes, especially when working with time-dynamic data, we want the Camera to focus on and follow an entity rather than the center of the Earth. This can be accomplished by setting viewer.trackedEntity. Tracking an entity requires setting a position.

1
2


wyoming.position = Cesium.Cartesian3.fromDegrees(-107.724, 42.68);
viewer.trackedEntity = wyoming;

To stop tracking, set viewer.trackedEntity to undefined or double-click away from the entity. Calling zoomTo or flyTo will also cancel tracking.

Managing Entities

EntityCollection is an associative array for managing and monitoring a group of entities. viewer.entities is an EntityCollection. EntityCollection includes methods for managing entities such as add, remove, and removeAll.

Sometimes we need to update entities we previously created. All entity instances have a unique id that can be used to retrieve entities from the collection. We can assign an ID to an entity, otherwise one will be automatically generated.

1
2
3


viewer.entities.add({
 id : 'uniqueId'
});

Use getById to retrieve an entity. If no entity with the provided ID exists, undefined is returned.

1

var entity = viewer.entities.getById('uniqueId');

To get an entity or create a new one if it doesn’t exist, use getOrCreateEntity.

1

var entity = viewer.entities.getOrCreateEntity('uniqueId');

Manually create a new entity and use add to add it to the collection. This method will throw an exception if an entity with the same id already exists in the collection.

1
2
3
4


var entity = new Entity({
 id: 'uniqueId'
});
viewer.entities.add(entity);

EntityCollection emits events using the CollectionChanged event. Listeners are notified when entities are added, removed, or updated in the collection.

Use the [Geometry Showcase] (https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=Geometry and Appearances.html&label=Showcases) example in Sandcastle. Paste the following code after the line that creates the viewer.

1
2
3
4
5
6
7
8


function onChanged(collection, added, removed, changed){
 var msg = 'Added ids';
 for(var i = 0; i < added.length; i++) {
 msg += '\n' + added[i].id;
 }
 console.log(msg);
}
viewer.entities.collectionChanged.addEventListener(onChanged);

When running the example, you should see about 65 messages in the console, one for each call to viewer.entities.add.

When updating a large number of entities at once, it is more performant to queue the updates and send a single event at the end. This allows Cesium to process the required changes in a single pass. At the end of the example, call viewer.entities.suspendEvents before viewer.entities.add, and call viewer.entities.resumeEvents after. When running the demo again, we now get a single event containing all 65 entities. These calls are reference-counted, so multiple suspend and resume calls can be nested.

Picking

Picking (clicking to select an object) is an area where we need brief interaction with the base API. Use scene.pick and scene.drillPick to retrieve entities.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44


/**
 * Returns the top-most entity at the provided window coordinates
 * or undefined if no entity is at that location.
 *
 * @param {Cartesian2} windowPosition The window coordinates.
 * @returns {Entity} The picked entity or undefined.
 */
function pickEntity(viewer, windowPosition) {
 var picked = viewer.scene.pick(windowPosition);
 if (defined(picked)) {
 var id = Cesium.defaultValue(picked.id, picked.primitive.id);
 if (id instanceof Cesium.Entity) {
 return id;
 }
 }
 return undefined;
};

/**
 * Returns the list of entities at the provided window coordinates.
 * The entities are sorted front to back by their visual order.
 *
 * @param {Cartesian2} windowPosition The window coordinates.
 * @returns {Entity[]} The picked entities or undefined.
 */
function drillPickEntities(viewer, windowPosition) {
 var i;
 var entity;
 var picked;
 var pickedPrimitives = viewer.scene.drillPick(windowPosition);
 var length = pickedPrimitives.length;
 var result = [];
 var hash = {};

 for (i = 0; i < length; i++) {
 picked = pickedPrimitives[i];
 entity = Cesium.defaultValue(picked.id, picked.primitive.id);
 if (entity instanceof Cesium.Entity && !Cesium.defined(hash[entity.id])) {
 result.push(entity);
 hash[entity.id] = true;
 }
 }
 return result;
};

Points, Billboards, and Labels

Create graphical points or labels by setting position, point, and label. For example, place a point at our favorite sports team’s home stadium.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


var viewer = new Cesium.Viewer('cesiumContainer');

var citizensBankPark = viewer.entities.add({
 name : 'Citizens Bank Park',
 position : Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
 point : {
 pixelSize : 5,
 color : Cesium.Color.RED,
 outlineColor : Cesium.Color.WHITE,
 outlineWidth : 2
 },
 label : {
 text : 'Citizens Bank Park',
 font : '14pt monospace',
 style: Cesium.LabelStyle.FILL_AND_OUTLINE,
 outlineWidth : 2,
 verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
 pixelOffset : new Cesium.Cartesian2(0, -9)
 }
});

viewer.zoomTo(viewer.entities);

By default, labels are horizontally and vertically centered. Since the label and point share the same position, they overlap on screen. To avoid this, specify the label origin as VerticalOrigin.BOTTOM and set the pixel offset to (0, -9). Replace the point with a billboard, which is a marker that always faces the user.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


var citizensBankPark = viewer.entities.add({
 position : Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
 billboard : {
 image : '//cesiumjs.org/tutorials/Visualizing-Spatial-Data/images/Philadelphia_Phillies.png',
 width : 64,
 height : 64
 },
 label : {
 text : 'Citizens Bank Park',
 font : '14pt monospace',
 style: Cesium.LabelStyle.FILL_AND_OUTLINE,
 outlineWidth : 2,
 verticalOrigin : Cesium.VerticalOrigin.TOP,
 pixelOffset : new Cesium.Cartesian2(0, 32)
 }
});

For more customization options, see the Sandcastle Labels and Billboards examples.

3D Models

CesiumJS supports creating 3D models via glTF (runtime asset format). You can find example models in the 3D models Sandcastle.

Set a position and URI to a glTF model to create a model entity.

1
2
3
4
5
6
7
8


var viewer = new Cesium.Viewer('cesiumContainer');
var entity = viewer.entities.add({
 position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
 model : {
 uri : '../../../../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb'
 }
});
viewer.trackedEntity = entity;

By default, the model is upright and faces east. Control the model’s orientation by specifying a Quaternion for the Entity.orientation property. This controls the model’s heading, pitch, and roll.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


var viewer = new Cesium.Viewer('cesiumContainer');
var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706);
var heading = Cesium.Math.toRadians(45.0);
var pitch = Cesium.Math.toRadians(15.0);
var roll = Cesium.Math.toRadians(0.0);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(heading, pitch, roll));

var entity = viewer.entities.add({
 position : position,
 orientation : orientation,
 model : {
 uri : '../../../../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb'
 }
});
viewer.trackedEntity = entity;

For more advanced model features, see the 3D Models tutorial. If you create your own models, be sure to check our post on glTF Tips for Artists.

The Property System

All values we define for entities are stored as property objects. For example, see the value of Wyoming’s outline:

1

console.log(typeof wyoming.polygon.outline);

outline is an instance of ConstantProperty. This tutorial uses a shorthand called implicit property conversion, which automatically takes raw values and creates the corresponding Property under the hood. Without this shorthand, we would have to write a longer version of the initial example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


var wyoming = new Cesium.Entity();
wyoming.name = 'Wyoming';

var polygon = new Cesium.PolygonGraphics();
polygon.material = new Cesium.ColorMaterialProperty(Cesium.Color.RED.withAlpha(0.5));
polygon.outline = new Cesium.ConstantProperty(true);
polygon.outlineColor = new Cesium.ConstantProperty(Cesium.Color.BLACK);
wyoming.polygon = polygon;

viewer.entities.add(wyoming);

Properties are used because the Entity API can represent not only constant values but also values that change over time. See the Callback Property and Interpolation Sandcastle examples for some time-dynamic properties.

Resources

For examples on how to style and create entities using GeoJSON and CZML, see the Cesium Workshop Tutorial.

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

[CesiumJS] Cesium Intermediate Tutorial 3 - Camera

Mon, 20 May 2019 15:43:53 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

Camera

The Camera in CesiumJS controls the view of the scene. There are many ways to manipulate the Camera, such as rotate, zoom, pan, and flyTo. CesiumJS has mouse and touch events for handling Camera interactions, as well as an API for programmatically manipulating the camera. Learn how to use the Camera API and customize Camera controls.

Default Camera Behavior

Open the Hello World example in Sandcastle to experience the default camera controls. The default operations are as follows:

English Version

Mouse Action	3D	2D	Columbus View
Left click + drag	Rotate around the globe	Translate over the map	Translate over the map
Right click + drag	Zoom in and out	Zoom in and out	Zoom in and out
Middle wheel scrolling	Zoom in and out	Zoom in and out	Zoom in and out
Middle click + drag	Tilt the globe	No action	Tilt the map

Chinese Version

Mouse Action	3D	2D	Columbus View
Left click + drag	Rotate globe	Pan map	Pan map
Right click + drag	Zoom	Zoom	Zoom
Middle wheel	Zoom	Zoom	Zoom
Middle click + drag	Tilt globe	No action	Tilt globe

Use the setView function to set the Camera’s position and orientation. The destination can be a Cartesian3 or Rectangle, and the orientation can be heading/pitch/roll or direction/up. Heading, pitch, and roll are defined in radians. Heading is the rotation from local north with positive angles increasing eastward. Pitch is the rotation from the local east-north plane. Positive pitch is above the plane. Negative pitch is below the plane. Roll is the first rotation applied around the local east axis.

1
2
3
4
5
6
7
8


camera.setView({
 destination: new Cesium.Cartesian3(x, y, z),
 orientation: {
 heading: headingAngle,
 pitch: pitchAngle,
 roll: rollAngle
 }
});

1
2
3
4
5
6
7
8


viewer.camera.setView({
 destination: Cesium.Rectangle.fromDegrees(west, south, east, north),
 orientation: {
 heading: headingAngle,
 pitch: pitchAngle,
 roll: rollAngle
 }
});

All of the above parameters are optional. If not specified, parameter values will default to the current Camera position and orientation.

Custom Camera Mouse or Keyboard Events

Create our own event handlers to control Camera orientation based on mouse direction, and keyboard keys to move the Camera forward, left, right, up, and down. Start by disabling the default event handlers. Add the following code after (`javascript var viewe=…`):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


var scene = viewer.scene;
var canvas = viewer.canvas;
canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas
canvas.onclick = function() {
 canvas.focus();
};
var ellipsoid = viewer.scene.globe.ellipsoid;

// disable the default event handlers
scene.screenSpaceCameraController.enableRotate = false;
scene.screenSpaceCameraController.enableTranslate = false;
scene.screenSpaceCameraController.enableZoom = false;
scene.screenSpaceCameraController.enableTilt = false;
scene.screenSpaceCameraController.enableLook = false;

Create variables to record the current mouse position, then flag and track Camera movement:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


var startMousePosition;
var mousePosition;
var flags = {
 looking: false,
 moveForward: false,
 moveBackward: false,
 moveUp: false,
 moveDown: false,
 moveLeft: false,
 moveRight: false
};

Add an event handler to set the flag and record the current mouse position when the left mouse button is clicked:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


var handler = new Cesium.ScreenSpaceEventHandler(canvas);

handler.setInputAction(function(movement) {
 flags.looking = true;
 mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position);
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

handler.setInputAction(function(movement) {
 mousePosition = movement.endPosition;
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

handler.setInputAction(function(position) {
 flags.looking = false;
}, Cesium.ScreenSpaceEventType.LEFT_UP);

Create keyboard event handlers to toggle Camera movement flags. We set flags for the following keys and behaviors:

w Camera moves forward.
s Camera moves backward.
a Camera moves left.
d Camera moves right.
q Camera moves up.
e Camera moves down.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


function getFlagForKeyCode(keyCode) {
 switch (keyCode) {
 case 'W'.charCodeAt(0):
 return 'moveForward';
 case 'S'.charCodeAt(0):
 return 'moveBackward';
 case 'Q'.charCodeAt(0):
 return 'moveUp';
 case 'E'.charCodeAt(0):
 return 'moveDown';
 case 'D'.charCodeAt(0):
 return 'moveRight';
 case 'A'.charCodeAt(0):
 return 'moveLeft';
 default:
 return undefined;
 }
}

document.addEventListener('keydown', function(e) {
 var flagName = getFlagForKeyCode(e.keyCode);
 if (typeof flagName !== 'undefined') {
 flags[flagName] = true;
 }
}, false);

document.addEventListener('keyup', function(e) {
 var flagName = getFlagForKeyCode(e.keyCode);
 if (typeof flagName !== 'undefined') {
 flags[flagName] = false;
 }
}, false);

Now when a flag indicates an event has occurred (is true), we update the camera. We add an onTick listener to the clock:

1
2
3


viewer.clock.onTick.addEventListener(function(clock) {
 var camera = viewer.camera;
});

Next, we make the Camera point in the direction the mouse is pointing. Add the following code to the event listener function after the variable declaration:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


if (flags.looking) {
 var width = canvas.clientWidth;
 var height = canvas.clientHeight;

 // Coordinate (0.0, 0.0) will be where the mouse was clicked.
 var x = (mousePosition.x - startMousePosition.x) / width;
 var y = -(mousePosition.y - startMousePosition.y) / height;

 var lookFactor = 0.05;
 camera.lookRight(x * lookFactor);
 camera.lookUp(y * lookFactor);
}

lookRight and lookUp only require an angle parameter representing the rotation angle. We convert the mouse coordinates to the range (-1.0, 1.0), with coordinate (0.0, 0.0) at the center of the canvas. The distance of the mouse from the center determines the rotation speed. Positions closer to the center move the Camera slower, while positions farther from the center move the Camera faster.

Finally, add code to move the Camera position. Then add the following code to the event handler function:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


// Change movement speed based on the distance of the camera to the surface of the ellipsoid.
var cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;
var moveRate = cameraHeight / 100.0;

if (flags.moveForward) {
 camera.moveForward(moveRate);
}
if (flags.moveBackward) {
 camera.moveBackward(moveRate);
}
if (flags.moveUp) {
 camera.moveUp(moveRate);
}
if (flags.moveDown) {
 camera.moveDown(moveRate);
}
if (flags.moveLeft) {
 camera.moveLeft(moveRate);
}
if (flags.moveRight) {
 camera.moveRight(moveRate);
}

The moveForward, moveBackward, moveUp, moveDown, moveLeft, and moveRight methods only require a distance parameter (in meters) for moving the Camera. When each key is pressed, the Camera moves a fixed distance along the ellipsoid surface. The closer the Camera is to the ground, the slower it moves.

Complete code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116


var viewer = new Cesium.Viewer('cesiumContainer');

var scene = viewer.scene;
var canvas = viewer.canvas;
canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas
canvas.onclick = function() {
 canvas.focus();
};
var ellipsoid = viewer.scene.globe.ellipsoid;

// disable the default event handlers
scene.screenSpaceCameraController.enableRotate = false;
scene.screenSpaceCameraController.enableTranslate = false;
scene.screenSpaceCameraController.enableZoom = false;
scene.screenSpaceCameraController.enableTilt = false;
scene.screenSpaceCameraController.enableLook = false;

var startMousePosition;
var mousePosition;
var flags = {
 looking : false,
 moveForward : false,
 moveBackward : false,
 moveUp : false,
 moveDown : false,
 moveLeft : false,
 moveRight : false
};

var handler = new Cesium.ScreenSpaceEventHandler(canvas);

handler.setInputAction(function(movement) {
 flags.looking = true;
 mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position);
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

handler.setInputAction(function(movement) {
 mousePosition = movement.endPosition;
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

handler.setInputAction(function(position) {
 flags.looking = false;
}, Cesium.ScreenSpaceEventType.LEFT_UP);

function getFlagForKeyCode(keyCode) {
 switch (keyCode) {
 case 'W'.charCodeAt(0):
 return 'moveForward';
 case 'S'.charCodeAt(0):
 return 'moveBackward';
 case 'Q'.charCodeAt(0):
 return 'moveUp';
 case 'E'.charCodeAt(0):
 return 'moveDown';
 case 'D'.charCodeAt(0):
 return 'moveRight';
 case 'A'.charCodeAt(0):
 return 'moveLeft';
 default:
 return undefined;
 }
}

document.addEventListener('keydown', function(e) {
 var flagName = getFlagForKeyCode(e.keyCode);
 if (typeof flagName !== 'undefined') {
 flags[flagName] = true;
 }
}, false);

document.addEventListener('keyup', function(e) {
 var flagName = getFlagForKeyCode(e.keyCode);
 if (typeof flagName !== 'undefined') {
 flags[flagName] = false;
 }
}, false);

viewer.clock.onTick.addEventListener(function(clock) {
 var camera = viewer.camera;

 if (flags.looking) {
 var width = canvas.clientWidth;
 var height = canvas.clientHeight;

 // Coordinate (0.0, 0.0) will be where the mouse was clicked.
 var x = (mousePosition.x - startMousePosition.x) / width;
 var y = -(mousePosition.y - startMousePosition.y) / height;

 var lookFactor = 0.05;
 camera.lookRight(x * lookFactor);
 camera.lookUp(y * lookFactor);
 }

 // Change movement speed based on the distance of the camera to the surface of the ellipsoid.
 var cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;
 var moveRate = cameraHeight / 100.0;

 if (flags.moveForward) {
 camera.moveForward(moveRate);
 }
 if (flags.moveBackward) {
 camera.moveBackward(moveRate);
 }
 if (flags.moveUp) {
 camera.moveUp(moveRate);
 }
 if (flags.moveDown) {
 camera.moveDown(moveRate);
 }
 if (flags.moveLeft) {
 camera.moveLeft(moveRate);
 }
 if (flags.moveRight) {
 camera.moveRight(moveRate);
 }
});

Full code available here)

Camera

Camera represents the state of the Camera’s current position, orientation, reference frame, and view frustum. The Camera vectors above are orthogonal in each frame. The *move*_ and _zoom** functions translate the Camera’s position along its direction or a specified direction vector. The direction remains fixed.

The *look*_ and _twist** functions rotate the Camera’s direction, such as up or right vectors. The position remains fixed.

The *rotate** functions rotate the position and direction based on a given vector.

Functions set the Camera position and orientation given an extent or position and target. For example:

1
2
3
4
5
6


var west = Cesium.Math.toRadians(-77.0);
var south = Cesium.Math.toRadians(38.0);
var east = Cesium.Math.toRadians(-72.0);
var north = Cesium.Math.toRadians(42.0);
var extent = new Cesium.Extent(west, south, east, north);
camera.viewExtent(extent, Cesium.Ellipsoid.WGS84);

Create a ray variable by picking the Camera’s position through a pixel. This method can be used for picking, for example:

1
2
3


// find intersection of the pixel picked and an ellipsoid
var ray = camera.getPickRay(mousePosition);
var intersection = Cesium.IntersectionTests.rayEllipsoid(ray, Cesium.Ellipsoid.WGS84);

Screen space camera controller

ScreenSpaceCameraController converts user input (such as mouse and touch) from window coordinates to Camera movement. It contains properties for enabling and disabling different types of input, modifying the amount of inertia, and minimum and maximum zoom distances.

Resources

View camera example code in Sandcastle:

API documentation:

Cesium Chinese Website QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China Fast Access: http://cesium.coinidea.com/

[vsftpd] vsftpd Passive Mode Configuration

Wed, 10 Apr 2019 02:56:05 +0000

vsftpd.conf

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140


# Example config file /etc/vsftpd/vsftpd.conf
#
# The default compiled in settings are fairly paranoid. This sample file
# loosens things up a bit, to make the ftp daemon more usable.
# Please see vsftpd.conf.5 for all compiled in defaults.
#
# READ THIS: This example file is NOT an exhaustive list of vsftpd options.
# Please read the vsftpd.conf.5 manual page to get a full idea of vsftpd's
# capabilities.
#
# Allow anonymous FTP? (Beware - allowed by default if you comment this out).
anonymous_enable=NO
#
# Uncomment this to allow local users to log in.
# When SELinux is enforcing check for SE bool ftp_home_dir
local_enable=YES
#
# Uncomment this to enable any form of FTP write command.
write_enable=YES
#
# Default umask for local users is 077. You may wish to change this to 022,
# if your users expect that (022 is used by most other ftpd's)
local_umask=022
#
# Uncomment this to allow the anonymous FTP user to upload files. This only
# has an effect if the above global write enable is activated. Also, you will
# obviously need to create a directory writable by the FTP user.
# When SELinux is enforcing check for SE bool allow_ftpd_anon_write, allow_ftpd_full_access
#anon_upload_enable=YES
#
# Uncomment this if you want the anonymous FTP user to be able to create
# new directories.
#anon_mkdir_write_enable=YES
#
# Activate directory messages - messages given to remote users when they
# go into a certain directory.
dirmessage_enable=YES
#
# Activate logging of uploads/downloads.
xferlog_enable=YES
#
# Make sure PORT transfer connections originate from port 20 (ftp-data).
connect_from_port_20=YES
#
# If you want, you can arrange for uploaded anonymous files to be owned by
# a different user. Note! Using "root" for uploaded files is not
# recommended!
#chown_uploads=YES
#chown_username=whoever
#
# You may override where the log file goes if you like. The default is shown
# below.
#xferlog_file=/var/log/xferlog
#
# If you want, you can have your log file in standard ftpd xferlog format.
# Note that the default log file location is /var/log/xferlog in this case.
xferlog_std_format=YES
#
# You may change the default value for timing out an idle session.
#idle_session_timeout=600
#
# You may change the default value for timing out a data connection.
#data_connection_timeout=120
#
# It is recommended that you define on your system a unique user which the
# ftp server can use as a totally isolated and unprivileged user.
#nopriv_user=ftpsecure
#
# Enable this and the server will recognise asynchronous ABOR requests. Not
# recommended for security (the code is non-trivial). Not enabling it,
# however, may confuse older FTP clients.
#async_abor_enable=YES
#
# By default the server will pretend to allow ASCII mode but in fact ignore
# the request. Turn on the below options to have the server actually do ASCII
# mangling on files when in ASCII mode.
# Beware that on some FTP servers, ASCII support allows a denial of service
# attack (DoS) via the command "SIZE /big/file" in ASCII mode. vsftpd
# predicted this attack and has always been safe, reporting the size of the
# raw file.
# ASCII mangling is a horrible feature of the protocol.
#ascii_upload_enable=YES
#ascii_download_enable=YES
#
# You may fully customise the login banner string:
ftpd_banner=Welcome to blah FTP service.
#
# You may specify a file of disallowed anonymous e-mail addresses. Apparently
# useful for combatting certain DoS attacks.
#deny_email_enable=YES
# (default follows)
#banned_email_file=/etc/vsftpd/banned_emails
#
# You may specify an explicit list of local users to chroot() to their home
# directory. If chroot_local_user is YES, then this list becomes a list of
# users to NOT chroot().
# (Warning! chroot'ing can be very dangerous. If using chroot, make sure that
# the user does not have write access to the top level directory within the
# chroot)
chroot_local_user=YES
chroot_list_enable=NO
# (default follows)
chroot_list_file=/etc/vsftpd/chroot_list
#
# You may activate the "-R" option to the builtin ls. This is disabled by
# default to avoid remote users being able to cause excessive I/O on large
# sites. However, some broken FTP clients such as "ncftp" and "mirror" assume
# the presence of the "-R" option, so there is a strong case for enabling it.
#ls_recurse_enable=YES
#
# When "listen" directive is enabled, vsftpd runs in standalone mode and
# listens on IPv4 sockets. This directive cannot be used in conjunction
# with the listen_ipv6 directive.
listen=YES
#
# This directive enables listening on IPv6 sockets. By default, listening
# on the IPv6 "any" address (::) will accept connections from both IPv6
# and IPv4 clients. It is not necessary to listen on *both* IPv4 and IPv6
# sockets. If you want that (perhaps because you want to listen on specific
# addresses) then you must run two copies of vsftpd with two configuration
# files.
# Make sure, that one of the listen options is commented !!
listen_ipv6=NO

pam_service_name=vsftpd
userlist_enable=YES
tcp_wrappers=YES
local_root=/ftp
anon_root=/ftp
use_localtime=YES
user_config_dir=/etc/vsftpd/userconfig
pasv_enable=yes
pasv_min_port=41000
pasv_max_port=42000
allow_writeable_chroot=YES
listen_port=21
xferlog_file=/var/log/vsftpd.log
pasv_address=your_ip
pasv_addr_resolve=yes
pasv_promiscuous=YES

user_list

1

# Comment out everything in this file

chroot_list

1
2


ftpuser
ftpsubuser

/etc/vsftpd/userconfig/ftpsubuser

1

local_root=/ftp/ftpsubuser/

Commands to execute:

1
2
3
4
5


sudo useradd ftpuser -d /ftp -s /sbin/nologin -m
passwd ftpuser

sudo useradd ftpsubuser -d /ftp/ftpsubuser -s /sbin/nologin -m
passwd ftpsubuser

[Docker]Docker Common Commands Cheat Sheet

Wed, 10 Apr 2019 02:45:13 +0000

A recent project involved MongoDB clusters, Spark clusters, Hadoop clusters, Python 2.7, Python 3.5, various recommendation algorithms, Java Resin environment, LNMP environment, vsftpd, and more. Because it needed to be deployed across intranet, testing, and production environments, each deployment was painful. This is where Docker’s benefits really shone – packing Python environments, LNMP environments, vsftpd, and everything else into Docker containers was extremely satisfying. After 2 months of deployment and integration testing, I compiled some practical Docker commands. System environment: CentOS 7

Download, install Docker, and start the service
https://download.docker.com/linux/centos/7/x86_64/stable/Packages/
Download docker-ce-18.03.1.ce-1.el7.centos.x86_64.rpm
1 2

yum install docker-ce-18.03.1.ce-1.el7.centos.x86_64.rpm service docker start

Common Docker commands
Fix error: WARNING: IPv4 forwarding is disabled. Networking will not work.

Step 1: On the host machine, run echo "net.ipv4.ip_forward=1" >>/usr/lib/sysctl.d/00-system.conf

Step 2: Restart network and Docker services

1

[root@localhost /]# systemctl restart network && systemctl restart docker

Failed to get D-Bus connection: Operation not permitted

1

docker run -d --name centos7 --privileged=true --net=host -v /home/code:/home/code centos:mysql_python3_jdk1.8 /usr/sbin/init

Run a Docker container for a long time with host path mounting

1

docker run -dit -v /home/code:/home/code python35:latest /bin/bash

Enter a running Docker container

1

docker exec -it container_id /bin/bash

Start a container image

1

docker run -it python35:latest /bin/bash

Docker export:

1

docker export -o /home/python35.tar container_id

docker save *.tar

Docker import:

1

docker import /home/python35.tar

docker load < *.tar

Docker tagging

1

docker tag image_id REPOSITORY:TAG

Docker specify host network

1

docker run -dit --net=host python35:latest /bin/bash

Docker sync container and host time

1

docker run -dit -v /etc/localtime:/etc/localtime python35:latest /bin/bash

Install JDK 1.8

1

yum install java-1.8.0-openjdk* -y

Install MySQL 5.6

1
2
3
4
5
6
7
8


rpm -Uvh http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm
yum -y install mysql-community-server
systemctl enable mysqld
systemctl start mysqld
Initialize:
mysql_secure_installation
GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'remote_login_password' WITH GRANT OPTION;
FLUSH PRIVILEGES;

Python 3 encoding

1

echo 'export LANG=zh_CN.UTF-8' >> ~/.bashrc

[LNMP] Nginx access_log Daily Rotation

Wed, 10 Apr 2019 02:30:15 +0000

Previously, I had a service using Nginx as a reverse proxy. Due to the high volume of traffic, I wanted to do some simple access statistics at the Nginx layer. I found that Nginx’s default access_log writes everything to a single file, which is very inconvenient. After some research, many people suggested using shell scripts to solve this problem. Finally, I found a better solution – Nginx supports the following configuration:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


server {
 listen 8082;
 server_name your ip;

 if ($time_iso8601 ~ "^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})"){
 set $year \$1;
 set $month \$2;
 set $day \$3;
 set $hour \$4;
 set $minutes \$5;
 set $seconds \$6;
 }

 access_log logs/8082_$year-$month-$day.log;
 error_log logs/8082.error;

 # Forward all requests
 location / {
 proxy_set_header Host $host;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_pass http://localhost:8082;
 }
}

[CesiumJS]Tianditu Application Development License Application Guide - Update Your Tianditu Data Interface ASAP

Thu, 17 Jan 2019 02:54:47 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China fast access: http://cesium.coinidea.com/

The National Geographic Information Public Service Platform “Tianditu” 2018 edition has upgraded the Tianditu application development process. The Tianditu API and service interfaces have been fully upgraded to the tianditu.gov.cn government domain, supporting HTTP/HTTPS protocols. The original service domain tianditu.com will continue to be retained.

To ensure the stability and reliability of Tianditu’s geographic information public services and to better support developers with geographic information application development, starting immediately, all Tianditu API and service interface calls require a development license (Key). You can register and apply for free at the Tianditu API website console. Please make adjustments as soon as possible. Tianditu will stop supporting API and service calls without a development license (Key) on January 1, 2019. Before that date, unauthorized APIs and services will continue to work normally.

Please register appropriately as an individual or organization user. Enterprise and institutional users with higher service call volume requirements should register as organizational users and become certified enterprise developers.

Original link:
http://lbs.tianditu.gov.cn/authorization/authorization.html

Cesium Chinese Community QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China fast access: http://cesium.coinidea.com/

[CesiumJS]Cesium Intermediate Tutorial 2 - Imagery Layers

Sun, 23 Dec 2018 12:19:39 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China fast access: http://cesium.coinidea.com/

Cesium supports rendering and adding high-resolution imagery (map) layers from several standard services. Layers can be ordered and blended together. The brightness, contrast, gamma, hue, and saturation of each layer can be dynamically changed. This tutorial introduces the concept of imagery layers and the related Cesium APIs.

Quick Start

Let’s skip the details for now and write some code to add imagery layers. Open the Hello World example in Sandcastle. This example creates a Viewer widget, which renders Bing Maps by default. We can specify a different base layer by providing additional parameters to the Viewer constructor. Let’s use a layer from Esri ArcGIS MapServer:

1
2
3
4
5
6


var viewer = new Cesium.Viewer('cesiumContainer', {
 imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
 url : '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
 }),
 baseLayerPicker : false
});

After modifying the example, press F8 to run:

We can scroll the mouse wheel to zoom in and out to see the actual imagery streaming in action.

Next, add another layer: NASA Black Marble imagery based on Tile Map Service (TMS):

1
2
3
4
5
6


var layers = viewer.scene.imageryLayers;
var blackMarble = layers.addImageryProvider(new Cesium.createTileMapServiceImageryProvider({
 url : '//cesiumjs.org/tilesets/imagery/blackmarble',
 maximumLevel : 8,
 credit : 'Black Marble imagery courtesy NASA Earth Observatory'
}));

Because the Black Marble layer was added last and covers the entire globe, it covers the Esri layer. We could move the Black Marble layer to the bottom with layers.lower(blackMarble);, but to better understand the relationship between these two layers, let’s blend it with the Esri layer:

1

blackMarble.alpha = 0.5; // 0.0 is transparent. 1.0 is opaque.

Next, increase the brightness of the lights:

1

blackMarble.brightness = 2.0; // > 1.0 increases brightness. < 1.0 decreases.

Finally, add a single image as a third layer for a specific extent:

1
2
3
4


layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
 url : '../images/Cesium_Logo_overlay.png',
 rectangle : Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)
}));

Complete code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


var viewer = new Cesium.Viewer('cesiumContainer', {
 imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
 url : '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
 }),
 baseLayerPicker : false
});

var layers = viewer.scene.imageryLayers;
var blackMarble = layers.addImageryProvider(new Cesium.createTileMapServiceImageryProvider({
 url : '//cesiumjs.org/tilesets/imagery/blackmarble',
 maximumLevel : 8,
 credit : 'Black Marble imagery courtesy NASA Earth Observatory'
}));

blackMarble.alpha = 0.5; // 0.0 is transparent. 1.0 is opaque.

blackMarble.brightness = 2.0; // > 1.0 increases brightness. < 1.0 decreases.

layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
 url : '../images/Cesium_Logo_overlay.png',
 rectangle : Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)
}));

View the complete example in Sandcastle.

Existing Imagery Layers

The ion Assets tab in Sandcastle contains imagery layer applications hosted by Cesium ion, which can be used in Cesium applications by adding just a few lines of code.

ImageryProvider

High-resolution imagery like the first two layers used above is too large to fit in memory or even on a single disk, so the imagery is divided into smaller images called tiles that can be streamed to the client based on the view. Cesium supports requesting tiles using ImageryProvider with several standards. Most ImageryProviders use REST interfaces over HTTP to request tiles. ImageryProviders differ based on the format and organization of the requests. Cesium includes the following built-in ImageryProviders:

Web Map Service (WMS) - An OGC standard for requesting map tiles from distributed geospatial databases. In Cesium, see WebMapServiceImageryProvider.
Tile Map Service (TMS) - A REST interface for accessing tiles. Tiles can be generated using MapTiler or GDAL2Tiles. See TileMapServiceImageryProvider.
OpenGIS Web Map Tile Service (WMTS) - An OGC standard for serving pre-rendered georeferenced tiles over the internet. In Cesium, see WebMapTileServiceImageryProvider.
OpenStreetMap - Access OpenStreetMap tiles or any Slippy map tiles. There are several ways to host these tiles. In Cesium, see createOpenStreetMapImageryProvider.
Bing Maps - Use the Bing Maps REST Services to access tiles. Create Bing Maps keys at https://www.bingmapsportal.com/. In Cesium, see BingMapsImageryProvider.
Esri ArcGIS MapServer - Use the ArcGIS Server REST API to access tiles on an ArcGIS MapServer. In Cesium, see ArcGisMapServerImageryProvider.
Google Earth Enterprise - Provides access to imagery stored in Google Earth Enterprise servers. In Cesium, see GoogleEarthImageryProvider.
Mapbox - Use the Mapbox API to access tiles. Create an account and provide an access token. In Cesium, see MapboxImageryProvider.
Standard image files - Create imagery layers from images. In Cesium, see SingleTileImageryProvider.
Custom tiling schemes - Using UrlTemplateImageryProvider, we can connect to a wide variety of imagery sources by using URL templates. For example, a TMS URL template is //cesiumjs.org/tilesets/imagery/naturalearthii/{z}/{x}/{reverseY}.jpg.
Tile coordinates - Shows how the globe is divided into tiles in a particular tiling scheme by drawing a border around each tile and labeling it with its level, X, and Y coordinates.

We can access other imagery services by implementing the ImageryProvider interface. If you do so and think it’s generally useful, please contribute it to Cesium for everyone’s benefit.

See the reference documentation to learn how to construct a specific imagery provider. Let’s look at SingleTileImageryProvider since many imagery providers share its constructor properties:

url - The URL of the image. Like many imagery providers, this is the only required property. In other imagery providers, this URL points to the server or the root URL of the service.
extent - Optional. The longitude/latitude rectangle that the image should cover. By default, it covers the entire globe.
credit - Optional. A string credit for the data source, displayed on the canvas. Some imagery providers, such as BingMapsImageryProvider and ArcGIS Server REST API, can retrieve credits or logos directly from their services.
proxy - Optional. A proxy for requesting the service, which can enable cross-origin resource sharing.

For security reasons, today’s web browsers work hard to prevent JavaScript code from reading image pixels from different sites. In particular, if a WebGL application like Cesium accesses images from a different hostname or port and the server doesn’t explicitly allow the images to be used this way, using those images as textures is prohibited. The server indicates that images don’t contain confidential information and that it’s safe for other sites to read their pixels by including Cross-Origin Resource Sharing (CORS) headers in the HTTP response.

Unfortunately, not all imagery services support CORS. For those that don’t, a proxy server with the same origin as the website hosting Cesium must be used. When using such a proxy, for the web browser and Cesium client, the tiles appear as though they come from the same origin as the Cesium-based website. To use a proxy with an imagery provider, use the proxy property when constructing the imagery provider. Cesium includes a simple proxy written in Node.js for development purposes.

1
2
3
4


layers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
 url : '//server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer',
 proxy : new Cesium.DefaultProxy('/proxy/')
}));

If you’re hosting public imagery, we encourage enabling CORS as described in this article rather than using a proxy.

ImageryProvider vs. Layers

So far, we haven’t explicitly distinguished between ImageryProvider and layers. An ImageryProvider requests imagery using a specific service, while a layer represents the displayed imagery from an ImageryProvider. The code:

1

var layer = layers.addImageryProvider(imageryProvider);

is shorthand for:

1
2


var layer = new ImageryLayer(imageryProvider);
layers.add(layer);

We typically construct an imagery provider only to create a layer, then we use its properties such as show, alpha, brightness, and contrast. See ImageryLayer. Decoupling imagery providers from layers makes it easy to add new imagery providers.

Like the layers variable in the examples above, the layer collection determines the drawing order of layers. Layers are drawn from bottom to top in the order they were added. The layer collection is operated on using functions such as add, remove, and get, like any other collection in Cesium. Additionally, layers can be reordered using raise, raiseToTop, lower, and lowerToBottom. See ImageryLayerCollection.

Resources

Imagery layers examples from Sandcastle:

Imagery Layers - Code samples from this tutorial
Imagery Layers Manipulation - Layers from multiple data sources with independent transparency adjustment
Imagery Adjustment - Adjust layer brightness, contrast, gamma, hue, and saturation

Additional reference documentation:

Cesium Chinese Community QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China fast access: http://cesium.coinidea.com/

[LNMP]Memory Optimization

Wed, 19 Dec 2018 03:01:19 +0000

Problem Description

Recently, my server ran into an issue where it would frequently kill my Tomcat process when memory ran low. Since the overall traffic isn’t very high, LNMP and Tomcat are currently running on the same machine, but this caused Tomcat-related Java applications to become unavailable.

1

free -m

Checking the memory usage, I found the operating system had only about 60MB of memory left – almost completely used up. This situation persisted for about a month, and it was a constant source of frustration. I considered adding more memory but thought it was too expensive. When resources are insufficient, there are generally two approaches: the first is to add resources, and the second is to optimize existing resources. For someone on a budget like me, the second approach is usually my first choice.

Initially, I thought Tomcat itself or some other process was consuming too much memory. After running:

1

top

I found that php-fpm processes were often the ones consuming the most memory.

To view the top 40 memory-consuming processes:

1

ps auxw | head -1; ps auxw | sort -rn -k4 | head -40

I found that php-fpm dominated the top 40 processes, with memory usage ranging from 2% to 7%. The problem was now quite clear – the culprit was php-fpm.

Solution

You can control the number of php-fpm child processes by configuring the pm.max_children property. First, open the php-fpm configuration file:

1

vim /etc/php-fpm.d/www.conf

pm.max_children defaults to 50. Each process uses 1%-2.5% of memory, which adds up to consuming most of the memory. Try reducing the value – I set mine to 25 (also referencing other blogs). At the same time, check the following two properties:

pm.max_spare_servers : This value represents the maximum number of idle processes. If idle processes exceed this value, they will be cleaned up.
pm.min_spare_servers : The minimum number of idle processes. If idle processes fall below this value, new child processes are created.

Neither of these values should exceed the pm.max_children value. Typically, pm.max_spare_servers is set to 60%-80% of the pm.max_children value.

Finally, restart php-fpm:

1

service php-fpm restart

Check the memory again:

1

free -m

I found there was about 600MB of free memory remaining. Even after starting Tomcat, there was still about 300MB to spare.

Reference: https://www.jb51.net/article/129528.htm

1
2

Hope this helps! If you need anything else, feel free to let me know.

What to Do If You Get Hit by Ransomware

Thu, 22 Nov 2018 07:23:33 +0000

Recently, a friend of mine got hit by ransomware. After some research, I found a good website: the No More Ransom Alliance.

https://www.nomoreransom.org/zh/decryption-tools.html

I’ve always believed that technology is neutral. So if you’ve been hit by ransomware, you might want to check out the website above – there might be some solutions available.

A Great Place to Download RPM Packages

Thu, 22 Nov 2018 07:17:03 +0000

In offline environments (specifically those where you can’t use wget or yum), we often need to compile and install Linux-based operating systems ourselves.

At that point, version dependencies become a real headache. Of course, we could use Docker to solve this.

But if your offline environment also restricts uploads and downloads, and the internal system versions are unpredictable, it becomes an even bigger pain. So I found a great place to download Linux RPM packages:

https://pkgs.org/

It solves the problems of operating system compatibility, system version dependencies, and software dependency management.

Recommending a Great Overseas VPS - Vultr

Thu, 15 Nov 2018 07:17:56 +0000

Introduction to Vultr

Vultr is a well-known US cloud service provided by Choopa.com. Choopa has been providing global support services for gaming companies, so the company has deployed data centers in 14 countries and regions worldwide, including Tokyo (Japan), Singapore, Los Angeles, Seattle (USA), London (UK), Germany, and more. It offers excellent value for money, with plans starting at just $2.5/month. New users receive $25 upon registration. Click the following link to register – new users get $25 (you need to pay $10, which means you pay $10 and get $35 in credit): Promotional offer link

Advantages of Vultr

Numerous data centers: 14 data centers in Japan, the US, Europe, and more.
Excellent architecture: All using KVM architecture, SSD solid-state drives, starting from 1000GB/month traffic.
Powerful images: Besides common Linux distributions, you can also install custom ISO systems and Windows.
Powerful backend: Features including system snapshots, one-click deployment scripts, backups, firewalls, and more.
Promotions: Occasional new user registration bonuses, sometimes with rewards up to $100.
Flexible billing: Uses hourly billing mode, allowing you to add and remove machines at will.
Customer service: Fast response times, usually getting answers within 15 minutes (time zone differences may apply).

Pricing and Configuration

Markdown Anywhere

Tue, 06 Nov 2018 06:29:16 +0000

I’ve been writing articles frequently lately and found that Markdown is a very convenient web typesetting standard. For details, see: http://cesiumcn.org/markdown.html | http://cesium.coinidea.com/markdown.html

Currently, I’ve found that Jianshu and OSChina have excellent Markdown support. However, WordPress doesn’t support it, and surprisingly, Zhihu doesn’t support it either.

WordPress Markdown WordPress has plugins that can provide support. Some people online say the WP Editor.MD plugin is excellent, but after using it on my WordPress version, I found it wasn’t compatible – it crashed directly when activated.

At that moment, I had a flash of inspiration and went directly to the official site https://wordpress.org/plugins/ to look. I found that wp-markdown works quite well.

After activating it, I noticed nothing changed. It turns out you need to configure it. The specific location is: Settings -> Writing.
Zhihu Markdown Zhihu obviously can’t install plugins like WordPress. The talented developers online are truly amazing. There’s a Chrome plugin called Markdown Here. After installing it, when you right-click in a text input box, a Markdown Here menu appears, which automatically converts rich text content to Markdown formatting – just copy and paste.

[CesiumJS]Cesium Intermediate Tutorial 1 - Spatial Data Visualization (Part 1)

Thu, 01 Nov 2018 09:09:11 +0000

Cesium Chinese Website: http://cesiumcn.org/ | China fast access: http://cesium.coinidea.com/

This tutorial will teach readers how to use Cesium’s Entity API to draw spatial data such as points, markers, labels, lines, models, shapes, and volumes. No prior knowledge of Cesium is required, but if you have no experience at all, you may want to start with the “Getting Started Tutorial”.

What is the Entity API?

Cesium has a rich API for spatial data, which can be divided into two categories: a low-level API oriented toward graphics developers (commonly called the Primitive API) and a high-level API for data-driven visualization (called the Entity API).

The primary goal of the Primitive API is to expose the minimal amount of abstraction needed for the task at hand. It expects us to think like graphics programmers and use graphics terminology. Its structure is designed to provide the most performant and flexible implementation for a given type of visualization, rather than API consistency. Loading a model is different from creating a billboard, and both are completely different from creating a polygon. Each type of visualization has its own unique characteristics. Furthermore, they each have different performance characteristics and require following different best practices. While it is powerful and flexible, most applications provide higher-level service interfaces than the Primitive API’s level of abstraction.

The purpose of the Entity API is to expose a set of consistently designed high-level objects that aggregate related visualization and information into a unified data structure we call an Entity. It lets us focus on presenting our data rather than worrying about the underlying mechanisms of visualization. It also provides constructs that make it easy to build complex, time-dynamic visualizations that naturally fit with static data. While the Entity API actually uses the Primitive API behind the scenes, this is an implementation detail we (almost) never need to concern ourselves with. By applying various heuristics to the data we provide, the Entity API is able to deliver flexible, high-performance visualization while exposing a consistent, easy-to-learn, and easy-to-use interface.

Our First Entity

One of the basic ways to learn the Entity API is by looking at some code. To keep things simple, we’ll build on CesiumSandcastle’s Hello World example. If you’re developing Cesium locally, feel free to use your own application.

Suppose we want to add a polygon of the US state Wyoming from a list of longitudes and latitudes. (Wyoming was chosen because it’s a simple polygon.) We can copy and paste the following code into Sandcastle:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


var viewer = new Cesium.Viewer('cesiumContainer');

var wyoming = viewer.entities.add({
 name : 'Wyoming',
 polygon : {
 hierarchy : Cesium.Cartesian3.fromDegreesArray([
 -109.080842,45.002073,
 -105.91517,45.002073,
 -104.058488,44.996596,
 -104.053011,43.002989,
 -104.053011,41.003906,
 -105.728954,40.998429,
 -107.919731,41.003906,
 -109.04798,40.998429,
 -111.047063,40.998429,
 -111.047063,42.000709,
 -111.047063,44.476286,
 -111.05254,45.002073]),
 height : 0,
 material : Cesium.Color.RED.withAlpha(0.5),
 outline : true,
 outlineColor : Cesium.Color.BLACK
 }
});

viewer.zoomTo(wyoming);

Click the Run button (or press F8) to see the following image:

Because one of our goals is to make Cesium code easy to understand, hopefully this is self-explanatory. We created the Viewer widget, which serves as the foundation for almost all Cesium applications, then added a new Entity via viewer.entities.add. The object we pass to add is just an options parameter providing initial values. The return value is the actual entity instance. Finally, we call viewer.zoomTo to make sure the entity is in view. There are many entity options available, but for now we specify a polygon with a semi-transparent red interior and a black outline. We also give the entity a display name of “Wyoming”.

Shapes and Volumes

With the basic knowledge of creating polygons, and thanks to the homogeneity of the Entity API, we can now create various graphics simply by using the Sandcastle examples as reference. Below is a complete list of supported shapes and volumes.

Materials and Outlines

Regardless of their geometric definition, all shapes and volumes have a common set of properties that control their appearance. The fill property is a boolean that specifies whether the interior surface is filled, while the outline property controls whether the shape’s edges are outlined. When fill is set to true, the material property determines what the fill looks like. In the following example, let’s create a semi-transparent blue ellipse. By default, fill is true and outline is false, so we only need to specify the material.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


var entity = viewer.entities.add({
 position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
 ellipse : {
 semiMinorAxis : 250000.0,
 semiMajorAxis : 400000.0,
 material : Cesium.Color.BLUE.withAlpha(0.5)
 }
});
viewer.zoomTo(viewer.entities);

var ellipse = entity.ellipse; // For upcoming examples

Image

We can also specify the material as an image URL:

1

ellipse.material = '//cesiumjs.org/tutorials/images/cats.jpg';

In both cases above, a ColorMaterialProperty or ImageMaterialProperty is automatically created for us during assignment. For more complex materials, we need to create a material property instance ourselves. Currently, entity shapes and volumes support color, image, checkerboard, stripe, and grid materials.

Checkerboard

1
2
3
4
5


ellipse.material = new Cesium.CheckerboardMaterialProperty({
 evenColor : Cesium.Color.WHITE,
 oddColor : Cesium.Color.BLACK,
 repeat : new Cesium.Cartesian2(4, 4)
});

Stripe

1
2
3
4
5


ellipse.material = new Cesium.StripeMaterialProperty({
 evenColor : Cesium.Color.WHITE,
 oddColor : Cesium.Color.BLACK,
 repeat : 32
});

Grid

1
2
3
4
5
6


ellipse.material = new Cesium.GridMaterialProperty({
 color : Cesium.Color.YELLOW,
 cellAlpha : 0.2,
 lineCount : new Cesium.Cartesian2(8, 8),
 lineThickness : new Cesium.Cartesian2(2.0, 2.0)
});

Outline

Unlike the fill property, outline does not have a corresponding material, but instead relies on two separate properties: outlineColor and outlineWidth. outlineWidth only works on non-Windows systems such as Android, iOS, Linux, and OS X. This is due to limitations in how WebGL is implemented in all three major browser engines on Windows.

1
2
3
4


ellipse.fill = false;
ellipse.outline = true;
ellipse.outlineColor = Cesium.Color.YELLOW;
ellipse.outlineWidth = 2.0;

Polyline

Polylines are a special case because they don’t have fill or outline properties. Instead, they rely on specialized materials to replace colors. Because of these special materials, polylines with different widths and outline widths will work on all systems.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


var entity = viewer.entities.add({
 polyline : {
 positions : Cesium.Cartesian3.fromDegreesArray([-77, 35,
 -77.1, 35]),
 width : 5,
 material : Cesium.Color.RED
}});
viewer.zoomTo(viewer.entities);

var polyline = entity.polyline // For upcoming examples

Polyline Outline

1
2
3
4
5


polyline.material = new Cesium.PolylineOutlineMaterialProperty({
 color : Cesium.Color.ORANGE,
 outlineWidth : 3,
 outlineColor : Cesium.Color.BLACK
});

Polyline Glow

1
2
3
4


polyline.material = new Cesium.PolylineGlowMaterialProperty({
 glowPower : 0.2,
 color : Cesium.Color.BLUE
});

Height and Extrusion

All shapes that overlay the globe – currently circles, ellipses, polygons, and rectangles – can also be placed at an altitude or extruded into a volume. In both cases, the shape or volume still conforms to the curvature of the Earth beneath it.

For height, all we need to do is set the height property on the corresponding graphics object, which is the same for all shapes listed above. This might be a good time to mention that Cesium always uses meters, radians, and seconds as units, unless a function explicitly indicates otherwise, such as Cartesian3.fromDegrees. The following line of code elevates the polygon to 250,000 meters above the Earth.

1

wyoming.polygon.height = 250000;

Extruding a shape into a volume is equally easy – we just need to set the extrudedHeight property. The volume will be generated between height and extrudedHeight. If height is undefined, the volume starts from 0. To create a volume that starts at 200,000 meters and extends to 250,000 meters, we can use the following code. This of course means the volume itself is 50,000 meters tall.

1
2


wyoming.polygon.height = 200000;
wyoming.polygon.extrudedHeight = 250000;

Cesium Chinese Community QQ Group: 807482793

Cesium Chinese Website: http://cesiumcn.org/ | China fast access: http://cesium.coinidea.com/

[CesiumJS]Cesium Chinese Website Daily UV Exceeds 100

Wed, 10 Oct 2018 04:48:38 +0000

From 2018.06.22 to 2018.10.10, after less than 4 months of operation, the community - Cesium Chinese Website finally exceeded 100 daily unique visitors. Very excited, marking this milestone.

[CesiumJS]Cesium Getting Started 13 - Extras

Thu, 16 Aug 2018 07:56:51 +0000

The remaining code just adds some additional visualization options. Similar to our previous interactions with HTML elements, we can attach listener functions to toggle shadows and neighborhood polygon visibility.

Let’s start by creating a simple method to toggle the neighborhood polygons. In general, we can hide an entity by setting visibility with Entity.show. However, this only sets visibility for a single entity, and we want to hide or show all neighborhood entities at once.

We can achieve this by adding all neighborhood entities to a parent entity, as shown in this example, or simply by using the show property of the EntityCollection. Then we can set visibility for all child entities at once by changing neighborhoods.show.

1
2
3
4
5


var neighborhoodsElement = document.getElementById('neighborhoods');

neighborhoodsElement.addEventListener('change', function (e) {
 neighborhoods.show = e.target.checked;
});

We can do something similar to toggle shadow visibility:

1
2
3
4
5


var shadowsElement = document.getElementById('shadows');

shadowsElement.addEventListener('change', function (e) {
 viewer.shadows = e.target.checked;
});

Finally, since 3D Tiles may not load immediately, we can also add a loading indicator that is only removed when the tileset has finished loading (and therefore the promise has resolved).

Cesium Chinese Community QQ Group: 807482793

Original link: http://cesiumcn.org/topic/166.html | China fast access: http://cesium.coinidea.com/topic/166.html

[CesiumJS]Cesium Getting Started 12 - Camera Modes

Thu, 16 Aug 2018 07:55:47 +0000

To showcase our drone flight, let’s experiment with camera modes. We’ll keep it simple with two basic camera modes that the user can switch between:

Free Mode : Default camera controls.
Drone Mode : Makes the camera follow the drone through the flight at a fixed distance.

Free mode doesn’t require any code since it uses the default controls. As for drone follow mode, we can use the camera’s built-in entity tracking feature to position the camera and orient it toward the drone with an offset. This keeps the camera at a fixed offset from the specified entity even while it’s moving. To track an entity, we simply set viewer.trackedEntity.

To switch to free camera mode, we can set viewer.trackedEntity to undefined, then use camera.flyTo() to return to our home view.

Here are the camera mode functions:

1
2
3
4
5
6
7
8
9


// Create a follow camera by tracking the drone entity
function setViewMode() {
 if (droneModeElement.checked) {
 viewer.trackedEntity = drone;
 } else {
 viewer.trackedEntity = undefined;
 viewer.scene.camera.flyTo(homeCameraView);
 }
}

To attach this to HTML input, we can attach this function to the change event on the appropriate elements:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


var freeModeElement = document.getElementById('freeMode');
var droneModeElement = document.getElementById('droneMode');

// Create a follow camera by tracking the drone entity
function setViewMode() {
 if (droneModeElement.checked) {
 viewer.trackedEntity = drone;
 } else {
 viewer.trackedEntity = undefined;
 viewer.scene.camera.flyTo(homeCameraView);
 }
}

freeModeElement.addEventListener('change', setCameraMode);
droneModeElement.addEventListener('change', setCameraMode);

Finally, entities are automatically tracked when the user double-clicks on them. If the user starts tracking the drone by clicking, we can add some handling to automatically update the UI:

1
2
3
4
5
6


viewer.trackedEntityChanged.addEventListener(function() {
 if (viewer.trackedEntity === drone) {
 freeModeElement.checked = false;
 droneModeElement.checked = true;
 }
});

Here are our two camera modes – we can now freely switch to the drone camera view, which looks like this:

Cesium Chinese Community QQ Group: 807482793

Original link: http://cesiumcn.org/topic/165.html | China fast access: http://cesium.coinidea.com/topic/165.html

[CesiumJS]Cesium Getting Started 11 - Interactivity

Thu, 16 Aug 2018 07:52:08 +0000

Finally, let’s add some mouse interaction. To improve the visibility of our geocache markers, we can change their style to highlight them when the user hovers over a marker.

To achieve this, we’ll use picking, a Cesium feature that returns data from the 3D scene given a pixel position on the viewer canvas.

There are several types of picking:

Scene.pick : Returns an object containing the primitive at the given window position.
Scene.drillPick : Returns a list of objects containing all primitives at the given window position.
Globe.pick : Returns the intersection point of a given ray with the terrain.

Here are some examples of picking operations:

Since we want to trigger our highlight effect on hover, we first need to create a mouse action handler. For this, we’ll use ScreenSpaceEventHandler, a set of handlers that trigger specified functions on user input actions. ScreenSpaceEventHandler.setInputAction() listens for a user action type ScreenSpaceEventType and runs a specific function, passing the user action as a parameter. Here, we’ll pass a function that takes movement as input:

1
2


var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

Next, let’s write our highlight function. The handler will pass in mouse movement, from which we can extract a window position to use with pick(). If the pick returns a billboard object, we know we’re hovering over a marker. Then, using what we know about Entity styling, we can apply a highlight style.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// If the mouse is over a point of interest, change the entity billboard scale and color
handler.setInputAction(function(movement) {
 var pickedPrimitive = viewer.scene.pick(movement.endPosition);
 var pickedEntity = (Cesium.defined(pickedPrimitive)) ? pickedPrimitive.id : undefined;
 // Highlight the currently picked entity
 if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.billboard)) {
 pickedEntity.billboard.scale = 2.0;
 pickedEntity.billboard.color = Cesium.Color.ORANGERED;
 }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

This successfully triggers the highlight style change on the markers. However, you’ll notice that when we move the cursor away, the markers remain highlighted. We can fix this by tracking the last marker and restoring its original style.

Here is the complete function with marker highlighting and unhighlighting working:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


// If the mouse is over a point of interest, change the entity billboard scale and color
var previousPickedEntity = undefined;
handler.setInputAction(function(movement) {
 var pickedPrimitive = viewer.scene.pick(movement.endPosition);
 var pickedEntity = (Cesium.defined(pickedPrimitive)) ? pickedPrimitive.id : undefined;
 // Unhighlight the previously picked entity
 if (Cesium.defined(previousPickedEntity)) {
 previousPickedEntity.billboard.scale = 1.0;
 previousPickedEntity.billboard.color = Cesium.Color.WHITE;
 }
 // Highlight the currently picked entity
 if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.billboard)) {
 pickedEntity.billboard.scale = 2.0;
 pickedEntity.billboard.color = Cesium.Color.ORANGERED;
 previousPickedEntity = pickedEntity;
 }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

That’s it! We’ve now successfully added a mouse movement handler and hover behavior for marker entities.

Cesium Chinese Community QQ Group: 807482793

Original link: http://cesiumcn.org/topic/164.html | China fast access: http://cesium.coinidea.com/topic/164.html

[CesiumJS]Cesium Getting Started 10 - 3D Tiles

Thu, 16 Aug 2018 07:49:55 +0000

Our team sometimes describes Cesium as a 3D game engine for real-world data. However, working with real-world data is much more difficult than working with typical video game assets, because real data can be incredibly high-resolution and requires precise visualization. Fortunately, Cesium has collaborated with the open-source community to develop 3D Tiles, an open specification for streaming massive heterogeneous 3D geospatial datasets.

Using streaming technology conceptually similar to Cesium’s terrain and imagery, 3D Tiles makes it possible to view enormous models that would otherwise be impossible to interactively view, including building datasets, CAD (or BIM) models, point clouds, and photogrammetry models.

The 3D Tiles Inspector is a debugging tool that provides the ability to look under the hood.

Here are some demos showcasing different 3D Tiles formats:

In our application, we’ll use Cesium3DTileset to add realism to our visualization by displaying full 3D models of all buildings in New York! This NYC tileset is hosted on Cesium Ion, and we can add it using IonResource.fromAssetId:

1
2


// Load the NYC buildings tileset
var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) }));

You may notice that the buildings are not correctly positioned on the ground plane. Fortunately, this is easy to fix. We can adjust the tileset’s position by modifying the model matrix (modelMatrix).

We can find the current offset of the model modelMatrix from the ground by converting the tileset’s bounding sphere to Cartographic, then adding the desired offset and resetting the model matrix.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


// Adjust the tileset height so its not floating above terrain
var heightOffset = -32;
city.readyPromise.then(function(tileset) {
 // Position tileset
 var boundingSphere = tileset.boundingSphere;
 var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
 var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
 var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
 var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
 tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
});

Now we have 1.1 million building models streaming in our scene.

3D Tiles also allows us to adjust our styling using the 3D Tiles styling language. A 3D Tiles style defines expressions for evaluating the color (RGB and transparency) and display of a Cesium3DTileFeature, which is part of the tileset, such as an individual building in the city. Styles are typically based on feature properties stored in the tile’s batch table. Feature properties can be height, name, coordinates, construction date, or anything else built into the tileset asset. Styles are defined in JSON, and expressions are written in a small subset of JavaScript designed for styling. Additionally, the styling language provides a set of built-in functions to support common math operations.

An example of Cesium3DTileStyle:

1
2
3
4


var defaultStyle = new Cesium.Cesium3DTileStyle({
 color : "color('white')",
 show : true
});

The above code makes our NYC tileset white and always visible. To actually set the tileset’s style, we set city.style:

1

city.style = defaultStyle;

We can also define as many styles as we like. For example, making the buildings transparent:

1
2
3
4


var transparentStyle = new Cesium.Cesium3DTileStyle({
 color : "color('white', 0.3)",
 show : true
});

Applying the same style to every feature in our tileset is just scratching the surface. We can also use properties specific to each feature to determine styling. Here’s an example of coloring buildings based on their height:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


var heightStyle = new Cesium.Cesium3DTileStyle({
 color : {
 conditions : [
 ["${height} >= 300", "rgba(45, 0, 75, 0.5)"],
 ["${height} >= 200", "rgb(102, 71, 151)"],
 ["${height} >= 100", "rgb(170, 162, 204)"],
 ["${height} >= 50", "rgb(224, 226, 238)"],
 ["${height} >= 25", "rgb(252, 230, 200)"],
 ["${height} >= 10", "rgb(248, 176, 87)"],
 ["${height} >= 5", "rgb(198, 106, 11)"],
 ["true", "rgb(127, 59, 8)"]
 ]
 }
});

To switch between styles, we can add more code to listen to HTML input:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


var tileStyle = document.getElementById('tileStyle');
function set3DTileStyle() {
 var selectedStyle = tileStyle.options[tileStyle.selectedIndex].value;
 if (selectedStyle === 'none') {
 city.style = defaultStyle;
 } else if (selectedStyle === 'height') {
 city.style = heightStyle;
 } else if (selectedStyle === 'transparent') {
 city.style = transparentStyle;
 }
}

tileStyle.addEventListener('change', set3DTileStyle);

For more examples of 3D Tiles, how to use and adjust styles, check out the 3D Tiles sandcastle demos.

3D Tiles examples:

If you have data and need help converting it to 3D Tiles, stay tuned for updates on the Cesium Ion platform! Subscribe for updates here.

Cesium Chinese Community QQ Group: 807482793

Original link: http://cesiumcn.org/topic/163.html | China fast access: http://cesium.coinidea.com/topic/163.html

[CesiumJS]Cesium Getting Started 9 - Loading and Styling Entities

Wed, 15 Aug 2018 07:42:41 +0000

Now that we have set up the Viewer configuration, imagery, and terrain for our application, we can add the main focus of our application – geocache data.

For visualization convenience, Cesium supports the popular vector formats GeoJSON and KML, as well as a format our team open-sourced called CZML, which we specifically developed for describing Cesium scenes.

Regardless of the initial format, all spatial data in Cesium is represented using the Entity API. The Entity API provides an efficient and flexible visualization method for Cesium rendering. A Cesium Entity is a data object that can be paired with styled graphical representations and positioned in space and time. Many simple Entity examples are provided in the test sandbox. To get up to speed on the Entity API, take a break from this application and read the Visualizing Spatial Data tutorial.

Here are some examples of different entity types:

Once you understand what an Entity looks like, loading datasets with Cesium becomes easy to understand. To read a data file, you need to create a DataSource appropriate for the data format, which will parse the data file hosted at the specified URL and create an EntityCollection containing an Entity for each geospatial object in the dataset. DataSource just defines an interface – the exact type of data source you need will depend on the data format. For example, KML uses KmlDataSource:

1
2
3
4
5
6
7
8


var kmlOptions = {
 camera : viewer.scene.camera,
 canvas : viewer.scene.canvas,
 clampToGround : true
};
// Load geocache points of interest from a KML file
// Data from : http://catalog.opendata.city/dataset/pediacities-nyc-neighborhoods/resource/91778048-3c58-449c-a3f9-365ed203e914
var geocachePromise = Cesium.KmlDataSource.load('./Source/SampleData/sampleGeocacheLocations.kml', kmlOptions);

The above code reads our sample geocache points from a KML file, calling KmlDataSource.load(options) with some configuration. For a KmlDataSource, the camera and canvas options are required. The clampToGround option enables ground clamping, a popular configuration for making ground geometry entities like polygons and ellipses conform to terrain rather than following the WGS84 ellipsoid surface.

Since this data is loaded asynchronously, KmlDataSource returns a Promise that will contain all our newly created entities.

If you’re not familiar with the Promise API for asynchronous functions, “asynchronous” here basically means you should do what you need with the data in the provided callback function using .then. To actually add this entity collection to the scene, we must wait until the promise is resolved, then add the KmlDataSource to viewer.dataSources:

1
2
3
4
5


// Add geocache billboard entities to scene and style them
geocachePromise.then(function(dataSource) {
 // Add the new data as entities to the viewer
 viewer.dataSources.add(dataSource);
});

By default, these newly created entities have useful features. Clicking will display an Infobox with metadata related to the entity, and double-clicking will zoom to and view the entity. To stop viewing that entity, click the “home” button, or click the “fly out” camera icon on the Infobox. Next, we’ll add custom styling to improve our application’s appearance.

For KML and CZML files, declarative styles can be established within the file. However, for this application, let’s practice manually styling our entities. To do this, we’ll take an approach similar to this styling example, waiting for our data source to load, then iterating through all entities in the data source collection, modifying and adding properties. By default, our geocache point markers are created as Billboards and Labels, so to modify the appearance of these entities, we do this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


// Add geocache billboard entities to scene and style them
geocachePromise.then(function(dataSource) {
 // Add the new data as entities to the viewer
 viewer.dataSources.add(dataSource);

 // Get the array of entities
 var geocacheEntities = dataSource.entities.values;

 for (var i = 0; i < geocacheEntities.length; i++) {
 var entity = geocacheEntities[i];
 if (Cesium.defined(entity.billboard)) {
 // Entity styling code here
 }
 }
});

We can improve the appearance of the markers by adjusting their anchor points, removing labels to reduce clutter, and setting a distanceDisplayCondition so that only points within a certain distance from the camera are visible.

1
2
3
4
5
6
7
8
9


// Add geocache billboard entities to scene and style them
if (Cesium.defined(entity.billboard)) {
 // Adjust the vertical origin so pins sit on terrain
 entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
 // Disable the labels to reduce clutter
 entity.label = undefined;
 // Add distance display condition
 entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
}

For more help on distanceDisplayCondition, see the sandcastle example.

Next, let’s improve the Infobox for each geocache entity. The Infobox title is the entity name, and the content is the entity description, displayed as HTML.

You’ll notice the default description isn’t very helpful. Since we’re displaying geocache locations, let’s update them to show the longitude and latitude of each point.

First, we convert the entity’s position to cartographic, then read the longitude and latitude from the Cartographic and add them to the description in an HTML table.

When clicked, our geocache entities will now display a well-formatted Infobox with just the data we need.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


// Add geocache billboard entities to scene and style them
if (Cesium.defined(entity.billboard)) {
 // Adjust the vertical origin so pins sit on terrain
 entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
 // Disable the labels to reduce clutter
 entity.label = undefined;
 // Add distance display condition
 entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
 // Compute longitude and latitude in degrees
 var cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));
 var longitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
 var latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
 // Modify description
 // Modify description
 var description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +
 '<tr><th>' + "Longitude" + '</th><td>' + longitude.toFixed(5) + '</td></tr>' +
 '<tr><th>' + "Latitude" + '</th><td>' + latitude.toFixed(5) + '</td></tr>' +
 '</tbody></table>';
 entity.description = description;
}

Our geocache markers should now look like this:

For our geo application, it would also be helpful to visualize the neighborhoods of specific points. Let’s try loading a GeoJSON file containing polygons for each New York neighborhood. Loading GeoJSON files is very similar to the loading process we just used for KML. But in this case, we use GeoJsonDataSource. Like the previous data source, we need to add it to viewer.dataSources to actually add the data to the scene.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


var geojsonOptions = {
 clampToGround : true
};
// Load neighborhood boundaries from KML file
var neighborhoodsPromise = Cesium.GeoJsonDataSource.load('./Source/SampleData/neighborhoods.geojson', geojsonOptions);

// Save an new entity collection of neighborhood data
var neighborhoods;
neighborhoodsPromise.then(function(dataSource) {
 // Add the new data as entities to the viewer
 viewer.dataSources.add(dataSource);
});

Let’s adjust the loaded neighborhood polygons. Just like the billboard styling we just did, we first iterate through the neighborhood data source entities after the data source loads, this time checking if each entity’s polygon is defined:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


// Save an new entity collection of neighborhood data
var neighborhoods;
neighborhoodsPromise.then(function(dataSource) {
 // Add the new data as entities to the viewer
 viewer.dataSources.add(dataSource);
 neighborhoods = dataSource.entities;

 // Get the array of entities
 var neighborhoodEntities = dataSource.entities.values;
 for (var i = 0; i < neighborhoodEntities.length; i++) {
 var entity = neighborhoodEntities[i];

 if (Cesium.defined(entity.polygon)) {
 // entity styling code here
 }
 }
});

Since we’re displaying neighborhoods, let’s rename each entity to use the neighborhood as its name. The neighborhood from the original GeoJSON file is stored as a property. Cesium stores GeoJSON properties in entity.properties, so we can set the neighborhood name like this:

1
2
3
4


// entity styling code here

// Use geojson neighborhood value as entity name
entity.name = entity.properties.neighborhood;

Instead of making all neighborhoods the same color, we can assign each polygon a new color material with a random color using ColorMaterialProperty and Color.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// entity styling code here

// Set the polygon material to a random, translucent color.
entity.polygon.material = Cesium.Color.fromRandom({
 red : 0.1,
 maximumGreen : 0.5,
 minimumBlue : 0.5,
 alpha : 0.6
});

// Tells the polygon to color the terrain. ClassificationType.CESIUM_3D_TILE will color the 3D tileset, and ClassificationType.BOTH will color both the 3d tiles and terrain (BOTH is the default)
entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;

Finally, let’s generate a Label with some basic styling options for each entity. To keep things clean, we can use disableDepthTestDistance to make Cesium always render the labels above any 3D objects that might occlude them.

However, note that labels are always positioned at entity.position. A Polygon is created with an undefined position because it has a list of positions defining the polygon boundary. We can generate a position by taking the center of the polygon positions:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


// entity styling code here

// Generate Polygon position
var polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
entity.position = polyCenter;
// Generate labels
entity.label = {
 text : entity.name,
 showBackground : true,
 scale : 0.6,
 horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
 verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
 distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 8000.0),
 disableDepthTestDistance : 100.0
};

This gives us labeled polygons that look like this:

Finally, let’s add a high-tech perspective to our NYC geocaches by adding a drone flight over the city.

Since the flight path is just a series of positions over time, we can add this data from a CZML file. CZML is a format for describing time-dynamic graphical scenes, primarily for display in web browsers running Cesium. It describes lines, points, billboards, models, and other graphical primitives, and specifies how they change over time. CZML is to Cesium what KML is to Google Earth – a standard format that allows most Cesium features to be used through a declarative styling language (in this case, a JSON schema).

Our CZML file defines an entity (visualized as a point by default) whose position is defined as a series of positions at different time points. There are several property types available in the Entity API for handling time-dynamic data. See the demo example below:

Property Types Demo

1
2
3
4
5
6


// Load a drone flight path from a CZML file
var dronePromise = Cesium.CzmlDataSource.load('./Source/SampleData/SampleFlight.czml');

dronePromise.then(function(dataSource) {
 viewer.dataSources.add(dataSource);
});

The CZML file uses Cesium to display a drone flight. The path is a property that shows the entity’s position over time. A path visualizes discrete points connected into a continuous line using interpolation. Finally, let’s improve the appearance of the drone flight. First, instead of simply displaying a point, we can load a 3D model to represent our drone and attach it to the entity.

Cesium supports loading 3D models based on glTF (GL Transmission Format), an open specification developed by the Cesium team together with the Khronos Group, designed to efficiently load 3D models for applications by minimizing file size and runtime processing. Don’t have a glTF model? We provide an online converter to convert COLLADA and OBJ files to glTF format.

Let’s load a drone Model with nice physically-based shading and some animations:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


var drone;
dronePromise.then(function(dataSource) {
 viewer.dataSources.add(dataSource);
 // Get the entity using the id defined in the CZML data
 drone = dataSource.entities.getById('Aircraft/Aircraft1');
 // Attach a 3D model
 drone.model = {
 uri : './Source/SampleData/Models/CesiumDrone.gltf',
 minimumPixelSize : 128,
 maximumScale : 1000,
 silhouetteColor : Cesium.Color.WHITE,
 silhouetteSize : 2
 };
});

Now our model looks good, but unlike the original point, the drone model has a direction, and it looks strange when the drone moves forward without orientation. Fortunately, Cesium provides a VelocityOrientationProperty, which automatically calculates orientation based on positions sampled before and after the entity:

1
2


// Add computed orientation based on sampled positions
drone.orientation = new Cesium.VelocityOrientationProperty(drone.position);

Now our drone model will behave as expected.

One more thing we can do to improve the appearance of our drone flight: from a distance, it may not be obvious, but the drone’s path is made up of line segments that look unnatural. This is because Cesium uses linear interpolation by default to construct the path from sampled points. However, interpolation options can be configured.

Interpolation Demo

For a smoother flight path, we can change the interpolation options like this:

1
2
3
4
5


// Smooth path interpolation
drone.position.setInterpolationOptions({
 interpolationDegree : 3,
 interpolationAlgorithm : Cesium.HermitePolynomialApproximation
});

Cesium Chinese Community QQ Group: 807482793

Original link: http://cesiumcn.org/topic/161.html | China fast access: http://cesium.coinidea.com/topic/161.html

[CesiumJS]Cesium Getting Started 8 - Configuring the Scene

Wed, 15 Aug 2018 07:30:05 +0000

Next, we’ll add some more correct time and space settings to the Viewer. This involves interacting with viewer.scene, which controls all graphical elements in the viewer.

First, let’s configure our scene by enabling lighting based on the sun’s position with the following code:

1
2


// Enable lighting based on sun/moon positions
viewer.scene.globe.enableLighting = true;

With this configuration, the lighting in our scene will change with the time of day. If you zoom out, you’ll see that part of the digital globe is in darkness, because like the real Earth, the sun can only illuminate part of it.

Before we initialize and start the view, let’s briefly go over some basic Cesium types:

Cartesian3 : A 3D Cartesian coordinate – when used as a position relative to the center of the Earth, it uses the Earth-Fixed reference frame (ECEF).
Cartographic : A position defined by longitude, latitude (in radians), and height above the WGS84 ellipsoid surface.
HeadingPitchRoll : A rotation (in radians) about the local axes in an east-north-up frame. Heading is a rotation about the negative Z axis. Pitch is a rotation about the negative Y axis. Roll is a rotation about the positive X axis.
Quaternion : A 3D rotation represented as a 4D coordinate.

These are the basic types needed to position and orient Cesium objects in the scene, and they have many useful conversion methods. See the documentation for each type to learn more.

Now let’s position the camera on the NYC (New York) scene where our data is located.

Camera Control

The camera is a property of viewer.scene that controls the currently visible domain. We can control the camera by directly setting its position and orientation, or by using the API provided by Cesium, which is designed to specify how the camera’s position and orientation change over time.

Some of the most commonly used methods are:

Camera.setView(options): Immediately sets the camera at a specific position and orientation.
Camera.zoomIn(amount): Moves the camera forward along the view vector.
Camera.zoomOut(amount): Moves the camera backward along the view vector.
Camera.flyTo(options): Creates an animated camera flight from the current position to a new position.
Camera.lookAt(target, offset) : Positions and orients the camera to aim at a target point with a given offset.
Camera.move(direction, amount) : Moves the camera in any direction.
Camera.rotate(axis, angle) : Rotates the camera around any axis.

For more API features, check out these camera demos:

Camera API Demo
Custom Camera Controls Demo

Let’s try one method to fly the camera to New York. Use camera.setView() to initialize the view, specifying the camera position and orientation with Cartesian3 and HeadingPitchRoll:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


// Create an initial camera view
var initialPosition = new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.082799425431);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
var homeCameraView = {
 destination : initialPosition,
 orientation : {
 heading : initialOrientation.heading,
 pitch : initialOrientation.pitch,
 roll : initialOrientation.roll
 }
};
// Set the initial view
viewer.scene.camera.setView(homeCameraView);

The camera is now positioned and oriented to overlook Manhattan, and our view parameters are saved in an object that can be passed to other camera methods.

In fact, we can use this same view to update the behavior when the home button is pressed. Instead of having it return to the default view of the Earth from a distance, we can override the button to show our initial Manhattan view. We can add a few options to adjust the animation, then add an event listener to cancel the default flight and call flyTo() with our home view:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// Add some camera flight animation options
homeCameraView.duration = 2.0;
homeCameraView.maximumHeight = 2000;
homeCameraView.pitchAdjustHeight = 2000;
homeCameraView.endTransform = Cesium.Matrix4.IDENTITY;
// Override the default home button
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
 e.cancel = true;
 viewer.scene.camera.flyTo(homeCameraView);
});

For more about basic camera control, please visit our Camera Tutorial.

Clock Control

Next, let’s configure the Viewer’s Clock and Timeline to control the scene’s time progression.

Here is the Clock-related API.

When working with specific times, Cesium uses the JulianDate type, which stores the number of days since noon on January 1, -4712 (4713 BC). For increased precision, this class stores the whole number of days and seconds in separate components. For computational safety and to represent leap seconds, dates are always stored in the International Atomic Time standard.

Here is an example of how to set up scene time options:

1
2
3
4
5
6
7
8
9


// Set up clock and timeline.
viewer.clock.shouldAnimate = true; // make the animation play when the viewer starts
viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:20:00Z");
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.multiplier = 2; // sets a speedup
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // tick computation mode
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // loop at the end
viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); // set visible range

This sets the scene animation’s rate, start and stop times, and tells the clock to loop back to the start when it reaches the stop time. It also sets the timeline control to the appropriate time range. Check out this clock sample code to test clock settings.

This is our initial scene configuration! Now, when you run your application, you should see the following:

Cesium Chinese Community QQ Group: 807482793

Original link: http://cesiumcn.org/topic/160.html | China fast access: http://cesium.coinidea.com/topic/160.html

[CesiumJS]Cesium Getting Started 7 - Adding Terrain

Tue, 14 Aug 2018 08:34:50 +0000

Cesium supports streaming, visualizable global elevation terrain data, including oceans, lakes, rivers, mountains, canyons, and other terrain data that can be rendered in 3D with better results than 2D. Like imagery data, the Cesium engine requests streaming terrain data from a server, only requesting data for the layers that need to be rendered based on the current camera view.

Cesium provides some terrain dataset examples and how to configure these parameters:

ArcticDEM : High-resolution arctic terrain
PAMAP Terrain : High-resolution Pennsylvania terrain
Terrain display options : Various terrain data configurations and formats
Terrain exaggeration : Makes height differences between terrain more visually prominent

Supported terrain data formats

Quantized-mesh, an open-source format developed by the Cesium team
Heightmap
Google Earth Enterprise

To add terrain data, we need to create a CesiumTerrainProvider, provide a URL and some configuration options, and then assign this provider to viewer.terrainProvider.

Here, we use Cesium World Terrain, which is provided by Cesium ion and is available by default in “My Assets”. We can create a Cesium World Terrain served by Cesium ion using the createWorldTerrain helper function.

1
2
3
4
5


// Load Cesium World Terrain
viewer.terrainProvider = Cesium.createWorldTerrain({
 requestWaterMask : true, // required for water effects
 requestVertexNormals : true // required for terrain lighting
});

requestWaterMask and requestVertexNormals are optional configuration items that tell Cesium whether to request additional water and lighting data. Both options are set to false by default.

Finally, since we now have terrain data, we need more lines to ensure that objects behind the terrain are displayed correctly – only the frontmost, topmost objects should be visible.

1
2


// Enable depth testing so things behind the terrain disappear.
viewer.scene.globe.depthTestAgainstTerrain = true;

We now have terrain data and moving water. New York is very flat, so you can freely explore the terrain data above. For a more obvious example, you can navigate to more rugged areas like the Grand Canyon or San Francisco.

For more information about terrain data, please visit the Terrain Tutorial

Cesium Chinese Community QQ Group: 807482793

Original link: http://cesiumcn.org/topic/157.html | China fast access: http://cesium.coinidea.com/topic/157.html

[CesiumJS]Cesium Getting Started 6 - Adding Imagery

Tue, 14 Aug 2018 08:29:46 +0000

Another key element of a Cesium application is Imagery. Tile map collections are mapped onto the virtual 3D digital globe surface based on different projection methods. Depending on the camera’s direction and distance to the surface, Cesium requests and renders different levels of imagery detail.

Multiple imagery layers can be added, removed, sorted, and adapted in Cesium.

Cesium provides a series of methods for handling imagery, such as color adaptation and layer blending. Here are some sample code examples:

Cesium provides various interfaces to support different imagery data sources.

Supported imagery formats

WMS
TMS
WMTS (with time dynamic imagery)
ArcGIS
Bing Maps
Google Earth
Mapbox
OpenStreetMap

Note: Different data sources require different authentication - make sure you have permission to access these data sources. Naturally, you’ll need to register for specific credentials.

By default, Cesium uses Bing Maps as the default imagery. This imagery is packaged into the Viewer for demonstration purposes. Cesium requires you to create your own ion account and generate an access key to access imagery data.

In the following example, we’ll use Sentinel-2 imagery from Cesium ion.

Go to the Cesium ion page and add Sentinel-2 imagery to your assets. Click “Asset Depot” in the navigation bar.
Click “Add to my assets”. Sentinel-2 will appear in your personal Asset list (My Assets), making the imagery data source available in your personal app.
At the code level: we create an IonImageryProvider and pass the assetId for the corresponding Sentinel-2 imagery. Then we add the ImageryProvider to viewer.imageryLayers.

1
2
3
4
5


// Remove default base layer
viewer.imageryLayers.remove(viewer.imageryLayers.get(0));

// Add Sentinel-2 imagery
viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({ assetId : 3954 }));

Based on the above code, our Cesium application will show the following imagery when zooming in:

For more information about imagery, please visit the Imagery Layers Tutorial

Cesium Chinese Community QQ Group: 807482793

Original link: http://cesiumcn.org/topic/156.html | China fast access: http://cesium.coinidea.com/topic/156.html

[CesiumJS]Cesium Getting Started 5 - Cesium ion

Mon, 13 Aug 2018 07:43:34 +0000

Cesium ion is a platform that provides tiled maps and 3D geospatial data. Cesium ion supports adding data to your own CesiumJS applications. Below we will use Sentinel-2 2D imagery and Cesium World Terrain, both of which require ion support.

Note When using Cesium, if you haven’t applied for an ion account and are using Cesium’s default data sources instead of your own, the bottom of the viewer will often display a line of small English text. The message basically says you need to apply for an access token.

First, you need to register for a free Cesium ion account.
Go to https://cesium.com/ion/ and register a new account.
Click “Access Token” to navigate to the Access Tokens page.
Select the Default access token and copy the contents.

When creating a Cesium Viewer, simply set the access token to your own:

1

Cesium.Ion.defaultAccessToken = '<YOUR ACCESS TOKEN HERE>';

With this, you can freely access various data sources provided by Cesium ion.

More questions can be found at Getting Started with Cesium ion

Cesium Chinese Community QQ Group: 807482793

Original link: http://cesiumcn.org/topic/153.html | China fast access: http://cesium.coinidea.com/topic/153.html

[CesiumJS]Cesium Getting Started 4 - Creating a Cesium Viewer

Mon, 13 Aug 2018 06:55:35 +0000

The foundation of any Cesium application is the Viewer. The Viewer is an interactive 3D digital globe container (box) with various features. To create a Viewer, simply bindg it to a div element with the id “cesiumContainer” in HTML.

1

var viewer = new Cesium.Viewer('cesiumContainer');

After using the code above, you can see the basic digital globe shown in the image below:

By default, the scene supports mouse (desktop) and touch (mobile device) interaction. You can control the camera to navigate the digital globe in the following ways:

Left click and drag - Pans the camera over the surface of the globe.
Right click and drag - Zooms the camera in and out.
Middle wheel scrolling - Also zooms the camera in and out.
Middle click and drag - Rotates the camera around the point on the surface of the globe.

The default Viewer comes with several useful widgets:

Geocoder : A location search tool that flies the camera to queried location. Uses Bing Maps data by default.
HomeButton : Flies the viewer back to a default view.
SceneModePicker : Switches between 3D, 2D and Columbus View (CV) modes.
BaseLayerPicker : Chooses the imagery and terrain to display on the globe.
NavigationHelpButton : Displays the default camera controls.
Animation : Controls the play speed for view animation.
CreditsDisplay : Displays data attributions. Almost always required!
Timeline : Indicates current time and allows users to jump to a specific time using the scrubber.
FullscreenButton : Makes the Viewer fullscreen.

We can configure the Viewer widgets through code by adding/removing related components via configuration parameters when initializing the Viewer. The following code creates a Viewer configured without the selection indicator, base layer picker, or scene mode picker components:

1
2
3
4
5


var viewer = new Cesium.Viewer('cesiumContainer', {
 scene3DOnly: true,
 selectionIndicator: false,
 baseLayerPicker: false
});

For the complete Viewer configuration, please visit: https://cesiumjs.org/Cesium/Build/Documentation/Viewer.html.

Cesium Chinese Community QQ Group: 807482793

Original link: http://cesiumcn.org/topic/152.html | China fast access: http://cesium.coinidea.com/topic/152.html

[CesiumJS]Cesium Getting Started 3 – Cesium Directory and Framework Structure

Fri, 10 Aug 2018 09:13:46 +0000

App Directory

After downloading the files from the official website, we can see the following CesiumJS library structure:

Source/: Cesium application code and data
ThirdParty/: External dependency libraries, third-party libraries separate from Cesium
LICENSE.md: Cesium license information
index.html: Web homepage, which needs to be defined according to Cesium requirements and include Cesium dependency libraries
server.js: Node.js-based web server application

Note

CesiumJS is adapted to work with third-party JavaScript libraries and frameworks:

React: Integrating Cesium with React

ThreeJS: Integrating Cesium with ThreeJS

Page Structure

Including CesiumJS

1

<script src="ThirdParty/Cesium/Cesium.js"></script>

Developers can also pick and choose their dependency libraries from ThirdParty/Cesium/source/ according to their needs, trimming the JS file size.

HTML Structure

A div is needed as the container for the Cesium Viewer widget:

1

<div id="cesiumContainer"></div>

An app.js file is needed to activate the Cesium Viewer. It’s best to include app.js at the end of the HTML:

1

<script src="Source/App.js"></script>

Adding CSS Styles

The styles for various widgets in the Cesium viewer need to be imported. Create a new index.css and include it in index.html:

1

<link rel="stylesheet" href="index.css" media="screen">

Add the following default Cesium CSS to index.css:

1

@import url(ThirdParty/Cesium/Widgets/widgets.css);

Steps

Open Source/App.js and delete its contents
Copy Source/AppSkeleton.js to Source/App.js
Make sure server.js is in the Cesium root directory and run server.js (npm server.js)
Enter localhost:8080 in a modern browser (with WebGL support)

If you have any issues:

Full code: https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=Hello%20World.html&label=Showcases&gist=8d9d3daadd197cffd501d7210bcca3b6

Cesium Chinese Website QQ Group: 807482793

Original link: http://cesiumcn.org/topic/144.html | Quick access: http://cesium.coinidea.com/topic/144.html

[CesiumJS]Cesium Getting Started 2 – Environment Setup and First Example Program

Fri, 10 Aug 2018 03:11:34 +0000

Verify Browser Support

Cesium requires browser support for WebGL. You can test whether your browser supports Cesium using a HelloWorld example provided on the CesiumJS official website. (Chrome is recommended) Test URL: https://cesiumjs.org/Cesium/Apps/HelloWorld.html

Choose an IDE

The official website states:

1

If you're already a seasoned developer, you most likely have a favorite editor or development environment; for example, most of the Cesium team uses Eclipse. If you're just starting out, a great free and open-source editor is Notepad++, which you can download from their website. Ultimately any text editor will do, so go with the one that you are most comfortable with.

If you’re already an experienced developer, you likely have a preferred editor or development environment; for example, most of the Cesium team uses Eclipse. If you’re just starting out, Notepad++ is a great free and open-source editor that you can download from their website. Ultimately, any text editor will work, so use whatever you’re most comfortable with.

Personally, since I mostly developed in PHP before, I use PHPStorm. I actually don’t recommend Eclipse — I prefer WebStorm, which shares the same parent as IntelliJ IDEA. Considering project and folder management, I also don’t recommend Notepad++. For a lightweight IDE, I recommend Sublime Text.

Download Cesium Source Code

Download the latest release version at: https://cesiumjs.org/tutorials/cesium-up-and-running/

After downloading, extract the zip file into a new directory of your choice. I’ll refer to this as the Cesium root directory throughout this tutorial. The contents should look like the following:

Simply opening index.html directly won’t work — it needs to be placed in a web server container to run.

Server Side

Cesium is pure frontend code. The official source code comes with a Node.js server, and you can install and deploy via Node.js. In practice, Cesium can be deployed in Tomcat (GeoServer), Apache, Nginx, and other servers.

The official recommendation is Node.js:

Download Node.js from the official website (https://nodejs.org/en/). Node.js has some configurable parameters, but the defaults are fine.
In the Cesium directory, open cmd or bash and run:

1

npm install

This downloads the required npm modules such as express. If successful, a ’node_modules’ folder will be created in the Cesium directory. 3. Finally, run in cmd or bash: shell node server.js or shell npm start

After success, you should see the following screenshot:

The console will display:

1

Cesium development server running locally. Connect to http://localhost:8080

Note: Do not close the console — keep it running. Open your browser and navigate to http://localhost:8080 to access Cesium.

If You Don’t Want to Use Node.js

Cesium is an open-source project. The GitHub download URL is: https://github.com/AnalyticalGraphicsInc/cesium The simplest installation method is regular JS file loading — just download the JS code from GitHub, place it in your project, and reference it in your HTML page. Like this:

Create a new helloworld.html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hello 3D Earth</title>
 <script src="CesiumUnminified/Cesium.js"></script>
 <style>
 @import url(CesiumUnminified/Widgets/widgets.css);
 html, body, #cesiumContainer {
 width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
 }
 </style>
</head>
<body>
 <div id="cesiumContainer"></div>
 <script src="app.js"></script>
</body>
</html>

Create a new app.js:

1

viewer = new Cesium.Viewer('cesiumContainer');

Here, cesiumContainer is the id of the HTML div that displays the map. It’s that simple — open the HTML page in a browser and you’ll see a 3D globe. The base map is Microsoft imagery loaded onto the 3D globe, with basic online map features including zoom in, zoom out, and pan. It also includes a timeline and other time-related widgets, which is a distinctive feature of Cesium — its maps, objects, and scenes can all be associated with time.

Local Hello World Program

Now that the local Node server is running, open your browser and navigate to: http://localhost:8080/Apps/HelloWorld.html. You should see a Hello World 3D digital globe identical to the official one.

Hello World Code Analysis

The official Hello World code is as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


<!DOCTYPE html>
<html lang="en">
<head>
 <!-- Use correct character set. -->
 <meta charset="utf-8">
 <!-- Tell IE to use the latest, best version. -->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 <title>Hello World!</title>
 <script src="../Build/Cesium/Cesium.js"></script>
 <style>
 @import url(../Build/Cesium/Widgets/widgets.css);
 html, body, #cesiumContainer {
 width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
 }
 </style>
</head>
<body>
 <div id="cesiumContainer"></div>
 <script>
 var viewer = new Cesium.Viewer('cesiumContainer');
 </script>
</body>
</html>

The following four steps add Cesium to the HTML:

Include Cesium.js, which defines the Cesium object:

1

<script src="../Build/Cesium/Cesium.js"></script>

Import the Cesium Viewer widget styles:

1

@import url(../Build/Cesium/Widgets/widgets.css);

The Cesium view resides in this div:

1

<div id="cesiumContainer"></div>

Finally, create the Cesium viewer:

1

var viewer = new Cesium.Viewer('cesiumContainer');

Cesium Chinese Website QQ Group: 807482793

Original link: http://cesiumcn.org/topic/138.html | Quick access: http://cesium.coinidea.com/topic/137.html

[CesiumJS]Cesium Getting Started 1 – Introduction to Cesium

Thu, 09 Aug 2018 03:28:08 +0000

Introduction to Cesium

Cesium official website: https://cesiumjs.org

The website title states:

1

An open-source JavaScript library for world-class 3D globes and maps

Cesium is an open-source JavaScript-based 3D mapping framework. Essentially, it is a map visualization framework.

The website description states:

1

CesiumJS is a geospatial 3D mapping platform for creating virtual globes. Our mission is to create the leading web-based globe and map for visualizing dynamic data. We strive for the best possible performance, precision, visual quality, ease of use, platform support, and content.

CesiumJS is a 3D geospatial platform for creating virtual scenes. Its goal is to create web-based dynamic data visualization using maps. It strives to provide the best performance, accuracy, visualization capabilities, ease of use, and platform support.

Data Formats and Features

Cesium supports 3D Tiles, Terrain and Imagery Layers, 3D Models (glTF), Vectors and Geometry (Load KML, GeoJSON, TopoJSON, and CZML), Time-Dynamic Visualization, 3D, 2D, and 2.5D Columbus View.

Supports 2D, 2.5D, and 3D geographic (map) data display
Can draw various geometric shapes, highlight regions, supports importing images and even 3D models for diverse data visualization
Can be used for dynamic data visualization with good touch support, compatible with most desktop and mobile browsers
Supports time-axis-based dynamic streaming data display

Thoughts

Thanks to the development of frontend technologies, the standardization of HTML5 and CSS3, increasingly better WebGL support from major browser vendors, growing personal computer memory, and advances in graphics cards, I can see the browser-based 3D digital globe that I’ve always wanted to build becoming a reality. I’m very excited.

Summary

Cesium is a cross-platform, cross-browser JavaScript library for displaying 3D globes and maps.
Cesium uses WebGL for hardware-accelerated graphics. No plugins are required, but the browser must support WebGL.
Cesium is an open-source project licensed under Apache 2.0. It can be used freely for both commercial and non-commercial purposes.

Cesium Chinese Website QQ Group: 807482793

Original link: http://cesiumcn.org/topic/137.html | Quick access: http://cesium.coinidea.com/topic/137.html

[CesiumJS]Sample Code for Cesium Globe Rotation

Thu, 26 Jul 2018 07:48:41 +0000

Sharing some code to make the Cesium globe rotate automatically.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


var i = Date.now();

function rotate() {
 var a = .1;
 var t = Date.now();
 var n = (t - i) / 1e3;
 i = t;
 viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -a * n);
}

viewer.clock.onTick.addEventListener(rotate);
setTimeout(function() {
 viewer.clock.onTick.removeEventListener(rotate);
}, 5000);

[CesiumJS]OSGB to Cesium 3D Tiles Conversion Tool

Thu, 26 Jul 2018 07:44:58 +0000

Cesium does not support loading oblique photography OSGB data directly:

https://www.oschina.net/question/104733_2198017

However, OSGB data can be converted into a format that Cesium can load.

Currently, the best-supported format defined by Cesium is 3D Tiles. This format is still evolving and not yet fully mature, but based on official demos, the results are quite impressive.

3D Tiles adds FeatureTable and BatchTable at the logical (JSON) layer, as well as the LOD (tileset) concept, with corresponding binary storage headers. From a data specification perspective, it inherits the excellent parts of glTF while also considering oblique photography and point clouds. Support for OSM is planned for the future, providing good coverage of data types.

3D Tiles = glTF + LOD

https://www.cnblogs.com/fuckgiser/p/6565957.html

During development, I found some conversion tools shared by developers online:

https://www.v2ex.com/t/402321

https://blog.csdn.net/qq_37796475/article/details/79221939

After testing, I found that:

https://download.csdn.net/download/qq_37796475/10274378 this tool works quite well.

After downloading the conversion tool, there is an operation example image included in the directory. Feel free to leave a comment if you have any questions.

Original link: http://cesiumcn.org/topic/3.html

[ElasticSearch]PHP Operations with ElasticSearch

Thu, 04 Jan 2018 09:04:18 +0000

Official API:
You can download the official PHP ElasticSearch API and read the documentation for related operations.
Example code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36


static public function initSearchClient() {
 if (null == BaseFrontController::$client) {
 $hosts['hosts'] = array(
 "host" => '127.0.0.1',
 "port" => '9200',
 'scheme' => 'http'
 );
 BaseFrontController::$client = \Elasticsearch\ClientBuilder::create()
 ->setSSLVerification(false)
 ->setHosts($hosts)
 ->build();
 }
}

// Elastic search
static public function actionSearch($area, $keyword, $start, $end, $size=100, $agg = null) {
 BaseFrontController::initSearchClient();
 $params['index'] = BaseFrontController::getSearchIndex();
 $params['type'] = 'raw';
 $params['body']["size"] = $size;
 // your aggs
 if (null != $agg) {
 $params['body']["aggs"] = $agg;
 }
 $params['body']["query"]["filtered"]['filter']["and"] = [
 ["term"=>['Your area' => $area]], // your area
 ["range"=>["Your time" => array("gte"=>$start, "lte"=>$end)]] // your time
 ];

 if ($keyword != '') {
 $params['body']["query"]["filtered"]['query']['bool']['should']['match_phrase'] = array();// your query word
 }

 $response = BaseFrontController::$client->search($params);
 return $response;
}

[Web Development]HTML5 Geolocation Inaccuracy Issues

Thu, 04 Jan 2018 07:54:52 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(getPosition, getPositionError, {
 // Indicates the browser should obtain high-accuracy position, default is false
 enableHighAccuracy: true,
 // Specifies the timeout for obtaining geolocation, default is unlimited, in milliseconds
 timeout: 5000,
 // Maximum cache age — when repeatedly obtaining geolocation, this parameter specifies how long before re-fetching the position
 maximumAge: 3000
 });
}

The above code is commonly seen in H5-related geolocation implementations. It uses the device’s own GPS for positioning, but through testing I found it was very inaccurate. The desktop version would directly throw errors.

On mobile, if you use Baidu’s API set, the location drifts significantly. Based on observation, it uses cell tower positioning.
I then thought — is Baidu really this bad? So I tried the native code above, and found it frequently errors out:
Error using Geolocation method: error.POSITION_UNAVAILABLE
After investigating for a long time, the desktop version just wouldn’t work. Finally I figured it out — key point:

GPS services now strongly prefer HTTPS. HTTP is increasingly unsupported. Chrome even explicitly states that geolocation requires HTTPS.

After testing again with HTTPS, the accuracy was incredible — within 10 meters.

[Year-End Review]My 2017

Thu, 04 Jan 2018 07:25:24 +0000

Time flies, and 2017 has finally come to an end. To be honest, I have some mixed feelings about writing summaries.

1. Technology:

1. Frontend Tech Stack:

1.1 Went through VUE once and basically got started with it;
1.2 Had some exposure to Fis3;

2.1 Learned Yii 2.0 and implemented some simple projects;
2.2 Upgraded from ThinkPHP 3.x to ThinkPHP 5;

3.1 During the middle of the year, I solved several dozen LeetCode problems, but didn’t keep it up. Back in 2015 I should have finished them all, but now there are many new problems. I also picked up STL, Vector, etc. again.
3.2 The proudest achievement this year was working with OpenCV, implementing a BOW image classification algorithm, and also using OpenCV-based decision trees, SVM, etc.

4.1 I had already gone through CDH back in 2015. The most rewarding thing this year was getting ElasticSearch up and running with approximately 150 million records, including tokenization, mapping, indexing, and aggregation. Going through this whole process was very fulfilling.

2. Travel:

I’m a bit embarrassed to say — including business trips, I only went to Shanghai, Nanjing, and Qingdao. Just these three cities. But I finally made it to Shanghai Disneyland, which was nice, just way too crowded.

3. Coinidea:

Did it take off? I don’t think so. It didn’t go particularly well. I’ve built dozens of websites, WebApps, and APIs of various sizes, but I feel very lost and don’t know which direction to take next. I’ve been making some attempts recently and hope that new doors will open for me.

Hopes for Next Year

Android — I studied it before but never followed through.
Develop and publish a WeChat Mini Program.
Study and learn PostgreSQL.
Further study data mining and deep learning algorithms.

That’s it, no grand wishes. Setting low goals is good for everyone :)

[MySQL]Automatic MySQL Backup

Tue, 28 Nov 2017 02:59:06 +0000

Create the backup.sh Script

Create a new backup.sh file with the following content:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


db_user="Your database user"
db_passwd="Your password"
db_name="Your database name"

# Backup file storage directory — you need to change this directory
backup_dir="/home/mysqlbackup"

# Date format for backup files (dd-mm-yyyy)
time="$(date +"%Y%m%d%H%M%S")"

# Execute the backup command
mysqldump -h localhost -u $db_user -p$db_passwd --all-databases --sock=/var/lib/mysql/mysql.sock > "$backup_dir/db_$time.sql"

Then, grant execution permissions and run the script:

1
2


chmod +x ./backup.sh
bash -x ./backup.sh

If you get a socket error, you need to specify sock. See: http://blog.csdn.net/seteor/article/details/18356079.

Create a Scheduled Task

Edit the crontab:

1

crontab -e

In the editor, add the following line:

1

00 23 * * * /home/mysqlbackup/backup.sh

This command will execute backup.sh every day at 23:00, backing up the database to /home/mysqlbackup.

View scheduled tasks:

1

crontab -l

[CentOS]Upgrading OpenSSH and vsftpd on CentOS

Thu, 23 Nov 2017 08:05:04 +0000

Upgrading OpenSSH to Version 7.4 or Above

Background

Currently, OpenSSH versions below 7.4 on Linux have some critical vulnerabilities, and OpenSSH needs to be upgraded to version 7.4 or above. On a machine without external network access (no yum), this is quite troublesome. Online resources generally recommend backing up SSH and installing Telnet first, so you can still access the machine via Telnet if the upgrade fails.

Common Issues and Solutions

4. Dependencies required for manually compiling OpenSSH

zlib
pam
pam-devel

If you get the error configure: error: PAM headers not found, you can download pam-devel:

http://rpm.pbone.net/index.php3?stat=26&dist=74&size=208492&name=pam-devel-1.1.1-17.el6.x86_64.rpm

5. OpenSSL download

ftp://ftp.openssl.org/source/

6. Installing OpenSSL

References:

Notes

If SecureCRT cannot log in after upgrading OpenSSH, it may be because the SecureCRT version is too old to support certain encryption protocols:

Reference: http://blog.csdn.net/yangg1991/article/details/51755562

Steps to Upgrade OpenSSH

Reference: http://blog.csdn.net/u011080082/article/details/64503534

Upgrading vsftpd from 2.2.2 to 2.3.4

Download the vsftpd-2.3.4.tar.gz package. For 64-bit systems, note:

1
2


sed -i 's/lib\/lib64\/g' vsf_findlibs.sh
sed -i 's/lib\//lib64\//g' vsf_findlibs.sh

Configuring vsftpd

Using active mode:

1

vsftpd /etc/vsftpd/vsftpd.conf &

When starting in standard_alone mode, you need to add the following two lines to the top of the configuration file:

Reference: http://wingjang.blog.163.com/blog/static/47913442200811113104509/

1
2


listen=YES
listen_port=21

After installation, only anonymous users are allowed to log in by default, so you need to modify the configuration:

Reference: http://blog.sina.com.cn/s/blog_7e16680c01018ox1.html

Handling TCP_Wrapper Issues

If there are issues, pay attention to removing spaces, or you can remove it entirely:

References:

vsftpd Download

http://pkgs.fedoraproject.org/repo/pkgs/vsftpd/

[ElasticSearch]Modifying ES Mapping

Sun, 19 Nov 2017 12:23:18 +0000

Having used MySQL-like databases for so long, one day I ran into a major pitfall with ES.
When posting the mapping, I didn’t properly distinguish between “analyzed” and “not_analyzed” for a field, which accidentally caused all data in that column to be tokenized. The dataset had approximately 150 million records.
I naively thought I could just modify the field attributes like in MySQL. ES is based on Lucene, and there’s no other way — in simple terms, you either delete the index and re-import, or reindex. Reindexing means creating a new index and copying the data from the old index over. There are many tutorials online for this, for example:
http://blog.csdn.net/loveyaqin1990/article/details/77684599
https://www.cnblogs.com/wmx3ng/p/4112993.html

As for actual implementation code, there’s very little available online. After a long search, I only found a Python implementation. This article provides a migration implementation based on the official ES PHP SDK and bulk API.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58


<?php
require 'vendor/autoload.php';
$hosts['hosts'] = array(
 "host" => '127.0.0.1',
 "port" => '9200',
 'scheme' => 'http'
);
$client = Elasticsearch\ClientBuilder::create()
 ->setSSLVerification(false)
 ->setHosts($hosts)
 ->build();
for ($i = 1; $i <= 10; $i++) {
 if ($i != 10) {
 $params['index'] = 'index-0'.$i;
 }
 else {
 $params['index'] = 'index-'.$i;
 }
 echo $params["index"]."\r\n";
 $params['type'] = 'raw';
 $params['scroll'] = '120s';
 $params["size"] = 50000;
 $params["body"] = array(
 "query" => array(
 "match_all" => array()
 )
 );
 $response = $client->search($params);
 $step = 1;
 while (isset($response['hits']['hits']) && count($response['hits']['hits']) > 0) {
 echo $step++."\t";
 $scroll_id = $response['_scroll_id'];
 unset($response);
 $response = $client->scroll(
 array(
 "scroll_id" => $scroll_id,
 "scroll" => "120s"
 )
 );
 if (count($response['hits']['hits']) > 0) {
 $bulk = array('index'=>$params['index']."-reindex",'type'=>$params['type']);
 foreach ($response["hits"]["hits"] as $key=>$val) {
 $bulk['body'][]=array(
 'index' => array(
 '_id'=>$val['_id']
 ),
 );
 $bulk['body'][] = $val['_source'];
 }
 // insert reindex
 $res = $client->bulk($bulk);
 unset($bulk);
 } else {
 break;
 }
 }
}
?>

[Push Notifications]Push Notifications Based on Umeng Service

Sun, 19 Nov 2017 11:48:10 +0000

When the server interacts with mobile clients, it often needs to push messages from the server to the user’s mobile device. Umeng provides such a push notification service — UPush.

Download the SDK code. Based on the demo, this article provides a simple ThinkPHP integration.

1
2
3
4
5
6


$appkey = "your app key";
$secret = "your app secret";
import('@.ORG.Notification');
$notification = new Notification($appkey, $secret);
$custom_data = array($key=>$value);
$notification->sendIOSBroadcast($your_title, $custom_data);

Notification.class.php is the demo.php from the SDK, encapsulated into ThinkPHP’s ORG folder.
If you have any questions, feel free to leave a comment below. I typically reply once a day.

[ThinkPHP]Table Locking Under Concurrency in ThinkPHP

Fri, 17 Nov 2017 03:10:04 +0000

Recently I needed to build a registration system that doesn’t require very high concurrency, but there’s still a possibility of multiple users registering at the same time. Since registration involves ordering, without row locking or table locking, the following situation can occur.
Example:
Currently the system only has user A registered with order 1, denoted as (A, 1).
At some moment t, users B, C, and D register simultaneously. The backend receives all three requests almost at the same time, queries the registration table, finds only (A, 1), and inserts (B, 2), (C, 2), (D, 2) into the table, resulting in:

1
2
3
4


(A, 1)
(B, 2)
(C, 2)
(D, 2)

My initial idea was: instead of recording the order number, I would record the insertion timestamp, which would give:

1
2
3
4


(A, ta)
(B, tb)
(C, tc)
(D, td)

ta, tb, tc, td are almost impossible to be equal.
However, this approach has three unsolvable issues:

There is a (very low) probability that timestamps could be equal
It’s not intuitive and requires sorting by timestamp
Registration has a capacity limit (e.g., 40 spots) and needs to immediately report whether the registration was successful

The current solution is to use database locking.
After researching online, ThinkPHP supports both pessimistic and optimistic locking. Given the low traffic of the target system, pessimistic locking is sufficient.

MyISAM can only lock tables, while InnoDB supports row-level locking. Table locking is sufficient for the target system.
The official documentation provides this table locking approach:

1

$User->lock(true)->save($data);// Use pessimistic locking

However, the target system needs to perform a series of operations, so the table locking code used is:

1
2
3
4


M()->query("lock tables yourtable write");
// TODO
// your code
M()->query("unlock tables");

The actual results worked quite well [real dates have been redacted]:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40


??-??-?? 10:00:00 1
??-??-?? 10:00:00 2
??-??-?? 10:00:00 3
??-??-?? 10:00:00 4
??-??-?? 10:00:01 5
??-??-?? 10:00:01 6
??-??-?? 10:00:01 7
??-??-?? 10:00:01 8
??-??-?? 10:00:02 9
??-??-?? 10:00:02 10
??-??-?? 10:00:02 11
??-??-?? 10:00:02 12
??-??-?? 10:00:02 13
??-??-?? 10:00:02 14
??-??-?? 10:00:03 15
??-??-?? 10:00:03 16
??-??-?? 10:00:03 17
??-??-?? 10:00:05 18
??-??-?? 10:00:06 19
??-??-?? 10:00:07 20
??-??-?? 10:00:08 21
??-??-?? 10:00:10 22
??-??-?? 10:00:15 23
??-??-?? 10:00:17 24
??-??-?? 10:00:19 25
??-??-?? 10:00:19 26
??-??-?? 10:00:24 27
??-??-?? 10:00:25 28
??-??-?? 10:00:34 29
??-??-?? 10:00:35 30
??-??-?? 10:00:38 31
??-??-?? 10:01:06 32
??-??-?? 10:01:11 33
??-??-?? 10:01:11 34
??-??-?? 10:01:17 35
??-??-?? 10:01:18 36
??-??-?? 10:02:27 37
??-??-?? 10:02:38 38
??-??-?? 10:02:39 39
??-??-?? 10:02:57 40

[leetcode]First Bad Version

Tue, 18 Jul 2017 14:17:57 +0000

This problem is a variation of binary search, but be very careful about integer overflow when summing large numbers. The correct way to compute the midpoint is left + (right - left) / 2. I used long long instead.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


// Forward declaration of isBadVersion API.
bool isBadVersion(int version);

class Solution {
public:
 int bSearch(long long left, long long right) {
 if (left >= right) {
 return right;
 }
 long long middle = (left + right) / 2;
 if (!isBadVersion(middle)) {
 if (middle + 1 > right) return middle;
 if (isBadVersion(middle + 1)) return middle + 1;
 else return bSearch(middle, right);
 }
 else {
 return bSearch(left, middle);
 }
 }

 int firstBadVersion(int n) {
 return bSearch(1, n);
 }
};

[leetcode]Palindrome Linked List

Tue, 18 Jul 2017 06:10:24 +0000

This problem asks to determine if a singly linked list is a palindrome. My original idea was to reverse the first half of the linked list and then traverse again, which should meet the time complexity $O(n)$ and space complexity $O(1)$ requirements, but it kept getting a time limit exceeded error for some reason.
After checking the discuss section and hints, a simple recursion actually works.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


class Solution {
public:
 ListNode * temp;
 bool isPalindrome(ListNode* head) {
 temp = head;
 return check(head);
 }

 bool check(ListNode * node) {
 if (node == NULL) return true;
 bool flag = check(node->next) && (node->val == temp->val);
 temp = temp->next;
 return flag;
 }
};

[C#]Serial Port Send and Receive Data

Mon, 17 Jul 2017 14:12:53 +0000

Client Class

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO.Ports;

namespace COMClient
{
 public class COMClient
 {
 private SerialPort sp = null;

 public COMClient(string COM)
 {
 this.sp = new SerialPort(COM);
 // Open a new serial port connection
 this.sp.Open();
 // Discard data from the serial driver's receive buffer
 this.sp.DiscardInBuffer();
 // Discard data from the serial driver's transmit buffer
 this.sp.DiscardOutBuffer();
 }

 ~COMClient()
 {
 // Close the port connection
 this.sp.Close();
 }

 public void sendMsg(string msg)
 {
 // Write the specified number of bytes to the serial port using buffer data
 this.sp.WriteLine(msg);
 }
 }
}

Client call:

1
2


COMClient.COMClient com_client = new COMClient.COMClient("COM4");
com_client.sendMsg("Hello World!");

Server:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO.Ports;

namespace COM_Server
{
 class Program
 {
 static void Main(string[] args)
 {
 // Iterate through the serial port name array
 foreach (string port in System.IO.Ports.SerialPort.GetPortNames())
 {
 Console.WriteLine(port);
 }

 byte[] b = new byte[32];
 SerialPort sp = new SerialPort("COM3");

 while (true)
 {
 // Open a new serial port connection
 sp.Open();
 // Discard data from the serial driver's receive buffer
 sp.DiscardInBuffer();
 // Discard data from the serial driver's transmit buffer
 sp.DiscardOutBuffer();
 // Read bytes from the serial input buffer and write them at the specified offset in a byte array
 string msg = sp.ReadLine();
 StringBuilder sb = new StringBuilder();
 Console.Write(msg);
 // Close the port connection
 sp.Close();
 // Suspend the current thread for 500 milliseconds
 System.Threading.Thread.Sleep(500);
 }
 }
 }
}

A virtual serial port is needed here — just install VSPD. Here we configure virtual serial ports COM3 and COM4:

Server startup screenshot:

Client sending screenshot:

Server receiving screenshot:

[leetcode]Maximum Product Subarray

Mon, 17 Jul 2017 06:34:07 +0000

This problem gives an array and asks for the maximum product of a subarray, considering positive numbers, negative numbers, and zeros. The hint suggests computing a max and min for each value, then using them to generate the maximum and minimum including the current element. I used a simulation approach instead: multiply all numbers together — if the product is positive, it’s the maximum; if negative, compare the results of dropping the leftmost or rightmost negative number. To handle zeros, first split the array by zeros.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57


class Solution {
public:
 int maxProductNoZero(vector<int>& nums) {
 int max = 1;
 int left = nums.size();
 int right = -1;
 for (int i = 0; i < nums.size(); i++) {
 max *= nums[i];
 if (nums[i] < 0 && i < left) {
 left = i;
 }
 if (nums[i] < 0 && i > right) {
 right = i;
 }
 }
 if (max < 0 && nums.size() > 1) {
 int max_left = 1;
 for (int i = left + 1; i < nums.size(); i++) {
 max_left *= nums[i];
 }
 int max_right = 1;
 for (int i = 0; i < right; i++) {
 max_right *= nums[i];
 }
 max = max_left > max_right ? max_left : max_right;
 }
 return max;
 }

 int maxProduct(vector<int>& nums) {
 int max = nums[0];
 vector<int> zero;
 zero.clear();
 zero.push_back(-1);
 for (int i = 0; i < nums.size(); i++) {
 if (max < nums[i]) {
 max = nums[i];
 }
 if (0 == nums[i]) {
 zero.push_back(i);
 }
 }
 zero.push_back(nums.size());
 for (int i = 0; i < zero.size() - 1; i++) {
 if (zero[i + 1] - 1 >= zero[i] + 1) {
 vector<int> sub;
 sub.clear();
 for (int j = zero[i] + 1; j <= zero[i + 1] - 1; j++) {
 sub.push_back(nums[j]);
 }
 int tmp = maxProductNoZero(sub);
 if (tmp > max) max = tmp;
 }
 }
 return max;
 }
};

[LeetCode] Isomorphic Strings

Fri, 14 Jul 2017 03:38:23 +0000

This problem can be solved by using a hash map to store the mapping between the two strings. I initially thought it only contained lowercase letters, but it actually includes all ASCII characters. I started with one hash map, but since the mapping needs to be one-to-one, I ended up using two.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


class Solution {
public:
 bool isIsomorphic(string s, string t) {
 if (s.length() != t.length()) return false;
 char hash_s[256];
 char hash_t[256];
 memset(hash_s, NULL, 256);
 memset(hash_t, NULL, 256);
 for (int i = 0; i < s.length(); i++) {
 if (NULL == hash_s[s[i]] && NULL == hash_t[t[i]]) {
 hash_s[s[i]] = t[i];
 hash_t[t[i]] = s[i];
 }
 else {
 if (hash_s[s[i]] != t[i] || hash_t[t[i]] != s[i]) return false;
 }
 }
 return true;
 }
};

[leetcode]Two Sum II – Input array is sorted

Fri, 14 Jul 2017 03:34:59 +0000

For this problem I used binary search, since the array is sorted. A better approach would be to use two pointers (left and right) moving inward. I recall seeing this problem before in “The Beauty of Programming” or “Erta to Offer”.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


class Solution {
public:
 vector<int> result;

 void bSearch(vector<int>& numbers, int start, int end, int find) {
 if (start > end) return;
 int middle = (start + end) / 2;
 if (find == numbers[middle]) {
 result.push_back(middle + 1);
 return;
 } else if (find > numbers[middle]) {
 bSearch(numbers, middle + 1, end, find);
 } else {
 bSearch(numbers, start, middle - 1, find);
 }
 }

 vector<int> twoSum(vector<int>& numbers, int target) {
 for (int i = 0; i < numbers.size(); i++) {
 int find = target - numbers[i];
 result.push_back(i + 1);
 bSearch(numbers, i + 1, numbers.size(), find);
 if (result.size() == 2) {
 return result;
 }
 result.clear();
 }
 return result;
 }
};

[LeetCode] Combine Two Tables

Fri, 14 Jul 2017 03:31:53 +0000

This problem is simply a table join query. However, I initially thought JOIN was the same as LEFT JOIN, and used WHERE instead of ON, which resulted in an inner join. I got it wrong several times.

1
2
3
4


select p.FirstName, p.LastName, a.City, a.State
from Person as p
left join Address as a
on p.PersonId = a.PersonId

[leetcode]Min Stack

Fri, 14 Jul 2017 03:26:49 +0000

It’s been almost two years since I last practiced problems, and the pressure is huge. I’ve been practicing recently to keep my skills sharp.

This problem is supposedly from “erta to Offer”. My solution obviously has issues, but it still got accepted. I’ve realized that after writing PHP, JS, and C# for so long, I’ve almost forgotten how to use Vector.

The correct approach for this problem should be to use one stack to maintain the minimum value — push onto it whenever a new minimum is found. Another stack holds the data. This ensures O(n) complexity with O(1) query time.

My somewhat naive solution:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43


class MinStack {
private:
 vector<int> stack;
 int min;
public:
 MinStack() {
 stack.clear();
 }

 void push(int x) {
 if (stack.empty() || min > x) {
 min = x;
 }
 stack.push_back(x);
 }

 void pop() {
 if (!stack.empty()) {
 stack.pop_back();
 genMin();
 }
 }

 void genMin() {
 min = *(stack.begin());
 for (vector<int>::iterator i = stack.begin() + 1; i < stack.end(); i++) {
 if (min > *i) {
 min = *i;
 }
 }
 }

 int top() {
 if (!stack.empty()) {
 return *(stack.end() - 1);
 }
 return false;
 }

 int getMin() {
 return min;
 }
};

[MySQL] is marked as crashed and should be repaired

Fri, 28 Apr 2017 08:45:59 +0000

A website’s articles were not displaying. My best guess was that the database was down. After connecting, the database was accessible, but the articles table could not be opened, with the error:

Table is marked as crashed and should be repaired.

I was startled for a moment. Although I had scheduled backups, could the database really be broken? Or was there a security vulnerability?

Based on the literal meaning, I should repair the table.
After looking it up, Navicat happens to have this feature, so I tried to repair it.
Error:
mysql table is marked as crashed and last (automatic?) repair failed

The automatic repair failed.

Prepared to check the server logs
3.1 MySQL was running. Restarted it – normal, but the articles table still couldn’t be read.
3.2 Since the table uses the ISAM engine, I tried the method found online:

myisamchk -r /your/table/data/path.MYI

Still failed.
3.3 While about to check the logs, I noticed that the disk where MySQL data was stored had run out of space – 0 bytes remaining.

3.4 Obviously, after cleaning up and moving unnecessary files, I used Navicat to repair the table, and it succeeded on the first try.

It’s been a long time since I wrote a blog post. I need to keep at it.

[HTML5] Local Image Reading and Cropping with HTML5

Tue, 03 Jan 2017 08:18:50 +0000

You need to use HTML5’s FileReader. Here, image-file is an input type=file file browser. If you need to restrict it to images or camera input:
1

<input type="file" accept="image/*" capture="camera" id="image-file" name="image-file" />

When the user selects an image, bind a change event to the input file to automatically read the local file.

1
2
3
4
5
6
7


var image_file = document.getElementById("image-file");
if (typeof FileReader === 'undefined') {
 image.innerHTML = "Sorry, your browser does not support FileReader";
 image_file.setAttribute('disabled', 'disabled');
} else {
 image_file.addEventListener('change', readFile, false);
}

image is an img tag with the id image. The readFile function reads the image and automatically center-crops it to a width that adapts to the screen and a fixed height of 180px. The cropping process uses Canvas.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


function readFile() {
 var file = this.files[0];
 if (!/image\/\w+/.test(file.type)) {
 alert("The file must be an image!");
 return false;
 }
 var reader = new FileReader();
 reader.readAsDataURL(file);
 reader.onload = function(e) {
 var image = document.getElementById("image");
 var img = new Image();
 img.src = this.result;
 img.onload = function() {
 var x = 0, y = 0, width = img.width, height = img.height;
 if (img.width / window.innerWidth > img.height / 180) {
 width = window.innerWidth * img.height / 180;
 x = (img.width - width) / 2;
 } else {
 height = 180 * img.width / window.innerWidth;
 y = (img.height - height) / 2;
 }

 var canvas = document.createElement('canvas');
 canvas.width = window.innerWidth;
 canvas.height = 180;
 var ctx = canvas.getContext('2d');
 ctx.drawImage(img, x, y, width, height, 0, 0, canvas.width, canvas.height);
 var data = canvas.toDataURL();

 image.innerHTML = '<img class="img-responsive" style="width:100%; height: 180px;" src="' + data + '" alt="" />';
 }
 }
}

Through these steps, the user can select an image, automatically read the local file, and then center-crop it to a width that adapts to the screen with a fixed height of 180px.

[MySQL] Removing Carriage Returns and Line Feeds from Fields

Sat, 31 Dec 2016 06:32:25 +0000

1

update table set item=replace(replace(item, char(10), ''), char(13), '') where condition;

table: table name
item: field name
condition: query condition

[JavaScript] Deep Copy in JavaScript

Thu, 08 Dec 2016 09:42:07 +0000

1

var obj1 = JSON.parse(JSON.stringify(obj2));

The above method uses JSON round-trip conversion for deep copying arrays or objects. It has some limitations but works for most cases. For details, see
https://segmentfault.com/a/1190000000501320

[PHP] Filtering All Punctuation with PHP Regular Expressions

Thu, 08 Dec 2016 09:40:15 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// Filter English punctuation
$word = preg_replace("/[[:punct:]]/i", " ", $word);

// Filter Chinese punctuation
mb_regex_encoding('utf-8');
$char = "。、！？：；﹑•＂…''""〝〞∕¦‖—　〈〉﹞﹝「」‹›〖〗】【»«』『〕〔》《﹐¸﹕︰﹔！¡？¿﹖﹌﹏﹋＇´ˊˋ―﹫︳︴¯＿￣﹢﹦﹤‐­˜﹟﹩﹠﹪﹡﹨﹍﹉﹎﹊ˇ︵︶︷︸︹︿﹀︺︽︾ˉ﹁﹂﹃﹄︻︼（）";
$word = mb_ereg_replace("[".$char."]", " ", $word, "UTF-8");

// Filter consecutive spaces
$word = preg_replace("/\s+/", " ", $word);

mb_ereg_replace is used for Chinese character replacement. When using regex, you don’t need to add / / delimiters.

[PHP] Large-Scale Data Import and Export with ThinkPHP, PHP, and MySQL

Thu, 08 Dec 2016 09:37:45 +0000

Large-Scale Data Import and Export

Note: “Large-scale” here refers to importing and exporting 100,000+ records from text files (including Office documents such as docx, xlsx).

MySQL has two very common table types: MyISAM and InnoDB. There are many comparisons of these two types online. The main difference is that InnoDB supports transactions and row-level locking, while MyISAM does not. MyISAM is relatively more efficient, and each has its own advantages and disadvantages.

Use Cases for MyISAM and InnoDB

MyISAM is suitable for:

Frequent COUNT calculations;
Infrequent inserts but frequent queries;
No transactions needed.

InnoDB is suitable for:

High reliability requirements or transaction support needed;
Frequent table updates and queries with high likelihood of table locking.

Differences Between MyISAM and InnoDB

MyISAM does not support advanced features like transactions, while InnoDB does.
MyISAM tables do not support foreign keys.
During write operations (insert, update, delete), MyISAM locks the entire table, while InnoDB locks only the affected rows.
When your database has heavy writes, updates, and deletions with relatively few queries, or when data integrity requirements are high, choose InnoDB. When your database is primarily read-heavy with relatively few updates and writes, and data integrity requirements are less strict, choose MyISAM, as its query performance is faster than InnoDB.

In summary, InnoDB is a good choice for this scenario.

Optimization Methods for Inserting Large Amounts of Data

When PHP needs to insert large amounts of data, inserting one record at a time results in severe I/O performance bottlenecks.

Demo Code:

1
2
3
4
5
6
7


$params = array('value' => '50');
set_time_limit(0);
echo date("H:i:s");
for($i = 0; $i < 2000000; $i++) {
 $connect_mysql->insert($params);
}
echo date("H:i:s");

There are two methods to solve this problem:

1. Using Transactions (InnoDB supported)

For example, you can commit a transaction every 10,000 or 100,000 records, which greatly reduces I/O.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


echo date("H:i:s");
$connect_mysql->query('BEGIN');
$params = array('value' => '50');
for($i = 0; $i < 2000000; $i++) {
 $connect_mysql->insert($params);
 if($i % 100000 == 0) {
 $connect_mysql->query('COMMIT');
 $connect_mysql->query('BEGIN');
 }
}
$connect_mysql->query('COMMIT');
echo date("H:i:s");

2. SQL Statement Concatenation

This is a MySQL feature that uses optimized SQL statements: concatenate SQL statements using insert into table () values (),(),(),() and insert them all at once. If the string is too long, you need to configure MySQL by running:

1

SET GLOBAL max_allowed_packet = 2 * 1024 * 1024 * 10;

1
2
3
4
5
6


$sql = "INSERT INTO twenty_million (value) VALUES";
for($i = 0; $i < 2000000; $i++) {
 $sql .= "('50'),";
}
$sql = substr($sql, 0, strlen($sql) - 1);
$connect_mysql->query($sql);

The first method is more commonly used, while the second is mostly for test data.

By default, PHP has a memory limit of 128MB. When ThinkPHP exceeds this memory limit, you can either increase PHP’s default maximum memory or simply remove the APP_DEBUG constant definition in the entry file or set it to false. This will save a lot of memory. Of course, you can also use transaction mode to commit every n records. ThinkPHP’s addAll function can also be used for batch inserts, though it has quite a few bugs.

Starting and Committing Transactions in ThinkPHP

1
2


$table->startTrans();
$table->commit();

When working with Office files, PHPWord and PHPExcel are recommended.

[Web Development] Migrating DedeCMS to Discuz Portal

Fri, 18 Nov 2016 05:14:05 +0000

I recently needed to migrate from DedeCMS (dedecms) to Discuz Portal. The most important challenge was how to migrate categories and a large number of articles.

The database tables involved are:

dede_addonarticle - Article table
dede_arctype - Category table
dede_relation - Old-to-new category mapping table
pre_portal_article_content - Article content table
pre_portal_article_title - Article title table
pre_portal_article_count - Article view count table

1. Preprocess the old table, merge `typename`

1
2
3


UPDATE dede_addonarticle, dede_arctype
SET dede_addonarticle.typename = dede_arctype.typename
WHERE dede_arctype.id = dede_addonarticle.typeid;

2. Merge `click`, `title`, `writer`, `pubdate`, `keywords`, `description`

1
2
3
4
5
6
7
8
9


UPDATE dede_addonarticle, dede_archives
SET
 dede_addonarticle.click = dede_archives.click,
 dede_addonarticle.title = dede_archives.title,
 dede_addonarticle.writer = dede_archives.writer,
 dede_addonarticle.pubdate = dede_archives.pubdate,
 dede_addonarticle.keywords = dede_archives.keywords,
 dede_addonarticle.description = dede_archives.description
WHERE dede_archives.id = dede_addonarticle.aid;

3. Generate new IDs in `relation`

1
2
3


UPDATE dede_relation, pre_portal_category
SET dede_relation.catid = pre_portal_category.catid
WHERE dede_relation.new = pre_portal_category.catname;

4. Populate `catid` based on `typename` and `relation`

1
2
3


UPDATE dede_addonarticle, dede_relation
SET dede_addonarticle.catid = dede_relation.catid
WHERE dede_addonarticle.typename LIKE CONCAT("%", dede_relation.olds, "%");

5. Import into Discuz Portal Tables

Insert into `pre_portal_article_content` (Article content table)

1
2
3


INSERT INTO pre_portal_article_content(aid, title, content, dateline)
SELECT aid, title, body, pubdate AS dateline
FROM dede_addonarticle;

Insert into `pre_portal_article_title` (Article title table)

1
2
3


INSERT INTO pre_portal_article_title(aid, username, title, author, summary, dateline)
SELECT aid, 'admin', title, writer AS author, description AS summary, pubdate AS dateline
FROM dede_addonarticle;

Insert into `pre_portal_article_count` (Article view count table)

1
2
3


INSERT INTO pre_portal_article_count(aid, cid, viewnum)
SELECT aid, catid, click
FROM dede_addonarticle;

[Web Development] Postman Plugin

Fri, 18 Nov 2016 04:59:52 +0000

Recommending a Web Development Debugging Tool

It is especially useful for reading, modifying, and adding Cookie, Session, Header, GET, and POST data during network transmission. There are many blog posts about it online, so I won’t go into detail here.

Postman has three versions (as of November 2016):

Postman for Chrome
Postman for Mac
Postman for Linux (Beta)

The Chrome plugin is recommended. However, it’s not easy to download in China. Here is the official Google Chrome plugin download link as of November 2016:

https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop/related

And a very old version download: Postman-REST-Client_v0.8.4.14

Link: http://pan.baidu.com/s/1bo4nzQJ Password: h0w7

[PHP] call to undefined function mb_convert_encoding

Tue, 02 Aug 2016 03:37:01 +0000

Solution on Windows

In php.ini, enable the mbstring library: remove the semicolon before extension=php_mbstring.dll.

Solution on Linux

First, install the php-mbstring library:
1

yum install php-mbstring
Then, edit the /etc/php.ini file and add the following line:
1

extension=mbstring.so
Save and restart the httpd service:
1

service httpd restart

[IIS] File Formats (Fonts) Failing to Load on IIS Server

Thu, 28 Jul 2016 09:07:08 +0000

While deploying an IIS service recently, I noticed that some .ttf, .otf, .woff and other font files were not being loaded, even though js, css, images and other files loaded successfully. The reason is that IIS cannot serve files that don’t have a default MIME mapping.

The solution is simple – add the corresponding MIME type mappings. You can add them directly in the IIS panel under MIME Types. For specific type information, refer to the W3CSchool MIME Reference: http://www.w3school.com.cn/media/media_mimeref.asp

MIME mappings for font files:

1
2
3
4
5
6


<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
<mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />
<mimeMap fileExtension=".ttf" mimeType="application/x-font-truetype" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<mimeMap fileExtension=".otf" mimeType="application/x-font-opentype" />
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />

Font Subsetting for Web and Mobile

Fri, 22 Jul 2016 02:35:14 +0000

In web and mobile frontend development, developers often want to use non-system fonts, which are typically in TTF, OTF, and other formats.

English fonts are usually quite small, but Chinese fonts can range from 1-2 MB on the small end to over 10 MB for larger ones. This is unacceptable for web or mobile applications. This is where font subsetting comes in – you only need the specific characters used in a particular frontend interface, so you export just those characters from the font into a new TTF file, leaving out the unnecessary ones.

I highly recommend a Chinese font subsetting tool: TTF Font Library Subsetting and Conversion Tool

Download link: http://pan.baidu.com/s/1skI7FiP Password: qb27

Note that the target font to be subsetted must first be installed in the Windows system.

[Year-End Review] My 2016 -- One Year After Graduation

Fri, 01 Jul 2016 16:32:42 +0000

Written at Graduation

One year ago, I officially graduated and entered the workforce. – Written at Graduation

I’m grateful for the words my past self left me: “As long as your spirit never dies, life keeps running on the road.”

If I were to leave a message for next year’s me, it would be: “Persist, be strong, be resilient.”

This year, I got some of the things I wanted, but I also paid a heavy price. While chasing those things, I suddenly realized that the health of my family is what matters most.

Indeed, when the sunlight shines down, what could be happier than simply being alive?

– DevHu, recorded on July 2, 2016, still in a rented apartment

January 4, 2018 update: Due to reasons I’d rather not explain, I’ll use this post as my 2016 year-end review.

[Bootstrap] Triggering dropdown-toggle on Mouse Hover in Bootstrap

Fri, 27 May 2016 03:18:37 +0000

Using the `bootstrap-hover-dropdown` Plugin

1. Download `bootstrap-hover-dropdown`

Download link: http://www.bootcdn.cn/bootstrap-hover-dropdown/

Of course, you can also use the CDN version directly.

2. Include `bootstrap-hover-dropdown.js`

In your HTML file, make sure to include bootstrap-hover-dropdown.js. Typically, you can place it in a <script> tag at the bottom of the page:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Bootstrap Hover Dropdown Example</title>
 <!-- Include Bootstrap CSS -->
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
 <!-- Your content -->

 <!-- Include jQuery -->
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <!-- Include Bootstrap JS -->
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 <!-- Include bootstrap-hover-dropdown.js -->
 <script src="path/to/bootstrap-hover-dropdown.js"></script>
</body>
</html>

Find the element with the dropdown-toggle class in your HTML file and modify it as follows:

1

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>

Change it to:

1

<a href="#" class="dropdown-toggle" data-hover="dropdown" data-close-others="true">Dropdown</a>

You can also add a parameter data-delay="1000", which sets the delay before the dropdown disappears (default is 500 milliseconds). For example:

1

<a href="#" class="dropdown-toggle" data-hover="dropdown" data-close-others="true" data-delay="1000">Dropdown</a>

4. Removing the Delay

If you want to completely remove the delay, you can directly modify the configuration in the bootstrap-hover-dropdown.js file, changing delay: 500 to delay: 0.

Find and modify the following code:

1

delay: 500

Change it to:

1

delay: 0

This will remove the dropdown menu delay.

[Node.js] Building an Image Server with UEditor + Node.js + SeaweedFS

Wed, 18 May 2016 03:16:01 +0000

1. UEditor + Node.js Image Upload

UEditor is a feature-rich open-source rich text editor by Baidu.
Download link: http://ueditor.baidu.com/website/download.html
It currently provides versions for PHP, ASP, .Net, and JSP. UEditor is primarily built with frontend HTML, CSS, and JS. The reason it is further divided by server-side language is, in my understanding, mainly for the image upload functionality which involves server interaction.
Among the many versions, there is no Node.js version. Below I will explain how to convert the PHP version of UEditor into a Node.js version.
After examining all requests in the PHP version, I found that the action parameter values include config (configuration file), uploadimage (image upload), listimage (online management), and catchimage (image capture). So we just need to rewrite these 4 request handlers to meet our needs.

1.1 Modify the `serverUrl` property in UEditor’s `ueditor.config.js`:

1

serverUrl: '/ue/uploads'

1.2 Rename `ueditor/php/config.json` to `config.js` and move it to the `ueditor` directory.

1.3 Next, write the four corresponding actions on the Node.js side. The image upload uses the `connect-busboy` middleware. Code as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104


// Image upload
var path = require('path');
var uploadsPath = path.resolve('public/uploads') + '/'; // Path to store images
var busboy = require('connect-busboy');
app.use(busboy({
 limits: {
 fileSize: 10 * 1024 * 1024 // 10MB
 }
}));
var action = {
 // Upload image
 uploadimage: function (req, res) {
 var fstream;
 req.pipe(req.busboy);
 req.busboy.on('file', function (fieldname, file, filename, encoding, mimetype) {
 var filesize = 0;
 var ext = path.extname(filename);
 var newFilename = (new Date() - 0) + ext;
 fstream = fs.createWriteStream(uploadsPath + newFilename);
 file.on('data', function (data) {
 filesize = data.length;
 });
 fstream.on('close', function () {
 console.log(JSON.stringify({
 "originalName": filename,
 "name": newFilename,
 "url": '/uploads/' + newFilename,
 "type": ext,
 "size": filesize,
 "state": "SUCCESS"
 }));
 res.send(JSON.stringify({
 "originalName": filename,
 "name": newFilename,
 "url": '/uploads/' + newFilename,
 "type": ext,
 "size": filesize,
 "state": "SUCCESS"
 }));
 });
 file.pipe(fstream);
 });
 },
 // Get configuration file
 config: function (req, res) {
 return res.redirect('/js/UEditor/config.js');
 },
 // Online management
 listimage: function (req, res) {
 fs.readdir(uploadsPath, function (err, files) {
 var total = 0, list = [];
 files.sort().splice(req.query.start, req.query.size).forEach(function (a, b) {
 /^.+\..+$/.test(a) &&
 list.push({
 url: '/uploads/' + a,
 mtime: new Date(fs.statSync(uploadsPath + a).mtime).getTime()
 });
 });
 total = list.length;
 res.json({state: total === 0 ? 'no match file' : 'SUCCESS', list: list, total: total, start: req.query.start});
 });
 },
 // Catch image (save image to server when pasting)
 catchimage: function (req, res) {
 var list = [];
 req.body.source.forEach(function (src, index) {
 http.get(src, function (_res) {
 var imagedata = '';
 _res.setEncoding('binary');
 _res.on('data', function (chunk) {
 imagedata += chunk
 });
 _res.on('end', function () {
 var pathname = url.parse(src).pathname;
 var original = pathname.match(/[^/]+\.\w+$/g)[0];
 var suffix = original.match(/[^\.]+$/)[0];
 var filename = Date.now() + '.' + suffix;
 var filepath = uploadsPath + 'catchimages/' + filename;
 fs.writeFile(filepath, imagedata, 'binary', function (err) {
 list.push({
 original: original,
 source: src,
 state: err ? "ERROR" : "SUCCESS",
 title: filename,
 url: '/uploads/catchimages/' + filename
 });
 })
 });
 })
 });
 var f = setInterval(function () {
 if (req.body.source.length === list.length) {
 clearInterval(f);
 res.json({state: "SUCCESS", list: list});
 }
 }, 50);
 }
};
app.get('/ue/uploads', function (req, res) {
 action[req.query.action](req, res);
});
app.post('/ue/uploads', function (req, res) {
 action[req.query.action](req, res);
});

The above mainly references this blog: http://www.xiaoboy.com/detail/1341545081.html

2. GoLang Installation and Configuration

In section 1, UEditor uploads images to the /public/uploads/ folder on the Node.js server. If you need an image server with high storage, portability, and scalability, you need to set up a dedicated server. This article uses the open-source distributed image (file) server seaweedfs.
GitHub link: https://github.com/chrislusf/seaweedfs
This server is written in GoLang, so you need to install and configure GoLang. Download link for China: http://www.golangtc.com/download – choose the appropriate package for your operating system. This article demonstrates installation on Windows 7 x64. After a straightforward installation, you need to configure the following environment variables:

1
2
3


GOROOT=D:\Go16
GOPATH=D:\ImageServer\seaweedfs
PATH=D:\Go16\bin

The GOPATH environment variable is very important – your own code must be placed in the directory configured by this variable for the Go compiler to find and compile it.

3. Compiling and Running seaweedfs

Clone the seaweedfs code from GitHub, then follow the makefile instructions or run the makefile directly. In the seaweedfs directory, run the following commands in the console:

1
2
3
4
5
6


go clean -i -v ./go/weed/

rm -f weed #for linux

go get -v -d ./go/weed
go build -v -o weed ./go/weed

Some dependencies may fail to download during go get and need to be downloaded manually and placed in the \seaweedfs\src directory.
Here is a recommended Go package download site: https://gopm.io/download?pkgname=golang.org/x/net
After building, a weed binary will be generated in the seaweedfs directory. You can also rename it to weed.exe. Now you can start weed. Using the local machine as an example:

1

weed master

1

weed volume --dir="./tmp/data1" --max=5 --mserver="localhost:9333" --port=8080 &

Following the GitHub instructions, uploading and downloading images works without issues. At this point, the basic image server setup is complete.

Modify the Node.js image upload code as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113


// Image upload
var path = require('path');
var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();
function curlPostAssign(res, filepath, filename, filesize) {
 request.post(config.url_image + 'dir/assign',{},
 function (error, response, body) {
 if (!error && response.statusCode == 200) {
 assign = eval('(' + body + ')');
 var result = {};
 result.res = res;
 result.json = JSON.stringify({
 "originalName": filename,
 "name": assign.fid,
 "url": '/res?fid=' + assign.fid,
 "type": ext,
 "size": filesize,
 "state": "SUCCESS"
 });
 curlPostWrite(assign.fid, filepath, assign.publicUrl, result);
 var ext = path.extname(filename);
 } else {
 console.log("Image server assign error...")
 }
 });
}
function curlPostWrite(fid, tmp_file, publicUrl, result) {
 var files = [
 {urlKey: "file1", urlValue: tmp_file}
 ]
 var options = {
 host: publicUrl.split(":")[0],
 port: publicUrl.split(":")[1],
 method: "POST",
 path: "/" + fid
 }
 var req = http.request(options, function(res){
 res.on("data", function(chunk){
 })
 })

 req.on('error', function(e){
 console.log('problem with request:' + e.message);
 console.log(e);
 })
 postfile.postFile(files, req, result);
}
var action = {
 // Upload image
 uploadimage: function(req, res) {
 curlPostAssign(res, req.files.upfile.path, req.files.upfile.originalFilename, req.files.upfile.size);
 },
 // Get configuration file
 config: function (req, res) {
 return res.redirect('/js/UEditor/config.js');
 },
 // Online management
 listimage: function (req, res) {
 fs.readdir(uploadsPath, function (err, files) {
 var total = 0, list = [];
 files.sort().splice(req.query.start, req.query.size).forEach(function (a, b) {
 /^.+\..+$/.test(a) &&
 list.push({
 url: '/uploads/' + a,
 mtime: new Date(fs.statSync(uploadsPath + a).mtime).getTime()
 });
 });
 total = list.length;
 res.json({state: total === 0 ? 'no match file' : 'SUCCESS', list: list, total: total, start: req.query.start});
 });
 },
 // Catch image (save image to server when pasting)
 catchimage: function (req, res) {
 var list = [];
 req.body.source.forEach(function (src, index) {
 http.get(src, function (_res) {
 var imagedata = '';
 _res.setEncoding('binary');
 _res.on('data', function (chunk) {
 imagedata += chunk
 });
 _res.on('end', function () {
 var pathname = url.parse(src).pathname;
 var original = pathname.match(/[^/]+\.\w+$/g)[0];
 var suffix = original.match(/[^\.]+$/)[0];
 var filename = Date.now() + '.' + suffix;
 var filepath = uploadsPath + 'catchimages/' + filename;
 fs.writeFile(filepath, imagedata, 'binary', function (err) {
 list.push({
 original: original,
 source: src,
 state: err ? "ERROR" : "SUCCESS",
 title: filename,
 url: '/uploads/catchimages/' + filename
 });
 })
 });
 })
 });
 var f = setInterval(function () {
 if (req.body.source.length === list.length) {
 clearInterval(f);
 res.json({state: "SUCCESS", list: list});
 }
 }, 50);
 }
};
app.get('/ue/uploads', multipartMiddleware, function (req, res) {
 action[req.query.action](req, res);
});
app.post('/ue/uploads', multipartMiddleware, function (req, res) {
 action[req.query.action](req, res);
});

Running result:

[MySQL] Scheduled Backup with MySQL-Front on Windows

Thu, 05 May 2016 03:08:32 +0000

Scheduled backup is an extremely important task in database services.
For most users who manage databases with a GUI (commonly MySQL-Front, Navicat, or MySQL Workbench), interactive backup methods are simple and easy to learn.

Here is a brief guide on how to set up scheduled backups using MySQL-Front (version 5.3):

After connecting to the database, go to “Extras” -> “Jobs” -> “New” -> “Export”

Select the test database and click Next.
Specify the export path “D:\test.sql”. Note that the character set should generally be set to UTF-8.

Next, specify the export content – make sure to check the data option.
Set the backup time and interval.

After completion, a job named “test” will appear in the scheduled tasks section.
If you want to run it immediately, right-click and select Run.

[Spring] Creating a Spring Framework Project and Adding Your Own Controller in IntelliJ IDEA

Thu, 28 Apr 2016 07:24:58 +0000

As described in the previous blog post about creating a Maven project, create a Spring Maven project.

POM File Configuration:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62


<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://www.w3.org/2001/XMLSchema-instance">
 <modelVersion>4.0.0</modelVersion>
 <groupId>com.coinidea</groupId>
 <artifactId>web</artifactId>
 <packaging>war</packaging>
 <version>1.0-SNAPSHOT</version>
 <name>hive.web Maven Webapp</name>
 <url>http://maven.apache.org</url>
 <properties>
 <spring.version>4.2.5.RELEASE</spring.version>
 </properties>
 <dependencies>
 <dependency>
 <groupId>junit</groupId>
 <artifactId>junit</artifactId>
 <version>3.8.1</version>
 <scope>test</scope>
 </dependency>
 <!--spring-->
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-context</artifactId>
 <version>${spring.version}</version>
 </dependency>
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-core</artifactId>
 <version>${spring.version}</version>
 </dependency>
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-web</artifactId>
 <version>${spring.version}</version>
 </dependency>
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-webmvc</artifactId>
 <version>${spring.version}</version>
 </dependency>
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-test</artifactId>
 <version>${spring.version}</version>
 </dependency>
 </dependencies>
 <build>
 <finalName>web</finalName>
 </build>
 <repositories>
 <repository>
 <id>people.apache.snapshots</id>
 <url>http://repository.apache.org/content/groups/snapshots-group/</url>
 <releases>
 <enabled>false</enabled>
 </releases>
 <snapshots>
 <enabled>true</enabled>
 </snapshots>
 </repository>
 </repositories>
</project>

Install Tomcat locally. If you don’t know how to install Tomcat, please search for instructions online.

Tomcat Configuration

Run -> Edit Configurations, click “+”, and select Tomcat Local.
In the “Server” tab, configure the local Tomcat path; in “Deployment”, select “+” -> Artifact.
After running, the default Hello World page will pop up.
Create your own Controller
web.xml configuration

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38


<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
 version="3.1">
 <context-param>
 <param-name>contextConfigLocation</param-name>
 <param-value>/WEB-INF/applicationContext.xml</param-value>
 </context-param>
 <listener>
 <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
 </listener>
 <servlet>
 <servlet-name>dispatcher</servlet-name>
 <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
 <load-on-startup>1</load-on-startup>
 </servlet>
 <servlet-mapping>
 <servlet-name>dispatcher</servlet-name>
 <url-pattern>/</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
 <servlet-name>default</servlet-name>
 <url-pattern>*.css</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
 <servlet-name>default</servlet-name>
 <url-pattern>*.gif</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
 <servlet-name>default</servlet-name>
 <url-pattern>*.jpg</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
 <servlet-name>default</servlet-name>
 <url-pattern>*.js</url-pattern>
 </servlet-mapping>
</web-app>

It is worth noting that the default servlet-mapping configuration above solves the Spring static file 404 issue.
All other URLs will go through the dispatcher configuration for URL mapping.
7. dispatcher-servlet.xml configuration

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns:context="http://www.springframework.org/schema/context"
 xmlns:task="http://www.springframework.org/schema/task"
 xsi:schemaLocation="http://www.springframework.org/schema/beans
 http://www.springframework.org/schema/beans/spring-beans.xsd
 http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd
 http://www.springframework.org/schema/task http://www.springframework.org/schema/task/spring-task-3.0.xsd"
 default-lazy-init="false">
 <bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping"/>
 <bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter"/>
 <!-- Enable Spring MVC annotations -->
 <context:annotation-config />
 <!-- Set the package where annotated classes are located -->
 <context:component-scan base-package="com.coinidea.controller"/>
 <!-- View resolver for page paths. prefix: prefix, suffix: suffix -->
 <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
 <property name="prefix" value="/WEB-INF/views/"/>
 <property name="suffix" value=".jsp"/>
 </bean>
</beans>

This specifies that the JSP view folder is located at /WEB-INF/views/ and enables Spring’s annotation features. All Controllers will be looked up in the package com.coinidea.controller.
8. FirstHello Controller

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


package com.cmri.web.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
@RequestMapping("/first")
public class TestController {
 @RequestMapping("hello")
 public ModelAndView view() {
 ModelAndView mv = new ModelAndView();
 mv.addObject("message", "HelloWorld!");
 mv.setViewName("hello");
 return mv;
 }
}

hello.jsp in the views folder:

1
2
3
4
5
6
7
8
9


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
 <title>hello world</title>
</head>
<body>
${message}
</body>
</html>

When you visit http://localhost:8080/first/hello in the browser, it will display:

9. Java Web API Controller
When you need to respond to Ajax requests, add the following annotation to the method:

1
2
3
4
5


@RequestMapping("ajax")
@ResponseBody
public String ajax() {
 return "Hello world";
}

[Java] Connecting to and Running Hive via JDBC

Thu, 28 Apr 2016 07:11:02 +0000

Hadoop has many versions, and if the version is wrong, connecting to and operating Hive may throw all sorts of errors. This is where Maven, mentioned in the previous blog post, comes in handy for managing these libraries.

Checking Hadoop and Hive versions:

1
2


hadoop version
hive --version

POM configuration:

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116


<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <groupId>com.coinidea</groupId>
 <artifactId>hive</artifactId>
 <packaging>war</packaging>
 <version>1.0-SNAPSHOT</version>
 <name>hive.web Maven Webapp</name>
 <url>http://maven.apache.org</url>
 <properties>
 <hadoop.version>2.5.0-cdh5.3.2</hadoop.version>
 <hive.version>0.13.1-cdh5.3.2</hive.version>
 </properties>
 <dependencies>
 <!--hadoop and hive-->
 <dependency>
 <groupId>org.apache.hive</groupId>
 <artifactId>hive-jdbc</artifactId>
 <version>${hive.version}</version>
 </dependency>
 <dependency>
 <groupId>org.apache.hive</groupId>
 <artifactId>hive-common</artifactId>
 <version>${hive.version}</version>
 </dependency>
 <dependency>
 <groupId>org.apache.hive</groupId>
 <artifactId>hive-exec</artifactId>
 <version>${hive.version}</version>
 </dependency>
 <dependency>
 <groupId>org.apache.hive</groupId>
 <artifactId>hive-metastore</artifactId>
 <version>${hive.version}</version>
 </dependency>
 <dependency>
 <groupId>org.apache.hive</groupId>
 <artifactId>hive-service</artifactId>
 <version>${hive.version}</version>
 </dependency>
 <dependency>
 <groupId>org.apache.hadoop</groupId>
 <artifactId>hadoop-common</artifactId>
 <version>${hadoop.version}</version>
 <exclusions>
 <exclusion>
 <groupId>org.mortbay.jetty</groupId>
 <artifactId>jetty</artifactId>
 </exclusion>
 <exclusion>
 <groupId>org.mortbay.jetty</groupId>
 <artifactId>jetty-util</artifactId>
 </exclusion>
 <exclusion>
 <groupId>org.mortbay.jetty</groupId>
 <artifactId>jsp-2.1</artifactId>
 </exclusion>
 <exclusion>
 <groupId>org.mortbay.jetty</groupId>
 <artifactId>jsp-api-2.1</artifactId>
 </exclusion>
 <exclusion>
 <groupId>org.mortbay.jetty</groupId>
 <artifactId>servlet-api-2.1</artifactId>
 </exclusion>
 <exclusion>
 <groupId>javax.servlet</groupId>
 <artifactId>servlet-api</artifactId>
 </exclusion>
 <exclusion>
 <groupId>javax.servlet.jsp</groupId>
 <artifactId>jsp-api</artifactId>
 </exclusion>
 <!--tomcat7 includes jasper.jar-->
 <exclusion>
 <groupId>tomcat</groupId>
 <artifactId>jasper-compiler</artifactId>
 </exclusion>
 <exclusion>
 <groupId>tomcat</groupId>
 <artifactId>jasper-runtime</artifactId>
 </exclusion>
 </exclusions>
 </dependency>
 <dependency>
 <groupId>cglib</groupId>
 <artifactId>cglib-nodep</artifactId>
 <version>2.2.2</version>
 </dependency>
 </dependencies>
 <build>
 <finalName>hive</finalName>
 </build>
 <repositories>
 <repository>
 <id>cloudera</id>
 <url>https://repository.cloudera.com/artifactory/cloudera-repos</url>
 <releases>
 <enabled>true</enabled>
 </releases>
 <snapshots>
 <enabled>false</enabled>
 </snapshots>
 </repository>
 <repository>
 <id>people.apache.snapshots</id>
 <url>http://repository.apache.org/content/groups/snapshots-group/</url>
 <releases>
 <enabled>false</enabled>
 </releases>
 <snapshots>
 <enabled>true</enabled>
 </snapshots>
 </repository>
 </repositories>
</project>

Create HiveTest.java

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


package com.coinidea;

import java.sql.*;

public class HiveTest {
 /* Start server: hive --service hiveserver2 --hiveconf hive.server2.thrift.port=10000 */
 private static String driverName = "org.apache.hive.jdbc.HiveDriver";

 /**
 * @param args
 * @throws SQLException
 */
 public static void main(String[] args) throws SQLException {
 try {
 Class.forName(driverName);
 } catch (ClassNotFoundException e) {
 e.printStackTrace();
 System.exit(1);
 }
 //replace "hive" here with the name of the user the queries should run as
 Connection con = DriverManager.getConnection("jdbc:hive2://192.168.*.*:10000/default", "hive", "hive");
 Statement stmt = con.createStatement();
 String table_user = "test.user";
 String user_sql = "select uri from " + table_user + " limit 10";
 System.out.println("Running: " + user_sql);
 ResultSet users = stmt.executeQuery(user_sql);
 while (users.next()) {
 System.out.println("USER:" + users.getString(1));
 }
 stmt.close();
 }
}

Before running HiveTest, you need to start HiveServer2

1

hive --service hiveserver2 --hiveconf hive.server2.thrift.port=10000

[Java] Creating a Maven Project in IntelliJ IDEA

Thu, 28 Apr 2016 07:04:11 +0000

IntelliJ IDEA Version: 15.0

I had been using Eclipse/MyEclipse for Java and Android development, and heard that IntelliJ IDEA is also an excellent IDE. It is a product from the company behind PHPStorm.

What is Maven?

I only recently started using it. I hadn’t written much Java before – I did some JSP during my undergraduate years and wrote some Android code recently. But Java has a rather serious issue with library dependency management, and there are so many library versions. I remember frequently downloading libraries from various places online, then using build path to add external libraries. This approach leads to messy library management, poor version control, and makes it difficult to share code. Maven is a project management tool that handles library versions and dependencies very well.

Creating a Maven Project

File -> New -> Project, select Maven.

If you need to specify the project type such as app or webapp, check “Create from archetype” and select the corresponding type.
Enter GroupId and ArtifactId.

My understanding is that GroupId is the name of the overall parent project or organization the project belongs to, and ArtifactId is the name and purpose of the current project.
Enter the project folder name and path
After creating the Maven project, click “Enable Auto-Import” on the main screen. Otherwise, Maven-managed libraries won’t be automatically imported into the project and will need to be imported manually, which is inconvenient.
View -> Tool Window -> Maven Projects will open a tool window. The main functions you’ll use are clean and compile.
You can use the built-in Maven or your own downloaded Maven. If you want to use your own, go to File -> Settings.

Configure the project pom file

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64


<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <groupId>com.coinidea</groupId>
 <artifactId>maven.text</artifactId>
 <version>1.0-SNAPSHOT</version>

 <!-- properties version -->
 <properties>
 <spring.version>4.2.5.RELEASE</spring.version>
 <hadoop.version>2.5.0-cdh5.3.2</hadoop.version>
 <hive.version>0.13.1-cdh5.3.2</hive.version>
 </properties>
 <dependencies>
 <!-- junit -->
 <dependency>
 <groupId>junit</groupId>
 <artifactId>junit</artifactId>
 <version>3.8.1</version>
 <scope>test</scope>
 </dependency>
 <!--spring-->
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-context</artifactId>
 <version>${spring.version}</version>
 </dependency>
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-core</artifactId>
 <version>${spring.version}</version>
 </dependency>
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-web</artifactId>
 <version>${spring.version}</version>
 </dependency>
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-webmvc</artifactId>
 <version>${spring.version}</version>
 </dependency>
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-test</artifactId>
 <version>${spring.version}</version>
 </dependency>
 </dependencies>
 <!-- Specify maven repository -->
 <repositories>
 <repository>
 <id>people.apache.snapshots</id>
 <url>http://repository.apache.org/content/groups/snapshots-group/</url>
 <releases>
 <enabled>false</enabled>
 </releases>
 <snapshots>
 <enabled>true</enabled>
 </snapshots>
 </repository>
 </repositories>
</project>

Click clean and compile, and the libraries will be downloaded to your local Maven repository and automatically imported into the current project.

[Git] Configuring and Removing Git Proxy

Sat, 09 Apr 2016 08:02:47 +0000

When configuring Git to use a proxy, you can use the following commands to set and remove the proxy:

Configuring Git Proxy

To configure HTTP and HTTPS proxies for Git, use the following commands:

1
2
3
4
5


# Configure HTTP proxy
git config --global http.proxy http://127.0.0.1:1080

# Configure HTTPS proxy
git config --global https.proxy https://127.0.0.1:1080

Removing Git Proxy Configuration

To remove the proxy settings, use the following commands:

1
2
3
4
5


# Remove HTTP proxy
git config --global --unset http.proxy

# Remove HTTPS proxy
git config --global --unset https.proxy

Explanation

git config --global http.proxy <proxy-url>: Configure the global HTTP proxy.
git config --global https.proxy <proxy-url>: Configure the global HTTPS proxy.
git config --global --unset http.proxy: Remove the global HTTP proxy configuration.
git config --global --unset https.proxy: Remove the global HTTPS proxy configuration.

With these commands, you can easily enable or disable Git proxy settings as needed.

[SAE] SAE MySQL Cross-Application Authorization

Sat, 09 Apr 2016 07:50:12 +0000

As SAE (Sina App Engine) pricing continues to rise, cost savings become increasingly important. Starting March 2016, shared MySQL also began incurring charges, making it important for multiple applications to share a single MySQL instance.

Assume you have multiple applications (APP1, APP2, APP3): Only APP1 retains the shared MySQL, while APP2 and APP3 will use APP1’s MySQL.
Export APP2 and APP3’s MySQL databases as backups, then delete APP2 and APP3’s MySQL instances. This way, APP2 and APP3’s MySQL will be uninitialized and no longer incur charges.
Import APP2 and APP3’s database files (*.sql) into APP1’s MySQL. Before importing, make sure table names don’t conflict.
In APP1’s MySQL settings, click Cross-Application Authorization to select applications under your account or other accounts. Authorize APP2 and APP3 here.
Write a script to display APP1’s MySQL connection information for the authorized applications APP2 and APP3 to use (this will expose database credentials, so proceed with caution and delete the script promptly).

Related code:

1
2
3
4
5
6
7
8
9


<?php
header("Content-type:text/html;charset=utf-8");
echo "Username :".SAE_MYSQL_USER."<br>";
echo "Password :".SAE_MYSQL_PASS."<br>";
echo "Master Host:".SAE_MYSQL_HOST_M."<br>";
echo "Slave Host :".SAE_MYSQL_HOST_S."<br>";
echo "Port :".SAE_MYSQL_PORT."<br>";
echo "Database :".SAE_MYSQL_DB."<br>";
?>

Run the script: The page will display APP1’s MySQL information. Use this information in your other applications (such as APP2 and APP3) to connect to the database.

Notes

Security: Since the script exposes sensitive information such as database username and password, make sure to delete the script promptly after use to prevent information leakage.
Table name conflicts: When importing APP2 and APP3’s database files into APP1’s MySQL, ensure there are no table name conflicts. If conflicts exist, consider renaming tables before importing.
Authorization management: When performing cross-application authorization on the SAE management platform, only authorize necessary applications to avoid unnecessary permission exposure.

Through these steps, you can effectively reduce SAE MySQL costs while ensuring multiple applications can access the shared database normally.

[Node.js] Exception Handling in Node.js Express

Thu, 10 Mar 2016 09:30:18 +0000

Since Node.js is non-blocking, single-process, and single-threaded, once an exception is thrown, the entire service stops, making it very unstable. Here are the solutions:

Make the program robust: Wrap all potentially exception-prone areas with try { } catch(){ }.
Express error handling mechanism: As a commonly used Node.js framework, Express has its own error handling mechanism.

1
2
3
4
5
6


// Express' errorHandler
function errorHandler(err, req, res, next) {
 console.error(err.stack);
 res.status(500).send('Something broke!');
}
app.use(errorHandler);

Use the domain module: First install the domain module with npm install domain

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


// Domain exception handling
const domain = require('domain');

app.use(function(req, res, next) {
 var reqDomain = domain.create();
 reqDomain.on('error', function(err) {
 console.log(err.stack);
 res.statusCode = 500;
 res.end(err.message + '\n');
 reqDomain.dispose();
 });
 reqDomain.add(req);
 reqDomain.add(res);
 reqDomain.run(next);
});

Use forever to start app.js: Forever acts as a daemon process for Node.js that can start, stop, and restart your app.

1

forever start app.js

Through these methods, you can improve the stability of Node.js services and prevent the entire service from crashing due to uncaught exceptions.

[Memcache] Testing Memcache Connection with PHP

Tue, 08 Mar 2016 12:42:07 +0000

1
2
3
4
5


<?php
$memcache_obj = memcache_connect('127.0.0.1', 11211);
$memcache_obj->add("name", "test");
echo $memcache_obj->get("name");
?>

If you encounter issues using this code, make sure of the following:

Is the Memcache service running: Ensure your Memcache service is running on 127.0.0.1 at port 11211.
Is the PHP Memcache extension installed and enabled: Make sure you have installed and enabled the PHP Memcache extension.

You can install the Memcache extension with the following command:

1

sudo apt-get install php-memcache

And enable the extension in your php.ini file:

1

extension=memcache.so

Restart your web server to apply changes:

1

sudo service apache2 restart

Or, if you’re using Nginx:

1

sudo service nginx restart

If you’re using memcached instead of memcache, make sure to use the correct extension and functions:

1
2
3
4
5
6


<?php
$memcached = new Memcached();
$memcached->addServer('127.0.0.1', 11211);
$memcached->set("name", "test");
echo $memcached->get("name");
?>

In this case, you need to install the php-memcached extension:

1

sudo apt-get install php-memcached

[Javascript] Calling the Printer from a Web Page

Tue, 01 Mar 2016 09:17:03 +0000

Some people reported that clicking doesn’t respond. I’ve tested this on both Chrome and IE and it works:

I think the likely reason is that jQuery was not included. I’ve now added jQuery from a CDN and updated the code to:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<html>
<head>
 <meta charset="utf-8">
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
 <title></title>
</head>
<body>
 <div id='div1'>Put the content to print here</div>
 <div id="div2">div2 content</div>
 <a href="javascript:printHTML('#div1')" target="_self">Print</a>
 <script language="javascript">
 function printHTML(page) {
 var bodyHTML = window.document.body.innerHTML;
 window.document.body.innerHTML = $(page).html();
 window.print();
 window.document.body.innerHTML = bodyHTML;
 }
 </script>
</body>
</html>

Original Javascript code, requires jQuery:

1
2
3
4
5
6


function printHTML(page) {
 var bodyHTML = window.document.body.innerHTML;
 window.document.body.innerHTML = $(page).html();
 window.print();
 window.document.body.innerHTML = bodyHTML;
}

[Javascript] Dynamic Loading and Hiding of UEditor

Fri, 26 Feb 2016 09:31:29 +0000

Based on UEditor, this implements dynamic loading and hiding of UEditor.

Github: https://github.com/hujiulin/UEditorComponent

1. Initial Page

2. Click the Left DIV

3. Click the Right DIV

4. Click an Empty Area on the Page

[Hive] Need to Specify Partition Columns Because the Destination Table Is Partitioned

Tue, 23 Feb 2016 13:36:11 +0000

When inserting data into an already partitioned table, you may encounter this error:

1

Need to specify partition columns because the destination table is partition

The reason is that you need to specify the partition field values in the insert statement.

For example:

Create Table Statements:

1
2
3
4
5
6
7
8
9


CREATE TABLE test (
 starttime STRING,
 endtime STRING,
 title STRING
)
PARTITIONED BY (username STRING)
ROW FORMAT DELIMITED
FIELDS TERMINATED BY '|'
STORED AS TEXTFILE;

1
2
3
4
5
6
7
8
9


CREATE TABLE test2 (
 starttime STRING,
 endtime STRING,
 title STRING
)
PARTITIONED BY (username STRING)
ROW FORMAT DELIMITED
FIELDS TERMINATED BY '|'
STORED AS TEXTFILE;

Insert Statement:

1
2


INSERT INTO TABLE test PARTITION(username='admin')
SELECT starttime, endtime, title FROM test2 WHERE username = 'admin';

[Apache] Configuring Apache for Streaming Media

Tue, 05 Jan 2016 10:00:00 +0000

Apache Configuration

Download the mod_flvx.so and mod_h264_streaming.so modules.
Note: Make sure the x86/x64 versions of Apache and the modules match [the modules below are for Apache x86 2.2 and earlier].
Download link: http://pan.baidu.com/s/1dEzYX4d Password: jb0i

Edit apache\conf\httpd.conf, find LoadModule, and add the following at the end of (or near) the LoadModule section:

1
2
3
4


LoadModule flvx_module modules/mod_flvx.so
AddHandler flv-stream .flv
LoadModule h264_streaming_module modules/mod_h264_streaming.so
AddHandler h264-streaming.extensions .mp4

Restart Apache. If Apache fails to start, verify that the module versions match your Apache version.

Video Playback Example

Download ckplayer
Any web video player will work. This example uses ckplayer. Download link:
http://www.ckplayer.com/
Configuration guide:
http://www.ckplayer.com/tool/flashvars.htm
Place the ckplayer folder in the website root directory, and place the sample video example.flv in the website root directory.

Create video.html with the following code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<html>
<meta charset="utf8">
<head>
<title>Streaming Video Playback</title>
</head>
<body>
<div id="a1"></div>
<script type="text/javascript" src="/ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
 var flashvars={
 f:'http://localhost/example.flv',
 c:0
 };
 var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};
 CKobject.embedSWF('/ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',flashvars,params);
</script>
</body>
</html>

Open a browser and visit http://localhost/video.html. You should be able to drag the video scrollbar.
Chrome result:

IE result:

—-Update 20160106—-
The previous test had issues because the FLV file was too small, so it was likely downloaded locally before playback.
The correct way to verify Apache streaming is:
Prepare a larger MP4/FLV file and replace the video URL above;
Open Chrome (recommended), and enter http://localhost/example.mp4?start=10;
If the video starts playing from the 10-second mark and supports seeking, the Apache configuration is successful.

The ckplayer mentioned above still requires waiting for the download to complete before sequential playback. It is recommended to use video.js instead, though it requires HTML5 browser support.
HTML code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<html>
<head>
 <link href="/video-js/video-js.css" rel="stylesheet">
 <!-- If you'd like to support IE8 -->
 <script src="/video-js/ie8/videojs-ie8.min.js"></script>
</head>
<body>
 <video id="my-video" class="video-js" controls preload="auto" width="auto" height="auto" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
 <source src="/video/example.mp4" type='video/mp4'>
 <p class="vjs-no-js">
 To view this video please enable JavaScript, and consider upgrading to a web browser that
 <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
 </p>
 </video>
 <script src="/video-js/video.js"></script>
</body>
</html>

After testing, the video can be seeked to any position and played even before it is fully loaded. With this, Apache has achieved pseudo-streaming video playback.

[Year-End Review] My 2015

Fri, 01 Jan 2016 13:56:14 +0000

Just like that, 2015 is gone, and today is the first day of 2016. The most fulfilling thing I did today was donating a big bag of clothes I had accumulated over my college years to the school. I’m a strange person – I often don’t throw away old things, which makes moving extremely troublesome. I once heard about a concept called organizing through “cut, let go, and separate.” So I tried discarding my old junk and clutter to reorganize my life.

It’s been about half a year since I started working and entered the workforce. I thought I was well-prepared, but I still struggled. It’s like estimating project scope – there’s a law that says no matter how you estimate the workload, you’ll always underestimate by one-third of the time, even if you account for this very law.

In my 2014 year-end review, I mentioned:

I hope to accomplish the following items in 2015:

Travel

1.1 Go to Harbin [Done]
1.2 Go to Tibet
1.3 Go to Yunnan [Done]
Continue learning and sharing technical knowledge on my personal blog, and write high-quality posts [Done, should be able to keep it up, though quality will improve gradually].

Fortunately, the blog’s daily UV has grown from 1-2 visitors to over ten. A couple of posts have pretty high traffic, and one of them currently appears on the first page of Baidu search results for the keyword “Yii Redis,” which makes me very happy – even though it’s the last result on the first page.
Continue writing higher quality code and contribute on GitHub, hoping one of my projects can reach 100 Stars.

This one failed. My highest cumulative Stars on GitHub is only around 20. I hope to work harder.
Open-source a portal system based on ThinkPHP [Done, but not open-sourced].
Think about my future and focus deeply on a specific technology.

The road ahead is long; I shall search high and low.
Read some quality books:

6.1 Wu Jun’s “Civilization and Enlightenment”
```
 Purchased but didn't read much.
```
6.2 Malcolm Gladwell’s “David and Goliath”
```
 Not completed.
```
6.3 Finish “High Output Management” by Andrew Grove
```
 Not completed.
```
6.4 Finish “Effective C++”
```
 Not completed.
```
6.5 “Predictably Irrational” [Done]
Study English properly and aim for independent travel abroad.

Not completed.
Redo all LeetCode problems from scratch.

Partially completed, solved some problems using PHP.

Beyond that, the things that made me happiest:

Read some books: “Zero to One,” “Don’t Make Me Think,” “The First Line of Code: Android”
CoinIdea got a nice redesign [designed independently, using AI for graphics] – feeling better and better about it.
While my patience, temper, and temperament still have room for improvement, there has been some progress.
I’m on the path to learning Android.
Gained new insights into PHP and MySQL.
I typed so many words:

OK, now let me look ahead to 2016. This is bound to be a critical year. It seems like something big happens in my life every 4-5 years. Just Face It.

Practice English and pass the TOEIC exam.
Get started with iOS, deepen Android learning and application; advance in PHP and MySQL, and develop an OA system using Yii.
I hope the people around me pass their English exams smoothly.
May my parents stay healthy.
Read “Civilization and Enlightenment.”
Finish reading “PHP, MySQL, and Web Development” and “PHP Advanced and Object-Oriented Programming.”
Hope to pick up C# and WorldWind again.
Make some breakthroughs in data visualization.
Hope that CoinIdea, which I maintain in my spare time, keeps getting better.
I hope to achieve the unfulfilled wishes from last year.

Not being greedy – just these. Number four is a blessing.

[PHP] Encrypting PHP with ZendGuard

Tue, 29 Dec 2015 07:28:22 +0000

Downloading ZendGuard

Official download link: http://www.zend.com/en/products/guard/downloads#Windows

Registration is required before downloading. I downloaded Zend Guard 6.0. Simply double-click to run the installer.

The latest version is 7.0. If you want to download an earlier version, click “>Download here” and a list of older versions will appear below the current page.

Downloading PHP

Official download links: http://php.net/downloads.php | http://php.net/releases/

My current version: http://windows.php.net/download/#php-5.4

PHP typically releases two types of builds for each version: Thread Safe and Non Thread Safe.

Important note: ZendGuard only supports Non Thread Safe builds. So please download the Non Thread Safe version of PHP.

Configuring PHP – ZendLoader.dll

Download ZendLoader.dll

Official download link: http://www.zend.com/en/products/loader/downloads#Windows

Registration is required before downloading. Similar to ZendGuard, make sure to select the ZendLoader version that matches your PHP version.

Copy ZendLoader.dll to the PHP [PHP root directory]\ext\ folder.

Rename php.ini-development or php.ini-production to php.ini,
and add the following content to php.ini:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


zend_extension="./ext/ZendLoader.dll"

; Enables loading encoded scripts. The default value is On
zend_loader.enable=1

; Disable license checks (for performance reasons)
zend_loader.disable_licensing=0

; The Obfuscation level supported by Zend Guard Loader. The levels are detailed in the official Zend Guard Documentation. 0 - no obfuscation is enabled
zend_loader.obfuscation_level_support=3

; Path to where licensed Zend products should look for the product license. For more information on how to create a license file, see the Zend Guard User Guide
zend_loader.license_path=

Creating PHP Code

Create an input folder, and inside it create test.php.

Code:

1
2
3
4
5


<?php
date_default_timezone_set("Asia/shanghai");
echo "Thanks ZendGuard!\n";
echo "Now datetime is ".date("Y-m-d h:i:s")."\n";
?>

The above code outputs:

Thanks ZendGuard

Now datetime is [current time].

Installing ZendGuard and Creating a Project

ZendGuard has a straightforward installer. After installation, launch it and you’ll see:

Create a new Zend Guard Project.
Set the output directory to the output folder.
Add the input folder as the input directory.
Select the PHP version.
Click
A new test.php is generated in the output folder. Opening it reveals garbled content (the encrypted code).

Running Source Code and Encrypted Code

Running the source code:

Running the encrypted code:

With this, you can now use ZendGuard to encrypt PHP code.

[PHP] Configuring PHPUnit for ThinkPHP

Thu, 10 Dec 2015 14:19:57 +0000

Version Details

PHP: 5.3

PHPUnit

ThinkPHP 3.1.3

IDE: PHPStorm 10 (recommended)

Configuring PHPUnit in PHPStorm

See the blog post:

http://blog.coinidea.com/web开发/php-1088.html

ThinkPHP Deployment

Official code download:

http://www.thinkphp.cn/down.html

Site initialization:

http://www.thinkphp.cn/info/60.html

Test Cases

In this example, the index.php in the root directory is configured as follows:

1
2
3
4
5
6
7


<?php
define('APP_NAME', 'example');
define('APP_PATH', '../example/');
define('APP_PHPUNIT', false);
define('APP_DEBUG', true);
require('../ThinkPHP/ThinkPHP.php');
?>

After the first visit, the following directory structure is generated:

Create a new folder named “Testcase” in the example site.

Testing the Model

Create HelloModel.class.php:

1
2
3
4
5
6
7
8
9


<?php
class HelloModel extends Model
{
 public function sayHello()
 {
 print 'Hello';
 return 'Hello';
 }
}

Create a Test.php file in the Test folder as the PHPUnit test file. Note that you need to require ThinkPHP to initialize the framework environment. Also, in Think.class.php, modify the

start() function by changing App::run() to !APP_PHPUNIT && App::run();

This distinguishes between site runtime and test case execution.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<?php
define('APP_NAME', 'example');
define('APP_PATH', './../../example/');
define('APP_PHPUNIT', true);
require('./../../ThinkPHP/ThinkPHP.php');
class TestSayHello extends PHPUnit_Framework_TestCase {

public function setUp() { }

public function tearDown(){ }

}

Add a test case in TestSayHello:

1
2
3
4
5


public function testHelloModel()
{
 $hello = D('Hello');
 $this->assertTrue($hello->sayHello('Hello') == 'Hello');
}

Testing the Action

Modify IndexAction.class.php as follows:

1
2
3
4
5
6
7
8
9


<?php
class IndexAction extends Action
{
 public function index()
 {
 $hello = D("Hello");
 return $hello->sayHello();
 }
}

Browser access to Index:

Add a test case in TestSayHello:

1
2
3
4
5


public function testHelloAction()
{
 $hello = new IndexAction();
 $this->assertTrue($hello->index() == 'Hello');
}

Results

Running Test.php produces the following result:

Tests passed. At this point, unit testing has been successfully added to ThinkPHP.

poisonbian 2016/05/10 14:57

I tried following this guide and found that the model couldn’t be used, and custom functions in the Common directory were not loaded. After some investigation, I think adding the APP_PHPUNIT check in Think.class.php is not ideal. It would be better to add it in App.class.php instead: !APP_PHPUNIT && App::exec();

[PHP] PHPUnit Installation, Configuration, and Examples

Fri, 04 Dec 2015 14:45:19 +0000

PHPUnit Installation and Sample Test

Many people online recommend installing via PEAR. I tried various methods from different blog posts, but all failed.
The method that worked for me is more straightforward:

Download link:

https://phpunit.de/index.html

The download is a .phar PHP extension. Download the PHPUnit version that matches your PHP version.

Follow the instructions at https://phpunit.de/manual/current/en/installation.html#installation.phar.windows step by step.

Download PHPUnit.phar to a folder, for example: C:\bin\
Add this folder C:\bin\ to the Path environment variable
In the command line, navigate to C:\bin and enter:
echo @php "%~dpophpunit.phar"%*>phpunit.cmd

In any command line location, enter:

1

phpunit --version

You should see:

At this point, PHPUnit is successfully installed.

Test Example:

SayHello.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<?php

class SayHello
{
 public function printHello()
 {
 echo 'Hello';
 return 'Hello';
 }
}
?>

TestSayHello.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<?php

require_once 'SayHello.php';

class TestSayHello extends PHPUnit_Framework_TestCase
{
 public function setUp() { }

 public function tearDown() { }

 public function testConnectionIsValid()
 {
 $hi = new SayHello();
 $this->assertTrue($hi->printHello() == 'Hello');
 }
}
?>

The SayHello class prints “Hello” to the screen and returns “Hello”.

TestSayHello verifies whether the SayHello class correctly returns the “Hello” string.

Run it in the command line, and the test passes.

Configuring PHPUnit in PHPStorm

Older versions of PHPStorm may not support PHPUnit well and will throw:

Warning: require_once(PHPUnit/Runner/Version.php)

See:

http://stackoverflow.com/questions/30278588/phpstorm-via-phpunit-phar-warning-require-oncephpunit-runner-version-php

This article uses PHPStorm 10. Download link:

https://www.jetbrains.com/phpstorm/?fromMenu

Open the two files from earlier

Open Settings: File => Settings

Configure PHP version:

Configure PHPUnit

Sample Test

Select TestSayHello and run it directly. The result:

[LeetCode][PHP Implementation] Contains Duplicate

Tue, 01 Dec 2015 10:06:29 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


<?php
class Solution
{
 public function containsDuplicate($nums)
 {
 $hashTable = array();
 foreach ($nums as $num)
 {
 if (!array_key_exists($num,$hashTable))
 {
 $hashTable[$num] = 1;
 }
 else
 {
 return false;
 }
 }
 return true;
 }
}
$solution = new Solution();
echo $solution->containsDuplicate(array(2,1,3,4,5,6,7,9));
?>

[LeetCode][PHP Implementation] Excel Sheet Column Number

Mon, 30 Nov 2015 12:25:48 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<?php
class Solution
{
 public function titleToNumber($s)
 {
 $num = 0;
 $len = strlen($s) - 1;
 for ($i = $len; $i >= 0; $i--)
 {
 $num += (ord($s[$i]) - ord('A') + 1) * (int)pow(26, $len - $i);
 }
 return $num;
 }
}
$solution = new Solution();
echo $solution->titleToNumber("AA");
?>

[LeetCode][PHP Implementation] Valid Anagram

Mon, 30 Nov 2015 12:24:46 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


<?php
class Solution
{
 public function isAnagram($s, $t)
 {
 $s = strtolower($s);
 $t = strtolower($t);
 for ($i = 0; $i < 26; $i++)
 {
 $sChars[$i] = 0;
 $tChars[$i] = 0;
 }
 for ($i = 0; $i < strlen($s); $i++)
 {
 $sChars[ord($s[$i]) - ord('a')]++;
 }
 for ($i = 0; $i < strlen($t); $i++)
 {
 $tChars[ord($t[$i]) - ord('a')]++;
 }
 //var_dump($sChars);
 //var_dump($tChars);
 for ($i = 0; $i < 26; $i++)
 {
 if ($sChars[$i] != $tChars[$i])
 {
 return false;
 }
 }
 return true;
 }
}
$solution = new Solution();
echo $solution->isAnagram("HelloWorld", "whelloorld");
?>

[LeetCode][PHP Implementation] Add Digits

Mon, 30 Nov 2015 12:23:52 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


<?php
class Solution
{
 public function addDigits($num)
 {
 while ($num > 10)
 {
 $tmp = 0;
 while ($num > 0)
 {
 $tmp += $num % 10;
 $num = intval($num / 10);
 }
 $num = $tmp;
 }
 return $num;
 }
}
$solution = new Solution();
echo $solution->addDigits(381);
?>

[LeetCode][PHP Implementation] Two Sum

Mon, 30 Nov 2015 12:22:21 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


<?php
class solution
{
 public function twoSum($nums, $target)
 {
 $result = array();
 for ($i = 0; $i < count($nums); $i++)
 {
 for ($j = 0; $j < count($nums); $j++)
 {
 if ($target == $nums[$i] + $nums[$j])
 {
 $result[0] = $i + 1;
 $result[1] = $j + 1;
 return $result;
 }
 }
 }
 return $result;
 }
}
$solution = new Solution();
var_dump($solution->twoSum(array(2,7,11,15), 9));
?>

[LeetCode][PHP Implementation] Single Number

Mon, 30 Nov 2015 12:20:03 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<?php
class Solution
{
 public function singleNumber($nums)
 {
 $single = 0;
 foreach ($nums as $num)
 {
 $single ^= $num;
 echo $num;
 }
 return $single;
 }
}
$solution = new Solution();
echo $solution->singleNumber(array(1,1,2,3,2,4,4,5,3));
?>

[Hive] Hive SQL Range-Based Statistics

Wed, 18 Nov 2015 07:45:26 +0000

Requirement:

A table contains a text field. We need to count the number of records whose text length falls into ranges [0,20], [20,40], [40,60], etc. The ranges should automatically extend to cover the maximum value.

Implementation:

Method 1:

1
2
3
4
5
6
7


select count(case when length(text) between 0 and 20 then 1 end) as text1,
count(case when length(text) between 21 and 40 then 1 end) as text2,
count(case when length(text) between 41 and 60 then 1 end) as text3,
count(case when length(text) between 61 and 80 then 1 end) as text4,
count(case when length(text) between 81 and 100 then 1 end) as text5,
count(case when length(text) > 100 then 1 end) as text6
from table;

The problem with this approach is that you need to know the max value first. As the max increases, the SQL statement gets longer and longer, and it requires manual intervention.

Method 2:

1

select floor(length(text)/20) * 20, count(*) from table group by floor(length(text)/20);

This method divides each text’s length by 20, floors the result, then multiplies by 20 to get a grouping key. Using this key for GROUP BY gives us the final result. Without any loops, this simple statement elegantly solves the automatic range-based statistics problem.

Slow or Failed Grunt Downloads

Sun, 15 Nov 2015 03:37:01 +0000

Grunt is a front-end automation tool, and there are plenty of blog posts on the internet about how to install and use it:

http://www.cnblogs.com/wangfupeng1988/p/4561993.html

http://www.cnblogs.com/lhb25/archive/2013/01/24/grunt-for-javascript-project-a.html

Since Grunt installation depends on Node.js, this article mainly covers solutions for when “npm install grunt” downloads slowly or fails entirely. The fix is simple: specify the download registry by appending -registry "http://registry.npmjs.org" to the command, which changes the default from HTTPS to HTTP. Alternatively, Chinese internet companies like Taobao also provide registries that you can search for and use.

For example:

1

install grunt --save-dev -registry "http://registry.npmjs.org"

[Book Notes] Don't Make Me Think

Mon, 09 Nov 2015 04:48:46 +0000

Some people say this book is quite outdated, but I still made a point to read through it recently.

Here is a summary, as shown in the diagram below:

Since I have also been working in web development for a long time, there were actually many tips worth noting throughout the book. We may understand the big principles, but when it comes to actually implementing them, they are easy to overlook.

After finishing this book, I felt like I had given my own website a round of optimization. Perhaps the one word I took away from it is “usability.” I believe that in a few years, I will have an even deeper appreciation for it.

[Android] Weekly Study Report 6: Complete Data Storage Solutions — A Detailed Guide to Persistence

Thu, 05 Nov 2015 05:14:08 +0000

[Linux] Summary of Linux Commands

Sat, 17 Oct 2015 08:24:07 +0000

User Management

Recently I have been setting up a CDH cluster of about 10 nodes. The cluster uses 10 CentOS 6.7 servers, so I frequently need to use Linux user management commands.

Change password
1

passwd
Enter the new password and confirm it. For security, the password should include uppercase and lowercase letters, numbers, and special characters. Linux will also remind you of the password rules.
Switch user
1

su hdfs
This switches to the hdfs user.
Alternatively, without switching users, you can execute a command or access a file with a specific user’s permissions:
1

su hdfs hadoop fs -mkdir /user/hdfs/test
This creates a test directory at /user/hdfs/ on the cluster using hdfs user permissions.

File Management

Create a directory

1

mkdir [folder]

Create a file

1

touch/vi [filename]

Timezone Selection

Follow the prompts to select a timezone, then enter the suggested command.
1

tzselect

Modify the timezone in the clock file.

1
2


vi /etc/sysconfig/clock
ZONE="Asia/Shanghai"

Delete the existing localtime and create a new one.

1
2


rm /etc/localtime
ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime

Run Commands at Startup

Edit the rc.local file

1

vi /etc/rc.local

Start the NTP Service to Sync with a Time Server on the LAN

1
2


service ntpd start
/usr/sbin/ntpdate 192.168.34.115

[To be continued…]

[Web Development] What Happens After a User Enters a URL?

Thu, 15 Oct 2015 15:24:04 +0000

When a user opens a browser and enters a URL:

The client checks whether there is an IP address cached for that URL. If not, it sends a request to the nearest DNS server for domain name resolution, querying up to the root DNS server if necessary. Once the query succeeds, the result is returned to the client.
The browser sends the request to the web server at the IP address corresponding to the URL.

This server may be a single standalone server, a lightweight load balancer, or a cluster.

If it is a load balancer or cluster, the servers internally synchronize based on timestamps to ensure the data is up to date; if not, synchronization is performed.
If the request involves application-level calls, the request is forwarded to the application server, which returns the result to the web server.
The web server executes programs written in the relevant dynamic languages, communicates with database servers and related files, and finally sends the resulting web page data back to the browser.
Based on transport protocols such as HTTP and HTTPS, the web server’s data is transmitted back to the browser, which then parses and renders the web page.

Finally, the user sees the web page.

[Linux] Configuring DNS Addresses on Linux

Wed, 14 Oct 2015 13:28:18 +0000

DNS determines whether a server can reach the internet via domain names. There are two ways to configure DNS server IP addresses on Linux.

Verification method:

1

ping www.baidu.com

Temporary method
a) Edit resolv.conf
1

vi ./etc/resolv.conf
b) Enter
1

nameserver 8.8.8.8
Save and you’re done.

Permanent method
a) Edit ifcfg-eth0

1

vi /etc/sysconfig/network-scripts/ifcfg-eth0

b) Enter

1

DNS1=8.8.8.8

Save and you’re done.

You can use

1

ifconfig

to view the local network interfaces, where you can see the eth0 configuration information.

[Linux] Mounting an NTFS External Hard Drive on CentOS

Thu, 01 Oct 2015 06:26:08 +0000

The server runs CentOS and needs to mount two 2TB external hard drives.

The command is as follows:

1
2


mount -t ntfs /dev/sdn1 /test1
mount： unknown filesystem type 'ntfs'

An error occurred, meaning the system does not recognize “NTFS.” The solution is as follows:

1
2
3
4
5
6
7
8


wget http://tuxera.com/opensource/ntfs-3g_ntfsprogs-2013.1.13.tgz
tar zxvf ntfs-3g_ntfsprogs-2013.1.13.tgz
cd ntfs-3g_ntfsprogs-2013.1.13
./configure
make
make install
mkdir /mnt/window
mount -t ntfs-3g /dev/sdn1 /mnt/window

To unmount:

1

umount /dev/sdn1

[Storm] Installing Storm

Thu, 01 Oct 2015 05:12:26 +0000

A distributed real-time computation system for processing high-speed, large-volume data streams. It adds reliable real-time data processing capabilities to Hadoop.

Home link: http://storm.apache.org/

Download link: http://storm.apache.org/downloads.html

Setup

Java

CentOS comes with JDK 1.7, so this step can be skipped.

Zookeeper

Home link: http://zookeeper.apache.org/releases.html

Download the package, upload, and extract

http://mirror.bit.edu.cn/apache/zookeeper/stable/
1

tar -xf zookeeper-3.4.6.tar.gz

Configure Zookeeper

1
2
3
4
5
6
7
8


tickTime=2000
dataDir=/var/zookeeper/
clientPort=2181
initLimit=5
syncLimit=2
server.1=zookeeper1:2888:3888
server.2=zookeeper2:2888:3888
server.3=zookeeper3:2888:3888

Start Zookeeper
1

bin/zkServer.sh start
Test
1

bin/zkCli.sh -server 127.0.0.1:2181
Dependency installation
Java

Pre-installed.
Python

Pre-installed.
Storm
Download the package, upload, and extract

Extract command:
1

tar -xf apache-storm-0.9.5.tar.gz
Configure the Zookeeper address in storm.yaml
1 2

storm.zookeeper.servers: - "127.0.0.1"
Create and configure the workdir
1

storm.local.dir: "/home/admin/storm/workdir"
Note: storm.local.dir is the local disk directory used by Nimbus and Supervisor processes to store a small amount of state (such as jars, confs, etc.). This directory must be created in advance with sufficient access permissions.
1

nimbus.host: "127.0.0.1"
1 2 3 4 5

supervisor.slots.ports: - 6700 - 6701 - 6702 - 6703

Start all Storm services

Nimbus

1

bin/storm nimbus >/dev/null 2>&1 &

Supervisor

1

bin/storm supervisor >/dev/null 2>&1 &

1

bin/storm ui >/dev/null 2>&1 &

Logview

1

bin/storm logviewer > /dev/null 2>&1

Access Storm UI

http://ip:8080

[Outlook] Outlook Configuration and General Settings — Outlook 2013

Thu, 01 Oct 2015 03:13:11 +0000

Once you enter the workplace, Outlook becomes an essential tool for office workers. This article explains some configuration and general settings for Outlook (Outlook 2013).

Adding a User Account

Open Outlook 2013, click “File” in the upper left corner, and in the dropdown list, click “+ Add Account.”

Select “Email Account” and click “Next.”

Click “Manual setup or additional server types,” then click “Next.”

Check “POP or IMAP,” then click “Next.” This is generally the option to choose.

Enter your username and password, and configure the incoming and outgoing server addresses. Note that these two addresses are typically pop3 or smtp@corresponding-domain, which you need to confirm with your email service provider. The provider usually has documentation for this.

Click “More Settings” in the image above, configure the outgoing server username and password, and click “Finish.”

Click Next to start the test. After the test completes, the entire process is successful.

Configuring Email Filter Rules

During daily email usage, you may receive a large volume of emails. Efficiently sorting these emails is a very meaningful task.

Open Outlook 2013, click “File” in the upper left corner, and in the dropdown list, click “Manage Rules & Alerts.”

Click “New Rule.”

There are many options in the rules. Configure them according to the rule wizard. For example, you can select “with specific words in the subject” or “from a specific sender,” and then move the emails to a designated folder or specify a particular action.

[Hadoop] Setting Up the CDH Environment

Mon, 28 Sep 2015 14:50:42 +0000

1. Connect server

Use CRT or Xshell to connect to the server remotely.

2. Network config

First, configure DNS for the server and check whether it can access the internet.

Enter the following command:

1

ping [www.baidu.com][1]

If you receive a reply from [www.baidu.com][1], it means the server can access the internet. If you get “unknown host,” the DNS configuration is incorrect and needs to be set up.

There are two ways to configure DNS:

Temporary solution: edit the resolv.conf file and add “nameserver 8.8.8.8”.
1 2

vi /etc/resolv.conf nameserver 8.8.8.8
Permanent solution: edit the ifcfg_eth0 file and add “DNS1=8.8.8.8”.
1 2

vi /etc/sysconfig/network-scripts/ifcfg-eth0 DNS1=8.8.8.8

After configuration, run the command “service network restart”.

The second approach is recommended, as the first one will be lost when the server restarts.

Disable the firewall

Enter the command:

1

service iptables stop

3. File transfer

During the installation process, you may need to upload local files to the server. Here is one approach.

Enter the command:

1

sudo yum install lrzsz

After installing the lrzsz package, enter:

1

rz

Then select the file you want to upload.

Yum (Yellow dog Updater Modified) is an RPM-based package manager that can automatically download and install RPM packages from specified servers, handling dependency relationships automatically and installing all dependent packages at once, eliminating the tedious process of downloading and installing them one by one.

4. Install CDH

HDFS: A distributed file storage system, the open-source Java implementation of GFS.

MapReduce: A parallel computing programming model for large-scale datasets.

HBase: NoSQL column database

Hive: Data warehouse

Zookeeper: Distributed lock service

Pig: Big data analysis platform interface

Home link: http://www.cloudera.com/content/cloudera/en/products-and-services/cdh.html

Setup:

1. Java

CentOS 6.7 comes with JDK 1.7, so this step can be skipped. Any JDK-related steps during installation can be ignored.

2. Cloudera Manager Server

Cloudera Manager makes it easy to manage Hadoop deployments of any scale in production. Quickly deploy, configure, and monitor your cluster through an intuitive UI – complete with rolling upgrades, backup and disaster recovery, and customizable alerting.

Download:

http://www.cloudera.com/content/cloudera/en/downloads/cloudera_manager/cm-5-4-7.html

Download the latest version 5.4.7.

After downloading, you will get a file of about 503KB named cloudera-manager-installer.bin. Upload this file (using “rz”) to a designated folder on the server.

Close selinux:

1
2


/etc/selinux/config
selinux=disabled

Hostname

You need to modify the hostname of the machine. To check the current hostname, simply type hostname.

Enter:
1

vi /etc/hosts
Edit the file and add the line “192.168._._ master.com master”.

Note: when adding datanode nodes, do not name them “master” – use names like “datanode1” instead.

Run the “reboot” command to restart the server.

3. CDH

Using cloudera manager

Navigate to the directory containing cloudera-manager-installer.bin and run:

1
2


chmod u+x cloudera-manager-installer.bin
./ cloudera-manager-installer.bin

Keep clicking next. The selected items will be highlighted in bold.

This may take a while, so please be patient…

Choose express free version.
Display the packages to be installed
Specify CDH cluster hosts
Install CDH
Enter username and password
Install the specified Parcel
Select services

4. Storm

A distributed real-time computation system for processing high-speed, large-volume data streams. It adds reliable real-time data processing capabilities to Hadoop.

5. Spark

Spark uses in-memory computing. Starting from multi-iteration batch processing, it allows data to be loaded into memory for repeated queries. It also integrates multiple computing paradigms such as data warehousing, stream processing, and graph computing. Spark is built on top of HDFS and integrates well with Hadoop.

6. Problems

Refreshing metadata packages

1
2


Another app is currently holding the yum lock; waiting for it to exit...
rm -f /var/run/yum.pid

Uninstall Cloudera Manager

1

$ sudo /usr/share/cmf/uninstall-cloudera-manager.sh

Installation failed: Unable to receive heartbeat from Agent

1
2
3
4
5


cat /etc/hosts
ip 域名 主机名
192.168.*.1 master.com master
cat /etc/sysconfig/network
HOSTNAME=master.com

Uninstall Cloudera Manager

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


sudo rm -Rf /usr/share/cmf /var/lib/cloudera* /var/cache/yum/cloudera*
sudo /usr/share/cmf/uninstall-cloudera-manager.sh
sudo service cloudera-scm-server stop
sudo service cloudera-scm-server-db stop
cloudera-manager-server-db
sudo yum remove cloudera-manager-server
sudo yum remove cloudera-manager-server-db-2
sudo service cloudera-scm-agent hard_stop
sudo yum remove 'cloudera-manager-*'
sudo yum clean all
sudo rm -Rf /usr/share/cmf /var/lib/cloudera* /var/cache/yum/cloudera* /var/log/cloudera* /var/run/cloudera*
sudo rm -Rf /var/cache/apt/archives/cloudera*
sudo rm /tmp/.scm_prepare_node.lock
sudo rm -Rf /var/lib/flume-ng /var/lib/hadoop* /var/lib/hue /var/lib/navigator /var/lib/oozie /var/lib/solr /var/lib/sqoop* /var/lib/zookeeper
sudo rm -Rf /dfs /mapred /yarn

[Software] Creating GIF Images Locally

Sun, 20 Sep 2015 08:37:13 +0000

Because I open-sourced a WIN32 Snake game, I wanted to create a GIF for demonstration purposes, but figuring out how to actually make one turned out to be tricky.

After some research, here are several methods:

Method 1: Using video software like QQ Player

The prerequisite is that you have a short video clip to convert. You can use QQ Player’s built-in feature to do the conversion.

Detailed instructions:

http://kf.qq.com/faq/120322fu63YV130422iiEbMB.html

Method 2: Using professional software like Photoshop

Prepare multiple frames of images. See this Baidu tutorial for detailed instructions:

http://jingyan.baidu.com/article/7f41ececdb326e593d095c2e.html

Method 3: Using Screen Recording Expert

The image above was created using Screen Recording Expert. First, I recorded a video (in EXE or LXE format), then selected the “Conversion Tools” menu, and converted it from there.

Here is a download link for a portable version of Screen Recording Expert:

Screen Recording Expert.

[Book Notes] Zero to One

Sun, 20 Sep 2015 08:22:12 +0000

I recently rushed through reading “Zero to One.” After finishing a book, I always want to write something, but when I actually sit down at the keyboard, I never quite know where to begin. In the past, when writing summaries or book notes, I would pull out the original book and type up the passages I found interesting, but I feel that approach lacks real substance when you chew on it.

This book has a rating of 8.0 on Douban and is quite a slim volume. Given my limited life experience, I wouldn’t dare to rate this book myself, but I feel that reading it once is certainly not enough.

At first glance, this book seems a bit like motivational writing, yet also a bit like anti-motivational writing. It talks about big principles, but big principles are not necessarily the ones people remember to apply in practice.

The most important impressions this book left on me can be summed up in a few words.

The First: Qualitative Change

In common terms, quantitative changes lead to qualitative changes, but this book approaches it from the perspective of innovation: taking that first step is what is truly great – like the first person to eat a crab. Everything that follows is just replication, a less meaningful accumulation.

The Second: Monopoly

Whether in personal life, career, or running a company, the most important thing is to have a unique skill. I remember my advisor once said, “One signature skill can feed you anywhere.” That is essentially the idea. For those in technology, technical ability is king. In recent years (2015), with the wave of mass entrepreneurship, people pitch to investors telling stories like “I have a great idea,” and so on. But the ones that truly survive – whether companies or employees within companies – are those with a distinctive skill. I wouldn’t say they are completely irreplaceable; I have always believed nothing is truly irreplaceable. But when someone creates great value on one hand, and the cost of replacing them is very high on the other, nobody is willing to replace them. That is when a kind of monopoly forms, and this is also the significance of patents. Take WeChat, for example. Current chat apps like Laiwang, Momo, and even a swarm of startups using similar concepts – campus-based, dating-based, entrepreneurship-based, family-based, and so on – are their technical capabilities not strong enough? Are their resources not abundant enough? Are their ideas not fresh enough? Yet WeChat remains irreplaceable, at least for now. This is a form of “monopoly.”

The Third: Secrets

When a person or a company can uncover a secret that triggers qualitative change and creates monopoly, that company has succeeded. This sounds quite mystical, but it makes a lot of sense. As for how exactly to put it into practice? My experience is still limited, and I hope that the next time I read this book, I will have a deeper understanding.

The above are my thoughts after reading this book.

[Android] Weekly Study Report 5: The Global Loudspeaker — A Detailed Look at the Broadcast Mechanism

Fri, 18 Sep 2015 16:11:12 +0000

[leetcode_213]House Robber II

Fri, 18 Sep 2015 14:45:21 +0000

Because the houses form a circle, we iterate over each point as the starting point, exclude its adjacent points, and assume the starting point is always selected. Then we can reuse the solution from House Robber.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53


class Solution {
public:
 int robOne(vector& nums) {
 if (nums.size() == 0) {
 return 0;
 }
 vector v(nums.size() + 1);
 v[0] = 0;
 v[1] = nums[0];
 for (int i = 1; i < nums.size(); i++) {
 int j = i + 1;
 if (nums[i] + v[j - 2] > v[j - 1]) {
 v[j] = nums[i] + v[j - 2];
 } else {
 v[j] = v[j - 1];
 }
 }
 return v[nums.size()];
 }

 int rob(vector& nums) {
 vector numsc;
 int size = nums.size();
 int sum = 0;
 for (int i = 0; i < size; i++) {
 numsc.clear();
 int tmp = nums[i];
 for (int j = i; j < size; j++) {
 if (j == ((i-1) < 0 ? i - 1 + size : i - 1) ||
 j == ((i+1) >= size ? i + 1 - size : i + 1) ||
 j == i) {
 numsc.push_back(0);
 continue;
 }
 numsc.push_back(nums[j]);
 }
 for (int j = 0; j < i; j++) {
 if (j == ((i-1) < 0 ? i - 1 + size : i - 1) ||
 j == ((i+1) >= size ? i + 1 - size : i + 1) ||
 j == i) {
 numsc.push_back(0);
 continue;
 }
 numsc.push_back(nums[j]);
 }
 tmp += robOne(numsc);
 if (tmp >= sum) {
 sum = tmp;
 }
 }
 return sum;
 }
};

[Android] Weekly Study Report 4: Supporting Both Phones and Tablets — Exploring Fragments

Wed, 16 Sep 2015 14:29:56 +0000

[Android] Weekly Study Report 3: Looks Matter for Apps Too — The Bits and Pieces of UI Development

Mon, 14 Sep 2015 12:30:45 +0000

[leetcode_215] Kth Largest Element in an Array

Mon, 14 Sep 2015 12:29:31 +0000

Finding the k-th largest number. I took a shortcut and just used a direct sort. The proper approach should be simulating quickselect.

1
2
3
4
5
6
7


class Solution {
public:
 int findKthLargest(vector<int>& nums, int k) {
 sort(nums.begin(), nums.end(), greater<int>());
 return nums[k - 1];
 }
};

[leetcode_275]H-Index II

Mon, 14 Sep 2015 12:28:35 +0000

This solution passes, but it does not use an O(log n) approach. Marking this for a revisit next time.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


class Solution {
public:
 int hIndex(vector<int>& citations) {
 //sort(citations.begin(), citations.end(), greater<int>());
 int size = citations.size();
 int max = 0;
 for (int i = size - 1; i >= 0; i--) {
 int j = size - 1 - i;
 if (citations[i] >= j + 1) {
 max = j + 1;
 }
 }
 return max;
 }
};

[leetcode_274]H-Index

Mon, 14 Sep 2015 12:27:38 +0000

Sort in descending order, then perform a linear search to find the qualifying h-index.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


class Solution {
public:
 int hIndex(vector<int>& citations) {
 sort(citations.begin(), citations.end(), greater<int>());
 int size = citations.size();
 int max = 0;
 for (int i = 0; i < size; i++)
 {
 if (citations[i] >= i + 1)
 {
 max = i + 1;
 }
 }
 return max;
 }
};

[Android] Weekly Study Report 2: Start with What You Can See -- Exploring Activities

Sun, 13 Sep 2015 08:33:48 +0000

Continuing from [Android] Weekly Study Report 1: Getting Started – Your First Line of Android Code.

Activities are the most intuitive and first-encountered of the four major components. Today I ran a 5km mini marathon, so I’m taking a break before diving deeper into Android.

[LeetCode 154] Find Minimum in Rotated Sorted Array II

Sun, 13 Sep 2015 08:22:43 +0000

Similar approach to Find Minimum in Rotated Sorted Array.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


class Solution {
public:
 int min;
 void search(int left, int right, vector<int>& nums)
 {
 if (right < left)
 {
 return;
 }
 int mid = (left + right) / 2;
 if (nums[mid] < min) {
 min = nums[mid];
 search(left, mid - 1, nums);
 search(mid + 1, right, nums);
 } else if (nums[mid] >= min) {
 search(left, mid - 1, nums);
 search(mid + 1, right, nums);
 }
 }

 int findMin(vector<int>& nums) {
 min = nums[0];
 search(0, nums.size() - 1, nums);
 return min;
 }
};

[leetcode_216]Combination Sum III

Sun, 13 Sep 2015 08:20:50 +0000

Depth-first search.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


class Solution {
public:
 vector<vector<int>> result;
 vector<int> list;

 void search(int now, int k, int n, int sum) {
 if (list.size() == k && sum == n) {
 result.push_back(list);
 }
 if (list.size() >= k || now > 9) {
 return;
 }
 list.push_back(now);
 search(now + 1, k , n , sum + now);
 list.pop_back();
 search(now + 1, k , n , sum);
 }

 vector<vector<int>> combinationSum3(int k, int n) {
 result.clear();
 list.clear();

 search(1, k, n, 0);

 return result;
 }
};

[leetcode_240]Search a 2D Matrix II

Sun, 13 Sep 2015 08:20:04 +0000

Due to the special properties of the matrix, we can simply start searching from the top-left corner.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


class Solution {
public:
 bool searchMatrix(vector<vector<int>>& matrix, int target) {
 int row = matrix.size() - 1;
 int cols = matrix[0].size() - 1;
 int x = 0;
 int y = cols;
 while (x <= row && y >= 0)
 {
 if (target == matrix[x][y])
 {
 return true;
 }
 else if (target > matrix[x][y])
 {
 x++;
 }
 else
 {
 y--;
 }
 }
 return false;
 }
};

[Android] Weekly Study Report 1: Getting Started -- Your First Line of Android Code

Thu, 10 Sep 2015 15:11:55 +0000

I have been learning Android for about a month now. I want to systematically summarize my learning progress at each stage. Currently I am using the book “The First Line of Code: Android” as an introductory guide. This week I did a brief review of Chapter 1. Below is a simple mind map I created. Feel free to double-click to view the full-size image and save it.

[SEO] Search Engine Submission URLs

Thu, 10 Sep 2015 15:01:40 +0000

Website SEO is very important, and search engine optimization is a key part of it. The first step is to get your website indexed by search engines. Below are the submission URLs for major search engines:

Baidu Website Submission: http://zhanzhang.baidu.com/linksubmit/url

Google Website Submission: https://www.google.com/webmasters/tools/submit-url

360 Search Submission: http://info.so.360.cn/site_submit.html

Soso Website Submission: http://www.soso.com/help/usb/urlsubmit.shtml

Sogou Website Submission: http://www.sogou.com/feedback/urlfeedback.php

Bing Website Submission: http://www.bing.com/toolbox/submit-site-url

[LeetCode 230] Kth Smallest Element in a BST

Thu, 10 Sep 2015 14:34:22 +0000

Find the k-th smallest element in a binary search tree. Perform an in-order traversal to generate the sorted sequence, store it in an array, and return the k-th element.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


class Solution {
public:
 vector<int> list;
 void queryTree(TreeNode * node)
 {
 if (NULL == node)
 {
 return;
 }
 if (NULL != node->left)
 {
 queryTree(node->left);
 }
 list.push_back(node->val);
 if (NULL != node->right)
 {
 queryTree(node->right);
 }
 }

 int kthSmallest(TreeNode* root, int k) {
 list.clear();
 queryTree(root);
 return list[k-1];
 }
};

[LeetCode 219] Contains Duplicate II

Wed, 09 Sep 2015 12:36:36 +0000

Determine whether there exist two identical elements in an array whose index difference is at most k. A hash map problem.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


class Solution {
public:
 bool containsNearbyDuplicate(vector<int>& nums, int k) {
 map<int, int> mNums;
 mNums.clear();
 for (int i = 0;i < nums.size();i++)
 {
 map<int,int>::iterator it = mNums.find(nums[i]);
 if (mNums.end() == it)
 {
 mNums.insert(pair<int,int>(nums[i], i));
 }
 else
 {
 if (i - it->second <= k)
 {
 return true;
 }
 mNums.erase(it);
 mNums.insert(pair<int,int>(nums[i], i));
 }
 }
 return false;
 }
};

[LeetCode 223] Rectangle Area

Wed, 09 Sep 2015 12:35:06 +0000

Calculate the total area of two rectangles, which may have an overlapping region.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


class Solution {
public:
 int computeArea(int A, int B, int C, int D, int E, int F, int G, int H) {
 int bx,by,tx,ty;
 bx = A > E ? A : E;
 by = B > F ? B : F;
 tx = C < G ? C : G;
 ty = D < H ? D : H;

 int same = 0;
 if (tx <= bx || ty <= by) {
 same = 0;
 } else {
 same = (tx - bx) * (ty - by);
 }

 return (C - A) * (D - B) + (G - E) * (H - F) - same;
 }
};

[LeetCode 198] House Robber

Mon, 07 Sep 2015 15:19:40 +0000

Select numbers from an array of positive integers to maximize the sum, with the constraint that no two adjacent numbers can be selected.
One could enumerate all 2^n cases, but that’s too expensive. Instead, use one-dimensional dynamic programming: f(n) = max(f(n-1), nums[n] + f(n-2));

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


class Solution {
public:
 int rob(vector<int>& nums) {
 if (nums.size() <= 0)
 {
 return 0;
 }
 vector<int> v(nums.size() + 1);
 v[0] = 0;
 v[1] = nums[0];
 for (int i = 1; i < nums.size(); i++)
 {
 int j = i + 1;
 if (nums[i] + v[j - 2] > v[j - 1])
 {
 v[j] = nums[i] + v[j-2];
 }
 else
 {
 v[j] = v[j-1];
 }
 }
 return v[nums.size()];
 }
};

[LeetCode 199] Binary Tree Right Side View

Mon, 07 Sep 2015 04:58:23 +0000

Find the rightmost node value at each level of a binary tree. Serialize each level and output the last node of each level.

class Solution {
public:
vector<int> rightSideView(TreeNode* root) {
vector<int> ans(0);
if (NULL == root)
{
return ans;
}
queue<TreeNode *> qList;
qList.push(root);
while (qList.size() > 0)
{
int size = qList.size();
for (int i = 0;i < size;i++)
{
TreeNode * head = qList.front();
if (NULL != head->left)
{
qList.push(head->left);
}
if (NULL != head->right)
{
qList.push(head->right);
}
qList.pop();
if (i == size-1)
{
ans.push_back(head->val);
}
}
}
return ans;
}
};

[LeetCode 260] Single Number III

Mon, 07 Sep 2015 04:57:15 +0000

Given an array where all numbers appear in pairs except for two numbers, find those two numbers.
The single-number case is well known – just XOR everything. With two unique numbers, XOR gives a^b. Since a^b is non-zero, pick any bit position where it is 1, partition the array into two groups based on that bit, and XOR each group separately to get a and b.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


class Solution {
public:
 vector<int> singleNumber(vector<int>& nums) {
 int ab = 0;
 for (int i = 0; i < nums.size(); i++) {
 ab ^= nums[i];
 }

 int pos = 0;
 while(0 == ab % 2) {
 pos++;
 ab /= 2;
 }

 int a = 0;
 int b = 0;
 int tmp = (int)pow(2.0, pos);

 for (int i = 0; i < nums.size(); i++) {
 if ((nums[i]^tmp) == (nums[i] - tmp)) {
 a ^= nums[i];
 }
 else {
 b ^= nums[i];
 }
 }

 vector<int> ans(0);
 ans.push_back(a);
 ans.push_back(b);
 return ans;
 }
};

MFC Implementation of the WordGame Typing Game

Thu, 03 Sep 2015 15:18:16 +0000

GitHub download link: https://github.com/hujiulin/TypingGame

Double-click to run the program. The main interface will appear:
Click the “User” menu to perform Login and Register operations. If you have not registered, you can register first and then log in. Here we use UserName as an example.

Click Login to open the login window:

Click Register to open the registration window (or click the Register button directly):

Enter Username: UserName; Nickname: UserName; Password: UserName; as shown below:

Click OK to complete registration.

Log in with the UserName account, and you will see the following information in the upper-right corner of the main interface:
Configure game settings: . In the game options, you can set “Game Difficulty”, “Image Category”, and “Background Music”.
- Game Difficulty:
  
  Click the Game Difficulty button to open the following dialog:
  
  You can use the dropdown lists to configure “Vocabulary Size”, “Spelling Difficulty”, “Word Frequency”, and “Movement Speed”. Vocabulary size options are 50, 100, and 150. Spelling difficulty currently uses random CET-4 words. Word frequency can be single or double. Movement speed can be fast, medium, or slow. Click Set to apply.
- Image Category:
  
  Click the Image Category button to open the following dialog:
  
  Currently available images include balloons and fish. Select a radio button to choose.
- Background Music:
  
  Click the Background Music button to open the following dialog:
  
  Select the desired music in the group box and click “Select Music”.
  
  The configured game options will be displayed at: .
Click to open the following window:

This shows the top five highest-scoring users in the system.
, the Help menu has two sections: Game Rules and About.
- Game Rules:
- About:
This area shows the current game state: Started or Stopped.
Click these two buttons to start or exit the game.
Below is a screenshot taken during gameplay:

Open-Source Snake Game in WIN32 and jQuery

Thu, 03 Sep 2015 15:13:45 +0000

This is a simple snake game available in both WIN32 and JavaScript versions. The WIN32 version was written in 2010 – small but complete. Looking back, I’m quite impressed with myself from over five years ago. The jQuery version was written in 2015.

GitHub download link: https://github.com/hujiulin/snake

jQuery demo: http://www.coinidea.com/game/snake/

The overall interface looks like this:

WIN32 Version:

jQuery Version:

WIN32 Framework Code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76


#include <windows.h>
#include <math.h>
#include <stdlib.h>
#include <time.h>
#include <string.h>

LRESULT CALLBACK WndProc(HWND,UINT,WPARAM,LPARAM);

int WINAPI WinMain(HINSTANCE hInstance,HINSTANCE hPrevInstance,LPSTR lpCmdLine,int nCmdShow) {
 WNDCLASS wndclass;
 char strClassName[] = "hungry snake";
 char strWindowName[] = "贪吃蛇";
 HWND hwnd;
 MSG msg;

 wndclass.cbClsExtra = 0;
 wndclass.cbWndExtra = 0;
 wndclass.hbrBackground = (HBRUSH)GetStockObject(WHITE_BRUSH);
 wndclass.hCursor = LoadCursor(hInstance,IDC_ARROW);
 wndclass.hIcon = LoadIcon(hInstance,IDI_APPLICATION);
 wndclass.hInstance = hInstance;
 wndclass.lpfnWndProc = WndProc;
 wndclass.lpszClassName = strClassName;
 wndclass.lpszMenuName = NULL;
 wndclass.style = 0;

 if(!RegisterClass(&wndclass)) {
 MessageBeep(0);
 return FALSE;
 }

 hwnd = CreateWindow(
 strClassName,
 strWindowName,
 WS_OVERLAPPEDWINDOW,
 CW_USEDEFAULT,
 CW_USEDEFAULT,
 CW_USEDEFAULT,
 CW_USEDEFAULT,
 NULL,
 NULL,
 hInstance,
 NULL
 );

 ShowWindow(hwnd,nCmdShow);
 UpdateWindow(hwnd);

 while(GetMessage(&msg,NULL,0,0)) {
 TranslateMessage(&msg);
 DispatchMessage(&msg);
 }

 return msg.wParam;
}

LRESULT CALLBACK WndProc(HWND hwnd,UINT msg,WPARAM wParam,LPARAM lParam) {
 HDC hdc;
 PAINTSTRUCT ps;
 HBRUSH hBrush;
 HPEN hPen;
 switch(msg) {
 case WM_LBUTTONDOWN:
 case WM_RBUTTONDOWN:
 case WM_CHAR:
 case WM_PAINT:
 InvalidateRect(hwnd,NULL,1);
 break;
 case WM_DESTROY:
 PostQuitMessage(0);
 break;
 default:
 return DefWindowProc(hwnd,msg,wParam,lParam);
 }
 return 0;
}

Snake Definition

The entire snake is a List, with a head squarehead, a direction with four possible values, a speed, and the current snake length List.size().

Collision Detection

When the snake’s head encounters a randomly generated square in the current direction, it means food has been eaten.
When the snake turns back and hits its own body, or hits the boundary, the game is over.

Data Visualization Plugin Based on World Wind

Thu, 03 Sep 2015 15:11:46 +0000

Sample components built on open-source data visualization libraries (MSChart, VTK, D3), with a World Wind plugin that invokes these components.

GitHub download link: https://github.com/hujiulin/WorldWind_DataVisualization

1. Load Plugin

2. DataVisualization2D Component

3. DataVisualization3D Component

4. DataVisualizationWEB Component

Original link: http://cesiumcn.org/topic/207.html | China mirror: http://cesium.coinidea.com/topic/207.html

[LeetCode 206] Reverse Linked List

Tue, 01 Sep 2015 14:53:34 +0000

Reverse a singly linked list.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


class Solution {
public:
 ListNode* reverseList(ListNode* head) {
 if (NULL == head)
 {
 return head;
 }
 ListNode * before = NULL;
 ListNode * now = head;
 ListNode * next = now->next;

 while (NULL != next)
 {
 ListNode * beforeTmp = now;
 ListNode * nowTmp = next;
 ListNode * nextTmp = next->next;

 now->next = before;
 next->next = now;

 before = beforeTmp;
 now = nowTmp;
 next = nextTmp;
 }

 head = now;
 return head;
}
};

Android Common Controls and Event Handling

Mon, 31 Aug 2015 14:09:07 +0000

In Android development, you may need custom layouts. For example, apps often require a common title bar. However, the built-in options may not meet your needs, so you have to implement one yourself. Since an app typically contains multiple Activities, it is common practice to define a CommonTitle for better reusability. This article demonstrates a custom CommonTitle implementation.

Create a new layout

1
2
3


<!--?xml version="1.0" encoding="utf-8"?-->
<button>
</button>

Create a new CommonTitle class extending LinearLayout

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


package com.example.uicustomviews;

import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.Toast;

public class CommonTitle extends LinearLayout {
 public CommonTitle(Context context, AttributeSet attrs) {
 super(context, attrs);
 LayoutInflater.from(context).inflate(R.layout.commontitle, this);

 Button backButton = (Button)findViewById(R.id.backButton);
 backButton.setOnClickListener(new OnClickListener() {
 @Override
 public void onClick(View view) {
 // TODO Auto-generated method stub
 ((Activity)getContext()).finish();
 }
 });

 Button editButton = (Button)findViewById(R.id.editButton);
 editButton.setOnClickListener(new OnClickListener() {
 @Override
 public void onClick(View view) {
 // TODO Auto-generated method stub
 Toast.makeText(getContext(), "Please edit the context", Toast.LENGTH_SHORT).show();
 }
 });
 }
}

Include your custom CommonTitle in the Activity that needs it
1

The result looks like this:

[LeetCode 238] Product of Array Except Self

Mon, 31 Aug 2015 11:47:19 +0000

Given an input array a1, a2, a3, …

Generate an output array where each element is the product of all other elements, e.g. a2a3, a1a3, a1*a2. The goal is to solve it in O(n) time without using division.

Use two extra arrays to store the prefix product and suffix product for each index.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


class Solution {
public:
 vector<int> productExceptSelf(vector<int>& nums) {
 int size = nums.size();
 vector<int> front(size), back(size), result(size);
 front[0] = 1;
 back[size-1] = 1;
 for (int i = 1;i < size;i++)
 {
 front[i] = front[i-1] * nums[i-1];
 }
 for (int i = size - 2;i >= 0;i--)
 {
 back[i] = back[i + 1] * nums[i + 1];
 }
 result[0] = back[0];
 result[size-1] = front[size - 1];
 for (int i = 1;i < size - 1;i++)
 {
 result[i] = front[i] * back[i];
 }
 return result;
 }
};

[LeetCode 172] Factorial Trailing Zeroes

Mon, 31 Aug 2015 11:43:47 +0000

Count how many trailing zeroes n! has. The problem essentially reduces to counting the number of factor 5 in the prime factorization (since there are always more 2s than 5s). A naive approach of checking every number modulo 5 would time out; instead, you only need to compute the relationship between powers of 5 and n.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


class Solution {
public:
 int trailingZeroes(int n) {
 vector<int> five(14);
 for (int i = 1; i <= 13; i++) {
 five[i] = ((int)pow(5.0, i));
 }
 int before = 0;
 int count = 0;
 for (int i = 13; i >= 1; i--) {
 if (five[i] <= n) {
 count += (n / five[i] - before) * i;
 before = (n / five[i]);
 }
 }
 return count;
 }
};

[LeetCode 257] Binary Tree Paths

Fri, 28 Aug 2015 14:24:23 +0000

Enumerate all paths of a binary tree – a simple search will do.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46


class Solution {
public:
 string convertIntToStr(int num)
 {
 char str[255];
 sprintf(str, "%d", num);
 return str;
 }

void binaryTreePath(TreeNode* node, string& path, vector<string>& paths)
{
 if (NULL == node)
 {
 return;
 }
 path += convertIntToStr(node->val);
 if (NULL != node->left)
 {
 string tmp = path;
 path += "->";
 binaryTreePath(node->left, path, paths);
 path = tmp;
 }
 if (NULL != node->right)
 {
 string tmp = path;
 path += "->";
 binaryTreePath(node->right, path, paths);
 path = tmp;
 }
 if (NULL == node->left && NULL == node->right)
 {
 paths.push_back(path);
 }
}

vector<string> binaryTreePaths(TreeNode* root) {
 vector<string> paths;
 paths.clear();

 string path = "";
 binaryTreePath(root, path, paths);

 return paths;
}
};

[leetcode_165] Compare Version Numbers

Thu, 27 Aug 2015 13:37:59 +0000

Another way to describe the problem: Split the two input numbers by ., then compare them segment by segment. If the number of segments differs, the one with more segments is larger – provided the extra segments contain a non-zero value.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57


class Solution {
public:
 void getNums(string version1, vector<int> &v1)
 {
 int s = 0;
 int pos = version1.find(".");
 while (-1 != pos)
 {
 v1.push_back(atoi(version1.substr(s, pos - s).c_str()));
 s = pos + 1;
 pos = version1.find(".", pos + 1);
 }
 v1.push_back(atoi(version1.substr(s).c_str()));
 }
 int compareVersion(string version1, string version2) {
 vector<int> v1, v2;
 v1.clear();
 v2.clear();
 getNums(version1, v1);
 getNums(version2, v2);
 int min = v1.size() > v2.size() ? v2.size() : v1.size();
 for (int i = 0; i < min;i++)
 {
 if (v1[i] > v2[i])
 {
 return 1;
 }
 if (v1[i] < v2[i])
 {
 return -1;
 }
 }
 if (v1.size() > v2.size())
 {
 for (int i = min; i < v1.size(); i++)
 {
 if (v1[i] > 0)
 {
 return 1;
 }
 }
 return 0;
 }
 if (v1.size() < v2.size())
 {
 for (int i = min; i < v2.size(); i++)
 {
 if (v2[i] > 0)
 {
 return -1;
 }
 }
 return 0;
 }
 return 0;
 }
};

[leetcode_203]Remove Linked List Elements

Thu, 27 Aug 2015 13:32:41 +0000

Remove all nodes with a specified value from a singly linked list.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36


class Solution {
public:
 ListNode* removeElements(ListNode* head, int val) {
 if (NULL == head)
 {
 return NULL;
 }
 ListNode * before = NULL;
 ListNode * now = head;
 while (now != NULL)
 {
 if (now -> val == val)
 {
 if (before == NULL)
 {
 head = head->next;
 now = head;
 }
 else
 {
 if (now != NULL)
 {
 before->next = now->next;
 }
 now = before->next;
 }
 }
 else
 {
 before = now;
 now = now->next;
 }
 }
 return head;
 }
};

[LeetCode 268] Missing Number

Thu, 27 Aug 2015 13:30:51 +0000

Given a sequence from 0 to n with one number i missing, find i.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


class Solution {
public:
 int missingNumber(vector<int>& nums) {
 int sum = 0;
 int max = 0;
 bool isZero = false;
 for (int i = 0; i < nums.size(); i++) {
 sum += nums[i];
 if (nums[i] >= max) {
 max = nums[i];
 }
 if (nums[i] == 0) {
 isZero = true;
 }
 }
 int oSum = (0 + max) * (max - 0 + 1) / 2;
 if (oSum == sum) {
 if (!isZero) {
 return 0;
 } else {
 return max + 1;
 }
 } else {
 return oSum - sum;
 }
 }
};

[leetcode_160]Intersection of Two Linked Lists

Thu, 27 Aug 2015 13:28:46 +0000

Find the intersection node of two singly linked lists. The idea is simple: the longer list advances by the difference in length first.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42


class Solution {
public:
 ListNode *getIntersectionNode(ListNode *headA, ListNode *headB) {
 int countA = 0;
 int countB = 0;
 ListNode * tmpA = headA;
 ListNode * tmpB = headB;
 while(NULL != tmpA)
 {
 countA++;
 tmpA = tmpA->next;
 }
 while(NULL != tmpB)
 {
 countB++;
 tmpB = tmpB->next;
 }
 int move = 0;
 if (countA > countB)
 {
 while (move < countA - countB)
 {
 headA = headA->next;
 move++;
 }
 }
 else
 {
 while (move < countB - countA)
 {
 headB = headB->next;
 move++;
 }
 }
 while (headA != headB)
 {
 headA = headA->next;
 headB = headB->next;
 }
 return headA;
 }
};

[leetcode_173]Binary Search Tree Iterator

Thu, 27 Aug 2015 13:27:01 +0000

Traversing a binary search tree is essentially an in-order traversal of the tree. An iterative approach can be used.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42


class BSTIterator {
public:
 int pos;
 vector<TreeNode *> treeNodeStack;

 void buildStack(TreeNode *node)
 {
 if (node == NULL)
 {
 return;
 }
 else
 {
 if (NULL != node->left)
 {
 buildStack(node->left);
 }
 treeNodeStack.push_back(node);
 if (NULL != node->right)
 {
 buildStack(node->right);
 }
 }
 }

 BSTIterator(TreeNode *root) {
 pos = 0;
 treeNodeStack.clear();
 buildStack(root);
 }

 /** @return whether we have a next smallest number */
 bool hasNext() {
 return treeNodeStack.size() > pos;
 }

 /** @return the next smallest number */
 int next() {
 return treeNodeStack[pos++]->val;
 }

};

[leetcode_204]Count Primes

Thu, 27 Aug 2015 13:25:23 +0000

Count the number of primes less than a given number n. The Sieve of Eratosthenes works well here.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


class Solution {
public:
 int * flag;
 int countPrimes(int n) {
 flag = new int[n + 10];
 for (int i = 1;i < n;i++)
 {
 flag[i] = 0;
 }
 for (int i = 2;i < n;i++)
 {
 if (0 == flag[i])
 {
 flag[i] = 1;
 for (int j = 2;j * i < n; j++)
 {
 flag[j * i] = -1;
 }
 }
 }
 int count = 0;
 for (int i = 1;i < n; i++)
 {
 if (1 == flag[i])
 {
 count++;
 }
 }
 return count;
 }
};

[leetcode_189]Rotate Array

Thu, 27 Aug 2015 13:24:07 +0000

Rotate an array based on input k. Note that k can be negative or greater than the array length, so take the modulus first. Then output the doubled array starting at offset size-k.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


class Solution {
public:
 void rotate(vector<int>& nums, int k) {
 if (nums.size() <= 0)
 {
 return ;
 }
 k %= nums.size();
 vector<int> dNums(nums.size() * 2);
 for (int i = 0;i < nums.size() * 2; i++)
 {
 dNums[i] = nums[i % nums.size()];
 }
 for (int i = 0;i < nums.size(); i++)
 {
 nums[i] = dNums[i + nums.size() - k];
 }
 }
};

[leetcode_168]Excel Sheet Column Title

Thu, 27 Aug 2015 13:22:04 +0000

Convert a number to an Excel column title. At first I thought it was a simple base-26 conversion, but you need to consider that there is no 0 in this numeral system. So I temporarily used @ to represent 0, which requires an additional conversion step afterward.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42


class Solution {
public:
 string convertToTitle(int n) {
 string title = "";
 while (n > 0)
 {
 title += 'A' + n % 26 - 1;
 n /= 26;
 }
 int pos0 = 0;
 while (pos0 < title.length())
 {
 int pos = pos0;
 while (title[pos] == '@' && pos < title.length())
 {
 title[pos] = 'Z';
 if (pos + 1 < title.length() && title[pos + 1] != '@')
 {
 title[pos+1]--;
 pos++;
 }
 else
 {
 title = title.substr(0, pos);
 break;
 }
 }
 pos0++;
 }
 int s = 0;
 int e = title.length() - 1;
 while (s < e)
 {
 char tmp = title[s];
 title[s] = title[e];
 title[e] = tmp;
 s++;
 e--;
 }
 return title;
 }
};

[LeetCode 228] Summary Ranges

Thu, 27 Aug 2015 13:17:31 +0000

A simple simulation problem – merge intervals.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55


class Solution {
public:
 string convertIntToStr(int num)
 {
 char str[255];
 sprintf(str, "%d", num);
 return str;
 }

 vector<string> summaryRanges(vector<int>& nums) {
 vector<string> ranges;
 ranges.clear();
 if (nums.size() <= 0)
 {
 return ranges;
 }
 int start = nums[0];
 int end = nums[0];
 for (int i = 1;i < nums.size(); i++)
 {
 if (nums[i] - nums[i-1] == 1)
 {
 end = nums[i];
 }
 else
 {
 string item = convertIntToStr(start);
 if (end == start)
 {
 ranges.push_back(item);
 }
 else
 {
 item += "-";
 item += convertIntToStr(end);
 ranges.push_back(item);
 }
 start = nums[i];
 end = start;
 }
 }
 string item = convertIntToStr(start);
 if (end == start)
 {
 ranges.push_back(item);
 }
 else
 {
 item += "-";
 item += convertIntToStr(end);
 ranges.push_back(item);
 }
 return ranges;
 }
};

CoinLife -- Life Assistant

Sun, 23 Aug 2015 16:02:33 +0000

CoinLife is a mobile WebApp independently developed by me, serving as a life assistant. WebAPP - Details | Android - Details

It has the following features:

Project Management
Bill Management
Menu Management

[WorldWind]1. Getting Started with WorldWind -- Compiling WorldWind and Fixing Encoding Issues

Sun, 23 Aug 2015 03:01:39 +0000

The World Wind GitHub source code used in this article can be downloaded at: https://github.com/hujiulin/WorldWind

World Wind, led by the National Aeronautics and Space Administration (NASA), is an open-source geographic information system project developed collaboratively by developers worldwide. Developed by NASA Research and promoted by NASA Learning Technologies, it displays satellite imagery, electronic maps, terrain maps, and other geographic data on a 3D digital globe. It is designed for data integration across industries, supports WMS, WFS, WMTS, and other services, and is an excellent 3D client framework rendering engine. It uses XML for data description and configuration, offering good versatility and extensibility. World Wind currently has two versions: one based on .NET and one based on Java. Beyond its basic 3D globe functionality, World Wind is highly extensible with various plugins, supporting map data (satellite, electronic, terrain) published by Google, Microsoft, and others.

This article primarily addresses issues related to compiling, running, and fixing Chinese character encoding problems in World Wind.

Downloading the Source Code, Configuring the Environment, and Compiling [Use an international network connection in case the servers are inaccessible]

Downloading the Source Code

WorldWind has both .Net and Java versions. NASA’s official website is: http://worldwind.arc.nasa.gov/java/

It provides Java version source code downloads.

.Net version source code download:

http://worldwind31.arc.nasa.gov/svn/trunk/WorldWind/

This provides an SVN repository. It is recommended to use SVN for downloading.

Note: The above SVN was found through the wiki at http://www.worldwindcentral.com/wiki/Source_code.

Environment Configuration

DirectX9 must be installed beforehand.

Compiling the Source Code

Encoding issues: You will encounter many syntax errors related to strings, caused by file encoding problems.
- Right-click the file in VS Solution Explorer
- Select “Open With”
- Choose “CSharp Editor with Encoding”
- Select “Western European (Windows) - Code Page 1252”
- Open the file – no more garbled characters
- Change the file save encoding to UTF-8 via the File menu, then save the source file
  
  Note: About 6 files are affected.
LoaderLock issue:
- Menu (Debug -> Exceptions) -> Exceptions window -> ManagedDebuggingAssistants -> Uncheck the LoaderLock option
Registry permission issue:
- Open the HtmlEditor project properties, and uncheck “Register for COM interop” in the “Build” tab
Start running the program. Everything works fine, but transitioning from the initialization screen to the main program takes a long time. This is because the WorldWind server is not accessible from China. WorldWind provides an offline mode, and you can also modify the WMS server URL in the XML. The temporary solution used here is to comment out the following two lines of code:
- In Worldwind -> PluginSDK -> ConfigurationLoader.cs, line 262:
- Line 321:
When running the program, the Initializing splash screen is misaligned:
- Debugging reveals the issue is in worldwind.cs, in public MainApplication() [line 563]:
- Using the splash form.
Splash form:
- Splash constructor:
- You can see the PictureBox code is commented out, and there is no PictureBox control on the form.
  
  It uses:
  
  Adjust the image as shown above, and the program starts normally.
Decided to back up the source code to Baidu Cloud and my own SVN server. [The upload to Baidu’s server did not succeed.]
After migrating the WorldWind source code, an issue occurred:
- Rebuilding and cleaning the project did not help.
- Solution:
  - Delete this file:
  - After deletion, reconfigure:
Issue resolved.
- Note: The first time you run the program, you may need to wait a moment.
- If references such as AVIFile.dll or FlickrNel.dll are missing, switch from Release mode to Debug mode to compile and run successfully. [The actual reason is that the corresponding DLLs need to be copied to the Release directory.]
- When fixing encoding issues, some people encounter a situation where the degree symbol in the main interface displays as garbled characters. This is because the encoding issue has not been fully resolved. Please save with “UTF-8 with BOM” in the “Advanced Save Options” to fix this.

Files with Encoding Issues:

Project	File
WorldWind	Compass3D.cs
WorldWind	GPSTrackerPlugin.WorldWind.cs
WorldWindow	WorldWindow.cs
PluginSDK	ConfigurationLoader.cs
PluginSDK	Angle.cs

All encoding issues resolved:

Today I compiled the code from SVN on an x64 machine, and the program would not run. The debugger showed the error:

“Unhandled exception of type ‘System.BadImageFormatException’”

Solution:

Change from Any CPU or x64 mode to x86, then set the output path to “..binDebug”

Rebuild the solution, compile and run successfully:

Original link: http://cesiumcn.org/topic/206.html | Fast access in China: http://cesium.coinidea.com/topic/206.html

[leetcode_190]Reverse Bits

Fri, 21 Aug 2015 14:19:09 +0000

Convert a positive integer to binary, reverse the bit order, then output it as a decimal. A simulation problem.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


class Solution {
public:
 uint32_t reverseBits(uint32_t n) {
 //To binary
 vector<int> nums(32, 0);
 int index = 0;
 while(n > 0)
 {
 nums[index++] = n % 2;
 n /= 2;
 }

 uint32_t ans = 0;
 for (int i = 0; i < nums.size(); i++)
 {
 ans += nums[i] * (uint32_t)pow(2.0, (int)(nums.size() - i - 1));
 }
 return ans;
 }
};

[leetcode_202]Happy Number

Fri, 21 Aug 2015 14:17:58 +0000

Determine whether a number n is a happy number. A happy number is defined by repeatedly summing the squares of its digits and checking if the result equals 1. If it doesn’t equal 1, repeat the process. In practice, this process will form a cycle. [This is a guess, not formally proven.]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


class Solution {
public:
 map<int, bool> flag;
 bool isHappy(int n)
 {
 if (n == 1)
 {
 return true;
 }
 map<int, bool>::iterator it = flag.find(n);
 if (it != flag.end())
 {
 return false;
 }
 else
 {
 flag.insert(map<int, bool>::value_type(n, true));
 }
 int tmpNum = 0;
 while (n > 0)
 {
 tmpNum += (n % 10) * (n % 10);
 n /= 10;
 }
 return isHappy(tmpNum);
 }
};

[leetcode_231]Power of Two

Fri, 21 Aug 2015 14:16:13 +0000

Determine whether a number is a power of two. This can be done with bit manipulation – just shift the bits.

class Solution {
public:
bool isPowerOfTwo(int n) {
if (n <= 0)
{
return false;
}
while(true)
{
if (n == 1) {
return true;
}
if (n % 2 != 0) {
return false;
}
n >>= 1;
}
}
};

[leetcode_263]Ugly Number

Fri, 21 Aug 2015 14:14:39 +0000

Determine whether a number is an ugly number. Solved using simulation.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


class Solution {
public:
 bool isUgly(int num) {
 if (num <= 0)
 {
 return false;
 }
 while(true)
 {
 if(num%2 == 0)
 {
 num /= 2;
 }
 else if(num%3 == 0)
 {
 num /= 3;
 }
 else if(num%5 == 0)
 {
 num /= 5;
 }
 else
 {
 if (num == 1)
 {
 return true;
 }
 else
 {
 return false;
 }
 }
 }
 }
};

[leetcode_225]Implement Stack using Queues

Fri, 21 Aug 2015 14:13:33 +0000

Simulate a stack. Took a shortcut by using a vector to solve the problem.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


class Stack {
public:
 vector<int> stack;
 // Push element x onto stack.
 void push(int x) {
 stack.push_back(x);
 }

 // Removes the element on top of the stack.
 void pop() {
 stack.pop_back();
 }

 // Get the top element.
 int top() {
 return stack[stack.size() - 1];
 }

 // Return whether the stack is empty.
 bool empty() {
 return stack.empty();
 }
};

[leetcode_153]Find Minimum in Rotated Sorted Array

Fri, 21 Aug 2015 14:12:27 +0000

This is an interesting problem. Given a sorted array: 1,2,3,4,5,6,7, but it has been rotated, for example: 4,5,6,7,1,2,3. The task is to find the minimum element. An O(n) solution is always possible. I remember being asked a similar question during a Didi interview last year. I was sure it was binary search at the time, but felt I didn’t explain it clearly. This time, the approach is much clearer.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


class Solution {
public:
 void binarySearch(vector<int>& nums, int left, int right, int &min)
 {
 if (left > right)
 {
 return ;
 }
 int mid = (left + right) / 2;
 if (nums[mid] >= min)
 {
 binarySearch(nums, left, mid - 1, min);
 binarySearch(nums, mid+1, right, min);
 }
 else
 {
 min = nums[mid];
 binarySearch(nums, left, mid - 1, min);
 }
 }

 int findMin(vector<int>& nums) {
 int min = nums[0];
 binarySearch(nums, 0, nums.size() - 1, min);
 return min;
 }
};

[leetcode_242]Valid Anagram

Fri, 21 Aug 2015 14:08:11 +0000

Determine whether two strings contain the same letters with the same frequency.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


class Solution {
public:
 bool isAnagram(string s, string t) {
 vector&lt;int&gt; sCount(26, 0);
 for (int i = 0;i &lt; s.length();i++)
 {
 sCount[s[i] - 'a']++;
 }
 for (int i = 0;i &lt; t.length();i++)
 {
 sCount[t[i] - 'a']--;
 }
 for (int i = 0;i &lt; sCount.size(); i++)
 {
 if (0 != sCount[i])
 {
 return false;
 }
 }
 return true;
 }
};

[leetcode_169] Majority Element

Wed, 19 Aug 2015 13:03:04 +0000

Find the element that appears more than half the time in a given array (guaranteed to exist). Pay attention to whether the array length is odd or even. A hash map does the job.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


class Solution {
public:
 int majorityElement(vector<int>& nums) {
 map<int, int> m_nums;
 m_nums.clear();
 for (int i = 0; i < nums.size(); i++)
 {
 auto it = m_nums.find(nums[i]);
 if (it == m_nums.end())
 {
 m_nums.insert({nums[i], 1});
 }
 else
 {
 m_nums.erase(nums[i]);
 m_nums.insert({nums[i], ++(it->second)});
 }
 }

 for (auto it = m_nums.begin(); it != m_nums.end(); it++)
 {
 if (it->second >= nums.size() / 2 + 1)
 {
 return it->first;
 }
 }
 }
};

[leetcode_217] Contains Duplicate

Wed, 19 Aug 2015 13:01:16 +0000

Determine whether a given array contains duplicate elements. A hash table solves this. I actually used a map, which is a binary search tree in C++. The O(log n) solution, so the performance isn’t the best.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


class Solution {
public:
 bool containsDuplicate(vector<int>& nums) {
 map<int, bool> m_nums;
 m_nums.clear();
 for (int i = 0; i < nums.size(); i++)
 {
 map<int, bool>::iterator it = m_nums.find(nums[i]);
 if (it == m_nums.end())
 {
 m_nums.insert(map<int, bool>::value_type(nums[i], true));
 }
 else
 {
 return true;
 }
 }
 return false;
 }
};

[leetcode_171] Excel Sheet Column Number

Wed, 19 Aug 2015 12:59:48 +0000

Find the actual column number represented by an Excel column label like “AB”. It’s essentially base-26 conversion.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


class Solution {
public:
 int titleToNumber(string s) {
 int sum = 0;
 int size = s.length();
 for (int i = 0; i < size; i++) {
 sum += (s[i] - 'A' + 1) * (int)pow(26.0, (size - i - 1));
 }
 return sum;
 }
};

[leetcode_226]Invert Binary Tree

Wed, 19 Aug 2015 12:58:35 +0000

Inverting a binary tree is essentially a post-order traversal of the tree with swapping of left and right child nodes.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


class Solution {
public:
 void swap(TreeNode & left, TreeNode *& right)
 {
 TreeNode * tmp = left;
 left = right;
 right = tmp;
 }
 TreeNode * invertTree(TreeNode* root) {
 if (root == NULL)
 return NULL;
 if (root->left != NULL)
 invertTree(root->left);
 if (root->right != NULL)
 invertTree(root->right);
 swap(root->left, root->right);
 return root;
 }
};

[leetcode_235]Lowest Common Ancestor of a Binary Search Tree

Wed, 19 Aug 2015 12:57:17 +0000

Find the lowest common ancestor of two nodes in a binary tree. I’ve done similar problems before, but it’s been a while since I last solved algorithm problems, so I thought it through again. The approach is depth-first search to find the two paths, then find their intersection. I was initially worried about time limit exceeded, but the AC was quite fast.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54


class Solution {
public:
 bool isFind;
 vector<TreeNode *> pV, qV;
 void FindK(TreeNode *node, TreeNode* k, vector<TreeNode *> &kV)
 {
 kV.push_back(node);
 if (isFind || node == k)
 {
 isFind = true;
 return;
 }
 if (NULL != node->left)
 {
 FindK(node->left, k, kV);
 if (isFind)
 {
 return;
 }
 kV.pop_back();
 }
 if (NULL != node->right)
 {
 FindK(node->right, k, kV);
 if (isFind)
 {
 return;
 }
 kV.pop_back();
 }
 }
 TreeNode* lowestCommonAncestor(TreeNode* root, TreeNode* p, TreeNode* q) {
 if (NULL == root)
 {
 return root;
 }
 pV.clear();
 qV.clear();
 isFind = false;
 FindK(root, p, pV);
 isFind = false;
 FindK(root, q, qV);
 int i = 0;
 int minSize = pV.size() > qV.size() ? qV.size() : qV.size();
 for (i = 0;i < minSize; i++)
 {
 if (pV[i] != qV[i])
 {
 break;
 }
 }
 return pV[i - 1];
 }
};

[leetcode_191] Number of 1 Bits

Wed, 19 Aug 2015 12:55:17 +0000

Count the number of 1s in the binary representation of an integer. A straightforward simulation.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


class Solution {
public:
 int hammingWeight(uint32_t n) {
 int count = 0;
 while(n > 0)
 {
 count += n%2;
 n /= 2;
 }
 return count;
 }
};

[leetcode_237]Delete Node in a Linked List

Wed, 19 Aug 2015 12:53:27 +0000

Delete a specified node in a singly linked list. When I first read the problem, I thought at least both the head node and the target node should be given. But after guessing, I realized the problem likely requires copying the values of subsequent nodes forward to overwrite, rather than performing a true linked list deletion.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


class Solution {
public:
 void deleteNode(ListNode* node) {
 ListNode * next = node->next;
 ListNode * before = NULL;
 while(next != NULL)
 {
 node->val = next->val;
 before = node;
 node = next;
 next = next->next;
 }
 before->next = NULL;
 }
};

[leetcode_258]Add Digits

Wed, 19 Aug 2015 12:38:32 +0000

I couldn’t figure out the O(1) approach, so here’s the simulation method: Repeatedly sum all the digits until the sum is less than 10.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


class Solution {
public:
 int addDigits(int num) {
 int sum = 0;
 while(num > 0)
 {
 sum += num % 10;
 num /= 10;
 }
 if (sum >= 10)
 {
 return addDigits(sum);
 }
 else
 {
 return sum;
 }
 }
};

Setting Up an Android Development Environment

Mon, 17 Aug 2015 04:45:38 +0000

There are two mainstream Android development environments:

1. Android Studio by Google

The first one sounds very professional just from the name, and it’s made by Google. It’s fairly stable now. However, due to certain conditions in our country, *.google.com is very hard to access, and it’s been getting worse recently. Android Studio is heavily dependent on network access. After downloading and using it, I found it inconvenient. For users with easy internet access, I recommend considering it. Domestic download link: http://www.android-studio.org/

2. Eclipse

Eclipse is currently a very popular IDE for Android development.

I recommend a very professional domestic website: http://www.androiddevtools.cn/

This website covers all the Android-related resources you’ll need.

The required setup is as follows:

Java

Official site: http://www.java.com/zh_CN/

Androiddevtools link: http://www.androiddevtools.cn/ Select Android SDK Tools -> JDK

Eclipse

Official site: http://www.eclipse.org/downloads/

Recommended: IDE For Java EE. Eclipse has different versions; I downloaded the latest one at the time, Mars.

ADT (Android Development Tools): Eclipse Plugin

Eclipse is a powerful, extensible, open-source IDE with many plugins. ADT is one of them.

Androiddevtools link: http://www.androiddevtools.cn/ Select Android SDK Tools -> ADT Plugin

How to install ADT:

Download the latest rar archive to your local machine.
Open Eclipse, go to Help -> Install New Software

Click Archive, select the local archive, and set the Name to ADT.

After installing ADT, if these two icons don’t appear in Eclipse’s toolbar, go to Eclipse -> Window -> Perspective -> Customize Perspective and check the boxes. One icon manages the SDK and the other manages AVDs. AVD stands for Android Virtual Device - a simulated Android device.

Select All, click Finish.

Android SDK-Tools

Androiddevtools link: http://www.androiddevtools.cn/ Select Android SDK Tools -> SDK Tools

Download and install to your chosen directory. The final directory size can be quite large, so make sure you have enough space.

In Eclipse -> Preferences, specify the SDK Location.

Android SDK

You can see my Location shows Android 4.3.1, but yours might not have anything. That’s because you need to install specific SDK packages.

Androiddevtools link: http://www.androiddevtools.cn/ Select Android SDK Tools -> SDK

Download the packages. I recommend downloading version 4.0.0 or later.

Copy the extracted folder into the Platforms folder inside your Android SDK-Tools directory. Create the folder if it doesn’t exist.

Android Build-Tools

These are the Build-Tools needed for Android development. Download and extract, then copy or move the entire extracted folder to your-sdk-path/build-tools.

Androiddevtools link: http://www.androiddevtools.cn/ Select Android SDK Tools -> Build-Tools

Android Platform-Tools

This is the package containing adb, fastboot, and other tools. Place the extracted platform-tools folder in the android sdk root directory, and add the directory containing adb to your system PATH so you can access adb, fastboot, and other tools directly from the command line.

Androiddevtools link: http://www.androiddevtools.cn/ Select Android SDK Tools -> Platform-Tools

Android SDK System-Images

These are the system images needed when creating emulators - they’re what you select for the CPU/ABI option when creating an emulator. Download and extract, then copy or move the entire extracted folder to your-sdk-path/system-images. If the system-images directory doesn’t exist, create it first. Then open SDK Manager, go to the Tools menu, select Options to open the Android SDK Manager Settings dialog, click Clear Cache, and restart Eclipse (or Android Studio) and SDK Manager.

Androiddevtools link: http://www.androiddevtools.cn/ Select Android SDK Tools -> System-Images

AVD

Create an AVD for debugging.

Click the AVD icon, then click Create. Configure it according to your needs.

Create a New HelloWorld Project

In Eclipse: File -> New -> Other -> Android Application Project, then keep clicking Next and Finish.

Here’s the result:

[C++] Drawing a Diamond Shape

Mon, 27 Jul 2015 02:04:30 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


#include <iostream>
using namespace std;

int main()
{
 int n; // The longest row of the diamond has n characters, and n must be odd because n = 2*k + 1
 cin >> n;

 int cn = 1;
 bool isUp = true;
 for (int i = 1; i <= n; i++) {
 for (int j = 1; j <= (n - cn) / 2; j++) {
 cout << " ";
 }
 for (int j = 1; j <= cn; j++) {
 cout << "*";
 }
 for (int j = 1; j <= (n - cn) / 2; j++) {
 cout << " ";
 }
 cout << endl;

 if (cn >= n) {
 isUp = false;
 }
 if (isUp) {
 cn += 2;
 } else {
 cn -= 2;
 }
 }
 return 0;
}

[C++] Open a TXT File by Input Filename and Count Its Bytes

Sun, 26 Jul 2015 02:04:30 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


#include <iostream>
using namespace std;

int main() {
 char filename[255];
 cin >> filename;

 FILE * pFile = fopen(filename, "r");
 fseek(pFile, 0L, SEEK_END);
 long count = ftell(pFile);
 cout << "Byte count=" << count << endl;
 fclose(pFile);
 return 0;
}

[JavaScript] Finding Prime Numbers Up to N

Sun, 26 Jul 2015 02:01:42 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


<script type="text/javascript">
var arr = new Array();
var flag = new Array(1001);
for (var i = 1; i <= 1000; i++) {
 flag[i] = 0;
}
for (var i = 2; i <= 1000; i++) {
 if (flag[i] == 0) {
 flag[i] = 1;
 arr.push(i);
 for (var j = 1; j * i <= 1000; j++) {
 flag[j*i] = 1;
 }
 }
}
var ans = "2";
for (var i = 1; i < arr.length; i++) {
 ans = ans + "," + arr[i].toString();
}
alert(ans);
</script>

This uses the Sieve of Eratosthenes, which has good performance. Tested and working in Chrome. Hope it helps!

This was my answer on Baidu Zhidao (a Q&A platform).

[Reading Notes] Godel, Escher, Bach: An Eternal Golden Braid

Sat, 25 Jul 2015 07:04:11 +0000

Wednesday, November 28, 2012 - Prelude to Purchase and Preface

On November 11th this year, my roommate Xingxing owed me 30 yuan. I told him to get me a Singles’ Day gift instead of paying me back. He asked what I wanted. At the time, I was really into reading the Steve Jobs biography, so I figured a Peking University student would know some great books. I asked him to buy me a book and recommend something. He said GEB was good. I was taken aback - that’s supposed to be a book for mathematical logic. After thinking about it, I asked him to get me “On the Crest of the Wave” instead. But I still went and searched for GEB. The review on Dangdang said: “This is an unprecedented masterpiece and an outstanding popular science work. With carefully designed and ingenious writing, it provides accessible introductions to many profound theories in mathematical logic, computability theory, artificial intelligence, and other fields. The relaxed, humorous, and flowing prose conceals a wealth of subtext, with ideas cross-referencing and interconnecting, weaving into a complex, invisible network. Readers can’t see it, but they can sense its presence and realize the author has sprayed it deliberately.”

On November 22nd, I purchased the book from Dangdang.

On November 28th, I began reading. Author: [American] Hou Shida. Is the author Chinese? I started reading with this question in mind. Ever since the Jobs biography, I’ve made a point of reading prefaces first. GEB’s preface is 38 pages long.

From the preface, I learned that the Chinese edition of this book was made possible by Professors Wu Yunceng and Ma Xiwen of Peking University. I discovered that Hou Shida is not actually Chinese - he is Douglas Richard Hofstadter. He’s a remarkable person, not only for his achievements in mathematics and computer science, but I personally believe that through his efforts in facilitating GEB translations into multiple languages, he is truly a linguist. “Hou Shida” is the Chinese name he gave himself, and he even wrote a preface for the Chinese edition.

The Chinese edition is by no means a simple English-to-Chinese translation. I believe that given the author’s linguistic mastery, combined with the support of Peking University and the Commercial Press, this book is truly a masterpiece in Chinese, achieving Yan Fu’s three fundamental standards: faithfulness, expressiveness, and elegance. I also appreciate their views on translating scientific papers.

For example: “a man, a plan, a canal: Panama” - should it be translated as “an engineer designed the Panama Canal”? But as a computer science student, I was amazed to discover that this English sentence is a palindrome! So why not use the Chinese palindrome equivalent?

About GEB: Godel, Escher, Bach: an Eternal Golden Braid

The Chinese title: the initials of the Chinese transliteration correspond to the English acronym GEB.

Oh, and there’s another artistic touch:

The 3D projections of these two small blocks spell out GEB and EGB (the second half of the book).

The Peking University translation team went even further: the Chinese title embeds both the Chinese and English GEB.

Thursday, December 6, 2012 - Introduction: A Musico-Logical Offering

I’ve been too busy lately. After finishing the Steve Jobs biography and “On the Crest of the Wave,” I wanted to focus on GEB. But on one hand I was too busy, and on the other, I realized that apart from having some foundation in computer science, I’m really clueless about other fields, especially music. Unlike the previous two books, GEB requires you to actively think and understand. It’s filled with logical proofs, paradoxes that appear at every turn, and casual references to palindromes in computer science, isomorphism in discrete mathematics, and rest vs. motion in physics.

Today I finally finished the introduction. The introduction revolves around Bach’s Musical Offering, cleverly titled “A Musico-Logical Offering,” and then discusses Bach, Escher, and Godel - three great masters.

Canon and Fugue:

As a music novice, I had only heard of canons before - I’d never even heard of fugues. But when you try to understand them, you realize Bach was truly a genius. From the perspective of symmetrical beauty, even without hearing his compositions, looking at their structure alone, you can tell they must be beautiful.

The fundamental concept of a canon is a single theme accompanied by itself. Different voices enter and each presents a “copy” of the theme. The simplest form is a round. More complex canons become increasingly intricate, interweaving not only in time but also in pitch. The first voice might present the theme in C, while the second voice enters with the same theme in G (a fifth above C), and the third in D (a fifth above G) - creating something like an arithmetic sequence. Just looking at this structure, I can tell it would sound wonderful. There’s an even more complex technique called inversion, which produces a melody that jumps down whenever the original theme jumps up, by the same number of semitones. Then comes the most magical part - retrograde. The theme is played backwards in time, creating what’s called a crab canon. Every type of copy preserves the information of the original theme, and the theme can be recovered from any copy. This information-preserving transformation is called isomorphism.

Just on Thursday, my professor asked me what graph isomorphism is. I said it can be “stamped over”! Then what about subgraph isomorphism?

Fugues are similar to canons but less strict.

To transition to the great artist Escher, I must mention the endlessly rising canon. This canon begins in C major, but by the time it nears the end, it’s in D minor - a fifth higher, a change so subtle that listeners barely notice. At the so-called “ending,” Bach cleverly loops it back to the beginning, creating an endless cycle.

“Seek, and ye shall find.”

If Bach played this endlessly rising strange loop, then Escher painted it! The image below is “Waterfall,” where six distinct stages demonstrate the strange loop.

“Ascending and Descending” demonstrates the strange loop in just four stages, though more loosely.

Thursday, December 7, 2012 - Introduction: A Musico-Logical Offering

Now let’s talk about the greatest mathematician, Godel. The strange loops of Bach and Escher contain a conflict between the finite and the infinite, with a strong sense of paradox. Is there something wrong with mathematics?

There’s a paradox called the Epimenides paradox: Epimenides was a Cretan who said, “All Cretans are liars.”

This statement can be understood as: “This sentence is false.”

If you assume it’s true, it concludes that it’s false. If you assume it’s false, it concludes that it’s true.

In 1931, Godel published Godel’s theorem, which in essence states that no matter what axiomatic system you design, provability is always weaker than truth.

Everything can perhaps be understood as originating from the strange loop of “self-reference.” Or a loop, like the following example with two sentences:

The sentence below is false.

The sentence above is true.

Russell and Whitehead devoted themselves to eliminating such strange loops. “Principia Mathematica” is a rather peculiar bottom-up axiomatic system that appears to eliminate strange loops.

Hilbert’s Program:

Hilbert hoped someone could prove that Principia Mathematica was both consistent and complete - that is, internally contradiction-free while being able to prove all theorems within it. This has a flavor of circular reasoning, somewhat like forcing someone to lift themselves up by their own bootstraps.

Unfortunately, Godel proved that “no axiomatic system can produce all number-theoretic truths, unless it is an inconsistent system.”

Now let’s discuss what intelligence is:

Responding flexibly to situations.
Taking advantage of opportunities.
Making sense of ambiguous or contradictory information.
Recognizing what is important in a situation and what is secondary.
Finding similarities between situations despite differences.
Finding differences between things connected by similarities.
Synthesizing new concepts from old ones, combining them in new ways.
Coming up with entirely new ideas.

Friday, December 8, 2012 - Three-Part Invention: The MU Puzzle

Now let’s discuss history’s most famous Zeno’s paradox: motion is impossible.

The swift-footed Achilles wants to chase a tortoise. He gives the tortoise a 10-meter head start. Every time Achilles covers half the remaining distance, the tortoise moves forward some distance. So Achilles keeps closing the gap but can never catch the tortoise.

A more general understanding of this paradox: a person walks from point A to point B, each time covering one-tenth of the remaining distance, so they can never reach point B.

The key issue in this paradox is time. Assume the distance is 10 meters and the speed is 10 meters per second. The reason they can’t arrive is that each step takes 0.1, 0.01, 0.001… seconds. The total is only 0.11111… seconds, not even 1 second, so of course they can’t make it.

Later I looked up more about Zeno’s paradoxes. Besides Achilles and the tortoise, there’s also the “flying arrow” example. I won’t describe it in detail here, but I think the physics principle that “rest is relative, motion is absolute” can explain this paradox.

A distinctive feature of this book is that at the beginning of each new chapter, the author uses Achilles and the Tortoise to have a conversation as a way to introduce the topic.

Chapter 1 covers the MU puzzle. With a foundation in discrete mathematics and mathematical logic, it’s not too difficult to understand. But there are indeed many clever and thought-provoking aspects.

Starting string: MI. Goal: construct the target string MU.

The rules:

If a string you own ends in I, you can add a U at the end.
If you have Mx, then Mxx is also yours.
If III appears in one of your strings, you can replace III with U to get a new string.
If UU appears in your string, you can drop it.

The difference between humans and machines when constructing MU: machines don’t get tired but they can’t think, so they’ll keep searching according to the rules. Humans are different - they use insight to search for the string, or complain that it can’t be found.

More directly, humans have the ability to jump out! To step outside the system and look at something else. Machines can’t do this.

Decision procedure: We define a decision procedure as one that determines, in finite time, whether a string is a theorem or not. Generally speaking, we can derive whether a string is a theorem, but it might take infinite time.

Suppose there’s a demon with unlimited time. If it were to solve the MU puzzle, it might:

Apply every applicable rule to the axiom MI, producing two new theorems: MIU, MIII.
Apply all applicable rules to the theorems from step 1, producing new theorems: MIIU, MIUIU, and MIIII.
Apply the same rules to the theorems from step 2, producing more new theorems.
…

What the Tortoise said to Achilles.

This conversation may seem absurd, but it gave me a kind of revelation - even a shock! What does it mean to prove! To reason! To infer! I also witnessed the power of hypothetical propositions.

Here’s a small fragment of an argument:

Things that are equal to the same thing are also equal to each other.
The two sides of this triangle are equal to the same thing.
The two sides of this triangle are equal to each other.

Readers of Euclid would consider Z a logical conclusion, so anyone who accepts A and B as true must accept Z as true.

But consider two objections:

Someone who doesn’t accept A and B as true, but agrees that “if A and B are true, then Z is true.”
Someone who accepts A and B as true, but doesn’t accept that “if A and B are true, then Z is true.”

Case 1 is understandable; let’s set it aside for now.

Let’s discuss case 2: how would you try to convince someone holding view 2 to accept the argument A-B-Z?

Let’s try this approach:

Define the hypothetical proposition “if A and B are true, then Z is true” as proposition C.

Does the following proof work?

A B C Z

OK! But what about someone who questions the hypothetical proposition “if A, B, and C are true, then Z is true”?

Do we need to define yet another hypothetical proposition D? An infinite loop? Doesn’t this remind you of Bach’s endlessly rising canon?

What a delightful introductory example!

Let’s define a simple system: the pq system:

Three symbols: p q -

Definition of axioms: As long as x consists solely of a string of hyphens, then x-qxp- is an axiom.

Rule: Assuming x, y, and z each represent specific strings containing only hyphens, and assuming xqypz is a known axiom, then x-qypz- is a theorem.

Given a string, how do you determine whether it’s a theorem?

Bottom-up: this method is similar to the MU puzzle approach described earlier and won’t be elaborated here.
Top-down: repeatedly find its predecessor string according to the rules, and verify whether that string is an axiom. (Of course, we have an obvious way to determine whether a string is an axiom - otherwise, as Hofstadter says, all hope would be lost.)

Upon careful study of the pq system, through insight one can discover a pattern: if it’s a theorem, it must be of the form xqypz, where |x| = |y| + |z|.

In fact, this is something mentioned earlier in these notes called isomorphism: two complex structures can be mapped to each other, with every part of each structure having a corresponding part in the other. We’ve assigned real-world meaning to a series of simple symbols: addition.

This is our own projection, of course. You could say q corresponds to “horse,” p to “happiness,” and - to “apple.” But the resulting theorems would be bizarre statements about horses, happiness, and apples with no real-world significance. Of course, our system is predefined - we can’t assume that just because it can represent addition, we can fantasize that x-q-x-p-x- is a theorem because 6 = 2+2+2. That’s correct in real life but clearly doesn’t hold in our pq system.

This isomorphism isn’t unique either - for instance, you could map q to subtraction and p to the equals sign, and it would also work. These simple but (in my view) fascinating examples show us the difference between formal systems and reality.

Finally, here’s the example that shocked me the most:

What is 12 times 12? 144? Correct! If we doubt it, we can count the cells in a 12-by-12 grid.

But what about 123456789 times 987654321? We can’t exactly count that. Who can say the value is truly what it is? How do you prove it?

Here’s a theorem called Euclid’s theorem: regarding the proposition that there are infinitely many prime numbers, no counting process can prove its truth or falsity. No matter how many primes we count, we can never determine whether the number of primes is finite or infinite.

Euclid gave a brilliant proof - at least I think everyone thought so at the time and for a long time after.

Pick a number N, compute N!, then form a new number N!+1. This number is not divisible by any number from 2, 3, 4, 5, 6, 7, 8, 9, … N.

There are only two outcomes: N!+1 is either itself a prime, or its smallest prime factor is greater than N. In either case, we’ve found a prime larger than N.

So when we want to bypass the concept of infinity to prove something, we can use words like “all” - finite in themselves but embodying the concept of infinity.

Let’s look at one of Escher’s tessellations.

Reflections on My First Interview (as Interviewer)

Tue, 21 Jul 2015 16:08:32 +0000

After being on the other side of the table many times, I finally got to conduct an interview myself. Although I’m still a junior developer, I still want to document this experience.

Overall, I didn’t speak at first, but when I noticed the candidate’s resume mentioned the TP framework and Yii framework, I couldn’t help asking a few questions about how these frameworks handle XSS and CSRF prevention.

When the conversation turned to how to determine whether two numbers in an array sum up to a target value, I asked a few more questions.

All in all, I’m fairly satisfied with my first interview. However, I might have been a bit too aggressive in my questioning. I should take note and work on improving that :).

[Yii] Defending Against CSRF and XSS in Yii [Part 2]

Tue, 21 Jul 2015 16:04:21 +0000

I previously wrote Defending Against CSRF and XSS in Yii [Part 1], but when it came to actual testing, there was a requirement to filter out special characters such as :, :, “, <, >, %, etc.

Yii’s CHtml::purifier actually only filters HTML, and CHtml::encode essentially calls htmlspecialchars:

htmlspecialchars only converts <, >, single quotes, double quotes, and &
htmlentities converts all HTML entities

As you can see, PHP’s built-in functions cannot filter all special characters. The approach I took was to create a new Filter class within the Yii framework and write a custom specialchar function, allowing you to replace characters as needed. For better performance, it can be defined as public static.

1
2
3
4
5
6
7


class Filter {
 public static function ReplaceSpecialChar($str) {
 $str=str_replace(":",$str); //TODO: replace other chars
 $str = htmlspecialchars($str);
 return $str;
 }
}

[Yii] Defending Against CSRF and XSS in Yii [Part 1]

Sun, 19 Jul 2015 02:59:44 +0000

CSRF stands for Cross-Site Request Forgery, and XSS stands for Cross-Site Scripting. To be honest, I only recently encountered these for the first time. After building a website with Yii and scanning it with testing software (e.g., IBM AppScan), two relatively common and serious issues were found: CSRF and XSS. So how do we fix them?

– CSRF

Reference: http://www.crarun.com/article-7.html

Yii supports CSRF configuration in its config file. Once configured, it embeds a hidden token with a hash key value in forms, and the server verifies whether each request is authorized through this token.

1
2
3
4
5
6


'components'=>array(
 'request'=>array(
 // Enable Yii Validate CSRF Token
 'enableCsrfValidation' => true,
 ),
),

In practice, because I was using an older version of Yii, the framework didn’t automatically create the input element in forms, so I had no choice but to create it manually by inserting the following code:

1

<input type="hidden" value="<?php echo Yii::app()->getRequest()->getCsrfToken(); ?>" name="YII_CSRF_TOKEN" />

Another issue arose: since CSRF wasn’t considered thoroughly early on, the entire system contained numerous AJAX POST requests, meaning lots of JS code had POST submissions. However, Yii’s view rendering doesn’t affect code inside .js files - even if you add the above code in a .js file, PHP won’t produce any output. So I came up with a workaround:

Add the following code to JS POST submissions:

1

$("input[name='YII_CSRF_TOKEN']").val()

Then add the hidden input in the PHP view. However, this also reveals a limitation - it doesn’t fully prevent CSRF. The optimal solution would be to embed authorization in each user’s session.

– XSS

When searching for solutions to this problem, a common question is: at which stage should string filtering be done - submission, storage, or display? I saw an answer on SegmentFault that said both are essential: one prevents malicious data from entering the database, and the other prevents it from being executed.

In my opinion, front-end user validation during submission is essential for good user experience. However, server-side validation is still a must, since programs can bypass the front end.

Should we also filter during display? I recommend yes - it adds an extra layer of safety to prevent attacks from taking effect.

How to do it? Yii provides CHtml and CHTMLPurifier for filtering. On GitHub, many people have open-sourced good front-end libraries for filtering - just search for them.

CoinJS - An Open Source Web Component Library

Fri, 03 Jul 2015 17:06:30 +0000

I’ve been building my own open-source web component library recently, keeping it as simple as possible for my own learning, while also sharing some insights with other beginners. GitHub download link: https://github.com/hujiulin/coinjs

- ProgressBar

- ScrollImage (Scrolling Images)

Written on the Zeroth Anniversary of Graduation

Fri, 03 Jul 2015 16:55:39 +0000

I’ve been so busy lately with graduation, moving, and starting a new job that I haven’t had a chance to sit down and write properly. I feel like I’ve become a full-fledged househusband - buying appliances, grocery shopping, cooking, getting takeout, doing housework, the whole nine yards.

I recently posted something on social media: “Once this door closes today, it’ll be two different worlds from now on.”

The zeroth anniversary of graduation marks the end of my 23-year student career (my mom says I started kindergarten at two and a half) and the beginning of year zero of my working life. Over the past year-plus of job hunting, I’ve been through the wringer - weathered all kinds of storms - but gradually got used to it.

What is growing up?

Growing up means:

When you walk into a supermarket, you discover that even the cheapest bottle of cooking oil costs 30-40+ yuan; a single bowl costs 10 yuan. You learn to budget carefully.
You boil an egg first thing in the morning.
When cycling, don’t wear a backpack - it makes your back sweat like crazy. Just put it in the basket.
You can tell the difference between electric bikes with removable lithium batteries and those with non-removable lead-acid batteries. The lithium battery ones don’t look as nice.
You carefully observe Beijing’s elaborate transportation system and discover there are bike lanes with well-designed merging and diverging. Follow the bike lanes and you can ride smoothly to your destination, even through overpasses. This is probably a lot like life itself.
You can soak the shower head in diluted disinfectant for effective sterilization.
Yeah, I’m just broke.

I don’t know what the future holds. I’ve been wanting to learn Android development lately and check out the book “First Line of Code.” But whatever path lies ahead, I chose it, and I’ll see it through even if I have to crawl.

Finally, a note to myself: as long as your spirit never dies, life will keep running forward.

– DevHu, recorded on July 4, 2015, at a rented apartment.

Cleaning Your Computer with CCleaner

Sun, 21 Jun 2015 07:33:06 +0000

A major life transition is coming - graduation. There’s a computer in the lab that’s been mine to use, and I wanted to give it a thorough clean before I leave. I heard about a tool called CCleaner, tried it out, and it works quite well. It can conveniently clean up Windows | Mac | Android | iPhone devices.

On Windows, you can perform:

Windows and application cleanup
Registry cleanup
Software uninstallation and disk wiping

Travel Guide - Yunnan

Sat, 20 Jun 2015 10:41:51 +0000

This trip was our graduation trip. After some bumpy arguments and planning (I was worried about MERS; and since my second year of grad school I haven’t been a fan of flying, with the flight distance being over ten thousand kilometers), we finally decided on Yunnan.

Transportation

We chose the route Beijing - Kunming - Dali - Kunming - Beijing. Since I basically only fly with Air China, and Air China doesn’t have direct flights to Dali’s Huangcao Airport, we had to make a transfer, which was quite inconvenient. My suggestion: try to book direct round-trip flights whenever possible.

If you’re traveling from Kunming, there are two options: bus or train. We took the bus both ways. The fare was around 136 yuan, about 5 hours (Dali Xingsheng Bus Station to Kunming West Bus Station). Unfortunately, we hit a 2-hour traffic jam on the way there. The train takes 7-8 hours. Some people recommend taking the overnight train. Once you arrive in Dali, you can take public buses, which are very cheap at around 1.5 or 2 yuan, from Xiaguan to the Old Town. If it’s too late, you can ask the inn to pick you up.

Accommodation

If you have the budget, you could stay in Shuanglang, but we checked and it wasn’t very convenient. My suggestion is to stay in the Old Town, which is quite affordable, generally 80-130 yuan per night. We stayed at Mengxingu Inn. It was quite nice - they had a dog, really cute. I was scared at first, but later found it to be very gentle.

On the last night, we stayed at 1969 Seaside Inn. It was quite expensive, had no TV, and the water pressure was low. But the environment was absolutely stunning.

Sightseeing

You can stroll around the Old Town - it’s very relaxing.

You can ride bikes along Erhai West Road.

Finally, a few words of reflection: happy graduation. The road ahead is long - take it one step at a time.

[Redis] Configuring Redis in Yii - Common Issues

Fri, 12 Jun 2015 06:24:58 +0000

Basic configuration:

In Yii’s main.php:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


return array(
 ...
 'components'=>array(
 'redis_cache' => array (
 'class' => 'system.caching.CRedisCache',
 'hostname' =>'127.0.0.1',
 'port' => 6379,
 'password'=>'123456',
 'database'=>1
 ),
 ),
 ...
)

Notes:
The CRedisCache in the class field is the official Redis plugin;
The password field is required if a password has been set;
The database field specifies the corresponding database.

Usage:
$r_key = “key”;
Yii::app()->redis_cache->set($r_key, 99999);
echo Yii::app()->redis_cache->get($r_key);

However, you won’t find a key named “key” in the Redis database, because Yii’s Redis plugin applies MD5 hashing to keys by default.
By examining CCache, the parent class of CRedisCache, you’ll find that you need to declare the following two variables in CRedisCache.php:

1
2


public $hashKey = false;
public $keyPrefix = "";

This solves the problem.

Additionally, if you encounter garbled Chinese characters, it’s because Redis defaults to ANSI encoding. When connecting, use the following command:
./redis-cli –raw -h 127.0.0.1
to connect.

For official documentation, see: http://www.yiiframework.com/doc/api/1.1/CRedisCache/.

Online QR Code Generator

Sat, 30 May 2015 03:19:13 +0000

Sharing a simple online QR code generator I wrote. Click the link below:

Online QR Code Generator

[HTML] Differences and Connections Between DIV and Table Page Layouts

Sat, 23 May 2015 05:38:17 +0000

Differences and Connections Between DIV and Table Page Layouts

There is currently a debate over whether to use traditional Table or the newer DIV for web page design. Some say Table is better – faster to develop, easier to control, and better browser compatibility. Others believe DIV is better and represents the future trend, mainly for the following reasons:

DIV+CSS layouts save page code compared to Table layouts, and the code structure is cleaner and more readable.
DIV+CSS development is faster than Table with more precise layouts, though hand-written code increases noticeably. DIV+CSS layouts make website layout modifications simpler.
DIV+CSS layouts can adapt to future multi-client requirements.
DIV+CSS layouts save site storage space and bandwidth. These are all advantages of DIV.

With so many benefits of DIV, you might be tempted to learn it. DIV and Table each have their strengths, and in most cases they can be used interchangeably. I believe the correct standards-compliant design philosophy is: use DIV and other layout elements to create page design layouts, positioning, color blocks, images, etc. Use Table, UL, and similar elements to display data on the page. Because DIV does not behave like Table in IE, where the entire Table must be downloaded before any content is displayed (Firefox does not have this issue), using Table for layout is clearly not ideal, especially with large amounts of data – it is noticeably slower in IE. DIV handles this much better. Of course, DIV can also serve to organize data.

DIV for layout, Table for displaying data – this is the most fundamental design principle today.

Can a Table contain a DIV? And vice versa, can a DIV contain a Table?
Of course it can.
Does DIV serve the same purpose as Table?
DIV’s functionality is similar to Table, but DIV has better XML support and is more flexible to use, which is why it is recommended as the new approach for web page layout.
Which is faster, DIV or Table?
DIV is relatively faster. Web content display requires downloading a complete block of content before rendering. DIV layout consists of many independent, relatively small blocks, while Table layout typically involves multiple layers of nested tables forming larger download blocks.

Additionally, the difference between . and # in CSS:

. is called using class
# is called using id

[Discuz] Forum Invitation Codes

Sat, 23 May 2015 05:37:16 +0000

Whether the forum has invitation code registration enabled
Go to Admin Panel => Global => Registration & Access => Registration. Configure whether to enable invitation-based registration, the extended credits used for invitation rewards, the credit amounts for both the inviter and invitee, and whether successful invitation registrations automatically add each other as friends.
Edit administrator permissions
Users => User Groups => Others => Registration related
Purchase invitation codes and view them on the friends page

[nginx] Starting, Stopping, and Restarting Nginx on Linux

Sat, 23 May 2015 05:36:29 +0000

Starting Nginx

1

/usr/nginx/sbin/nginx

1

/usr/nginx/sbin/nginx -t

Check whether the configuration is correct.

Stopping Nginx

Stopping is done by sending signals to the nginx process (for more about signals, refer to Linux documentation).

Step 1: Find the nginx master process ID

1

ps -ef | grep nginx

Find the master process in the process list – its number is the master process ID.

Step 2: Send a signal

Graceful shutdown:
1

kill -QUIT master_process_id
Fast shutdown:
1

kill -TERM master_process_id
Forced shutdown:
1

pkill -9 nginx

Additionally, if the pid file path is configured in nginx.conf, that file contains the Nginx master process ID. If not specified, it is stored in nginx’s logs directory. With the pid file, you don’t need to look up the master process ID first and can send signals to Nginx directly:

1

kill -signal_type '/usr/nginx/logs/nginx.pid'

Graceful Restart

If you changed the configuration, do you need to stop Nginx and start it again? No – you can send a signal to Nginx for a graceful restart.

Graceful restart command:

1

kill -HUP master_process_id_or_pid_file_path

Or use:

1

/usr/nginx/sbin/nginx -s reload

Note: After modifying the configuration file, it’s best to check whether the modified configuration is correct first, to avoid errors after restart that could affect server stability. The command to check Nginx configuration:

1

nginx -t -c /usr/nginx/conf/nginx.conf

Or:

1

/usr/nginx/sbin/nginx -t

[HTML] Passing Values in HTML

Sat, 23 May 2015 05:35:22 +0000

In JavaScript, you can use the window.location.href property to get the full URL. This means we can pass parameters using GET mode, i.e., the form’s method="GET".

Below is a JavaScript function that retrieves values submitted via GET mode.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


function Request(strName) {
 var strHref = window.document.location.href;
 var intPos = strHref.indexOf("?");
 var strRight = strHref.substr(intPos + 1);

 var arrTmp = strRight.split("&");
 for (var i = 0; i < arrTmp.length; i++) {
 var arrTemp = arrTmp[i].split("=");
 if (arrTemp[0].toUpperCase() == strName.toUpperCase()) return arrTemp[1];
 }
 return "";
}

Usage:
var id=Request("id");
document.write(id);

[Apache] Virtual Host Configuration for Multi-Domain Access to Local PHP Projects

Sat, 23 May 2015 05:34:23 +0000

First, modify the hosts file located at C:\WINDOWS\system32\drivers\etc. Open it with Notepad and add:
1 2

127.0.0.1 www.a.com 127.0.0.1 www.b.com
Open the file xampp\apache\conf\httpd.conf, search for “Include conf/extra/httpd-vhosts.conf”, and make sure there is no # comment symbol in front of it – this ensures the vhosts virtual host configuration file is included.

Once httpd-vhosts.conf is enabled, the default httpd.conf configuration becomes inactive (make sure virtual host configuration is also enabled in httpd-vhosts.conf, see step 3). All domain requests to this IP will be directed to the first virtual host in vhosts.conf.
In the virtual host configuration file xampp\apache\conf\extra\httpd-vhosts.conf:
Remove the ## before NameVirtualHost *:80 to enable vhosts.conf. The default httpd.conf configuration becomes inactive, and virtual host settings will only be configured in httpd-vhosts.conf.
1 2

DocumentRoot /xampp/htdocs/a ServerName www.a.com
1 2

DocumentRoot /xampp/htdocs/b ServerName www.b.com
After completing step 3, you will notice that accessing localhost redirects to the path configured for site a. This is explained in step 2 – once vhosts is enabled, the default httpd configuration becomes inactive, and the default access points to the first entry in vhosts. To fix this, you need to add the localhost directory configuration back.
1 2

DocumentRoot /xampp/htdocs/ ServerName localhost

With this, the XAMPP virtual host setup is complete. Now accessing localhost still shows the original XAMPP welcome page, accessing www.a.com points to the bound directory a, and accessing www.b.com points to the bound directory b.

[VPN] Configuration Guide

Sat, 23 May 2015 05:33:34 +0000

Setting Up on Windows XP:

Start – Control Panel – Administrative Tools – Services – Start four key services (Workstation, Telephony, Remote Access Connection Manager, Routing and Remote Access) and set them to start automatically – Control Panel – Network Connections – Incoming Connections – General tab (check: Virtual Private Network, allow others to establish a private connection to my computer via the Internet or other networks through “tunneling”) – Users tab (check which users can connect remotely via VPN) – Network tab (TCP/IP address assignment: manually specify an IP address in a different subnet from the server, e.g., if the server IP is in the 192.168.1.x range, enter an address in the 192.168.2.x range here).

Finding the server’s external IP address:

Direct dial-up – Start – Control Panel – Network Connections – Local Area Connection – Support – IP Address: something like “58.60._.133”.
Router dial-up – Enter the router’s IP address (local network gateway) in IE browser – Find the router’s IP address: something like “58.60._.133”.

Windows XP Client Connection Setup:

Start – Control Panel – Network Connections – Create a new network connection – Next – Connect to the network at my workplace – Virtual Private Network connection (V) – Give it a name: VPN – Do not dial the initial connection – Enter the server’s IP address or domain name, IP address like “58.60.*.133” – Finish.

Client Connection:

Start – Control Panel – Network Connections – Under Virtual Private Network you can see the VPN dial-up you just set up – Double-click to connect.
Once connected, your machine will be on the same local network as the server.

Common VPN Dial-up Errors:

VPN 800 error: The server’s external IP address is incorrect or DMZ is not configured.
VPN 628 error or VPN 721 error: The client and server’s external WAN port are the same. The two computers are on the same LAN under the same ADSL connection. In this case, you can enter the server’s (target host’s) internal IP address to test the connection.
VPN 733 error: TCP/IP CP reported an error. The server and client’s incoming IP addresses are in the same subnet. Set the server to manual assignment (Control Panel – Network Connections – Incoming Connections – Network tab – TCP/IP address assignment: manually specify an IP address in a different subnet from the server, e.g., if the server IP is in the 192.168.1.x range, enter an address in the 192.168.2.x range here).

Someone in the lab was around yesterday, and I tried it today – it works like a charm.

[MapService] How to Embed Maps in Your Own Web Pages

Sat, 23 May 2015 05:32:44 +0000

To embed a map in your own web page, the common methods can be summarized as follows:

The Simplest Method – Using Google Maps’ “Link” Feature

If you only need to display a specific area on your page, such as your company’s location, without adding any extra content like markers or polylines, this is the easiest way to embed Google Maps.

Go to the Google Maps homepage, navigate to the area you want to display, then click “Link” in the upper left corner of the map. An info box will appear with two input fields – copy the content from the second input field into your page and you’re done.

This embed code is essentially an iframe declaration. Although the Maps homepage provides a customization and preview feature, it only allows you to customize the map size. If needed, you can manually modify the iframe declaration for further customization, such as adding custom styles to the iframe.
The Most Lightweight Method – Using Google Static Maps

If you need to display a specific area and add some markers or polylines, but don’t care whether the map on your page is draggable, then static maps are what you need.

A static map means what you embed in your page is actually just a GIF image, dynamically fetched from Google via a URL. This differs from the “dynamic” maps we commonly use, and loading such a map is much faster than loading a full interactive map.

To use a static map on your page, simply use an img tag and set its src attribute to the Google Static Maps URL.

Here’s a simple static map URL:
1

http://ditu.google.cn/staticmap?center=39.970981,116.314108&zoom=16&size=400×400&key=YOUR_API_KEY
In this URL, you can edit parameters like center, zoom, and size to specify the map’s center point, zoom level, map dimensions, and more. Of course, you can also add parameters for markers and polylines. Don’t worry about memorizing all these parameters – there’s a static map customization wizard that guides you through a few simple steps to get the URL you need. If interested, you can explore the Google Static Maps API documentation.

Strictly speaking, Google Static Maps is also a type of Google Maps API, so using static maps requires your Google Maps API key. If you’ve already registered a Maps API key, you can simply reuse it.
The Most Flexible Method – Using the Google Maps API

If neither of the above methods meets your needs, try the Google Maps API. Although the Google Maps API has been divided into JavaScript, Flash, Earth, Static, and other versions, in my view, the JavaScript API is the foundation of the Google Maps API. So unless otherwise specified, “Google Maps API” here refers to the Google Maps JavaScript API. With this API, you can display your data on the map in any feasible way you like, and you can even make your own map look better than Google Maps itself.

To embed a map in your page using this API, the basic steps are:
1. Import the Maps API library using a JavaScript tag;
2. Define an element on the page to hold the map, typically a div tag with specified width and height;
3. In your JavaScript code: new GMap2(document.getElementById("your map container's id"));
4. Use classes provided by the API such as GMarker, GPolyline, etc. to customize the markers, polylines, and other elements on the map.
For a detailed guide on creating Google Maps, see the “Creating Maps with JavaScript Guide” above. However, to use this API proficiently, you need a certain level of JavaScript knowledge and hands-on ability. Additionally, it’s strongly recommended to read the Google Maps JavaScript API Developer Guide first, which can answer many common questions. Of course, you can also find the information you’re looking for in this documentation.

Beyond the methods described above, there are some less commonly used ways to embed maps in web pages, which won’t be covered here.

[HTML] Preventing Duplicate Form Submission on F5 Refresh

Sat, 23 May 2015 05:30:50 +0000

Page A has a form.
You submit this page and are redirected to page B.
On page B, pressing the refresh key will trigger a dialog asking to resend the form data.

This problem can be solved from the web development perspective.
Page A submits to your server page (ASP, JSP).
The server page processes the request but does not return page B to the user directly.
Instead, it returns a simple page C, such as a redirect page.

This immediately redirects to page B – in this case, main.jsp.

If you refresh on page B, the resend dialog will not appear.
If you press “Back” on page B, you will go back to page A.
The user will not notice the intermediate page C at all.

Going further, you can design a JavaScript dialog box that, once confirmed, will not pop up again regardless of whether the user refreshes or navigates back.
redirect.jsp

[JSP] Free JSP Hosting

Sat, 23 May 2015 05:29:00 +0000

When a JSP website is ready to be published, it can be a headache for individuals or students without a budget.
I encountered this problem too. After searching online, I found two helpful blog posts:
Recommending a free JSP hosting service: http://fireinwind.iteye.com/blog/705611

This blog post introduced me to two free JSP hosting options: jhost and EATJ.
Here are my thoughts on using these two free hosting services – free services inevitably have drawbacks. For example, jhost is extremely slow to access from the campus network, and uploading files takes forever. EATJ’s drawback is that it shuts down your server every six hours each day, and you have to restart it manually (shutdown times are 4:00, 10:00, 14:00, 18:00, and 24:00).

So I recommend using EATJ when you don’t have a budget in the early stages. The speed is decent and it works well enough – the only downside is having to restart the server. It is perfectly suitable for testing purposes.

As for jhost, it has a better user experience, designed with a desktop OS-style interface for easier management, but it is slow.

For detailed instructions on how to use these two hosting services, see the blog post:

jsp php enthusiasts’ good news: eatj and jhost

Note: Applying for jhost is somewhat complicated and requires an invitation code. You can search for “jhost invitation code” online.

After activating your account, log in to the hosting backend and activate your Website Hosting Service in the Control Panel.

Site policy: Regular users must log in and renew at least once every 3 days (click the Renew button in the Member Service Management section of the Control Panel) to confirm you are still using the service.
Additionally, the site periodically suspends the TOMCAT service for users who have not renewed within the specified time. The next renewal will restart the service. If you do not renew for over a month, your account will be deactivated.

You can extend your hosting usage period or redeem other services through site credits. Credits can be earned by referring users or purchased with cash. See the site’s help section for details.

[Beauty of Programming 2.9] Fibonacci Sequence

Sat, 23 May 2015 05:20:58 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


int Fibonacci(int n)
{
 if (1 == n)
 {
 return 1;
 }
 if (2 == n)
 {
 return 2;
 }
 return Fibonacci(n-1) + Fibonacci(n-2);
}

int FibonacciIteration (int n)
{
 int a = 1;
 int b = 2;
 if (n == 1)
 return a;
 if (n == 2)
 return b;
 for (int i = 3; i <= n; i++)
 {
 int now = a + b;
 a = b;
 b = now;
 }
 return b;
}

The book mentions a method: fi = fi-1 + fi-2 => converted into matrix form

[Beauty of Programming 2.9] Fibonacci Sequence
Time complexity: O(log2n).

[Beauty of Programming 2.8] Finding Integers That Meet the Criteria

Sat, 23 May 2015 05:19:47 +0000

The problem is simple: given an integer n, find the smallest m such that n*m contains only the digits 0 and 1 in its decimal representation.

Method 1: Brute Force [Need to consider large integers, termination conditions, and time complexity]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


bool CheckNumber(int number)
{
 while(number)
 {
 if (number%10 != 0 && number%10 != 1)
 return false;
 number /= 10;
 }
 return true;
}

int CalcMBruteForce(int n)
{
 int m = 1;
 while (!CheckNumber(m * n))
 {
 m++;
 }
 return m;
}

Method 2: BFS [Need to consider large integers, termination conditions, and duplicate elimination]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


int CalcM(int number)
{
 int i = 1;
 vector<int> vList;
 vList.clear();
 vList.push_back(0);
 vList.push_back(1);
 vector<int> vListC;
 int k = 1;
 // TODO:
 // BigInt
 // Delete duplicate
 while (true)
 {
 vListC.clear();
 for (vector<int>::size_type i = 0; i < vList.size(); i++)
 {
 if (vList[i] && vList[i] % number == 0)
 {
 return vList[i];
 }
 vListC.push_back(vList[i] + 0);
 vListC.push_back(vList[i] + (int)pow(10.0, k));
 }
 vList.clear();
 vList = vListC;
 k++;
 }
}

[Beauty of Programming 2.7] The Greatest Common Divisor Problem

Sat, 23 May 2015 05:18:46 +0000

GCD: Greatest Common Divisor – the largest integer that divides both m and n evenly.
Euclid’s algorithm (the Euclidean algorithm) has existed since ancient times:
GCD(x, y) = GCD(x, x%y)
x = k*y + b. If d is the GCD of x and y, then d must also divide b, and d is the GCD of x and b, where b = x%y.
Code:

1
2
3
4
5


// GCD
int GCD(int x, int y)
{
 return y == 0 ? x : GCD(y, x % y);
}

The book “Beauty of Programming” discusses time optimizations:

The modulo operation involves division, which is relatively expensive.
How to optimize for big integers.

[Beauty of Programming 2.6] Exact Representation of Floating Point Numbers

Sat, 23 May 2015 05:17:49 +0000

The code below simplifies the problem to converting a repeating decimal into a fraction. For terminating decimals, you can convert them directly to fractions, but this involves another important concept: finding the greatest common divisor (GCD). The classic method is the Euclidean algorithm.
Code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


// GCD
int GCD(int x, int y)
{
 return y == 0 ? x : GCD(y, x % y);
}

// Simplified conditions
// x: repeating decimal
// n: integer representation of the repeating block
// m: length of the repeating block
// 10^m * x = n + x
// x = n / (10^m - 1)
void FloatNumber(string number)
{
 int start = number.find_first_of('(') + 1;
 int end = number.find_first_of(')');
 string repetend = number.substr(start, end - start);
 int n = atoi(repetend.c_str());
 int m = end - start;
 int d = GCD(n, ((int)pow(10.0, m) - 1));
 cout << n / d << '/' << ((int)pow(10.0, m) - 1) / d << endl;
}

[Beauty of Programming 2.5] Finding the K Largest Numbers

Sat, 23 May 2015 05:16:43 +0000

This problem is equivalent to finding the k-th largest/smallest number.
Method 1: Sort and output directly. [The book “Beauty of Programming” notes that different sorting methods have different time complexities. Indeed, since we don’t need all n numbers sorted – we only need the k largest.]
Using quicksort:

1
2
3
4
5
6


vector<int> FindMostKSort(vector<int>& vNumbers, int k)
{
 sort(vNumbers.begin(),vNumbers.end());
 vector<int> vKNumbers(vNumbers.rbegin(), vNumbers.rbegin() + k);
 return vKNumbers;
}

Method 2: We don’t actually need all numbers sorted. We can simulate the partition step of quicksort to find the element at the k-th position after sorting.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


void swap(int &a, int &b)
{
 int tmp = a;
 a = b;
 b = tmp;
}
void FindMostKPartition(vector<int>& vNumber, int k, int left, int right)
{
 int index = left;
 int tmp = vNumber[index];
 int i = left;
 int j = right;
 while (i < j)
 {
 while(i < j && vNumber[j] >= vNumber[index]) j--;
 swap(vNumber[j], vNumber[index]);
 index = j;
 while(i < j && vNumber[i] <= vNumber[index]) i++;
 swap(vNumber[i], vNumber[index]);
 index = i;
 }
 if (index - left + 1 == k)
 {
 cout << vNumber[index] << endl;
 }
 else if (index - left + 1 < k)
 {
 FindMostKPartition(vNumber, k - (index - left + 1), index + 1, right);
 }
 else
 {
 FindMostKPartition(vNumber, k, left, index - 1);
 }
}

Method 3: Heap sort [maintain a min-heap of size k. The STL code is remarkably short, though you could implement the heap with arrays yourself.]

PS: All sorting uses STL implementations. Implementing sorting from scratch will be attempted in the near future.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


void FindMostKHeap(vector<int>& vNumbers, int k)
{
 vector<int> vKNumbers(vNumbers.begin(), vNumbers.begin() + k);
 make_heap(vKNumbers.begin(), vKNumbers.end(), greater<int>());
 for (vector<int>::size_type i = k; i < vNumbers.size(); i++)
 {
 if (vNumbers[i] > vKNumbers[0])
 {
 vKNumbers[0] = vNumbers[i];
 make_heap(vKNumbers.begin(), vKNumbers.end(), greater<int>());
 }
 }
 cout << vKNumbers[0] << endl;
}

[Beauty of Programming 2.4] Count of Digit 1

Sat, 23 May 2015 05:15:31 +0000

The problem is straightforward: given a positive integer n, count the total number of times the digit 1 appears in all numbers from 1 to n.
For example, for the number 12312, global count += 2 because 1 appears twice. Given input n, we need to compute this for all numbers from 1 to n.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54


int VerifyCountOneNumberAns(int n)
{
 int ans = 0;
 for (int i = 1; i <= n; i++)
 {
 int tmp = i;
 while(tmp)
 {
 if (1 == tmp%10) ans++;
 tmp /= 10;
 }
 }
 return ans;
}
int CountOneNumber(int n)
{
 if (n == 0)
 return 0;
 if (n < 10)
 return 1;
 vector<int> vNumber;
 vNumber.clear();
 int tmp = n;
 while(tmp)
 {
 vNumber.push_back(tmp%10);
 tmp /= 10;
 }
 int count = 0;
 int vSize = vNumber.size();
 count = (vSize - 1) * vNumber[vSize - 1] * (int)pow(10.0, (int)(vSize - 2));
 if (vNumber[vSize - 1] > 1)
 {
 count += (int)pow(10.0, (int)(vSize - 1));
 }
 else
 {
 count += n - vNumber[vSize - 1] * (int)pow(10.0, vSize - 1) + 1;
 }
 count += CountOneNumber(n - vNumber[vSize - 1] * (int)pow(10.0, vSize - 1));
 return count;
}
int main()
{
 vector<int> ids;
 for (int i = 1; i <= 10000; i++)
 {
 int count = CountOneNumber(i);
 int ans = VerifyCountOneNumberAns(i);
 if (ans != count)
 cout << i << '\t' << ans << '\t' << count << endl;
 }
 return 0;
}

The code includes a verification function whose correctness is beyond doubt. The problem also provides a recursive approach, which has acceptable time complexity – it should be proportional to the number of digits.
PS: I’m clearly not great at math; this was quite a struggle. But my logic still works well…

[Beauty of Programming 2.3] Finding the Forum "Spammer"

Sat, 23 May 2015 05:14:27 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


int FindMostIds(vector<int> &ids)
{
 map<int,int> hashIds;
 map<int,int>::iterator it;
 hashIds.clear();
 for (int i = 0; i < ids.size(); i++)
 {
 it = hashIds.find(ids[i]);
 if (hashIds.end() == it)
 {
 hashIds.insert(map<int,int>::value_type(ids[i],1));
 }
 else
 {
 it->second++;
 }
 }
 int id = 0, count = -1;
 for (it = hashIds.begin(); it != hashIds.end(); it++)
 {
 if (it->second > count)
 {
 id = it->first;
 count = it->second;
 }
 }
 return id;
}

This problem can be further optimized in two ways: 1) Optimize the solution itself; 2) If there are 3 “spammers,” each posting more than a quarter of all posts, how do we solve it? It’s late today, heading back to the dorm. I’ll solve it tomorrow – though I already have an idea.
Problem 1:
The book “Beauty of Programming” mentions that space complexity can be optimized to O(1).
After reading the book, here’s the hint:
Use one variable id to store the current ID and count to store the count of that ID, then compare for equality and maintain dynamically. The final id must be the spammer.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


int FindMostIds(vector<int> &ids)
{
 if (ids.size() <= 0)
 return -1;
 int id = ids[0];
 int count = 1;
 for (vector<int>::size_type i = 1; i < ids.size(); i++)
 {
 if (0 == count)
 {
 id = ids[i];
 count = 1;
 continue;
 }
 if (id == ids[i])
 {
 count++;
 }
 else
 {
 count--;
 }
 }
 return id;
}

Problem 2: This can be generalized from the approach in Problem 1, Solution 2: [my own idea, not rigorously tested, but the logic should be correct]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43


void FindMostIds(vector<int> &ids)
{
 if (ids.size() <= 0)
 return ;
 int id[3] = {-1, -1, -1};
 int count[3] = {0, 0, 0};
 for (vector<int>::size_type i = 1; i < ids.size(); i++)
 {
 bool flag = false;
 for (int j = 0; j < 3; j++)
 {
 if (id[j] == ids[i])
 {
 count[j]++;
 flag = true;
 break;
 }
 }
 if (flag) continue;

 flag = false;
 for (int j = 0; j < 3; j++)
 {
 if (count[j] == 0)
 {
 id[j] = ids[i];
 count[j]++;
 flag = true;
 break;
 }
 }
 if (flag) continue;
 for (int j = 0; j < 3; j++)
 {
 count[j]--;
 }
 }
 for (int i = 0; i < 3; i++)
 {
 cout << id[i] << '\t';
 }
 cout << endl;
}

[Beauty of Programming 2.2] Don't Be Scared by Factorials

Sat, 23 May 2015 05:11:00 +0000

The problem asks to count the number of trailing zeros in n!. This is essentially counting how many multiples of 5 are multiplied in during the computation of n!.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


int CountZero(int n)
{
 int cnt = 0;
 for (int i = 1; i <= n; i++)
 {
 int tmp = i;
 while (0 == i % 5)
 {
 cnt++;
 tmp /= 5;
 }
 }
 return cnt;
}

The problem asks for the position of the lowest bit 1 in the binary representation of N!. We can observe that multiplying by odd numbers doesn’t affect the position of 1. Each time we multiply by 2, the entire value shifts left by 1 bit. Therefore, the result depends on the number of times 2 appears as a factor.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


int CountBinaryOne(int n)
{
 int cnt = 0;
 for (int i = 1; i <= n; i++)
 {
 int tmp = i;
 while (0 == tmp % 2)
 {
 cnt++;
 tmp /= 2;
 }
 }
 return cnt;
}

[Beauty of Programming 2.1] Count the Number of 1s in Binary

Sat, 23 May 2015 05:09:14 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


int CountOne(int val)
{
 int cnt = 0;
 while (val)
 {
 val &= val - 1;
 cnt++;
 }
 return cnt;
}

[Beauty of Programming 1] Drawing Curves with CPU Usage

Sat, 23 May 2015 05:06:15 +0000

Getting the CPU to run at full load is actually quite simple – just write an infinite loop and the OS will allocate more and more time slices to it. However, modern processors are multi-core. For example, my computer has 4 cores, so you’ll find the CPU stays around 25-27% and never reaches 100%.

To reach 100%, you just need to use multithreading.

The most provocative statement I saw today was:

“I dare you to make the CPU draw a circle.” I was completely stunned at that moment…

Now let’s look at the 50% case. The book “Beauty of Programming” says that alternating between “sleep for one time slice, work for one time slice” should achieve 50%. But I found the results were not great. Even using GetTickCount, the effect was poor because the computer has other programs running as well.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39


void Work(DWORD time)
{
 DWORD now = GetTickCount();
 for(;GetTickCount() <<- endstream>> now + time;)
 {
 }
}
DWORD WINAPI DrawThread(LPVOID lParam)
{
 double deta = 0.1f;
 while (true)
 {
 double time = 500 + 500 * sin(deta);
 Work(time);
 Sleep(1000-time);
 deta += 0.1f;
 }
 return 0;
}
int main()
{
 HANDLE hThread[4];
 DWORD idThread[4];
 hThread[0] = CreateThread(0,0,DrawThread,NULL,0,& idThread[0]);
 hThread[1] = CreateThread(0,0,DrawThread,NULL,0,& idThread[1]);
 hThread[2] = CreateThread(0,0,DrawThread,NULL,0,& idThread[2]);
 hThread[3] = CreateThread(0,0,DrawThread,NULL,0,& idThread[3]);
 SetThreadAffinityMask(hThread[0], 0x00000001);
 SetThreadAffinityMask(hThread[1], 0x00000010);
 SetThreadAffinityMask(hThread[2], 0x00000100);
 SetThreadAffinityMask(hThread[3], 0x00001000);

 WaitForSingleObject(hThread[0], INFINITE);
 WaitForSingleObject(hThread[1], INFINITE);
 WaitForSingleObject(hThread[2], INFINITE);
 WaitForSingleObject(hThread[3], INFINITE);

 return 0;
}

[leetcode_151]Reverse Words in a String

Sat, 23 May 2015 03:22:13 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47


class Solution
{
public:
 int getFirstLetter(string &s,int start)
 {
 int i;
 for(i = start;i < s.length();i++)
 {
 if(s[i] != ' ')return i;
 }
 return i;
 }
 int getFirstBlank(string &s,int start)
 {
 int i;
 for(i = start;i < s.length();i++)
 {
 if(s[i] == ' ')return i;
 }
 return i;
 }
 void reverseWords(string &s) {
 vector<string> splits;
 splits.clear();
 int i = 0;
 while(i < s.length())
 {
 i = getFirstLetter(s,i);
 if(i >= s.length())break;
 int next = getFirstBlank(s,i+1);
 if(next >= s.length())
 {
 next = s.length()-1;
 splits.push_back(s.substr(i,next-i+1));
 break;
 }
 splits.push_back(s.substr(i,next-i));
 i = next;
 }
 s = "";
 for(int i = splits.size()-1;i >= 0;i--)
 {
 s += splits[i];
 if(i != 0)s += " ";
 }
 }
};

[leetcode] A Screenshot to Commemorate

Sat, 23 May 2015 03:21:17 +0000

[leetcode_68]Text Justification

Sat, 23 May 2015 03:20:29 +0000

So excited! Finally AC’d all LeetCode problems at once! Although the journey had its twists and turns, I’m still thrilled!
This is a simulation problem – formatting strings according to specified rules. The great thing about LeetCode is that you can see the test data, understand the problem statement thoroughly, and debug step by step. Getting it AC on the first try is actually quite difficult.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89


class Solution {
public:
 vector<string> fullJustify(vector<string> &words, int L) {
 vector<vector<string>> result;
 result.clear();
 vector<string> ans;
 ans.clear();
 if (L == 0) {
 ans.push_back("");
 return ans;
 }
 for (int i = 0; i < words.size(); i++) {
 vector<string> item;
 item.clear();
 int sum = 0;
 while (true) {
 if (item.size() > 0) sum += 1;
 if (sum >= L) {
 i--;
 break;
 }
 if (i >= words.size()) break;
 item.push_back(words[i]);
 sum += words[i].length();
 if (sum > L) {
 item.pop_back();
 i--;
 break;
 }
 i++;
 }
 result.push_back(item);
 }
 for (int i = 0; i < result.size(); i++) {
 string item = "";
 if (i != result.size() - 1) item = genString(result[i], L);
 else
 item = genStringLast(result[i], L);
 ans.push_back(item);
 }
 return ans;
 }
private:
 string genStringLast(vector<string> &item, int L) {
 int sum = 0;
 string str = "";
 for (int i = 0; i < item.size(); i++) {
 str += item[i];
 sum += item[i].size();
 if (i != item.size() - 1) {
 str += " ";
 sum += 1;
 }
 }
 for (int i = 0; i < L - sum; i++)
 str += " ";
 return str;
 }
 string genString(vector<string> &item, int L) {
 int sum = 0;
 for (int i = 0; i < item.size(); i++)
 sum += item[i].size();
 string str = "";
 if (item.size() == 1) {
 int countS = L - sum;
 str += item[0];
 for (int j = 0; j < countS; j++)
 str += " ";
 return str;
 }
 int spaces;
 if (item.size() > 1) spaces = (L - sum) / (item.size() - 1);
 else
 spaces = 0;
 int ex = L - sum - spaces * (item.size() - 1);
 for (int i = 0; i < item.size(); i++) {
 str += item[i];
 int countS;
 if (i < ex)
 countS = 1 + spaces;
 else
 countS = spaces;
 if (i != item.size() - 1)
 for (int j = 0; j < countS; j++)
 str += " ";
 }
 return str;
 }
};

[leetcode_146]LRU Cache

Sat, 23 May 2015 03:19:36 +0000

Use a doubly linked list to simulate a queue, then two maps to store key-value and key-ListNode for optimized lookup time.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95


struct ListNodel {
 int key;
 ListNodel *before;
 ListNodel *next;
 ListNodel(int x) : key(x), before(NULL), next(NULL) {}
};

class LRUCache{
public:
 map<int, int> mapkv;
 map<int, ListNodel*> mapkl;
 int capacityq;
 ListNodel * head, *tail;

 LRUCache(int capacity) {
 capacityq = capacity;
 mapkv.clear();
 mapkl.clear();
 head = NULL;
 tail = NULL;
 }

 int get(int key) {
 map<int, int>::iterator it = mapkv.find(key);
 if (it != mapkv.end()) {
 update(key);
 return it->second;
 } else {
 return -1;
 }
 }

 void set(int key, int value) {
 map<int, int>::iterator it = mapkv.find(key);
 if (it != mapkv.end()) {
 it->second = value;
 update(key);
 } else {
 if (mapkv.size() < capacityq) {
 insertKeyValue(key, value);
 } else {
 ListNodel * tmp = head;
 head = head->next;
 mapkl.erase(tmp->key);
 mapkv.erase(tmp->key);
 delete(tmp);
 insertKeyValue(key, value);
 }
 }
 }

private:
 void insertKeyValue(int key, int value) {
 mapkv.insert(map<int, int>::value_type(key, value));
 if (head == NULL) {
 ListNodel * tmp = new ListNodel(key);
 mapkl.insert(map<int, ListNodel*>::value_type(key, tmp));
 head = tmp;
 tail = tmp;
 head->next = tail;
 tail->before = head;
 tail->next = NULL;
 } else {
 ListNodel * tmp = new ListNodel(key);
 mapkl.insert(map<int, ListNodel*>::value_type(key, tmp));
 tmp->before = tail;
 tail->next = tmp;
 tmp->next = NULL;
 tail = tmp;
 }
 }

 void update(int key) {
 map<int, ListNodel*>::iterator it = mapkl.find(key);
 ListNodel * tmp = it->second;
 if (tmp == head) {
 if (head->next != NULL) {
 head = head->next;
 tail->next = tmp;
 tmp->before = tail;
 tmp->next = NULL;
 tail = tmp;
 }
 } else if (tmp != tail) {
 ListNodel * tmpb = tmp->before;
 ListNodel * tmpn = tmp->next;
 tmpb->next = tmpn;
 tmpn->before = tmpb;
 tmp->before = tail;
 tail->next = tmp;
 tmp->next = NULL;
 tail = tmp;
 }
 }
};

[leetcode_44]Wildcard Matching

Sat, 23 May 2015 03:18:44 +0000

DFS kept timing out, even with memoization. Here is the code for the record:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39


class Solution {
public:
 bool isMatch(const char *s, const char *p) {
 // Note: The Solution object is instantiated only once and is reused by each test case.
 const char *tmp = p;
 int cnt = 0;
 while (*tmp != '\0') if (*(tmp++) != '*') cnt++;
 if (cnt > strlen(s)) return false;

 if(strlen(s) == 0) {
 for(int i = 0;i < strlen(p);i++) {
 if(p[i] != '*')return false;
 }
 return true;
 }

 int **dp;
 dp = new int*[strlen(s) + 1];
 for(int i = 0; i <= strlen(s); i++) {
 dp[i] = new int[strlen(p) + 1];
 }
 dp[0][0] = 1;
 int i = 0;
 while(p[i++] == '*') dp[0][i] = 1;
 for(int i = 1; i <= strlen(s); i++) {
 for(int j = 1; j <= strlen(p); j++) {
 if(dp[i-1][j-1] == 1 && (s[i-1] == p[j-1] || p[j-1] == '?')) {
 dp[i][j] = 1;
 }
 if(p[j-1] == '*' && (dp[i][j-1] == 1 || dp[i-1][j-1] == 1 || dp[i-1][j] == 1)) {
 dp[i][j] = 1;
 }
 }
 }
 if(dp[strlen(s)][strlen(p)] == 1) return true;
 else
 return false;
 }
};

[leetcode_130]Surrounded Regions

Sat, 23 May 2015 03:17:52 +0000

Another BFS problem. Start from the boundary to find ‘O’s; any ‘O’ not visited is surrounded by ‘X’.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73


struct Pointp {
 int x;
 int y;
 Pointp() : x(0), y(0) {}
 Pointp(int a, int b) : x(a), y(b) {}
};
class Solution {
public:
 int lenm,lenn;
 int **map;
 void solve(vector<vector<char>> &board) {
 lenm = board.size();
 if(lenm <= 1)return ;
 lenn = board[0].size();
 map = new int *[lenm];
 for(int i = 0;i < lenm;i++) {
 map[i] = new int[lenn];
 }
 for(int i = 0;i < lenm;i++) {
 for(int j = 0;j < lenn;j++) {
 if(board[i][j] == 'O')map[i][j] = 0;
 else
 if(board[i][j] == 'X')map[i][j] = 1;
 }
 }
 for(int i = 0;i < lenm;i++) {
 for(int j = 0;j < lenn;j++) {
 if((i == 0 || j == 0 || i == lenm-1 || j == lenn-1)&&(map[i][j] == 0)) {
 map[i][j] = 2;
 bfs(i,j);
 }
 }
 }
 for(int i = 0;i < lenm;i++) {
 for(int j = 0;j < lenn;j++) {
 if(map[i][j] != 2)board[i][j] = 'X';
 }
 }
 //for(int i = 0;i < lenm;i++) {
 // for(int j = 0;j < lenn;j++) {
 // cout << board[i][j] << ' ';
 // }
 // cout << endl;
 //}
 }
private:
 void bfs(int x,int y) {
 int walk[4][2] = {{1,0},{-1,0},{0,1},{0,-1}};
 vector<Pointp>arr,arrs;
 arr.clear();
 arrs.clear();
 Pointp p(x,y);
 arr.push_back(p);
 while(true) {
 arrs.clear();
 for(int i = 0;i < arr.size();i++) {
 for(int j = 0;j < 4;j++) {
 int x = arr[i].x + walk[j][0];
 int y = arr[i].y + walk[j][1];
 if((x >= 0 && x <= lenm-1)&&(y >= 0 && y <= lenn-1)&&map[x][y] == 0) {
 map[x][y] = 2;
 arrs.push_back(Pointp(x,y));
 }
 }
 }
 if(arrs.size() == 0)break;
 arr.clear();
 for(int i = 0;i < arrs.size();i++) {
 arr.push_back(arrs[i]);
 }
 }
 }
};

[leetcode_140]Word Break II

Sat, 23 May 2015 03:16:58 +0000

Again using BFS. This problem requires a DP check to determine whether a solution exists. I also learned this from reading others’ blogs; otherwise it would keep getting TLE.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67


class Solution {
public:
 bool **map;
 set<int> wordlens;
 vector<string> result;
 vector<string> wordBreak(string s, unordered_set<string> &dict) {
 wordlens.clear();
 unordered_set<string>::iterator it;
 for(it = dict.begin(); it != dict.end(); it++) {
 string itstr = *it;
 wordlens.insert(itstr.length());
 }
 result.clear();
 map = new bool*[s.length()];
 for(int i = 0; i < s.length(); i++) {
 map[i] = new bool[s.length()];
 for(int j = 0; j < s.length(); j++) {
 map[i][j] = false;
 }
 }
 for(int start = 0; start < s.length(); start++) {
 for(int len = 1; len <= s.length() - start; len++) {
 string tmp = s.substr(start, len);
 if(dict.find(tmp) != dict.end()) {
 map[start][start + len - 1] = true;
 }
 }
 }
 for(int i = 0; i < s.length(); i++) {
 for(int j = 0; j <= i; j++) {
 for(int k = j; k < i; k++) {
 if(map[j][k] && map[k + 1][i]) map[j][i] = true;
 }
 }
 }
 // for(int i = 0; i < s.length(); i++) {
 // for(int j = 0; j < s.length(); j++) {
 // cout << map[i][j] << ' ';
 // }
 // cout << endl;
 // }
 if(map[0][s.length() - 1] == false) return result;
 string item = "";
 findSen(s, 0, dict, item);
 return result;
 }
private:
 void findSen(string &s, int start, unordered_set<string> &dict, string &item) {
 if(start >= s.length()) {
 result.push_back(item);
 return;
 }
 set<int>::iterator it;
 for(it = wordlens.begin(); it != wordlens.end(); it++) {
 int len = *it;
 if(start + len > s.length()) return;
 string tmp = string(s, start, len);
 if(dict.find(tmp) != dict.end()) {
 string itembp = item;
 if(start != 0) item += " ";
 item += tmp;
 findSen(s, start + len, dict, item);
 item = itembp;
 }
 }
 }
};

[leetcode_126]Word Ladder II

Sat, 23 May 2015 03:16:05 +0000

BFS + path storage. The main effort was optimizing for time. Managed to get it down to 1500ms using map – so satisfying.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97


struct NodeString {
 vector<NodeString *> before;
 string now;
};
class Solution {
public:
 vector<vector<string>> result;
 vector<vector<string>> findLadders(string start, string end, unordered_set<string> &dict) {
 // Note: The Solution object is instantiated only once and is reused by each test case.
 result.clear();
 if (dict.find(start) == dict.end()) {
 dict.insert(start);
 }
 if (dict.find(end) == dict.end()) {
 dict.insert(end);
 }
 map<string, NodeString *> maps;
 maps.clear();
 maps.insert(map<string, NodeString *>::value_type(start, NULL));
 vector<NodeString *> strs, strsc;
 strs.clear();
 NodeString *nodeString = new NodeString();
 nodeString->before.clear();
 nodeString->now = start;
 strs.push_back(nodeString);
 bool isFind = false;
 while (true) {
 map<string, NodeString *> mapstmp;
 mapstmp.clear();
 strsc.clear();
 for (int i = 0; i < strs.size(); i++) {
 string item = strs[i]->now;
 for (int j = 0; j < item.length(); j++) {
 for (char c = 'a'; c <= 'z'; c++) {
 string tmp = item;
 if (c != item[j]) {
 tmp[j] = c;
 if (dict.find(tmp) != dict.end()) {
 if (maps.find(tmp) == maps.end()) {
 NodeString *nodetmp = new NodeString();
 nodetmp->before.clear();
 nodetmp->before.push_back(strs[i]);
 nodetmp->now = tmp;
 if (tmp == end) {
 isFind = true;
 vector<string> items;
 items.clear();
 // items.push_back(end);
 genResult(nodetmp, items);
 continue;
 }
 strsc.push_back(nodetmp);
 maps.insert(map<string, NodeString *>::value_type(tmp, nodetmp));
 mapstmp.insert(map<string, NodeString *>::value_type(tmp, nodetmp));
 } else {
 if (tmp != start) {
 map<string, NodeString *>::iterator it = mapstmp.find(tmp);
 if (it != mapstmp.end())
 it->second->before.push_back(strs[i]);
 }
 }
 }
 }
 }
 }
 }

 if (strsc.size() == 0 || isFind) break;
 strs.clear();
 for (int i = 0; i < strsc.size(); i++) {
 strs.push_back(strsc[i]);
 }
 }
 return result;
 }

private:
 void genResult(NodeString *nodeString, vector<string> &items) {
 if (nodeString->before.size() == 0) {
 items.push_back(nodeString->now);
 vector<string> itemsr;
 itemsr.clear();
 vector<string>::reverse_iterator rit;
 for (rit = items.rbegin(); rit != items.rend(); rit++) {
 itemsr.push_back(*rit);
 }
 result.push_back(itemsr);
 items.pop_back();
 } else {
 for (int i = 0; i < nodeString->before.size(); i++) {
 items.push_back(nodeString->now);
 genResult(nodeString->before[i], items);
 items.pop_back();
 }
 }
 }
};

[leetcode_127]Word Ladder

Sat, 23 May 2015 03:15:01 +0000

Shortest path in a graph T+T
I only learned this from reading others’ blogs. Before that, I was naively using BFS+map,
which kept timing out.
Later I also thought of finding adjacent nodes, and I was just one step away from the shortest path solution. Quite embarrassing.
Here is the TLE code for now; I’ll revise it to use shortest path tomorrow.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45


class Solution {
public:
 int ladderLength(string start, string end, unordered_set<string> &dict) {
 // Note: The Solution object is instantiated only once and is reused by each test case.
 if(dict.find(start) == dict.end()) {
 dict.insert(start);
 }
 if(dict.find(end) == dict.end()) {
 dict.insert(end);
 }
 map<string,bool> maps;
 maps.clear();
 maps.insert(map<string,bool>::value_type(start,true));
 vector<string> strs,strsc;
 strs.clear();
 strs.push_back(start);
 int count = 1;
 while(true) {
 strsc.clear();
 count++;
 for(int i = 0;i < strs.size();i++) {
 string item = strs[i];
 for(int j = 0;j < item.length();j++) {
 for(char c = 'a';c <= 'z';c++) {
 string tmp = item;
 if(c != item[j]) {
 tmp[j] = c;
 if(dict.find(tmp) != dict.end() && maps.find(tmp) == maps.end()) {
 strsc.push_back(tmp);
 if(tmp == end) return count;
 maps.insert(map<string,bool>::value_type(tmp,true));
 }
 }
 }
 }
 }
 if(strsc.size() == 0) break;
 strs.clear();
 for(int i = 0;i < strsc.size();i++) {
 strs.push_back(strsc[i]);
 }
 }
 return 0;
 }
};

Coinidea's Blog

[CesiumJS]Sharing a Chinese Community for Learning CesiumJS

Archives

Converting CDB to 3D Tiles with Cesium

Creating Digital Twins with Cesium ion and Bentley's iModel.js

Cesium Partners with Intel Geospatial to Provide Enterprise Geospatial Solutions

Kabul Data Available for Government Users

Reality Capture Adds Built-in Support for Sharing 3D Models via Cesium ion

Cesium 2020 Year in Review

Cesium Wins 2020 PACT Tech Startup Enterprise Award

Tracking World Commercial Airlines with Flightradar24's CesiumJS App

Cesium and Kaarta Visualize Indoor and Underground Environments with High-Resolution LiDAR

Cesium Chinese Website -- How to Develop a Map Download Tool [Part 1]

Prerequisites

Tile Map Server

Tile Download

Batch Tile Download

Next Steps

Disclaimer

Visualizing Switzerland's Geological Resources with Cesium's Underground Rendering

Free Public Access to Switzerland’s 3D Map

Looking Underground

Geological Data at Work

Future Outlook

Visualizing Underground Utilities, Mines, and Geological Layers with Cesium

Try It Out

CesiumJS Adds Official TypeScript Type Definitions

Deep Dive

Manually Maintaining the Definition File

Porting CesiumJS to TypeScript

Generating Definition Files with the TypeScript Compiler

Back to the Drawing Board

Post-Processing and Validation

JSDoc Errors

Next Steps

Acknowledgements

Cesium 1.70 - Introducing Cesium OSM Buildings New Features

Announcing Partnership with Epic Games to Create Cesium for Unreal Engine

Underground, TypeScript, and Global 3D Buildings Released in CesiumJS 1.70

Cesium OSM Buildings

Underground Support

TypeScript

Try CesiumJS 1.70

CesiumJS Downloads Surpass 1 Million

1 Million Downloads Is the Result of 200+ Contributors Working Together

1 Million Downloads Means Thousands of 3D Geospatial Applications

1 Million Downloads Means Millions of Lines of Code

1 Million Downloads Is Just the Beginning

Cesium Official English Forum

i-Urban Renovation Visualizes Building Status in Munakata, Tottori Prefecture Using 3D Tiles

Bringing 3D Tiles and Bing Imagery from Cesium ion to osgEarth

Adding 3D Tiles Support

Bing Maps

Putting It All Together

Creating 3D Tiles from KML/COLLADA with Per-Building Data

Using Cesium Tools for Better Construction Management

Aggregating Different Datasets to Assess Progress

Collecting Data

Traditional Surveys

Drone Surveys

Smart Construction Vehicles

Beyond Visualization

Inspecting Features in 3D Tilesets with Cesium Stories

Visualizing Time-Series Data with Cesium Stories

Learning 3D Tiles with 3D Tiles Overview

Using EdgyGeo Cesium Tools to Query and Download Datasets

Exploring the Impact of COVID-19 on Global Flights

How We Created These Visualizations

[leetcode]Number Complement

[leetcode]Print in Order

Recent Cesium Updates and Domestic Source Code Download Links

[Part 1] Sharpen Your Cesium Tools - Visual Studio Code

IDE

Getting Started with Visual Studio Code

1. Command Palette

2. How to Install Plugins

Installing the Live Server Plugin

3. Commonly Used Plugins

4. Chinese Language Pack

Friends of the Cesium Chinese Website