It is currently Fri Aug 23, 2019 12:08 pm

All times are UTC + 1 hour




Post new topic Reply to topic  [ 4 posts ] 
Author Message
 Post subject: HTML/JS Editor with live preview pane
PostPosted: Mon Aug 12, 2019 8:53 pm 
Offline
Enthusiast
Enthusiast

Joined: Wed Nov 09, 2011 8:58 am
Posts: 452
Just a quick start, feel free to improve. (Uses the IE11 engine to provide support for HTML 5 and modern JS)

Code:
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

_________________
Warning - Proud GOTO lover ahead!


Last edited by firace on Tue Aug 13, 2019 6:49 am, edited 2 times in total.

Top
 Profile  
Reply with quote  
 Post subject: Re: HTML/JS Editor with live preview pane
PostPosted: Mon Aug 12, 2019 8:55 pm 
Offline
Enthusiast
Enthusiast

Joined: Wed Nov 09, 2011 8:58 am
Posts: 452
Examples (paste into the editorgadget to view the result):

Example 1 (Basic HTML)

Code:
<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:

<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>


_________________
Warning - Proud GOTO lover ahead!


Top
 Profile  
Reply with quote  
 Post subject: Re: HTML/JS Editor with live preview pane
PostPosted: Tue Aug 13, 2019 6:05 am 
Offline
Addict
Addict
User avatar

Joined: Wed Apr 30, 2003 8:15 am
Posts: 982
Location: Germany
Very handy tool. Thx for sharing :)

_________________
"Daddy, I'll run faster, then it is not so far..."


Top
 Profile  
Reply with quote  
 Post subject: Re: HTML/JS Editor with live preview pane
PostPosted: Fri Aug 16, 2019 3:22 pm 
Offline
User
User

Joined: Fri Aug 16, 2013 2:52 pm
Posts: 68
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.

_________________
This signature was removed by [removed] for your own safety.


Top
 Profile  
Reply with quote  
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 4 posts ] 

All times are UTC + 1 hour


Who is online

Users browsing this forum: No registered users and 5 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Search for:
Jump to:  

 


Powered by phpBB © 2008 phpBB Group
subSilver+ theme by Canver Software, sponsor Sanal Modifiye