VMware and WordPress

Hello, and welcome back to another update!

Today I will briefly cover what I have learned from using a Virtual Machine (VM) to run WordPress.

For this project I used the pre-packaged Virtual Machine image for the VMware Workstation player that is provided by bitnami.
(More information can be found from the links at the bottom of this post!)

The setup seems to be pretty well done.
It was good for learning more about the setup itself as well as the integration.
(eg. apache webserver configuration and wordpress configuration for connecting to database.)

The home PC (host OS) is running MS Windows, while the quest OS is running debian linux.

Here is the simplified diagram of all the main components.

The connections to virtual machine are only possible from the host OS
(since the virtual network “VMNet8” of the VMware workstation player does not allow incoming connection from outside).

The figure below shows how the normal wordpress user on home PC can connect to the apache/wordpress; while admin access to quest OS, PhpMyAdmin and Maria DB requires connection to ssh server.

To connect to the PhpMyAdmin or Maria DB, one can use putty with port forwarding.

When the ssh session is opened, local port in host OS is opened by putty and traffic arriving to that port is forwarded to pre-defined destination at the ssh server environment.

Here is a simplified view when tunnel is set up for PhPMyAdmin

When defining the local port in putty, remember not to allow connections from other hosts to the local port that was opened by putty.
Bellow a picture for reference:

That was all this time, until next time!

More information of the pre-package and instructions:
https://bitnami.com/stack/wordpress/virtual-machine

Draw.io configuration

Hello all, I am back with more news and small projects I’ve been up to.

This time it is a project related to what colors are available in the color picker in draw.io.

Before we get more into this, a quick summary of what draw.io is:

Draw.io is a free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams. It can also be downloaded, which is what I have in use at the moment.

Then to the plan and results

Now, normally the draw.io color picker looks something like this:

While these options are great for their variety, for this project I wanted a simpler assortment of colors, that I was already familiar with.

That is how I ended up configuring the colors to look like the options in PowerPoint.

This is how the colors look in PowerPoint, for ease of reference.

That is how I made the following plan of action:

And then had this as the end result:

Not the most elegant looking solution, but it did what I wanted it to.

But how did we get here?

Draw.io is interesting for how you are able to modify it.

From the research I have done, if you know what you’re doing, anything is configurable and can be done following this path:

Extras -> Configuration…

Then clicking on “Configuration..” will open this view:

And after entering the wanted JSON configuration, clicking apply and restarting the software, the changes will take effect.

In case anyone would want to try doing the same configuration I will embed what I used bellow:

{
  "defaultFonts": [
    "Helvetica",
    "Verdana",
    "Times New Roman",
    "Garamond",
    "Comic Sans MS",
    "Courier New",
    "Georgia",
    "Lucida Console",
    "Tahoma"
  ],
  "defaultColorSchemes": [
	[ null,	{ "fill": "#f5f5f5", "stroke": "#666666" },				{ "fill": "#dae8fc", "stroke": "#6c8ebf" },				{ "fill": "#d5e8d4", "stroke": "#82b366" },				{ "fill": "#ffe6cc", "stroke": "#d79b00" },				{ "fill": "#fff2cc", "stroke": "#d6b656" },				{ "fill": "#f8cecc", "stroke": "#b85450" },				{ "fill": "#e1d5e7", "stroke": "#9673a6" } ],
	[ null,	{ "fill": "#f5f5f5", "stroke": "#666666", "gradient": "#b3b3b3" },	{ "fill": "#dae8fc", "stroke": "#6c8ebf", "gradient": "#7ea6e0" },	{ "fill": "#d5e8d4", "stroke": "#82b366", "gradient": "#97d077" },	{ "fill": "#ffcd28", "stroke": "#d79b00", "gradient": "#ffa500" },	{ "fill": "#fff2cc", "stroke": "#d6b656", "gradient": "#ffd966" },	{ "fill": "#f8cecc", "stroke": "#b85450", "gradient": "#ea6b66" },	{ "fill": "#e6d0de", "stroke": "#996185", "gradient": "#d5739d" } ],
	[ null,	{ "fill": "#eeeeee", "stroke": "#36393d" },				{ "fill": "#f9f7ed", "stroke": "#36393d" },				{ "fill": "#ffcc99", "stroke": "#36393d" },				{ "fill": "#cce5ff", "stroke": "#36393d" },				{ "fill": "#ffff88", "stroke": "#36393d" },				{ "fill": "#cdeb8b", "stroke": "#36393d" },				{ "fill": "#ffcccc", "stroke": "#36393d" } ]
  ],	
  "presetColors": [
	"none",		"C00000",	"FF0000",	"FFC002",	"FFFF00",	"92D050",	"00B050",	"00B0F0",	"0070C0",	"002060",	"7030A0",	"none",
	"none",		"C00000",	"FF0000",	"FFC002",	"FFFF00",	"92D050",	"00B050",	"00B0F0",	"0070C0",	"002060",	"7030A0",	"none"
  ],
  "defaultColors": [
	"none",		"FFFFFF",	"000000",	"E7E6E6",	"44546A",	"5B9BD5",	"ED7D31",	"A5A5A5",	"FFC000",	"4472C4",	"70AD47",	"none",
	"none",		"F2F2F2",	"7F7F7F",	"D0CECE",	"D6DCE5",	"DEEBF7",	"FBE5D6",	"EDEDED",	"FFF2CC",	"DAE3F3",	"E2F0D9",	"none",
	"none",		"D9D9D9",	"595959",	"AFABAB",	"ADB9CA",	"BDD7EE",	"F8CBAD",	"DBDBDB",	"FFE699",	"B4C7E7",	"C5E0B4",	"none",
	"none",		"BFBFBF",	"404040",	"767171",	"8497B0",	"9DC3E6",	"F4B183",	"C9C9C9",	"FFD966",	"8FAADC",	"A9D18E",	"none",
	"none",		"A6A6A6",	"262626",	"3B3838",	"333F50",	"2E75B6",	"C55A11",	"7C7C7C",	"BF9000",	"2F5597",	"548235",	"none",
	"none",		"7E7E7E",	"0D0D0D",	"181717",	"222A35",	"1F4E79",	"843C0C",	"525252",	"7F6000",	"203864",	"385723",	"none",
	"none",		"none",		"none",		"none",		"none",		"none",		"none",		"none",		"none",		"none",		"none",		"none",
	"none",		"none",		"none",		"none",		"none",		"none",		"none",		"none",		"none",		"none",		"none",		"none",
	"none",		"none",		"none",		"none",		"none",		"none",		"none",		"none",		"none",		"none",		"none",		"none",
	"none",		"none",		"none",		"none",		"none",		"none",		"none",		"none",		"none",		"none",		"none",		"none"
  ],
  "defaultLibraries": "general;images;uml;er;bpmn;flowchart;basic;arrows2",
  "colorNames": {
	"FFFFFF": "White",		"F2F2F2": "White, Darker 5%",		"D9D9D9": "White, Darker 15%",		"BFBFBF": "White, Darker 25%",		"A6A6A6": "White, Darker 35%",		"7E7E7E": "White, Darker 50%",
	"000000": "Black",		"7F7F7F": "Black, Lighter 50%",		"595959": "Black, Lighter 35%",		"404040": "Black, Lighter 25%",		"262626": "Black, Lighter 15%",		"0D0D0D": "Black, Lighter 5%",
	"E7E6E6": "Light Gray",		"D0CECE": "Light Gray, Darker 10%",	"AFABAB": "Light Gray, Darker 25%",	"767171": "Light Gray, Darker 50%",	"3B3838": "Light Gray, Darker 75%",	"181717": "Light Gray, Darker 90%",
	"44546A": "Gray Blue",		"D6DCE5": "Gray Blue, Lighter 80%",	"ADB9CA": "Gray Blue, Lighter 60%",	"8497B0": "Gray Blue, Lighter 40%",	"333F50": "Gray Blue, Darker 25%",	"222A35": "Gray Blue, Darker 50%",
	"5B9BD5": "Light Blue",		"DEEBF7": "Light Blue, Lighter 80%",	"BDD7EE": "Light Blue, Lighter 60%",	"9DC3E6": "Light Blue, Lighter 40%",	"2E75B6": "Light Blue, Darker 25%",	"1F4E79": "Light Blue, Darker 50%",
	"ED7D31": "Dark Orange",	"FBE5D6": "Dark Orange, Lighter 80%",	"F8CBAD": "Dark Orange, Lighter 60%",	"F4B183": "Dark Orange, Lighter 40%",	"C55A11": "Dark Orange, Darker 25%",	"843C0C": "Dark Orange, Darker 50%",
	"A5A5A5": "Dark Gray",		"EDEDED": "Dark Gray, Lighter 80%",	"DBDBDB": " Dark Gray, Lighter 60%",	"C9C9C9": "Dark Gray, Lighter 40%",	"7C7C7C": "Dark Gray, Darker 25%",	"525252": "Dark Gray, Darker 50%",
	"FFC000": "Gold",		"FFF2CC": "Gold, Lighter 80%",		"FFE699": "Gold, Lighter 60%",		"FFD966": "Gold, Lighter 40%",		"BF9000": "Gold, Darker 25%",		"7F6000": "Gold, Darker 50%",
	"4472C4": "Blue",		"DAE3F3": "Blue, Lighter 80%",		"B4C7E7": "Blue, Lighter 60%",		"8FAADC": "Blue, Lighter 40%",		"2F5597": "Blue, Darker 25%",		"203864": "Blue, Darker 50%",
	"70AD47": "Forest Green",	"E2F0D9": "Forest Green, Lighter 80%",	"C5E0B4": "Forest Green, Lighter 60%",	"A9D18E": "Forest Green, Lighter 40%",	"548235": "Forest Green, Darker 25%",	"385723": "Forest Green, Darker 50%",
	"C00000": "Dark Red",
	"FF0000": "Red",
	"FFC002": "Orange",
	"FFFF00": "Yellow",
	"92D050": "Light Green",
	"00B050": "Green",
	"00B0F0": "Sky Blue",
	"0070C0": "Navy Blue",
	"002060": "Dark Blue",
	"7030A0": "Purple"
  }
}

Thank you all, that was it for this time.

Until next time!