HTML/JS Editor with live preview pane

firace · Post by **firace** » Mon Aug 12, 2019 8:53 pm

Just a quick start, feel free to improve. (Uses the IE11 engine to provide support for HTML 5 and modern JS)

Enumeration
  #EditArea :  #PreviewPane
EndEnumeration

Define.s regkeyName, dwLabel, statusMsg, keyResult.i
Define.l dwValue, dwValueCheck, bufferSize

regkeyName = "Software\Microsoft\Internet Explorer\Main\FeatureControl\Feature_Browser_Emulation\"
dwLabel = GetFilePart(ProgramFilename())
dwValue = 11001 
bufferSize = SizeOf(Long)

RegOpenKeyEx_(#HKEY_CURRENT_USER, regkeyName, 0, #KEY_ALL_ACCESS, @keyResult) 
RegSetValueEx_(keyResult, @dwLabel, 0, #REG_DWORD, @dwValue, SizeOf(Long))


source$ = "<font color = red>Hello World!</font>"
title$  = "HTML/JS Sandbox"

Window_1 = OpenWindow(#PB_Any, 70, 70, 800, 520, "", #PB_Window_SystemMenu)
AddWindowTimer(Window_1, 1, 500)


Procedure FillList()
  Shared source$, title$, Window_1 : source$ = GetGadgetText(#EditArea) 
  SetWindowTitle(window_1, title$ + " - " + Len(source$) + "ch")
EndProcedure


EditorGadget(#EditArea,     0,                   0,WindowWidth(Window_1)/2,WindowHeight(Window_1) + 1)
WebGadget(#PreviewPane, WindowWidth(Window_1)/2, 1,WindowWidth(Window_1)/2,WindowHeight(Window_1),"")

LoadFont(1, "Courier New", 9) : SetGadgetFont(#EditArea, FontID(1))

SetGadgetText(#EditArea, source$ ) : SetActiveGadget(#EditArea)
BindGadgetEvent(#EditArea,@FillList())

Repeat 
  Select WaitWindowEvent()
    Case #PB_Event_CloseWindow :   End   
    Case #PB_Event_Timer :     If source$ <> GetGadgetItemText(#PreviewPane, #PB_Web_HtmlCode) :   SetGadgetItemText(#PreviewPane,#PB_Web_HtmlCode,source$) : EndIf 
  EndSelect
Forever

firace · Post by **firace** » Mon Aug 12, 2019 8:55 pm

Examples (paste into the editorgadget to view the result):

Example 1 (Basic HTML)

Code: Select all

<body bgcolor=#DBDBDB>

<font face=consolas>

<h1> Welcome </h1>
<font color=green>Hello World!</font> <br>
<font color=blue>Hello World!</font>

Example 2 (JS Clock - original code by Ken Fyrstenberg Nilsen)

Code: Select all


<script type="text/javascript">
window.onload=function(){


var ctx = clock.getContext('2d'),
    pi2 = Math.PI * 2;

/// make 0 degree point up
ctx.translate(ctx.canvas.width * 0.5, ctx.canvas.height * 0.5);
ctx.rotate(-0.5 * Math.PI);
ctx.translate(-ctx.canvas.width * 0.5, -ctx.canvas.height * 0.5);

ctx.strokeStyle = '#000';
ctx.lineCap = 'round';

/// start
(function loop() {
    renderClock()
    requestAnimationFrame(loop);
})();

function renderClock() {

    var angles = timeToAngles(),
        cx = ctx.canvas.width * 0.5,
        cy = ctx.canvas.width * 0.5,
        lh = cx * 0.45,
        lm = cx * 0.8,
        ls = cx * 0.9,
        pos;
    
    /// face
    ctx.clearRect(0, 0, cx*2, cy*2);
    ctx.beginPath();
    ctx.arc(cx, cy, cx - ctx.lineWidth - 1, 0, pi2);
    
    /// hours
    pos = lineToAngle(cx, cy, lh, angles.h);
    ctx.moveTo(cx, cy);
    ctx.lineTo(pos.x, pos.y);

    /// minutes
    pos = lineToAngle(cx, cy, lm, angles.m);
    ctx.moveTo(cx, cy);
    ctx.lineTo(pos.x, pos.y);

    ctx.lineWidth = 5;
    ctx.stroke();
    ctx.beginPath();
    
    /// seconds
    pos = lineToAngle(cx, cy, ls, angles.s);
    ctx.moveTo(cx, cy);
    ctx.lineTo(pos.x, pos.y);

    ctx.lineWidth = 2;
    ctx.stroke();
}

/// (c) Ken Fyrstenberg Nilsen (CC3.0. Attribute)
function timeToAngles() {
    
    var os = 1 / 60,                  /// mini-step
        time = new Date(),            /// get current time
        h = time.getHours(),          /// get current hour
        m = time.getMinutes(),        /// get current minutes
        s = time.getSeconds(),        /// get current seconds
        ms = time.getMilliseconds(),  /// get current milliseconds
        sa, ma, ha;                   /// for calc. angles
    
    sa = pi2 * ((s / 60) + ((os) * ms * 0.001));         /// second's angle
    ma = pi2 * ((m / 60) + ((os) * s / 60));             /// minute's angle
    ha = pi2 * (((h % 12) / 12) + (( 1 / 12) * m / 60)); /// hour's angle
    
    return {
        h: ha,
        m: ma,
        s: sa
    }
}

function lineToAngle(x, y, length, angle) {
    return {
        x: x + length * Math.cos(angle),
        y: y + length * Math.sin(angle)
    }
}

} 

</script>


<body>
  <canvas id="clock" width="366" height="366"></canvas>
</body>

dige · Post by **dige** » Tue Aug 13, 2019 6:05 am

Very handy tool. Thx for sharing

Karellen · Post by **Karellen** » Fri Aug 16, 2019 3:22 pm

Thanks, nice idea! Also a good examle of how easy it is with PB to drop some lines and have a working application to try something or make a little tool, one thing I really love about PB.

PureBasic Forums - English

HTML/JS Editor with live preview pane

HTML/JS Editor with live preview pane

Re: HTML/JS Editor with live preview pane

Re: HTML/JS Editor with live preview pane

Re: HTML/JS Editor with live preview pane