This page last changed on Aug 03, 2014 by gheinert.

We often want to use our Design on devices with different resolutions such as PC (1080 x 1920), tablets (800 x 1200), mobile phone (480 x 800) etc. This normally means making a whole new panel in the Designer from scratch.
Here is a way to generate a Panel with a different resolution to the original one and later on to combine these Panel into one Design without the Designer. I have only tried it with *.png images. So you may have to repeat some steps or change things slightly if you use different image files.

To get ready you need to:
-Download and Install SciTE4AutoHotkey from http://fincs.ahk4.net/scite4ahk/
-Download the scripts XML-V1.ahk and OR-XML-Join-V1.ahk from http://heinert.myqnapcloud.com/OR/
-Download and Install Gimp from http://www.gimp.org/
-Download, unzip David's Batch Processor for Gimp for Windows from here: http://www.ozemail.com.au/~hodsond/dbp-1.1.8.zip
-Copy the unzipped file dpb.exe to the plug-in directory of Gimp: C:\Program Files\GIMP 2\lib\gimp\2.0\plug-ins

Now we are ready to generate the new Design at a different resolution. You need to calculate the scaling factor. For example if you wanted to scale down from 800 lines for a tablet to 480 lines on a mobile phone, the scale factor is 480/800=0.6. To get the best possible quality one should always "downscale" rather than "upscale". Also in case something goes wrong make sure you save your original files.

-Copy all the files in C:\OpenRemote\webapps\controller to a new directory C:\Temp

-Also make a folder C:\Temp\New

-Now it's time to generate a new temporary panel.xml file. Start Scite4AHK. Open the script XML-V1.ahk (you can download it from: http://heinert.myqnapcloud.com/OR/ ). In the script XML-V1.AHK in it () you need to change if necessary the name for the new panel ( on our case it's "Mobile"), the scaling factor ("0.6"), and the Index of the new panel "2". Then run the script. It may take 60s or so to run. The script has now generated a new temporary panel-new.xml file.

-Now the new and old panel files need to be put together. Run the script OR-XML-Join-V1.ahk in Scite4AHK ((you can download it from: http://heinert.myqnapcloud.com/OR/ ). It may take 60s or so to run. This generates a new panel.xml file in c:\Temp\New combining the old panel.xml and panel-new.xml. It also copies the controller.xml file to the C:\Temp\New directory and all the old *.png file to c:\Temp\New

-Now it is time to scale the images. Start Gimp. Go to Filter-Batch Process. This opens David's Batch Processor. Click Add Files. Add all *.png files from C:\Temp. Then click on the Resize Tab Click Enable. Click Relative. Click Keep Aspect. On the X Scale put in your calculated scale factor (in our case 0.6). Click Output. Click PNG. Click on the tab Rename. Click Select Dir. Then select the directory C:\Temp\New as the destination directory. The important bit is that you also have to "Add Postfix" the name of the new panel. In our Case Mobile, so you need to put into Add Postfix "-Mobile" (don't forget the dash). Then press start to start the batch process.

-Now copy all the files in C:\Temp\New back into C:\OpenRemote\webapps\controller.

-Restart the controller. Done. You should now find the old Panel as well as the new Panel "Mobile", which should be identical to the old panel apart from it being scaled at a factor of 0.6

Document generated by Confluence on Jun 05, 2016 09:30