Explore related tutorials & articles
30
Replies
That is a very elaborate dynamic web page the has a world map you can drag around zoom in and out and control weather overlays. The overlays only seem to be available north America. If you are asking if Photoshop can create a web page like that the answer is no. Photoshop may be used to create some of the overlays the web page uses Shape with fills, Text, Paths Stroked. A Photoshop script may be able to be written to read a file that has prepared weather information fot plotting weather front, storms areas etc and create the overlays for the web page to use and save them for the web server to access. Some of the plots may be a special weather symbol font would be like text on a path.
How are you getting the data on the fronts that you want to plot - meaning what format is it in? I looked at the code you provided, but I'm not too sure how that would translate to PS. You can draw paths with PS and wither use a script or the Deco Fill script to create the symbols on the path. The deco fill would be fairly easy to use for the warm and cold fronts, but it woudn't really work with the stationary fronts, as you would need to create a pattern of both the warm and cold front symbols into one pattern, and that would not take the curves well. With scripting, you could apply different shaped along a path. But all this also depends on how you get your data. Do you get data points and connect the dots or do you freehand the front lines on an overlay of a map?
Here's just a sample of using the deco fill script on a path:
Your data point are just numbers pushed to arrays for plotting. This could easily be transferred to PS, if you know how those point relay to a open file/map.
To make the front lines, I started by making the symbols, by themselves:
Starting with a 100px X 100PX file, I drew a symbol in the either the lower or upper half of the canvas. I put a very small square at the opposite side then adjusted the opacity to 1, so you can't see the square, but it helps center the pattern:
Create a patten of the file:
Next I drew the front line, this is where you would use a script to plot the front's points and either have the script draw a path, or you draw it and connect the dots. I use the pen tool and used just a stroke, no fill:
Next, I used the path selection tool to select the entire path. then I copied it and pasted it into a new path in the path panel.
I went back to the layers panel and added a blank layer and then selected the pattern I created using pattern as the fill option and script with place along path as the options.
In the next dialog, you can set the spacing and size of the patterns
Here's the final:
Okay, this script will only work with this map, as the points are adjusted for it.
Here's what I got plotting just the cold front.:
#target photoshop
//1035 px = 40 long 259 per 10 ----25.875 per 1 deg 12.9375 per 1/2 deg
//628 px = 20 lat 157 per 5------31px per 1 deg
//93px to left 130 long//156 to top 50 long
//left edge is 133.5942
//top edge is 55.0322
//right edge 58.91787
//botton edge 20.41935
var leftDeg = 133.5942
var topDeg = 55.0322
var longUnit = 25.875
var latUnit = 31
var doc = activeDocument;
var base = doc.activeLayer
var COLD = new Array();
COLD.push([[[49.7, -64.5], [48.4, -65.4], [46.2, -68.1], [44.3, -72.2], [42.1, -77.8]], [[31.2, -104.6], [30.8, -106.6], [30.7, -109.4], [31.4, -111.8], [32.6, -113.5]], [[33.7, -94.4], [32.7, -96.3], [32.1, -98.3], [31.5, -100.4], [31.2, -101.8]], [[43.4, -68.8], [42.1, -70.7], [40.9, -74.1], [39.9, -76.0], [38.8, -79.3], [38.1, -83.9], [37.0, -86.9], [36.2, -89.3], [35.6, -90.8]], [[46.2, -56.3], [45.0, -56.8], [43.8, -59.0], [43.9, -61.7]], [[49.9, -128.9], [49.1, -130.9], [49.1, -133.1], [49.9, -137.3], [50.8, -140.4], [52.0, -143.6]], [[54.5, -112.9], [55.0, -117.4], [56.5, -121.3], [58.2, -125.5]], [[31.9, -102.8], [33.0, -105.0], [35.3, -106.3], [39.2, -105.6]], [[42.2, -77.7], [41.3, -79.8], [40.6, -82.8], [40.4, -85.0]]]);
//$.writeln(COLD[0].length)
for (var i =0;i<COLD[0].length;i++){
doc.activeLayer = base;
mkLayer ('COLD-'+i);
doc.activeLayer.name = 'COLD ' + i;
for (var j=0;j<COLD[0].length;j++){
mkDot (COLD[0]
[1] , COLD[0] [0]) }
}
function mkDot(x1,y2){
var x = (leftDeg - Math.abs(x1))*longUnit
var y =(topDeg- y2)*latUnit
var idMk = charIDToTypeID( "Mk " );
var desc3 = new ActionDescriptor();
var idnull = charIDToTypeID( "null" );
var ref2 = new ActionReference();
var idcontentLayer = stringIDToTypeID( "contentLayer" );
ref2.putClass( idcontentLayer );
desc3.putReference( idnull, ref2 );
var idUsng = charIDToTypeID( "Usng" );
var desc4 = new ActionDescriptor();
var idType = charIDToTypeID( "Type" );
var desc5 = new ActionDescriptor();
var idClr = charIDToTypeID( "Clr " );
var desc6 = new ActionDescriptor();
var idRd = charIDToTypeID( "Rd " );
desc6.putDouble( idRd, 255.000000 );
var idGrn = charIDToTypeID( "Grn " );
desc6.putDouble( idGrn, 0.000000 );
var idBl = charIDToTypeID( "Bl " );
desc6.putDouble( idBl, 255.000000 );
var idRGBC = charIDToTypeID( "RGBC" );
desc5.putObject( idClr, idRGBC, desc6 );
var idsolidColorLayer = stringIDToTypeID( "solidColorLayer" );
desc4.putObject( idType, idsolidColorLayer, desc5 );
var idShp = charIDToTypeID( "Shp " );
var desc7 = new ActionDescriptor();
var idunitValueQuadVersion = stringIDToTypeID( "unitValueQuadVersion" );
desc7.putInteger( idunitValueQuadVersion, 1 );
var idTop = charIDToTypeID( "Top " );
var idPxl = charIDToTypeID( "#Pxl" );
desc7.putUnitDouble( idTop, idPxl, y-5 );
var idLeft = charIDToTypeID( "Left" );
var idPxl = charIDToTypeID( "#Pxl" );
desc7.putUnitDouble( idLeft, idPxl, x-5 );
var idBtom = charIDToTypeID( "Btom" );
var idPxl = charIDToTypeID( "#Pxl" );
desc7.putUnitDouble( idBtom, idPxl, y+5 );
var idRght = charIDToTypeID( "Rght" );
var idPxl = charIDToTypeID( "#Pxl" );
desc7.putUnitDouble( idRght, idPxl, x+5 );
var idElps = charIDToTypeID( "Elps" );
desc4.putObject( idShp, idElps, desc7 );
var idstrokeStyle = stringIDToTypeID( "strokeStyle" );
var desc8 = new ActionDescriptor();
var idstrokeStyleVersion = stringIDToTypeID( "strokeStyleVersion" );
desc8.putInteger( idstrokeStyleVersion, 2 );
var idstrokeEnabled = stringIDToTypeID( "strokeEnabled" );
desc8.putBoolean( idstrokeEnabled, false );
var idfillEnabled = stringIDToTypeID( "fillEnabled" );
desc8.putBoolean( idfillEnabled, true );
var idstrokeStyleLineWidth = stringIDToTypeID( "strokeStyleLineWidth" );
var idPxl = charIDToTypeID( "#Pxl" );
desc8.putUnitDouble( idstrokeStyleLineWidth, idPxl, 14.000000 );
var idstrokeStyleLineDashOffset = stringIDToTypeID( "strokeStyleLineDashOffset" );
var idPnt = charIDToTypeID( "#Pnt" );
desc8.putUnitDouble( idstrokeStyleLineDashOffset, idPnt, 0.000000 );
var idstrokeStyleMiterLimit = stringIDToTypeID( "strokeStyleMiterLimit" );
desc8.putDouble( idstrokeStyleMiterLimit, 100.000000 );
var idstrokeStyleLineCapType = stringIDToTypeID( "strokeStyleLineCapType" );
var idstrokeStyleLineCapType = stringIDToTypeID( "strokeStyleLineCapType" );
var idstrokeStyleButtCap = stringIDToTypeID( "strokeStyleButtCap" );
desc8.putEnumerated( idstrokeStyleLineCapType, idstrokeStyleLineCapType, idstrokeStyleButtCap );
var idstrokeStyleLineJoinType = stringIDToTypeID( "strokeStyleLineJoinType" );
var idstrokeStyleLineJoinType = stringIDToTypeID( "strokeStyleLineJoinType" );
var idstrokeStyleMiterJoin = stringIDToTypeID( "strokeStyleMiterJoin" );
desc8.putEnumerated( idstrokeStyleLineJoinType, idstrokeStyleLineJoinType, idstrokeStyleMiterJoin );
var idstrokeStyleLineAlignment = stringIDToTypeID( "strokeStyleLineAlignment" );
var idstrokeStyleLineAlignment = stringIDToTypeID( "strokeStyleLineAlignment" );
var idstrokeStyleAlignInside = stringIDToTypeID( "strokeStyleAlignInside" );
desc8.putEnumerated( idstrokeStyleLineAlignment, idstrokeStyleLineAlignment, idstrokeStyleAlignInside );
var idstrokeStyleScaleLock = stringIDToTypeID( "strokeStyleScaleLock" );
desc8.putBoolean( idstrokeStyleScaleLock, false );
var idstrokeStyleStrokeAdjust = stringIDToTypeID( "strokeStyleStrokeAdjust" );
desc8.putBoolean( idstrokeStyleStrokeAdjust, false );
var idstrokeStyleLineDashSet = stringIDToTypeID( "strokeStyleLineDashSet" );
var list1 = new ActionList();
desc8.putList( idstrokeStyleLineDashSet, list1 );
var idstrokeStyleBlendMode = stringIDToTypeID( "strokeStyleBlendMode" );
var idBlnM = charIDToTypeID( "BlnM" );
var idNrml = charIDToTypeID( "Nrml" );
desc8.putEnumerated( idstrokeStyleBlendMode, idBlnM, idNrml );
var idstrokeStyleOpacity = stringIDToTypeID( "strokeStyleOpacity" );
var idPrc = charIDToTypeID( "#Prc" );
desc8.putUnitDouble( idstrokeStyleOpacity, idPrc, 100.000000 );
var idstrokeStyleContent = stringIDToTypeID( "strokeStyleContent" );
var desc9 = new ActionDescriptor();
var idClr = charIDToTypeID( "Clr " );
var desc10 = new ActionDescriptor();
var idRd = charIDToTypeID( "Rd " );
desc10.putDouble( idRd, 0.000000 );
var idGrn = charIDToTypeID( "Grn " );
desc10.putDouble( idGrn, 0.000000 );
var idBl = charIDToTypeID( "Bl " );
desc10.putDouble( idBl, 255.000000 );
var idRGBC = charIDToTypeID( "RGBC" );
desc9.putObject( idClr, idRGBC, desc10 );
var idsolidColorLayer = stringIDToTypeID( "solidColorLayer" );
desc8.putObject( idstrokeStyleContent, idsolidColorLayer, desc9 );
var idstrokeStyleResolution = stringIDToTypeID( "strokeStyleResolution" );
desc8.putDouble( idstrokeStyleResolution, 72.000000 );
var idstrokeStyle = stringIDToTypeID( "strokeStyle" );
desc4.putObject( idstrokeStyle, idstrokeStyle, desc8 );
var idcontentLayer = stringIDToTypeID( "contentLayer" );
desc3.putObject( idUsng, idcontentLayer, desc4 );
var idLyrI = charIDToTypeID( "LyrI" );
desc3.putInteger( idLyrI, 2 );
executeAction( idMk, desc3, DialogModes.NO );
}
function mergeDown(){
var idMrgtwo = charIDToTypeID( "Mrg2" );
var desc12 = new ActionDescriptor();
executeAction( idMrgtwo, desc12, DialogModes.NO );
}
function mkLayer(name){
var idMk = charIDToTypeID( "Mk " );
var desc2 = new ActionDescriptor();
var idnull = charIDToTypeID( "null" );
var ref1 = new ActionReference();
var idlayerSection = stringIDToTypeID( "layerSection" );
ref1.putClass( idlayerSection );
desc2.putReference( idnull, ref1 );
var idlayerSectionStart = stringIDToTypeID( "layerSectionStart" );
desc2.putInteger( idlayerSectionStart, 3 );
var idlayerSectionEnd = stringIDToTypeID( "layerSectionEnd" );
desc2.putInteger( idlayerSectionEnd, 4 );
var idNm = charIDToTypeID( "Nm " );
desc2.putString( idNm, name);
executeAction( idMk, desc2, DialogModes.NO );
}
So taking the first set of data points, I used the curvature pen tool, and just clicked on them in order to create a path, then used the deco fill to add the symbols.
For a stationary front, you could draw both the warm and cold fronts then mask them:
AdChoices