added better example settings and a btn to change the color palette

Author: piebro

README.md

@@ -7,7 +7,7 @@ I love the game Factorio and I really like the look of factories after growing f
 
 All factorio buildings and tiles with their bounding boxes and belt, pipe, rail, inserter, wire and electricity connections can be visualized. Everything is drawn in vector graphics (SVG) to be able to view it in any resolution.
 
-Use the [online demo](https://piebro.github.io/factorio-blueprint-visualizer/) to visualize your own blueprints.
+Use the [online demo](https://piebro.github.io/factorio-blueprint-visualizer/) to visualize your own blueprints. With the latest update, only Blueprints from Factorio 2.0 and later work correctly.
 
 ## Examples
 
@@ -22,17 +22,16 @@ Use the [online demo](https://piebro.github.io/factorio-blueprint-visualizer/) t
 
 The last three blueprints are by Josh Ventura and can be found [here](https://factorioprints.com/user/6QrnfqXIffQcWgHC6Xs4uHv1BGg2).
 
-## Usage
-
-<!-- TODO: add a few screenshots to visualize a new blueprint? or some text how this generally works? -->
+## Updates <!-- TODO add date -->
 
-### Drawing Settings
+- Factorio 2.0 and Factorio: Space Age are supported. <!-- TODO: test if I can past older blueprint in factotio 2.0 and export them again to update them -->
+- Portet everything to Javascript for simplicity and performance.
+- Added ability to modify drawing settings.
 
-To visualize a blueprint you need drawing settings that define what is drawn, in which order and in what kind of style. Drawing settings are a list of option that are executed one after the other. You can decide which bounding box to draw with an allow or deny list of building names. You can also draw connected `belt`, `underground-belts`, `pipes`, `underground-pipes`, `inserter`, `rail`, `electricity`, `red-circuits` and `green-circuits`.
-
-Furthermore, you can define the style of each drawing command or set a new default drawing style. You can use `fill`, `stroke`, `stroke-width`, `stroke-linecap`, `stroke-opacity`, `fill-opacity`, `bbox-scale`, `bbox-rx` and `bbox-ry` as properties and every SVG tag should also work.
+## Usage
 
-Every visualization has the used drawing settings and blueprint saved with it, so you can check out the drawing settings of the examples blueprints inspiration.
+<!-- TODO: add a few screenshots to visualize a new blueprint? or some text how this generally works? -->
+<!-- add link to draw_setting_documenation.md -->
 
 ### Text to Image
 

blueprintVisualizer.js

@@ -203,10 +203,13 @@ function drawBlueprint(blueprint, settings, svgWidthInMm = 300, aspectRatio = nu
  }
  }
  const dwg = getSVG(blueprint.bboxWidth, blueprint.bboxHeight, background, metadataStr, svgWidthInMm, aspectRatio);
+ let currentDefaultOtherSettings = {};
 
  for (let [settingName, svgSettings, otherSettings] of settings) {
+ otherSettings = {...currentDefaultOtherSettings, ...otherSettings};
  if (settingName === "default settings") {
  appendGroup(dwg, svgSettings);
+ currentDefaultOtherSettings = otherSettings;
  continue;
  } else if (settingName === "bbox") {
  drawEntitiesBbox(dwg, blueprint.entities, blueprint.posOffset, svgSettings, otherSettings, "bbox_size");

drawingSettings.js

@@ -1,23 +1,24 @@
 const EXAMPLE_SETTINGS = [
- ['how to use: https://github.com/piebro/factorio-blueprint-visualizer/blob/master/draw_setting_documentation.md'],
- ['default settings', {'background': '#a2aebb', 'stroke': '#3f88c5', 'stroke-linecap': 'round', 'stroke-width': 0.3}],
- ['tiles', {'fill': '#a2fffb', 'stroke-width': 0.1}, {'allow': ['landfill'], 'size': 0.7}],
- ['tiles', {'fill': '#a2aefb', 'stroke-width': 0.1}, {'deny': ['landfill'], 'size': 0.7}],
- ['bbox', {'fill': '#ff0000', 'stroke': 'none'}, {'deny': ["pipes", "underground-pipes", "belts", "underground-belts"], 'scale': 0.75, 'rx': 0.1, 'ry': 0.1}],
- // ['bbox-selection', {'fill': '#00ff00', 'stroke': 'none'}, {'scale': 1}],
- // ['bbox-collision', {'fill': '#0000ff', 'stroke': 'none'}, {'scale': 1}],
-
- ['pipes', {'stroke': '#ff0000'}],
- ['underground-pipes', {'stroke': '#ff0000'}],
- ['belts', {'stroke': '#00ff00'}],
- ['underground-belts', {'stroke': '#00ff00'}],
- ['heat-pipes', {'stroke': '#ff0000'}],
- ['power-lines', {'stroke': '#ff0000'}],
- // ['green-wire-lines', {'stroke': '#ff0000'}],
- // ['red-wire-lines', {'stroke': '#ff0000'}],
- ['inserters', {'stroke': '#ff0000', 'stroke-width': 0.1}],
- ['rails', {'stroke': '#ff0000'}],
-];
+ ["how to use: https://github.com/piebro/factorio-blueprint-visualizer/blob/master/draw_setting_documentation.md"],
+ ["default settings", {'background': '#a2aebb', 'stroke': 'none', 'stroke-linecap': 'round', 'stroke-width': 0.3}, {'scale': 0.85, 'rx': 0.1, 'ry': 0.1}],
+ ["tiles", {'fill': '#420217', 'stroke': '#f3ffbd', 'stroke-width': 0.15}, {'deny': [], 'size': 0.7}],
+ 
+ ["pipes", {'stroke': '#c84c09'}],
+ ["underground-pipes", {'stroke': '#c84c09'}],
+ ["belts", {'stroke': '#f3ffbd'}],
+ ["underground-belts", {'stroke': '#f3ffbd'}],
+ ["inserters", {'stroke': '#f3ffbd'}],
+ 
+ ["bbox", {'fill': '#247ba0'}, {'deny': ["pipe", "pipe-to-ground", "belt", "inserter", "solar-panel", "accumulator", "asteroid-collector", "cargo-bay", "space-platform-hub", "thruster"]}],
+ ["bbox", {'fill': '#ff1654'}, {'allow': ["solar-panel"]}],
+ ["bbox", {'fill': '#436436'}, {'allow': ["accumulator"]}],
+ ["bbox", {'fill': '#70c1b3'}, {'allow': ["cargo-bay"]}],
+ ["bbox", {'fill': '#b2dbbf'}, {'allow': ["asteroid-collector", "thruster", "space-platform-hub"]}],
+ 
+ ["heat-pipes", {'stroke': '#b2dbbf'}],
+ ["power-lines", {'stroke': '#70c1b3'}], 
+ ["rails", {'stroke': '#faa275'}],
+]
 
 const PREDEFINED_COLOR_PALETTES = [
  [
@@ -276,19 +277,12 @@ function settingsChangeProperty(settings, propertyName, changeFunc) {
 function settingsChangeColors(settings, colorCount = null, changeBackground = true) {
  settings = deepCopy(settings);
  const originalColors = {};
- const keysThatHaveAColor = ["stroke", "fill"];
+ let keysThatHaveAColor = ["stroke", "fill"];
+ if (changeBackground) {
+ keysThatHaveAColor.push("background");
+ }
 
  for (let s of settings) {
- // Handle background color
- if (changeBackground && s[0] === "background") {
- if (!(s[1] in originalColors)) {
- originalColors[s[1]] = [[s, 1]];
- } else {
- originalColors[s[1]].push([s, 1]);
- }
- continue;
- }
-
  // Only check for stroke/fill if s[1] is an object and not null
  if (typeof s[1] === 'object' && s[1] !== null) {
  for (let key of keysThatHaveAColor) {

index.html

@@ -130,7 +130,7 @@
 
 function newBlueprintString(blueprintString){
  [currentBlueprintNames, currentBlueprintJsons] = getBlueprintList(blueprintString);
- currentBlueprint = processBlueprint(currentBlueprintJsons[2])
+ currentBlueprint = processBlueprint(currentBlueprintJsons[0])
 
  getCurrentBlueprintEntityCount(currentBlueprint)
 
@@ -204,6 +204,12 @@
 
  newBlueprintString(START_EXAMPLE_BLUEPRINT);
  showBlueprint();
+
+ // Add click handler for random color palette button
+ document.getElementById("randomColorPalletBtn").onclick = () => {
+ settingsList[currentSettingIndex] = settingsChangeColors(settingsList[currentSettingIndex], null, true);
+ showBlueprint();
+ };
 }
 
 function showBlueprint(){